diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
new file mode 100644
index 00000000..07cbc18a
--- /dev/null
+++ b/1-js/01-getting-started/1-intro/article.md
@@ -0,0 +1,121 @@
+# An introduction to JavaScript
+
+Let's see what's so special about JavaScript, what we can achieve with it and which other technologies play well with it.
+
+## What is JavaScript?
+
+*JavaScript* was initially created to *"make webpages alive"*.
+
+The programs in this language are called *scripts*. They can be written right in the HTML and execute automatically as the page loads.
+
+Scripts are provided and executed as a plain text. They don't need a special preparation or a compilation to run.
+
+In this aspect, JavaScript is very different from another language called [Java](http://en.wikipedia.org/wiki/Java).
+
+```smart header="Why <u>Java</u>Script?"
+When JavaScript was created, it initially had another name: "LiveScript". But Java language was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help.
+
+But as it evolved, JavaScript became a fully independent language, with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all.
+```
+
+At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where exists a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).
+
+The browser has an embedded engine, sometimes it's also called a "JavaScript virtual machine".
+
+Different engines have different "codenames", for example:
+
+- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera.
+- [Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) -- in Firefox.
+- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
+
+These terms above are good to remember, because they are used in developer articles in the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera.
+
+```smart header="How the engines work?"
+
+Engines are complicated. But the basics are easy.
+
+1. The script is written and distributed as a plain text (can be compressed/optimized by so-called "javascript minifiers").
+2. The engine (embedded if it's a browser) reads the script ("parses") and converts ("compiles") it to the machine language.
+3. And then it runs, pretty fast.
+
+The engine applies optimizations on every stage of the process. It even watches the script as it runs, analyzes the data which flows through it and applies optimizations to the machine-code basing on that knowledge.
+```
+
+## What can in-browser JavaScript do?
+
+The modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it.
+
+The capabilities greatly depend on the environment which runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allows JavaScript to read/write arbitrary files, perform network requests etc.
+
+In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
+
+For instance, in-browser JavaScript is able to:
+
+- Add new HTML to the page, change the existing content, modify styles.
+- React on user actions, run on mouse clicks, pointer movements, key presses.
+- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies).
+- Get and set cookies, ask questions to the visitor, show messages.
+- Remember the data on the browser side ("local storage").
+
+## What can in-browser JavaScript NOT do?
+
+JavaScript abilities in the browser are limited for the sake of the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data.
+
+The examples of such restrictions are:
+
+- JavaScript on the webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS system functions.
+
+    Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `<input>` tag.
+
+    There are ways to interact with camera/microphone and other devices, but they require an explicit user's permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency).
+- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other if they come from different sites (from a different domain, protocol or port).
+
+    That is called a "Same Origin Policy". To workaround that, *both pages* must contain a special JavaScript code that handles data exchange.
+
+    The limitation is again for user's safety. A page from `http://anysite.com` which a user has opened occasionaly must not be able to open or access another browser tab with the URL `http://gmail.com` and steal information from there.
+- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires the explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations.
+
+![](limitations.png)
+
+Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow installing plugin/extensions which may get extended permissions.
+
+## What makes JavaScript unique?
+
+There are at least *three* great things about JavaScript:
+
+```compare
++ Full integration with HTML/CSS.
++ Simple things done simply.
++ Supported by all major browsers and enabled by default.
+```
+
+Combined, these 3 things only exist in JavaScript and no other browser technology.
+
+That's what makes JavaScript unique. That's why it is the most widespread way of creating browser interfaces.
+
+While planning to learn a new technology, it's beneficial to check its perspectives. So let's move on to the modern trends that include new languages and browser abilities.
+
+
+## Languages "over" JavaScript
+
+The syntax of JavaScript does not suit everyone's needs. Different people want different features.
+
+That's normal, because projects and requirements are different for everyone.
+
+So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
+
+The modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language, autoconverting it "under the hood".
+
+Examples of such languages:
+
+- [CoffeeScript](http://coffeescript.org/) is a "syntax sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby guys like it.
+- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. It is developed by Microsoft.
+- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps). It was initially offered by Google as a replacement for JavaScript, but as of now, browsers require it to be transpiled to JavaScript just like the ones above.
+
+There are more. Of course even if we use one of those languages, we should also know JavaScript, to really understand what we're doing.
+
+## Summary
+
+- JavaScript was initially created as a browser-only language, but now it is used in many other environments as well.
+- At this moment, JavaScript has a unique position as a most widely adopted browser language with full integration with HTML/CSS.
+- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
diff --git a/1-js/01-getting-started/1-intro/limitations.png b/1-js/01-getting-started/1-intro/limitations.png
new file mode 100644
index 00000000..d5d315c5
Binary files /dev/null and b/1-js/01-getting-started/1-intro/limitations.png differ
diff --git a/1-js/01-getting-started/1-intro/limitations@2x.png b/1-js/01-getting-started/1-intro/limitations@2x.png
new file mode 100644
index 00000000..01483997
Binary files /dev/null and b/1-js/01-getting-started/1-intro/limitations@2x.png differ
diff --git a/1-js/01-getting-started/2-code-editors/article.md b/1-js/01-getting-started/2-code-editors/article.md
new file mode 100644
index 00000000..8a835e61
--- /dev/null
+++ b/1-js/01-getting-started/2-code-editors/article.md
@@ -0,0 +1,62 @@
+# Code editors
+
+A code editor is the place where a programmer spends most of his time. 
+
+There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.
+
+[cut]
+
+## IDE
+
+The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) means a powerful editor with many features that usually operates on a "whole project". As said, that's not just an editor, but a full-scale "development environment".
+
+An IDE loads the project (can be many files), and then allows to navigate between files, provides autocompletion based on the whole project, integrates with version management system (like [git](https://git-scm.com/)), with testing environment and other "project-level" stuff.
+
+If you haven't considered selecting an IDE, look at the following variants:
+
+- IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.
+- Visual Studio is fine if you're a .NET developer.
+- Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.
+- [Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).
+- [Netbeans](http://netbeans.org/).
+
+All of them with the exception of Visual Studio are cross-platform. Visual Studio is now available for Mac and for Windows (https://www.visualstudio.com/vs/visual-studio-mac/)
+
+Most IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
+
+## Lightweight editors
+
+"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
+
+They are mainly used to instantly open and edit a file.
+
+The main difference between a "lightweight editor" and an "IDE" is that IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
+
+In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
+
+The following options deserve your attention:
+
+- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
+- [Atom](https://atom.io/) (cross-platform, free).
+- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+- Vim, Emacs are cool, if you know how to use them.
+
+## My favorites
+
+The personal preference of the author is to have both an IDE for projects and a lightweight editor for quick and easy file editing.
+
+I'm using:
+
+- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.
+- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/).
+
+If you don't know what to choose -- you can consider these ones.
+
+## Let's not argue
+
+The editors in the lists above are those that me or my friends -- good developers are using for a long time and are happy with.
+
+There are other great editors in our big world, please choose the one you like the most.
+
+The choice of an editor, like any other tool, is individual and depends on your projects, habits, personal preferences.
diff --git a/1-js/01-getting-started/3-devtools/article.md b/1-js/01-getting-started/3-devtools/article.md
new file mode 100644
index 00000000..544b6175
--- /dev/null
+++ b/1-js/01-getting-started/3-devtools/article.md
@@ -0,0 +1,60 @@
+# Developer console
+
+A code is prone to errors. You are quite likely to have errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
+
+But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
+
+To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
+
+Most often developers lean towards Chrome or Firefox for the development, because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catching-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
+
+Developer tools are really powerful, there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands.
+
+[cut]
+
+## Google Chrome
+
+Open the page [bug.html](bug.html).
+
+There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
+
+Press the key `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
+
+The developer tools will open on the Console tab by default.
+
+It looks somewhat like this:
+
+![chrome](chrome.png)
+
+The exact look of developer tools depends on your version of Chrome. It changes from time to time, but should be similar.
+
+- 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 occured.
+
+Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press `key:Enter` to run them (`key:Shift+Enter` to input multiline commands).
+
+Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
+
+
+## Firefox, Edge and others
+
+Most other browsers use `key:F12` to open developer tools.
+
+The look & feel of them is quite similar. Once you know how to use one of them (can start with Chrome), you can easily switch to another.
+
+## Safari
+
+Safari (Mac browser, not supported for Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
+
+Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom of it:
+
+![safari](safari.png)
+
+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.
+
+## Summary
+
+- Developer tools allow us to see errors, run commands, examine variables and much more.
+- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
+
+Now we have the environment ready. In the next section we get down to JavaScript.
diff --git a/1-js/01-getting-started/3-devtools/bug.html b/1-js/01-getting-started/3-devtools/bug.html
new file mode 100644
index 00000000..edb02375
--- /dev/null
+++ b/1-js/01-getting-started/3-devtools/bug.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  There is an error in the script on this page.
+  <script>
+    lalala
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/1-js/01-getting-started/3-devtools/chrome.png b/1-js/01-getting-started/3-devtools/chrome.png
new file mode 100644
index 00000000..fd029b74
Binary files /dev/null and b/1-js/01-getting-started/3-devtools/chrome.png differ
diff --git a/1-js/01-getting-started/3-devtools/chrome@2x.png b/1-js/01-getting-started/3-devtools/chrome@2x.png
new file mode 100644
index 00000000..b87404a8
Binary files /dev/null and b/1-js/01-getting-started/3-devtools/chrome@2x.png differ
diff --git a/1-js/01-getting-started/3-devtools/safari.png b/1-js/01-getting-started/3-devtools/safari.png
new file mode 100644
index 00000000..37598a26
Binary files /dev/null and b/1-js/01-getting-started/3-devtools/safari.png differ
diff --git a/1-js/01-getting-started/3-devtools/safari@2x.png b/1-js/01-getting-started/3-devtools/safari@2x.png
new file mode 100644
index 00000000..c59cebef
Binary files /dev/null and b/1-js/01-getting-started/3-devtools/safari@2x.png differ
diff --git a/1-js/01-getting-started/index.md b/1-js/01-getting-started/index.md
new file mode 100644
index 00000000..b327c786
--- /dev/null
+++ b/1-js/01-getting-started/index.md
@@ -0,0 +1,3 @@
+# An introduction
+
+About the JavaScript language and the environment to develop with it.
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
similarity index 100%
rename from 1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.md
rename to 1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html
new file mode 100644
index 00000000..45e6744b
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    alert( "I'm JavaScript!" );
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md
new file mode 100644
index 00000000..afed6a91
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# Show an alert
+
+Create a page that shows a message "I'm JavaScript!".
+
+Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
+
+[demo src="solution"]
+
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js
new file mode 100644
index 00000000..4de72597
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js
@@ -0,0 +1 @@
+alert("I'm JavaScript!");
\ No newline at end of file
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html
new file mode 100644
index 00000000..10895f8f
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script src="alert.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
new file mode 100644
index 00000000..f42c41e6
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
@@ -0,0 +1,8 @@
+The HTML code:
+
+[html src="index.html"]
+
+For the file `alert.js` in the same folder:
+
+[js src="alert.js"]
+
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md
new file mode 100644
index 00000000..26168d6a
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Show an alert with an external script
+
+Take the solution of the previous task <info:task/hello-alert>. Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
+
+Open the page, ensure that the alert works.
diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
new file mode 100644
index 00000000..631d8bd2
--- /dev/null
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -0,0 +1,137 @@
+# Hello, world!
+
+The tutorial that you're reading is about core JavaScript, which is platform-independent. Further on, you will learn Node.JS and other platforms that use it.
+
+But, we need a working environment to run our scripts, and, just because this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum, so that you don't spend time on them if you plan to concentrate on another environment like Node.JS. On the other hand, browser details are explained in detail in the [next part](/ui) of the tutorial.
+
+So first, let's see how to attach a script to the webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
+
+
+[cut]
+
+## The "script" tag
+
+JavaScript programs can be inserted in any place of HTML with the help of the `<script>` tag.
+
+For instance:
+
+```html run height=100
+<!DOCTYPE HTML>
+<html>
+
+<body>
+
+  <p>Before the script...</p>
+
+*!*
+  <script>
+    alert( 'Hello, world!' );
+  </script>
+*/!*
+
+  <p>...After the script.</p>
+
+</body>
+
+</html>
+```
+
+```online
+You can run the example clicking on a "Play" button in it's right-top corner.
+```
+
+The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
+
+
+## The modern markup
+
+The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in the old code:
+
+ The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
+
+ : The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
+
+ The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
+  : This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.
+
+Comments before and after scripts.
+: In really ancient books and guides, one may find comments inside `<script>`, like this:
+
+    ```html no-beautify
+    <script type="text/javascript"><!--
+        ...
+    //--></script>
+    ```
+
+    These comments were supposed to hide the code from an old browser that did't know about a `<script>` tag. But all browsers born in the past 15+ years don't have any issues. It is only mentioned here, because it serves as a sign. If you see that somewhere -- that code is probably really old and not worth looking into.
+
+
+## External scripts
+
+If we have a lot of JavaScript code, we can put it into a separate file.
+
+The script file is attached to HTML with `src` attribute:
+
+```html
+<script src="/path/to/script.js"></script>
+```
+
+Here `/path/to/script.js` is an absolute path to the file with the script (from the site root).
+
+It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"` from the current folder.
+
+We can give a full URL as well, for instance:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
+```
+
+To attach several scripts, use multiple tags:
+
+```html
+<script src="/js/script1.js"></script>
+<script src="/js/script2.js"></script>
+…
+```
+
+```smart
+As a rule, only simplest scripts are put into HTML. More complex ones reside in separate files.
+
+The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache).
+
+After this, other pages which want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
+
+That saves traffic and makes pages faster.
+```
+
+````warn header="If `src` is set, the script content is ignored."
+A single `<script>` tag may not have both, `src` attribute and the code inside.
+
+This won't work:
+
+```html
+<script *!*src*/!*="file.js">
+  alert(1); // the content is ignored, because src is set
+</script>
+```
+
+We must choose: either it's an external `<script src="…">` or a regular `<script>` with code.
+
+The example above can be split into two scripts to work:
+
+```html
+<script src="file.js"></script>
+<script>
+  alert(1);
+</script>
+```
+````
+
+## Summary
+
+- We can use a `<script>` tag to add JavaScript code to the page.
+- The `type` and `language` attributes are not required.
+- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`.
+
+
+There is much more about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many.
diff --git a/1-js/02-first-steps/01-hello-world/hello-world-render.png b/1-js/02-first-steps/01-hello-world/hello-world-render.png
new file mode 100644
index 00000000..ffe81069
Binary files /dev/null and b/1-js/02-first-steps/01-hello-world/hello-world-render.png differ
diff --git a/1-js/02-first-steps/01-hello-world/hello-world-render@2x.png b/1-js/02-first-steps/01-hello-world/hello-world-render@2x.png
new file mode 100644
index 00000000..c4411027
Binary files /dev/null and b/1-js/02-first-steps/01-hello-world/hello-world-render@2x.png differ
diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md
new file mode 100644
index 00000000..3a5aa88e
--- /dev/null
+++ b/1-js/02-first-steps/02-structure/article.md
@@ -0,0 +1,161 @@
+# Code structure
+
+The first thing to study is the building blocks of the code.
+
+[cut]
+
+## Statements
+
+Statements are syntax constructs and commands that perform actions.
+
+We've already seen a statement `alert('Hello, world!')`, which shows the message.
+
+We can have as many statements in the code as we want. Another statement can be separated with a semicolon.
+
+For example, here we split the message into two:
+
+```js run no-beautify
+alert('Hello'); alert('World');
+```
+
+Usually each statement is written on a separate line -- thus the code becomes more readable:
+
+```js run no-beautify
+alert('Hello');
+alert('World');
+```
+
+## Semicolons [#semicolon]
+
+A semicolon may be omitted in most cases when a line break exists.
+
+This would also work:
+
+```js run no-beautify
+alert('Hello')
+alert('World')
+```
+
+Here JavaScript interprets the line break as an "implicit" semicolon. That's also called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
+
+**In most cases a newline implies a semicolon. But "in most cases" does not mean "always"!**
+
+There are cases when a newline does not mean a semicolon, for example:
+
+```js run no-beautify
+alert(3 +
+1
++ 2);
+```
+
+The code outputs `6`, because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", no semicolon required. And in this case that works as intended.
+
+**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
+
+Errors which occur in such cases are quite hard to find and fix.
+
+````smart header="An example of an error"
+If you're curious to see a concrete example of such an error, check this code out:
+
+```js run
+[1, 2].forEach(alert)
+```
+
+No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later, for now -- it does not matter. Let's just remember the result: it shows `1`, then `2`.
+
+Now let's add an `alert` before the code. And *not* finish it with a semicolon:
+
+```js run no-beautify
+alert("There will be an error")
+
+[1, 2].forEach(alert)
+```
+
+Now if we run it, only the first `alert` is shown, and then we have an error!
+
+But everything is fine again if we add a semicolon after `alert`:
+```js run
+alert("All fine now");
+
+[1, 2].forEach(alert)  
+```
+
+Now we have the "All fine now" message and then `1` and `2`.
+
+
+The error in the no-semicolon variant occurs because JavaScript does not imply a semicolon before square brackets `[...]`.
+
+So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement, that's how the engine sees it:
+
+```js run no-beautify
+alert("There will be an error")[1, 2].forEach(alert)
+```
+
+But it should be two separate statements, not a single one. Such a merging in this case is just wrong, hence the error. There are other situations when such thing happens.
+````
+
+It's recommended to put semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of time. But it's safer, especially for a beginner -- to put them.
+
+## Comments
+
+As the time goes, the program becomes more and more complex. It becomes necessary to add *comments* which describe what happens and why.
+
+Comments can be put into any place of the script. They don't affect the execution, because the engine simply ignores them.
+
+**One-line comments start with the two forward slash characters `//`.**
+
+The rest of the line is a comment. It may occupy a full line of its own or follow a statement.
+
+Like here:
+```js run
+// This comment occupies a line of its own
+alert('Hello');
+
+alert('World'); // This comment follows the statement
+```
+
+**Multiline comments start with a forward slash and an asterisk <code>"/&#42;"</code> and end with an asterisk and a forward slash <code>"&#42;/"</code>.**
+
+Like this:
+
+```js run
+/* An example with two messages.
+This is a multiline comment.
+*/
+alert('Hello');
+alert('World');
+```
+
+The content of comments is ignored, so if we put a code inside <code>/&#42; ... &#42;/</code> it won't execute.
+
+Sometimes it comes handy to temporarily disable a part of the code:
+
+```js run
+/* Commenting out the code
+alert('Hello');
+*/
+alert('World');
+```
+
+```smart header="Use hotkeys!"
+In most editors a line of code can be commented out by `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a code and press the hotkey). For Mac try `key:Cmd` instead of `key:Ctrl`.
+```
+
+````warn header="Nested comments are not supported!"
+There may not be `/*...*/` inside another `/*...*/`.
+
+This code will die with an error:
+
+```js run no-beautify
+/*
+  /* nested comment ?!? */
+*/
+alert( 'World' );
+```
+````
+
+Please, don't hesitate to comment your code.
+
+Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to production server. They remove comments, so comments do not appear in the working scripts. So, the comments do not have any negative effects on production at all.
+
+Further in the tutorial, there will be a chapter <info:coding-style> that also explains how to write better comments.
diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md
new file mode 100644
index 00000000..e70124c6
--- /dev/null
+++ b/1-js/02-first-steps/03-strict-mode/article.md
@@ -0,0 +1,70 @@
+# The modern mode, "use strict"
+
+For a long time JavaScript was evolving without compatibility issues. New features were added to the language, but the old functionality did not change.
+
+That had the benefit of never breaking the existing codes. But the downside was that any mistake or an imperfect decision made by JavaScript creators got stuck in the language forever.
+
+It had been so until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most modifications are off by default. One needs to enable them explicitly with a special directive `"use strict"`.
+
+
+[cut]
+
+## "use strict"
+
+The directive looks like a string: `"use strict"` or `'use strict'`. When it is located on the top of the script, then the whole script works the "modern" way.
+
+For example
+
+```js
+"use strict";
+
+// this code works the modern way
+...
+```
+
+```warn header="There's no way to cancel `use strict`"
+There is no directive `"no use strict"` or alike, that would return the old behavior.
+
+Once we enter the strict mode, there's no return.
+```
+
+````warn header="Ensure that 'use strict' is at the top"
+Please make sure that `"use strict"` is on the top of the script, otherwise the strict mode may not be enabled.
+
+There is no strict mode here:
+
+```js no-strict
+alert("some code");
+// "use strict" below is ignored, must be on the top
+
+"use strict";
+
+// strict mode is not activated
+```
+
+Only comments may appear above `"use strict"`.
+````
+
+
+```smart header="`use strict` for functions"
+We will learn functions (a way to group commands) soon.
+
+Looking ahead let's just note that `"use strict"` can be put at the start of a function (most kinds of functions) instead of the whole script. Then strict mode is enabled in that function only. But usually people use it for the whole script.
+```
+
+
+## Start with "use strict"
+
+It is recommended to always start a script with `"use strict"`, for the following reasons:
+
+1. First, all modern browsers support it. Only outdated ones like Internet Explorer 9 and below do not.
+2. Second, the modern JavaScript actually forces us into the strict mode. There are several modern language features like "classes" and "modules" that enable strict mode automatically. So, it's hard to evade it.
+
+Here in the tutorial, all code (where not explicitly noted otherwise) works in `"use strict"`. We concentrate on modern JavaScript. But there will be notes about what happens without `"use strict"`, so that you can understand what's going on if you forget it or if you're working with an outdated script that doesn't have it.
+
+## Summary
+
+- The `"use strict"` directive switches the engine to the "modern" mode, changing the behavior of some built-in features.
+- Several modern features of the language enable `"use strict"` implicitly, so it's quite hard to evade it.
+
+It's always recommended to start scripts with `"use strict"`. All examples in this book assume so, unless (very rarely) specified otherwise.
diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md
new file mode 100644
index 00000000..9249e1c8
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md
@@ -0,0 +1,12 @@
+In the code below, each line corresponds to the item in the task list.
+
+```js run
+let admin, name; // can declare two variables at once
+
+name = "John";
+
+admin = name;
+
+alert( admin ); // "John"
+```
+
diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/task.md b/1-js/02-first-steps/04-variables/1-hello-variables/task.md
new file mode 100644
index 00000000..84f009e8
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/1-hello-variables/task.md
@@ -0,0 +1,10 @@
+importance: 2
+
+---
+
+# Working with variables
+
+1. Declare two variables: `admin` and `name`.
+2. Assign the value `"John"` to `name`.
+3. Copy the value from `name` to `admin`.
+4. Show the value of `admin` using `alert` (must output "John").
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
new file mode 100644
index 00000000..69aa3558
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
@@ -0,0 +1,21 @@
+First, the variable for the name of our planet.
+
+That's simple:
+
+```js
+let ourPlanetName = "Earth";
+```
+
+Note, we could use a shorter name `planet`, but it might be not obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong.
+
+Second, the name of the current visitor:
+
+```js
+let currentUserName = "John";
+```
+
+Again, we could shorten that to `userName` if we know for sure that the user is current.
+
+Modern editors and autocomplete make long variable names easy to write. Don't save on them. A name with 3 words in it is fine.
+
+And if your editor does not have proper autocompletion, get [a new one](/editors).
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/task.md b/1-js/02-first-steps/04-variables/2-declare-variables/task.md
new file mode 100644
index 00000000..21631e26
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/task.md
@@ -0,0 +1,8 @@
+importance: 3
+
+---
+
+# Giving the right name
+
+1. Create the variable with the name of our planet. How would you name such a variable?
+2. Create the variable to store the name of the current visitor. How would you name that variable?
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
new file mode 100644
index 00000000..f3a96c69
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
@@ -0,0 +1,5 @@
+We generally use upper case for constants that are "hard-coded". Or, in other words, when the value is known prior to execution and directly written into the code.
+
+In this code, `birthday` is exactly like that. So we could use the upper case for it.
+
+In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`, it is calculated, so we should keep the lower case for it.
\ No newline at end of file
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
new file mode 100644
index 00000000..5fd18f90
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
@@ -0,0 +1,24 @@
+importance: 4
+
+---
+
+# Uppercase const?
+
+Examine the following code:
+
+```js
+const birthday = '18.04.1982';
+
+const age = someCode(birthday);
+```
+
+Here we have a constant `birthday` date and the `age` is calculated from `birthday` with the help of some code (it is not provided for shortness, and because details don't matter here).
+
+Would it be right to use upper case for `birthday`? For `age`? Or even for both?
+
+```js
+const BIRTHDAY = '18.04.1982'; // make uppercase?
+
+const AGE = someCode(BIRTHDAY); // make uppercase?
+```
+
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
new file mode 100644
index 00000000..c9b4b270
--- /dev/null
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -0,0 +1,332 @@
+# Variables
+
+Most of the time, a script needs to work with information. If it's an online-shop -- that's going to be the goods and a shopping cart. If it's a chat -- users, messages and so on.
+
+Variables are used to store the information.
+
+[cut]
+
+## A variable
+
+A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors and other data.
+
+To create a variable in JavaScript, we need to use the `let` keyword.
+
+The statement below creates (in other words: *declares* or *defines*) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now we can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+*!*
+message = 'Hello'; // store the string
+*/!*
+```
+
+The string is now saved into the memory area associated with the variable. We can access it using the variable name:
+
+```js run
+let message;
+message = 'Hello!';
+
+*!*
+alert(message); // shows the variable content
+*/!*
+```
+
+To be concise we can merge the variable declaration and assignment into a single line:
+
+```js run
+let message = 'Hello!'; // define the variable and assign the value
+
+alert(message); // Hello!
+```
+
+We can also declare multiple variables in one line:
+
+```js no-beautify
+let user = 'John', age = 25, message = 'Hello';
+```
+
+That might seem shorter, but it's not recommended. For the sake of better readability, please use a single line per variable.
+
+The multiline variant is a bit longer, but easier to read:
+
+```js
+let user = 'John';
+let age = 25;
+let message = 'Hello';
+```
+
+Some people also write many variables like that:
+```js no-beautify
+let user = 'John',
+  age = 25,
+  message = 'Hello';
+```
+
+...Or even in the "comma-first" style:
+
+```js no-beautify
+let user = 'John'
+  , age = 25
+  , message = 'Hello';
+```
+
+Technically, all these variants do the same. So, it's a matter of personal taste and aesthetics.
+
+
+````smart header="`var` instead of `let`"
+In older scripts you may also find another keyword: `var` instead of `let`:
+
+```js
+*!*var*/!* message = 'Hello';
+```
+
+The `var` keyword is *almost* the same as `let`. It also declares a variable, but in a slightly different, "old-school" fashion.
+
+There are subtle differences between `let` and `var`, but they do not matter for us yet. We'll cover them in detail later, in the chapter <info:var>.
+````
+
+## A real-life analogy
+
+We can easily grasp the concept of a "variable" if we imagine it as a "box" for data, with a unique-named sticker on it.
+
+For instance, the variable `message` can be imagined as a box labelled `"message"` with the value `"Hello!"` in it:
+
+![](variable.png)
+
+We can put any value into the box.
+
+Also we can change it. The value can be changed as many times as needed:
+
+```js run
+let message;
+
+message = 'Hello!';
+
+message = 'World!'; // value changed
+
+alert(message);
+```
+
+When the value is changed, the old data is removed from the variable:
+
+![](variable-change.png)
+
+We can also declare two variables and copy data from one into the other.
+
+```js run
+let hello = 'Hello world!';
+
+let message;
+
+*!*
+// copy 'Hello world' from hello into message
+message = hello;
+*/!*
+
+// now two variables hold the same data
+alert(hello); // Hello world!
+alert(message); // Hello world!
+```
+
+```smart header="Functional languages"
+It may be interesting to know that there also exist [functional](https://en.wikipedia.org/wiki/Functional_programming) programming languages that forbid changing a variable value. For example, [Scala](http://www.scala-lang.org/) or [Erlang](http://www.erlang.org/).
+
+In such languages, once the value is stored "in the box" -- it's there forever. If we need to store something else -- the language forces to create a new box (declare a new variable), we can't reuse the old one.
+
+Though it may seem a little bit odd at the first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation infers certain benefits. Studying of such a language (even if not planning to use it soon) is recommended to broaden the mind.
+```
+
+## Variable naming [#variable-naming]
+
+There are two limitations for a variable name in JavaScript:
+
+1. The name must contain only letters, digits, symbols `$` and `_`.
+2. The first character must not be a digit.
+
+Valid names, for instance:
+
+```js
+let userName;
+let test123;
+```
+
+When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, each word starts with a capital letter: `myVeryLongName`.
+
+What's interesting -- the dollar sign `'$'` and the underscore `'_'` also can be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js run untrusted
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+alert($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js no-beautify
+let 1a; // cannot start with a digit
+
+let my-name; // a hyphen '-' is not allowed in the name
+```
+
+```smart header="Case matters"
+Variables named `apple` and `AppLE` -- are two different variables.
+```
+
+````smart header="Non-english letters are allowed, but not recommended"
+It is possible to use any language, including cyrillic letters or even hieroglyphs, like this:
+
+```js
+let имя = '...';
+let 我 = '...';
+```
+
+Technically, there is no error here, such names are allowed, but there is an international tradition to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it some time.
+````
+
+````warn header="Reserved names"
+There is a list of reserved words, which cannot be used as variable names, because they are used by the language itself.
+
+For example, words `let`, `class`, `return`, `function` are reserved.
+
+The code below gives a syntax error:
+
+```js run no-beautify
+let let = 5; // can't name a variable "let", error!
+let return = 5; // also can't name it "return", error!
+```
+````
+
+````warn header="An assignment without `use strict`"
+
+Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value, without `let`. This still works now if we don't put `use strict`, the behavior is kept for compatibility with old scripts.
+
+```js run no-strict
+// note: no "use strict" in this example
+
+num = 5; // the variable "num" is created if didn't exist
+
+alert(num); // 5
+```
+
+That's a bad practice, it gives an error in the strict mode:
+
+```js run untrusted
+"use strict";
+
+*!*
+num = 5; // error: num is not defined
+*/!*
+```
+
+````
+
+## Constants
+
+To declare a constant (unchanging) variable, one can use `const` instead of `let`:
+
+```js
+const myBirthday = '18.04.1982';
+```
+
+The variable declared using `const` are called "constants". They can not be changed. An attempt to do it would cause an error:
+
+```js run
+const myBirthday = '18.04.1982';
+
+myBirthday = '01.01.2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that the variable should never change, he can use `const` to guarantee it, and also to clearly show that fact to everyone.
+
+
+### Uppercase constants
+
+There is a widespread practice to use constants as aliases for difficult-to-remember values that are known prior to execution.
+
+Such constants are named using capitals and underscores.
+
+Like this:
+
+```js run
+const COLOR_RED = "#F00";
+const COLOR_GREEN = "#0F0";
+const COLOR_BLUE = "#00F";
+const COLOR_ORANGE = "#FF7F00";
+
+// ...when we need to pick a color
+let color = COLOR_ORANGE;
+alert(color); // #FF7F00
+```
+
+Benefits:
+
+- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`.
+- It is much easier to mistype in `"#FF7F00"` than in `COLOR_ORANGE`.
+- When reading the code -- `COLOR_ORANGE` is much more meaningful than `#FF7F00`.
+
+When should we use capitals for a constant, and when -- name them normally? Let's make that clear.
+
+Being a "constant" just means that the value never changes. But there are constants that are known prior to execution (like a hexadimal value for red), and there are those that are *calculated* in run-time, during the execution, but do not change after the assignment.
+
+For instance:
+```js
+const pageLoadTime = /* time taken by a webpage to load */;
+```
+
+The value of `pageLoadTime` is not known prior to the page load, so it's named normally. But it's still a constant, because it doesn't change after assignment.
+
+In other words, capital-named constants are only used as aliases for "hard-coded" values.  
+
+## Name things right
+
+Talking about variables, there's one more exteremely important thing.
+
+Please name the variables sensibly. Take time to think if needed.
+
+Variable naming is one of the most important and complex skills in programming. A quick glance at variable names can reveal which code is written by a beginner and which by an experienced developer.
+
+In a real project, most of the time is spent on modifying and extending the existing code base, rather than writing something completely separate from the scratch. And when we return to the code after some time of doing something else, it's much easier to find the information that is well-labelled. Or, in other words, when the variables have good names.
+
+Please spend some time thinking about the right name for a variable before declaring it. That will repay you a lot.
+
+Some good-to-follow rules are:
+
+- Use human-readable names like `userName` or `shoppingCart`.
+- Stay away from abbreviations or short names like `a`, `b`, `c`, unless you really know what you're doing.
+- Make the name maximally descriptive and concise. Examples of bad names are `data` and `value`. Such a name says nothing. It is only ok to use them if it's exceptionally obvious from the context which data or value is meant.
+- Agree on terms within the team and in your own mind. If a site visitor is called a "user" then we should name related variables like `currentUser` or `newUser`, but not `currentVisitor` or a `newManInTown`.
+
+Sounds simple? Indeed it is, but creating good descriptive-and-concise names in practice is not. Go for it.
+
+```smart header="Reuse or create?"
+And the last note. There are some lazy programmers who, instead of declaring a new variable, tend to reuse the existing ones.
+
+As the result, the variable is like a box where people throw different things without changing the sticker. What is inside it now? Who knows... We need to come closer and check.
+
+Such a programmer saves a little bit on variable declaration, but looses ten times more on debugging the code.
+
+An extra variable is good, not evil.
+
+Modern JavaScript minifiers and browsers optimize code well enough, so it won't create performance issues. Using different variables for different values can even help the engine to optimize.
+```
+
+## Summary
+
+We can declare variables to store data. That can be done using `var` or `let` or `const`.
+
+- `let` -- is a modern variable declaration. The code must be in strict mode to use `let` in Chrome (V8).
+- `var` -- is an old-school variable declaration. Normally we don't use it at all, but we'll cover subtle differences from `let` in the chapter <info:var>, just in case if you'll need them.
+- `const` -- is like `let`, but the value of variable can't be changed.
+
+Variables should be named in a way that allows to easily understand what's inside.
diff --git a/1-js/02-first-steps/04-variables/variable-change.png b/1-js/02-first-steps/04-variables/variable-change.png
new file mode 100644
index 00000000..6dd3803d
Binary files /dev/null and b/1-js/02-first-steps/04-variables/variable-change.png differ
diff --git a/1-js/02-first-steps/04-variables/variable-change@2x.png b/1-js/02-first-steps/04-variables/variable-change@2x.png
new file mode 100644
index 00000000..f57b04ab
Binary files /dev/null and b/1-js/02-first-steps/04-variables/variable-change@2x.png differ
diff --git a/1-js/02-first-steps/04-variables/variable.png b/1-js/02-first-steps/04-variables/variable.png
new file mode 100644
index 00000000..ab532d91
Binary files /dev/null and b/1-js/02-first-steps/04-variables/variable.png differ
diff --git a/1-js/02-first-steps/04-variables/variable@2x.png b/1-js/02-first-steps/04-variables/variable@2x.png
new file mode 100644
index 00000000..c9c37f03
Binary files /dev/null and b/1-js/02-first-steps/04-variables/variable@2x.png differ
diff --git a/1-js/02-first-steps/05-types/1-string-quotes/solution.md b/1-js/02-first-steps/05-types/1-string-quotes/solution.md
new file mode 100644
index 00000000..1e62735b
--- /dev/null
+++ b/1-js/02-first-steps/05-types/1-string-quotes/solution.md
@@ -0,0 +1,15 @@
+
+Backticks embed the expression inside `${...}` into the string.
+
+```js run
+let name = "Ilya";
+
+// the expression is a number 1
+alert( `hello ${1}` ); // Hello, 1
+
+// the expression is a string "name"
+alert( `hello ${"name"}` ); // Hello, name
+
+// the expression is a variable, embed it
+alert( `hello ${name}` ); // Hello, Ilya
+```
\ No newline at end of file
diff --git a/1-js/02-first-steps/05-types/1-string-quotes/task.md b/1-js/02-first-steps/05-types/1-string-quotes/task.md
new file mode 100644
index 00000000..14ea6b4d
--- /dev/null
+++ b/1-js/02-first-steps/05-types/1-string-quotes/task.md
@@ -0,0 +1,17 @@
+importance: 5
+
+---
+
+# String quotes
+
+What is the output of the script?
+
+```js
+let name = "Ilya";
+
+alert( `hello ${1}` ); // ?
+
+alert( `hello ${"name"}` ); // ?
+
+alert( `hello ${name}` ); // ?
+```
\ No newline at end of file
diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md
new file mode 100644
index 00000000..2dd1ea0d
--- /dev/null
+++ b/1-js/02-first-steps/05-types/article.md
@@ -0,0 +1,247 @@
+# Data types
+
+A variable in JavaScript can contain any data. A variable can at one moment be a string and later recieve a numeric value:
+
+```js
+// no error
+let message = "hello";
+message = 123456;
+```
+
+Programming languages that allow such thing are called "dynamically typed", meaning that there are data types, but variables are not bound to any of them.
+
+There are 7 basic data types in JavaScript. Here we'll study the basics, and in next chapters we'll talk about each of them in detail.
+
+[cut]
+
+## A number
+
+```js
+let n = 123;
+n = 12.345;
+```
+
+The *number* type serves both for integer and floating point numbers.
+
+There are many operations for numbers, e.g. multiplication `*`, division `/`, addition `+`, substraction `-` and so on.
+
+Besides regular numbers, there are so-called "special numeric values" which also belong to that type: `Infinity`, `-Infinity` and `NaN`.
+
+- `Infinity` represents the mathematical [Infinity](https://en.wikipedia.org/wiki/Infinity) ∞. It is a special value that's greater than any number.
+
+    We can get it as a result of division by zero:
+
+    ```js run
+    alert( 1 / 0 ); // Infinity
+    ```
+
+    Or just mention it in the code directly:
+
+    ```js run
+    alert( Infinity ); // Infinity
+    ```
+- `NaN` represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance:
+
+    ```js run
+    alert( "not a number" / 2 ); // NaN, such division is erroneous
+    ```
+
+    `NaN` is sticky. Any further operation on `NaN` would give `NaN`:
+
+    ```js run
+    alert( "not a number" / 2 + 5 ); // NaN
+    ```
+
+    So, if there's `NaN` somewhere in a mathematical expression, it propagates to the whole result.
+
+```smart header="Mathematical operations are safe"
+Doing maths is safe in JavaScript. We can do anything: divide by zero, treat non-numeric strings as numbers, etc.
+
+The script will never stop with a fatal error ("die"). At worst we'll get `NaN` as the result.
+```
+
+Special numeric values formally belong to the "number" type. Of course they are not numbers in a common sense of this word.
+
+We'll see more into working with numbers in the chapter <info:number>.
+
+## A string
+
+A string in JavaScript must be quoted.
+
+```js
+let str = "Hello";
+let str2 = 'Single quotes are ok too';
+let phrase = `can embed ${str}`;
+```
+
+In JavaScript, there are 3 types of quotes.
+
+1. Double quotes: `"Hello"`.
+2. Single quotes: `'Hello'`.
+3. Backticks: <code>&#96;Hello&#96;</code>.
+
+Double and single quotes are "simple" quotes. There's no difference between them in JavaScript.
+
+Backticks are "extended functionality" quotes. They allow to embed variables and expressions into a string by wrapping them in `${…}`, for example:
+
+```js run
+let name = "John";
+
+// embed a variable
+alert( `Hello, *!*${name}*/!*!` ); // Hello, John!
+
+// embed an expression
+alert( `the result is *!*${1 + 2}*/!*` ); // the result is 3
+```
+
+The expression inside `${…}` is evaluated and the result becomes a part of the string. We can put anything there: a variable like `name` or an arithmetical expression like `1 + 2` or something more complex.
+
+Please note that this only can be done in backticks, other quotes do not allow such embedding!
+```js run
+alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing)
+```
+
+We'll cover strings more thoroughly in the chapter <info:string>.
+
+```smart header="There is no *character* type."
+In some languages, there is a special "character" type for a single character. For example, in the C language and in Java it is `char`.
+
+In JavaScript, there is no such type. There's only one type: `string`. A string may consist of only one character or many of them.
+```
+
+## A boolean (logical type)
+
+The boolean type has only two values: `true` and `false`.
+
+This type is commonly used to store yes/no values: `true` means "yes, correct", and `false` means the "no, incorrect".
+
+For instance:
+
+```js
+let nameFieldChecked = true; // yes, name field is checked
+let ageFieldChecked = false; // no, age field is not checked
+```
+
+Boolean values also come as a result of comparisons:
+
+```js run
+let isGreater = 4 > 1;
+
+alert( isGreater ); // true (the comparison result is "yes")
+```
+
+We'll cover booleans more deeply later in the chapter <info:logical-operators>.
+
+## The "null" value
+
+The special `null` value does not belong to any type of those described above.
+
+It forms a separate type of its own, which contains only the `null` value:
+
+```js
+let age = null;
+```
+
+In JavaScript `null` is not a "reference to a non-existing object" or a "null pointer" like in some other languages.
+
+It's just a special value which has the sense of "nothing", "empty" or "value unknown".
+
+The code above states that the `age` is unknown or empty for some reason.
+
+## The "undefined" value
+
+The special value `undefined` stands apart. It makes a type of its own, just like `null`.
+
+The meaning of `undefined` is "value is not assigned".
+
+If a variable is declared, but not assigned, then its value is exactly `undefined`:
+
+```js run
+let x;
+
+alert(x); // shows "undefined"
+```
+
+Technically, it is possible to assign any variable to `undefined`:
+
+```js run
+let x = 123;
+
+x = undefined;
+
+alert(x); // "undefined"
+```
+
+...But it's not recommended to do that. Normally, we use `null` to write an "empty" or an "unknown" value into the variable, and `undefined` is only used for checks, to see if the variable is assigned or similar.
+
+## Objects and Symbols
+
+The `object` type is special.
+
+All other types are called "primitive", because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections data and more complex entities. We'll deal with them later in the chapter <info:object> after we know enough about primitives.
+
+The `symbol` type is used to create unique identifiers for objects. We have to mention it here for completeness, but it's better to study them after objects.
+
+## 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 make a quick check.
+
+It supports two forms of syntax:
+
+1. As an operator: `typeof x`.
+2. Function style: `typeof(x)`.
+
+In other words, it works both with the brackets or without them. The result is the same.
+
+The call to `typeof x` returns a string with the type name:
+
+```js
+typeof undefined // "undefined"
+
+typeof 0 // "number"
+
+typeof true // "boolean"
+
+typeof "foo" // "string"
+
+typeof Symbol("id") // "symbol"
+
+*!*
+typeof Math // "object"  (1)
+*/!*
+
+*!*
+typeof null // "object"  (2)
+*/!*
+
+*!*
+typeof alert // "function"  (3)
+*/!*
+```
+
+The last three lines may need additional explanations:
+
+1. `Math` is a built-in object that provides mathematical operations. We will learn it in the chapter <info:number>. Here it serves just as an example of an object.
+2. The result of `typeof null` is `"object"`. That's wrong. It is an officially recognized error in `typeof`, kept for compatibility. Of course, `null` is not an object. It is a special value with a separate type of its own. So, again, that's an error in the language.
+3. The result of `typeof alert` is `"function"`, because `alert` is a function of the language. We'll study functions in the next chapters, and we'll see that there's no special "function" type in the language. Functions belong to the object type. But `typeof` treats them differently. Formally, it's incorrect, but very convenient in practice.
+
+
+## Summary
+
+There are 7 basic types in JavaScript.
+
+- `number` for numbers of any kind: integer or floating-point.
+- `string` for strings. A string may have one more more characters, there's no separate single-character type.
+- `boolean` for `true`/`false`.
+- `null` for unknown values -- a standalone type that has a single value `null`.
+- `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
+- `object` for more complex data structures.
+- `symbol` for unique identifiers.
+
+The `typeof` operator allows to see which type is stored in the variable.
+
+- Two forms: `typeof x` or `typeof(x)`.
+- Returns a string with the name of the type, like `"string"`.
+- For `null` returns `"object"` -- that's the error in the language, it's not an object in fact.
+
+In the next chapters we'll concentrate on primitive values and once we're familiar with that, then we'll move on to objects.
diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md b/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md
new file mode 100644
index 00000000..0e1be244
--- /dev/null
+++ b/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md
@@ -0,0 +1,22 @@
+
+```js no-beautify
+"" + 1 + 0 = "10" // (1)
+"" - 1 + 0 = -1 // (2)
+true + false = 1
+6 / "3" = 2
+"2" * "3" = 6
+4 + 5 + "px" = "9px"
+"$" + 4 + 5 = "$45"
+"4" - 2 = 2
+"4px" - 2 = NaN
+7 / 0 = Infinity
+" -9\n" + 5 = " -9\n5"
+" -9\n" - 5 = -14
+null + 1 = 1 // (3)
+undefined + 1 = NaN // (4)
+```
+
+1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied.
+2. The substruction `"-"` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
+3. `null` becomes `0` after the numeric conversion.
+4. `undefined` becomes `NaN` after the numeric conversion.
diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md b/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md
new file mode 100644
index 00000000..83b295f9
--- /dev/null
+++ b/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md
@@ -0,0 +1,26 @@
+importance: 5
+
+---
+
+# Type conversions
+
+What are results of these expressions?
+
+```js no-beautify
+"" + 1 + 0
+"" - 1 + 0
+true + false
+6 / "3"
+"2" * "3"
+4 + 5 + "px"
+"$" + 4 + 5
+"4" - 2
+"4px" - 2
+7 / 0
+"  -9\n" + 5
+"  -9\n" - 5
+null + 1
+undefined + 1
+```
+
+Think well, write down and then compare with the answer.
diff --git a/1-js/02-first-steps/06-type-conversions/article.md b/1-js/02-first-steps/06-type-conversions/article.md
new file mode 100644
index 00000000..25a4fd96
--- /dev/null
+++ b/1-js/02-first-steps/06-type-conversions/article.md
@@ -0,0 +1,162 @@
+# Type Conversions
+
+Most of time, operators and functions automatically convert a value to the right type. That's called "type coercion".
+
+For example, `alert` automatically converts any value to a string to show it. Mathematical operations convert values to numbers.
+
+There are also cases when we need to explicitly convert a value to put things right.
+
+[cut]
+
+```smart header="Not talking about objects yet"
+In this chapter we don't cover objects yet. Here we study primitives first. Later, after we learn objects, we'll see how object conversion works in the chapter <info:object-toprimitive>.
+```
+
+## ToString
+
+The string conversion happens when we need a string form of a value.
+
+For example, `alert(value)` does it to show the value.
+
+We can also use a call `String(value)` function for that:
+
+```js run
+let value = true;
+alert(typeof value); // boolean
+
+*!*
+value = String(value); // now value is a string "true"
+alert(typeof value); // string
+*/!*
+```
+
+The string conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"` etc.
+
+## ToNumber
+
+Numeric conversion happens in mathematical functions and expressions automatically.
+
+For example, when division `/` is applied to non-numbers:
+
+```js run
+alert( "6" / "2" ); // 3, strings are converted to numbers
+```
+
+We can use a `Number(value)` function to explicitly convert a `value`:
+
+```js run
+let str = "123";
+alert(typeof str); // string
+
+let num = Number(str); // becomes a number 123
+
+alert(typeof num); // number
+```
+
+The explicit conversion is usually required when we read a value from a string-based source like a text form, but we expect a number to be entered.
+
+If the string is not a valid number, the result of such conversion is `NaN`, for instance:
+
+```js run
+let age = Number("an arbitrary string instead of a number");
+
+alert(age); // NaN, conversion failed
+```
+
+Numeric conversion rules:
+
+| Value |  Becomes... |
+|-------|-------------|
+|`undefined`|`NaN`|
+|`null`|`0`|
+|<code>true&nbsp;and&nbsp;false</code> | `1` and `0` |
+| `string` | Whitespaces from the start and the end are removed. Then, if the remaining string is empty, the result is `0`, otherwise -- the number is "read" from the string. An error gives `NaN`. |
+
+Examples:
+
+```js run
+alert( Number("   123   ") ); // 123
+alert( Number("123z") );      // NaN (error reading a number at "z")
+alert( Number(true) );        // 1
+alert( Number(false) );       // 0
+```
+
+Please note that `null` and `undefined` behave differently here: `null` becomes a zero, while `undefined` becomes `NaN`.
+
+````smart header="Addition '+' concatenates strings"
+Almost all mathematical operations convert values to numbers. With a notable exception of the addition `+`. If one of the added values is a string, then another one is also converted to a string.
+
+Then it concatenates (joins) them:
+
+```js run
+alert( 1 + '2' ); // '12' (string to the right)
+alert( '1' + 2 ); // '12' (string to the left)
+```
+
+That only happens when one of arguments is a string. Otherwise values are converted to numbers.
+````
+
+## ToBoolean
+
+Boolean conversion is the simplest one.
+
+It happens in logical operations (later we'll meet condition tests and other kinds of them), but also can be performed manually with the call of `Boolean(value)`.
+
+The conversion rule:
+
+- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined` and `NaN` become `false`.
+- Other values become `true`.
+
+For instance:
+
+```js run
+alert( Boolean(1) ); // true
+alert( Boolean(0) ); // false
+
+alert( Boolean("hello") ); // true
+alert( Boolean("") ); // false
+```
+
+````warn header="Please note: the string with zero `\"0\"` is `true`"
+Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript a non-empty string is always `true`.
+
+```js run
+alert( Boolean("0") ); // true
+alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)
+```
+````
+
+
+## Summary
+
+There are three most widely used type conversions: to string, to number and to boolean.
+
+**`ToString`** -- occurs when we output something, can be performed with `String(value)`. The conversion to string is usually obvious for primitive values.
+
+**`ToNumber`** -- occurs in math operations, can be performed with `Number(value)`.
+
+The conversion follows the rules:
+
+| Value |  Becomes... |
+|-------|-------------|
+|`undefined`|`NaN`|
+|`null`|`0`|
+|<code>true&nbsp;/&nbsp;false</code> | `1 / 0` |
+| `string` | The string is read "as is", whitespaces from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
+
+**`ToBoolean`** -- occurs in logical operations, or can be performed with `Boolean(value)`.
+
+Follows the rules:
+
+| Value |  Becomes... |
+|-------|-------------|
+|`0`, `null`, `undefined`, `NaN`, `""` |`false`|
+|any other value| `true` |
+
+
+Most of these rules are easy to understand and memorize. The notable exceptions where people usually make mistakes are:
+
+- `undefined` is `NaN` as a number, not `0`.
+- `"0"` and space-only strings like `"   "` are true as a boolean.
+
+Objects are not covered here, we'll return to them later in the chapter <info:object-toprimitive> that is devoted exclusively to objects, after we learn more basic things about JavaScript.
diff --git a/1-js/02-first-steps/07-operators/1-increment-order/solution.md b/1-js/02-first-steps/07-operators/1-increment-order/solution.md
new file mode 100644
index 00000000..8a44d798
--- /dev/null
+++ b/1-js/02-first-steps/07-operators/1-increment-order/solution.md
@@ -0,0 +1,18 @@
+
+The answer is:
+
+- `a = 2`
+- `b = 2`
+- `c = 2`
+- `d = 1`
+
+```js run no-beautify
+let a = 1, b = 1;
+
+alert( ++a ); // 2, prefix form returns the new value
+alert( b++ ); // 1, postfix form returns the old value
+
+alert( a ); // 2, incremented once
+alert( b ); // 2, incremented once
+```
+
diff --git a/1-js/02-first-steps/07-operators/1-increment-order/task.md b/1-js/02-first-steps/07-operators/1-increment-order/task.md
new file mode 100644
index 00000000..7db09238
--- /dev/null
+++ b/1-js/02-first-steps/07-operators/1-increment-order/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# The postfix and prefix forms
+
+What are the final values of all variables `a`, `b`, `c` and `d` after the code below?
+
+```js
+let a = 1, b = 1;
+
+let c = ++a; // ?
+let d = b++; // ?
+```
diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/solution.md b/1-js/02-first-steps/07-operators/2-assignment-result/solution.md
new file mode 100644
index 00000000..e3113b4c
--- /dev/null
+++ b/1-js/02-first-steps/07-operators/2-assignment-result/solution.md
@@ -0,0 +1,5 @@
+The answer is:
+
+- `a = 4` (multiplied by 2)
+- `x = 5` (calculated as 1 + 4)
+
diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/task.md b/1-js/02-first-steps/07-operators/2-assignment-result/task.md
new file mode 100644
index 00000000..5345c948
--- /dev/null
+++ b/1-js/02-first-steps/07-operators/2-assignment-result/task.md
@@ -0,0 +1,13 @@
+importance: 3
+
+---
+
+# Assignment result
+
+What are the values of `a` and `x` after the code below?
+
+```js
+let a = 2;
+
+let x = 1 + (a *= 2);
+```
diff --git a/1-js/02-first-steps/07-operators/article.md b/1-js/02-first-steps/07-operators/article.md
new file mode 100644
index 00000000..e679df61
--- /dev/null
+++ b/1-js/02-first-steps/07-operators/article.md
@@ -0,0 +1,439 @@
+# Operators
+
+Many operators are known to us from school. It is an addition `+`, a multiplication `*`, a substraction `-` and so on.
+
+In this chapter we concentrate on aspects that are not covered by the school arithmetic.
+
+[cut]
+
+## Terms: "unary", "binary", "operand"
+
+Before we move on, let's grasp the common terminology.
+
+- *An operand* -- is what operators are applied to. For instance in multiplication `5 * 2` there are two operands: the left operand is `5`, and the right operand is `2`. Sometimes people say "arguments" instead of "operands".
+- An operator is *unary* if it has a single operand. For example, the unary minus `"-"` reverses the sign of the number:
+
+    ```js run
+    let x = 1;
+
+    *!*
+    x = -x;
+    */!*
+    alert( x ); // -1, unary minus was applied
+    ```
+- An operator is *binary* if it has two operands. The same minus exists in the binary form as well:
+
+    ```js run no-beautify
+    let x = 1, y = 3;
+    alert( y - x ); // 2, binary minus substracts values
+    ```
+
+    Formally, we're talking about the two different operators here: the unary minus (single operand, reverses the sign) and the binary minus (two operands, substracts).
+
+## Strings concatenation, binary +
+
+Now let's see special features of JavaScript operators that are beyond school arithmetics.
+
+Usually the plus operator `'+'` sums numbers.
+
+But if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+alert(s); // mystring
+```
+
+Note that if any of operands is a string, then the other one is converted to string too.
+
+For example:
+
+```js run
+alert( '1' + 2 ); // "12"
+alert( 2 + '1' ); // "21"
+```
+
+See, it doesn't matter whether the first operand is a string or the second one. The rule is simple: if any of operands is a string, then convert the other one into a string as well.
+
+The string concatenation and conversion is the special feature of the binary plus `"+"`. Other arithmetic operators work only with numbers. They always convert their operands to numbers.
+
+For instance, subtraction and division:
+
+```js run
+alert( 2 - '1' ); // 1
+alert( '6' / '2' ); // 3
+```
+
+## Numeric conversion, unary +
+
+The plus `+` exist in two forms. The binary form that we used above and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything with numbers, but if the operand is not a number, then it is converted into it.
+
+For example:
+
+```js run
+// No effect on numbers
+let x = 1;
+alert( +x ); // 1
+
+let y = -2;
+alert( +y ); // -2
+
+*!*
+// Converts non-numbers
+alert( +true ); // 1
+alert( +"" );   // 0
+*/!*
+```
+
+It actually does the same as `Number(...)`, but shorter.
+
+A need to convert string to number arises very often. For example, if we are getting values from HTML form fields, then are usually strings.
+
+What if we want to sum them?
+
+The binary plus would add them as strings:
+
+```js run
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If we want to treat them as numbers, then we can convert and then sum:
+
+```js run
+let apples = "2";
+let oranges = "3";
+
+*!*
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+*/!*
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician's standpoint the abundance of pluses may seem strange. But from a programmer's standpoint -- there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary one? As we're going to see, that's because of their *higher precedence*.
+
+## Operators precedence
+
+If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, there's an implicit priority order among the operators.
+
+From the school we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition.
+
+Parentheses override any precedence, so if we're not satisfied with the order, we can use them, like: `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the bigger number executes first. If the precedence is same -- the execution order is from left to right.
+
+An extract from the [precedence table](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence):
+
+| Precedence | Name | Sign |
+|------------|------|------|
+| ... | ... | ... |
+| 15 | unary plus | `+` |
+| 15 | unary minus | `-` |
+| 14 | multiplication | `*` |
+| 14 | division | `/` |
+| 13 | addition (binary) | `+` |
+| 13 | subtraction | `-` |
+| ... | ... | ... |
+| 3 | assignment | `=` |
+| ... | ... | ... |
+
+As we can see, the "unary plus" has a priority of `15`, higher than `13` for the "addition" (binary plus). That's why in the expression `"+apples + +oranges"` unary pluses work first, and then the addition.
+
+## Assignment
+
+Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `3`.
+
+That's why when we assign a variable, like `x = 2 * 2 + 1`, then the calculations are done first, and afterwards the `=` is evaluated, storing the result in `x`.
+
+```js
+let x = 2 * 2 + 1;
+
+alert( x ); // 5
+```
+
+It is possible to chain assignments:
+
+```js run
+let a, b, c;
+
+*!*
+a = b = c = 2 + 2;
+*/!*
+
+alert( a ); // 4
+alert( b ); // 4
+alert( c ); // 4
+```
+
+Chained assignments evaluate from right to left. First the rightmost expression `2+2` is evaluated then assigned to the variables on the left: `c`, `b` and `a`. At the end, all variables share a single value.
+
+````smart header="The assignment operator `\"=\"` returns a value"
+An operator always returns a value. That's obvious for most of them like an addition `+` or a multiplication `*`. But the assignment operator follows that rule too.
+
+The call `x = value` writes the `value` into `x` *and then returns it*.
+
+Here's the demo that uses an assignment as the part of a more complex expression:
+
+```js run
+let a = 1;
+let b = 2;
+
+*!*
+let c = 3 - (a = b + 1);
+*/!*
+
+alert( a ); // 3
+alert( c ); // 0
+```
+
+In the example above, the result of `(a = b + 1)` is the value which is assigned to `a` (that is `3`). It is then used to substract from `3`.
+
+Funny code, isn't it? We should understand how it works, because sometimes we can see it in 3rd-party libraries, but shouldn't write anything like that ourselves. Such tricks definitely don't make the code clearer and readable.
+````
+
+## Remainder %
+
+The remainder operator `%` despite it's look does not have a relation to percents.
+
+The result of `a % b` is the remainder of the integer division of `a` by `b`.
+
+For instance:
+
+```js run
+alert( 5 % 2 ); // 1 is a remainder of 5 divided by 2
+alert( 8 % 3 ); // 2 is a remainder of 8 divided by 3
+alert( 6 % 3 ); // 0 is a remainder of 6 divided by 3
+```
+
+## Exponentiation **
+
+The exponentiation operator `**` is a recent addition to the language.
+
+For a natural number `b`, the result of `a ** b` is `a` multiplied by itself `b` times.
+
+For instance:
+
+```js run
+alert( 2 ** 2 ); // 4  (2 * 2)
+alert( 2 ** 3 ); // 8  (2 * 2 * 2)
+alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
+```
+
+The operator works for non-integer numbers of `a` and `b` as well, for instance:
+
+```js run
+alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root, that's maths)
+alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)
+```
+
+## Increment/decrement
+
+<!-- Can't use -- in title, because built-in parse turns it into – -->
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for that:
+
+- **Increment** `++` increases a variable by 1:
+
+    ```js run no-beautify
+    let counter = 2;
+    counter++;      // works same as counter = counter + 1, but shorter
+    alert( counter ); // 3
+    ```
+- **Decrement** `--` decreases a variable by 1:
+
+    ```js run no-beautify
+    let counter = 2;
+    counter--;      // works same as counter = counter - 1, but shorter
+    alert( counter ); // 1
+    ```
+
+```warn
+Increment/decrement can be applied only to a variable. An attempt to use it on a value like `5++` will give an error.
+```
+
+Operators `++` and `--` can be placed both after and before the variable.
+
+- When the operator goes after the variable, it is called a "postfix form": `counter++`.
+- The "prefix form" is when the operator stands before the variable: `++counter`.
+
+Both of these records do the same: increase `i` by `1`.
+
+Is there any difference? Yes, but we can only see it if we use the retured value of `++/--`.
+
+Let's clarify. As we know, all operators return a value. Increment/decrement is not an exception here. The prefix form returns the new value, while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference -- here's the example:
+
+```js run
+let counter = 1;
+let a = ++counter; // (*)
+
+alert(a); // *!*2*/!*
+```
+
+Here in the line `(*)` the prefix call `++counter` increments `i` and returns the new value that is `2`. So the `alert` shows `2`.
+
+Now let's use the postfix form:
+
+```js run
+let counter = 1;
+let a = counter++; // (*) changed ++counter to counter++
+
+alert(a); // *!*1*/!*
+```
+
+In the line `(*)` the *postfix* form `counter++` also increments `i`, but returns the *old* value (prior to increment). So the `alert` shows `1`.
+
+To summarize:
+
+- If the result of increment/decrement is not used, then there is no difference which form to use:
+
+    ```js run
+    let counter = 0;
+    counter++;
+    ++counter;
+    alert( counter ); // 2, the lines above did the same
+    ```
+- If we'd like to increase the value *and* use the result of the operator right now, then we need the prefix form:
+
+    ```js run
+    let counter = 0;
+    alert( ++counter ); // 1
+    ```
+- If we'd like to increment, but use the previous value, then we need the postfix form:
+
+    ```js run
+    let counter = 0;
+    alert( counter++ ); // 0
+    ```
+
+````smart header="Increment/decrement among other operators"
+Operators `++/--` can be used inside an expression as well. Their precedence is higher than most other arithmetical operations.
+
+For instance:
+
+```js run
+let counter = 1;
+alert( 2 * ++counter ); // 4
+```
+
+Compare with:
+
+```js run
+let counter = 1;
+alert( 2 * counter++ ); // 2, because counter++ returns the "old" value
+```
+
+Though technically allowable, such notation usually makes the code less readable. One line does multiple things -- not good.
+
+While reading the code, a fast "vertical" eye-scan can easily miss such `counter++`, and it won't be obvious that the variable increases.
+
+The "one line -- one action" style is advised:
+
+```js run
+let counter = 1;
+alert( 2 * counter );
+counter++;
+```
+````
+
+## Bitwise operators
+
+Bitwise operators treat arguments as 32-bit integer numbers and work on the level of their binary representation.
+
+These operators are not JavaScript-specific. They are supported in most programming languages.
+
+The list of operators:
+
+- AND ( `&` )
+- OR ( `|` )
+- XOR ( `^` )
+- NOT ( `~` )
+- LEFT SHIFT ( `<<` )
+- RIGHT SHIFT ( `>>` )
+- ZERO-FILL RIGHT SHIFT ( `>>>` )
+
+These operators are used very rarely. To understand them, we should delve into low-level number representation, and it would not be optimal to do that right now. Especially because we won't need them any time soon. If you're curious, you can read the [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) article in MDN. It would be more practical to do that when a real need arises.
+
+## Modify-in-place
+
+We often need to apply an operator to a variable and store the new result in it.
+
+For example:
+
+```js
+let n = 2;
+n = n + 5;
+n = n * 2;
+```
+
+This notation can be shortened using operators `+=` and `*=`:
+
+```js run
+let n = 2;
+n += 5; // now n=7 (same as n = n + 5)
+n *= 2; // now n=14 (same as n = n * 2)
+
+alert( n ); // 14
+```
+
+Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=` etc.
+
+Such operators have the same precedence as a normal assignment, so they run after most other calculations:
+
+```js run
+let n = 2;
+
+n *= 3 + 5;
+
+alert( n ); // 16  (right part evaluated first, same as n *= 8)
+```
+
+## Comma
+
+The comma operator `','` is one of most rare and unusual operators. Sometimes it's used to write shorter code, so we need to know it in order to understand what's going on.
+
+The comma operator allows to evaluate several expressions, dividing them with a comma `','`. Each of them is evaluated, but result of only the last one is returned.
+
+For example:
+
+```js run
+*!*
+a = (1+2, 3+4);
+*/!*
+
+alert( a ); // 7 (the result of 3+4)
+```
+
+Here, the first expression `1+2` is evaluated, and it's result is thrown away, then `3+4` is evaluated and returned as the result.
+
+```smart header="Comma has a very low precedence"
+Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above.
+
+Without them: `a=1+2,3+4` evaluates `+` first, summing the numbers into `a=3,7`, then the assignment operator `=` assigns `a=3`, and then the number after the comma `7` is not processed anyhow, so it's ignored.
+```
+
+Why do we need such an operator which throws away everything except the last part?
+
+Sometimes people use it in more complex constructs to put several actions in one line.
+
+For example:
+
+```js
+// three operations in one line
+for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) {
+ ...
+}
+```
+
+Such tricks are used in many JavaScript frameworks, that's why we mention about them. But usually they don't improve the code readability, so we should think well before writing like that.
diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md
new file mode 100644
index 00000000..e1f50ce1
--- /dev/null
+++ b/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md
@@ -0,0 +1,21 @@
+
+
+```js no-beautify
+5 > 4 → true
+"apple" > "pineapple" → false
+"2" > "12" → true 
+undefined == null → true 
+undefined === null → false 
+null == "\n0\n" → false
+null === +"\n0\n" → false 
+```
+
+Some of the reasons:
+
+1. Obviously, true.
+2. Dictionary comparison, hence true.
+3. Again, dictionary comparison, first char of `"2"` is greater than the first char of `"1"`.
+4. Values `null` and `undefined` equal each other only.
+5. Strict equality is strict. Different types from both sides lead to false.
+6. See (4).
+7. Strict equality of different types.
diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/08-comparison/1-comparison-questions/task.md
new file mode 100644
index 00000000..891e703d
--- /dev/null
+++ b/1-js/02-first-steps/08-comparison/1-comparison-questions/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Comparisons
+
+What will be the result for expressions?
+
+```js no-beautify
+5 > 4
+"apple" > "pineapple"
+"2" > "12"
+undefined == null
+undefined === null
+null == "\n0\n"
+null === +"\n0\n"
+```
+
diff --git a/1-js/02-first-steps/08-comparison/article.md b/1-js/02-first-steps/08-comparison/article.md
new file mode 100644
index 00000000..fca656c2
--- /dev/null
+++ b/1-js/02-first-steps/08-comparison/article.md
@@ -0,0 +1,214 @@
+# Comparisons
+
+Many comparison operators we know from maths:
+
+- Greater/less than: <code>a &gt; b</code>, <code>a &lt; b</code>.
+- Greater/less than or equals: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
+- Equality check is written as `a == b` (please note the double equation sign `'='`. A single symbol `a = b` would mean an assignment).
+- Not equals. In maths the notation is <code>&ne;</code>, in JavaScript it's written as an assignment with an exclamation sign before it: <code>a != b</code>.
+
+[cut]
+
+## Boolean is the result
+
+Just as all other operators, a comparison returns a value. The value is of the boolean type.
+
+- `true` -- means "yes", "correct" or "the truth".
+- `false` -- means "no", "wrong" or "a lie".
+
+For example:
+
+```js run
+alert( 2 > 1 );  // true (correct)
+alert( 2 == 1 ); // false (wrong)
+alert( 2 != 1 ); // true (correct)
+```
+
+A comparison result can be assigned to a variable, just like any value:
+
+```js run
+let result = 5 > 4; // assign the result of the comparison
+alert( result ); // true
+```
+
+## String comparison
+
+To see which string is greater than the other, the so-called "dictionary" or "lexicographical" order is used.
+
+In other words, strings are compared letter-by-letter.
+
+For example:
+
+```js run
+alert( 'Z' > 'A' ); // true
+alert( 'Glow' > 'Glee' ); // true
+alert( 'Bee' > 'Be' ); // true
+```
+
+The algorithm to compare two strings is simple:
+
+1. Compare first characters of both strings.
+2. If the first one is greater(or less), then the first string is greater(or less) than the second. We're done.
+3. Otherwise if first characters are equal, compare the second characters the same way.
+4. Repeat until the end of any string.
+5. If both strings ended simultaneously, then they are equal. Otherwise the longer string is greater.
+
+In the example above, the comparison `'Z' > 'A'` gets the result at the first step.
+
+Strings `"Glow"` and `"Glee"` are compared character-by-character:
+
+1. `G` is the same as `G`.
+2. `l` is the same as `l`.
+3. `o` is greater than `e`. Stop here. The first string is greater.
+
+```smart header="Not a real dictionary, but Unicode order"
+The comparison algorithm given above is roughly equivalent to the one used in book dictionaries or phone books. But it's not exactly the same.
+
+For instance, case matters. A capital letter `"A"` is not equal to the lowercase `"a"`. Which one is greater? Actually, the lowercase `"a"` is. Why? Because the lowercase character has a greater index in the internal encoding table (Unicode). We'll get back to specific details and consequences in the chapter <info:string>.
+```
+
+## Comparison of different types
+
+When compared values belong to different types, they are converted to numbers.
+
+For example:
+
+```js run
+alert( '2' > 1 ); // true, string '2' becomes a number 2
+alert( '01' == 1 ); // true, string '01' becomes a number 1
+```
+
+For boolean values, `true` becomes `1` and `false` becomes `0`, that's why:
+
+```js run
+alert( true == 1 ); // true
+alert( false == 0 ); // true
+```
+
+````smart header="A funny consequence"
+It is possible that in the same time:
+
+- Two values are equal.
+- One of them is `true` as a boolean and the other one is `false` as a boolean.
+
+For example:
+
+```js run
+let a = 0;
+alert( Boolean(a) ); // false
+
+let b = "0";
+alert( Boolean(b) ); // true
+
+alert(a == b); // true!
+```
+
+From JavaScript standpoint that's quite normal. An equality check converts using the numeric conversion (hence `"0"` becomes `0`), while `Boolean` conversion uses another set of rules.
+````
+
+## Strict equality
+
+A regular equality check `"=="` has a problem. It cannot differ `0` from `false`:
+
+```js run
+alert( 0 == false ); // true
+```
+
+The same thing with an empty string:
+
+```js run
+alert( '' == false ); // true
+```
+
+That's because operands of different types are converted to a number by the assignment operator `=`. An empty string, just like `false`, becomes a zero.
+
+What to do if we'd like to differentiate `0` from `false`?
+
+**A strict equality operator `===` checks the equality without type conversion.**
+
+In other words, if `a` and `b` are of different types then `a === b` immediately returns `false`, without an attempt to convert them.
+
+Let's try it:
+
+```js run
+alert( 0 === false ); // false, because the types are different
+```
+
+There also exists a "strict non-equality" operator `!==`, as an analogy for `!=`.
+
+The string equality check operator is a bit longer to write, but makes it obvious what's going on and leaves less space for errors.
+
+## Comparison with null and undefined
+
+Let's see more edge cases.
+
+There's a non-intuitive behavior when `null` or `undefined` is compared with other values.
+
+
+For a strict equality check `===`
+: These values are different, because each of them belong to a separate type of it's own.
+
+    ```js run
+    alert( null === undefined ); // false
+    ```
+
+For a non-strict check `==`
+: There's a special rule. These two are a "sweet couple": they equal each other (in the sense of `==`), but no any other value.
+
+    ```js run
+    alert( null == undefined ); // true
+    ```
+
+For maths and other comparisons `< > <= >=`
+: Values `null/undefined` are converted to a number: `null` becomes `0`, while `undefined` becomes `NaN`.
+
+Now let's see funny things that happen when we apply those rules. And, what's more important, how do not fall into a trap with these features.
+
+### Strange result: null vs 0
+
+Let's compare `null` with a zero:
+
+```js run
+alert( null > 0 );  // (1) false
+alert( null == 0 ); // (2) false
+alert( null >= 0 ); // (3) *!*true*/!*
+```
+
+Yeah, mathematically that's strange. The last result states that "`null` is equal or greater than zero". Then one of the comparisons above must be correct, but they are both falsy.
+
+The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, hence treat it as `0`. That's why (1) `null >= 0` is true and (3) `null > 0` is false.
+
+From the other hand, the equality check `==` for `undefined` and `null` works by the rule, without any conversions. They equal each other and don't equal anything else. That's why (2) `null == 0` is false.
+
+### An incomparable undefined
+
+The value `undefined` shouldn't participate in comparisons at all:
+
+```js run
+alert( undefined > 0 ); // false (1)
+alert( undefined < 0 ); // false (2)
+alert( undefined == 0 ); // false (3)
+```
+
+Why does it dislike a zero so much? Always false!
+
+We've got such result, because:
+
+- Comparisons `(1)` and `(2)` return `false` because `undefined` gets converted to `NaN`. And `NaN` is a special numeric value which returns `false` for all comparisons.
+- The equality check `(3)` returns `false`, because `undefined` only equals `null` and no other value.
+
+### Evade problems
+
+Why did we observe these examples? Should we remember these pecularities all the time? Well, not really. Actually, these tricky things will gradually become familiar over the time, but there's a solid way to evade any problems with them.
+
+Just treat any comparison with `undefined/null` except the strict equality `===` with an exceptional care.
+
+Don't use comparisons `>= > < <=` with a variable which may be `null/undefined`, unless you are really sure what you're doing. If a variable can have such values, then check for them separately.
+
+## Summary
+
+- Comparison operators return a logical value.
+- Strings are compared letter-by-letter in the "dictionary" order.
+- When values of different types are compared, they get converted to numbers (with the exclusion of a strict equality check).
+- Values `null` and `undefined` equal `==` each other and do not equal any other value.
+- Be careful when using comparisons like `>` or `<` with variables that can occasionaly be `null/undefined`. Making a separate check for `null/undefined` is a good idea.
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md
new file mode 100644
index 00000000..903ee7ff
--- /dev/null
+++ b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md
@@ -0,0 +1,24 @@
+JavaScript-code:
+
+```js demo run
+let name = prompt("What is your name?", "");
+alert(name);
+```
+
+The full page:
+
+```html
+<!DOCTYPE html>
+<html>
+<body>
+
+  <script>
+    'use strict';
+
+    let name = prompt("What is your name?", "");
+    alert(name);
+  </script>
+
+</body>
+</html>
+```
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md
new file mode 100644
index 00000000..a65a654e
--- /dev/null
+++ b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md
@@ -0,0 +1,9 @@
+importance: 4
+
+---
+
+# A simple page
+
+Create a web-page that asks for a name and outputs it.
+
+[demo]
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md
new file mode 100644
index 00000000..d72bf5bf
--- /dev/null
+++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md
@@ -0,0 +1,113 @@
+# Interaction: alert, prompt, confirm
+
+This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks.
+
+But still we use a browser as the demo environment. So we should know at least few user-interface functions.
+
+In this chapter we'll get familiar with the browser-specific functions `alert`, `prompt` and `confirm`.
+
+[cut]
+
+## alert
+
+Syntax:
+
+```js
+alert(message);
+```
+
+This shows a message and pauses the script execution until the user presses "OK".
+
+For example:
+
+```js run
+alert("Hello");
+```
+
+The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons etc, until he deals with the window. In this case -- until he presses "OK".
+
+## prompt
+
+Function `prompt` accepts two arguments:
+
+```js no-beautify
+result = prompt(title[, default]);
+```
+
+It shows a modal window with a text message, an input field for the visitor and buttons OK/CANCEL.
+
+`title`
+: The text to show to the visitor.
+
+`default`
+: An optional second parameter, the initial value for the input field.
+
+The visitor may type something in the prompt input field and press OK. Or he can cancel the input by pressing a CANCEL button or hitting the `key:Esc` key.
+
+The call to `prompt` returns the text from the field or `null` if the input was canceled.
+
+For instance:
+
+```js run
+let age = prompt('How old are you?', 100);
+
+alert(`You are ${age} years old!`); // You are 100 years old!
+```
+
+````warn header="IE: always supply a `default`"
+The second parameter is optional. But if we don't supply it, Internet Explorer would insert the text `"undefined"` into the prompt.
+
+Run this code in Internet Explorer to see that:
+
+```js run
+let test = prompt("Test");
+```
+
+So, to look good in IE, it's recommended to always provide the second argument:
+
+```js run
+let test = prompt("Test", ''); // <-- for IE
+```
+````
+
+## confirm
+
+The syntax:
+
+```js
+result = confirm(question);
+```
+
+Function `confirm` shows a modal window with a `question` and two buttons: OK and CANCEL.
+
+The result is `true` if OK is pressed and `false` otherwise.
+
+For example:
+
+```js run
+let isBoss = confirm("Are you the boss?");
+
+alert( isBoss ); // true is OK is pressed
+```
+
+## Summary
+
+We covered 3 browser-specific functions to interact with the visitor:
+
+`alert`
+: shows a message.
+
+`prompt`
+: shows a message asking the user to input text. It returns the text or, if CANCEL or `key:Esc` is clicked, all browsers except Safari return `null`.
+
+`confirm`
+: shows a message and waits the user to press "OK" or "CANCEL". It returns `true` for OK and `false` for CANCEL/`key:Esc`.
+
+All these methods are modal: they pause the script execution and don't let the visitor to interact with the rest of the page until he dismisses them.
+
+There are two limitations shared by all the methods above:
+
+1. The exact location of the modal window is determined by the browser. Usually it's in the center.
+2. The exact look of the window also depends on the browser. We can't modify it.
+
+That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine.
diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md
new file mode 100644
index 00000000..51f1d468
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md
@@ -0,0 +1,12 @@
+**Yes, it will.**
+
+Any string except an empty one (and `"0"` is not empty) becomes `true` in the logical context.
+
+We can run and check:
+
+```js run
+if ("0") {
+  alert( 'Hello' );
+}
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md
new file mode 100644
index 00000000..5f16cda8
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# if (a string with zero)
+
+Will `alert` be shown?
+
+```js
+if ("0") {
+  alert( 'Hello' );
+}
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.png b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.png
new file mode 100644
index 00000000..8c57b188
Binary files /dev/null and b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.png differ
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html
new file mode 100644
index 00000000..ea996665
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+  <script>
+    'use strict';
+
+    let value = prompt('What is the "official" name of JavaScript?', '');
+
+    if (value == 'ECMAScript') {
+      alert('Right!');
+    } else {
+      alert("You don't know? ECMAScript!");
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2@2x.png b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2@2x.png
new file mode 100644
index 00000000..cbb2c611
Binary files /dev/null and b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2@2x.png differ
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md b/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md
new file mode 100644
index 00000000..99dea945
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md
@@ -0,0 +1,4 @@
+
+
+[html run src="ifelse_task2/index.html"]
+
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
new file mode 100644
index 00000000..46fe05dc
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
@@ -0,0 +1,14 @@
+importance: 2
+
+---
+
+# The name of JavaScript
+
+Using the `if..else` construct, write the code which asks: 'What is the "official" name of JavaScript?'
+
+If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "Didn't know? ECMAScript!"
+
+![](ifelse_task2.png)
+
+[demo src="ifelse_task2"]
+
diff --git a/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html b/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html
new file mode 100644
index 00000000..f168360d
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    'use strict';
+
+    let value = prompt('Type a number', 0);
+
+    if (value > 0) {
+      alert(1);
+    } else if (value < 0) {
+      alert(-1);
+    } else {
+      alert(0);
+    }
+  </script>
+
+</body>
+
+</html>
diff --git a/1-js/02-first-steps/10-ifelse/3-sign/solution.md b/1-js/02-first-steps/10-ifelse/3-sign/solution.md
new file mode 100644
index 00000000..262a605c
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/3-sign/solution.md
@@ -0,0 +1,14 @@
+
+
+```js run
+let value = prompt('Type a number', 0);
+
+if (value > 0) {
+  alert( 1 );
+} else if (value < 0) {
+  alert( -1 );
+} else {
+  alert( 0 );
+}
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/3-sign/task.md b/1-js/02-first-steps/10-ifelse/3-sign/task.md
new file mode 100644
index 00000000..0c5d0e00
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/3-sign/task.md
@@ -0,0 +1,15 @@
+importance: 2
+
+---
+
+# Show the sign
+
+Using `if..else`, write the code which gets a number via `prompt` and then shows in `alert`:
+
+- `1`, if the value is greater than zero,
+- `-1`, if less than zero,
+- `0`, if equals zero.
+
+In this task we assume that the input is always a number.
+
+[demo src="if_sign"]
diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task.png b/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task.png
new file mode 100644
index 00000000..8b54dc83
Binary files /dev/null and b/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task.png differ
diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task@2x.png b/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task@2x.png
new file mode 100644
index 00000000..92001dfe
Binary files /dev/null and b/1-js/02-first-steps/10-ifelse/4-check-login/ifelse_task@2x.png differ
diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/solution.md b/1-js/02-first-steps/10-ifelse/4-check-login/solution.md
new file mode 100644
index 00000000..20abeb43
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/4-check-login/solution.md
@@ -0,0 +1,31 @@
+
+
+```js run demo
+let userName = prompt("Who's there?", '');
+
+if (userName == 'Admin') {
+
+  let pass = prompt('Password?', '');
+
+  if (pass == 'TheMaster') {
+    alert( 'Welcome!' );
+  } else if (pass == null || pass == '') { // (*)
+    alert( 'Canceled.' );
+  } else {
+    alert( 'Wrong password' );
+  }
+
+} else if (userName == null || userName == '') { // (**)
+
+  alert( 'Canceled' );
+
+} else {
+
+  alert( "I don't know you" );
+
+}
+```
+
+Please note the `if` check in lines `(*)` and `(**)`. Every browser except Safari returns `null` when the input is canceled, and Safari returns an empty string. So we must treat them same for compatibility.
+
+Also note the vertical indents inside the `if` blocks. They are technically not required, but make the code more readable.
diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/task.md b/1-js/02-first-steps/10-ifelse/4-check-login/task.md
new file mode 100644
index 00000000..4b371a1d
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/4-check-login/task.md
@@ -0,0 +1,23 @@
+importance: 3
+
+---
+
+# Check the login
+
+Write the code which asks for a login with `prompt`.
+
+If the visitor enters `"Admin"`, then `prompt` for a password, if the input is an empty line or `key:Esc` -- show "Canceled.", if it's another string -- then show "I don't know you".
+
+The password is checked as follows:
+
+- If it equals "TheMaster", then show "Welcome!",
+- Another string -- show "Wrong password",
+- For an empty string or cancelled input, show "Canceled."
+
+The schema:
+
+![](ifelse_task.png)
+
+Please use nested `if` blocks. Mind the overall readability of the code.
+
+[demo]
diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
new file mode 100644
index 00000000..638ce81f
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
@@ -0,0 +1,6 @@
+
+
+```js
+result = (a + b < 4) ? 'Below' : 'Over';
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
new file mode 100644
index 00000000..684e239f
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# Rewrite 'if' into '?'
+
+Rewrite this `if` using the ternary operator `'?'`:
+
+```js
+if (a + b < 4) {
+  result = 'Below';
+} else {
+  result = 'Over';
+}
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md
new file mode 100644
index 00000000..6d68e29d
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md
@@ -0,0 +1,9 @@
+
+
+```js
+let message = (login == 'Employee') ? 'Hello' :
+  (login == 'Director') ? 'Greetings' :
+  (login == '') ? 'No login' :
+  '';
+```
+
diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md
new file mode 100644
index 00000000..4f7d994a
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Rewrite 'if..else' into '?'
+
+Rewrite `if..else` using multiple ternary operators `'?'`.
+
+For readability, it's recommended to split the code into multiple lines.
+
+```js
+let message;
+
+if (login == 'Employee') {
+  message = 'Hello';
+} else if (login == 'Director') {
+  message = 'Greetings';
+} else if (login == '') {
+  message = 'No login';
+} else {
+  message = '';
+}
+```
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
new file mode 100644
index 00000000..41dd2b9d
--- /dev/null
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -0,0 +1,239 @@
+# Conditional operators: if, '?'
+
+Sometimes we need to perform different actions basing on a condition.
+
+There's an `if` operator for that and also the "question mark" operator: `"?"` for conditional evaluation.
+
+[cut]
+
+## The "if" operator
+
+The "if" operator gets a condition, evaluates it and -- if the result is `true` -- executes the code.
+
+For example:
+
+```js run
+let year = prompt('In which year was ECMAScript-2015 specification published?', '');
+
+*!*
+if (year == 2015) alert( 'You are right!' );
+*/!*
+```
+
+In the example above, the condition is a simple equality check: `year == 2015`, but it can be much more complex.
+
+If there's more than one command to execute -- we can use a code block in figure brackets:
+
+```js
+if (year == 2015) {
+  alert( "That's correct!" );
+  alert( "You're so smart!" );
+}
+```
+
+It is recommended to use figure brackets every time with `if`, even if there's only one command. That improves readability.
+
+## Boolean conversion
+
+The `if (…)` operator evaluates the expression in parentheses and converts it to the boolean type.
+
+Let's recall the conversion rules:
+
+- A number `0`, an empty string `""`, `null`, `undefined` and `NaN` are `false`,
+- Other values -- `true`.
+
+So, the code under this condition would never execute:
+
+```js
+if (0) { // 0 is falsy
+  ...
+}
+```
+
+...And inside this condition -- always works:
+
+```js
+if (1) { // 1 is truthy
+  ...
+}
+```
+
+We can also pass a pre-evaluated boolean value to `if`, like here:
+
+```js
+let cond = (year == 2015); // equality evaluates to true or false
+
+if (cond) {
+  ...
+}
+```
+
+## The "else" clause
+
+The `if` operator may contain an optional "else" block. It executes when the condition is wrong.
+
+For example:
+```js run
+let year = prompt('In which year was ECMAScript-2015 specification published?', '');
+
+if (year == 2015) {
+  alert( 'You guessed it right!' );
+} else {
+  alert( 'How can you be so wrong?' ); // any value except 2015
+}
+```
+
+## Several conditions: "else if"
+
+Sometimes we'd like to test several variants of a condition. There's an `else if` clause for that.
+
+For example:
+
+```js run
+let year = prompt('In which year was ECMAScript-2015 specification published?', '');
+
+if (year < 2015) {
+  alert( 'Too early...' );
+} else if (year > 2015) {
+  alert( 'Too late' );
+} else {
+  alert( 'Exactly!' );
+}
+```
+
+In the code above JavaScript first checks `year < 2015`, if it is falsy then goes to the next condition `year > 2015`, and otherwise shows the last `alert`.
+
+There can be more `else if` blocks. The ending `else` is optional.
+
+## Ternary operator '?'
+
+Sometimes we need to assign a variable depending on a condition.
+
+For instance:
+
+```js run no-beautify
+let accessAllowed;
+let age = prompt('How old are you?', '');
+
+*!*
+if (age > 18) {
+  accessAllowed = true;
+} else {
+  accessAllowed = false;
+}
+*/!*
+
+alert(accessAllowed);
+```
+
+The so-called "ternary" or "question mark" operator allows to do that shorter and simpler.
+
+The operator is represented by a question mark `"?"`.  The formal term "ternary" means that the operator has 3 operands. It is actually the one and only operator in JavaScript which has that many.
+
+The syntax is:
+```js
+let result = condition ? value1 : value2
+```
+
+The `condition` is evaluated, if it's truthy then `value1` is returned, otherwise -- `value2`.
+
+For example:
+
+```js
+let accessAllowed = (age > 18) ? true : false;
+```
+
+Technically, we can omit parentheses around `age > 14`. The question mark operator has a low precedence. It executes after the comparison `>`, so that'll do the same:
+
+```js
+// the comparison operator "age > 18" executes first anyway
+// (no need to wrap it into parentheses)
+let accessAllowed = age > 18 ? true : false;
+```
+
+...But parentheses make the code more readable. So it's recommended to put them.
+
+````smart
+In the example above it's possible to evade the question mark operator, because the comparison by itself returns `true/false`:
+
+```js
+// the same
+let accessAllowed = age > 18;
+```
+````
+
+## Multiple '?'
+
+A sequence of question mark `"?"` operators allows to return a value depending on more than one condition.
+
+For instance:
+```js run
+let age = prompt('age?', 18);
+
+let message = (age < 3) ? 'Hi, baby!' :
+  (age < 18) ? 'Hello!' :
+  (age < 100) ? 'Greetings!' :
+  'What an unusual age!';
+
+alert( message );
+```
+
+It may be difficult at first to grasp what's going on. But after a closer look we can see that it's just an ordinary sequence of tests.
+
+1. The first question mark checks whether `age < 3`.
+2. If true -- returns `'Hi, baby!'`, otherwise -- goes after the colon `":"` and checks for `age < 18`.
+3. If that's true -- returns `'Hello!'`, otherwise -- goes after the next colon `":"` and checks for `age < 100`.
+4. If that's true -- returns `'Greetings!'`, otherwise -- goes after the last colon `":"` and returns `'What an unusual age!'`.
+
+The same logic using `if..else`:
+
+```js
+if (age < 3) {
+  message = 'Hi, baby!';
+} else if (a < 18) {
+  message = 'Hello!';
+} else if (age < 100) {
+  message = 'Greetings!';
+} else {
+  message = 'What an unusual age!';
+}
+```
+
+## Non-traditional use of '?'
+
+Sometimes the question mark `'?'` is used as a replacement for `if`:
+
+```js run no-beautify
+let company = prompt('Which company created JavaScript?', '');
+
+*!*
+(company == 'Netscape') ?
+   alert('Right!') : alert('Wrong.');
+*/!*
+```
+
+Depending on the condition `company == 'Netscape'`, either the first or the second part after `"?"` gets executed and shows the alert.
+
+We don't assign a result to a variable here, the idea is to execute different code depending on the condition.
+
+**It is not recommended to use the question mark operator in this way.**
+
+The notation seem to be shorter than `if`, that appeals to some programmers. But it is less readable.
+
+Here's the same with `if` for comparison:
+
+```js run no-beautify
+let company = prompt('Which company created JavaScript?', '');
+
+*!*
+if (company == 'Netscape') {
+  alert('Right!');
+} else {
+  alert('Wrong.');
+}
+*/!*
+```
+
+Our eyes scan the code vertically. The constructs which span several lines are easier to understand than a long horizontal instruction set.
+
+The idea of a question mark `'?'` is to return one or another value depending on the condition. Please use it for exactly that. There's `if` to execute different branches of the code.
diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md
new file mode 100644
index 00000000..8869d32e
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md
@@ -0,0 +1,6 @@
+The answer is `2`, that's the first truthy value.
+
+```js run
+alert( null || 2 || undefined );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md
new file mode 100644
index 00000000..eda8c905
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# What's the result of OR?
+
+What the code below is going to output?
+
+```js
+alert( null || 2 || undefined );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
new file mode 100644
index 00000000..8f4d664e
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
@@ -0,0 +1,13 @@
+The answer: first `1`, then `2`.
+
+```js run
+alert( alert(1) || 2 || alert(3) );
+```
+
+The call to `alert` does not return a value. Or, in other words, it returns `undefined`.
+
+1. The first OR `||` evaluates it's left operand `alert(1)`. That shows the first message with `1`.
+2. The `alert` returns `undefined`, so OR goes on to the second operand searching for a truthy value.
+3. The second operand `2` is truthy, so the execution is halted, `2` is returned and then shown by the outer alert.
+
+There will be no `3`, because the evaluation does not reach `alert(3)`.
diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md
new file mode 100644
index 00000000..bc622abf
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md
@@ -0,0 +1,12 @@
+importance: 3
+
+---
+
+# What's the result of OR'ed alerts?
+
+What the code below will output?
+
+```js
+alert( alert(1) || 2 || alert(3) );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
new file mode 100644
index 00000000..5c2455ef
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
@@ -0,0 +1,6 @@
+The answer: `null`, because it's the first falsy value from the list.
+
+```js run
+alert( 1 && null && 2 );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md
new file mode 100644
index 00000000..53ec7874
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# What is the result of AND?
+
+What this code is going to show?
+
+```js
+alert( 1 && null && 2 );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md
new file mode 100644
index 00000000..b6fb10d7
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md
@@ -0,0 +1,10 @@
+The answer: `1`, and then `undefined`.
+
+```js run
+alert( alert(1) && alert(2) );
+```
+
+The call to `alert` returns `undefined` (it just shows a message, so there's no meaningful return).
+
+Because of that, `&&` evaluates the left operand (outputs `1`), and immediately stops, because `undefined` is a falsy value. And `&&` looks for a falsy value and returns it, so it's done.
+
diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md
new file mode 100644
index 00000000..69f877b9
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md
@@ -0,0 +1,12 @@
+importance: 3
+
+---
+
+# What is the result of AND'ed alerts?
+
+What will this code show?
+
+```js
+alert( alert(1) && alert(2) );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md
new file mode 100644
index 00000000..32a8ccf2
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md
@@ -0,0 +1,16 @@
+The answer: `3`.
+
+```js run
+alert( null || 2 && 3 || 4 );
+```
+
+The precedence of AND `&&` is higher than `||`, so it executes first.
+
+The result of `2 && 3 = 3`, so the expression becomes:
+
+```
+null || 3 || 4
+```
+
+Now the result if the first truthy value: `3`.
+
diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md
new file mode 100644
index 00000000..4b2ad046
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# The result of OR AND OR
+
+What will be the result?
+
+```js
+alert( null || 2 && 3 || 4 );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/6-check-if-in-range/solution.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md
similarity index 100%
rename from 1-js/2-first-steps/13-logical-ops/6-check-if-in-range/solution.md
rename to 1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md
diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
new file mode 100644
index 00000000..cc00ca9f
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
@@ -0,0 +1,9 @@
+importance: 3
+
+---
+
+# Check the range between
+
+Write an "if" condition to check that `age` is between `14` and `90` inclusively.
+
+"Inclusively" means that `age` can reach the edges `14` or `90`.
diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md
new file mode 100644
index 00000000..d1946a96
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md
@@ -0,0 +1,12 @@
+The first variant:
+
+```js
+if (!(age >= 14 && age <= 90))
+```
+
+The second variant:
+
+```js
+if (age < 14 || age > 90)
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
new file mode 100644
index 00000000..7c22d6ad
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
@@ -0,0 +1,9 @@
+importance: 3
+
+---
+
+# Check the range outside
+
+Write an `if` condition to check that `age` is NOT between 14 and 90 inclusively.
+
+Create two variants: the first one using NOT `!`, the second one -- without it.
diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md
new file mode 100644
index 00000000..21050975
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md
@@ -0,0 +1,20 @@
+The answer: the first and the third will execute.
+
+Details:
+
+```js run
+// Runs.
+// The result of -1 || 0 = -1, truthy
+if (-1 || 0) alert( 'first' );
+
+// Doesn't run
+// -1 && 0 = 0, falsy
+if (-1 && 0) alert( 'second' );
+
+// Executes
+// Operator && has a higher precedence than ||
+// so -1 && 1 executes first, giving us the chain:
+// null || -1 && 1  ->  null || 1  ->  1
+if (null || -1 && 1) alert( 'third' );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md
new file mode 100644
index 00000000..f824779b
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# A question about "if"
+
+Which of these `alert`s are going to execute?
+
+What will be the results of the expressions inside `if(...)`?
+
+```js
+if (-1 || 0) alert( 'first' );
+if (-1 && 0) alert( 'second' );
+if (null || -1 && 1) alert( 'third' );
+```
+
diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md
new file mode 100644
index 00000000..e36f9455
--- /dev/null
+++ b/1-js/02-first-steps/11-logical-operators/article.md
@@ -0,0 +1,307 @@
+# Logical operators
+
+There are three logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT).
+
+Although they are called "logical", they can be applied to values of any type, not only boolean. The result can also be of any type.
+
+Let's see the details.
+
+[cut]
+
+## || (OR)
+
+The "OR" operator is represented with two vertical line symbols:
+
+```js
+result = a || b;
+```
+
+In classical programming, logical OR is meant to manipulate boolean values. If any of it's arguments is `true`, then it returns `true`, otherwise -- returns `false`.
+
+In JavaScript the operator is a little bit more tricky and powerful. But first let's see what happens with boolean values.
+
+There are four possible logical combinations:
+
+```js run
+alert( true || true );   // true
+alert( false || true );  // true
+alert( true || false );  // true
+alert( false || false ); // false
+```
+
+As we can see, the result is always `true` except for the case when both operands are `false`.
+
+If an operand is not boolean, then it's converted to boolean for the evaluation.
+
+For instance, a number `1` is treated as `true`, a number `0` -- as `false`:
+
+```js run
+if (1 || 0) { // works just like if( true || false )
+  alert( 'truthy!' );
+}
+```
+
+Most of time, OR `||` is used in `if` to test if *any* of given conditions is correct.
+
+For example:
+
+```js run
+let hour = 9;
+
+*!*
+if (hour < 10 || hour > 18) {
+*/!*
+  alert( 'The office is closed.' );
+}
+```
+
+We can pass more conditions:
+
+```js run
+let hour = 12;
+let isWeekend = true;
+
+if (hour < 10 || hour > 18 || isWeekend) {
+  alert( 'The office is closed.' ); // it is weekend
+}
+```
+
+## OR seeks the first truthy value
+
+The logic described above is somewhat classical. Now let's bring in the "extra" features of JavaScipt.
+
+The extended algorithm works as follows.
+
+Given multiple OR'ed values:
+
+```js
+result = value1 || value2 || value3;
+```
+
+The OR `"||"` operator is doing the following:
+
+- Evalutes operands from left to right.
+- For each value -- converts it to boolean. If it's true then stops and returns that value.
+- If operands finished, returns the last value.
+
+A value is returned in it's original form, without the conversion.
+
+In other words, a chain of OR `"||"` returns the first truthy value or the last one if no such value found.
+
+For instance:
+
+```js run
+alert( 1 || 0 ); // 1 (1 is truthy)
+alert( true || 'no matter what' ); // (true is truthy)
+
+alert( null || 1 ); // 1 (1 is the first truthy value)
+alert( null || 0 || 1 ); // 1 (the first truthy value)
+alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)
+```
+
+That leads to some interesting usages compared to a "pure, classical, boolean-only OR".
+
+1. **Getting the first truthy value from the list of variables or expressions.**
+
+    Imagine we have several variables, which can either contain the data or be `null/undefined`. And we need to choose the first one with data.
+
+    We can use OR `||` for that:
+
+    ```js run
+    let currentUser = null;
+    let defaultUser = "John";
+
+    *!*
+    let name = currentUser || defaultUser || "unnamed";
+    */!*
+
+    alert( name ); // selects "John" – the first truthy value
+    ```
+
+    If both `currentUser` and `defaultUser` were falsy then `"unnamed"` would be the result.
+2. **Short-circuit evaluation.**
+
+    Operands can be not only values, but arbitrary expressions. OR evaluates and tests them from left to right. The evaluation stops when a truthy value is reached, and the value is returned. The process is called "a short-circuit evaluation", because it goes as short as possible from left to right.
+
+    This is clearly seen when the expression given as the second argument has a side effect. Like a variable assignment.
+
+    If we run the example below, `x` would not get assigned:
+
+    ```js run no-beautify
+    let x;
+
+    *!*true*/!* || (x = 1);
+
+    alert(x); // undefined, because (x = 1) not evaluated
+    ```
+
+    ...And if the first argument is `false`, then `OR` goes on and evaluates the second one thus running the assignment:
+
+    ```js run no-beautify
+    let x;
+
+    *!*false*/!* || (x = 1);
+
+    alert(x); // 1
+    ```
+
+    An assignment is a simple case, other side effects can be involved.
+
+    As we can see, such use case is a "shorter way to do `if`". The first operand is converted to boolean and if it's false then the second one is evaluated.
+
+    Most of time it's better to use a "regular" `if` to keep the code easy to understand, but sometimes that can be handy.
+
+## && (AND)
+
+The AND operator is represented with two ampersands `&&`:
+
+```js
+result = a && b;
+```
+
+In classical programming AND returns `true` if both operands are truthy and `false` -- otherwise:
+
+```js run
+alert( true && true );   // true
+alert( false && true );  // false
+alert( true && false );  // false
+alert( false && false ); // false
+```
+
+An example with `if`:
+
+```js run
+let hour = 12;
+let minute = 30;
+
+if (hour == 12 && minute == 30) {
+  alert( 'Time is 12:30' );
+}
+```
+
+Just as for OR, any value is allowed as an operand of AND:
+
+```js run
+if (1 && 0) { // evaluated as true && false
+  alert( "won't work, because the result is falsy" );
+}
+```
+
+
+## AND seeks the first falsy value
+
+Given multiple AND'ed values:
+
+```js
+result = value1 && value2 && value3;
+```
+
+The AND `"&&"` operator is doing the following:
+
+- Evalutes operands from left to right.
+- For each value converts it to a boolean. If the result is `false`, stops and returns the original value.
+- If values finished (all are truthy), returns the last one.
+
+In other words, AND returns the first falsy value or the last value if none found.
+
+The rules above are similar to OR. The difference is that AND returns the first *falsy* value while OR returns the first *truthy* one.
+
+Examples:
+
+```js run
+// if the first operand is truthy,
+// AND returns the second one:
+alert( 1 && 0 ); // 0
+alert( 1 && 5 ); // 5
+
+// if the first operand is falsy,
+// AND returns it, and the second one is ignored
+alert( null && 5 ); // null
+alert( 0 && "no matter what" ); // 0
+```
+
+We can also pass several values in a row. See how the first falsy one is returned:
+
+```js run
+alert( 1 && 2 && null && 3 ); // null
+```
+
+When all values are truthy, the last value is returned:
+
+```js run
+alert( 1 && 2 && 3 ); // 3, the last one
+```
+
+````smart header="AND `&&` executes before OR `||`"
+The precedence of the AND `&&` operator is higher than OR `||`, so it executes before OR.
+
+In the code below `1 && 0` is calculated first:
+
+```js run
+alert( 5 || 1 && 0 ); // 5
+```
+````
+
+Just like OR, the AND `&&` operator can sometimes replace `if`.
+
+For instance:
+
+```js run
+let x = 1;
+
+(x > 0) && alert( 'Greater than zero!' );
+```
+
+The action in the right part of `&&` would execute only if the evaluation reaches it. That is: only if `(x > 0)` is true.
+
+So we basically have an analogue for:
+
+```js run
+let x = 1;
+
+if (x > 0) {
+  alert( 'Greater than zero!' );
+}
+```
+
+The variant with `&&` appears to be shorter. But `if` is more obvious and tends to be a little bit more readable.
+
+So it is recommended to use every construct for it's purpose. Use `if` if we want if. And use `&&` if we want AND.
+
+## ! (NOT)
+
+The boolean NOT operator is represented with an exclamation sign `"!"`.
+
+The syntax is pretty simple:
+
+```js
+result = !value;
+```
+
+The operator accepts a single argument and does the following:
+
+1. Converts the operand to boolean type: `true/false`.
+2. Returns an inverse value.
+
+For instance:
+
+```js run
+alert( !true ); // false
+alert( !0 ); // true
+```
+
+A double NOT `!!` is sometimes used for converting a value to boolean type:
+
+```js run
+alert( !!"non-empty string" ); // true
+alert( !!null ); // false
+```
+
+That is: the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again, at the end we have a plain value-to-boolean conversion.
+
+There's a little more verbose to do the same -- a built-in `Boolean` function:
+
+```js run
+alert( Boolean("non-empty string") ); // true
+alert( Boolean(null) ); // false
+```
diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md
new file mode 100644
index 00000000..43ee4aad
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md
@@ -0,0 +1,25 @@
+The answer: `1`.
+
+```js run
+let i = 3;
+
+while (i) {
+  alert( i-- );
+}
+```
+
+Every loop iteration decreases `i` by `1`. The check `while(i)` stops the loop when `i = 0`.
+
+Hence, the steps of the loop form the following sequence ("loop unrolled"):
+
+```js
+let i = 3;
+
+alert(i--); // shows 3, decreases i to 2
+
+alert(i--) // shows 2, decreases i to 1
+
+alert(i--) // shows 1, decreases i to 0
+
+// done, while(i) check stops the loop
+```
diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md
new file mode 100644
index 00000000..3b847dfa
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md
@@ -0,0 +1,15 @@
+importance: 3
+
+---
+
+# Last loop value
+
+What is the last value alerted by this code? Why?
+
+```js
+let i = 3;
+
+while (i) {
+  alert( i-- );
+}
+```
diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md
new file mode 100644
index 00000000..add79c87
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md
@@ -0,0 +1,30 @@
+The task demonstrates how postfix/prefix forms can lead to different results when used in comparisons.
+
+1. **From 1 to 4**
+
+    ```js run
+    let i = 0;
+    while (++i < 5) alert( i );
+    ```
+
+    The first value is `i=1`, because `++i` first increments `i` and then returns the new value. So the first comparison is `1 < 5` and the `alert` shows `1`.
+
+    Then follow `2,3,4…` -- the values show up one after another. The comparison always uses the incremented value, because `++` is before the variable.
+
+    Finally, `i=4` is incremented to `5`, the comparison `while(5 < 5)` fails, and the loop stops. So `5` is not shown.
+2. **From 1 to 5**
+
+    ```js run
+    let i = 0;
+    while (i++ < 5) alert( i );
+    ```
+
+    The first value is again `i=1`. The postfix form of `i++` increments `i` and then returns the *old* value, so the comparison `i++ < 5` will use `i=0` (contrary to `++i < 5`).
+
+    But the `alert` call is separate. It's another statement which executes after the increment and the comparison. So it gets the current `i=1`.
+
+    Then follow `2,3,4…`
+
+    Let's stop on `i=4`. The prefix form `++i` would increment it and use `5` in the comparison. But here we have the postfix form `i++`. So it increments `i` to `5`, but returns the old value. Hence the comparison is actually `while(4 < 5)` -- true, and the control goes on to `alert`.
+
+    The value `i=5` is the last one, because on the next step `while(5 < 5)` is false.
diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/task.md b/1-js/02-first-steps/12-while-for/2-which-value-while/task.md
new file mode 100644
index 00000000..4576db35
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/2-which-value-while/task.md
@@ -0,0 +1,22 @@
+importance: 4
+
+---
+
+# Which values shows the while?
+
+For every loop, write down which values it shows, in your opinion. And then compare with the answer.
+
+Both loops `alert` same values or not?
+
+1. The prefix form `++i`:
+
+    ```js
+    let i = 0;
+    while (++i < 5) alert( i );
+    ```
+2. The postfix form `i++`
+
+    ```js
+    let i = 0;
+    while (i++ < 5) alert( i );
+    ```
diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md
new file mode 100644
index 00000000..766278fd
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md
@@ -0,0 +1,17 @@
+**The answer: from `0` to `4` in both cases.**
+
+```js run
+for (let i = 0; i < 5; ++i) alert( i );
+
+for (let i = 0; i < 5; i++) alert( i );
+```
+
+That can be easily deducted from the algorithm of `for`:
+
+1. Execute once `i=0` before everything (begin).
+2. Check the condition `i<5`
+3. If `true` -- execute the loop body `alert(i)`, and then `i++`
+
+The increment `i++` is separated from the condition check (2). That's just another statement.
+
+The value returned by the increment is not used here, so there's no difference between `i++` and `++i`.
diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/task.md b/1-js/02-first-steps/12-while-for/3-which-value-for/task.md
new file mode 100644
index 00000000..bfefa63f
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/3-which-value-for/task.md
@@ -0,0 +1,20 @@
+importance: 4
+
+---
+
+# Which values get shown by the "for" loop?
+
+For each loop write down which values it is going to show. Then compare with the answer.
+
+Both loops `alert` same values or not?
+
+1. The postfix form:
+
+    ```js
+    for (let i = 0; i < 5; i++) alert( i );
+    ```
+2. The prefix form:
+
+    ```js
+    for (let i = 0; i < 5; ++i) alert( i );
+    ```
diff --git a/1-js/02-first-steps/12-while-for/4-for-even/solution.md b/1-js/02-first-steps/12-while-for/4-for-even/solution.md
new file mode 100644
index 00000000..e8e66bb4
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/4-for-even/solution.md
@@ -0,0 +1,11 @@
+
+
+```js run demo
+for (let i = 2; i <= 10; i++) {
+  if (i % 2 == 0) {
+    alert( i );
+  }
+}
+```
+
+We use the "modulo" operator `%` to get the remainder and check for the evenness here.
diff --git a/1-js/02-first-steps/12-while-for/4-for-even/task.md b/1-js/02-first-steps/12-while-for/4-for-even/task.md
new file mode 100644
index 00000000..ff34e7e4
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/4-for-even/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Output even numbers in the loop
+
+Use the `for` loop to output even numbers from `2` to `10`.
+
+[demo]
diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md
new file mode 100644
index 00000000..612cf559
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md
@@ -0,0 +1,10 @@
+
+
+```js run
+let i = 0;
+while (i < 3) {
+  alert( `number ${i}!` );
+  i++;
+}
+```
+
diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md
new file mode 100644
index 00000000..a62c9af3
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Replace "for" with "while"
+
+Rewrite the code changing the `for` loop to `while` without altering it's behavior (the output should stay same).
+
+```js run
+for (let i = 0; i < 3; i++) {
+  alert( `number ${i}!` );
+}
+```
+
diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md
new file mode 100644
index 00000000..344824e0
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md
@@ -0,0 +1,15 @@
+
+```js run demo
+let num;
+
+do {
+  num = prompt("Enter a number greater than 100?", 0);
+} while (num <= 100 && num);
+```
+
+The loop `do..while` repeats while both checks are truthy:
+
+1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`.
+2. The check `&& num` is false when `num` is `null` or a empty strig. Then the `while` loop stops too.
+
+P.S. If `num` is `null` then `num <= 100` is `false`, so without the 2nd check the loop wouldn't stop if the user clicks CANCEL. Both checks are required.
diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md
new file mode 100644
index 00000000..e1fe0db4
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Repeat until the input is incorrect
+
+Write a loop which prompts for a number greater than `100`. If the visitor enters another number -- ask him to input again.
+
+The loop must ask for a number until either the visitor enters a number greater than `100` or cancels the input/enters an empty line.
+
+Here we can assume that the visitor only inputs numbers. There's no need to implement a special handling for a non-numeric input in this task.
+
+[demo]
diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/solution.md b/1-js/02-first-steps/12-while-for/7-list-primes/solution.md
new file mode 100644
index 00000000..ec906317
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/7-list-primes/solution.md
@@ -0,0 +1,29 @@
+There are many algorithms for this task.
+
+Let's use a nested loop:
+
+```js
+For each i in the interval {
+  check if i has a divisor from 1..i
+  if yes => the value is not a prime
+  if no => the value is a prime, show it
+}
+```
+
+The code using a label:
+
+```js run
+let n = 10;
+
+nextPrime:
+for (let i = 2; i <= n; i++) { // for each i...
+
+  for (let j = 2; j < i; j++) { // look for a divisor..
+    if (i % j == 0) continue nextPrime; // not a prime, go next i
+  }
+
+  alert( i ); // a prime
+}
+```
+
+There's a lot of space to opimize it. For instance, we could look for the divisors from `2` to square root of `i`. But anyway, if we want to be really efficient for large intervals, we need change the approach and rely on advanced maths and complex algorithms like [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) etc.
diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/task.md b/1-js/02-first-steps/12-while-for/7-list-primes/task.md
new file mode 100644
index 00000000..0f92fecf
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/7-list-primes/task.md
@@ -0,0 +1,17 @@
+importance: 3
+
+---
+
+# Output prime numbers
+
+An integer number greater than `1` is called a [prime](https://en.wikipedia.org/wiki/Prime_number) if it cannot be divided without a remainder by anything except `1` and itself.
+
+In other words, `n>1` is a prime if it can't be evenly divided by anything except `1` and `n`.
+
+For example, `5` is a prime, because it cannot be divided without a remainder by `2`, `3` and `4`.
+
+**Write the code which outputs prime numbers in the interval from `2` to `n`.**
+
+For `n=10` the result will be `2,3,5,7`.
+
+P.S. The code should work for any `n`, not be hard-tuned for any fixed value.
diff --git a/1-js/02-first-steps/12-while-for/article.md b/1-js/02-first-steps/12-while-for/article.md
new file mode 100644
index 00000000..575cfa68
--- /dev/null
+++ b/1-js/02-first-steps/12-while-for/article.md
@@ -0,0 +1,390 @@
+# Loops: while and for
+
+We often have a need to perform similar actions many times in a row.
+
+For example, when we need to output goods from the list one after another. Or just run the same code for each number from 1 to 10.
+
+*Loops* are a way to repeat the same part of code multiple times.
+
+[cut]
+
+## The "while" loop
+
+The `while` loop has the following syntax:
+
+```js
+while (condition) {
+  // code
+  // so-called "loop body"
+}
+```
+
+While the `condition` is `true` -- the `code` from the loop body is executed.
+
+For instance, the loop below outputs `i` while `i<3`:
+
+```js run
+let i = 0;
+while (i < 3) { // shows 0, then 1, then 2
+  alert( i );
+  i++;
+}
+```
+
+A single execution of the loop body is called *an iteration*. The loop in the example above makes 3 iterations.
+
+If there were no `i++` in the example above, the loop would repeat (in theory) forever. In practice, the browser provides ways to stop such loops, and for server-side JavaScript we can kill the process.
+
+Any expression or a variable can be a loop condition, not just a comparison. They are evaluated and converted to boolean by `while`.
+
+For instance, the shorter way to write `while (i!=0)` could be `while (i)`:
+
+```js run
+let i = 3;
+*!*
+while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
+*/!*
+  alert( i );
+  i--;
+}
+```
+
+````smart header="Brackets are not required for a single-line body"
+If the loop body has a single statement, we can omit the brackets `{…}`:
+
+```js run
+let i = 3;
+*!*
+while (i) alert(i--);
+*/!*
+```
+````
+
+## The "do..while" loop
+
+The condition check can be moved *below* the loop body using the `do..while` syntax:
+
+```js
+do {
+  // loop body
+} while (condition);
+```
+
+The loop will first execute the body, then check the condition, and while it's truthy -- execute it again and again.
+
+For example:
+
+```js run
+let i = 0;
+do {
+  alert( i );
+  i++;
+} while (i < 3);
+```
+
+This form of syntax is rarely used. Usually, if there's no special reason, the other  form is preferred: `while(…) {…}`.
+
+## The "for" loop
+
+The `for` loop is the most often used one.
+
+It looks like this:
+
+```js
+for (begin; condition; step) {
+  // ... loop body ...
+}
+```
+
+Let's learn the meaning of these parts by example. The loop below runs `alert(i)` for `i` from `0` up to (but not including) `3`:
+
+```js run
+for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
+  alert(i);
+}
+```
+
+Let's examine the `for` statement part by part:
+
+| part  |          |                                                                            |
+|-------|----------|----------------------------------------------------------------------------|
+| begin | `i=0`    | Executes once upon entering the loop.                                      |
+| condition | `i<3`| Checked before every loop iteration, if fails the loop stops.              |
+| step| `i++`      | Executes after the body on each iteration, but before the condition check. |
+| body | `alert(i)`| Runs again and again while the condition is truthy                         |
+
+
+The general loop algorithm works like this:
+```
+Run begin
+→ (if condition → run body and run step)
+→ (if condition → run body and run step)
+→ (if condition → run body and run step)
+→ ...
+```
+
+If you are new to loops, then maybe it would help if you go back to the example and reproduce how it runs step-by-step on a piece of paper.
+
+Here's what exactly happens in our case:
+
+```js
+// for (let i = 0; i < 3; i++) alert(i)
+
+// run begin
+let i = 0
+// if condition → run body and run step
+if (i < 3) { alert(i); i++ }
+// if condition → run body and run step
+if (i < 3) { alert(i); i++ }
+// if condition → run body and run step
+if (i < 3) { alert(i); i++ }
+// ...finish, because now i == 3
+```
+
+````smart header="Inline variable declaration"
+Here the "counter" variable `i` is declared right in the loop. That's called an "inline" variable declaration. Such variable is visible only inside the loop.
+
+```js run
+for (*!*let*/!* i = 0; i < 3; i++) {
+  alert(i); // 0, 1, 2
+}
+alert(i); // error, no such variable
+```
+
+Instead of defining a variable, we can use an existing one:
+
+```js run
+let i = 0;
+
+for (i = 0; i < 3; i++) { // use an existing variable
+  alert(i); // 0, 1, 2
+}
+
+alert(i); // 3, visible, because declared outside of the loop
+```
+
+````
+
+
+### Skipping parts
+
+Any part of `for` can be skipped.
+
+For example, we can omit `begin` if we don't need to do anything at the loop start.
+
+Like here:
+
+```js run
+let i = 0; // we have i already declared and assigned
+
+for (; i < 3; i++) { // no need for "begin"
+  alert( i ); // 0, 1, 2
+}
+```
+
+We can also remove the `step` part:
+
+```js run
+let i = 0;
+
+for (; i < 3;) {
+  alert( i );
+}
+```
+
+The loop became identical to `while (i<3)`.
+
+We can actually remove everything, thus creating an infinite loop:
+
+```js
+for (;;) {
+  // repeats without limits
+}
+```
+
+Please note that the two `for` semicolons `;` must present, otherwise it would be a syntax error.
+
+## Breaking the loop
+
+Normally the loop exits when the condition becomes falsy.
+
+But we can force the exit at any moment. There's a special `break` directive for that.
+
+For example, this code below asks user for numbers and breaks if no number entered:
+
+```js
+let sum = 0;
+
+while (true) {
+
+  let value = +prompt("Enter a number", '');
+
+*!*
+  if (!value) break; // (*)
+*/!*
+
+  sum += value;
+
+}
+alert( 'Sum: ' + sum );
+```
+
+The `break` directive is activated in the line `(*)` if the user enters an empty line or cancels the input. It stops the loop immediately, passing the control to the first line after the loop. Namely, `alert`.
+
+The combination: "infinite loop + `break` as needed" is great for situations when the condition must be checked not in beginning/end of the loop, but in the middle. Or even in several places of the body.
+
+## Continue to the next iteration [#continue]
+
+The `continue` directive is a "lighter version" of `break`. It doesn't stop the whole loop. Instead if stops the current iteration and forces the loop to start a new one (if the condition allows).
+
+We can use it if we're done on the current iteration and would like to move on to the next.
+
+The loop above uses `continue` to output only odd values:
+
+```js run no-beautify
+for (let i = 0; i < 10; i++) {
+
+  // if true, skip the remaining part of the body
+  *!*if (i % 2 == 0) continue;*/!*
+
+  alert(i); // 1, then 3, 5, 7, 9
+}
+```
+
+For even values of `i` the `continue` directive stops body execution, passing the control to the next iteration of `for` (with the next number). So the `alert` is only called for odd values.
+
+````smart header="The directive `continue` helps to decrease nesting level"
+A loop that shows odd values could look like this:
+
+```js
+for (let i = 0; i < 10; i++) {
+
+  if (i % 2) {
+    alert( i );
+  }
+
+}
+```
+
+From the technical point of view it's identical to the example above. Surely, we can just wrap the code in the `if` block instead of `continue`.
+
+But as a side-effect we got one more figure brackets nesting level. If the code inside `if` is longer than a few lines, that may decrease the overall readability.
+````
+
+````warn header="No `break/continue` to the right side of '?'"
+Please note that syntax constructs that are not expressions cannot be used in `'?'`. In particular, directives `break/continue` are disallowed there.
+
+For example, if we take this code:
+
+```js
+if (i > 5) {
+  alert(i);
+} else {
+  continue;
+}
+```
+
+...And rewrite it using a question mark:
+
+
+```js no-beautify
+(i > 5) ? alert(i) : *!*continue*/!*; // continue not allowed here
+```
+
+...Then it stops working. The code like this will give a syntax error:
+
+
+That's just another reason not to use a question mark operator `'?'` instead of `if`.
+````
+
+## Labels for break/continue
+
+Sometimes we need to break out from multiple nested loops at once.
+
+For example, in the code below we loop over `i` and `j` prompting for coordinates `(i, j)` from `(0,0)` to `(3,3)`:
+
+```js run no-beautify
+for (let i = 0; i < 3; i++) {
+
+  for (let j = 0; j < 3; j++) {
+
+    let input = prompt(`Value at coords (${i},${j})`, '');
+
+    // what if I want to exit from here to Done (below)?
+
+  }
+}
+
+alert('Done!');
+```
+
+We need a way to stop the process if the user cancels the input.
+
+The ordinary `break` after `input` would only break the inner loop. That's not sufficient. Labels come to the rescue.
+
+A *label* is an identifier with a colon before a loop:
+```js
+labelName: for(...) {
+  ...
+}
+```
+
+The `break <labelName>` statement in the loop breaks out to the label.
+
+Like here:
+
+```js run no-beautify
+*!*outer:*/!* for (let i = 0; i < 3; i++) {
+
+  for (let j = 0; j < 3; j++) {
+
+    let input = prompt(`Value at coords (${i},${j})`, '');
+
+    // if an empty string or canceled, then break out of both loops
+    if (!input) *!*break outer*/!*; // (*)
+
+    // do something with the value...
+  }
+}
+alert('Done!');
+```
+
+In the code above `break outer` looks upwards for the label named `outer` and breaks out of that loop.
+
+So the control goes straight from `(*)` to `alert('Done!')`.
+
+We can also move a label into the separate string:
+
+```js no-beautify
+outer:
+for (let i = 0; i < 3; i++) { ... }
+```
+
+The `continue` directive can also be used with a label. In this case the execution jumps to the next iteration of the labelled loop.
+
+````warn header="Labels are not a \"goto\""
+Labels do not allow to jump into an arbitrary place of code.
+
+For example, it is impossible to do like this:
+```js
+break label;  // jumps to label? No.
+
+label: for(...)
+```
+
+The call to a `break/continue` is only possible from inside the loop, and the label must be somewhere upwards from the directive.
+````
+
+## Summary
+
+We covered 3 types of loops:
+
+- `while` -- the condition is checked before each iteration.
+- `do..while` -- the condition is checked after each iteration.
+- `for(;;)` -- the condition is checked before each iteration, additional settings available.
+
+To make an "infinite" loop, usually the `while(true)` construct is used. Such a loop, just like any other, can be stopped with the `break` directive.
+
+If we don't want to do anything on the current iteration and would like to forward to the next one -- the `continue` directive does it.
+
+`Break/continue` support labels before the loop. A label is the only way for `break/continue` to escape the nesting and go to the outer loop.
diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md
new file mode 100644
index 00000000..d3e39743
--- /dev/null
+++ b/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md
@@ -0,0 +1,20 @@
+To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`.
+
+For given strings though, a simple `'=='` works too.
+
+```js no-beautify
+if(browser == 'Edge') {
+  alert("You've got the Edge!");
+} else if (browser == 'Chrome'
+ || browser == 'Firefox'
+ || browser == 'Safari'
+ || browser == 'Opera') {
+  alert( 'Okay we support these browsers too' );
+} else {
+  alert( 'We hope that this page looks ok!' );
+}
+```
+
+Please note: the construct `browser == 'Chrome' || browser == 'Firefox' …` is split into multiple lines for better readability.
+
+But the `switch` construct is still cleaner and more descriptive.
diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md
new file mode 100644
index 00000000..f4dc0e5f
--- /dev/null
+++ b/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md
@@ -0,0 +1,26 @@
+importance: 5
+
+---
+
+# Rewrite the "switch" into an "if"
+
+Write the code using `if..else` which would correspond to the following `switch`:
+
+```js
+switch (browser) {
+  case 'Edge':
+    alert( "You've got the Edge!" );
+    break;
+
+  case 'Chrome':
+  case 'Firefox':
+  case 'Safari':
+  case 'Opera':
+    alert( 'Okay we support these browsers too' );
+    break;
+
+  default:
+    alert( 'We hope that this page looks ok!' );
+}
+```
+
diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md
new file mode 100644
index 00000000..ed87dd94
--- /dev/null
+++ b/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md
@@ -0,0 +1,26 @@
+The first two checks turn into two `case`. The third check is split into two cases:
+
+```js run
+let a = +prompt('a?', '');
+
+switch (a) {
+  case 0:
+    alert( 0 );
+    break;
+
+  case 1:
+    alert( 1 );
+    break;
+
+  case 2:
+  case 3:
+    alert( '2,3' );
+*!*
+    break;
+*/!*
+}
+```
+
+Please note: the `break` at the bottom is not required. But we put it to make the code future-proof.
+
+In the future, there is a chance that we'd want to add one more `case`, for example `case 4`. And if we forget to add a break before it, at the end of `case 3`, there will be an error. So that's a kind of self-insurance.
diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md
new file mode 100644
index 00000000..ec99d098
--- /dev/null
+++ b/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md
@@ -0,0 +1,23 @@
+importance: 4
+
+---
+
+# Rewrite "if" into "switch"
+
+Rewrite the code below using a single `switch` statement:
+
+```js run
+let a = +prompt('a?', '');
+
+if (a == 0) {
+  alert( 0 );
+}
+if (a == 1) {
+  alert( 1 );
+}
+
+if (a == 2 || a == 3) {
+  alert( '2,3' );
+}
+```
+
diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/13-switch/article.md
new file mode 100644
index 00000000..4ace9db8
--- /dev/null
+++ b/1-js/02-first-steps/13-switch/article.md
@@ -0,0 +1,173 @@
+# The "switch" statement
+
+A `switch` statement can replace multiple `if` checks.
+
+It gives a more descriptive way to compare a value with multiple variants.
+
+[cut]
+
+## The syntax
+
+The `switch` has one or more `case` blocks and an optional default.
+
+It looks like this:
+
+```js no-beautify
+switch(x) {
+  case 'value1':  // if (x === 'value1')
+    ...
+    [break]
+
+  case 'value2':  // if (x === 'value2')
+    ...
+    [break]
+
+  default:
+    ...
+    [break]
+}
+```
+
+- The value of `x` is checked for a strict equality to the value from the first `case`, that is: `value1`, then to the second `value2` and so on.
+- If the equality is found -- `switch` starts to execute the code starting from the corresponding `case`, and to the nearest `break` (or to the end of `switch`).
+- If no case matched then the `default` code is executed (if exists).
+
+## An example
+
+An example of `switch` (the executed code is highlighted):
+
+```js run
+let a = 2 + 2;
+
+switch (a) {
+  case 3:
+    alert( 'Too small' );
+    break;
+*!*
+  case 4:
+    alert( 'Exactly!' );
+    break;
+*/!*
+  case 5:
+    alert( 'Too large' );
+    break;
+  default:
+    alert( "I don't know such values" );
+}
+```
+
+Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails.
+
+Then `4`. That's the match, so the execution starts from `case 4` and till the nearest `break`.
+
+**If there is no `break` then the execution continues with the next `case` without any checks.**
+
+An example without `break`:
+
+```js run
+let a = 2 + 2;
+
+switch (a) {
+  case 3:
+    alert( 'Too small' );
+*!*
+  case 4:
+    alert( 'Exactly!' );
+  case 5:
+    alert( 'Too big' );
+  default:
+    alert( "I don't know such values" );
+*/!*
+}
+```
+
+In the example above we'll see sequential execution of three `alert`s:
+
+```js
+alert( 'Exactly!' );
+alert( 'Too big' );
+alert( "I don't know such values" );
+```
+
+````smart header="Any expresion can be a `switch/case` argument"
+Both `switch` and case allow arbitrary expressions.
+
+For example:
+
+```js run
+let a = "1";
+let b = 0;
+
+switch (+a) {
+*!*
+  case b + 1:
+    alert("this runs, because +a is 1, exactly equals b+1");
+    break;
+*/!*
+
+  default:
+    alert("this doesn't run");
+}
+```
+Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed.
+````
+
+## Grouping of "case"
+
+Several variants of `case` which share the same code can be grouped.
+
+For example, if we want the same code to run for `case 3` and `case 5`:
+
+```js run no-beautify
+let a = 2 + 2;
+
+switch (a) {
+  case 4:
+    alert('Right!');
+    break;
+
+*!*
+  case 3:                    // (*) grouped two cases
+  case 5:
+    alert('Wrong!');
+    alert("Why don't you take a math class?");
+    break;
+*/!*
+
+  default:
+    alert('The result is strange. Really.');
+}
+```
+
+Now both `3` and `5` show the same message.
+
+The ability to "group" cases a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
+
+## Type matters
+
+Let's emphasize that the equality check is always strict. The values must be of the same type to match.
+
+For example, let's consider the code:
+
+```js run
+let arg = prompt("Enter a value?")
+switch (arg) {
+  case '0':
+  case '1':
+    alert( 'One or zero' );
+
+  case '2':
+    alert( 'Two' );
+    break;
+
+  case 3:
+    alert( 'Never executes!' );
+
+  default:
+    alert( 'An unknown value' )
+}
+```
+
+1. For `0`, `1`, the first `alert` runs.
+2. For `2` the second `alert` runs.
+3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute.
diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md
new file mode 100644
index 00000000..e41c8041
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md
@@ -0,0 +1 @@
+No difference.
\ No newline at end of file
diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md
new file mode 100644
index 00000000..743ba78a
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md
@@ -0,0 +1,38 @@
+importance: 4
+
+---
+
+# Is "else" required?
+
+The following function returns `true` if the parameter `age` is greater than `18`.
+
+Otherwise it asks for a confirmation and returns its result:
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+*!*
+  } else {
+    // ...
+    return confirm('Did parents allow you?');
+  }
+*/!*
+}
+```
+
+Will the function work differently if `else` is removed?
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+  }
+*!*
+  // ...
+  return confirm('Did parents allow you?');
+*/!*
+}
+```
+
+Is there any difference in the bahavior of these two variants?
diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md
new file mode 100644
index 00000000..c8ee9618
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md
@@ -0,0 +1,17 @@
+Using a question mark operator `'?'`:
+
+```js
+function checkAge(age) {
+  return (age > 18) ? true : confirm('Did parents allow you?');
+}
+```
+
+Using OR `||` (the shortest variant):
+
+```js
+function checkAge(age) {
+  return (age > 18) || confirm('Did parents allow you?');
+}
+```
+
+Note that the parentheses around `age > 18` are not required here. They exist for better readabilty.
diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md
new file mode 100644
index 00000000..f70ad6fa
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md
@@ -0,0 +1,26 @@
+importance: 4
+
+---
+
+# Rewrite the function using '?' or '||'
+
+The following function returns `true` if the parameter `age` is greater than `18`.
+
+Otherwise it asks for a confirmation and returns its result.
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+  } else {
+    return confirm('Do you have your parents permission to access this page?');
+  }
+}
+```
+
+Rewrite it, to perform the same, but without `if`, in a single line.
+
+Make two variants of `checkAge`:
+
+1. Using a question mark operator `'?'`
+2. Using OR `||`
diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/14-function-basics/3-min/solution.md
new file mode 100644
index 00000000..2236d920
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/3-min/solution.md
@@ -0,0 +1,21 @@
+A solution using `if`:
+
+```js
+function min(a, b) {
+  if (a < b) {
+    return a;
+  } else {
+    return b;
+  }
+}
+```
+
+A solution with a question mark operator `'?'`:
+
+```js
+function min(a, b) {
+  return a < b ? a : b;
+}
+```
+
+P.S. In the case of an equality `a == b` it does not matter what to return.
\ No newline at end of file
diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/14-function-basics/3-min/task.md
new file mode 100644
index 00000000..50edd0d3
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/3-min/task.md
@@ -0,0 +1,16 @@
+importance: 1
+
+---
+
+# Function min(a, b)
+
+Write a function `min(a,b)` which returns the least of two numbers `a` and `b`.
+
+For instance:
+
+```js
+min(2, 5) == 2
+min(3, -1) == -1
+min(1, 1) == 1
+```
+
diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/14-function-basics/4-pow/solution.md
new file mode 100644
index 00000000..79eb2b44
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/4-pow/solution.md
@@ -0,0 +1,23 @@
+
+```js run demo
+function pow(x, n) {
+  let result = x;
+
+  for (let i = 1; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+
+let x = prompt("x?", '');
+let n = prompt("n?", '');
+
+if (n <= 1) {
+  alert(`Power ${n} is not supported,
+    use an integer greater than 0`);
+} else {
+  alert( pow(x, n) );
+}
+```
+
diff --git a/1-js/02-first-steps/14-function-basics/4-pow/task.md b/1-js/02-first-steps/14-function-basics/4-pow/task.md
new file mode 100644
index 00000000..e4f885a5
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/4-pow/task.md
@@ -0,0 +1,19 @@
+importance: 4
+
+---
+
+# Function pow(x,n)
+
+Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result.
+
+```js
+pow(3, 2) = 3 * 3 = 9
+pow(3, 3) = 3 * 3 * 3 = 27
+pow(1, 100) = 1 * 1 * ...*1 = 1
+```
+
+Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`.
+
+[demo]
+
+P.S. In this task the function should support only natural values of `n`: integers up from `1`.
diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md
new file mode 100644
index 00000000..0d0dbe92
--- /dev/null
+++ b/1-js/02-first-steps/14-function-basics/article.md
@@ -0,0 +1,457 @@
+# Functions
+
+Quite often we need to perform a similar action in many places of the script.
+
+For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else.
+
+Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition.
+
+[cut]
+
+We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well.
+
+## Function Declaration
+
+To create a function we can use a *function declaration*.
+
+It looks like this:
+
+```js
+function showMessage() {
+  alert( 'Hello everyone!' );
+}
+```
+
+The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* in the brackets (empty in the example above) and finally the code of the function, also named "the function body".
+
+![](function_basics.png)
+
+Our new function can be called by its name: `showMessage()`.
+
+For instance:
+
+```js run
+function showMessage() {
+  alert( 'Hello everyone!' );
+}
+
+*!*
+showMessage();
+showMessage();
+*/!*
+```
+
+The call `showMessage()` executes the code of the function. Here we will see the message two times.
+
+This example clearly demonstrates one of the main purposes of functions: to evade code duplication.
+
+If we ever need to change the message or the way it is shown -- it's enough to modify the code in one place: the function which outputs it.
+
+## Local variables
+
+A variable declared inside a function is only visible inside that function.
+
+For example:
+
+```js run
+function showMessage() {
+*!*
+  let message = "Hello, I'm JavaScript!"; // local variable
+*/!*
+
+  alert( message );
+}
+
+showMessage(); // Hello, I'm JavaScript!
+
+alert( message ); // <-- Error! The variable is local to the function
+```
+
+## Outer variables
+
+A function can access an outer variable as well, for example:
+
+```js run no-beautify
+let *!*userName*/!* = 'John';
+
+function showMessage() {
+  let message = 'Hello, ' + *!*userName*/!*;
+  alert(message);
+}
+
+showMessage(); // Hello, my name is John
+```
+
+The function has full access to the outer variable. It can modify it as well.
+
+For instance:
+
+```js run
+let *!*userName*/!* = 'John';
+
+function showMessage() {
+  *!*userName*/!* = "Bob"; // (1) changed the outer variable
+
+  let message = 'Hello, ' + *!*userName*/!*;
+  alert(message);
+}
+
+alert( userName ); // *!*John*/!* before the function call
+
+showMessage();
+
+alert( userName ); // *!*Bob*/!*, the value was modified by the function
+```
+
+The outer variable is only used if there's no local one. So an occasional modification may happen if we forget `let`.
+
+If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`, the outer one is ignored:
+
+```js run
+let userName = 'John';
+
+function showMessage() {
+*!*
+  let userName = "Bob"; // declare a local variable
+*/!*
+
+  let message = 'Hello, ' + userName; // *!*Bob*/!*
+  alert(message);
+}
+
+// the function will create and use it's own userName
+showMessage();
+
+alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable
+```
+
+```smart header="Global variables"
+Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*.
+
+Global variables are visible from any function (unless shadowed by locals).
+
+Usually, a function declares all variables specific to its task, and global variables only store project-level data, so important that it really must be seen from anywhere. Modern code has few or no globals, most variables reside in their functions.
+```
+
+## Parameters
+
+We can pass arbitrary data to function using parameters (also called *function arguments*) .
+
+In the example below, the function has two parameters: `from` and `text`.
+
+```js run
+function showMessage(*!*from, text*/!*) { // arguments: from, text
+  alert(from + ': ' + text);
+}
+
+*!*
+showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
+showMessage('Ann', "What's up?"); // Ann: What's up? (**)
+*/!*
+```
+
+When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `next`. Then the function uses them.
+
+Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value:
+
+
+```js run
+function showMessage(from, text) {
+
+*!*
+  from = '*' + from + '*'; // make "from" look nicer
+*/!*
+
+  alert( from + ': ' + text );
+}
+
+let from = "Ann";
+
+showMessage(from, "Hello"); // *Ann*: Hello
+
+// the value of "from" is the same, the function modified a local copy
+alert( from ); // Ann
+```
+
+## Default values
+
+If a parameter is not provided, then its value becomes `undefined`.
+
+For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument:
+
+```js
+showMessage("Ann");
+```
+
+That's not an error. Such call would output `"Ann: undefined"`. There's no `text`, so it's assumed that `text === undefined`.
+
+If we want to use a "default" `text` in this case, then we can specify it after `=`:
+
+```js run
+function showMessage(from, *!*text = "no text given"*/!*) {
+  alert( from + ": " + text );
+}
+
+showMessage("Ann"); // Ann: no text given
+```
+
+Now if the `text` parameter is not passed, it will get the value `"no text given"`
+
+Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:
+
+```js run
+function showMessage(from, text = anotherFunction()) {
+  // anotherFunction() only executed if no text given
+  // its result becomes the value of text
+}
+```
+
+
+````smart header="Default parameters old-style"
+Old editions of JavaScript did not support default parameters. So there are alternative ways to support them, that you can find mostly in the old scripts.
+
+For instance, an explicit check for being `undefined`:
+
+```js
+function showMessage(from, text) {
+*!*
+  if (text === undefined) {
+    text = 'no text given';
+  }
+*/!*
+
+  alert( from + ": " + text );
+}
+```
+
+...Or the `||` operator:
+
+```js
+function showMessage(from, text) {
+  // if text is falsy then text gets the "default" value
+  text = text || 'no text given';
+  ...
+}
+```
+
+
+````
+
+
+## Returning a value
+
+A function can return a value back into the calling code as the result.
+
+The simplest example would be a function that sums two values:
+
+```js run no-beautify
+function sum(a, b) {
+  *!*return*/!* a + b;
+}
+
+let result = sum(1, 2);
+alert( result ); // 3
+```
+
+The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above).
+
+There may be many occurences of `return` in a single function. For instance:
+
+```js run
+function checkAge(age) {
+  if (age > 18) {
+*!*
+    return true;
+*/!*
+  } else {
+*!*
+    return confirm('Got a permission from the parents?');
+*/!*
+  }
+}
+
+let age = prompt('How old are you?', 18);
+
+if ( checkAge(age) ) {
+  alert( 'Access granted' );
+} else {
+  alert( 'Access denied' );
+}
+```
+
+It is possible to use `return` without a value. That causes the function to exit immediately.
+
+For example:
+
+```js
+function showMovie(age) {
+  if ( !checkAge(age) ) {
+*!*
+    return;
+*/!*
+  }
+
+  alert( "Showing you the movie" ); // (*)
+  // ...
+}
+```
+
+In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`.
+
+````smart header="A function with an empty `return` or without it returns `undefined`"
+If a function does not return a value, it is the same as if it returns `undefined`:
+
+```js run
+function doNothing() { /* empty */ }
+
+alert( doNothing() === undefined ); // true
+```
+
+An empty `return` is also the same as `return undefined`:
+
+```js run
+function doNothing() {
+  return;
+}
+
+alert( doNothing() === undefined ); // true
+```
+````
+
+````warn header="Never add a newline between `return` and the value"
+For a long expression in `return`, it might be tempting to put it on a separate line, like this:
+
+```js
+return
+ (some + long + expression + or + whatever * f(a) + f(b))
+```
+That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as:
+
+```js
+return*!*;*/!*
+ (some + long + expression + or + whatever * f(a) + f(b))
+```
+So, it effectively becomes an empty return. We should put the value on the same line instead.
+````
+
+## Naming a function [#function-naming]
+
+Functions are actions. So their name is usually a verb. It should briefly, but as accurately as possible describe what the function does. So that a person who reads the code gets the right clue.
+
+It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes.
+
+For instance, functions that start with `"show"` -- usually show something.
+
+Function starting with...
+
+- `"get…"` -- return a value,
+- `"calc…"` -- calculate something,
+- `"create…"` -- create something,
+- `"check…"` -- check something and return a boolean, etc.
+
+Examples of such names:
+
+```js no-beautify
+showMessage(..)     // shows a message
+getAge(..)          // returns the age (gets it somehow)
+calcSum(..)         // calculates a sum and returns the result
+createForm(..)      // creates a form (and usually returns it)
+checkPermission(..) // checks a permission, returns true/false
+```
+
+With prefixes at place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns.
+
+```smart header="One function -- one action"
+A function should do exactly what is suggested by its name, no more.
+
+Two independant actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two).
+
+Few examples of breaking this rule:
+
+- `getAge` -- would be bad if it shows an `alert` with the age (should only get).
+- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return).
+- `checkPermission` -- would be bad if displays the `access granted/denied` message (should only perform the check and return the result).
+
+These examples assume common meanings of prefixes. What they mean for you is determined by you and your team. Maybe it's pretty normal for your code to behave differently. But you should have a firm understanding of what a prefix means, what a prefixed function can and what it cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
+```
+
+```smart header="Ultrashort function names"
+Functions that are used *very often* sometimes have ultrashort names.
+
+For example, [jQuery](http://jquery.com) framework defines a function `$`, [LoDash](http://lodash.com/) library has it's core function named `_`.
+
+These are exceptions. Generally functions names should be concise, but descriptive.
+```
+
+## Functions == Comments
+
+Functions should be short and do exactly one thing. If that thing is big, maybe it's worth to split the function into few smaller functions. Sometimes following this rule may be not easy, but it's a definitely good thing.
+
+A separate function is not only easier to test and debug -- its very existence is a great comment!
+
+For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`.
+
+The first variant uses a label:
+
+```js
+function showPrimes(n) {
+  nextPrime: for (let i = 2; i < n; i++) {
+
+    for (let j = 2; j < i; j++) {
+      if (i % j == 0) continue nextPrime;
+    }
+
+    alert( i ); // a prime
+  }
+}
+```
+
+The second variant uses an additional function `isPrime(n)` to test for primality:
+
+```js
+function showPrimes(n) {
+
+  for (let i = 2; i < n; i++) {
+    *!*if (!isPrime(i)) continue;*/!*
+
+    alert(i);  // a prime
+  }
+}
+
+function isPrime(n) {
+  for (let i = 2; i < n; i++) {
+    if ( n % i == 0) return false;
+  }
+  return true;
+}
+```
+
+The second variant is easier to understand isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*.
+
+So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable.
+
+## Summary
+
+A function declaration looks like this:
+
+```js
+function name(parameters, delimited, by, comma) {
+  /* code */
+}
+```
+
+- Values passed to function as parameters are copied to its local variables.
+- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables.
+- A function can return a value. If it doesn't then its result is `undefined`.
+
+To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables.
+
+It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect.
+
+Function naming:
+
+- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns.
+- A function is an action, so function names are usually verbal.
+- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does.
+
+Functions are the main building blocks of scripts. Now we covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply in their advanced features.
diff --git a/1-js/02-first-steps/14-function-basics/function_basics.png b/1-js/02-first-steps/14-function-basics/function_basics.png
new file mode 100644
index 00000000..7eb6e11e
Binary files /dev/null and b/1-js/02-first-steps/14-function-basics/function_basics.png differ
diff --git a/1-js/02-first-steps/14-function-basics/function_basics@2x.png b/1-js/02-first-steps/14-function-basics/function_basics@2x.png
new file mode 100644
index 00000000..e629bd71
Binary files /dev/null and b/1-js/02-first-steps/14-function-basics/function_basics@2x.png differ
diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md b/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md
new file mode 100644
index 00000000..3ea11247
--- /dev/null
+++ b/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md
@@ -0,0 +1,17 @@
+
+```js run
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+
+ask(
+  "Do you agree?",
+*!*
+  () => alert("You agreed."),
+  () => alert("You canceled the execution.")
+*/!*
+);
+```
+
+Looks short and clean, right?
diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md b/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md
new file mode 100644
index 00000000..a888ac15
--- /dev/null
+++ b/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md
@@ -0,0 +1,17 @@
+
+# Rewrite with arrow functions
+
+Replace Function Expressions with arrow functions in the code:
+
+```js run
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+
+ask(
+  "Do you agree?",
+  function() { alert("You agreed."); },
+  function() { alert("You canceled the execution."); }
+);
+```
diff --git a/1-js/02-first-steps/15-function-expressions-arrows/article.md b/1-js/02-first-steps/15-function-expressions-arrows/article.md
new file mode 100644
index 00000000..44cf3764
--- /dev/null
+++ b/1-js/02-first-steps/15-function-expressions-arrows/article.md
@@ -0,0 +1,482 @@
+# Function expressions and arrows
+
+In JavaScript a function is not a "magical language structure", but a special kind of value.
+
+[cut]
+
+The syntax that we used before is called *Function Declaration*:
+
+```js
+function sayHi() {
+  alert( "Hello" );
+}
+```
+
+There is another syntax of creating a function that is called *Function Expression*.
+
+It looks like this:
+
+```js
+let sayHi = function() {
+  alert( "Hello" );
+};
+```
+
+Here the function is created and assigned to the variable explicitly, like any other value. No matter, how the function is defined -- it's just a value, stored in the variable `sayHi`.
+
+
+The meaning of these code samples is the same: "create a function and put it into the variable `sayHi`".
+
+We can even print out that value using `alert`:
+
+```js run
+function sayHi() {
+  alert( "Hello" );
+}
+
+*!*
+alert( sayHi ); // shows the function code
+*/!*
+```
+
+Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes the execution, but JavaScript is not like that.
+
+In JavaScript, a function is a value and we can deal with that as a value. The code above shows its string representation, that is the source code.
+
+It is a special value of course, in the sense that we can call it like `sayHi()`.
+
+But it's still a value. So we can work with it like with other kinds of values.
+
+We can copy a function to another variable:
+
+```js run no-beautify
+function sayHi() {   // (1) create
+  alert( "Hello" );
+}
+
+let func = sayHi;    // (2) copy
+
+func(); // Hello     // (3) run the copy (it works)!
+sayHi(); // Hello    //     this still works too (why wouldn't it)
+```
+
+That's what happens above in detail:
+
+1. Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`.
+2. Line `(2)` copies it into variable `func`.
+
+    Please note again: there are no parentheses after `sayHi`. If they were, then `func = sayHi()` would write  *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself.
+3. Now the function can be called both as `sayHi()` and `func()`.
+
+Note, that we could also have used a Function Expression to declare `sayHi`, in the first line:
+
+```js
+let sayHi = function() { ... };
+
+let func = sayHi;
+// ...
+```
+
+Everything would work the same. Even more obvious what's going on, right?
+
+
+````smart header="Why there's a semicolon at the end?"
+There might be a question, why Function Expression has a semicolon `;` at the end, and Function Declaration does not:
+
+```js
+function sayHi() {
+  // ...
+}
+
+let sayHi = function() {
+  // ...
+}*!*;*/!*
+```
+
+The answer is simple:
+- There's no need in `;` at the end of code blocks and syntax structures that use them like `if { ... }`, `for {  }`, `function f { }` etc.
+- A Function Expression is used inside the statement: `let sayHi = ...;`, as a value. It's not a code block. The semicolon `;` is recommended at the end of statements, no matter what is the value. So the semicolon here is not related to Function Expression itself in any way, it just terminates the statement.
+````
+
+## Callback functions
+
+Let's see more examples of passing functions as values and using function expressions.
+
+We'll write a function `ask(question, yes, no)` with three parameters:
+
+`question`
+: Text of the question
+
+`yes`
+: Function to run if the answer is "Yes"
+
+`no`
+: Function to run if the answer is "No"
+
+The function should ask the `question` and, depending on the user's answer, call `yes()` or `no()`:
+
+```js run
+*!*
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+*/!*
+
+function showOk() {
+  alert( "You agreed." );
+}
+
+function showCancel() {
+  alert( "You canceled the execution." );
+}
+
+// usage: functions showOk, showCancel are passed as arguments to ask
+ask("Do you agree?", showOk, showCancel);
+```
+
+Before we'll explore how we can write it in a much shorter way, let's note that in the browser (and on the server-side in some cases) such functions are quite popular.
+
+The major difference between a real-life implementation and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser such a function usually draws a nice-looking question window. But that's another story.
+
+**The arguments of `ask` are called *callback functions* or just *callbacks*. The idea is that we pass a function and expect it to be "called back" in certain circumstances.**
+
+So, `showOk` becomes the callback for the "yes" answer and `showCancel` -- for the "no" answer.
+
+We can use Function Expressions to write the same much shorter:
+
+```js run no-beautify
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+
+*!*
+ask(
+  "Do you agree?",
+  function() { alert("You agreed."); },
+  function() { alert("You canceled the execution."); }
+);
+*/!*
+```
+
+Here functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here.
+
+Such code appears in our scripts very naturally, it's in the spirit of JavaScript.
+
+
+```smart header="A function is a value representing an \"action\""
+Regular values like strings or numbers represent the *data*.
+
+A function can be perceived as an *action*.
+
+We can pass it between variables and run when we want.
+```
+
+
+## Function Expression vs Function Declaration
+
+Let's formulate the key differences between Function Declarations and Expressions.
+
+First, the syntax: how to see what is what in the code.
+
+- *Function Declaration:* a function, declared as a separate statement, in the main code flow.
+
+    ```js
+    // Function Declaration
+    function sum(a, b) {
+      return a + b;
+    }
+    ```
+- *Function Expression:* a function, created inside an expression or inside another syntax construct.
+
+    Here the function is created at the right side of the "assignment expression =":
+    ```js
+    // Function Expression
+    let sum = function(a, b) {
+      return a + b;
+    }
+    ```
+
+The more subtle difference is *when* a function is created by JavaScript engine.
+
+**Function Expression is created when the execution reaches it and is usable since then.**
+
+Once the execution flow passes to the right side of the assignment `let sum = function…` -- here we go, the function is created and can be used (assigned, called etc) from now on.
+
+Function Declarations are different.
+
+**Function Declaration is usable in the whole script/code block.**
+
+In other words, when JavaScript *prepares* to run the script or a code block, it first looks for Function Declarations in it and creates the functions. We can think of it as an "initialization stage".
+
+And after all Function Declarations are processed, the execution goes on.
+
+As a natural effect, a function declared as Function Declaration can be called earlier than it is defined.
+
+For example, this works:
+
+```js run refresh untrusted
+*!*
+sayHi("John"); // Hello, John
+*/!*
+
+function sayHi(name) {
+  alert( `Hello, ${name}` );
+}
+```
+
+Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it.
+
+...And if there were Function Expression, then it wouldn't work:
+
+```js run refresh untrusted
+*!*
+sayHi("John"); // error!
+*/!*
+
+let sayHi = function(name) {  // (*) no magic any more
+  alert( `Hello, ${name}` );
+};
+```
+
+Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late.
+
+
+### Function Declaration in a block
+
+When Function Declaration is made within a code block, it is visible everywhere inside that block. But not outside of it.
+
+Sometimes that's handy to declare a local function only needed in that only block. But that feature may also cause problems.
+
+For instance, let's imagine that we need to declare a function `welcome()` depending on the `age` variable that we get in run time. And then we plan to use it sometimes later.
+
+The code below doesn't work:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+if (age < 18) {
+
+  function welcome() {
+    alert("Hello!");
+  }
+
+} else {
+
+  function welcome() {
+    alert("Greetings!");
+  }
+
+}
+
+*!*
+welcome(); // Error: welcome is not defined
+*/!*
+```
+
+The Function Declaration is visible only inside the code block where it resides.
+
+We can call it from within the block, but not from outside:
+
+```js run
+let age = 16; // take 16 as an example
+
+if (age < 18) {
+*!*
+  welcome();               // \   (runs)
+*/!*
+                           //  |
+  function welcome() {     //  |  
+    alert("Hello!");       //  |  Function Declaration is available
+  }                        //  |  everywhere in the block where it's declared
+                           //  |
+*!*
+  welcome();               // /   (runs)
+*/!*
+
+} else {
+                           // \
+  function welcome() {     //  |  
+    alert("Greetings!");   //  |  if age=16, the the execution does not go here,
+  }                        //  |  so this "welcome" is never created
+                           // /
+}
+
+// Here we're out of figure brackets,
+// so we can not see Function Declarations made inside of them.
+
+*!*
+welcome(); // Error: welcome is not defined
+*/!*
+```
+
+What can we do to make `welcome` visible outside of `if`?
+
+The right thing would be to use a Function Expression and assign `welcome` to the variable which is declared outside of `if` and has the proper visibility:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+let welcome;
+
+if (age < 18) {
+
+  welcome = function() {
+    alert("Hello!");
+  };
+
+} else {
+
+  welcome = function() {
+    alert("Greetings!");
+  };
+
+}
+
+*!*
+welcome(); // ok now
+*/!*
+```
+
+Or we could simplify it even further using a question mark operator `?`:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+let welcome = (age < 18) ?
+  function() { alert("Hello!"); } :
+  function() { alert("Greetings!"); };
+
+*!*
+welcome(); // ok now
+*/!*
+```
+
+
+```smart header="What to choose: Function Declaration or Function Expression?"
+As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax, the one we used before. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
+
+It's also a little bit easier to look up `function f(…) {…}` in the code than `let f = function(…) {…}`. Function Declarations are more "eye-catching".
+
+...But if Function Declaration does not suit us for some reason (we've seen an example above), then Function Expression should be used.
+```
+
+
+## Arrow functions [#arrow-functions]
+
+There's one more syntax for creating functions -- very simple and concise. It's called "arrow functions", because it looks like this:
+
+
+```js
+let func = (arg1, arg2, ...argN) => expression
+```
+
+...This creates a function `func` that has arguments `arg1..argN`, evaluates the `expression` on the right side with their use and returns its result.
+
+In other words, it's roughly the same as:
+
+```js
+let func = function(arg1, arg2, ...argN) {
+  return expression;
+}
+```
+
+...But much shorter.
+
+Let's see the example:
+
+```js run
+let sum = (a, b) => a + b;
+
+alert( sum(1, 2) ); // 3
+```
+
+Here the arrow function is a shorter form of:
+
+```js
+let sum = function(a, b) {
+  return a + b;
+};
+```
+
+If we have only one argument, then parentheses can be omitted, making that even shorter:
+
+```js run
+// same as
+// let double = function(n) { return n*2 }
+*!*
+let double = n => n*2;
+*/!*
+
+alert( double(3) ); // 6
+```
+
+If there are no arguments, we can put empty parentheses:
+
+```js run
+let sayHi = () => alert("Hello!");
+
+sayHi();
+```
+
+Arrow functions can be used same way as Function Expressions.
+
+For instance, here's the rewritten example with `welcome()`:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+let welcome = (age < 18) ?
+  () => alert('Hello') :
+  () => alert("Greetings!");
+
+welcome(); // ok now
+```
+
+The syntax may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
+
+Arrow functions are very convenient for simple one-line actions, when we're just lazy to write many words.
+
+```smart header="Multiline arrow functions"
+
+The examples above took arguments from the left of `=>` and evaluate the right-side expression with them.
+
+Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in figure brackets. Then use a normal `return` within them.
+
+Like this:
+
+```js run
+let sum = (a, b) => {  // the figure bracket opens a multiline function
+  let result = a + b;
+*!*
+  return result; // if we use figure brackets, must use return
+*/!*
+};
+
+alert( sum(1, 2) ); // 3
+```
+
+```smart header="More to come"
+Here we praised arrow functions for brevity. But that's not all! Arrow functions have other interesting features. We'll return to them later in the chapter <info:arrow-functions>.
+
+As for now, we can already use them for one-line actions and callbacks.
+```
+
+## Summary
+
+- Functions are values. They can be assigned, copied or declared in any place of the code.
+- If the function is declared as a separate statement, in the main code flow -- that's called "Function Declaration".
+- If the function is created as a part of an expression -- it's "Function Expression".
+- Function Declarations are processed before the code block is executed. They are visible everywhere in the block.
+- Function Expressions are created when the execution flow reaches them.
+
+
+In most cases when we need to declare a function, Function Declaration is preferable, because it is visible prior to the declaration itself. That gives more flexibility in code organization. And is usually more readable.
+
+So we should use Function Expression only when Function Declaration does not fit the task. We've seen a couple of examples of that in the chapter. And will see more in the future.
+
+Arrow functions are handy for one-liners. The come in two flavors:
+
+1. Without figure brackets: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
+2. With figure brackets: `(...args) => { body }` -- brackets allow to write multiple statements inside the function, but we need an explicit `return` to return something.
diff --git a/1-js/02-first-steps/16-javascript-specials/article.md b/1-js/02-first-steps/16-javascript-specials/article.md
new file mode 100644
index 00000000..2f71e987
--- /dev/null
+++ b/1-js/02-first-steps/16-javascript-specials/article.md
@@ -0,0 +1,289 @@
+# JavaScript specials
+
+This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments.
+
+[cut]
+
+## Code structure
+
+Statements are delimited with a semicolon:
+
+```js run no-beautify
+alert('Hello'); alert('World');
+```
+
+Usually, a line-break is also treated as a delimiter, so that would also work:
+
+```js run no-beautify
+alert('Hello')
+alert('World')
+```
+
+That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance:
+
+```js run
+alert("There will be an error after this message")
+
+[1, 2].forEach(alert)
+```
+
+Most codestyle guides agree that we should put a semicolon after each statement.
+
+Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops:
+
+```js
+function f() {
+  // no semicolon needed after function declaration
+}
+
+for(;;) {
+  // no semicolon needed after the loop
+}
+```
+
+...But even if we can put an "extra" semicolon somewhere, that's not an error, it will be ignored.
+
+More in: <info:structure>.
+
+## Strict mode
+
+To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`.
+
+```js
+'use strict';
+
+...
+```
+
+The directive must be at the top of a script or at the beginning of a function.
+
+Without `"use strict"`, everything still works, but some features behave in old-fasion, "compatible" way. We'd generally prefer the modern behavior.
+
+Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.
+
+More in: <info:strict-mode>.
+
+## Variables
+
+Can be declared using:
+
+- `let`
+- `const` (constant, can't be changed)
+- `var` (old-style, will see later)
+
+A variable name can include:
+- Letters and digits, but the first character may not be a digit.
+- Characters `$` and `_` are normal, on par with letters.
+- Non-latin alphabets and hieroglyphs are also allowed, but commonly not used.
+
+Variables are dynamically typed -- they can store any value:
+
+```js
+let x = 5;
+x = "John";
+```
+
+There are 7 data types:
+
+- `number` for both floating-point and integer numbers,
+- `string` for strings,
+- `boolean` for logical values: `true/false`,
+- `null` -- a type with a single value `null`, meaning "empty" or "does not exist",
+- `undefined` -- a type with a single value `undefined`, meaning "not assigned",
+- `object` and `symbol` -- for complex data structures and unique identifiers, we didn't learn them yet.
+
+The `typeof` operator returns the type for a value, with two exceptions:
+```js
+typeof null == "object" // error in the language
+typeof function(){} == "function" // functions are treated specially
+```
+
+More in: <info:variables> and <info:types>.
+
+## Interaction
+
+We're using a browser as a working environment, so basic UI functions will be:
+
+[`prompt(question[, default])`](mdn:api/Window/prompt)
+: Ask a `question`, and return either what the visitor entered or `null` if he pressed "cancel".
+
+[`confirm(question)`](mdn:api/Window/confirm)
+: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
+
+[`alert(message)`](mdn:api/Window/alert)
+: Output a `message`.
+
+All these functions are *modal*, they pause the code execution and prevent the visitor from interaction with the page until he answers.
+
+For instance:
+
+```js run
+let userName = prompt("Your name?", "Alice");
+let isTeaWanted = confirm("Do you want some tea?");
+
+alert( "Visitor: " + userName ); // Alice
+alert( "Tea wanted: " + isTeaWanted ); // true
+```
+
+More in: <info:alert-prompt-confirm>.
+
+## Operators
+
+JavaScript supports following operators:
+
+Arithmetical
+: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number.
+
+    Binary plus `+` concatenates strings. And if any of the operands is a string -- the other one is converted to string too:
+
+    ```js run
+    alert( '1' + 2 ); // '12', string
+    alert( 1 + '2' ); // '12', string
+    ```
+
+Assignments
+: There is a simple assignment: `a = b` and combined ones like `a *= 2`.
+
+Bitwise
+: Bitwise operators work with integers on bit-level: see the [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators) when they are needed.
+
+Ternary
+: The only operator with three parameters: `cond ? resultA : result B`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
+
+Logical operators
+: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped.
+
+Comparisons
+: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal:
+
+    ```js run
+    alert( 0 == false ); // true
+    alert( 0 == '' ); // true
+    ```
+
+    Other comparisons convert to a number as well.
+
+    The strict equality operator `===` doesn't do the conversion: different types always mean different values for it, so:
+
+    Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else.
+
+    Greater/less comparisons compare strings character-by-character, other types are converted to a number.
+
+Logical operators
+: There are few others, like a comma operator.
+
+More in: <info:operators>, <info:comparison>, <info:logical-operators>.
+
+## Loops
+
+- We covered 3 types of loops:
+
+    ```js
+    // 1
+    while (condition) {
+      ...
+    }
+
+    // 2
+    do {
+      ...
+    } while (condition);
+
+    // 3
+    for(let i = 0; i < 10; i++) {
+      ...
+    }
+    ```
+
+- The variable declared in `for(let...)` loop is visible only inside the loop. But we can also omit `let` and reuse an existing variable.
+- Directives `break/continue` allow to exit the whole loop/current iteration. Use labels to break nested loops.
+
+Details in: <info:while-for>.
+
+Later we'll study more types of loops to deal with objects.
+
+## The "switch" construct
+
+The "switch" construct can replace multiple `if` checks. It uses `===` for comparisons.
+
+For instance:
+
+```js run
+let age = prompt('Your age?', 18);
+
+switch (age) {
+  case 18:
+    alert("Won't work"); // the result of prompt is a string, not a number
+
+  case "18":
+    alert("This works!"");
+    break;
+
+  default:
+    alert("Any value not equal to one above");
+}
+```
+
+Details in: <info:switch>.
+
+## Functions
+
+We covered 3 ways to create a function in JavaScript:
+
+1. Function Declaration: the function in the main code flow
+
+    ```js
+    function sum(a, b) {
+      let result = a + b;
+
+      return result;
+    }
+    ```
+
+2. Function Expression: the function in the context of an expression
+
+    ```js
+    let sum = function(a, b) {
+      let result = a + b;
+
+      return result;
+    }
+    ```
+
+    Function expression can have a name, like `sum = function name(a, b)`, but that `name` is only visible inside that function.
+
+3. Arrow functions:
+
+    ```js
+    // expression at the right side
+    let sum = (a, b) => a + b;
+
+    // or multiline syntax with { ... }, need return here:
+    let sum = (a, b) => {
+      // ...
+      return a + b;
+    }
+
+    // without arguments
+    let sayHi = () => alert("Hello");
+
+    // with a single argument
+    let double = n => n * 2;
+    ```
+
+
+- Functions may have local variables -- those declared inside its body. Such variables are only visible inside the function.
+- Parameters can have default values: `function sum(a=1, b=2) {...}`.
+- Functions always return something. If there's no `return` statement, then the result is `undefined`.
+
+
+| Function Declaration | Function Expression |
+|----------------------|---------------------|
+| visible in the whole code block | created when the execution reaches it |
+|   - | can have a name, visible only inside the function |
+
+More: see <info:function-basics>, <info:function-expressions-arrows>.
+
+## More to come
+
+That was a brief list of JavaScript features. As of now we studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript.
diff --git a/1-js/02-first-steps/index.md b/1-js/02-first-steps/index.md
new file mode 100644
index 00000000..31281656
--- /dev/null
+++ b/1-js/02-first-steps/index.md
@@ -0,0 +1,3 @@
+# JavaScript Fundamentals
+
+Let's learn the fundamentals of script building.
\ No newline at end of file
diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md
new file mode 100644
index 00000000..44bc1fbe
--- /dev/null
+++ b/1-js/03-code-quality/01-debugging-chrome/article.md
@@ -0,0 +1,185 @@
+# Debugging in Chrome
+
+Before writing more complex code, let's talk about debugging.
+
+All modern browsers and most other environments support "debugging" -- a special UI in developer tools that makes finding and fixing errors much easier.
+
+We'll be using Chrome here, because it's probably the most feature-rich in this aspect.
+
+[cut]
+
+## The "sources" pane
+
+Your Chrome version may look a little bit different, but it still should be obvious what's there.
+
+- Open the [example page](debugging/index.html) in Chrome.
+- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
+- Select the `sources` pane.
+
+Here's what you should see if you are doing it for the first time:
+
+![](chrome-open-sources.png)
+
+The toggler button <span class="devtools" style="background-position:-168px -76px"></span> opens the tab with files.
+
+Let's click it and select `index.html` and then `hello.js` in the tree view. That's what should show up:
+
+![](chrome-tabs.png)
+
+Here we can see three zones:
+
+1. **Resources zone** lists html, javascript, css and other files including images that are attached to the page. Chrome extensions may appear here too.
+2. **Source zone** shows the source code.
+3. **Information and control zone** is for debugging, we'll explore it soon.
+
+Now you could click the same toggler <span class="devtools" style="background-position:-200px -76px"></span> again to hide the resources list and give the code some space.
+
+## Console
+
+If we press `Esc`, then a console opens below, we can type commands there and press `key:Enter` to execute.
+
+After a statement is executed, its result is shown below.
+
+For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`:
+
+![](chrome-sources-console.png)
+
+## Breakpoints
+
+Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at the line number `4`. Yes, right on the `"4"` digit, not on the code.
+
+Contratulations! You've set a breakpoint. Please also click on the number for line `8`.
+
+Should look like this (blue is where you should click):
+
+![](chrome-sources-breakpoint.png)
+
+A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution.
+
+While the code is paused, we can examine current variables, execute commands in the console etc. In other words, to debug it.
+
+We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to:
+- Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
+- Temporarily disable the breakpoint by unchecking it.
+- Remove the breakpoint by right-clicking and selecting Remove.
+- ...And so on.
+
+```smart header="Conditional breakpoints"
+*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy.
+
+That's handy when we need to stop only for a certain variable value or for a certain function parameters.
+```
+
+## Debugger command
+
+We can also pause the code by using the `debugger` command, like this:
+
+```js
+function hello(name) {
+  let phrase = `Hello, ${name}!`;
+
+*!*
+  debugger;  // <-- the debugger stops here
+*/!*
+
+  say(phrase);
+}
+```
+
+That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint.
+
+
+## Pause and look around
+
+In our example, `hello()` is called during the page load, so the easiest way to activate debugger -- is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac).
+
+As the breakpoint is set, the execution pauses at the 4th line:
+
+![](chrome-sources-debugger-pause.png)
+
+Please open the informational dropdowns to the right (labelled with arrows). They allow to examine the current code state:
+
+1. **`Watch` -- shows current values for any expressions.**
+
+    You can click the plus `+` and input an expression. The debugger will shown its value at any moment, automatically recalculating it in in the process of execution.
+
+2. **`Call Stack` -- shows the nested calls chain.**
+
+    At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous").
+
+    If you click on a stack item, the debugger jumps to the corresponding code, and all its variables can be examined as well.
+3. **`Scope` -- current variables.**
+
+    `Local` shows local function variables. You can also see their values highlighted right over the source.
+
+    `Global` has global variables (out of any functions).
+
+    There's also `this` keyword there that we didn't study yet, but we'll do that soon.
+
+## Tracing the execution
+
+Now it's time to *trace* the script.
+
+There are buttons for it at the top of the right pane. Let's engage them.
+
+<span class="devtools" style="background-position:-7px -76px"></span> -- continue the execution, hotkey `key:F8`.
+: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger looses the control.
+
+    Here's what we can see after a click on it:
+
+    ![](chrome-sources-debugger-trace-1.png)
+
+    The execution has resumed, reached another breakpoint inside `say()` and paused there.    Take a look at the "Call stack" at the right. It has increased by one more call. We're inside `say()` now.
+
+<span class="devtools" style="background-position:-137px -76px"></span> -- make a step (run the next command), but *not go into the function*, hotkey `key:F10`.
+: If we click it now, `alert` will be shown. The important thing is that `alert` can be any function, the execution "steps over it", skipping the function internals.
+
+<span class="devtools" style="background-position:-72px -76px"></span> -- make a step, hotkey `key:F11`.
+: The same as the previous one, but "steps into" nested functions. Clicking this will step through all script actions one by one.
+
+<span class="devtools" style="background-position:-104px -76px"></span> -- continue the execution till the end of the current function, hotkey `key:Shift+F11`.
+: The execution would stop at the very last line of the current function. That's handy when we accidentally entered a nested call using <span class="devtools" style="background-position:-72px -76px"></span>, but it does not interest us, and we want to continue to its end as soon as possible.
+
+<span class="devtools" style="background-position:-7px -28px"></span> -- enable/disable all breakpoints.
+: That button does not move the execution. Just a mass on/off for breakpoints.
+
+<span class="devtools" style="background-position:-264px -4px"></span> -- enable/disable automatic pause in case of an error.
+: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
+
+```smart header="Continue to here"
+Right click on a line of code opens the context menu with a great option called "Continue to here".
+
+That's handy when we want to move multiple steps forward, but too lazy to set a breakpoint.
+```
+
+## Logging
+
+To output something to console, there's `console.log` function.
+
+For instance, this outputs values from `0` to `4` to console:
+
+```js run
+// open console to see
+for (let i = 0; i < 5; i++) {
+  console.log("value", i);
+}
+```
+
+Regular users don't see that output, it is in the console. To see it -- either open the Console tab of developer tools or press `key:Esc` while in another tab: that opens the console at the bottom.
+
+If we have enough logging in our code, then we can see what's going on from the records, without the debugger.
+
+## Summary
+
+As we can see, there are 3 main ways to pause a script:
+1. A breakpoint.
+2. The `debugger` statements.
+3. An error (if dev tools are open and the button <span class="devtools" style="background-position:-264px -4px"></span> is "on")
+
+Then we can examine variables and step on to see where the execution goes the wrong way.
+
+There's much more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>
+
+The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.
+
+Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click as well!
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png
new file mode 100644
index 00000000..7d779337
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png
new file mode 100644
index 00000000..bdc8d72c
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.png
new file mode 100644
index 00000000..2fe449c9
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint@2x.png
new file mode 100644
index 00000000..e4abc89d
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint@2x.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.png
new file mode 100644
index 00000000..98b22e77
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png
new file mode 100644
index 00000000..3269a80f
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.png
new file mode 100644
index 00000000..719293d2
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause@2x.png
new file mode 100644
index 00000000..5c22ab36
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause@2x.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.png
new file mode 100644
index 00000000..1848ccfa
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1@2x.png
new file mode 100644
index 00000000..fcabf722
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1@2x.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png
new file mode 100644
index 00000000..ff91c531
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png differ
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png
new file mode 100644
index 00000000..09b10bf4
Binary files /dev/null and b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_break_error.png b/1-js/03-code-quality/01-debugging-chrome/chrome_break_error.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_break_error.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_break_error.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_break_error@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome_break_error@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_break_error@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_break_error@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_break.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_break.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_break.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_break@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_break@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_break@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_breakpoint.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_breakpoint.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_breakpoint@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_breakpoint@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_buttons.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_buttons.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome_sources_buttons@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/chrome_sources_buttons@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/console_error.png b/1-js/03-code-quality/01-debugging-chrome/console_error.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/console_error.png
rename to 1-js/03-code-quality/01-debugging-chrome/console_error.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/console_error@2x.png b/1-js/03-code-quality/01-debugging-chrome/console_error@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/console_error@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/console_error@2x.png
diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js b/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js
new file mode 100644
index 00000000..4236740e
--- /dev/null
+++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js
@@ -0,0 +1,9 @@
+function hello(name) {
+  let phrase = `Hello, ${name}!`;
+
+  say(phrase);
+}
+
+function say(phrase) {
+  alert(`** ${phrase} **`);
+}
diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html
new file mode 100644
index 00000000..6c651e85
--- /dev/null
+++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <script src="hello.js"></script>
+
+  An example for debugging.
+
+  <script>
+  hello("John");
+  </script>
+
+</body>
+</html>
diff --git a/1-js/03-code-quality/01-debugging-chrome/head.html b/1-js/03-code-quality/01-debugging-chrome/head.html
new file mode 100644
index 00000000..f219b0af
--- /dev/null
+++ b/1-js/03-code-quality/01-debugging-chrome/head.html
@@ -0,0 +1,8 @@
+<style>
+span.devtools {
+  display: inline-block;
+  background-image: url(/article/debugging-chrome/toolbarButtonGlyphs.svg);
+  height:16px;
+  width:16px;
+}
+</style>
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage1.png b/1-js/03-code-quality/01-debugging-chrome/manage1.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage1.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage1.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage1@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage1@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage1@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage1@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage2.png b/1-js/03-code-quality/01-debugging-chrome/manage2.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage2.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage2.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage2@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage2@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage2@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage2@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage3.png b/1-js/03-code-quality/01-debugging-chrome/manage3.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage3.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage3.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage3@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage3@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage3@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage3@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage4.png b/1-js/03-code-quality/01-debugging-chrome/manage4.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage4.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage4.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage4@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage4@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage4@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage4@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage5.png b/1-js/03-code-quality/01-debugging-chrome/manage5.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage5.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage5.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage5@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage5@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage5@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage5@2x.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage6.png b/1-js/03-code-quality/01-debugging-chrome/manage6.png
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage6.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage6.png
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage6@2x.png b/1-js/03-code-quality/01-debugging-chrome/manage6@2x.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/manage6@2x.png
rename to 1-js/03-code-quality/01-debugging-chrome/manage6@2x.png
diff --git a/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg b/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg
new file mode 100644
index 00000000..5bdf20a8
--- /dev/null
+++ b/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg
@@ -0,0 +1,1035 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="168"
+   version="1.1"
+   width="352"
+   xml:space="preserve"
+   id="svg3395"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="toolbarButtonGlyphs.svg"><metadata
+     id="metadata3773"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+     showgrid="true"
+     id="namedview3397"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="155.02536"
+     inkscape:cy="18.05"
+     inkscape:window-width="1920"
+     inkscape:window-height="1172"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3395"
+     inkscape:snap-global="false"
+     showguides="true"
+     inkscape:guide-bbox="true"><inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid3327"
+       snapvisiblegridlinesonly="true"
+       spacingx="32px"
+       spacingy="24px"
+       type="xygrid"
+       visible="true" /></sodipodi:namedview><defs
+     id="defs3400"><linearGradient
+       id="a"><stop
+         offset="0"
+         stop-color="#606eda"
+         id="stop3403" /><stop
+         offset="1"
+         stop-color="#021db2"
+         id="stop3405" /></linearGradient><linearGradient
+       id="b"><stop
+         offset="0"
+         stop-color="#e59290"
+         id="stop3408" /><stop
+         offset="1"
+         stop-color="#e99890"
+         id="stop3410" /></linearGradient><linearGradient
+       id="c"><stop
+         offset="0"
+         stop-color="#c0544f"
+         id="stop3413" /><stop
+         offset="1"
+         stop-color="#d08481"
+         id="stop3415" /></linearGradient><linearGradient
+       id="d"><stop
+         offset="0"
+         stop-color="#ffa801"
+         stop-opacity="0"
+         id="stop3418" /><stop
+         offset="1"
+         stop-color="#f0fb3d"
+         id="stop3420" /></linearGradient><linearGradient
+       id="e"><stop
+         offset="0"
+         stop-color="#ffbd00"
+         stop-opacity="0.65"
+         id="stop3423" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3425" /></linearGradient><linearGradient
+       id="f"><stop
+         offset="0"
+         stop-color="#00d600"
+         stop-opacity="0"
+         id="stop3428" /><stop
+         offset="1"
+         stop-color="#d8fc7b"
+         stop-opacity="0.81"
+         id="stop3430" /></linearGradient><linearGradient
+       id="g"><stop
+         offset="0"
+         stop-color="#00ba00"
+         id="stop3433" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3435" /></linearGradient><linearGradient
+       id="h"><stop
+         offset="0"
+         stop-color="#00a104"
+         id="stop3438" /><stop
+         offset="1"
+         stop-color="#00c605"
+         id="stop3440" /></linearGradient><linearGradient
+       id="i"><stop
+         offset="0"
+         stop-color="#f00"
+         stop-opacity="0"
+         id="stop3443" /><stop
+         offset="1"
+         stop-color="#f0cb68"
+         stop-opacity="0.71"
+         id="stop3445" /></linearGradient><linearGradient
+       id="j"><stop
+         offset="0"
+         stop-color="#e60000"
+         stop-opacity="0.65"
+         id="stop3448" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3450" /></linearGradient><linearGradient
+       id="k"><stop
+         offset="0"
+         stop-color="#a10000"
+         id="stop3453" /><stop
+         offset="1"
+         stop-color="#c60000"
+         id="stop3455" /></linearGradient><linearGradient
+       id="l"><stop
+         offset="0"
+         stop-color="#d7687d"
+         id="stop3458" /><stop
+         offset="1"
+         stop-color="#b21402"
+         id="stop3460" /></linearGradient><radialGradient
+       cx="0"
+       cy="0"
+       fx="0"
+       fy="0"
+       gradientTransform="matrix(18,0,0,-18,680,341)"
+       gradientUnits="userSpaceOnUse"
+       id="z"
+       r="1"
+       spreadMethod="pad"><stop
+         offset="0"
+         id="stop3463" /><stop
+         offset="1"
+         stop-opacity="0"
+         id="stop3465" /></radialGradient><radialGradient
+       cx="0"
+       cy="0"
+       fx="0"
+       fy="0"
+       gradientTransform="matrix(9,0,0,9,304,36)"
+       gradientUnits="userSpaceOnUse"
+       id="A"
+       r="1"
+       spreadMethod="pad"
+       xlink:href="#z" /><linearGradient
+       gradientTransform="matrix(0,-0.58333333,-0.58333333,0,118,110)"
+       gradientUnits="userSpaceOnUse"
+       id="m"
+       x1="0"
+       x2="24"
+       xlink:href="#l"
+       y1="0"
+       y2="0" /><linearGradient
+       gradientTransform="matrix(0,1,-1,0,206,0)"
+       gradientUnits="userSpaceOnUse"
+       id="n"
+       x1="96.5"
+       x2="109.5"
+       xlink:href="#b"
+       y1="103"
+       y2="103" /><linearGradient
+       gradientTransform="matrix(0,1,-1,0,207,-17)"
+       gradientUnits="userSpaceOnUse"
+       id="o"
+       x1="113"
+       x2="127"
+       xlink:href="#c"
+       y1="104"
+       y2="104" /><linearGradient
+       gradientTransform="matrix(0,-0.41666666,-0.41666666,0,218,106)"
+       gradientUnits="userSpaceOnUse"
+       id="p"
+       x1="0"
+       x2="24"
+       xlink:href="#l"
+       y1="0"
+       y2="0" /><linearGradient
+       gradientTransform="matrix(0.71428571,0,0,0.71428571,132.28571,37.714287)"
+       gradientUnits="userSpaceOnUse"
+       id="q"
+       x1="113"
+       x2="127"
+       xlink:href="#a"
+       y1="104"
+       y2="104" /><linearGradient
+       gradientTransform="matrix(0,1.3793103,-1.3008129,0,363.08462,-218.35335)"
+       gradientUnits="userSpaceOnUse"
+       id="r"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#k"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,-0.62931035,0.92682926,0,133.46895,244.52849)"
+       gradientUnits="userSpaceOnUse"
+       id="s"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#j"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,0.43965518,0.78048781,0,148.48744,2.1206316)"
+       gradientUnits="userSpaceOnUse"
+       id="t"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#i"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(-0.01506784,1.3792098,-1.3007182,-0.01421029,377.66542,-216.8212)"
+       gradientUnits="userSpaceOnUse"
+       id="u"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#h"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0.00687469,-0.62926454,0.92676181,0.01012483,142.86511,243.44332)"
+       gradientUnits="userSpaceOnUse"
+       id="v"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#g"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(-0.00480288,0.43962318,0.780431,0.00852617,160.60265,1.1603253)"
+       gradientUnits="userSpaceOnUse"
+       id="w"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#f"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,-0.62931035,0.92682926,0,155.46895,244.52849)"
+       gradientUnits="userSpaceOnUse"
+       id="x"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#e"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,0.43965518,0.78048781,0,170.44325,2.076437)"
+       gradientUnits="userSpaceOnUse"
+       id="y"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#d"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#l-0"
+       id="linearGradient3239"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,-0.41666666,-0.41666666,0,249.99999,117)"
+       x1="0"
+       y1="0"
+       x2="24"
+       y2="0" /><linearGradient
+       id="l-0"><stop
+         offset="0"
+         stop-color="#d7687d"
+         id="stop3458-8" /><stop
+         offset="1"
+         stop-color="#b21402"
+         id="stop3460-8" /></linearGradient></defs><path
+     d="M 57,12 53.5,8 39,8 l 0,8 14.5,0"
+     id="path3481"
+     inkscape:connector-curvature="0" /><path
+     d="M 25,36 21.36,32 19.57,32 14,40 21.36,40 25,36 z"
+     id="path3483"
+     inkscape:connector-curvature="0" /><path
+     d="M 7,32 7,40 9.05,40 14,32 7,32 z"
+     id="path3485"
+     inkscape:connector-curvature="0" /><path
+     d="M 9.67,44.55 8.08,43.23 18.84,27.45 20.43,28.77 9.67,44.55 z"
+     id="path3487"
+     inkscape:connector-curvature="0" /><path
+     d="m 16,5 0,2 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 l -1.84,0 c -0.04,1.72 -1.43,3.09 -3.16,3.09 -1.75,0 -3.16,-1.4 -3.16,-3.15 0,-1.75 1.41,-3.16 3.16,-3.16 L 16,11 20.5,8 16,5 z"
+     id="path3489"
+     inkscape:connector-curvature="0" /><path
+     d="m 53,37 -10,0 0,-5 10,0 0,5 z m -12,5 14,0 0,-12 -14,0 0,12 z"
+     id="path3491"
+     inkscape:connector-curvature="0" /><path
+     d="m 10,57 -2,0 0,9 11,0 0,-2 -9,0 z"
+     id="path3493"
+     inkscape:connector-curvature="0" /><path
+     d="m 13,56 7,0 0,5 -7,0 z m -2,-2 0,9 11,0 0,-9 z"
+     id="path3495"
+     inkscape:connector-curvature="0" /><path
+     d="m 80.44,16.94 c -2.48,0 -4.5,-2.02 -4.5,-4.5 0,-0.88 0.26,-1.7 0.69,-2.39 l 6.2,6.2 c -0.69,0.44 -1.51,0.69 -2.39,0.69 m 4.5,-4.5 c 0,0.88 -0.26,1.7 -0.69,2.39 l -6.2,-6.2 c 0.69,-0.44 1.51,-0.69 2.39,-0.69 2.48,0 4.5,2.02 4.5,4.5 M 80.5,6 C 76.91,6 74,8.91 74,12.5 74,16.09 76.91,19 80.5,19 84.09,19 87,16.09 87,12.5 87,8.91 84.09,6 80.5,6"
+     id="path3505"
+     inkscape:connector-curvature="0" /><path
+     d="m 117,65 -10,0 0,-10 10,0 0,10 z"
+     id="path3507"
+     inkscape:connector-curvature="0" /><path
+     d="M 149,8.33 147.67,7 144,10.67 140.33,7 139,8.33 142.67,12 139,15.67 140.33,17 144,13.33 147.67,17 149,15.67 145.33,12 149,8.33 z"
+     id="path3509"
+     inkscape:connector-curvature="0" /><path
+     d="m 44,59 2,3 0,4 4,0 0,-4 2,-3 z"
+     id="path3511"
+     inkscape:connector-curvature="0"
+     style="opacity:0.5;fill:#424242" /><path
+     d="m 46.5,65.23 c 0.32,0.13 0.84,0.24 1.47,0.24 0.59,0 1.14,-0.1 1.53,-0.26 l 0,-3.93 4,-4.57 0,-0.19 -11,0 0,0.22 4,4.57 0,3.93 z M 47.97,67 C 46.81,66.91 45.82,66.71 45,66.01 l 0,-4.12 -4,-4.57 0,-2.32 14,0 0,2.35 -4,4.57 0,4.13 c -0.92,0.67 -2.1,0.94 -3.03,0.95"
+     id="path3513"
+     inkscape:connector-curvature="0" /><path
+     d="M 86,60 76,55 76,65"
+     id="path3515"
+     inkscape:connector-curvature="0" /><path
+     d="m 153,57 -11,0 0,-2 11,0 0,2 z"
+     id="path3517"
+     inkscape:connector-curvature="0"
+     style="opacity:0.2" /><path
+     d="m 142,57 -6,0 0,-2 6,0 0,2 z"
+     id="path3519"
+     inkscape:connector-curvature="0" /><path
+     d="m 145,60 -6,0 0,-2 6,0 0,2 z"
+     id="path3521"
+     inkscape:connector-curvature="0" /><path
+     d="m 150,63 -6,0 0,-2 6,0 0,2 z"
+     id="path3523"
+     inkscape:connector-curvature="0" /><path
+     d="m 152,66 -6,0 0,-2 6,0 0,2 z"
+     id="path3525"
+     inkscape:connector-curvature="0" /><path
+     d="m 170,67 -2,0 0,-9 2,0 0,9 z"
+     id="path3527"
+     inkscape:connector-curvature="0" /><path
+     d="m 173,67 -2,0 0,-11 2,0 0,11 z"
+     id="path3529"
+     inkscape:connector-curvature="0" /><path
+     d="m 176,67 -2,0 0,-13 2,0 0,13 z"
+     id="path3531"
+     inkscape:connector-curvature="0" /><path
+     d="m 179,67 -2,0 0,-4 2,0 0,4 z"
+     id="path3533"
+     inkscape:connector-curvature="0" /><path
+     d="m 182,67 -2,0 0,-9 2,0 0,9 z"
+     id="path3535"
+     inkscape:connector-curvature="0" /><path
+     d="m 185,67 -2,0 0,-11 2,0 0,11 z"
+     id="path3537"
+     inkscape:connector-curvature="0" /><path
+     d="m 208,57 -10,0 0,-2 10,0 0,2 z"
+     id="path3539"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,57 -5,0 0,-2 5,0 0,2 z"
+     id="path3541"
+     inkscape:connector-curvature="0" /><path
+     d="m 200,61 -2,0 0,-2 2,0 0,2 z"
+     id="path3543"
+     inkscape:connector-curvature="0" /><path
+     d="m 213,61 -10,0 0,-2 10,0 0,2 z"
+     id="path3545"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,61 -2,0 0,-2 2,0 0,2 z"
+     id="path3547"
+     inkscape:connector-curvature="0" /><path
+     d="m 205,65 -7,0 0,-2 7,0 0,2 z"
+     id="path3549"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,65 -8,0 0,-2 8,0 0,2 z"
+     id="path3551"
+     inkscape:connector-curvature="0" /><path
+     d="m 274,64 -7,0 0,-8 7,0 0,8 z m -9,2 14,0 0,-12 -14,0 0,12 z"
+     id="path3553"
+     inkscape:connector-curvature="0" /><path
+     d="m 298,12 c 0,3.31 2.69,6 6,6 3.31,0 6,-2.69 6,-6 0,-3.31 -2.69,-6 -6,-6 -3.31,0 -6,2.69 -6,6"
+     id="path3555"
+     inkscape:connector-curvature="0" /><path
+     d="m 295,36 c 0,4.97 4.03,9 9,9 l 0,0 c 4.97,0 9,-4.03 9,-9 l 0,0 c 0,-4.97 -4.03,-9 -9,-9 l 0,0 c -4.97,0 -9,4.03 -9,9"
+     id="path3557"
+     inkscape:connector-curvature="0"
+     style="fill:url(#A)" /><path
+     d="m 298,36 c 0,3.31 2.69,6 6,6 3.31,0 6,-2.69 6,-6 0,-3.31 -2.69,-6 -6,-6 -3.31,0 -6,2.69 -6,6"
+     id="path3559"
+     inkscape:connector-curvature="0" /><path
+     d="m 239,30 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 1.03,0 1.96,-0.31 2.75,-0.84 L 245.56,43 247,41.56 243.19,37.75 C 243.71,36.96 244,36.02 244,35 c 0,-2.76 -2.24,-5 -5,-5 z m 0,2 c 1.66,0 3,1.34 3,3 0,1.66 -1.34,3 -3,3 -1.66,0 -3,-1.34 -3,-3 0,-1.66 1.34,-3 3,-3 z"
+     id="path3561"
+     inkscape:connector-curvature="0" /><path
+     d="m 233.73,63.76 5.25,-3.23 5.32,2.23 4.95,-4.03"
+     stroke-miterlimit="10"
+     id="path3563"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:1.48000002;stroke-miterlimit:10" /><path
+     d="m 231,67 0,-13 -1,0 0,14 21,0 0,-1 z"
+     id="path3565"
+     inkscape:connector-curvature="0" /><path
+     d="m 237,11 -4,0 0,-4 4,0 0,4 z"
+     id="path3567"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,9 -9,0 0,-2 9,0 0,2 z"
+     id="path3569"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,11 -9,0 0,-1 9,0 0,1 z"
+     id="path3571"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,15 -9,0 0,-2 9,0 0,2 z"
+     id="path3573"
+     inkscape:connector-curvature="0" /><path
+     d="m 237,17 -4,0 0,-4 4,0 0,4 z"
+     id="path3575"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,17 -9,0 0,-1 9,0 0,1 z"
+     id="path3577"
+     inkscape:connector-curvature="0" /><path
+     d="m 176,38.13 c -1.18,0 -2.13,-0.96 -2.13,-2.13 0,-1.18 0.96,-2.13 2.13,-2.13 1.18,0 2.13,0.96 2.13,2.13 0,1.18 -0.96,2.13 -2.13,2.13 m 8,-3.73 -2.93,-0.53 1.72,-2.39 -2.26,-2.26 -2.46,1.79 -0.47,-3 -3.2,0 -0.4,3.13 -2.53,-1.92 -2.26,2.26 1.99,2.59 -3.2,0.33 0,3.2 3.33,0.33 -2.12,2.59 2.26,2.26 2.53,-2.12 0.4,3.33 3.2,0 0.4,-3.2 2.53,1.99 2.26,-2.26 -1.79,-2.45 3,-0.47 0,-3.2 z"
+     id="path3579"
+     inkscape:connector-curvature="0" /><path
+     d="m 268.01,35.99 c 0.61,0.28 1.07,0.9 1.07,1.58 0.11,0.85 -0.05,1.72 0.12,2.57 0.27,0.54 1,0.28 1.43,0.55 0.49,0.24 0.48,1.01 -0.06,1.18 -0.56,0.22 -1.18,0.08 -1.74,-0.05 -0.71,-0.2 -1.41,-0.72 -1.5,-1.5 -0.18,-0.89 0.01,-1.8 -0.16,-2.68 -0.22,-0.64 -0.94,-0.9 -1.57,-0.93 -0.58,-0.1 -0.83,-0.94 -0.35,-1.3 0.51,-0.35 1.26,-0.14 1.69,-0.66 0.44,-0.48 0.29,-1.18 0.32,-1.78 0,-0.81 -0.02,-1.77 0.65,-2.34 0.66,-0.54 1.58,-0.71 2.41,-0.63 0.63,0 0.98,0.87 0.4,1.22 -0.44,0.37 -1.2,0.06 -1.51,0.65 -0.14,0.56 -0.05,1.15 -0.07,1.73 -0.01,0.75 -0.05,1.64 -0.72,2.13 -0.12,0.1 -0.26,0.19 -0.4,0.26"
+     id="path3581"
+     inkscape:connector-curvature="0" /><path
+     d="m 276.98,35.99 c -0.67,-0.3 -1.08,-1.02 -1.08,-1.75 -0.07,-0.76 0.03,-1.52 -0.06,-2.28 -0.24,-0.58 -0.98,-0.4 -1.46,-0.59 -0.59,-0.24 -0.48,-1.18 0.14,-1.31 0.73,-0.15 1.52,-0.01 2.18,0.32 0.56,0.28 0.95,0.86 0.99,1.48 0.13,0.83 -0.03,1.68 0.13,2.5 0.2,0.68 0.94,0.83 1.54,0.9 0.56,0.07 0.86,0.8 0.46,1.21 -0.44,0.46 -1.2,0.2 -1.65,0.66 -0.51,0.46 -0.4,1.21 -0.4,1.83 -0.03,0.78 0.06,1.69 -0.52,2.3 -0.74,0.65 -1.8,0.86 -2.75,0.68 -0.52,-0.16 -0.69,-1.01 -0.15,-1.25 0.44,-0.23 1.02,-0.08 1.41,-0.45 0.26,-0.45 0.09,-0.98 0.14,-1.47 0.01,-0.76 -0.07,-1.63 0.43,-2.26 0.18,-0.21 0.42,-0.37 0.66,-0.51"
+     id="path3583"
+     inkscape:connector-curvature="0" /><path
+     d="m 275,15 -2,0 0,-6 2,0 z m -4,0 -2,0 0,-6 2,0 z m 4,-10 -6,0 -4,4 0,6 4,4 6,0 4,-4.12 0,-5.88 z"
+     id="path3585"
+     inkscape:connector-curvature="0" /><path
+     d="m 139.5,33 9,0 -1.5,10 -6,0"
+     id="path3591"
+     inkscape:connector-curvature="0" /><path
+     d="m 147.5,30 -2,0 0,-1 -3,0 0,1 -2,0 c -0.55,0 -1,0.48 -1,1 l 0,1 1,0 7,0 1,0 0,-1 c 0,-0.52 -0.45,-1 -1,-1"
+     id="path3593"
+     inkscape:connector-curvature="0" /><path
+     d="m 317,69 0,-5 -5,5 5,0 z"
+     id="path3595"
+     inkscape:connector-curvature="0" /><path
+     d="m 23,84 -8,-5 0,10"
+     id="path3597"
+     inkscape:connector-curvature="0" /><path
+     d="m 13,89 -3,0 0,-10 3,0 0,10 z"
+     id="path3599"
+     inkscape:connector-curvature="0" /><path
+     d="m 47,88 -3,0 0,-8 3,0 0,8 z"
+     id="path3601"
+     inkscape:connector-curvature="0" /><path
+     d="m 53,88 -3,0 0,-8 3,0 0,8 z"
+     id="path3603"
+     inkscape:connector-curvature="0" /><path
+     d="m 78.5,89 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3605"
+     inkscape:connector-curvature="0" /><path
+     d="m 79,78 0,4 -3,0 4.5,4 4.5,-4 -3,0 0,-4 -3,0 z"
+     id="path3607"
+     inkscape:connector-curvature="0" /><path
+     d="m 110.5,89 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3609"
+     inkscape:connector-curvature="0" /><path
+     d="m 112.5,78 -4.5,4 3,0 0,4 3,0 0,-4 3,0 -4.5,-4 z"
+     id="path3611"
+     inkscape:connector-curvature="0" /><path
+     d="m 142,86.5 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3613"
+     inkscape:connector-curvature="0" /><path
+     d="m 137.25,87.03 c 2.55,-8.43 11.4,-8.73 13.94,0"
+     id="path3615"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2.5" /><path
+     d="m 151.68,89 -4.54,-2.76 6.68,-2.1"
+     id="path3617"
+     inkscape:connector-curvature="0" /><path
+     d="m 12,102 -7,-4 0,8"
+     id="path3619"
+     inkscape:connector-curvature="0" /><path
+     d="m 24,106 4,-7 -8,0"
+     id="path3621"
+     inkscape:connector-curvature="0" /><path
+     d="m 8,111 4,7 -8,0"
+     id="path3623"
+     inkscape:connector-curvature="0" /><path
+     d="m 54,105 0,7 -10,0 0,-7 z m 1,8 0,-11 -12,0 0,11 z"
+     id="path3625"
+     inkscape:connector-curvature="0" /><rect
+     height="3"
+     ry="0"
+     width="12"
+     x="73"
+     y="110"
+     id="rect3627"
+     style="opacity:0.81999984" /><rect
+     height="12"
+     width="14"
+     x="168.5"
+     y="78.5"
+     id="rect3629"
+     style="fill:none;stroke:#000000" /><path
+     d="m 180,84.5 -5,-3.25 0,6.5"
+     id="path3631"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="172"
+     y="78"
+     id="rect3633" /><rect
+     height="12"
+     width="14"
+     x="200.5"
+     y="78.5"
+     id="rect3635"
+     style="fill:none;stroke:#000000" /><path
+     d="m 207,84.5 5,-3.25 0,6.5"
+     id="path3637"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="204"
+     y="78"
+     id="rect3639" /><rect
+     height="12"
+     width="14"
+     x="264.5"
+     y="78.5"
+     id="rect3641"
+     style="fill:none;stroke:#000000" /><path
+     d="m 272,84.5 -5,-3.25 0,6.5"
+     id="path3643"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="274"
+     y="78"
+     id="rect3645" /><rect
+     height="12"
+     width="14"
+     x="296.5"
+     y="78.5"
+     id="rect3647"
+     style="fill:none;stroke:#000000" /><path
+     d="m 299,84.5 5,-3.25 0,6.5"
+     id="path3649"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="306"
+     y="78"
+     id="rect3651" /><path
+     d="m 118,96 c -3.87,0 -7,3.13 -7,7 0,3.87 3.13,7 7,7 3.87,0 7,-3.13 7,-7 0,-3.87 -3.13,-7 -7,-7"
+     id="path3653"
+     inkscape:connector-curvature="0"
+     style="fill:url(#m)" /><path
+     d="m 111.5,103 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3655"
+     inkscape:connector-curvature="0"
+     style="fill:#f27d82" /><path
+     d="m 121.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3657"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.36000001" /><path
+     d="m 121.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3659"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 138.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3661"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.23999999" /><path
+     d="m 138.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3663"
+     inkscape:connector-curvature="0"
+     style="fill:#676767" /><path
+     d="m 103,110 c 3.87,0 7,-3.13 7,-7 0,-3.87 -3.13,-7 -7,-7 -3.87,0 -7,3.13 -7,7 0,3.87 3.13,7 7,7"
+     id="path3665"
+     inkscape:connector-curvature="0"
+     style="fill:url(#o)" /><path
+     d="m 103,96.5 c -3.59,0 -6.5,2.91 -6.5,6.5 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5"
+     id="path3667"
+     inkscape:connector-curvature="0"
+     style="fill:url(#n)" /><path
+     d="m 106.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3669"
+     inkscape:connector-curvature="0"
+     style="fill:#993c35" /><path
+     d="m 106.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3671"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 143,102.5 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3673"
+     inkscape:connector-curvature="0"
+     style="fill:#bebebe" /><path
+     d="m 153,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3675"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.37000002" /><path
+     d="M 153,99.93 152.07,99 149.5,101.57 146.93,99 146,99.93 l 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3677"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 160,102.5 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3679"
+     inkscape:connector-curvature="0"
+     style="fill:#9f9f9f" /><path
+     d="m 170,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3681"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.36000001" /><path
+     d="M 170,99.93 169.07,99 166.5,101.57 163.93,99 163,99.93 l 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3683"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 184.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3685"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.23999999" /><path
+     d="M 184.5,99.93 183.57,99 181,101.57 178.43,99 l -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3687"
+     inkscape:connector-curvature="0"
+     style="fill:#676767" /><path
+     d="m 131.65,116.21 -1.44,-2.03 -1.21,1.21 2.55,3.61 6.45,-7.67 -1.12,-1.33 z"
+     id="path3689"
+     inkscape:connector-curvature="0" /><path
+     d="m 195.75,97.75 3.5,3.25 -3.5,3.25"
+     id="path3691"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#367cf1;stroke-width:1.5" /><path
+     d="m 195.75,108.75 3.5,3.25 -3.5,3.25"
+     id="path3693"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#939393;stroke-width:1.5" /><path
+     d="m 209,101 c 0,0.55 0.45,1 1,1 0.55,0 1,-0.45 1,-1 0,-0.55 -0.45,-1 -1,-1 -0.55,0 -1,0.45 -1,1"
+     id="path3695"
+     inkscape:connector-curvature="0"
+     style="fill:#bababa" /><path
+     d="m 208.25,97.75 -3.5,3.25 3.5,3.25"
+     id="path3697"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#bababa;stroke-width:1.5" /><path
+     d="m 218,96 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5"
+     id="path3699"
+     inkscape:connector-curvature="0"
+     style="fill:url(#p)" /><path
+     d="m 213.36,101 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+     id="path3701"
+     inkscape:connector-curvature="0"
+     style="fill:#eb3941" /><path
+     d="m 216,99 4,4"
+     id="path3703"
+     inkscape:connector-curvature="0"
+     style="stroke:#ffffff" /><path
+     d="m 220,99 -4,4"
+     id="path3705"
+     inkscape:connector-curvature="0"
+     style="stroke:#ffffff" /><path
+     d="m 203,116 4,-8 4,8 z"
+     id="path3707"
+     inkscape:connector-curvature="0"
+     style="stroke:#c19600;stroke-width:2;stroke-linejoin:round" /><path
+     d="m 203,116 4,-8 4,8 z"
+     id="path3709"
+     inkscape:connector-curvature="0"
+     style="fill:#f4bd00;stroke:#f5bd00;stroke-width:1.5;stroke-linejoin:round" /><path
+     d="m 205.75,109.75 2.5,0 0,2.5 -0.5,1.75 -1.5,0 -0.5,-1.75 0,-2.5 m 0,5.25 2.5,0 0,1.25 -2.5,0"
+     id="path3711"
+     inkscape:connector-curvature="0"
+     style="fill:#ad8601" /><path
+     d="m 206,110 2,0 0,2.25 -0.5,1.75 -1,0 -0.5,-1.75 0,-2.25 m 0,5 2,0 0,1 -2,0"
+     id="path3713"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 229,106 c -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 0,2.76 -2.24,5 -5,5 z"
+     id="path3715"
+     inkscape:connector-curvature="0"
+     style="fill:url(#r)" /><path
+     d="m 233.5,101 c 0,2.49 -2.01,4.5 -4.5,4.5 -2.49,0 -4.5,-2.01 -4.5,-4.5 0,-2.49 2.01,-4.5 4.5,-4.5 2.49,0 4.5,2.01 4.5,4.5 z"
+     id="path3717"
+     inkscape:connector-curvature="0"
+     style="fill:#dd0000" /><path
+     d="m 229.03,96.53 c 1.97,0 3.56,1.02 3.56,2.28 0,1.26 -1.59,2.28 -3.56,2.28 -1.97,0 -3.56,-1.02 -3.56,-2.28 0,-1.26 1.59,-2.28 3.56,-2.28 z"
+     id="path3719"
+     inkscape:connector-curvature="0"
+     style="fill:url(#s)" /><path
+     d="m 229.03,105.47 c 1.66,0 3,-0.71 3,-1.59 0,-0.88 -1.34,-1.59 -3,-1.59 -1.66,0 -3,0.71 -3,1.59 0,0.88 1.34,1.59 3,1.59 z"
+     id="path3721"
+     inkscape:connector-curvature="0"
+     style="fill:url(#t)" /><path
+     d="m 239.95,106 c -2.76,-0.03 -4.98,-2.29 -4.95,-5.05 0.03,-2.76 2.29,-4.98 5.05,-4.95 2.76,0.03 4.98,2.29 4.95,5.05 -0.03,2.76 -2.29,4.98 -5.05,4.95 z"
+     id="path3723"
+     inkscape:connector-curvature="0"
+     style="fill:url(#u)" /><path
+     d="m 244.5,101.05 c -0.03,2.49 -2.06,4.48 -4.55,4.45 -2.49,-0.03 -4.48,-2.06 -4.45,-4.55 0.03,-2.49 2.06,-4.48 4.55,-4.45 2.49,0.03 4.48,2.06 4.45,4.55 z"
+     id="path3725"
+     inkscape:connector-curvature="0"
+     style="fill:#00be00" /><path
+     d="m 240.08,96.53 c 1.97,0.02 3.55,1.06 3.54,2.32 -0.01,1.26 -1.62,2.26 -3.59,2.24 -1.97,-0.02 -3.55,-1.06 -3.54,-2.32 0.01,-1.26 1.62,-2.26 3.59,-2.24 z"
+     id="path3727"
+     inkscape:connector-curvature="0"
+     style="fill:url(#v)" /><path
+     d="m 239.98,105.41 c 1.66,0.02 3.01,-0.68 3.02,-1.56 0.01,-0.88 -1.33,-1.61 -2.98,-1.63 -1.66,-0.02 -3.01,0.68 -3.02,1.56 -0.01,0.88 1.33,1.61 2.98,1.63 z"
+     id="path3729"
+     inkscape:connector-curvature="0"
+     style="fill:url(#w)" /><path
+     d="m 251,106 c -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 0,2.76 -2.24,5 -5,5 z"
+     id="path3731"
+     inkscape:connector-curvature="0"
+     style="fill:#e5a600" /><path
+     d="m 255.5,101 c 0,2.49 -2.01,4.5 -4.5,4.5 -2.49,0 -4.5,-2.01 -4.5,-4.5 0,-2.49 2.01,-4.5 4.5,-4.5 2.49,0 4.5,2.01 4.5,4.5 z"
+     id="path3733"
+     inkscape:connector-curvature="0"
+     style="fill:#ffbd00" /><path
+     d="m 251.03,96.53 c 1.97,0 3.56,1.02 3.56,2.28 0,1.26 -1.59,2.28 -3.56,2.28 -1.97,0 -3.56,-1.02 -3.56,-2.28 0,-1.26 1.59,-2.28 3.56,-2.28 z"
+     id="path3735"
+     inkscape:connector-curvature="0"
+     style="fill:url(#x)" /><path
+     d="m 250.99,105.42 c 1.66,0 3,-0.71 3,-1.59 0,-0.88 -1.34,-1.59 -3,-1.59 -1.66,0 -3,0.71 -3,1.59 0,0.88 1.34,1.59 3,1.59 z"
+     id="path3737"
+     inkscape:connector-curvature="0"
+     style="fill:url(#y)" /><rect
+     height="12"
+     rx="0.25"
+     ry="0.25"
+     style="fill-opacity:0.38000016;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:0"
+     width="8"
+     x="268"
+     y="102"
+     id="rect3739" /><path
+     d="m 218,107 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5"
+     id="path3741"
+     inkscape:connector-curvature="0"
+     style="fill:url(#q)" /><path
+     d="m 213.36,112 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+     id="path3743"
+     inkscape:connector-curvature="0"
+     style="fill:#2a53cd" /><path
+     d="m 216.93,109.14 c -0.03,-0.53 0.55,-0.97 1.06,-0.83 0.5,0.12 0.79,0.73 0.56,1.18 -0.2,0.44 -0.79,0.61 -1.2,0.36 -0.26,-0.14 -0.42,-0.42 -0.42,-0.71 z m 1.7,5.46 c 0.22,0 0.45,0 0.67,0 0,0.18 0,0.35 0,0.53 -0.96,0 -1.93,0 -2.89,0 0,-0.18 0,-0.35 0,-0.53 0.22,0 0.44,0 0.66,0 0,-1.2 0,-2.41 0,-3.61 -0.22,0 -0.44,0 -0.66,0 0,-0.18 0,-0.35 0,-0.53 0.74,0 1.48,0 2.22,0 0,1.38 0,2.76 0,4.14 z"
+     id="path3745"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><rect
+     height="8"
+     rx="0.25"
+     ry="0.25"
+     style="fill-opacity:0.38000016;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:0"
+     width="12"
+     x="298"
+     y="104"
+     id="rect3747" /><path
+     d="m 12.25,125 c -0.68,0 -1.25,0.57 -1.25,1.25 l 0,9.69 2,-3.31 0,-5.63 3.38,0 1.19,-2 -5.31,0 z m 8.75,3.06 -2,3.31 0,5.63 -3.38,0 -1.19,2 5.31,0 c 0.68,0 1.25,-0.57 1.25,-1.25 l 0,-9.69 z"
+     id="path3749"
+     inkscape:connector-curvature="0"
+     style="stroke-width:2" /><path
+     d="m 10.75,140.75 10.5,-17.5"
+     id="path3751"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2" /><path
+     d="m 46,128 7,0 0,8 -7,0 0,-8 z m 9,-2 -14,0 0,12 14,0 0,-12 z"
+     id="path3753"
+     inkscape:connector-curvature="0" /><rect
+     height="6"
+     width="3"
+     x="73"
+     y="129"
+     id="rect3755" /><rect
+     height="6"
+     width="3"
+     x="77"
+     y="129"
+     id="rect3757" /><rect
+     height="6"
+     width="3"
+     x="81"
+     y="129"
+     id="rect3759" /><rect
+     height="10"
+     rx="1"
+     ry="1"
+     width="15"
+     x="71"
+     y="127"
+     id="rect3761"
+     style="fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round" /><path
+     d="m 86,129 c 3,0 3,0 3,3 0,3 0,3 -3,3"
+     id="path3763"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2" /><path
+     d="m 227.25,107 c -0.7,0 -1.25,0.5 -1.25,1.25 l 0,7.5 c 0,0.7 0.5,1.25 1.25,1.25 l 3.5,0 c 0.7,0 1.25,-0.5 1.25,-1.25 l 0,-7.5 c 0,-0.7 -0.5,-1.25 -1.25,-1.25 l -3.5,0 z m -0.25,1 4,0 0,7 -4,0 0,-7 z m 2,7.25 c 0.4,0 0.75,0.3 0.75,0.75 0,0.4 -0.3,0.75 -0.75,0.75 -0.4,0 -0.75,-0.3 -0.75,-0.75 0,-0.4 0.3,-0.75 0.75,-0.75 z"
+     id="path3765"
+     inkscape:connector-curvature="0" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 110.49999,127.4989 -1,0 2,-2 2,2 -1,0 c 0,0 -0.0345,4.6379 -0.0345,4.0345 l 4.03448,-0.034 0,-1 2,2 -2,2 0,-1 -4.03449,-0.034 0.0345,4.0346 1,0 -2,2 -2,-2 1,0 0.0345,-4.0346 -4.03448,0.034 0,1 -2,-2 2,-2 0,1 4.03448,0.034 z"
+     id="path3550"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccccccc"
+     inkscape:export-filename="/usr/local/google/home/caseq/aa.png"
+     inkscape:export-xdpi="90"
+     inkscape:export-ydpi="90" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2.77777767;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     id="path3635"
+     sodipodi:cx="50"
+     sodipodi:cy="14"
+     sodipodi:rx="3"
+     sodipodi:ry="3"
+     d="m 53,14 a 3,3 0 1 1 -6,0 3,3 0 1 1 6,0 z"
+     transform="matrix(0.36,0,0,0.36,125.49998,127.46)" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 143.48385,129.5 2.54033,-2 -1.5242,0 0,-2 -2,0 -0.0161,2 -1.54033,0 z"
+     id="path4411-7"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 146.49998,132.5 2,2.5 0,-1.4998 2,-1e-4 0,-2.0002 -2,1e-4 0,-1.5 z"
+     id="path4411-7-7"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 143.49998,135.5 -2.5,2 1.5,0 0,2 2,0 0,-2 1.5,0 z"
+     id="path4411-7-7-3"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 140.49998,132.5 -2,-2.5 0,1.4999 -2,0 0,2.0002 2,-3e-4 0,1.5002 z"
+     id="path4411-7-7-3-5"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:none"
+     inkscape:connector-curvature="0"
+     d="m 169.19838,130.1487 c 0.0551,-0.1128 0.15339,-0.22 0.2313,-0.3064 0.54584,-0.6074 1.38893,-1.1974 3.00529,-1.5702 l 0,-2.1715 c -1.29309,0.2523 -2.31462,0.6686 -3.304,1.5597 -0.33248,0.3832 -0.50543,0.6247 -0.514,1.1665 -0.007,0.443 0.17732,0.8863 0.58141,1.3219 z m 6.63093,3.1292 c -1.61635,-0.024 -3.10906,-0.2558 -4.62277,-0.764 -2.69382,-0.9037 -3.02857,-2.1697 -3.17032,-2.5931 -0.0958,1.6897 0.028,2.9573 0.0346,3.0648 0.092,1.5004 1.29179,2.6742 2.15751,3.1151 1.7796,0.9067 3.66137,1.3756 5.60099,1.4151 l 0,2.4842 3.25098,-4.6483 -3.25098,-4.6486 0,2.5748 z m -0.32327,-5.2959 c 1.61636,0.01 3.45286,0.3384 5.2454,1.1131 0.73528,0.3177 1.32751,0.7904 1.80821,1.3048 0.33152,-0.1523 0.80672,-0.7308 0.74126,-1.2923 -0.16163,-1.3879 -1.62637,-2.1912 -1.88014,-2.3045 -1.7704,-0.7908 -3.9751,-1.0356 -5.91473,-1.0589 l 0,-1.7442 -2.01317,2.8787 2.01317,2.8783 0,-1.775 z m 8.42363,1.8658 c -0.0824,0.6478 -0.82676,2.0349 -3.89784,2.9138 l 0,4.5247 c 1.13145,-0.3677 2.46495,-1.2956 3.17873,-2.1988 0.2911,-0.3677 0.46906,-0.875 0.57736,-1.242 0.33216,-1.1229 0.18604,-3.3136 0.14175,-3.9977 z"
+     id="Rotate"
+     sketch:type="MSShapeGroup" /><path
+     inkscape:connector-curvature="0"
+     d="M 233,88.08946 V 91 h 2.91054 L 244.1944,82.71614 241.28385,79.8056 233,88.08946 z m 13.76911,-7.9387 c 0.30785,-0.30785 0.30785,-0.79294 0,-1.10079 l -1.81908,-1.81909 c -0.30785,-0.30784 -0.79295,-0.30784 -1.10078,0 l -1.52058,1.52991 2.91054,2.91054 1.5299,-1.52057 z"
+     id="path4" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.99999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.19999981;stroke-opacity:1;stroke-dasharray:none"
+     d="m 107,33 8,0 0,6 -8,0 z"
+     id="path3963"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" /><g
+     id="g3234"><path
+       style="fill:url(#linearGradient3239)"
+       inkscape:connector-curvature="0"
+       id="path3699-5"
+       d="m 250,107 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5" /><path
+       id="path3701-0"
+       d="m 245.36,112 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+       inkscape:connector-curvature="0"
+       style="fill:#f4979b;fill-opacity:1" /><path
+       style="fill:#ffffff;fill-opacity:1"
+       id="path3689-2"
+       d="m 248.64912,113.55532 -1.12,-1.57887 -0.94113,0.9411 1.98332,2.80777 5.01668,-5.96555 -0.8711,-1.03445 z"
+       inkscape:connector-curvature="0" /></g><g
+     id="Animations-Toggle"
+     transform="translate(199.99866,124.00442)"><path
+       d="M 6,2 12,8 6,14 0,8"
+       id="path3453"
+       inkscape:connector-curvature="0" /><path
+       d="M 8.5,12.5 10,14 16,8 10,2 8.5,3.5 13,8 8.5,12.5 z"
+       id="path3455"
+       inkscape:connector-curvature="0"
+       style="opacity:0.5" /></g><path
+     inkscape:connector-curvature="0"
+     d="m 240.76701,127 -1.53402,0 0,4.23299 -4.23299,0 0,1.53402 4.23299,0 0,4.23299 1.53402,0 0,-4.23299 4.23299,0 0,-1.53402 -4.23299,0 0,-4.23299 z"
+     id="path3509-0" /><path
+     style="fill:none"
+     inkscape:connector-curvature="0"
+     d="m 228.56466,156.76923 h 48 v 48 h -48 z"
+     id="path3712" /><path
+     inkscape:connector-curvature="0"
+     d="m 310.7696,127.0439 -1.81599,-1.81636 c -0.30331,-0.30338 -0.79716,-0.30338 -1.10048,0 l -2.43038,2.43089 -1.48935,-1.49354 -1.10047,1.1007 1.10437,1.1046 L 297,135.30504 V 139 h 3.69419 l 6.9373,-6.93874 1.10048,1.1046 1.10048,-1.10072 -1.49324,-1.49353 2.43039,-2.43089 c 0.3072,-0.30338 0.3072,-0.79345 0,-1.09682 z m -10.72092,10.40033 -1.49324,-1.49354 6.27235,-6.27365 1.49323,1.49354 -6.27234,6.27365 z"
+     id="path3714" /><g
+     id="Page-1"
+     sketch:type="MSPage"
+     transform="translate(328,28)"
+     style="fill:none;stroke:none"><g
+       id="Replay"
+       sketch:type="MSArtboardGroup"
+       style="fill:#000000"><path
+         d="M 2.5858334,13.890843 C 0.99596482,12.428959 0,10.331325 0,8 0,3.58 3.58,0 8,0 c 4.42,0 8,3.58 8,8 0,4.42 -3.58,8 -8,8 l 0,-1.6 0,0 c 3.528,0 6.4,-2.872 6.4,-6.4 C 14.4,4.472 11.528,1.6 8,1.6 4.472,1.6 1.6,4.472 1.6,8 c 0,1.9357374 0.8646098,3.673987 2.2277938,4.848714 L 5.520254,11.428571 5.5353988,15.891545 1.1428571,15.101644 2.5858334,13.890843 z M 6.5066666,11.428571 11.078095,8 6.5066666,4.5714286 l 0,6.8571424 z"
+         id="Shape"
+         sketch:type="MSShapeGroup"
+         inkscape:connector-curvature="0" /></g></g><path
+     d="m 276,127 1,-1 0,-1 -8,0 0,1 1,1 0,5 -2,1 0,2 4,0 -0.0447,3.9835 L 273,140 l 1,-1 0,-4 4,0 0,-2 -2,-1 0,-5 z"
+     id="path3214"
+     inkscape:connector-curvature="0"
+     style="fill:#010101"
+     sodipodi:nodetypes="ccccccccccccccccccc" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3216"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 328,60 c 0,4.42 3.58,8 8,8 4.42,0 8,-3.58 8,-8 0,-4.42 -3.58,-8 -8,-8 -4.42,0 -8,3.58 -8,8 z m 8,6.4 c -3.528,0 -6.4,-2.872 -6.4,-6.4 0,-3.528 2.872,-6.4 6.4,-6.4 3.528,0 6.4,2.872 6.4,6.4 0,3.528 -2.872,6.4 -6.4,6.4 z M 334.50667,63.428571 339.0781,60 l -4.57143,-3.428571 0,6.857142 z"
+     id="Icon"
+     sketch:type="MSShapeGroup"
+     inkscape:connector-curvature="0" /><path
+     d="m 333.6,15.2 1.6,0 0,-6.4 -1.6,0 0,6.4 0,0 z M 336,4 c -4.42,0 -8,3.58 -8,8 0,4.42 3.58,8 8,8 4.42,0 8,-3.58 8,-8 0,-4.42 -3.58,-8 -8,-8 l 0,0 z m 0,14.4 c -3.528,0 -6.4,-2.872 -6.4,-6.4 0,-3.528 2.872,-6.4 6.4,-6.4 3.528,0 6.4,2.872 6.4,6.4 0,3.528 -2.872,6.4 -6.4,6.4 l 0,0 z m 0.8,-3.2 1.6,0 0,-6.4 -1.6,0 0,6.4 0,0 z"
+     id="path3448"
+     sketch:type="MSShapeGroup"
+     inkscape:connector-curvature="0" /><path
+     inkscape:connector-curvature="0"
+     id="path3871"
+     d="m 115,36 4,-4 0,8" /><path
+     d="M 0,24 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z"
+     id="path3510"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 208.00365,8.385948 c 2.00818,0 3.63802,1.629832 3.63802,3.638017 0,0.472943 -0.0946,0.916781 -0.26194,1.331515 l 2.1246,2.124602 c 1.09868,-0.91678 1.96453,-2.102774 2.49568,-3.456117 -1.25875,-3.194178 -4.36562,-5.457025 -8.00364,-5.457025 -1.01864,0 -1.99363,0.181901 -2.89586,0.509322 l 1.57162,1.571624 c 0.41474,-0.167349 0.85858,-0.261938 1.33152,-0.261938 z m -7.27604,-1.986357 1.65894,1.658936 0.3347,0.334697 c -1.20782,0.938609 -2.15371,2.190087 -2.72124,3.630741 1.25875,3.19418 4.36562,5.457026 8.00364,5.457026 1.12778,0 2.20464,-0.218281 3.1869,-0.611187 l 0.30559,0.305594 2.13188,2.124602 0.92406,-0.924056 -12.90041,-12.90041 -0.92406,0.924057 z m 4.02365,4.023647 1.12779,1.127785 c -0.0364,0.152797 -0.0582,0.31287 -0.0582,0.472942 0,1.207822 0.97499,2.182811 2.18281,2.182811 0.16007,0 0.32014,-0.02183 0.47294,-0.05821 l 1.12779,1.127785 c -0.4875,0.240109 -1.02593,0.38563 -1.60073,0.38563 -2.00819,0 -3.63802,-1.629832 -3.63802,-3.638018 0,-0.574806 0.14552,-1.113233 0.38563,-1.600727 z m 3.13597,-0.567531 2.29195,2.291951 0.0145,-0.116417 c 0,-1.207821 -0.97498,-2.18281 -2.18281,-2.18281 l -0.12369,0.0073 z"
+     id="path3512"
+     inkscape:connector-curvature="0" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3223"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 111.99999,6.690909 c -3.63635,0 -6.74181,2.261818 -7.99999,5.454546 1.25818,3.192727 4.36364,5.454545 7.99999,5.454545 3.63636,0 6.74182,-2.261818 8,-5.454545 -1.25818,-3.192728 -4.36364,-5.454546 -8,-5.454546 z m 0,9.090909 c -2.00726,0 -3.63635,-1.629091 -3.63635,-3.636363 0,-2.007273 1.62909,-3.636364 3.63635,-3.636364 2.00727,0 3.63636,1.629091 3.63636,3.636364 0,2.007272 -1.62909,3.636363 -3.63636,3.636363 z m 0,-5.818182 c -1.20726,0 -2.18181,0.974546 -2.18181,2.181819 0,1.207272 0.97455,2.181818 2.18181,2.181818 1.20727,0 2.18182,-0.974546 2.18182,-2.181818 0,-1.207273 -0.97455,-2.181819 -2.18182,-2.181819 z"
+     id="path3225"
+     inkscape:connector-curvature="0" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3224"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 338.33036,76.32322 h -4.57143 v 1.52381 h 4.57143 v -1.52381 z m -3.04762,9.90477 h 1.52381 v -4.57143 h -1.52381 v 4.57143 z m 6.11809,-5.03619 1.08191,-1.08191 c -0.32762,-0.38857 -0.68572,-0.75428 -1.07429,-1.07428 l -1.0819,1.0819 c -1.18095,-0.94476 -2.66667,-1.50857 -4.28191,-1.50857 -3.78667,0 -6.85714,3.07047 -6.85714,6.85714 0,3.78667 3.06285,6.85714 6.85714,6.85714 3.79429,0 6.85715,-3.07047 6.85715,-6.85714 0,-1.61524 -0.56382,-3.10095 -1.50096,-4.27428 z m -5.35619,9.60761 c -2.94857,0 -5.33333,-2.38476 -5.33333,-5.33333 0,-2.94857 2.38476,-5.33333 5.33333,-5.33333 2.94857,0 5.33333,2.38476 5.33333,5.33333 0,2.94857 -2.38476,5.33333 -5.33333,5.33333 z"
+     id="path3226"
+     inkscape:connector-curvature="0" /><path
+     d="m 334,114 10,0 0,-5 -10,0 z m -6,0 5,0 0,-12 -5,0 z m 6,-12 0,6 10,0 0,-6 z"
+     id="path3227"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3229"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     id="path3518"
+     sodipodi:cx="208.86168"
+     sodipodi:cy="31.304852"
+     sodipodi:rx="1.0606602"
+     sodipodi:ry="1.0606602"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874996,-12.771743)" /><path
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874986,-7.771742)"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     sodipodi:ry="1.0606602"
+     sodipodi:rx="1.0606602"
+     sodipodi:cy="31.304852"
+     sodipodi:cx="208.86168"
+     id="path4288"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     sodipodi:type="arc" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     id="path4290"
+     sodipodi:cx="208.86168"
+     sodipodi:cy="31.304852"
+     sodipodi:rx="1.0606602"
+     sodipodi:ry="1.0606602"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874986,-2.771743)" /><path
+     inkscape:connector-curvature="0"
+     id="path3246"
+     d="M 86,38 83.277778,35 72,35 l 0,6 11.277778,0" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.94679004;stroke-miterlimit:3.5;stroke-opacity:1;stroke-dasharray:none"
+     id="rect4034"
+     width="4.0532098"
+     height="0.053209968"
+     x="85.473381"
+     y="32.473396" /><rect
+     y="30.473396"
+     x="87.473381"
+     height="4.0532098"
+     width="0.053209968"
+     id="rect4036"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.94679004;stroke-miterlimit:3.5;stroke-opacity:1;stroke-dasharray:none" /><path
+     inkscape:connector-curvature="0"
+     d="m 335,138 -3.66666,0 C 330.59667,138 330,137.40333 330,136.66667 l 0,-9.33334 C 330,126.59667 330.59667,126 331.33334,126 l 9.33333,0 c 0.73667,0 1.33333,0.59667 1.33333,1.33333 l 0,3.66667 -2,-0.6 0,-2.4 -8,-3.4e-4 0,8.00017 2.22223,3.4e-4 z m 5.25657,-2.70598 2.40637,-2.40638 L 334,130 l 2.88765,8.66294 2.40637,-2.40638 L 343.03746,140 344,139.03745 z"
+     id="inspect_element"
+     sketch:type="MSShapeGroup"
+     sodipodi:nodetypes="cssssssccccccccccccccc" /><path
+     inkscape:connector-curvature="0"
+     d="M 178.71429,5.0064 172.28571,5 C 171.57857,5 171,5.572727 171,6.272727 l 0,11.454546 c 0,0.7 0.57857,1.272727 1.28571,1.272727 l 6.42858,0 C 179.42143,19 180,18.427273 180,17.727273 l 0,-11.454546 c 0,-0.7 -0.57857,-1.266363 -1.28571,-1.266363 l 0,0 z m 0,11.448182 -6.42858,0 0,-8.909091 6.42858,0 0,8.909091 0,0 z"
+     id="device-mode"
+     sketch:type="MSShapeGroup" /><path
+     d="m 23,157 -2,0 0,2 2,0 z"
+     id="path3288" /><path
+     d="m 23,161 -2,0 0,2 c 1,0 2,-1 2,-2 z"
+     id="path3286" /><path
+     d="m 23,153 -2,0 0,2 2,0 z"
+     id="path3284" /><path
+     d="m 21,149 0,2 2,0 c 0,-1 -1,-2 -2,-2 z"
+     id="path3282" /><path
+     d="m 11,163 4,0 0,-6 -6,0 0,4 c 0,1.1 0.9,2 2,2 z"
+     id="path3280"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="scccss" /><path
+     d="m 11,153 -2,0 0,2 2,0 z"
+     id="path3278" /><path
+     d="m 19,149 -2,0 0,2 2,0 z"
+     id="path3276" /><path
+     d="m 19,161 -2,0 0,2 2,0 z"
+     id="path3274" /><path
+     d="m 11,149 c -1,0 -2,1 -2,2 l 2,0 z"
+     id="path3272" /><path
+     d="m 15,149 -2,0 0,2 2,0 z"
+     id="path3231" /><g
+     id="g4042"><path
+       transform="matrix(1.1939089,0,0,1.1367841,-44.307792,-20.636427)"
+       d="m 80.87534,155.38257 a 4.3973203,4.6182914 0 1 1 -8.794641,0 4.3973203,4.6182914 0 1 1 8.794641,0 z"
+       sodipodi:ry="4.6182914"
+       sodipodi:rx="4.3973203"
+       sodipodi:cy="155.38257"
+       sodipodi:cx="76.47802"
+       id="path4006"
+       style="fill:none;stroke:#000000;stroke-width:1.2875576;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" /><rect
+       ry="0"
+       rx="0.38569456"
+       y="155"
+       x="44"
+       height="2"
+       width="6"
+       id="rect4010"
+       style="fill:#000000;fill-opacity:1;stroke:none" /></g><path
+     d="M 76.94,152 76,152.94 79.05334,156 76,159.06 l 0.94,0.94 4,-4 z"
+     id="path3240"
+     inkscape:connector-curvature="0" /><path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path3242" /><path
+     d="M 80.94,152 80,152.94 83.05334,156 80,159.06 l 0.94,0.94 4,-4 z"
+     id="path3240-4"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
new file mode 100644
index 00000000..810fdad5
--- /dev/null
+++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
@@ -0,0 +1,48 @@
+
+You could note the following:
+
+```js no-beautify
+function pow(x,n)  // <- no space between arguments
+{  // <- figure bracket on a separate line
+  let result=1;   // <- no spaces to the both sides of =
+  for(let i=0;i<n;i++) {result*=x;}   // <- no spaces
+  // the contents of { ... } should be on a new line
+  return result;
+}
+
+let x=prompt("x?",''), n=prompt("n?",'') // <-- technically possible,
+// but better make it 2 lines, also there's no spaces and ;
+if (n<0)  // <- no spaces inside (n < 0), and should be extra line above it
+{   // <- figure bracket on a separate line
+  // below - a long line, may be worth to split into 2 lines
+  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
+}
+else // <- could write it on a single line like "} else {"
+{
+  alert(pow(x,n))  // no spaces and ;
+}
+```
+
+The fixed variant:
+
+```js
+function pow(x, n) {
+  let result = 1;
+
+  for (let i = 0; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+
+let x = prompt("x?", "");
+let n = prompt("n?", "");
+
+if (n < 0) {
+  alert(`Power ${n} is not supported,
+    please enter an integer number greater than zero`);
+} else {
+  alert( pow(x, n) );
+}
+```
diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/task.md b/1-js/03-code-quality/02-coding-style/1-style-errors/task.md
new file mode 100644
index 00000000..b750962c
--- /dev/null
+++ b/1-js/03-code-quality/02-coding-style/1-style-errors/task.md
@@ -0,0 +1,28 @@
+importance: 4
+
+---
+
+# Bad style
+
+What's wrong with the code style below?
+
+```js no-beautify
+function pow(x,n)
+{
+  let result=1;
+  for(let i=0;i<n;i++) {result*=x;}
+  return result;
+}
+
+let x=prompt("x?",''), n=prompt("n?",'')
+if (n<=0)
+{
+  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
+}
+else
+{
+  alert(pow(x,n))
+}
+```
+
+Fix it.
diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
new file mode 100644
index 00000000..d871e217
--- /dev/null
+++ b/1-js/03-code-quality/02-coding-style/article.md
@@ -0,0 +1,325 @@
+# Coding style
+
+Our code must be as clean and easy to read as possible.
+
+That is actually an art of programming -- to take a complex task and code it in a way that is both correct and human-readable.
+
+One thing to help is the good code style.
+
+[cut]
+
+## Syntax
+
+A cheatsheet with the rules (more details below):
+
+![](code-style.png)
+<!--
+```js
+function pow(x, n) {
+  let result = 1;
+
+  for (let i = 0; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+
+let x = prompt("x?", "");
+let n = prompt("n?", "");
+
+if (n < 0) {
+  alert(`Power ${n} is not supported,
+    please enter an integer number, greater than 0`);
+} else {
+  alert( pow(x, n) );
+}
+```
+
+-->
+
+Now let's discuss the rules and reasons for them in detail.
+
+Nothing is "carved in stone" here. Everything is optional and can be changed: these are coding rules, not religious dogmas.
+
+### Figure brackets
+
+In most JavaScript projects figure brackets are written on the same line, not on the new line. A so-called "egyptian" style. There's also a space before an opening bracket.
+
+An edge case is a single-line `if/for`. Should we use brackets at all? If yes, then where?
+
+Here are the annotated variants, so you can judge about their readability on your own:
+
+<!--
+```js no-beautify
+if (n < 0) {alert(`Power ${n} is not supported`);}
+
+if (n < 0) alert(`Power ${n} is not supported`);
+
+if (n < 0)
+  alert(`Power ${n} is not supported`);
+
+if (n < 0) {
+  alert(`Power ${n} is not supported`);
+}
+```
+-->
+![](figure-bracket-style.png)
+
+As a summary:
+- For a really short code one line is acceptable: like `if (cond) return null`.
+- But a separate line for each statement in brackets is usually better.
+
+### Line length
+
+The maximal line length should be limited. No one likes to eye-follow a long horizontal line. It's better to split it.
+
+The maximal line length is agreed on the team-level. It's usually 80 or 120 characters.
+
+### Indents
+
+There are two types of indents:
+
+- **A horizontal indent: 2(4) spaces.**
+
+    A horizantal identation is made using either 2 or 4 spaces or the "Tab" symbol. Which one to choose is a kind of an old holy war. Spaces are more common nowadays.
+
+    One of advantages of spaces over tabs is that they allow more flexible configurations of indents than the "Tab" symbol.
+
+    For instance, we can align the arguments with the opening bracket, like this:
+
+    ```js no-beautify
+    show(parameters,
+         aligned, // 5 spaces padding at the left  
+         one,
+         after,
+         another
+      ) {
+      // ...
+    }
+    ```
+
+- **A vertical indent: empty lines for splitting the code in logical blocks.**
+
+    Even a single function can often be divided in logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically:
+
+    ```js
+    function pow(x, n) {
+      let result = 1;
+      //              <--
+      for (let i = 0; i < n; i++) {
+        result *= x;
+      }
+      //              <--
+      return result;
+    }
+    ```
+
+    Insert an extra newline where it helps to make the code more readable. There should not be more than 9 lines of code without a vertical indentation.
+
+### A semicolon
+
+A semicolons should be after each statement. Even if could possibly be skipped.
+
+There are languages where a semicolon is truly optional. It's rarely used there.
+
+But in JavaScript there are few cases when a line break is sometimes not interpreted as a semicolon. That leaves a place for programming errors, so semicolons should be at place.
+
+### Nesting levels
+
+There should not be too many nesting levels.
+
+Sometimes it's a good idea to use the ["continue"](info:while-for#continue) directive in the loop to evade extra nesting in `if(..) { ... }`:
+
+Instead of:
+
+```js
+for (let i = 0; i < 10; i++) {
+  if (cond) {
+    ... // <- one more nesting level
+  }
+}
+```
+
+We can write:
+
+```js
+for (let i = 0; i < 10; i++) {
+  if (!cond) *!*continue*/!*;
+  ...  // <- no extra nesting level
+}
+```
+
+The similar thing can be done with `if/else` and `return`.
+
+For example, two constructs below are identical.
+
+The first one:
+
+```js
+function pow(x, n) {
+  if (n < 0) {
+    alert("Negative 'n' not supported");
+  } else {
+    let result = 1;
+
+    for (let i = 0; i < n; i++) {
+      result *= x;
+    }
+
+    return result;
+  }  
+}
+```
+
+And this:
+
+```js
+function pow(x, n) {
+  if (n < 0) {
+    alert("Negative 'n' not supported");
+    return;
+  }
+
+  let result = 1;
+
+  for (let i = 0; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+```
+
+...But the second one is more readable, because the "edge case" of `n < 0` is handled early on, and then we have the "main" code flow, without an additional nesting.
+
+## Functions below the code
+
+If you are writing several "helper" functions and the code to use them, then there are three ways to place them.
+
+1. Functions above the code that uses them:
+
+    ```js
+    // *!*function declarations*/!*
+    function createElement() {
+      ...
+    }
+
+    function setHandler(elem) {
+      ...
+    }
+
+    function walkAround() {
+      ...
+    }
+
+    // *!*the code which uses them*/!*
+    let elem = createElement();
+    setHandler(elem);
+    walkAround();
+    ```
+2. Code first, then functions
+
+    ```js
+    // *!*the code which uses the functions*/!*
+    let elem = createElement();
+    setHandler(elem);
+    walkAround();
+
+    // --- *!*helper functions*/!* ---
+
+    function createElement() {
+      ...
+    }
+
+    function setHandler(elem) {
+      ...
+    }
+
+    function walkAround() {
+      ...
+    }
+    ```
+3. Mixed, a function is described where it's first used.
+
+Most of time, the second variant is preferred.
+
+That's because when reading a code, we first want to know "what it does". If the code goes first, then it provides that information. And then maybe we won't need to read functions at all, especially if their names are adequate to what they're doing.
+
+## Style guides
+
+A style guide contains general rules about "how to write": which quotes to use, how many spaces to indent, where to put line breaks etc. A lot of minor things.
+
+In total, when all members of a team use the same style guide, the code looks uniform. No matter who of the team wrote it, still the same style.
+
+Surely, a team may think out a style guide themselves. But as of now, there's no need to. There are many tried, worked out style guides, easy to adopt.
+
+For instance:
+
+- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
+- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
+- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
+- (there are more)
+
+If you're a novice developer, then you could start with the cheatsheet above in the chapter, and later browse the style guides to pick up the common principles and maybe choose one.
+
+## Automated linters
+
+There are tools that can check the code style automatically. They are called "linters".
+
+The great thing about them is that style-checking also finds some bugs, like a typo in variable name or a function.
+
+So it's recommended to install one, even if you don't want to stick to a "code style". They help to find typos -- and that's already good enough.
+
+Most well-known tools are:
+
+- [JSLint](http://www.jslint.com/) -- one of the first linters.
+- [JSHint](http://www.jshint.com/) -- more settings than JSHint.
+- [ESLint](http://eslint.org/) -- probably the newest one.
+
+All of them can do the job. The author uses [ESLint](http://eslint.org/).
+
+Most linters are integrated with editors: just enable the plugin in the editor and configure the style.
+
+For instance, for ESLint you should do the following:
+
+1. Install [Node.JS](https://nodejs.org/).
+2. Install ESLint with the command `npm install -g eslint` (npm is Node.JS package installer).
+3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files).
+
+Here's an example of `.eslintrc`:
+
+```js
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "no-console": 0,
+  },
+  "indent": 2
+}
+```
+
+Here the directive `"extends"` denotes that we base on the "eslint:recommended" set of settings, and then we specify our own.
+
+Then install/enable the plugin for your editor that integrates with ESLint. The majority of editors have it.
+
+It is possible to download style rule sets from the web and extend them instead. See <http://eslint.org/docs/user-guide/getting-started> for more details about installation.
+
+Using a linter has the great side-effect. Linters catch typos. For instance, when an undefined variable is accessed, a linter detects it and (if integrated with an editor) highlights. In most cases that's a mistype. So we can fix it right ahead.
+
+For that reason even if you're not concerned about styles, using a linter is highly recommended.
+
+Also certain IDEs support built-in linting, but not so tunable as ESLint.
+
+## Summary
+
+All syntax rules from this chapter and the style guides aim to increase readability, so all of them are debatable.
+
+When we think about "how to write better?", the sole criterion is "what makes the code more readable and easier to understand? what helps to evade errors?" That's the main thing to keep in mind when choosing the style or discussing which one is better.
+
+Read style guides to see the latest ideas about that and follow those that you find the best.
diff --git a/1-js/03-code-quality/02-coding-style/code-style.png b/1-js/03-code-quality/02-coding-style/code-style.png
new file mode 100644
index 00000000..278fd294
Binary files /dev/null and b/1-js/03-code-quality/02-coding-style/code-style.png differ
diff --git a/1-js/03-code-quality/02-coding-style/code-style@2x.png b/1-js/03-code-quality/02-coding-style/code-style@2x.png
new file mode 100644
index 00000000..b5761434
Binary files /dev/null and b/1-js/03-code-quality/02-coding-style/code-style@2x.png differ
diff --git a/1-js/03-code-quality/02-coding-style/figure-bracket-style.png b/1-js/03-code-quality/02-coding-style/figure-bracket-style.png
new file mode 100644
index 00000000..112c2803
Binary files /dev/null and b/1-js/03-code-quality/02-coding-style/figure-bracket-style.png differ
diff --git a/1-js/03-code-quality/02-coding-style/figure-bracket-style@2x.png b/1-js/03-code-quality/02-coding-style/figure-bracket-style@2x.png
new file mode 100644
index 00000000..ce6e75c4
Binary files /dev/null and b/1-js/03-code-quality/02-coding-style/figure-bracket-style@2x.png differ
diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md
new file mode 100644
index 00000000..8fa35a9f
--- /dev/null
+++ b/1-js/03-code-quality/03-comments/article.md
@@ -0,0 +1,150 @@
+# Comments
+
+Comments are generally a good thing. But novices in programming generally get that wrong. They write comments explaining "what is going on in the code".
+
+But the amount of such "explanatory" comments should be minimal.
+
+Seriously, a good code should be easy to understand without them.
+
+There's a great rule about that: "if the code is so unclear that it requires a comment, then maybe it should be rewritten instead".
+
+[cut]
+
+Sometimes it's beneficial to replace a code piece with a function, like here:
+
+```js
+function showPrimes(n) {
+  nextPrime:
+  for (let i = 2; i < n; i++) {
+
+*!*
+    // check if i is a prime number
+    for (let j = 2; j < i; j++) {
+      if (i % j == 0) continue nextPrime;
+    }
+*/!*
+
+    alert(i);
+  }
+}
+```
+
+The better variant:
+
+
+```js
+function showPrimes(n) {
+
+  for (let i = 2; i < n; i++) {
+    *!*if (!isPrime(i)) continue;*/!*
+
+    alert(i);  
+  }
+}
+
+function isPrime(n) {
+  for (let i = 2; i < n; i++) {
+    if ( n % i == 0) return false;
+  }
+  return true;
+}
+```
+
+Now we can understand the code easily without the comment. Such code is called *self-descriptive*.
+
+And if we have a long "code sheet" like this:
+
+```js
+// here we add whiskey
+for(let i = 0; i < 10; i++) {
+  let drop = getWhiskey();
+  smell(drop);
+  add(drop, glass);
+}
+
+// here we add juice
+for(let t = 0; t < 3; t++) {
+  let tomato = getTomato();
+  examine(tomato);
+  let juice = press(tomato);
+  add(juice, glass);
+}
+
+// ...
+```
+
+Then it might be a better variant to refactor it into functions like:
+
+```js
+addWhiskey(glass);
+addJuice(glass);
+
+function addWhiskey(container) {
+  for(let i = 0; i < 10; i++) {
+    let drop = getWhiskey();
+    //...
+  }
+}
+
+function addJuice(container) {
+  for(let t = 0; t < 3; t++) {
+    let tomato = getTomato();
+    //...
+  }
+}
+```
+
+That's readable without comments. And also the code structure is better when split. It's clear what every function does, what it takes and what it returns.
+
+In reality, we can't totally evade "explanatory" comments. There are complex algorithms. And there are smart "tweaks" for purposes of optimization. But generally we should try to keep the code simple and self-descriptive.
+
+## Good comments
+
+Which comments are good?
+
+Describe the architecture
+: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special diagram language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) for high-level architecture diagrams. Definitely worth studying.
+
+Document a function usage
+: There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value.
+
+    For instance:
+    ```js
+    /**
+     * Returns x raised to the n-th power.
+     *
+     * @param {number} x The number to raise.
+     * @param {number} n The power, must be a natural number.
+     * @return {number} x raised to the n-th power.
+     */
+    function pow(x, n) {
+      ...
+    }
+    ```
+
+    Such comments allow to understand the purpose of the function and use it the right way without looking in its code.
+
+    By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking.
+
+    Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at <http://usejsdoc.org/>.
+
+Why the task is solved this way?
+: What's written is important. But what's *not* written maybe even more important to understand what's going on. Why the task is solved exactly this way? The code gives no answer.
+
+    If there are many ways to solve the task, why this one? Especially when it's not the most obvious one.
+
+    Without such comments the following situation is possible:
+    1. You (or your colleague) open the code written some time ago, and see that it's "suboptimal".
+    2. You think: "How stupid I was then, and how much smarter I'm now", and rewrite using the "more obvious and correct" variant.
+    3. ...The urge to rewrite was good. But in the process you see that the "more obvious" solution is actually lacking. You even dimly remember why, because you already tried it long ago. You revert to the correct variant, but the time was wasted.
+
+    Comments that explain the solution are very important. They help to continue development the right way.
+
+Any subtle features of the code? Where they are used?
+: If the code has anything subtle and counter-obvious, it's definitely worth commenting.
+
+## Summary
+
+One of signs of a good developer is his comments. Good comments allow to maintain the code well, return to it after a long delay and use features more effectively.
+
+Comments are also used for auto-documenting tools: they read them and generate HTML-docs (or in another format).
diff --git a/1-js/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md
new file mode 100644
index 00000000..ee18ec53
--- /dev/null
+++ b/1-js/03-code-quality/04-ninja-code/article.md
@@ -0,0 +1,228 @@
+# How to write bad code?
+
+Programmer ninjas of the past used these tricks to make code maintainers cry. Code review gurus look for them in test tasks. Novice developers sometimes use them even better than programmer ninjas.
+
+Read them carefully and find out who you are -- a ninja, a novice, or maybe a code reviewer?
+
+[cut]
+
+```warn header="Irony detected"
+These are rules of writing bad code. Just... You know, some people miss the point.
+```
+
+## Brevity is the soul of wit
+
+Make the code as short as possible. Show how smart you are.
+
+Let subtle language features guide you.
+
+For instance, take a look at this ternary operator `'?'`:
+
+```js
+// taken from a well-known javascript library
+i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
+```
+
+Cool, right? If you write like that, the developer who comes across this line and tries to understand what is the value of `i` will probably have a merry time. Then come to you, seeking for an answer.
+
+Tell him that shorter is always better. Initiate him into the paths of ninja.
+
+## One-letter variables
+
+```quote author="Laozi (Tao Te Ching)"
+The Dao hides in wordlessness. Only the Dao is well begun and well
+completed.
+```
+
+Another way to code faster (and much worse!) is to use single-letter variable names everywhere. Like `a`, `b` or `c`.
+
+A short variable disappears in the code like a real ninja in the forest. No one will be able to find it using the "search" of the editor. And even if someone does, he won't be able to "decipher" what the name `a` or `b` means.
+
+...But there's an exception. A real ninja will never use `i` as the counter in a `"for"` loop. Anywhere, but not here. Look around, there are so much more exotic letters. For instance, `x` or `y`.
+
+An exotic variable as a loop counter is especially cool if the loop body takes 1-2 pages (make it longer if you can). Then if someone looks deep inside the loop, he won't be able to figure out fast that the variable is the loop counter.
+
+## Use abbreviations
+
+If the team rules forbid to use one-letter and vague names -- shorten them, make abbreviations.
+
+Like this:
+
+- `list` -> `lst`.
+- `userAgent` -> `ua`.
+- `browser` -> `brsr`.
+- ...etc
+
+Only the one with a truly good intuition will be able to understand all such names. Try to shorten everything. Only a worthy person will be able to uphold the development of such code.
+
+## Soar high. Be abstract.
+
+```quote author="Laozi (Tao Te Ching)"
+The great square is cornerless<br>
+The great vessel is last complete,<br>
+The great note is rarified sound,<br>
+The great image has no form.
+```
+
+While choosing a name try to use the most abstract word. Like `obj`, `data`, `value`, `item`, `elem` and so on.
+
+- **The ideal name for a variable is `data`.** Use it everywhere where you can. Indeed, every variable holds *data*, right?
+
+    ...But what to do if `data` is already taken? Try `value`, it's also universal. A variable always has a *value*, correct?
+
+- **Name the variable by its type: `str`, `num`...**
+
+    ...But will that make the code worse? Actually, yes!
+
+    From one hand, the variable name still means something. It says what's inside the variable: a string, a number or something else. But when an outsider tries to understand the code -- he'll be surprised to see that there's actually no information at all!
+
+    Actually, the value type is easy to see by debugging. But what's the meaning of the variable? Which string/number it stores? There's just no way to figure out without a good meditation!
+
+- **...But what if there are no more such names?** Just add a letter: `item1, item2, elem5, data1`...
+
+## Attention test
+
+Only a truly attentive programmer should be able to understand the code. But how to check that?
+
+**One of the ways -- use similar variable names, like `date` and `data`.**
+
+Mix them where you can.
+
+A quick read of such code becomes impossible. And when there's a typo... Ummm... We're stuck for long, time to drink tea.
+
+
+## Smart synonyms
+
+```quote author="Confucius"
+The hardest thing of all is to find a black cat in a dark room, especially if there is no cat.
+```
+
+Use *similar* names for *same* things, that makes life more interesting and shows your creativity to the public.
+
+For instance, the function prefixes. If a function shows a message on the screen -- start it with `display…`, like `displayMessage`. And then if another function shows something else, like a user name, start it with `show…` (like `showName`).
+
+Insinuate that there's a subtle difference difference between such functions, while there is none.
+
+Make a pact with fellow ninjas of the team: if John starts "showing" functions with `display...` in his code, then Peter could use `render..`, and Ann -- `paint...`. Note how more interesting and diverse the code became.
+
+...And now the hat trick!
+
+For two functions with important differences -- use the same prefix!
+
+For instance, the function `printPage(page)` will use a printer. And the function `printText(text)` will put the text on-screen. Let an unfamiliar reader think well over things: "Where does `printMessage(message)` put the message? To a printer or on the screen?". To make it really shine, `printMessage(message)` should output it in the new window!
+
+## Reuse names
+
+```quote author="Laozi (Tao Te Ching)"
+Once the whole is divided, the parts<br>
+need names.<br>
+There are already enough names.<br>
+One must know when to stop.
+```
+
+Add a new variable only when absolutely necessary.
+
+Instead, reuse existing names. Just write new values into them.
+
+In a function try to use only variables passed as parameters.
+
+That would make it impossible to identify what's exactly in the variable *now*. And also where it comes from. A person with weak intuition would have to analyze the code line-by-line and track the changes through every code branch.
+
+**An advanced variant of the approach is to covertly (!) replace the value with something alike in the middle of a loop or a function.**
+
+For instance:
+
+```js
+function ninjaFunction(elem) {
+  // 20 lines of code working with elem
+
+  elem = clone(elem);
+
+  // 20 more lines, now working with the clone of the elem!
+}
+```
+
+A fellow programmer who wants to work with `elem` in the second half of the function will be surprised... Only during the debugging, after examining the code he will find out that he's working with a clone!
+
+Deadly effective even against an experienced ninja. Seen in code regularly.
+
+## Underscores for fun
+
+Put underscores `_` and `__` before variable names. Like `_name` or `__value`. It would be great if only you know their meaning. Or, better, without meaning at all.
+
+You kill two rabbits with one shot. First, the code becomes longer and less readable, and the second, a fellow developer may spend a long time trying to figure out what the underscores mean.
+
+A smart ninja puts underscores at one spot of code and evades them at other places. That makes the code even more fragile and increases the probability of future errors.
+
+## Show your love
+
+Let everyone see how magnificent your entities are! Names like `superElement`, `megaFrame` and `niceItem` will definitely enlighten a reader.
+
+Indeed, from one hand, something is written: `super..`, `mega..`, `nice..` But from the other hand -- that brings no details. A reader may decide to look for a hidden meaning and meditate for an hour or two.
+
+## Overlap outer variables
+
+```quote author="Guan Yin Zi"
+When in the light, can't see anything in the darkness.<br>
+When in the darkness, can see everything in the light.
+```
+
+Use same names for variables inside and outside a function. As simple. No efforts required.
+
+```js
+let *!*user*/!* = authenticateUser();
+
+function render() {
+  let *!*user*/!* = anotherValue();
+  ...
+  ...many lines...
+  ...
+  ... // <-- a programmer wants to work with user here and...
+  ...
+}
+```
+
+A programmer who jumps inside the `render` will probably miss to notice that there's a local `user` shadowing the outer one.
+
+Then he'll try to work with `user` it assuming that it's the external variable, the result of `authenticateUser()`... The trap is sprung! Hello, debugger...
+
+
+## Side-effects everywhere!
+
+There are functions that look like they don't change anything. Like `isReady()`, `checkPermission()`, `findTags()`... They are assumed to carry out calculations, find and return the data, without changing anything outside of them. That's called "no side-effects".
+
+**A really beautiful trick -- is to add a "useful" action to them, besides the main task.**
+
+The expression of dazed surprise on the face of your colleague when he see a function named `is..`, `check..` or `find...` changing something -- will definitely broaden your boundaries of reason.
+
+**Another way to surprise -- is to return a non-standard result.**
+
+Show your original thinking! Let the call of `checkPermission` return not `true/false`, but a complex object with the results of the check.
+
+Those developers who try to write `if (checkPermission(..))`, will wonder why it doesn't work. Tell them: "Read the docs!". And give this article.
+
+
+## Powerful functions!
+
+```quote author="Laozi (Tao Te Ching)"
+The great Tao flows everywhere,<br>
+both to the left and to the right.
+```
+
+Don't limit the function by what's written in its name. Be broader.
+
+For instance, a function `validateEmail(email)` could (besides checking the email for correctness) show an error message and ask to re-enter the email.
+
+Additional actions should not be obvious from the function name. A true ninja coder will make them not obvious from the code as well.
+
+**Joining several actions into one protects your code from reuse.**
+
+Imagine, another developer wants only to check the email, and not output any message. Your function  `validateEmail(email)` that does both will not suit him. So he won't break your meditation by asking anything about it.
+
+## Summary
+
+All "pieces of advice" above are from the real code... Sometimes, written by experienced developers. Maybe even more experienced than you are ;)
+
+- Follow some of them -- and your code will become full of surprises.
+- Follow many of them -- and your code will become truly yours, no one would want to change it.
+- Follow all -- and your code will become a valuable lesson for young developers looking for enlightment.
diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md
new file mode 100644
index 00000000..7b58f0bf
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md
@@ -0,0 +1,50 @@
+The test demonstrates one of the temptations a developer meets when writing tests.
+
+What we have here is actually 3 tests, but layed out as a single function with 3 asserts.
+
+Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong.
+
+If an error happens inside a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*.
+
+It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs.
+
+Like this:
+```js
+describe("Raises x to power n", function() {
+  it("5 in the power of 1 equals 5", function() {
+    assert.equal(pow(5, 1), 5);
+  });
+
+  it("5 in the power of 2 equals 25", function() {
+    assert.equal(pow(5, 2), 25);
+  });
+
+  it("5 in the power of 3 equals 125", function() {
+    assert.equal(pow(5, 3), 125);
+  });
+});
+```
+
+We replaced the single `it` with `describe` and a group of `it` blocks. Now if something fails we would see clearly what the data was.
+
+Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`:
+
+
+```js
+describe("Raises x to power n", function() {
+  it("5 in the power of 1 equals 5", function() {
+    assert.equal(pow(5, 1), 5);
+  });
+
+*!*
+  // Mocha will run only this block
+  it.only("5 in the power of 2 equals 25", function() {
+    assert.equal(pow(5, 2), 25);
+  });
+*/!*
+
+  it("5 in the power of 3 equals 125", function() {
+    assert.equal(pow(5, 3), 125);
+  });
+});
+```
diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md
new file mode 100644
index 00000000..66fece09
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# What's wrong in the test?
+
+What's wrong in the test of `pow` below?
+
+```js
+it("Raises x to the power n", function() {
+  let x = 5;
+
+  let result = x;
+  assert.equal(pow(x, 1), result);
+
+  result *= x;
+  assert.equal(pow(x, 2), result);
+
+  result *= x;
+  assert.equal(pow(x, 3), result);
+});
+```
+
+P.S. Syntactically the test is correct and passes.
diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md
new file mode 100644
index 00000000..03394260
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/article.md
@@ -0,0 +1,412 @@
+# Automated testing with mocha
+
+Automated testing will be used further in tasks.
+
+It's actually a part of the "educational minimum" of a developer.
+
+[cut]
+
+## Why we need tests?
+
+When we write a function, we usually can imagine what it should do: which parameters give which results.
+
+During the development, we can check the function by running it and comparing the outcome with the expected one. For instance, we can do it in the console.
+
+If something's wrong -- then we fix the code, run again, check the result -- and so on till it works.
+
+But such manual "re-runs" are imperfect.
+
+**When testing a code by manual re-runs -- it's easy to miss something.**
+
+For instance, we're creating a function `f`. Wrote some code, testing: `f(1)` works, but `f(2)` doesn't work. We fix the code and now `f(2)` works. Looks complete? But we forgot to re-test `f(1)`. That may lead to an error.
+
+That's very typical. When we develop something, we keep a lot of possible use cases and mind. But it's hard to expect from programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one.
+
+**Automated testing means that tests are written separately, in addition to the code. They can be executed easily and check all the main use cases.**
+
+## Behavior Driven Development (BDD)
+
+Let's use a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. That approach is used among many projects. BDD is not just about testing. That's more.
+
+**BDD is three things in one: tests AND documentation AND examples.**
+
+Enough words. Let's see the example.
+
+## Development of "pow": the spec
+
+Let's say we want to make a function `pow(x, n)` that raises `x` to an integer power `n`. We assume that `n≥0`.
+
+That task is just an example: there's `**` operator in JavaScript that can do that, but here we concentrate on the development flow that can be applied to more complex tasks as well.
+
+Before creating the code of `pow`, we can imagine what the function should do and describe it.
+
+Such description is called a *specification* or, in short, a spec, and looks like this:
+
+```js
+describe("pow", function() {
+
+  it("raises to n-th power", function() {
+    assert.equal(pow(2, 3), 8);
+  });
+
+});
+```
+
+A spec has three main building blocks that you can see above:
+
+`describe("title", function() { ... })`
+: What functionality we're describing. Uses to group "workers" -- the `it` blocks. In our case we're describing the function `pow`.
+
+`it("title", function() { ... })`
+: In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it.
+
+`assert.equal(value1, value2)`
+: The code inside `it` block, if the implementation is correct, should execute without errors.
+
+    Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`.
+
+    There are other types of comparisons and checks that we'll see further.
+
+## The development flow
+
+The flow of development usually looks like this:
+
+1. An initial spec is written, with tests for the most basic functionality.
+2. An initial implementation is created.
+3. To check whether it works, we run the testing framework [Mocha](http://mochajs.org/) (more details soon) that runs the spec. Errors are displayed. We make corrections till everything works.
+4. Now we have a working initial implementation with tests.
+5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail.
+6. Go to 3, update the implementation till tests give no errors.
+7. Repeat steps 3-6 till the functionality is ready.
+
+So, the development is *iterative*. We write the spec, implement it, make sure tests pass, then write more tests, make sure they work etc. At the end we have both a working implementation and tests for it.
+
+In our case, the first step is complete: we have an initial spec for `pow`. So let's make an implementation. But before that let's make a "zero" run of the spec, just to see that tests are working (they will all fail).
+
+## The spec in action
+
+Here in the tutorial we'll be using the following JavaScript libraries for tests:
+
+- [Mocha](http://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests.
+- [Chai](http://chaijs.com) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`.
+- [Sinon](http://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later.
+
+These libraries are suitable for both in-browser and server-side testing. Here we'll consider the browser variant.
+
+The full HTML page with these frameworks and `pow` spec:
+
+```html src="index.html"
+```
+
+The page can be divided into four parts:
+
+1. The `<head>` -- add third-party libraries and styles for tests.
+2. The `<script>` with the function to test, in our case -- with the code for `pow`.
+3. The tests -- in our case an external script `test.js` that has `describe("pow", ...)` from above.
+4. The HTML element `<div id="mocha">` will be used by Mocha to output results.
+5. The tests are started by the command `mocha.run()`.
+
+The result:
+
+[iframe height=250 src="pow-1" border=1 edit]
+
+As of now, the test fails, there's an error. That's logical: we have an empty function code in `pow`, so `pow(2,3)` returns `undefined` instead of `8`.
+
+For future, let's note that for there are advanced test-runners, like [karma](https://karma-runner.github.io/) and others. So it's generally not a problem to setup many different tests.
+
+## Initial implementation
+
+Let's make a simple implementation of `pow`, for tests to pass:
+
+```js
+function pow() {
+  return 8; // :) we cheat!
+}
+```
+
+Wow, now it works!
+
+[iframe height=250 src="pow-min" border=1 edit]
+
+## Improving the spec
+
+What we've done -- is definitely a cheat. The function does not work: an attempt to calculate `pow(3,4)` would give an incorrect result, but tests pass.
+
+...But the situation is quite typical, it happens in practice. Tests pass, but the function works wrong. Our spec is imperfect. We need to add more use cases to it.
+
+Let's add one more test to see if `pow(3, 4) = 81`.
+
+We can select one of two ways to organize the test here:
+
+1. The first variant -- add one more `assert` into the same `it`:
+
+    ```js
+    describe("pow", function() {
+
+      it("raises to n-th power", function() {
+        assert.equal(pow(2, 3), 8);
+    *!*
+        assert.equal(pow(3, 4), 81);
+    */!*
+      });
+
+    });
+    ```
+2. The second -- make two tests:
+
+    ```js
+    describe("pow", function() {
+
+      it("2 raised to power 3 is 8", function() {
+        assert.equal(pow(2, 3), 8);
+      });
+
+      it("3 raised to power 3 is 27", function() {
+        assert.equal(pow(3, 3), 27);
+      });
+
+    });
+    ```
+
+The principal difference is that when `assert` triggers an error, the `it` block immediately terminates. So, in the first variant if the first `assert` fails, then we'll never see the result of the second `assert`.
+
+Making tests separate is useful to get more information about what's going on, so the second variant is better.
+
+And besides that, there's one more rule good to follow.
+
+**One tests checks one thing.**
+
+If we look at the test and see two independent checks in it -- better to split it into two simpler ones.
+
+So let's continue with the second variant.
+
+The result:
+
+[iframe height=250 src="pow-2" edit border="1"]
+
+As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `27`.
+
+## Improving the implementation
+
+Let's write something more real for tests to pass:
+
+```js
+function pow(x, n) {
+  let result = 1;
+
+  for (let i = 0; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+```
+
+To be sure that the function works well, let's test it for more values. Instead of writing `it` blocks manually, we can generate them in `for`:
+
+```js
+describe("pow", function() {
+
+  function makeTest(x) {
+    let expected = x * x * x;
+    it(`${x} in the power 3 is ${expected}`, function() {
+      assert.equal(pow(x, 3), expected);
+    });
+  }
+
+  for (let x = 1; x <= 5; x++) {
+    makeTest(x);
+  }
+
+});
+```
+
+The result:
+
+[iframe height=250 src="pow-3" edit border="1"]
+
+## Nested describe
+
+We're going to add even more tests. But before that let's note that the helper function `makeTest` and `for` should be grouped together. We won't need `makeTest` in other tests, it's needed only in `for`: their common task is to check how `pow` raises into the given power.
+
+Grouping is done with a nested `describe`:
+
+```js
+describe("pow", function() {
+
+*!*
+  describe("raises x to power n", function() {
+*/!*
+
+    function makeTest(x) {
+      let expected = x * x * x;
+      it(`${x} in the power 3 is ${expected}`, function() {
+        assert.equal(pow(x, 3), expected);
+      });
+    }
+
+    for (let x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+*!*
+  });
+*/!*
+
+  // ... more tests to follow here, both describe and it can be added
+});
+```
+
+The nested `describe` defines a new "subgroup" of tests. In the output we can see the titled indentation:
+
+[iframe height=250 src="pow-4" edit border="1"]
+
+In the future we can add more `it` and `describe` on the top level with helper functions of their own, they won't see `makeTest`.
+
+````smart header="`before/after` and `beforeEach/afterEach`"
+We can setup `before/after` functions that execute before/after running tests, and also `beforeEach/afterEach` functions that execute before/after *every* `it`.
+
+For instance:
+
+```js no-beautify
+describe("test", function() {
+
+  before(() => alert("Testing started – before all tests"));
+  after(() => alert("Testing finished – after all tests"));
+
+  beforeEach(() => alert("Before a test – enter a test"));
+  afterEach(() => alert("After a test – exit a test"));
+
+  it('test 1', () => alert(1));
+  it('test 2', () => alert(2));
+
+});
+```
+
+The running sequence will be:
+
+```
+Testing started – before all tests (before)
+Before a test – enter a test (beforeEach)
+1
+After a test – exit a test   (afterEach)
+Before a test – enter a test (beforeEach)
+2
+After a test – exit a test   (afterEach)
+Testing finished – after all tests (after)
+```
+
+[edit src="beforeafter" title="Open the example in the sandbox."]
+
+Usually, `beforeEach/afterEach` (`before/each`) are used to perform initialization, zero out counters or do something else between the tests (or test groups).
+````
+
+## Extending the spec
+
+The basic functionality of `pow` is complete. The first iteration of the development is done. When we're done celebrating and drinking champagne -- let's go on and improve it.
+
+As it was said, the function `pow(x, n)` is meant to work with positive integer values `n`.
+
+To indicate a mathematical error, JavaScript functions usually return `NaN`. Let's do the same for invalid values of `n`.
+
+Let's first add the behavior to the spec(!):
+
+```js
+describe("pow", function() {
+
+  // ...
+
+  it("for negative n the result is NaN", function() {
+*!*
+    assert.isNaN(pow(2, -1));
+*/!*
+  });
+
+  it("for non-integer n the result is NaN", function() {
+*!*
+    assert.isNaN(pow(2, 1.5));    
+*/!*
+  });
+
+});
+```
+
+The result with new tests:
+
+[iframe height=530 src="pow-nan" edit border="1"]
+
+The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them.
+
+```smart header="Other assertions"
+
+Please note the assertion `assert.isNaN`: it checks for `NaN`.
+
+There are other assertions in Chai as well, for instance:
+
+- `assert.equal(value1, value2)` -- checks the equality  `value1 == value2`.
+- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`.
+- `assert.notEqual`, `assert.notStrictEqual` -- inverse checks to the ones above.
+- `assert.isTrue(value)` -- checks that `value === true`
+- `assert.isFalse(value)` -- checks that `value === false`
+- ...the full list is in the [docs](http://chaijs.com/api/assert/)
+```
+
+So we should add a couple of lines to `pow`:
+
+```js
+function pow(x, n) {
+*!*
+  if (n < 0) return NaN;
+  if (Math.round(n) != n) return NaN;
+*/!*
+
+  let result = 1;
+  for (let i = 0; i < n; i++) {
+    result *= x;
+  }
+  return result;
+}
+```
+
+Now it works, all tests pass:
+
+[iframe height=300 src="pow-full" edit border="1"]
+
+[edit src="pow-full" title="Open the full final example in the sandbox."]
+
+## Summary
+
+In BDD, the spec goes first, followed by implementation. At the end we have both the spec and the code.
+
+The spec can be used in three ways:
+
+1. **Tests** guarantee that the code works correctly.
+2. **Docs** -- the titles of `describe` and `it` tell what the function does.
+3. **Examples** -- the tests are actually working examples showing how a function can be used.
+
+With the spec, we can safely improve, change, even rewrite the function from scratch and make sure it still works right.
+
+That's especially important in large projects when a function is used in many places. When we change such a function -- there's just no way to manually check if every place that uses them still works right.
+
+Without tests, people have two ways:
+
+1. To perform the change, no matter what. And then our users meet bugs and report them. If we can afford that.
+2. Or people become afraid to modify such functions, if the punishment for errors is harsh. Then it becomes old, overgrown with cobwebs, no one wants to get into it, and that's not good.
+
+**Automatically tested code is contrary to that!**
+
+If the project is covered with tests -- there's just no such problem. We can run tests and see a lot of checks made in a matter of seconds.
+
+**Besides, a well-tested code has better architecture.**
+
+Naturally, that's because it's easier to change and improve it. But not only that.
+
+To write tests, the code should be organized in such a way that every function has a clearly described task, well-defined input and output. That means a good architecture from the beginning.
+
+In real life that's sometimes not that easy. Sometimes it's difficult to write a spec before the actual code, because it's not yet clear how it should behave. But in general writing tests makes development faster and more stable.
+
+## What now?
+
+Later in the tutorial you will meet many tasks with tests baked-in. So you'll see more practical examples.
+
+Writing tests requires good JavaScript knowledge. But we're just starting to learn it. So, to settle down everything, as of now you're not required to write tests, but you should already be able to read them even if they are a little bit more complex than in this chapter.
diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/index.html b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/index.html
new file mode 100644
index 00000000..e680b536
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js
new file mode 100644
index 00000000..cad51d3e
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js
@@ -0,0 +1,12 @@
+describe("test", function() {
+
+  before(() => alert("Testing started – before all tests"));
+  after(() => alert("Testing finished – after all tests"));
+
+  beforeEach(() => alert("Before a test – enter a test"));
+  afterEach(() => alert("After a test – exit a test"));
+
+  it('test 1', () => alert(1));
+  it('test 2', () => alert(2));
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/index.html b/1-js/03-code-quality/05-testing-mocha/index.html
new file mode 100644
index 00000000..28a2ea62
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    mocha.setup('bdd'); // minimal setup
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      /* function code is to be written, empty now */
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html
new file mode 100644
index 00000000..e48a8d3a
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      /* function code is to be written, empty now */
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js
new file mode 100644
index 00000000..89ba412e
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js
@@ -0,0 +1,7 @@
+describe("pow", function() {
+
+  it("raises to n-th power", function() {
+    assert.equal(pow(2, 3), 8);
+  });
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html
new file mode 100644
index 00000000..d82a79dc
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow() {
+      return 8; // :) we cheat!
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js
new file mode 100644
index 00000000..9a2f8fde
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js
@@ -0,0 +1,11 @@
+describe("pow", function() {
+
+  it("2 raised to power 3 is 8", function() {
+    assert.equal(pow(2, 3), 8);
+  });
+
+  it("3 raised to power 3 is 27", function() {
+    assert.equal(pow(3, 3), 27);
+  });
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html
new file mode 100644
index 00000000..c71b0d5d
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      let result = 1;
+
+      for (let i = 0; i < n; i++) {
+        result *= x;
+      }
+
+      return result;
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js
new file mode 100644
index 00000000..8663952a
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js
@@ -0,0 +1,14 @@
+describe("pow", function() {
+
+  function makeTest(x) {
+    let expected = x * x * x;
+    it(`${x} in the power 3 is ${expected}`, function() {
+      assert.equal(pow(x, 3), expected);
+    });
+  }
+
+  for (let x = 1; x <= 5; x++) {
+    makeTest(x);
+  }
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html
new file mode 100644
index 00000000..c71b0d5d
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      let result = 1;
+
+      for (let i = 0; i < n; i++) {
+        result *= x;
+      }
+
+      return result;
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js
new file mode 100644
index 00000000..10a032d0
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js
@@ -0,0 +1,19 @@
+describe("pow", function() {
+
+  describe("raises x to power n", function() {
+
+    function makeTest(x) {
+      let expected = x * x * x;
+      it(`${x} in the power 3 is ${expected}`, function() {
+        assert.equal(pow(x, 3), expected);
+      });
+    }
+
+    for (let x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  // ... more tests to follow here, both describe and it can be added
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html
new file mode 100644
index 00000000..076b1e5a
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      if (n < 0) return NaN;
+      if (Math.round(n) != n) return NaN;
+
+      let result = 1;
+      for (let i = 0; i < n; i++) {
+        result *= x;
+      }
+      return result;
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js
new file mode 100644
index 00000000..a5a34597
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js
@@ -0,0 +1,26 @@
+describe("pow", function() {
+
+  describe("raises x to power n", function() {
+
+    function makeTest(x) {
+      let expected = x * x * x;
+      it(`${x} in the power 3 is ${expected}`, function() {
+        assert.equal(pow(x, 3), expected);
+      });
+    }
+
+    for (let x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("if n is negative, the result is NaN", function() {
+    assert.isNaN(pow(2, -1));
+  });
+
+  it("if n is not integer, the result is NaN", function() {
+    assert.isNaN(pow(2, 1.5));
+  });
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html
new file mode 100644
index 00000000..d82a79dc
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow() {
+      return 8; // :) we cheat!
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js
new file mode 100644
index 00000000..89ba412e
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js
@@ -0,0 +1,7 @@
+describe("pow", function() {
+
+  it("raises to n-th power", function() {
+    assert.equal(pow(2, 3), 8);
+  });
+
+});
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html
new file mode 100644
index 00000000..523ae25e
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- add mocha css, to show results -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
+  <!-- add mocha framework code -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
+  <script>
+    // enable bdd-style testing
+    mocha.setup('bdd');
+  </script>
+  <!-- add chai -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
+  <script>
+    // chai has a lot of stuff, let's make assert global
+    let assert = chai.assert;
+  </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      let result = 1;
+      for (let i = 0; i < n; i++) {
+        result *= x;
+      }
+      return result;
+    }
+  </script>
+
+  <!-- the script with tests (describe, it...) -->
+  <script src="test.js"></script>
+
+  <!-- the element with id="mocha" will contain test results -->
+  <div id="mocha"></div>
+
+  <!-- run tests! -->
+  <script>
+    mocha.run();
+  </script>
+</body>
+
+</html>
diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js
new file mode 100644
index 00000000..a5a34597
--- /dev/null
+++ b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js
@@ -0,0 +1,26 @@
+describe("pow", function() {
+
+  describe("raises x to power n", function() {
+
+    function makeTest(x) {
+      let expected = x * x * x;
+      it(`${x} in the power 3 is ${expected}`, function() {
+        assert.equal(pow(x, 3), expected);
+      });
+    }
+
+    for (let x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("if n is negative, the result is NaN", function() {
+    assert.isNaN(pow(2, -1));
+  });
+
+  it("if n is not integer, the result is NaN", function() {
+    assert.isNaN(pow(2, 1.5));
+  });
+
+});
diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md
new file mode 100644
index 00000000..37ea9f89
--- /dev/null
+++ b/1-js/03-code-quality/06-polyfills/article.md
@@ -0,0 +1,57 @@
+
+# Polyfills
+
+The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
+
+Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
+
+So it's quite common for an engine to implement only the part of the standard.
+
+A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
+
+## Babel
+
+When we use modern features of the language, some engines may fail to support such code. Just as said, not all features are implemented everywhere.
+
+Here Babel comes to the rescue.
+
+[Babel](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). It rewrites modern JavaScript code into the previous standard.
+
+Actually, there are two parts in Babel:
+
+1. First, the transpiler program, which rewrites the code. The developer runs it on his own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build system like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/) provide means to run transpiler automatically on every code change, so that doesn't involve any time loss from our side.
+
+2. Second, the polyfill.
+
+    The transpiler rewrites the code, so syntax features are covered. But for new functions we need to write a special script that implements them. JavaScript is a highly dynamic language, scripts may not just add new functions, but also modify built-in ones, so that they behave according to the modern standard.
+
+    There's a term "polyfill" for scripts that "fill in" the gap and add missing implementations.
+
+    Two interesting polyfills are:
+    - [babel polyfill](https://babeljs.io/docs/usage/polyfill/) that supports a lot, but is big.
+    - [polyfill.io](http://polyfill.io) service that allows to load/construct polyfills on-demand, depending on the features we need.
+
+So, we need to setup the transpiler and add the polyfill for old engines to support modern features.
+
+If we orient towards modern engines and do not use features except those supported everywhere, then we don't need to use Babel.
+
+## Examples in the tutorial
+
+
+````online
+Most examples are runnable at-place, like this:
+
+```js run
+alert('Press the "Play" button in the upper-right corner to run');
+```
+
+Examples that use modern JS will work only if your browser supports it.
+```
+
+```offline
+As you're reading the offline version, examples are not runnable. But they usually work :)
+```
+
+[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is good for all examples, but other modern browsers are mostly fine too.
+
+Note that on production we can use Babel to translate the code into suitable for less recent browsers, so there will be no such limitation, the code will run everywhere.
diff --git a/1-js/03-code-quality/index.md b/1-js/03-code-quality/index.md
new file mode 100644
index 00000000..2ef64fa6
--- /dev/null
+++ b/1-js/03-code-quality/index.md
@@ -0,0 +1,3 @@
+# Code quality
+
+This chapter explains coding practices that we'll use further in the development. 
diff --git a/1-js/04-object-basics/01-object/2-hello-object/solution.md b/1-js/04-object-basics/01-object/2-hello-object/solution.md
new file mode 100644
index 00000000..60083b96
--- /dev/null
+++ b/1-js/04-object-basics/01-object/2-hello-object/solution.md
@@ -0,0 +1,10 @@
+
+
+```js
+let user = {};
+user.name = "John";
+user.surname = "Smith";
+user.name = "Pete";
+delete user.name;
+```
+
diff --git a/1-js/04-object-basics/01-object/2-hello-object/task.md b/1-js/04-object-basics/01-object/2-hello-object/task.md
new file mode 100644
index 00000000..2841a058
--- /dev/null
+++ b/1-js/04-object-basics/01-object/2-hello-object/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Hello, object
+
+Write the code, one line for each action:
+
+1. Create an empty object `user`.
+2. Add the property `name` with the value `John`.
+3. Add the property `surname` with the value `Smith`.
+4. Change the value of the `name` to `Pete`.
+5. Remove the property `name` from the object.
+
diff --git a/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js b/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js
new file mode 100644
index 00000000..e7f63284
--- /dev/null
+++ b/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js
@@ -0,0 +1,7 @@
+function isEmpty(obj) {
+  for (let key in obj) {
+    // if the loop has started, there is a prorty
+    return false;
+  }
+  return true;
+}
\ No newline at end of file
diff --git a/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js b/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js
new file mode 100644
index 00000000..4db5efab
--- /dev/null
+++ b/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js
@@ -0,0 +1,11 @@
+describe("isEmpty", function() {
+  it("returns true for an empty object", function() {
+    assert.isTrue(isEmpty({}));
+  });
+
+  it("returns false if a property exists", function() {
+    assert.isFalse(isEmpty({
+      anything: false
+    }));
+  });
+});
\ No newline at end of file
diff --git a/1-js/04-object-basics/01-object/3-is-empty/solution.md b/1-js/04-object-basics/01-object/3-is-empty/solution.md
new file mode 100644
index 00000000..9e8b3d90
--- /dev/null
+++ b/1-js/04-object-basics/01-object/3-is-empty/solution.md
@@ -0,0 +1,11 @@
+Just loop over the object and `return false` immediately if there's at least one property.
+
+```js
+function isEmpty(obj) 
+  for(let key in obj) {
+    return false;
+  }
+  return true;
+}
+```
+
diff --git a/1-js/04-object-basics/01-object/3-is-empty/task.md b/1-js/04-object-basics/01-object/3-is-empty/task.md
new file mode 100644
index 00000000..c438d36a
--- /dev/null
+++ b/1-js/04-object-basics/01-object/3-is-empty/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Check for emptiness
+
+Write the function `isEmpty(obj)` which returns `true` if the object has no properties, `false` otherwise.
+
+Should work like that:
+
+```js
+let schedule = {};
+
+alert( isEmpty(schedule) ); // true
+
+schedule["8:30"] = "get up";
+
+alert( isEmpty(schedule) ); // false
+```
+
diff --git a/1-js/04-object-basics/01-object/4-const-object/solution.md b/1-js/04-object-basics/01-object/4-const-object/solution.md
new file mode 100644
index 00000000..f73c2f92
--- /dev/null
+++ b/1-js/04-object-basics/01-object/4-const-object/solution.md
@@ -0,0 +1,19 @@
+Sure, it works, no problem.
+
+The `const` only protects the variable itself from changing. 
+
+In other words, `user` stores a reference to the object. And it can't be changed. But the content of the object can.
+
+```js run
+const user = {
+  name: "John"
+};
+
+*!*
+// works
+user.name = "Pete";
+*/!*
+
+// error
+user = 123;
+```
diff --git a/1-js/04-object-basics/01-object/4-const-object/task.md b/1-js/04-object-basics/01-object/4-const-object/task.md
new file mode 100644
index 00000000..95f7a64d
--- /dev/null
+++ b/1-js/04-object-basics/01-object/4-const-object/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Constant objects?
+
+Is it possible to change an object declared with `const`, how do you think?
+
+```js
+const user = {
+  name: "John"
+};
+
+*!*
+// does it work?
+user.name = "Pete";
+*/!*
+```
diff --git a/1-js/04-object-basics/01-object/5-sum-object/solution.md b/1-js/04-object-basics/01-object/5-sum-object/solution.md
new file mode 100644
index 00000000..eb5b176a
--- /dev/null
+++ b/1-js/04-object-basics/01-object/5-sum-object/solution.md
@@ -0,0 +1,16 @@
+
+```js run
+let salaries = {
+  John: 100,
+  Ann: 160,
+  Pete: 130
+}
+
+let sum = 0;
+for(let key in salaries) {
+  sum += salaries[key];
+}
+
+alert(sum); // 390
+```
+
diff --git a/1-js/04-object-basics/01-object/5-sum-object/task.md b/1-js/04-object-basics/01-object/5-sum-object/task.md
new file mode 100644
index 00000000..7e3e048d
--- /dev/null
+++ b/1-js/04-object-basics/01-object/5-sum-object/task.md
@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# Sum object properties
+
+We have an object storing salaries of our team:
+
+```js
+let salaries = {
+  John: 100,
+  Ann: 160,
+  Pete: 130
+}
+```
+
+Write the code to sum all salaries and store in the variable `sum`. Should be `390` in the example above.
+
+If `salaries` is empty, then the result must be `0`.
\ No newline at end of file
diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js
new file mode 100644
index 00000000..4668c1dc
--- /dev/null
+++ b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js
@@ -0,0 +1,7 @@
+function multiplyNumeric(obj) {
+  for (let key in obj) {
+    if (typeof obj[key] == 'number') {
+      obj[key] *= 2;
+    }
+  }
+}
\ No newline at end of file
diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js
new file mode 100644
index 00000000..a02b1e1c
--- /dev/null
+++ b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js
@@ -0,0 +1,17 @@
+let menu = {
+  width: 200,
+  height: 300,
+  title: "My menu"
+};
+
+
+function multiplyNumeric(obj) {
+  
+  /* your code */
+
+}
+
+multiplyNumeric(menu);
+
+alert( "menu width=" + menu.width + " height=" + menu.height + " title=" + menu.title );
+
diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js
new file mode 100644
index 00000000..064e5414
--- /dev/null
+++ b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js
@@ -0,0 +1,18 @@
+describe("multiplyNumeric", function() {
+  it("multiplies all numeric properties by 2", function() {
+    let menu = {
+      width: 200,
+      height: 300,
+      title: "My menu"
+    };
+    let result = multiplyNumeric(menu);
+    assert.equal(menu.width, 400);
+    assert.equal(menu.height, 600);
+    assert.equal(menu.title, "My menu");
+  });
+
+  it("returns nothing", function() {
+    assert.isUndefined( multiplyNumeric({}) );
+  });
+
+});
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md b/1-js/04-object-basics/01-object/8-multiply-numeric/solution.md
similarity index 100%
rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md
rename to 1-js/04-object-basics/01-object/8-multiply-numeric/solution.md
diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/task.md b/1-js/04-object-basics/01-object/8-multiply-numeric/task.md
new file mode 100644
index 00000000..33eb8922
--- /dev/null
+++ b/1-js/04-object-basics/01-object/8-multiply-numeric/task.md
@@ -0,0 +1,33 @@
+importance: 3
+
+---
+
+# Multiply numeric properties by 2
+
+Create a function `multiplyNumeric(obj)` that multiplies all numeric properties of `obj` by `2`.
+
+For instance:
+
+```js
+// before the call
+let menu = {
+  width: 200,
+  height: 300,
+  title: "My menu"
+};
+
+multiplyNumeric(menu);
+
+// after the call
+menu = {
+  width: 400,
+  height: 600,
+  title: "My menu"
+};
+```
+
+Please note that `multiplyNumeric` does not need to return anything. It should modify the object in-place.
+
+P.S. Use `typeof` to check for a number here.
+
+
diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md
new file mode 100644
index 00000000..b2d612a5
--- /dev/null
+++ b/1-js/04-object-basics/01-object/article.md
@@ -0,0 +1,737 @@
+
+# Objects
+
+As we know from the chapter <info:types>, there are 7 language types in JavaScript. Six of them are called "primitive", because their values contain only a single thing (be it a string or a number or whatever).
+
+In contrast, objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.
+
+[cut]
+
+An object can be created with figure brackets `{…}` with an optional list of *properties*. A property is a "key: value" pair, where `key` is a string (also called a "property name"), and `value` can be anything.
+
+We can imagine an object as a cabinet with signed files. Every piece of data is stored in it's file by the key. It's easy to find a file by it's name or add/remove a file.
+
+![](object.png)
+
+An empty object ("empty cabinet") can be created using one of two syntaxes:
+
+```js
+let user = new Object(); // "object constructor" syntax
+let user = {};  // "object literal" syntax
+```
+
+![](object-user-empty.png)
+
+Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*.
+
+## Literals and properties
+
+We can immediately put some properties into `{...}` as "key: value" pairs:
+
+```js
+let user = {     // an object
+  name: "John",  // by key "name" store value "John"
+  age: 30        // by key "age" store value 30
+};
+```
+
+A property has a key (also known as "name" or "identifier") before the colon `":"` and a value to the right of it.
+
+In the `user` object, there are two properties:
+
+1. The first property has the name `"name"` and the value `"John"`.
+2. The second one has the name `"age"` and the value `30`.
+
+The resulting `user` object can be imagined as a cabinet with two signed files labelled "name" and "age".
+
+![user object](object-user.png)
+
+We can add, remove and read files from it any time.
+
+Property values are accessible using the dot notation:
+
+```js
+// get fields of the object:
+alert( user.name ); // John
+alert( user.age ); // 30
+```
+
+The value can be of any type. Let's add a boolean one:
+
+```js
+user.isAdmin = true;
+```
+
+![user object 2](object-user-isadmin.png)
+
+To remove a property, we can use `delete` operator:
+
+```js
+delete user.age;
+```
+
+![user object 3](object-user-delete.png)
+
+We can also use multiword property names, but then they must be quoted:
+
+```js
+let user = {
+  name: "John",
+  age: 30,
+  "likes birds": true  // multiword property name must be quoted
+};
+```
+
+![](object-user-props.png)
+
+
+````smart header="Trailing comma"
+The last property in the list may end with a comma:
+```js
+let user = {
+  name: "John",
+  age: 30*!*,*/!*
+}
+```
+That is called a "trailing" or "hanging" comma. Makes it easier to add/remove/move around properties, because all lines become alike.
+````
+
+## Square brackets
+
+For multiword properties, the dot access doesn't work:
+
+```js run
+// this would give a syntax error
+user.likes birds = true
+```
+
+That's because the dot requires the key to be a valid variable identifier. That is: no spaces and other limitations.
+
+There's an alternative "square bracket notation" that works with any string:
+
+
+```js run
+let user = {};
+
+// set
+user["likes birds"] = true;
+
+// get
+alert(user["likes birds"]); // true
+
+// delete
+delete user["likes birds"];
+```
+
+Now everything is fine. Please note that the string inside the brackets is properly quoted (any type of quotes will do).
+
+Square brackets also provide a way to obtain the property name as the result of any expression - as opposed to a litteral string - like from a variable as follows:
+
+```js
+let key = "likes birds";
+
+// same as user["likes birds"] = true;
+user[key] = true;
+```
+
+Here, the variable `key` may be calculated at run-time or depend on the user input. And then we use it to access the property. That gives us a great deal of flexibility. The dot notation cannot be used in a similar way.
+
+For instance:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+let key = prompt("What do you want to know about the user?", "name");
+
+// access by variable
+alert( user[key] ); // John (if enter "name")
+```
+
+
+### Computed properties
+
+We can use square brackets in an object literal. That's called *computed properties*.
+
+For instance:
+
+```js run
+let fruit = prompt("Which fruit to buy?", "apple");
+
+let bag = {
+*!*
+  [fruit]: 5, // the name of the property is taken from the variable fruit
+*/!*
+};
+
+alert( bag.apple ); // 5 if fruit="apple"
+```
+
+The meaning of a computed property is simple: `[fruit]` means that the property name should be taken from `fruit`.
+
+So, if a visitor enters `"apple"`, `bag` will become `{apple: 5}`.
+
+Essentially, that works the same as:
+```js run
+let fruit = prompt("Which fruit to buy?", "apple");
+let bag = {};
+
+// take property name from the fruit variable
+bag[fruit] = 5;
+```
+
+...But looks nicer.
+
+We can use more complex expressions inside square brackets:
+
+```js
+let fruit = 'apple';
+let bag = {
+  ['apple' + 'Computers']: 5 // bag.appleComputers = 5
+};
+```
+
+Square brackets are much more powerful than the dot notation. They allow any property names and variables. But they are also more cumbersome to write.
+
+So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets.
+
+
+
+````smart header="Reserved words are allowed as property names"
+A variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc.
+
+But for an object property, there's no such restriction. Any name is fine:
+
+```js run
+let obj = {
+  for: 1,
+  let: 2,
+  return: 3
+}
+
+alert( obj.for + obj.let + obj.return );  // 6
+```
+
+Basically, any name is allowed, but there's a special one: `"__proto__"` that gets special treatment for historical reasons. For instance, we can't set it to a non-object value:
+
+```js run
+let obj = {};
+obj.__proto__ = 5;
+alert(obj.__proto__); // [object Object], didn't work as intended
+```
+
+As we see from the code, the assignment to a primitive `5` is ignored. If we want to store *arbitrary* (user-provided) keys, then such behavior can be the source of bugs and even vulnerabilities, because it's unexpected. There's another data structure [Map](info:map-set-weakmap-weakset), that we'll learn in the chapter <info:map-set-weakmap-weakset>, which supports arbitrary keys.
+````
+
+
+## Property value shorthand
+
+In real code we often use existing variables as values for property names.
+
+For instance:
+
+```js run
+function makeUser() {
+  let name = prompt("Name?");
+  let age = prompt("Age?");
+  return {
+    name: name,
+    age: age
+  };
+}
+
+let user = makeUser("John", 30);
+alert(user.name); // John
+```
+
+In the example above, properties have same names as variables. The use-case of making a property from a variable is so common, that there's a special *property value shorthand* to make it shorter.
+
+Instead of `name:name` we can just write `name`, like this:
+
+```js
+function makeUser(name, age) {
+*!*
+  return {
+    name, // same as name: name
+    age   // same as age: age
+  };
+*/!*
+}
+```
+
+We can use both normal properties and shorthands in the same object:
+
+```js
+let user = {
+  name,  // same as name:name
+  age: 30
+};
+```
+
+## Existence check
+
+A notable objects feature is that it's possible to access any property. There will be no error if the property doesn't exist! Accessing a non-existing property just returns `undefined`. It provides a very common way to test whether the property exists -- to get it and compare vs undefined:
+
+```js run
+let user = {};
+
+alert( user.noSuchProperty === undefined ); // true means "no such property"
+```
+
+There also exists a special operator `"in"` to check for the existance of a property.
+
+The syntax is:
+```js
+"key" in object
+```
+
+For instance:
+
+```js run
+let user = { name: "John", age: 30 };
+
+alert( "age" in user ); // true, user.age exists
+alert( "blabla" in user ); // false, user.blabla doesn't exist
+```
+
+Please note that on the left side of `in` there must be a *property name*. That's usually a quoted string.
+
+If we omit quotes, that would mean a variable containing the actual name to be tested. For instance:
+
+```js run
+let user = { age: 30 };
+
+let key = "age";
+alert( *!*key*/!* in user ); // true, takes the name from key and checks for such property
+```
+
+````smart header="Using \"in\" for properties that store `undefined`"
+Usually, the strict comparison `"=== undefined"` check works fine. But there's a special case when it fails, but `"in"` works correctly.
+
+It's when an object property exists, but stores `undefined`:
+
+```js run
+let obj = {
+  test: undefined
+};
+
+alert( obj.test ); // it's undefined, so - no such property?
+
+alert( "test" in obj ); // true, the property does exist!
+```
+
+
+In the code above, the property `obj.test` technically exists. So the `in` operator works right.
+
+Situations like this happen very rarely, because `undefined` is usually not assigned. We mostly use `null` for "unknown" or "empty" values. So the `in` operator is an exotic guest in the code.
+````
+
+
+## The "for..in" loop
+
+To walk over all keys of an object, there exists a special form of the loop: `for..in`. This is a completely different thing from the `for(;;)` construct that we studied before.
+
+The syntax:
+
+```js
+for(key in object) {
+  // executes the body for each key among object properties
+}
+```
+
+For instance, let's output all properties of `user`:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+  isAdmin: true
+};
+
+for(let key in user) {
+  // keys
+  alert( key );  // name, age, isAdmin
+  // values for the keys
+  alert( user[key] ); // John, 30, true
+}
+```
+
+Note that all "for" constructs allow to declare the looping variable inside the loop, like `let key` here.
+
+Also, we could use another variable name here instead of `key`. For instance, `"for(let prop in obj)"` is also widely used.
+
+
+### Ordered like an object
+
+Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order that they are added in it? Can we rely on it?
+
+The short answer is: "ordered in a special fashion": integer properties are sorted, others appear in creation order. The details follow.
+
+As an example, let's consider an object with the phone codes:
+
+```js run
+let codes = {
+  "49": "Germany",
+  "41": "Switzerland",
+  "44": "Great Britain",
+  // ..,
+  "1": "USA"
+};
+
+*!*
+for(let code in codes) {
+  alert(code); // 1, 41, 44, 49
+}
+*/!*
+```
+
+The object may be used to suggest a list of options to the user. If we're making a site mainly for German audience then we probably want `49` to be the first.
+
+But if we run the code, we see a totally different picture:
+
+- USA (1) goes first
+- then Switzerland (41) and so on.
+
+The phone codes go in the ascending sorted order, because they are integer. So we see `1, 41, 44, 49`.
+
+````smart header="Integer properties? What's that?"
+The "integer property" term here means a string that can be converted to-and-from integer without a change.
+
+So, "49" is an integer property name, because when it's transformed to an integer number and back, it's still the same. But "+49" and "1.2" are not:
+
+```js run
+// Math.trunc is a built-in function that removes the decimal part
+alert( String(Math.trunc(Number("49"))) ); // "49", same, integer property
+alert( String(Math.trunc(Number("+49"))) ); // "49", not same ⇒ not integer property
+alert( String(Math.trunc(Number("1.2"))) ); // "1", not same ⇒ not integer property
+```
+````
+
+...On the other hand, if the keys are non-integer, then they are listed in the creation order, for instance:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith"
+};
+user.age = 25; // add one more
+
+*!*
+// non-integer properties are listed in the creation order
+*/!*
+for (let prop in user) {
+  alert( prop ); // name, surname, age
+}
+```
+
+So, to fix the issue with the phone codes, we can "cheat" by making the codes non-integer. Adding a plus `"+"` sign before each code is enough.
+
+Like this:
+
+```js run
+let codes = {
+  "+49": "Germany",
+  "+41": "Switzerland",
+  "+44": "Great Britain",
+  // ..,
+  "+1": "USA"
+};
+
+for(let code in codes) {
+  alert( +code ); // 49, 41, 44, 1
+}
+```
+
+Now it works as intended.
+
+## Copying by reference
+
+One of fundamental differences of objects vs primitives is that they are stored and copied "by reference".
+
+Primitive values: strings, numbers, booleans -- are assigned/copied "as a whole value".
+
+For instance:
+
+```js
+let message = "Hello!";
+let phrase = message;
+```
+
+As a result we have two independant variables, each one is storing the string `"Hello!"`.
+
+![](variable-copy-value.png)
+
+Objects are not like that.
+
+**A variable stores not the object itself, but it's "address in memory", in other words "a reference" to it.**
+
+Here's the picture for the object:
+
+```js
+let user = {
+  name: "John"
+};
+```
+
+![](variable-contains-reference.png)
+
+Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it.
+
+**When an object variable is copied -- the reference is copied, the object is not duplicated.**
+
+If we imagine an object as a cabinet, then a variable is a key to it. Copying a variable duplicates the key, but not the cabinet itself.
+
+For instance:
+
+```js no-beautify
+let user = { name: "John" };
+
+let admin = user; // copy the reference
+```
+
+Now we have two variables, each one with the reference to the same object:
+
+![](variable-copy-reference.png)
+
+Now can use any variable to access the cabinet and modify its contents:
+
+```js run
+let user = { name: 'John' };
+
+let admin = user;
+
+*!*
+admin.name = 'Pete'; // changed by the "admin" reference
+*/!*
+
+alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference
+```
+
+The example above demonstrates that there is only one object. Like if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use the other key (`user`) we see changes.
+
+### Comparison by reference
+
+The equality `==` and strict equality `===` operators for objects work exactly the same.
+
+**Two objects are equal only if they are the same object.**
+
+For instance, two variables reference the same object, they are equal:
+
+```js run
+let a = {};
+let b = a; // copy the reference
+
+alert( a == b ); // true, both variables reference the same object
+alert( a === b ); // true
+```
+
+And here two independent objects are not equal, even though both are empty:
+
+```js run
+let a = {};
+let b = {}; // two independent objects
+
+alert( a == b ); // false
+```
+
+For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to say the truth, such comparisons are necessary very rarely and usually are a result of a coding mistake.
+
+### Const object
+
+An object declared as `const` *can* be changed.
+
+For instance:
+
+```js run
+const user = {
+  name: "John"
+};
+
+*!*
+user.age = 25; // (*)
+*/!*
+
+alert(user.age); // 25
+```
+
+It might seem that the line `(*)` would cause an error, but no, there's totally no problem. That's because `const` fixes the value of `user` itself. And here `user` stores the reference to the same object all the time. The line `(*)` goes *inside* the object, it doesn't reassign `user`.
+
+The `const` would give an error if we try to set `user` to something else, for instance:
+
+```js run
+const user = {
+  name: "John"
+};
+
+*!*
+// Error (can't reassign user)
+*/!*
+user = {
+  name: "Pete"
+};
+```
+
+...But what if we want to make constant object properties? So that `user.age = 25` would give an error. That's possible too. We'll cover it in the chapter <info:property-descriptors>.
+
+## Cloning and merging, Object.assign
+
+So, copying an object variable creates one more reference to the same object.
+
+But what if we need to duplicate an object? Create an independant copy, a clone?
+
+That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. Actually, that's rarely needed, copying by reference is good most of the time.
+
+But if we really want that, then we need to create a new object and replicate the structure of the existing one by iterating over its properties and copying them on the primitive level.
+
+Like this:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+*!*
+let clone = {}; // the new empty object
+
+// let's copy all user properties into it
+for (let key in user) {
+  clone[key] = user[key];
+}
+*/!*
+
+// now clone is a fully independant clone
+clone.name = "Pete"; // changed the data in it
+
+alert( user.name ); // still John in the original object
+```
+
+Also we can use the method [Object.assign](mdn:js/Object/assign) for that.
+
+The syntax is:
+
+```js
+Object.assign(dest[, src1, src2, src3...])
+```
+
+- Arguments `dest`, and `src1, ..., srcN` (can be as many as needed) are objects.
+- It copies the properties of all objects `src1, ..., srcN` into `dest`. In other words, properties of all arguments starting from the 2nd are copied into the 1st. Then it returns `dest`.
+
+For instance, we can use it to merge several objects into one:
+```js
+let user = { name: "John" };
+
+let permissions1 = { canView: true };
+let permissions2 = { canEdit: true };
+
+*!*
+// copies all properties from permissions1 and permissions2 into user
+Object.assign(user, permissions1, permissions2);
+*/!*
+
+// now user = { name: "John", canView: true, canEdit: true }
+```
+
+If the receiving object (`user`) already has the same named property, it will be overwritten:
+
+```js
+let user = { name: "John" };
+
+// overwrite name, add isAdmin
+Object.assign(user, { name: "Pete", isAdmin: true });
+
+// now user = { name: "Pete", isAdmin: true }
+```
+
+We also can use `Object.assign` to replace the loop for simple cloning:
+
+```js
+let user = {
+  name: "John",
+  age: 30
+};
+
+*!*
+let clone = Object.assign({}, user);
+*/!*
+```
+
+It copies all properties of `user` into the empty object and returns it. Actually, the same as the loop, but shorter.
+
+Till now we assumed that all properties of `user` are primitive. But properties can be references to other objects. What to do with them?
+
+Like this:
+```js run
+let user = {
+  name: "John",
+  sizes: {
+    height: 182,
+    width: 50
+  }
+};
+
+alert( user.sizes.height ); // 182
+```
+
+Now it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes` is an object, it will be copied by reference. So `clone` and `user` will share the same sizes:
+
+Like this:
+```js run
+let user = {
+  name: "John",
+  sizes: {
+    height: 182,
+    width: 50
+  }
+};
+
+let clone = Object.assign({}, user);
+
+alert( user.sizes === clone.sizes ); // true, same object
+
+// user and clone share sizes
+user.sizes.width++;       // change a property from one place
+alert(clone.sizes.width); // 51, see the result from the other one
+```
+
+To fix that, we should use the cloning loop that examines each value of `user[key]` and, if it's an object, then replicate it's structure as well. That is called a "deep cloning".
+
+There's a standard algorithm for deep cloning that handles the case above and more complex cases, called the [Structured cloning algorithm](https://w3c.github.io/html/infrastructure.html#internal-structured-cloning-algorithm). In order not to reinvent the wheel, we can use a working implementation of it from the JavaScript library [lodash](https://lodash.com), the method is called [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
+
+
+
+## Summary
+
+Objects are associative arrays with several special features.
+
+They store properties (key-value pairs), where:
+- Property keys must be strings or symbols (usually strings).
+- Values can be of any type.
+
+To access a property, we can use:
+- The dot notation: `obj.property`.
+- Square brackets notation `obj["property"]`. Square brackets allow to take the key from a variable, like `obj[varWithKey]`.
+
+Additional operators:
+- To delete a property: `delete obj.prop`.
+- To check if a property with the given key exists: `"key" in obj`.
+- To iterate over an object: `for(let key in obj)` loop.
+
+Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object. All operations via copied references (like adding/removed properties) are performed on the same single object.
+
+To make a "real copy" (a clone) we can use `Object.assign` or  [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
+
+What we've studied in this chapter is called a "plain object", or just `Object`.
+
+There are many other kinds of objects in JavaScript:
+
+- `Array` to store ordered data collections,
+- `Date` to store the information about the date and time,
+- `Error` to store the information about an error.
+- ...And so on.
+
+They have their special features that we'll study later. Sometimes people say something like "Array type" or "Date type", but formally they are not types of their own, but belong to a single "object" data type. And they extend it in various ways.
+
+Objects in JavaScript are very powerful. Here we've just scratched the surface of the topic that is really huge. We'll be closely working with objects and learning more about them in further parts of the tutorial.
diff --git a/1-js/04-object-basics/01-object/object-user-delete.png b/1-js/04-object-basics/01-object/object-user-delete.png
new file mode 100644
index 00000000..688158f9
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-delete.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-delete@2x.png b/1-js/04-object-basics/01-object/object-user-delete@2x.png
new file mode 100644
index 00000000..e1ef6554
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-delete@2x.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-empty.png b/1-js/04-object-basics/01-object/object-user-empty.png
new file mode 100644
index 00000000..483d072c
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-empty.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-empty@2x.png b/1-js/04-object-basics/01-object/object-user-empty@2x.png
new file mode 100644
index 00000000..8db894cb
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-empty@2x.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-isadmin.png b/1-js/04-object-basics/01-object/object-user-isadmin.png
new file mode 100644
index 00000000..4e76eeb7
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-isadmin.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-isadmin@2x.png b/1-js/04-object-basics/01-object/object-user-isadmin@2x.png
new file mode 100644
index 00000000..b4097769
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-isadmin@2x.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-props.png b/1-js/04-object-basics/01-object/object-user-props.png
new file mode 100644
index 00000000..2bfdfabd
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-props.png differ
diff --git a/1-js/04-object-basics/01-object/object-user-props@2x.png b/1-js/04-object-basics/01-object/object-user-props@2x.png
new file mode 100644
index 00000000..4935b59c
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user-props@2x.png differ
diff --git a/1-js/04-object-basics/01-object/object-user.png b/1-js/04-object-basics/01-object/object-user.png
new file mode 100644
index 00000000..16179209
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user.png differ
diff --git a/1-js/04-object-basics/01-object/object-user@2x.png b/1-js/04-object-basics/01-object/object-user@2x.png
new file mode 100644
index 00000000..72038953
Binary files /dev/null and b/1-js/04-object-basics/01-object/object-user@2x.png differ
diff --git a/1-js/04-object-basics/01-object/object.png b/1-js/04-object-basics/01-object/object.png
new file mode 100644
index 00000000..f94d094a
Binary files /dev/null and b/1-js/04-object-basics/01-object/object.png differ
diff --git a/1-js/04-object-basics/01-object/object@2x.png b/1-js/04-object-basics/01-object/object@2x.png
new file mode 100644
index 00000000..003c2f6e
Binary files /dev/null and b/1-js/04-object-basics/01-object/object@2x.png differ
diff --git a/1-js/04-object-basics/01-object/variable-contains-reference.png b/1-js/04-object-basics/01-object/variable-contains-reference.png
new file mode 100644
index 00000000..d6e7fddf
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-contains-reference.png differ
diff --git a/1-js/04-object-basics/01-object/variable-contains-reference@2x.png b/1-js/04-object-basics/01-object/variable-contains-reference@2x.png
new file mode 100644
index 00000000..145bad29
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-contains-reference@2x.png differ
diff --git a/1-js/04-object-basics/01-object/variable-copy-reference.png b/1-js/04-object-basics/01-object/variable-copy-reference.png
new file mode 100644
index 00000000..97510c4b
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-copy-reference.png differ
diff --git a/1-js/04-object-basics/01-object/variable-copy-reference@2x.png b/1-js/04-object-basics/01-object/variable-copy-reference@2x.png
new file mode 100644
index 00000000..a64238a5
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-copy-reference@2x.png differ
diff --git a/1-js/04-object-basics/01-object/variable-copy-value.png b/1-js/04-object-basics/01-object/variable-copy-value.png
new file mode 100644
index 00000000..e21af099
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-copy-value.png differ
diff --git a/1-js/04-object-basics/01-object/variable-copy-value@2x.png b/1-js/04-object-basics/01-object/variable-copy-value@2x.png
new file mode 100644
index 00000000..2f0b2f47
Binary files /dev/null and b/1-js/04-object-basics/01-object/variable-copy-value@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/article.md b/1-js/04-object-basics/02-garbage-collection/article.md
new file mode 100644
index 00000000..d8a6eee8
--- /dev/null
+++ b/1-js/04-object-basics/02-garbage-collection/article.md
@@ -0,0 +1,216 @@
+# Garbage collection
+
+Memory management in JavaScript is performed automatically and invisibly to us. We create primitives, objects, functions... All that takes memory.
+
+What happens when something is not needed any more? How JavaScript engine discovers that and cleans up?
+
+[cut]
+
+## Reachability
+
+The main concept of memory management in JavaScript is *reachability*.
+
+Simply put, "reachable" values are those that are accessible or useable somehow. They are guaranteed to be stored in memory.
+
+1. There's a base set of inherently reachable values, that cannot be deleted for obvious reasons.
+
+    For instance:
+
+    - Local variables and parameters of the current function.
+    - Variables and parameters for other functions on the current chain of nested calls.
+    - Global variables.
+    - (there are some other, internal ones as well)
+
+    These values are called *roots*.
+
+2. Any other value is considered reachable if it's reachable from a root by a reference of by a chain of references.
+
+    For instance, if there's an object in a local variable, and that object has a property referencing another object, that object is considered reachable. And those that it references -- are also reachable. Detailed examples to follow.
+
+There's a background process in the JavaScript engine that is called [garbage collector](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). It monitors all objects and removes those that became unreachable.
+
+## A simple example
+
+Here's the simplest example:
+
+```js
+// user has a reference to the object
+let user = {
+  name: "John"
+};
+```
+
+![](memory-user-john.png)
+
+Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object.
+
+If the value of `user` is overwritten, the reference is lost:
+
+```js
+user = null;
+```
+
+![](memory-user-john-lost.png)
+
+Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory.
+
+## Two references
+
+Now let's imagine we copied the reference from `user` to `admin`:
+
+```js
+// user has a reference to the object
+let user = {
+  name: "John"
+};
+
+*!*
+let admin = user;
+*/!*
+```
+
+![](memory-user-john-admin.png)
+
+Now if we do the same:
+```js
+user = null;
+```
+
+...Then the object is still reachable via `admin` global variable, so it's in memory. If we overwrite `admin` too, then it can be removed.
+
+## Interlinked objects
+
+Now a more complex example. The family:
+
+```js
+function marry(man, woman) {
+  woman.husband = man;
+  man.wife = woman;
+
+  return {
+    father: man,
+    mother: woman
+  }
+}
+
+let family = marry({
+  name: "John"
+}, {
+  name: "Ann"
+});
+```
+
+Function `marry` "marries" two objects by giving them references to each other and returns a new object that contains them both.
+
+The resulting memory structure:
+
+![](family.png)
+
+As of now, all objects are reachable.
+
+Now let's remove two references:
+
+```js
+delete family.father;
+delete family.mother.husband;
+```
+
+![](family-delete-refs.png)
+
+It's not enough to delete only one of these two references, because all objects would still be reachable.
+
+But if we delete both, then we can see that John has no incoming reference any more:
+
+![](family-no-father.png)
+
+Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible.
+
+After garbage collection:
+
+![](family-no-father-2.png)
+
+## Unreachable island
+
+It is possible that the whole island of interlinked objects becomes unreachable and is removed from the memory.
+
+The source object is the same as above. Then:
+
+```js
+family = null;
+```
+
+The in-memory picture becomes:
+
+![](family-no-family.png)
+
+This example demonstrates how important the concept of reachability is.
+
+It's obvious that John and Ann are still linked, both have incoming references. But that's not enough.
+
+The former `"family"` object has been unlinked from the root, there's no reference to it any more, so the whole island becomes unreachable and will be removed.
+
+## Internal algorithms
+
+The basic garbage collection algorithm is called "mark-and-sweep".
+
+Regularly the following "garbage collection" steps are performed:
+
+- The garbage collector takes roots and "marks" (remembers) them.
+- Then it visits and "marks" all references from them.
+- Then it visits marked objects and marks *their* references. All visited objects are remembered, not to visit the same object twice in the future.
+- ...And so on until there are unvisited references (reachable from the roots).
+- All objects except marked ones are removed.
+
+For instance, let our object structure look like this:
+
+![](garbage-collection-1.png)
+
+We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it.
+
+The first step marks the roots:
+
+![](garbage-collection-2.png)
+
+Then their references are marked:
+
+![](garbage-collection-3.png)
+
+...And their refences, while possible:
+
+![](garbage-collection-4.png)
+
+Now the objects that could not be visited in the process are considered unreachable and will be removed:
+
+![](garbage-collection-5.png)
+
+That's the concept how garbage collection works.
+
+JavaScript engines apply many optimizations to make it run faster and not affect the execution.
+
+Some of the optimizations:
+
+- **Generational collection** -- objects are split into two sets: "new ones" and "old ones". Many objects appear, then do their job and die fast, so they can be cleaned up aggressively. Those that survive for long enough, become "old".
+- **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine tries to split the job into pieces. Then pieces are executed one at a time. That requires some extra bookkeeping between them to track changes.
+- **Idle-time collection** -- the garbage collector tries to run only while the CPU is idle, to reduce the possible effect on the execution.
+
+There are other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques.
+
+And -- what's even more important, things change as engines develop, so going really deep "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below.
+
+## Summary
+
+The main things to know:
+
+- Garbage collection is performed automatically. We cannot force or prevent it.
+- Objects are retained in memory while they are reachable.
+- Being referenced is not the same as being reachable (from a root): a pack of interlinked objects can become unreachable as a whole.
+
+Modern engines implement advanced algorithms of garbage collection.
+
+A general book "The Garbage Collection Handbook: The Art of Automatic Memory Management" (R. Jones at al) covers some of them.
+
+If you are familiar with low-level programming, the more detailed information about V8 garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection). 
+
+[V8 blog](http://v8project.blogspot.com/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects. 
+
+In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.  
diff --git a/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png
new file mode 100644
index 00000000..5c10f0e4
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png b/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png
new file mode 100644
index 00000000..24d29630
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-family.png b/1-js/04-object-basics/02-garbage-collection/family-no-family.png
new file mode 100644
index 00000000..a4ce30a3
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-family.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png
new file mode 100644
index 00000000..0d994983
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png b/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png
new file mode 100644
index 00000000..e24dba5b
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png
new file mode 100644
index 00000000..a6c4ee36
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father.png b/1-js/04-object-basics/02-garbage-collection/family-no-father.png
new file mode 100644
index 00000000..df14624b
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-father.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png
new file mode 100644
index 00000000..5ab4b379
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family.png b/1-js/04-object-basics/02-garbage-collection/family.png
new file mode 100644
index 00000000..dbbc01d2
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/family@2x.png b/1-js/04-object-basics/02-garbage-collection/family@2x.png
new file mode 100644
index 00000000..64b4619b
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/family@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png
new file mode 100644
index 00000000..42319177
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png
new file mode 100644
index 00000000..223ea32a
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png
new file mode 100644
index 00000000..da63d396
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png
new file mode 100644
index 00000000..1f614e3e
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png
new file mode 100644
index 00000000..e77144c1
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png
new file mode 100644
index 00000000..37e349b6
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png
new file mode 100644
index 00000000..110e0d9c
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png
new file mode 100644
index 00000000..c09d75f9
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png
new file mode 100644
index 00000000..bc4ea967
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png
new file mode 100644
index 00000000..0ab697e6
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection.png
new file mode 100644
index 00000000..013d0a48
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection@2x.png
new file mode 100644
index 00000000..681f29e4
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/garbage-collection@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png
new file mode 100644
index 00000000..29c4fcbe
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png
new file mode 100644
index 00000000..2f80f19a
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png
new file mode 100644
index 00000000..cdc1d490
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png
new file mode 100644
index 00000000..d58afdb5
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john.png
new file mode 100644
index 00000000..3ba5730d
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john.png differ
diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png
new file mode 100644
index 00000000..5aa81bb0
Binary files /dev/null and b/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png differ
diff --git a/1-js/04-object-basics/03-symbol/article.md b/1-js/04-object-basics/03-symbol/article.md
new file mode 100644
index 00000000..4509b60b
--- /dev/null
+++ b/1-js/04-object-basics/03-symbol/article.md
@@ -0,0 +1,236 @@
+
+# Symbol type
+
+By specification, object property keys may be either of string type, or of symbol type. Not numbers, not booleans, only strings or symbols, these two types.
+
+Till now we only saw strings. Now let's see the advantages that symbols can give us.
+
+[cut]
+
+## Symbols
+
+"Symbol" value represents an unique identifier with a given name.
+
+A value of this type can be created using `Symbol(name)`:
+
+```js
+// id is a symbol with the name "id"
+let id = Symbol("id");
+```
+
+Symbols are guaranteed to be unique. Even if we create many symbols with the same name, they are different values.
+
+For instance, here are two symbols with the same name -- they are not equal:
+
+```js run
+let id1 = Symbol("id");
+let id2 = Symbol("id");
+
+*!*
+alert(id1 == id2); // false
+*/!*
+```
+
+If you are familiar with Ruby or another language that also has some sort of "symbols" -- please don't be misguided. JavaScript symbols are different.
+
+
+## "Hidden" properties
+
+Symbols allow to create "hidden" properties of an object, that no other part of code can occasionally access or overwrite.
+
+For instance, if we want to store an "identifier" for the object `user`, we can create a symbol with the name `id` for it:
+
+```js run
+let user = { name: "John" };
+let id = Symbol("id");
+
+user[id] = "ID Value";
+alert( user[id] ); // we can access the data using the symbol as the key
+```
+
+Now let's imagine that another script wants to have his own "id" property inside `user`, for his own purposes. That may be another JavaScript library, so the scripts are completely unaware for each other.
+
+No problem. It can create its own `Symbol("id")`.
+
+Their script:
+
+```js
+// ...
+let id = Symbol("id");
+
+user[id] = "Their id value";
+```
+
+There will be no conflict, because symbols are always different, even if they have the same name.
+
+Please note that if we used a string `"id"` instead of a symbol for the same purpose, then there *would* be a conflict:
+
+```js run
+let user = { name: "John" };
+
+// our script uses "id" property
+user.id = "ID Value";
+
+// ...if later another script the uses "id" for its purposes...
+
+user.id = "Their id value"
+// boom! overwritten! it did not mean to harm the colleague, but did it!
+```
+
+### Symbols in a literal
+
+If we want to use a symbol in an object literal, we need square brackets.
+
+Like this:
+
+```js
+let id = Symbol("id");
+
+let user = {
+  name: "John",
+*!*
+  [id]: 123 // not just "id: 123"
+*/!*
+};
+```
+That's because we need the value from the variable `id` as the key, not the string "id".
+
+### Symbols skipped by for..in
+
+Symbolic properties do not participate in `for..in` loop.
+
+For instance:
+
+```js run
+let id = Symbol("id");
+let user = {
+  name: "John",
+  age: 30,
+  [id]: 123
+};
+
+*!*
+for(let key in user) alert(key); // name, age (no symbols)
+*/!*
+
+// the direct access by the symbol works
+alert( "Direct: " + user[id] );
+```
+
+That's a part of the general "hiding" concept. If another script or a library loops over our object, it won't unexpectedly access a symbolic property.
+
+In contrast, [Object.assign](mdn:js/Object/assign) copies both string and symbol properties:
+
+```js run
+let id = Symbol("id");
+let user = {
+  [id]: 123
+};
+
+let clone = Object.assign({}, user);
+
+alert( clone[id] ); // 123
+```
+
+There's no paradox here. That's by design. The idea is that when we clone an object or merge objects, we usually want symbolic properties (like `id`) to be copied as well.
+
+````smart header="Property keys of other types are coerced to strings"
+We can only use strings or symbols as keys in objects. Other types are coerced to strings.
+
+For instance:
+
+```js run
+let obj = {
+  0: "test" // same as "0": "test"
+}
+
+// both alerts access the same property (the number 0 is converted to string "0")
+alert( obj["0"] ); // test
+alert( obj[0] ); // test (same property)
+```
+````
+
+## Global symbols
+
+Normally, all symbols are different. But sometimes we want same-named symbols to be the same.
+
+For instance, different parts of our application want to access symbol `"id"` meaning exactly the same property.
+
+To achieve that, there exists a *global symbol registry*. We can create symbols in it and and access them later, and it guarantees that repeated accesses by the same name return exactly the same symbol.
+
+In order to create or read a symbol in the registry, use `Symbol.for(name)`.
+
+For instance:
+
+```js run
+// read from the global registry
+let name = Symbol.for("name"); // if the symbol did not exist, it is created
+
+// read it again
+let nameAgain = Symbol.for("name");
+
+// the same symbol
+alert( name === nameAgain ); // true
+```
+
+Symbols inside the registry are called *global symbols*. If we want an application-wide symbol, accessible everywhere in the code -- that's what they are for.
+
+```smart header="That sounds like Ruby"
+In some programming languages, like Ruby, there's a single symbol per name.
+
+In JavaScript, as we can see, that's right for global symbols.
+```
+
+### Symbol.keyFor
+
+For global symbols, not only `Symbol.for(name)` returns a symbol by name, but there's a reverse call: `Symbol.keyFor(sym)`, that does the reverse: returns a name by a global symbol.
+
+For instance:
+
+```js run
+let sym = Symbol.for("name");
+let sym2 = Symbol.for("id");
+
+// get name from symbol
+alert( Symbol.keyFor(sym) ); // name
+alert( Symbol.keyFor(sym2) ); // id
+```
+
+The `Symbol.keyFor` internally uses the global symbol registry to look up the name for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and return `undefined`.
+
+For instance:
+
+```js run
+alert( Symbol.keyFor(Symbol.for("name")) ); // name, global symbol
+
+alert( Symbol.keyFor(Symbol("name2")) ); // undefined, non-global symbol
+```
+
+For non-global symbols, the name is only used for debugging purposes.
+
+## System symbols
+
+There exist many "system" symbols that JavaScript uses internally, and we can use them to fine-tune various aspects of our objects.
+
+They are listed in the specification in the [Well-known symbols](https://tc39.github.io/ecma262/#sec-well-known-symbols) table:
+
+- `Symbol.hasInstance`
+- `Symbol.isConcatSpreadable`
+- `Symbol.iterator`
+- `Symbol.toPrimitive`
+- ...and so on.
+
+For instance, `Symbol.toPrimitive` allows to describe object to primitive conversion. We'll see its use very soon.
+
+Other symbols will also become familiar when we study the corresponding language features.
+
+## Summary
+
+- Symbol is a primitive type for unique identifiers.
+- Symbols are created with `Symbol(name)` call.
+- Symbols are useful if we want to create a field that only those who know the symbol can access.
+- Symbols don't appear in `for..in` loops.
+- Symbols created with `Symbol(name)` are always different, even if they have the same name. If we want same-named symbols to be equal, then we should use the global registry: `Symbol.for(name)` returns (creates if needed) a global symbol with the given name. Multiple calls return the same symbol.
+- There are system symbols used by JavaScript and accessible as `Symbol.*`. We can use them to alter some built-in behaviors.
+
+Technically, symbols are not 100% hidden. There is a build-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. So they are not really hidden. But most libraries, built-in methods and syntax constructs adhere to a common agreement that they are. And the one who explicitly calls the aforementioned methods probably understands well what he's doing.
diff --git a/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md
new file mode 100644
index 00000000..e2e87de7
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md
@@ -0,0 +1,43 @@
+**Error**!
+
+Try it:
+
+```js run
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}
+
+(user.go)() // error!
+```
+
+The error message in most browsers does not give understanding what went wrong.
+
+**The error appears because a semicolon is missing after `user = {...}`.**
+
+JavaScript does not assume a semicolon before a bracket `(user.go)()`, so it reads the code like:
+
+```js no-beautify
+let user = { go:... }(user.go)()
+```
+
+Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error. 
+
+If we insert the semicolon, all is fine:
+
+```js run
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}*!*;*/!*
+
+(user.go)() // John
+```
+
+Please note that brackets around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters.
+
+
+
+
+
+
diff --git a/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md b/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md
new file mode 100644
index 00000000..bb4d5b86
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md
@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# Syntax check
+
+What is the resule of this code?
+
+
+```js no-beautify
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}
+
+(user.go)()
+```
+
+P.S. There's a pitfall :)
\ No newline at end of file
diff --git a/1-js/04-object-basics/04-object-methods/3-why-this/solution.md b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md
new file mode 100644
index 00000000..89bc0d72
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md
@@ -0,0 +1,22 @@
+
+Here's the explanations.
+
+1. That's a regular object method call.
+
+2. The same, brackets do not change the order of operations here, the dot is first anyway.
+
+3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines:
+
+    ```js no-beautify
+    f = obj.go; // calculate the expression
+    f();        // call what we have
+    ```
+
+    Here `f()` is executed as a function, without `this`.
+
+4. The similar thing as `(3)`, to the left of the dot `.` we have an expression.
+
+To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type.  
+
+Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`.
+
diff --git a/1-js/04-object-basics/04-object-methods/3-why-this/task.md b/1-js/04-object-basics/04-object-methods/3-why-this/task.md
new file mode 100644
index 00000000..2b6e8cd1
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/3-why-this/task.md
@@ -0,0 +1,26 @@
+importance: 3
+
+---
+
+# Explain the value of "this"
+
+In the code above we intend to call `user.go()` method 4 times in a row.
+
+But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why?
+
+```js run no-beautify
+let obj, method;
+
+obj = {
+  go: function() { alert(this); }
+};
+
+obj.go();               // (1) [object Object]
+
+(obj.go)();             // (2) [object Object]
+
+(method = obj.go)();    // (3) undefined
+
+(obj.go || obj.stop)(); // (4) undefined
+```
+
diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md
new file mode 100644
index 00000000..f5773ec2
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md
@@ -0,0 +1,46 @@
+**Answer: an error.**
+
+Try it:
+```js run
+function makeUser() {
+  return {
+    name: "John",
+    ref: this
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref.name ); // Error: Cannot read property 'name' of undefined
+```
+
+That's because rules that set `this` do not look at object literals. 
+
+Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method.
+
+And the object literal itself has no effect on `this`. The value of `this` is one for the whole function, code blocks and object literals do not affect it.
+
+So `ref: this` actually takes current `this` of the function.
+
+Here's the opposite case:
+
+```js run
+function makeUser() {
+  return {
+    name: "John",
+*!*
+    ref() {
+      return this;
+    }
+*/!*
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref().name ); // John
+```
+
+Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`.
+
+
diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md
new file mode 100644
index 00000000..4784b082
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Using "this" in object literal
+
+Here the function `makeUser` returns an object.
+
+What is the result of accessing its `ref`? Why?
+
+```js
+function makeUser() {
+  return {
+    name: "John",
+    ref: this
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref.name ); // What's the result?
+```
+
diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js
new file mode 100644
index 00000000..9ccbe43a
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js
@@ -0,0 +1,14 @@
+let calculator = {
+  sum() {
+    return this.a + this.b;
+  },
+
+  mul() {
+    return this.a * this.b;
+  },
+
+  read() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  }
+};
\ No newline at end of file
diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js
new file mode 100644
index 00000000..1f71eda4
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js
@@ -0,0 +1,28 @@
+
+
+describe("calculator", function() {
+  
+  context("when 2 and 3 entered", function() {
+    beforeEach(function() {
+      sinon.stub(window, "prompt");
+
+      prompt.onCall(0).returns("2");
+      prompt.onCall(1).returns("3");
+
+      calculator.read();
+    });
+
+    afterEach(function() {
+      prompt.restore();
+    });
+
+    it("the sum is 5", function() {
+      assert.equal(calculator.sum(), 5);
+    });
+
+    it("the multiplication product is 6", function() {
+      assert.equal(calculator.mul(), 6);
+    });
+  });
+
+});
diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/solution.md b/1-js/04-object-basics/04-object-methods/7-calculator/solution.md
new file mode 100644
index 00000000..22c4bf18
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/7-calculator/solution.md
@@ -0,0 +1,23 @@
+
+
+```js run demo
+let calculator = {
+  sum() {
+    return this.a + this.b;
+  },
+
+  mul() {
+    return this.a * this.b;
+  },
+
+  read() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  }
+};
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+
diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md
new file mode 100644
index 00000000..aa22608e
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/7-calculator/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Create a calculator
+
+Create an object `calculator` with three methods:
+
+- `read()` prompts for two values and saves them as object properties.
+- `sum()` returns the sum of saved values.
+- `mul()` multiplies saved values and returns the result.
+
+```js
+let calculator = {
+  // ... your code ...
+};
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+
+[demo]
+
diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js
new file mode 100644
index 00000000..e98fe641
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js
@@ -0,0 +1,15 @@
+
+let ladder = {
+  step: 0,
+  up: function() { 
+    this.step++;
+    return this;
+  },
+  down: function() { 
+    this.step--;
+    return this;
+  },
+  showStep: function() { 
+    alert(this.step);
+  }
+};
\ No newline at end of file
diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js
new file mode 100644
index 00000000..a2b17fcc
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js
@@ -0,0 +1,40 @@
+
+describe('Ladder', function() {
+  before(function() {
+    window.alert = sinon.stub(window, "alert");
+  });
+  
+  beforeEach(function() {
+    ladder.step = 0;
+  });
+
+  it('up() should return this', function() {
+    assert.equal(ladder.up(), ladder);
+  });
+
+  it('down() should return this', function() {
+    assert.equal(ladder.down(), ladder);
+  });
+
+  it('showStep() should call alert', function() {
+    ladder.showStep();
+    assert(alert.called);
+  });
+
+  it('up() should increase step', function() {
+    assert.equal(ladder.up().up().step, 2);
+  });
+
+  it('down() should decrease step', function() {
+    assert.equal(ladder.down().step, -1);
+  });
+
+  it('down().up().up().up() ', function() {
+    assert.equal(ladder.down().up().up().up().step, 2);
+  });
+  
+  after(function() {
+    ladder.step = 0;
+    alert.restore();
+  });
+});
diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md
new file mode 100644
index 00000000..41edd723
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md
@@ -0,0 +1,40 @@
+The solution is to return the object itself from every call.
+
+```js run
+let ladder = {
+  step: 0,
+  up() {
+    this.step++;
+*!*
+    return this;
+*/!*
+  },
+  down() {
+    this.step--;
+*!*
+    return this;
+*/!*
+  },
+  showStep() {
+    alert( this.step );
+*!*
+    return this;
+*/!*
+  }
+}
+
+ladder.up().up().down().up().down().showStep(); // 1
+```
+
+We also can write a single call per line. For long chains it's more readable:
+
+```js 
+ladder
+  .up()
+  .up()
+  .down()
+  .up()
+  .down()
+  .showStep(); // 1
+```
+
diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
new file mode 100644
index 00000000..a989846f
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
@@ -0,0 +1,39 @@
+importance: 2
+
+---
+
+# Chaining
+
+There's a `ladder` object that allows to go up and down:
+
+```js
+let ladder = {
+  step: 0,
+  up() { 
+    this.step++;
+  },
+  down() { 
+    this.step--;
+  },
+  showStep: function() { // shows the current step
+    alert( this.step );
+  }
+};
+```
+
+Now, if we need to make several calls in sequence, can do it like this:
+
+```js
+ladder.up();
+ladder.up();
+ladder.down();
+ladder.showStep(); // 1
+```
+
+Modify the code of `up` and `down` to make the calls chainable, like this:
+
+```js
+ladder.up().up().down().showStep(); // 1
+```
+
+Such approach is widely used across JavaScript libraries.
diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md
new file mode 100644
index 00000000..44a867e2
--- /dev/null
+++ b/1-js/04-object-basics/04-object-methods/article.md
@@ -0,0 +1,355 @@
+# Object methods, "this"
+
+Objects are usually created to represent entities of the real world, like users, orders and so on:
+
+```js
+let user = {
+  name: "John",
+  age: 30
+};
+```
+
+And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc.
+
+Actions are represented in JavaScript by functions in properties.
+
+[cut]
+
+## Method examples
+
+For the start, let's teach the `user` to say hello:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+*!*
+user.sayHi = function() {
+  alert("Hello!");
+};
+*/!*
+
+user.sayHi(); // Hello!
+```
+
+Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object.
+
+Then we can call it. The user now can speak!
+
+A function that is the property of an object is called its *method*.
+
+So, here we've got a method `sayHi` of the object `user`.
+
+Of course, we could use a pre-declared function as a method, like this:
+
+```js run
+let user = {
+  // ...
+};
+
+*!*
+// first, declare
+function sayHi() {
+  alert("Hello!");
+};
+
+// then add as a method
+user.sayHi = sayHi;
+*/!*
+
+user.sayHi(); // Hello!
+```
+
+```smart header="Object-oriented programming"
+When we write our code using objects to represent entities, that's called an [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP".
+
+OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E.Gamma, R.Helm, R.Johnson, J.Vissides or "Object-Oriented Analysis and Design with Applications" by G.Booch, and more. We'll scratch the surface of that topic later in the chapter <info:object-oriented-programming>.
+```
+### Method shorthand
+
+There exists a shorter syntax for methods in an object literal:
+
+```js
+// these objects do the same
+
+let user = {
+  sayHi: function() {
+    alert("Hello");
+  }
+};
+
+// method shorthand looks better, right?
+let user = {
+*!*
+  sayHi() { // same as "sayHi: function()"
+*/!*
+    alert("Hello");
+  }
+};
+```
+
+As demonstrated, we can omit `"function"` and just write `sayHi()`.
+
+To say the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred.
+
+## "this" in methods
+
+It's common that an object method needs to access the information stored in the object to do its job.
+
+For instance, the code inside `user.sayHi()` may need the name of the `user`.
+
+**To access the object, a method can use the `this` keyword.**
+
+The value of `this` is the object "before dot", the one used to call the method.
+
+For instance:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+*!*
+    alert(this.name);
+*/!*
+  }
+
+};
+
+user.sayHi(); // John
+```
+
+Here during the execution of `user.sayHi()`, the value of `this` will be `user`.
+
+Technically, it's also possible to access the object without `this`, by referencing it via the outer variable:
+
+```js
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+*!*
+    alert(user.name); // "user" instead of "this"
+*/!*
+  }
+
+};
+```
+
+...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object.
+
+That's demonstrated below:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+*!*
+    alert( user.name ); // leads to an error
+*/!*
+  }
+
+};
+
+
+let admin = user;
+user = null; // overwrite to make things obvious
+
+admin.sayHi(); // Whoops! inside sayHi(), the old name is used! error!
+```
+
+If we used `this.name` instead of `user.name` inside the `alert`, then the code would work.
+
+## "this" is not bound
+
+In JavaScript, "this" keyword behaves unlike most other programming languages. First, it can be used in any function.
+
+There's no syntax error in the code like that:
+
+```js
+function sayHi() {
+  alert( *!*this*/!*.name );
+}
+```
+
+The value of `this` is evaluated during the run-time. And it can be anything.
+
+For instance, the same function may have different "this" when called from different objects:
+
+```js run
+let user = { name: "John" };
+let admin = { name: "Admin" };
+
+function sayHi() {
+  alert( this.name );
+}
+
+*!*
+// use the same functions in two objects
+user.f = sayHi;
+admin.f = sayHi;
+*/!*
+
+// these calls have different this
+// "this" inside the function is the object "before the dot"
+user.f(); // John  (this == user)
+admin.f(); // Admin  (this == admin)
+
+admin['f'](); // Admin (dot or square brackets access the method – doesn't matter)
+```
+
+Actually, we can call the function without an object at all:
+
+```js run
+function sayHi() {
+  alert(this);
+}
+
+sayHi(); // undefined
+```
+
+In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
+
+In non-strict mode (if one forgets `use strict`) the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later). This is a historical behavior that `"use strict"` fixes.
+
+Please note that usually a call of a function that uses `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
+
+```smart header="The consequences of unbound `this`"
+If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object.
+
+In JavaScript `this` is "free", its value is evaluated at call-time and does not depend on where the method was declared, but rather on what's the object "before the dot".
+
+The concept of run-time evaluated `this` has both pluses and minuses. On the one hand, a function can be reused for different objects. On the the other hand, greater flexibility opens a place for mistakes.
+
+Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and evade problems.
+```
+
+## Internals: Reference Type
+
+```warn header="In-depth language feature"
+This section covers an advanced topic, to understand certain edge-cases better.
+
+If you want to go on faster, it can be skipped or postponed.
+```
+
+An intricate method call can lose `this`, for instance:
+
+```js run
+let user = {
+  name: "John",
+  hi() { alert(this.name); },
+  bye() { alert("Bye"); }
+};
+
+user.hi(); // John (the simple call works)
+
+*!*
+// now let's call user.hi or user.bye depending on the name
+(user.name == "John" ? user.hi : user.bye)(); // Error!
+*/!*
+```
+
+On the last line there is a ternary operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`.
+
+The method is immediately called with parentheses `()`. But it doesn't work right!
+
+You can see that the call results in an error, cause the value of `"this"` inside the call becomes `undefined`.
+
+This works (object dot method):
+```js
+user.hi();
+```
+
+This doesn't (evaluated method):
+```js
+(user.name == "John" ? user.hi : user.bye)(); // Error!
+```
+
+Why? If we want to understand why it happens -- let's get under the hood of how `obj.method()` call works.
+
+Looking closely, we may notice two operations in `obj.method()` statement:
+
+1. First, the dot `'.'` retrieves the property `obj.method`.
+2. Then parentheses `()` execute it.
+
+So, how the information about `this` gets passed from the first part to the second one?
+
+If we put these operations on separate lines, then `this` will be lost for sure:
+
+```js run
+let user = {
+  name: "John",
+  hi() { alert(this.name); }
+}
+
+*!*
+// split getting and calling the method in two lines
+let hi = user.hi;
+hi(); // Error, because this is undefined
+*/!*
+```
+
+Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`.
+
+**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).**
+
+The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language.
+
+The value of Reference Type is a three-value combination `(base, name, strict)`, where:
+
+- `base` is the object.
+- `name` is the property.
+- `strict` is true if `use strict` is in effect.
+
+The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is:
+
+```js
+// Reference Type value
+(user, "hi", true)
+```
+
+When parentheses `()` are called on the Reference Type, they receive the full information about the object and it's method, and can set the right `this` (`=user` in this case).
+
+Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "looses" `this`.
+
+So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj[method]()` syntax (they do the same here).
+
+## Arrow functions have no "this"
+
+Arrow functions are special: they don't have their "own" `this`. If we reference `this` from such a function, it's taken from the outer "normal" function.
+
+For instance, here `arrow()` uses `this` from the outer `user.sayHi()` method:
+
+```js run
+let user = {
+  firstName: "Ilya",
+  sayHi() {
+    let arrow = () => alert(this.firstName);
+    arrow();
+  }
+};
+
+user.sayHi(); // Ilya
+```
+
+That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter <info:arrow-functions> we'll go more deeply into arrow functions.
+
+
+## Summary
+
+- Functions that are stored in object properties are called "methods".
+- Methods allow objects to "act" like `object.doSomething()`.
+- Methods can reference the object as `this`.
+
+The value of `this` is defined at run-time.
+- When a function is declared, it may use `this`, but that `this` has no value until the function is called.
+- That function can be copied between objects.
+- When a function is called in the "method" syntax: `object.method()`, the value of `this` during the call is `object`.
+
+Please note that arrow functions are special: they have no `this`. When `this` is accessed inside an arrow function -- it is taken from outside.
diff --git a/1-js/04-object-basics/05-object-toprimitive/article.md b/1-js/04-object-basics/05-object-toprimitive/article.md
new file mode 100644
index 00000000..d39fe523
--- /dev/null
+++ b/1-js/04-object-basics/05-object-toprimitive/article.md
@@ -0,0 +1,238 @@
+
+# Object to primitive conversion
+
+What happens when objects are added `obj1 + obj2`, substracted `obj1 - obj2` or printed using `alert(obj)`?
+
+There are special methods in objects that do the conversion.
+
+In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives. But we left a gap for objects. Now, as we know about methods and symbols it becomes possible to close it.
+
+[cut]
+
+For objects, there's no to-boolean conversion, because all objects are `true` in a boolean context. So there are only string and numeric conversions.
+
+The numeric conversion happens when we substract objects or apply mathematical functions. For instance, `Date` objects (to be covered in the chapter <info:date>) can be substracted, and the result of `date1 - date2` is the time difference between two dates.
+
+As for the string conversion -- it usually happens when we output an object like `alert(obj)` and in similar contexts.
+
+## ToPrimitive
+
+When an object is used in the context where a primitive is required, for instance, in an `alert` or mathematical operations, it's converted to a primitive value using the `ToPrimitive` algorithm ([specification](https://tc39.github.io/ecma262/#sec-toprimitive)).
+
+That algorithm allows to customize the conversion using in a special object method.
+
+Depending on the context, the conversion has a so-called "hint".
+
+There are 3 variants:
+
+`"string"`
+: When an operation expects a string, for object-to-string conversions, like `alert`:
+
+    ```js
+    // output
+    alert(obj);
+
+    // using object as a property key
+    anotherObj[obj] = 123;
+    ```
+
+`"number"`
+: When an operation expects a number, for object-to-number conversions, like maths:
+
+    ```js
+    // explicit conversion
+    let num = Number(obj);
+
+    // maths (except binary plus)
+    let n = +obj; // unary plus
+    let delta = date1 - date2;
+
+    // less/greater comparison
+    let greater = user1 > user2;
+    ```
+
+`"default"`
+: Occurs in rare cases when the operator is "not sure" what type to expect.
+
+    For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. Or when an object is compared using `==` with a string, number or a symbol.
+
+    ```js
+    // binary plus
+    let total = car1 + car2;
+
+    // obj == string/number/symbol
+    if (user == 1) { ... };
+    ```
+
+    The greater/less operator `<>` can work with both strings and numbers too. Still, it uses "number" hint, not "default". That's for historical reasons.
+
+    In practice, all built-in objects except for one case (`Date` object, we'll learn it later) implement `"default"` conversion the same way as `"number"`. And probably we should do the same.
+
+Please note -- there are only three hints. That simple. There is no "boolean" hint (all objects are `true` in boolean context) or anything else. And if we treat `"default"` and `"number"` the same, like most built-ins do, then there are only two conversions.
+
+**To do the conversion, JavaScript tries to find and call three object methods:**
+
+1. Call `obj[Symbol.toPrimitive](hint)` if the method exists,
+2. Otherwise if hint is `"string"`
+    - try `obj.toString()` and `obj.valueOf()`, whatever exists.
+3. Otherwise if hint is `"number"` or `"default"`
+    - try `obj.valueOf()` and `obj.toString()`, whatever exists.
+
+## Symbol.toPrimitive
+
+Let's start from the first method. There's a built-in symbol named `Symbol.toPrimitive` that should be used to name the conversion method, like this:
+
+```js
+obj[Symbol.toPrimitive] = function(hint) {
+  // return a primitive value
+  // hint = one of "string", "number", "default"
+}
+```
+
+For instance, here `user` object implements it:
+
+```js run
+let user = {
+  name: "John",
+  money: 1000,
+
+  [Symbol.toPrimitive](hint) {
+    alert(`hint: ${hint}`);
+    return hint == "string" ? `{name: "${this.name}"}` : this.money;
+  }
+};
+
+// conversions demo:
+alert(user); // hint: string -> {name: "John"}
+alert(+user); // hint: number -> 1000
+alert(user + 500); // hint: default -> 1500
+```
+
+As we can see from the code, `user` becomes a self-descriptive string or a money amount depending on the conversion. The single method `user[Symbol.toPrimitive]` handles all conversion cases.
+
+
+## toString/valueOf
+
+Methods `toString` and `valueOf` come from ancient times. They are not symbols (symbols did not exist that long ago), but rather "regular" string-named methods. They provide an alternative "old-style" way to implement the conversion.
+
+If there's no `Symbol.toPrimitive` then JavaScript tries to find them and try in the order:
+
+- `toString -> valueOf` for "string" hint.
+- `valueOf -> toString` otherwise.
+
+For instance, here `user` does the same as above using a combination of `toString` and `valueOf`:
+
+```js run
+let user = {
+  name: "John",
+  money: 1000,
+
+  // for hint="string"
+  toString() {
+    return `{name: "${this.name}"}`;
+  },
+
+  // for hint="number" or "default"
+  valueOf() {
+    return this.money;
+  }
+
+};
+
+alert(user); // toString -> {name: "John"}
+alert(+user); // valueOf -> 1000
+alert(user + 500); // valueOf -> 1500
+```
+
+Often we want a single "catch-all" place to handle all primitive conversions. In this case we can implement `toString` only, like this:
+
+```js run
+let user = {
+  name: "John",
+
+  toString() {
+    return this.name;
+  }
+};
+
+alert(user); // toString -> John
+alert(user + 500); // toString -> John500
+```
+
+In the absense of `Symbol.toPrimitive` and `valueOf`, `toString` will handle all primitive conversions.
+
+
+## ToPrimitive and ToString/ToNumber
+
+The important thing to know about all primitive-conversion methods is that they not necessarily return the "hinted" primitive.
+
+There is no control whether `toString()` returns exactly a string, or whether `Symbol.toPrimitive` method returns a number for a hint "number".
+
+**The only mandatory thing: these methods must return a primitive.**
+
+An operation that initiated the conversion gets that primitive, and then continues to work with it, applying further conversions if necessary.
+
+For instance:
+
+- Mathematical operations (except binary plus) perform `ToNumber` conversion:
+
+    ```js run
+    let obj = {
+      toString() { // toString handles all conversions in the absense of other methods
+        return "2";
+      }
+    };
+
+    alert(obj * 2); // 4, ToPrimitive gives "2", then it becomes 2
+    ```
+
+- Binary plus performs checks the primitive -- if it's a string, then it does concatenation, otherwise performs `ToNumber` and works with numbers.
+
+    String example:
+    ```js run
+    let obj = {
+      toString() {
+        return "2";
+      }
+    };
+
+    alert(obj + 2); // 22 (ToPrimitive returned string => concatenation)
+    ```
+
+    Number example:
+    ```js run
+    let obj = {
+      toString() {
+        return true;
+      }
+    };
+
+    alert(obj + 2); // 3 (ToPrimitive returned boolean, not string => ToNumber)
+    ```
+
+```smart header="Historical notes"
+For historical reasons, methods `toString` or `valueOf` *should* return a primitive: if any of them returns an object, then there's no error, but the object is ignored (like if the method didn't exist).
+
+In contrast, `Symbol.toPrimitive` *must* return an primitive, otherwise there will be an error.
+```
+
+## Summary
+
+The object-to-primitive conversion is called automatically by many built-in functions and operators that expect a primitive as a value.
+
+There are 3 types (hints) of it:
+- `"string"` (for `alert` and other string conversions)
+- `"number"` (for maths)
+- `"default"` (few operators)
+
+The specification describes explicitly which operator uses which hint. There are very few operators that "don't know what to expect" and use the `"default"` hint. Usually for built-in objects `"default"` hint is handled the same way as `"number"`, so in practice the last two are often merged together.
+
+The conversion algorithm is:
+
+1. Call `obj[Symbol.toPrimitive](hint)` if the method exists,
+2. Otherwise if hint is `"string"`
+    - try `obj.toString()` and `obj.valueOf()`, whatever exists.
+3. Otherwise if hint is `"number"` or `"default"`
+    - try `obj.valueOf()` and `obj.toString()`, whatever exists.
+
+In practice, it's often enough to implement only `obj.toString()` as a "catch-all" method for all conversions that returns a "human-readable" representation of an object, for logging or debugging purposes.  
diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md
new file mode 100644
index 00000000..79a29b0d
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md
@@ -0,0 +1,14 @@
+Yes, it's possible.
+
+If a function returns an object then `new` returns it instead of `this`.
+
+So thay can, for instance, return the same externally defined object `obj`:
+
+```js run no-beautify
+let obj = {};
+
+function A() { return obj; }
+function B() { return obj; }
+
+alert( new A() == new B() ); // true
+```
diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md
new file mode 100644
index 00000000..8c1fea8e
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md
@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# Two functions – one object
+
+Is it possible to create functions `A` and `B` such as `new A()==new B()`?
+
+```js no-beautify
+function A() { ... }
+function B() { ... }
+
+let a = new A;
+let b = new B;
+
+alert( a == b ); // true
+```
+
+If it is, then provide an example of their code.
diff --git a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js
similarity index 100%
rename from 1-js/6-objects-more/3-constructor-new/2-calculator-constructor/_js.view/solution.js
rename to 1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js
diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js
new file mode 100644
index 00000000..03605392
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js
@@ -0,0 +1,25 @@
+
+describe("calculator", function() {
+  let calculator;
+  before(function() {
+    sinon.stub(window, "prompt")
+
+    prompt.onCall(0).returns("2");
+    prompt.onCall(1).returns("3");
+
+    calculator = new Calculator();
+    calculator.read();
+  });
+
+  it("when 2 and 3 are entered, the sum is 5", function() {
+    assert.equal(calculator.sum(), 5);
+  });
+
+  it("when 2 and 3 are entered, the product is 6", function() {
+    assert.equal(calculator.mul(), 6);
+  });
+
+  after(function() {
+    prompt.restore();
+  });
+});
diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md
new file mode 100644
index 00000000..e5583c5d
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md
@@ -0,0 +1,25 @@
+
+
+```js run demo
+function Calculator() {
+
+  this.read = function() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  };
+
+  this.sum = function() {
+    return this.a + this.b;
+  };
+
+  this.mul = function() {
+    return this.a * this.b;
+  };
+}
+
+let calculator = new Calculator();
+calculator.read();
+
+alert( "Sum=" + calculator.sum() );
+alert( "Mul=" + calculator.mul() );
+```
diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md
new file mode 100644
index 00000000..60e7c373
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Create new Calculator
+
+Create a constructor function `Calculator` that creates objects with 3 methods:
+
+- `read()` asks for two values using `prompt` and remembers them in object properties.
+- `sum()` returns the sum of these properties.
+- `mul()` returns the multiplication product of these properties.
+
+For instance:
+
+```js
+let calculator = new Calculator();
+calculator.read();
+
+alert( "Sum=" + calculator.sum() );
+alert( "Mul=" + calculator.mul() );
+```
+
+[demo]
diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js
new file mode 100644
index 00000000..585287c5
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js
@@ -0,0 +1,8 @@
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('How much to add?', 0);
+  };
+
+}
diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js
new file mode 100644
index 00000000..a719cf45
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js
@@ -0,0 +1,30 @@
+describe("Accumulator", function() {
+
+  beforeEach(function() {
+    sinon.stub(window, "prompt")
+  });
+
+  afterEach(function() {
+    prompt.restore();
+  });
+
+  it("initial value is the argument of the constructor", function() {
+    let accumulator = new Accumulator(1);
+
+    assert.equal(accumulator.value, 1);
+  });
+
+  it("after reading 0, the value is 1", function() {
+    let accumulator = new Accumulator(1);
+    prompt.returns("0");
+    accumulator.read();
+    assert.equal(accumulator.value, 1);
+  });
+
+  it("after reading 1, the value is 2", function() {
+    let accumulator = new Accumulator(1);
+    prompt.returns("1");
+    accumulator.read();
+    assert.equal(accumulator.value, 2);
+  });
+});
diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md
new file mode 100644
index 00000000..eb145e79
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md
@@ -0,0 +1,17 @@
+
+
+```js run demo
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('How much to add?', 0);
+  };
+
+}
+
+let accumulator = new Accumulator(1);
+accumulator.read();
+accumulator.read();
+alert(accumulator.value);
+```
diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md
new file mode 100644
index 00000000..3362b5b4
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md
@@ -0,0 +1,25 @@
+importance: 5
+
+---
+
+# Create new Accumulator
+
+Create a constructor function `Accumulator(startingValue)`.
+
+Object that it creates should:
+
+- Store the "current value" in the property `value`. The starting value is set to the argument of the constructor `startingValue`.
+- The `read()` method should use `prompt` to read a new number and add it to `value`.
+
+In other words, the `value` property is the sum of all user-entered values with the initial value  `startingValue`.
+
+Here's the demo of the code:
+
+```js
+let accumulator = new Accumulator(1); // initial value 1
+accumulator.read(); // adds the user-entered value
+accumulator.read(); // adds the user-entered value
+alert(accumulator.value); // shows the sum of these values
+```
+
+[demo]
diff --git a/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/solution.js
new file mode 100644
index 00000000..50c40e80
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/solution.js
@@ -0,0 +1,25 @@
+function Calculator() {
+
+  let methods = {
+    "-": (a, b) => a - b,
+    "+": (a, b) => a + b
+  };
+
+  this.calculate = function(str) {
+
+    let split = str.split(' '),
+      a = +split[0],
+      op = split[1],
+      b = +split[2]
+
+    if (!methods[op] || isNaN(a) || isNaN(b)) {
+      return NaN;
+    }
+
+    return methods[op](a, b);
+  }
+
+  this.addMethod = function(name, func) {
+    methods[name] = func;
+  };
+}
diff --git a/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/test.js
new file mode 100644
index 00000000..eac4f54a
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/test.js
@@ -0,0 +1,25 @@
+describe("Calculator", function() {
+  let calculator;
+
+  before(function() {
+    calculator = new Calculator;
+  });
+
+  it("calculate(12 + 34) = 46", function() {
+    assert.equal(calculator.calculate("12 + 34"), 46);
+  });
+
+  it("calculate(34 - 12) = 22", function() {
+    assert.equal(calculator.calculate("34 - 12"), 22);
+  });
+
+  it("add multiplication: calculate(2 * 3) = 6", function() {
+    calculator.addMethod("*", (a, b) => a * b);
+    assert.equal(calculator.calculate("2 * 3"), 6);
+  });
+
+  it("add power: calculate(2 ** 3) = 8", function() {
+    calculator.addMethod("**", (a, b) => a ** b);
+    assert.equal(calculator.calculate("2 ** 3"), 8);
+  });
+});
diff --git a/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/solution.md b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/solution.md
new file mode 100644
index 00000000..41178663
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/solution.md
@@ -0,0 +1,3 @@
+
+- Please note how methods are stored. They are simply added to the internal object.
+- All tests and numeric conversions are done in the `calculate` method. In future it may be extended to support more complex expressions.
diff --git a/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/task.md b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/task.md
new file mode 100644
index 00000000..1f6368c0
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/4-calculator-extendable/task.md
@@ -0,0 +1,36 @@
+importance: 5
+
+---
+
+# Create an extendable calculator
+
+Create a constructor function `Calculator` that creates "extendable" calculator objects.
+
+The task consists of two parts.
+
+1. First, implement the method `calculate(str)` that takes a string like `"1 + 2"` in the format "NUMBER operator NUMBER" (space-delimited) and returns the result. Should understand plus `+` and minus `-`.
+
+    Usage example:
+
+    ```js
+    let calc = new Calculator;
+
+    alert( calc.calculate("3 + 7") ); // 10
+    ```
+2. Then add the method `addOperator(name, func)` that teaches the calculator a new operation. It takes the operator `name` and the two-argument function `func(a,b)` that implements it.
+
+    For instance, let's add the multiplication `*`, division `/` and power `**`:
+
+    ```js
+    let powerCalc = new Calculator;
+    powerCalc.addMethod("*", (a, b) => a * b);
+    powerCalc.addMethod("/", (a, b) => a / b);
+    powerCalc.addMethod("**", (a, b) => a ** b);
+
+    let result = powerCalc.calculate("2 ** 3");
+    alert( result ); // 8
+    ```
+
+- No brackets or complex expressions in this task.
+- The numbers and the operator are delimited with exactly one space.
+- There may be error handling if you'd like to add it.
diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md
new file mode 100644
index 00000000..f2c43ab6
--- /dev/null
+++ b/1-js/04-object-basics/06-constructor-new/article.md
@@ -0,0 +1,219 @@
+# Constructor, operator "new"
+
+The regular `{...}` syntax allows to create one object. But often we need to create many similar objects.
+
+That can be done using constructor functions and the `"new"` operator.
+
+[cut]
+
+## Constructor function
+
+Constructor functions technically are regular functions. There are two conventions though:
+
+1. They are named with capital letter first.
+2. They should be executed only with `"new"` operator.
+
+For instance:
+
+```js run
+function User(name) {
+  this.name = name;
+  this.isAdmin = false;
+}
+
+*!*
+let user = new User("Jack");
+*/!*
+
+alert(user.name); // Jack
+alert(user.isAdmin); // false
+```
+
+When a function is executed as `new User(...)`, it does the following steps:
+
+1. A new empty object is created and assigned to `this`.
+2. The function executes. Usually it modifies `this`, adds new properties to it.
+3. The value of `this` is returned.
+
+In other words, `new User(...)` does something like:
+
+```js
+function User(name) {
+*!*
+  // this = {};  (implicitly)
+*/!*
+
+  // we add properties to this
+  this.name = name;
+  this.isAdmin = false;
+
+*!*
+  // return this;  (implicitly)
+*/!*
+}
+```
+
+So the result of `new User("Jack")` is the same object as:
+
+```js
+let user = {
+  name: "Jack",
+  isAdmin: false
+};
+```
+
+Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also reads well.
+
+That's the main purpose of constructors -- to implement reusable object creation code.
+
+Let's note once again -- technically, any function can be used as a constructor. That is: any function can be run with `new`, and it will execute the algorithm above. The "capital letter first" is a common agreement, to make it clear that a function is to be run with `new`.
+
+````smart header="new function() { ... }"
+If we have many lines of code all about creation of a single complex object, we can wrap them in constructor function, like this:
+
+```js
+let user = new function() {
+  this.name = "John";
+  this.isAdmin = false;
+
+  // ...other code for user creation
+  // maybe complex logic and statements
+  // local variables etc
+};
+```
+
+The constructor can't be called again, because it is not saved anywhere, just created and called. So this trick aims to encapsulate the code for a single complex object only.
+````
+
+## Dual-use constructors: new.target
+
+Inside a function, we can check whether it was called with `new` or without it, using a special `new.target` property.
+
+It is empty for ordinary runs and equals the function if called with `new`:
+
+```js run
+function User() {
+  alert(new.target);
+}
+
+User(); // undefined
+new User(); // function User { ... }
+```
+
+That can be used to allow both `new` and ordinary syntax work the same:
+
+
+```js run
+function User(name) {
+  if (!new.target) { // if you run me without new
+    return new User(name); // ...I will add new for you
+  }
+
+  this.name = name;
+}
+
+let john = User("John"); // redirects call to new User
+alert(john.name); // John
+```
+
+This approach is sometimes used in libraries to make the syntax more flexible. Probably not a good thing to use everywhere though, because it makes a bit less obvious what's going on for a person who's familiar with the internals of `User`.
+
+## Return from constructors
+
+Usually, constructors do not have a `return` statement. Their task is to write all necessary stuff into `this`, and it automatically becomes the result.
+
+But if there is a `return` statement, then the rule is simple:
+
+- If `return` is called with object, then it is returned instead of `this`.
+- If `return` is called with a primitive, it's ignored.
+
+In other words, `return` with an object returns that object, otherwise `this` is returned.
+
+For instance, here `return` overrides `this` by returning an object:
+
+```js run
+function BigUser() {
+
+  this.name = "John";
+
+  return { name: "Godzilla" };  // <-- returns an object
+}
+
+alert( new BigUser().name );  // Godzilla, got that object
+```
+
+And here's an example with an empty `return` (or we could place a primitive after it, doesn't matter):
+
+```js run
+function SmallUser() {
+
+  this.name = "John";
+
+  return; // finishes the execution, returns this
+
+  // ...
+
+}
+
+alert( new SmallUser().name );  // John
+```
+
+Most of the time constructors return nothing. Here we mention the special behavior with returning objects mainly for the sake of completeness.
+
+````smart header="Omitting brackets"
+By the way, we can omit brackets after `new`, if it has no arguments:
+
+```js
+let user = new User; // <-- no brackets
+// same as
+let user = new User();
+```
+
+Omitting brackets here is not considered a "good style", but the syntax is permitted by specification.
+````
+
+## Methods in constructor
+
+Using constuctor functions to create objects gives a great deal of flexibility. The constructor function may have parameters that define how to construct the object, what to put in it.
+
+Of course, we can add to `this` not only properties, but methods as well.
+
+For instance, `new User(name)` below creates an object with the given `name` and the method `sayHi`:
+
+```js run
+function User(name) {
+  this.name = name;
+
+  this.sayHi = function() {
+    alert( "My name is: " + this.name );
+  };
+}
+
+*!*
+let john = new User("John");
+
+john.sayHi(); // My name is: John
+*/!*
+
+/*
+john = {
+   name: "John",
+   sayHi: function() { ... }
+}
+*/
+```
+
+## Summary
+
+- Constructor functions or, shortly, constructors, are regular functions, but there's a common agreement to name them with capital letter first.
+- Constructor functions should only be called using `new`. Such call implies a creation of empty `this` at the start and returning the populated one at the end.
+
+We can use constructor functions to make multiple similar objects. 
+
+JavaScript provides constructor functions for many built-in language objects: like `Date` for dates, `Set` for sets and others that we plan to study.
+
+```smart header="Objects, we'll be back!"
+In this chapter we only cover the basics about objects. They are essential for learning more about data types and functions in the next chapters.
+
+After we learn that, in the chapter <info:object-oriented-programming> we return to objects and cover them in-depth, including inheritance and classes.
+```
diff --git a/1-js/04-object-basics/index.md b/1-js/04-object-basics/index.md
new file mode 100644
index 00000000..d2387aaf
--- /dev/null
+++ b/1-js/04-object-basics/index.md
@@ -0,0 +1 @@
+# Objects: the basics
diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md
new file mode 100644
index 00000000..a169f776
--- /dev/null
+++ b/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md
@@ -0,0 +1,31 @@
+
+Try running it:
+
+```js run
+let str = "Hello";
+
+str.test = 5; // (*)
+
+alert(str.test); 
+```
+
+There may be two kinds of result:
+1. `undefined`
+2. An error.
+
+Why? Let's replay what's happening at line `(*)`:
+
+1. When a property of `str` is accessed, a "wrapper object" is created.
+2. The operation with the property is carried out on it. So, the object gets the `test` property.
+3. The operation finishes and the "wrapper object" disappears.
+
+So, on the last line, `str` has no trace of the property. A new wrapper object for every object operation on a string.
+
+Some browsers though may decide to further limit the programmer and disallow to assign properties to primitives at all. That's why in practice we can also see errors at line `(*)`. It's a little bit farther from the specification though.
+
+**This example clearly shows that primitives are not objects.**
+
+They just can not store data. 
+
+All property/method operations are performed with the help of temporary objects.
+
diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md
new file mode 100644
index 00000000..50c781ea
--- /dev/null
+++ b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Can I add a string property?
+
+
+Consider the following code:
+
+```js
+let str = "Hello";
+
+str.test = 5;
+
+alert(str.test);
+```
+
+How do you think, will it work? What will be shown?
diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md
new file mode 100644
index 00000000..73dc10ca
--- /dev/null
+++ b/1-js/05-data-types/01-primitives-methods/article.md
@@ -0,0 +1,129 @@
+# Methods of primitives
+
+JavaScript allows to work with primitives (strings, numbers etc) as if they were objects.
+
+They also provide methods to call and such. We are going to study them soon, but first let's see how it works, because, of course, primitives are not objects (and here we plan to make it even more clear).
+
+[cut]
+
+Let's formulate the key distinction between primitives and objects.
+
+A primitive
+: Is a value of a primitive type. There are 6 primitive types: `string`, `number`, `boolean`, `symbol`, `null` and `undefined`.
+
+An object
+: Is capable of storing multiple values as properties.
+Can be created with `{}`, for instance: `{name: "John", age: 30}`. There are other kinds of objects in JavaScript, e.g. functions are objects.
+
+One of the best things about objects is that we can store a function as one of properties:
+
+```js run
+let john = {
+  name: "John",
+  sayHi: function() {
+    alert("Hi buddy!");
+  }
+};
+
+john.sayHi(); // Hi buddy!
+```
+
+So, here we've made an object `john` with the method `sayHi`.
+
+There exist many built-in objects, including those that work with dates, errors, HTML elements etc. They have different properties and methods.
+
+But features come at a price!
+
+Objects are "heavier" than primitives. They require additional resources to support the internal machinery. But properties and methods are useful in programming, JavaScript engines try to optimize them, so the price is usually fair.
+
+## A primitive as an object
+
+Here's the paradox faced by the creator of JavaScript:
+
+- There are many things one would want to do with a primitive like a string or a number. Could be great to access them as methods.
+- Primitives must be as fast and lightweight as possible.
+
+The solution looks a little bit awkward, but here it is.
+
+1. Primitives are still primitive. A single value, as desired.
+2. The language allows to access methods and properties of strings, numbers, booleans and symbols.
+3. When it happens, a special "object wrapper" is created that provides the functionality and then is destroyed.
+
+The "object wrappers" are different for each primitive type and are named specifically: `String`, `Number`, `Boolean` and `Symbol`. Thus they provide different sets of methods.
+
+For instance, there exists a method [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) that returns the capitalized string.
+
+Here's how it works:
+
+```js run
+let str = "Hello";
+
+alert( str.toUpperCase() ); // HELLO
+```
+
+Simple, right? And here's what actually happens in `str.toUpperCase()`:
+
+1. The string `str` is a primitive. So in the moment of accessing its property a special object is created that both knows the value of the string and has useful methods, like `toUpperCase()`.
+2. That method runs and returns a new string (shown by `alert`).
+3. The special object is destroyed, leaving the primitive `str` alone.
+
+So, primitives can provide methods, but they still remain lightweight.
+
+Of course, a JavaScript engine highly optimizes that process. Internally it may skip the creation of the extra object at all. But it must adhere to the specification and behave as if it creates one.
+
+A number has methods of it's own, for instance, [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rounds the number to the given precision:
+
+```js run
+let n = 1.23456;
+
+alert( n.toFixed(2) ); // 1.23
+```
+
+We'll see more specific methods in chapters <info:number> and <info:string>.
+
+
+````warn header="Constructors `String/Number/Boolean` are for internal use only"
+Some languages like Java allow to create "wrapper objects" for primitives explicitly using syntax like `new Number(1)` or `new Boolean(false)`.
+
+In JavaScript that's also possible for historical reasons, but highly **not recommended**. Things will go crazy in many places.
+
+For instance:
+
+```js run
+alert( typeof 1 ); // "number"
+
+alert( typeof new Number(1) ); // "object"!
+```
+
+And, because in what follows `zero` is an object, the alert will show up:
+
+```js run
+let zero = new Number(0);
+
+if (zero) { // zero is true, because it's an object
+  alert( "zero is truthy?!?" );
+}
+```
+
+From the other side, using the same functions `String/Number/Boolean` without `new` is a totally sane and useful thing. They convert a value to the corresponding type: to a string, a number, or a boolean (primitive).
+
+This is totally valid:
+```js
+let num = Number("123"); // convert a string to number
+```
+````
+
+
+````warn header="null/undefined have no methods"
+Special primitives `null` and `undefined` are exceptions. They have no corresponding "wrapper objects" and provide no methods. In a sense, they are "the most primitive".
+
+An attempt to access a property of such value would give an error:
+
+```js run
+alert(null.test); // error
+````
+
+## Summary
+
+- Primitives except `null` and `undefined` provide many helpful methods. We plan to study those in the next chapters.
+- Formally, these methods work via temporary objects, but JavaScript engines are very well tuned to optimize that internally, so they are not expensive to call.
diff --git a/1-js/05-data-types/02-number/1-sum-interface/solution.md b/1-js/05-data-types/02-number/1-sum-interface/solution.md
new file mode 100644
index 00000000..f2c81437
--- /dev/null
+++ b/1-js/05-data-types/02-number/1-sum-interface/solution.md
@@ -0,0 +1,12 @@
+
+
+```js run demo
+let a = +prompt("The first number?", "");
+let b = +prompt("The second number?", "");
+
+alert( a + b );
+```
+
+Note the unary plus `+` before `prompt`. It immediately converts the value to a number.
+
+Otherwise, `a` and `b` would be string their sum would be their concatenation, that is: `"1" + "2" = "12"`.
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/1-sum-interface/task.md b/1-js/05-data-types/02-number/1-sum-interface/task.md
new file mode 100644
index 00000000..78012664
--- /dev/null
+++ b/1-js/05-data-types/02-number/1-sum-interface/task.md
@@ -0,0 +1,11 @@
+importance: 5
+
+---
+
+# Sum numbers from the visitor
+
+Create a script that prompts the visitor to enter two numbers and then shows their sum.
+
+[demo]
+
+P.S. There is a gotcha with types.
diff --git a/1-js/05-data-types/02-number/2-why-rounded-down/solution.md b/1-js/05-data-types/02-number/2-why-rounded-down/solution.md
new file mode 100644
index 00000000..2152d73d
--- /dev/null
+++ b/1-js/05-data-types/02-number/2-why-rounded-down/solution.md
@@ -0,0 +1,33 @@
+Internally the decimal fraction `6.35` is an endless binary. As always in such cases, it is stored with a precision loss.
+
+Let's see:
+
+```js run
+alert( 6.35.toFixed(20) ); // 6.34999999999999964473
+```
+
+The precision loss can cause both increase and decrease of a number. In this particular case the number becomes a tiny bit less, that's why it rounded down.
+
+And what's for `1.35`?
+
+```js run
+alert( 1.35.toFixed(20) ); // 1.35000000000000008882
+```
+
+Here the precision loss made the number a little bit greater, so it rounded up.
+
+**How can we fix the problem with `6.35` if we want it to be rounded the right way?**
+
+We should bring it closer to an integer prior to rounding:
+
+```js run
+alert( (6.35 * 10).toFixed(20) ); // 63.50000000000000000000
+```
+
+Note that `63.5` has no precision loss at all. That's because the decimal part `0.5` is actually `1/2`. Fractions divided by powers of `2` are exactly represented in the binary system, now we can round it:
+
+
+```js run
+alert( Math.round(6.35 * 10) / 10); // 6.35 -> 63.5 -> 63(rounded) -> 6.3
+```
+
diff --git a/1-js/05-data-types/02-number/2-why-rounded-down/task.md b/1-js/05-data-types/02-number/2-why-rounded-down/task.md
new file mode 100644
index 00000000..568c2648
--- /dev/null
+++ b/1-js/05-data-types/02-number/2-why-rounded-down/task.md
@@ -0,0 +1,22 @@
+importance: 4
+
+---
+
+# Why 6.35.toFixed(1) == 6.3?
+
+According to the documentation `Math.round` and `toFixed` both round to the nearest number: `0..4` lead down while `5..9` lead up.
+
+For instance:
+
+```js run
+alert( 1.35.toFixed(1) ); // 1.4
+```
+
+In the similar example below, why is `6.35` rounded to `6.3`, not `6.4`?
+
+```js run
+alert( 6.35.toFixed(1) ); // 6.3
+```
+
+How to round `6.35` the right way?
+
diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js
new file mode 100644
index 00000000..a8c30c01
--- /dev/null
+++ b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js
@@ -0,0 +1,12 @@
+
+function readNumber() {
+  let num;
+
+  do {
+    num = prompt("Enter a number please?", 0);
+  } while ( !isFinite(num) );
+
+  if (num === null || num === '') return null;
+  
+  return +num;
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js
new file mode 100644
index 00000000..219fa806
--- /dev/null
+++ b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js
@@ -0,0 +1,38 @@
+beforeEach(function() {
+  sinon.stub(window, "prompt");
+});
+
+afterEach(function() {
+  prompt.restore();
+});
+
+describe("readNumber", function() {
+
+  it("if a number, returns it", function() {
+    prompt.returns("123");
+    assert.strictEqual(readNumber(), 123);
+  });
+
+  it("if 0, returns it", function() {
+    prompt.returns("0");
+    assert.strictEqual(readNumber(), 0);
+  });
+
+  it("continues the loop unti meets a number", function() {
+    prompt.onCall(0).returns("not a number");
+    prompt.onCall(1).returns("not a number again");
+    prompt.onCall(2).returns("1");
+    assert.strictEqual(readNumber(), 1);
+  });
+
+  it("if an empty line, returns null", function() {
+    prompt.returns("");
+    assert.isNull(readNumber());
+  });
+
+  it("if cancel, returns null", function() {
+    prompt.returns(null);
+    assert.isNull(readNumber());
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/solution.md b/1-js/05-data-types/02-number/3-repeat-until-number/solution.md
new file mode 100644
index 00000000..005116d1
--- /dev/null
+++ b/1-js/05-data-types/02-number/3-repeat-until-number/solution.md
@@ -0,0 +1,23 @@
+
+```js run demo
+function readNumber() {
+  let num;
+
+  do {
+    num = prompt("Enter a number please?", 0);
+  } while ( !isFinite(num) );
+
+  if (num === null || num === '') return null;
+  
+  return +num;
+}
+
+alert(`Read: ${readNumber()}`);
+```
+
+The solution is a little bit more intricate that it could be because we need to handle `null`/empty lines.
+
+So we actually accept the input until it is a "regular number". Both `null` (cancel) and empty line also fit that condition, because in numeric form they are `0`.
+
+After we stopped, we need to treat `null` and empty line specially (return `null`), because converting them to a number would return `0`.
+
diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/task.md b/1-js/05-data-types/02-number/3-repeat-until-number/task.md
new file mode 100644
index 00000000..9b172fa8
--- /dev/null
+++ b/1-js/05-data-types/02-number/3-repeat-until-number/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Repeat until the input is a number
+
+Create a function `readNumber` which prompts for a number until the visitor enters a valid numeric value.
+
+The resulting value must be returned as a number.
+
+The visitor can also stop the process by entering an empty line or pressing "CANCEL". In that case, the function should return `null`.
+
+[demo]
+
diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/solution.md b/1-js/05-data-types/02-number/4-endless-loop-error/solution.md
new file mode 100644
index 00000000..8bc55bd0
--- /dev/null
+++ b/1-js/05-data-types/02-number/4-endless-loop-error/solution.md
@@ -0,0 +1,17 @@
+That's because `i` would never equal `10`.
+
+Run it to see the *real* values of `i`:
+
+```js run
+let i = 0;
+while (i < 11) {
+  i += 0.2;
+  if (i > 9.8 && i < 10.2) alert( i );
+}
+```
+
+None of them is exactly `10`.
+
+Such things happen because of the precision losses when adding fractions like `0.2`.
+
+Conclusion: evade equality checks when working with decimal fractions.
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/task.md b/1-js/05-data-types/02-number/4-endless-loop-error/task.md
new file mode 100644
index 00000000..592ece31
--- /dev/null
+++ b/1-js/05-data-types/02-number/4-endless-loop-error/task.md
@@ -0,0 +1,15 @@
+importance: 4
+
+---
+
+# An occasional infinite loop
+
+This loop is infinite. It never ends. Why?
+
+```js
+let i = 0;
+while (i != 10) {
+  i += 0.2;
+}
+```
+
diff --git a/1-js/05-data-types/02-number/8-random-min-max/solution.md b/1-js/05-data-types/02-number/8-random-min-max/solution.md
new file mode 100644
index 00000000..348f9e34
--- /dev/null
+++ b/1-js/05-data-types/02-number/8-random-min-max/solution.md
@@ -0,0 +1,19 @@
+We need to "map" all values from the interval 0..1 into values from `min` to `max`.
+
+That can be done in two stages:
+
+1. If we multiply a random number from 0..1 by `max-min`, then it the interval of possible values increases `0..1` to `0..max-min`.
+2. Now if we add `min`, the possible interval becomes from `min` to `max`.
+
+The function:
+
+```js run
+function random(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+alert( random(1, 5) ); 
+alert( random(1, 5) ); 
+alert( random(1, 5) ); 
+```
+
diff --git a/1-js/05-data-types/02-number/8-random-min-max/task.md b/1-js/05-data-types/02-number/8-random-min-max/task.md
new file mode 100644
index 00000000..cde399db
--- /dev/null
+++ b/1-js/05-data-types/02-number/8-random-min-max/task.md
@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# A random number from min to max
+
+The built-in function `Math.random()` creates a random value from `0` to `1` (not including `1`).
+
+Write the function `random(min, max)` to generate a random floating-point number from `min` to `max` (not including `max`).
+
+Examples of its work:
+
+```js
+alert( random(1, 5) ); // 1.2345623452
+alert( random(1, 5) ); // 3.7894332423
+alert( random(1, 5) ); // 4.3435234525
+```
+
+You can use the solution of the [previous task](info:task/random-min-max) as the base.
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/9-random-int-min-max/solution.md b/1-js/05-data-types/02-number/9-random-int-min-max/solution.md
new file mode 100644
index 00000000..793b7b30
--- /dev/null
+++ b/1-js/05-data-types/02-number/9-random-int-min-max/solution.md
@@ -0,0 +1,66 @@
+# The simple but wrong solution
+
+The simplest, but wrong solution would be to generate a value from `min` to `max` and round it:
+
+```js run
+function randomInteger(min, max) {
+  let rnd = min + Math.random() * (max - min); 
+  return Math.round(rnd);
+}
+
+alert( randomInteger(1, 3) );
+```
+
+The function works, but it is incorrect. The probability to get edge values `min` and `max` is two times less than any other.
+
+If you run the example above many times, you would easily see that `2` appears the most often.
+
+That happens because `Math.round()` gets random numbers from the interval `1..3` and rounds them as follows:
+
+```js no-beautify
+values from 1    ... to 1.4999999999  become 1
+values from 1.5  ... to 2.4999999999  become 2
+values from 2.5  ... to 2.9999999999  become 3
+```
+
+Now we can clearly see that `1` gets twice less values than `2`. And the same with `3`.
+
+# The correct solution
+
+There are many correct solutions to the task. One of them is to adjust interval borders. To ensure the same intervals, we can generate values from `0.5 to 2.5`, thus adding the required probabilities to the edges:
+
+```js run
+*!*
+function randomInteger(min, max) {
+  // now rnd is from  (min-0.5) to (max+0.5)
+  let rnd = min - 0.5 + Math.random() * (max - min + 1);
+  return Math.round(rnd);
+}
+*/!*
+
+alert( randomInteger(1, 3) );
+```
+
+An alternative way could be to use `Math.floor` for a random number from `min` to `max+1`:
+
+```js run
+*!*
+function randomInteger(min, max) {
+  // here rnd is from min to (max+1)
+  let rnd = min + Math.random() * (max + 1 - min);
+  return Math.floor(rand);
+}
+*/!*
+
+alert( randomInteger(1, 3) );
+```
+
+Now all intervals are mapped this way:
+
+```js no-beautify
+values from 1  ... to 1.9999999999  become 1
+values from 2  ... to 2.9999999999  become 2
+values from 3  ... to 3.9999999999  become 3
+```
+
+All intervals have the same length, making the final distribution uniform.
diff --git a/1-js/05-data-types/02-number/9-random-int-min-max/task.md b/1-js/05-data-types/02-number/9-random-int-min-max/task.md
new file mode 100644
index 00000000..71d83f01
--- /dev/null
+++ b/1-js/05-data-types/02-number/9-random-int-min-max/task.md
@@ -0,0 +1,18 @@
+importance: 2
+
+---
+
+# A random integer from min to max
+
+Create a function `randomInteger(min, max)` that generates a random *integer* number from `min` to `max` including both `min` and `max` as possible values.
+
+Any number from the interval `min..max` must appear with the same probability.
+
+
+Examples of its work:
+
+```js
+alert( random(1, 5) ); // 1
+alert( random(1, 5) ); // 3
+alert( random(1, 5) ); // 5
+```
\ No newline at end of file
diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md
new file mode 100644
index 00000000..ff07c661
--- /dev/null
+++ b/1-js/05-data-types/02-number/article.md
@@ -0,0 +1,437 @@
+# Numbers
+
+All numbers in JavaScript are stored in 64-bit format [IEEE-754](http://en.wikipedia.org/wiki/IEEE_754-1985) also known as "double precision".
+
+Let's recap what we know about them and add a little bit more.
+
+## More ways to write a number
+
+Imagine, we need to write a billion. The obvious way is:
+
+```js
+let billion = 1000000000;
+```
+
+But in real life we usually dislike writing many zeroes. It's easy to mistype. Also we are lazy. We will usually write something like `"1bn"` for a billion or `"7.3bn"` for 7 billions 300 millions. The similar is true for other big numbers.
+
+In JavaScript, we can do almost the same by appending the letter `"e"` to the number and specifying the zeroes count:
+
+```js run
+let billion = 1e9;  // 1 billion, literally: 1 and 9 zeroes
+
+alert( 7.3e9 );  // 7.3 billions (7,300,000,000)
+```
+
+In other words, `"e"` multiplies the number by `1` with the given zeroes count.
+
+```js
+1e3 = 1 * 1000
+1.23e6 = 1.23 * 1000000 
+```
+
+
+Now let's write something very small. Say, 1 microsecond (one millionth of a second): 
+
+```js
+let ms = 0.000001;
+```
+
+Also the same `"e"` can help. If we'd like not to write down the zeroes explicitly, the same number is:
+
+```js
+let ms = 1e-6; // six zeroes to the left from 1 
+```
+
+If we count the zeroes in `0.000001`, there are 6 of them. So naturally it's `1e-6`.  
+
+In other words, a negative number after `"e"` means a division by 1 with the given number of zeroes:
+
+```js
+// -3 divides by 1 with 3 zeroes
+1e-3 = 1 / 1000 (=0.001)
+
+// -6 divides by 1 with 6 zeroes
+1.23e-6 = 1.23 / 1000000 (=0.00000123)
+```
+
+### Hex, binary and octal numbers
+
+[Hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal) numbers are widely used in JavaScript: to represent colors, encode characters and for many other things. So there exists a short way to write them: `0x` and then the number.
+
+For instance:
+
+```js run
+alert( 0xff ); // 255
+alert( 0xFF ); // 255 (the same, case doesn't matter)
+```
+
+Binary and octal numeral systems are rarely used, but also supported using `0b` and `0o` prefixes:
+
+
+```js run
+let a = 0b11111111; // binary form of 255
+let b = 0o377; // octal form of 255
+
+alert( a == b ); // true, the same number 255 at both sides
+```
+
+There are only 3 numeral systems with such support. For other numeral systems we should use function `parseInt` (later in this chapter).
+
+## toString(base)
+
+The method `num.toString(base)` returns a string representation of `num` in the numeral system with the given `base`.
+
+For example:
+```js run
+let num = 255;
+
+alert( num.toString(16) );  // ff
+alert( num.toString(2) );   // 11111111
+```
+
+The `base` can vary from `2` to `36`. By default it's `10`.
+
+Most often use cases are:
+
+- **base=16** is used for hex colors, character encodings etc, digits can be `0..9` or `A..F`.
+- **base=2** is mostly for debugging bitwise operations, digits can be `0` or `1`.
+- **base=36** is the maximum, digits can be `0..9` or `A..Z`. The whole latin alphabet is used to represent a number. A funny, but useful case for `36` is when we need to turn a long numeric identifier into something shorter, for example to make a short url. Can simply represent it in the numeral system with base `36`:
+
+    ```js run
+    alert( 123456..toString(36) ); // 2n9c
+    ```
+
+```warn header="Two dots to call a method"
+Please note that two dots in `123456..toString(36)` is not a typo. If we want to call a method directly on a number, like `toString` in the example above, then we need to place two dots `..` after it.
+
+If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now goes the method.
+
+Also could write `(123456).toString(36)`.
+```
+
+## Rounding
+
+One of most often operations with numbers is the rounding.
+
+There are following built-in functions for rounding:
+
+`Math.floor`
+: Rounds down: `3.1` becomes `3`, and `-1.1` becomes `-2`.
+
+`Math.ceil`
+: Rounds up: `3.1` becomes `4`, and `-1.1` becomes `-1`.
+
+`Math.round`
+: Rounds to the nearest integer: `3.1` becomes `3`, `3.6` becomes `4` and `-1.1` becomes `-1`.
+
+`Math.trunc` (not supported by Internet Explorer)
+: Removes the decimal part: `3.1` becomes `3`, `-1.1` becomes `-1`.
+
+Here's the table to summarize the differences between them:
+
+|   | `Math.floor` | `Math.ceil` | `Math.round` | `Math.trunc` |
+|---|---------|--------|---------|---------|
+|`3.1`|  `3`    |   `4`  |    `3`  |   `3`   |
+|`3.6`|  `3`    |   `4`  |    `4`  |   `3`   |
+|`-1.1`|  `-2`    |   `-1`  |    `-1`  |   `-1`   |
+|`-1.6`|  `-2`    |   `-1`  |    `-2`  |   `-1`   |
+
+
+These functions cover all possible ways to deal with the decimal part as a whole. But what if we'd like to round the number to `n-th` digit after the point?
+
+For instance, we have `1.2345` and want to round it to 2 digits, getting only `1.23`.
+
+There are two ways to do so.
+
+1. Multiply-and-divide.
+
+    For instance, to round the number to the 2nd digit after the point, we can multiply the number by `100`, call the rounding function and then divide back.
+    ```js run
+    let num = 1.23456;
+
+    alert( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23
+    ```
+
+2. The method [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rounds the number to `n` digits after the point and returns a string representation of the result.
+        
+    ```js run
+    let num = 12.34;
+    alert( num.toFixed(1) ); // "12.3"
+    ```
+
+    The rounding goes to the nearest value, similar to `Math.round`:
+
+    ```js run
+    let num = 12.36;
+    alert( num.toFixed(1) ); // "12.4"
+    ```
+
+    Please note that result of `toFixed` is a string. If the decimal part is shorter than required, zeroes are appended to its end:
+
+    ```js run
+    let num = 12.34;
+    alert( num.toFixed(5) ); // "12.34000", added zeroes to make exactly 5 digits 
+    ```
+
+    We can convert it to a number using the unary plus or a `Number()` call: `+num.toFixed(5)`.
+
+## Imprecise calculations
+
+Internally, a number is represented in 64-bit format [IEEE-754](http://en.wikipedia.org/wiki/IEEE_754-1985). So, there are exactly 64 bits to store a number: 52 of them are used to store the digits, 11 of them store the position of the decimal point (they are zero for integer numbers) and 1 bit for the sign.
+
+If a number is too big, it would overflow the 64-bit storage, potentially giving an infinity:
+
+```js run
+alert( 1e500 ); // Infinity 
+```
+
+But what may be a little bit more obvious, but happens much often is the loss of precision. 
+
+Consider this (falsy!) test:
+
+```js run
+alert( 0.1 + 0.2 == 0.3 ); // *!*false*/!*
+```
+
+Yes, indeed, if we check whether the sum of `0.1` and `0.2` is `0.3`, we get `false`. 
+
+Strange! What is it then if not `0.3`?
+
+```js run
+alert( 0.1 + 0.2 ); // 0.30000000000000004
+```
+
+Ouch! There are more consequences than an incorrect comparison here. Imagine you're making an e-shopping site and the visitor puts `$0.10` and `$0.20` goods into his chart. The order total will be `$0.30000000000000004`. That would surprise anyone.
+
+Why does it work like that?
+
+A number is stored in memory in it's binary form, as a sequence of ones and zeroes. But fractions like `0.1`, `0.2` that look simple in the decimal numeric system are actually unending fractions in their binary form.
+
+In other words, what is `0.1`? It is one divided by ten `1/10`, one-tenth. In decimal numeral system such numbers are easily representable. Compare it to one-third: `1/3`. It becomes an endless fraction `0.33333(3)`. 
+
+So, division by powers `10` is guaranteed to look well in the decimal system, but the division by `3` is not. For the same reason, in the binary numeral system, the division by powers of `2` is guaranteed to look good, but `1/10` becomes an endless binary fraction.
+
+There's just no way to store *exactly 0.1* or *exactly 0.2* in the binary system, just like there is no way to store one-third as a decimal fraction.
+
+The numeric format IEEE-754 solves that by storing the nearest possible number. There are rounding rules that normally don't allow us to see that "tiny precision loss", so the number shows up as `0.3`. But the loss still exists.
+
+We can see it like this:
+```js run
+alert( 0.1.toFixed(20) ); // 0.10000000000000000555
+```
+
+And when we sum two numbers, then their "precision losses" sum up.
+
+That's why `0.1 + 0.2` is not exactly `0.3`.
+
+```smart header="Not only JavaScript"
+The same issue exists in many other programming languages.
+
+PHP, Java, C, Perl, Ruby give exactly the same result, because they are based on the same numeric format. 
+```
+
+Can we work around the problem? Sure, there's a number of ways:
+
+1. We can round the result with the help of a method [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed):
+
+    ```js run
+    let sum = 0.1 + 0.2;
+    alert( sum.toFixed(2) ); // 0.30
+    ```
+
+    Please note that `toFixed` always returns a string. It ensures that it has 2 digits after the decimal point. That's actually convenient if we have an e-shopping and need to show `$0.30`. For other cases we can use the unary plus to coerce it into a number:
+
+    ```js run
+    let sum = 0.1 + 0.2;
+    alert( +sum.toFixed(2) ); // 0.3
+    ```
+
+2. We can temporarily turn numbers into integers for the maths and then go back. That would looks like this:
+
+    ```js run
+    alert( (0.1*10 + 0.2*10) / 10 ); // 0.3
+    ```
+
+    It works, because when we get `0.1*10 = 1` and `0.2 * 10 = 2` then both numbers are integers, there's no precision loss for them. 
+
+3. If it's a shop, then the most radical solution would be to store all prices in cents. No fractions at all. But what if we apply a discount of 30%? In practice, totally evading fractions is rarely feasible, so the solutions listed above are here to help.
+
+````smart header="The funny thing"
+Try running this:
+
+```js run
+// Hello! I'm a self-increasing number! 
+alert( 9999999999999999 ); // shows 10000000000000000
+```
+
+The reason is the same: loss of precision. There are 64 bits for the number, 52 of them can be used to store digits, and that's not enough. So the least significant digits disappear.
+
+JavaScript doesn't trigger an error in such case. It does the best to fit the number into the format. Unfortunately, the format is not big enough.
+````
+
+```smart header="Two zeroes"
+Another funny consequence of the internal representation is the existance of two zeroes: `0` and `-0`.
+
+That's because a sign is represented by a single bit, so every number can be positive or negative, including the zero. 
+
+In most cases the distinction is unnoticeable, because operators are suited to treat them as the same.
+```
+
+
+
+## Tests: isFinite and isNaN
+
+Remember the two special numeric values?
+
+- `Infinite` (and `-Infinite`) is a special numeric value that is greater (less) than anything.
+- `NaN` represends an error.
+
+They belong to the type `number`, but are not "normal" numbers, so there are special functions to check for them:
+
+
+- `isNaN(value)` converts its argument to a number and then tests if for being `NaN`:
+
+    ```js run
+    alert( isNaN(NaN) ); // true
+    alert( isNaN("str") ); // true
+    ```
+
+    But do we need the function? Can we just use the comparison `=== NaN`? Sorry, but no. The value `NaN` is unique in that it does not equal anything including itself:
+
+    ```js run
+    alert( NaN === NaN ); // false
+    ```
+
+- `isFinite(value)` converts its argument to a number and returns `true` if it's a regular number, not `NaN/Infinity/-Infinity`:
+
+    ```js run
+    alert( isFinite("15") ); // true
+    alert( isFinite("str") ); // false, because a special value: NaN
+    alert( isFinite(Infinity) ); // false, because a special value: Infinity
+    ```
+
+Sometimes `isFinite` is used to validate the string value for being a regular number:
+
+
+```js run
+let num = +prompt("Enter a number", '');
+
+// will be true unless you enter Infinity, -Infinity or not a number
+alert( isFinite(num) );
+```
+
+Please note that an empty or a space-only string is treated as `0` in all numeric functions including `isFinite`. 
+
+```smart header="Compare with `Object.is`"
+
+There is a special built-in method [Object.is](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases:
+
+1. It works with `NaN`: `Object.is(NaN, NaN) === true`, that's a good thing. 
+2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, it rarely matters, but these values technically are different.
+
+In all other cases, `Object.is(a, b)` is the same as `a === b`. 
+
+This way of comparison is often used in JavaScript specification. When an internal algorithm needs to compare two values for being exactly the same, it uses `Object.is` (internally called [SameValue](https://tc39.github.io/ecma262/#sec-samevalue)).
+```
+
+
+## parseInt and parseFloat
+
+The numeric conversion using a plus `+` or `Number()` is strict. If a value is not exactly a number, it fails:
+
+```js run
+alert( +"100px" ); // NaN
+```
+
+The sole exception is spaces before and after the line, they are ignored.
+
+But in real life we often have values in units, like `"100px"` or `"12pt"` in CSS. Also in many countries the currency symbol goes after the amount, so we have `"19€"` and would like to extract a numeric value out of that.
+
+That's what `parseInt` and `parseFloat` are for.
+
+They "read" a number from a string until they can. In case of an error, the gathered number is returned. Function `parseInt` reads an integer number, `parseFloat` reads any number:
+
+```js run
+alert( parseInt('100px') ); // 100
+alert( parseFloat('12.5em') ); // 12.5
+
+alert( parseInt('12.3') ); // 12, only integer part
+alert( parseFloat('12.3.4') ); // 12.3, the second point stops the reading
+```
+
+Of course, there are situations when `parseInt/parseFloat` return `NaN`. It happens when no digits could be read:
+
+```js run
+alert( parseInt('a123') ); // NaN, the first symbol stops he process
+```
+
+````smart header="The second argument of `parseInt(str, radix)`"
+The `parseInt()` function has an optional second parameter. It specifies the base of the numeral system, so `parseInt` can also parse strings of hex numbers, binary numbers and so on:
+
+```js run
+alert( parseInt('0xff', 16) ); // 255
+alert( parseInt('ff', 16) ); // 255, without 0x also works
+
+alert( parseInt('2n9c', 36) ); // 123456
+```
+````
+
+## Other math functions
+
+JavaScript has a built-in [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object which contains a small library of mathematical functions and constants.
+
+A few examples:
+
+`Math.random()`
+: Returns a random number from 0 to 1 (not including 1)
+
+    ```js run
+    alert( Math.random() ); // 0.1234567894322
+    alert( Math.random() ); // 0.5435252343232
+    alert( Math.random() ); // ... (any random numbers)
+    ```
+
+`Math.max(a, b, c...)` / `Math.min(a, b, c...)`
+: Return the greatest/smallest from the arbitrary number of arguments.
+
+    ```js run
+    alert( Math.max(3, 5, -10, 0, 1) ); // 5
+    alert( Math.min(1, 2) ); // 1
+    ```
+
+`Math.pow(n, power)`
+: Returns `n` raised the given power
+
+    ```js run
+    alert( Math.pow(2, 10) ); // 2 in power 10 = 1024
+    ```
+
+There are more functions and constants in `Math`, including trigonometry, you can find them in the [docs for the Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object.
+
+## Summary
+
+To write big numbers:
+
+- Append `"e"` with the zeroes count to the number. Like: `123e6` is `123` with 6 zeroes.
+- A negative number after `"e"` causes the number to be divided by 1 with given zeroes. That's for one-millionth or such.
+
+For different numeral systems:
+
+- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems
+- `parseInt(str, base)` parses an integer from any numeral system with base: `2 ≤ base ≤ 36`.
+- `num.toString(base)` converts a number to a string in the numeral system with the given `base`.
+
+For converting values like `12pt` and `100px` to a number:
+
+- Use `parseInt/parseFloat` for the "soft" conversion, which reads a number from a string until it can. 
+
+For fractions:
+
+- Round using `Math.floor`, `Math.ceil`, `Math.trunc`, `Math.round` or `num.toFixed(precision)`.
+- Remember about the loss of precision when working with fractions.
+
+More mathematical functions:
+
+- See the [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object when you need them. The library is very small, but can cover basic needs.
+
+
diff --git a/1-js/4-data-structures/3-string/1-ucfirst/_js.view/solution.js b/1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js
similarity index 100%
rename from 1-js/4-data-structures/3-string/1-ucfirst/_js.view/solution.js
rename to 1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js
diff --git a/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js b/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js
new file mode 100644
index 00000000..d5c50ff5
--- /dev/null
+++ b/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js
@@ -0,0 +1,9 @@
+describe("ucFirst", function() {
+  it('Uppercases the first symbol', function() {
+    assert.strictEqual(ucFirst("john"), "John");
+  });
+
+  it("Doesn't die on an empty string", function() {
+    assert.strictEqual(ucFirst(""), "");
+  });
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/03-string/1-ucfirst/solution.md b/1-js/05-data-types/03-string/1-ucfirst/solution.md
new file mode 100644
index 00000000..4809cf12
--- /dev/null
+++ b/1-js/05-data-types/03-string/1-ucfirst/solution.md
@@ -0,0 +1,27 @@
+We can't "replace" the first character, because strings in JavaScript are immutable.
+
+But we can make a new string based on the existing one, with the uppercased first character:
+
+```js
+let newStr = str[0].toUpperCase() + str.slice(1);
+```
+
+There's a small problem though. If `str` is empty, then `str[0]` is undefined, so we'll get an error.
+
+There are two variants here:
+
+1. Use `str.charAt(0)`, as it always returns a string (maybe empty).
+2. Add a test for an empty string.
+
+Here's the 2nd variant:
+
+```js run
+function ucFirst(str) {
+  if (!str) return str;
+
+  return str[0].toUpperCase() + str.slice(1);
+}
+
+alert( ucFirst("john") ); // John
+```
+
diff --git a/1-js/05-data-types/03-string/1-ucfirst/task.md b/1-js/05-data-types/03-string/1-ucfirst/task.md
new file mode 100644
index 00000000..c0e6ecac
--- /dev/null
+++ b/1-js/05-data-types/03-string/1-ucfirst/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# Uppercast the first character
+
+Write a function `ucFirst(str)` that returns the string `str` with the uppercased first character, for instance:
+
+```js
+ucFirst("john") == "John";
+```
+
diff --git a/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js b/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js
new file mode 100644
index 00000000..105d70ea
--- /dev/null
+++ b/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js
@@ -0,0 +1,5 @@
+function checkSpam(str) {
+  let lowerStr = str.toLowerCase();
+
+  return lowerStr.includes('viagra') || lowerStr.includes('xxx');
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js b/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js
new file mode 100644
index 00000000..85eb24fc
--- /dev/null
+++ b/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("checkSpam", function() {
+  it('finds spam in "buy ViAgRA now"', function() {
+    assert.isTrue(checkSpam('buy ViAgRA now'));
+  });
+
+  it('finds spam in "free xxxxx"', function() {
+    assert.isTrue(checkSpam('free xxxxx'));
+  });
+
+  it('no spam in "innocent rabbit"', function() {
+    assert.isFalse(checkSpam('innocent rabbit'));
+  });
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/03-string/2-check-spam/solution.md b/1-js/05-data-types/03-string/2-check-spam/solution.md
new file mode 100644
index 00000000..2468916f
--- /dev/null
+++ b/1-js/05-data-types/03-string/2-check-spam/solution.md
@@ -0,0 +1,14 @@
+To make the search case-insensitive, let's bring the stirng to lower case and then search:
+
+```js run
+function checkSpam(str) {
+  let lowerStr = str.toLowerCase();
+
+  return lowerStr.includes('viagra') || lowerStr.includes('xxx');
+}
+
+alert( checkSpam('buy ViAgRA now') );
+alert( checkSpam('free xxxxx') );
+alert( checkSpam("innocent rabbit") );
+```
+
diff --git a/1-js/05-data-types/03-string/2-check-spam/task.md b/1-js/05-data-types/03-string/2-check-spam/task.md
new file mode 100644
index 00000000..d073adc0
--- /dev/null
+++ b/1-js/05-data-types/03-string/2-check-spam/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# Check for spam
+
+Write a function `checkSpam(str)` that returns `true` if `str` contains 'viagra' or 'XXX', otherwise `false.
+
+The function must be case-insensitive:
+
+```js
+checkSpam('buy ViAgRA now') == true
+checkSpam('free xxxxx') == true
+checkSpam("innocent rabbit") == false
+```
+
diff --git a/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js b/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js
new file mode 100644
index 00000000..f587df1f
--- /dev/null
+++ b/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js
@@ -0,0 +1,4 @@
+function truncate(str, maxlength) {
+  return (str.length > maxlength) ? 
+    str.slice(0, maxlength - 1) + '…' : str;
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/03-string/3-truncate/_js.view/test.js b/1-js/05-data-types/03-string/3-truncate/_js.view/test.js
new file mode 100644
index 00000000..c252f16b
--- /dev/null
+++ b/1-js/05-data-types/03-string/3-truncate/_js.view/test.js
@@ -0,0 +1,16 @@
+describe("truncate", function() {
+  it("truncate the long string to the given lenth (including the ellipsis)", function() {
+    assert.equal(
+      truncate("What I'd like to tell on this topic is:", 20),
+      "What I'd like to te…"
+    );
+  });
+
+  it("doesn't change short strings", function() {
+    assert.equal(
+      truncate("Hi everyone!", 20),
+      "Hi everyone!"
+    );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/03-string/3-truncate/solution.md b/1-js/05-data-types/03-string/3-truncate/solution.md
new file mode 100644
index 00000000..a49b7090
--- /dev/null
+++ b/1-js/05-data-types/03-string/3-truncate/solution.md
@@ -0,0 +1,11 @@
+The maximal length must be `maxlength`, so we need to cut it a little shorter, to give space for the ellipsis.
+
+Note that there is actually a single unicode character for an ellipsis. That's not three dots.
+
+```js run
+function truncate(str, maxlength) {
+  return (str.length > maxlength) ? 
+    str.slice(0, maxlength - 1) + '…' : str;
+}
+```
+
diff --git a/1-js/05-data-types/03-string/3-truncate/task.md b/1-js/05-data-types/03-string/3-truncate/task.md
new file mode 100644
index 00000000..af37f0dc
--- /dev/null
+++ b/1-js/05-data-types/03-string/3-truncate/task.md
@@ -0,0 +1,17 @@
+importance: 5
+
+---
+
+# Truncate the text
+
+Create a function `truncate(str, maxlength)` that checks the length of the `str` and, if it exceeds `maxlength` -- replaces the end of `str` with the ellipsis character `"…"`, to make its length equal to `maxlength`.
+
+The result of the function should be the truncated (if needed) string. 
+
+For instance:
+
+```js
+truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…"
+
+truncate("Hi everyone!", 20) = "Hi everyone!"
+```
diff --git a/1-js/4-data-structures/3-string/4-extract-currency/_js.view/solution.js b/1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js
similarity index 100%
rename from 1-js/4-data-structures/3-string/4-extract-currency/_js.view/solution.js
rename to 1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js
diff --git a/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js b/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js
new file mode 100644
index 00000000..1c3f0bbc
--- /dev/null
+++ b/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js
@@ -0,0 +1,8 @@
+describe("extractCurrencyValue", function() {
+
+  it("for the string $120 returns the number 120", function() {
+    assert.strictEqual(extractCurrencyValue('$120'), 120);
+  });
+
+
+});
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.md b/1-js/05-data-types/03-string/4-extract-currency/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.md
rename to 1-js/05-data-types/03-string/4-extract-currency/solution.md
diff --git a/1-js/05-data-types/03-string/4-extract-currency/task.md b/1-js/05-data-types/03-string/4-extract-currency/task.md
new file mode 100644
index 00000000..feb16e64
--- /dev/null
+++ b/1-js/05-data-types/03-string/4-extract-currency/task.md
@@ -0,0 +1,16 @@
+importance: 4
+
+---
+
+# Extract the money
+
+We have a cost in the form `"$120"`. That is: the dollar sign goes first, and then the number.
+
+Create a function `extractCurrencyValue(str)` that would extract the numeric value from such string and return it. 
+
+The example:
+
+```js
+alert( extractCurrencyValue('$120') === 120 ); // true
+```
+
diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md
new file mode 100644
index 00000000..c7d889e9
--- /dev/null
+++ b/1-js/05-data-types/03-string/article.md
@@ -0,0 +1,676 @@
+# Strings
+
+In JavaScript, the textual data is stored as strings. There is no separate type for a single character.
+
+The internal format for strings is always [UTF-16](https://en.wikipedia.org/wiki/UTF-16), it is not tied to the page encoding.
+
+[cut]
+
+## Quotes
+
+Let's remember the kinds of quotes.
+
+Strings can be enclosed either with the single, double quotes or in backticks:
+
+```js
+let single = 'single-quoted';
+let double = "double-quoted";
+
+let backticks = `backticks`;
+```
+
+Single and double quotes are essentially the same. Backticks allow to embed any expression into the string, including function calls:
+
+```js run
+function sum(a, b) {
+  return a + b;
+}
+
+alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.
+```
+
+Another advantage of using backticks is that they allow a string to span multiple lines:
+
+```js run
+let guestList = `Guests:
+ * John
+ * Pete
+ * Mary
+`;
+
+alert(guestList); // a list of guests, multiple lines
+```
+
+If we try to use single or double quotes the same way, there will be an error:
+```js run
+let guestList = "Guests:  // Error: Unexpected token ILLEGAL
+  * John";
+```
+
+Single and double quotes come from ancient times of language creation, and the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile.
+
+Backticks also allow to specify a "template function" before the first backtick, the syntax is: <code>func&#96;string&#96;</code>. The function `func` is called automatically, receives the string and embedded expressions and can process them. You can read more in the [docs](mdn:JavaScript/Reference/Template_literals#Tagged_template_literals). That is called "tagged templates". This feature makes it easier to wrap strings into custom templating or other functionality, but is rarely used.
+
+
+## Special characters
+
+It is still possible to create multiline strings with single quotes, using a so-called "newline character" written as `\n`, that denotes a line break:
+
+```js run
+let guestList = "Guests:\n * John\n * Pete\n * Mary";
+
+alert(guestList); // a multiline list of guests
+```
+
+So to speak, these two lines describe the same:
+
+```js run
+alert( "Hello\nWorld" ); // two lines using a "newline symbol"
+
+// two lines using a normal newline and backticks
+alert( `Hello
+World` );
+```
+
+There are other, less common "special" characters as well, here's the list:
+
+| Character | Description |
+|-----------|-------------|
+|`\b`|Backspace|
+|`\f`|Form feed|
+|`\n`|New line|
+|`\r`|Carriage return|
+|`\t`|Tab|
+|`\uNNNN`|A unicode symbol with the hex code `NNNN`, for instance `\u00A9` -- is a unicode for the copyright symbol `©`. Must be exactly 4 hex digits. |
+|`\u{NNNNNNNN}`|Some rare characters are encoded with two unicode symbols, taking up to 4 bytes. The long unicode requires braces around.|
+
+Examples with unicode:
+
+```js run
+alert( "\u00A9" ); // ©
+alert( "\u{20331}" ); // 𠌱, a rare chinese hieroglyph (long unicode)
+alert( "\u{1F60D}"); // a smiling face sumbol (another long unicode)
+```
+
+All special characters start with a backslash character `\`. It is also called an "escaping character".
+
+We should also use it if we want to insert the quote into the string.
+
+For instance:
+
+```js run
+alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!
+```
+
+See, we have to prepend the inner quote by the backslash `\'`, because otherwise it would mean the string end.
+
+Of course, that refers only for the quotes that are same as the enclosing ones. So, as a more elegant solution, we could switch to double quotes or backticks instead:
+
+```js run
+alert( `I'm the Walrus!` ); // I'm the Walrus!
+```
+
+Note that the backslash `\` serves for the correct reading of the string by JavaScript, then disappears. The in-memory string has no `\`. You can clearly see that in `alert` from the examples above.
+
+But what if we need exactly a backslash `\` in the string?
+
+That's possible, but we need to double it like `\\`:
+
+```js run
+alert( `The backslash: \\` ); // The backslash: \
+```
+
+## String length
+
+
+The `length` property has the string length:
+
+```js run
+alert( `My\n`.length ); // 3
+```
+
+Note that `\n` is a single "special" character, so the length is indeed `3`.
+
+```warn header="`length` is a property"
+People with background in some other languages sometimes mistype by calling `str.length()` instead of just `str.length`. That doesn't work.
+
+Please note that `str.length` is a numeric property, not a function. There is no need to add brackets after it.
+```
+
+## Accessing characters
+
+To get a character at position `pos`, use square brackets `[pos]` or call the method [str.charAt(pos)](mdn:js/String/charAt). The first character starts from the zero position:
+
+```js run
+let str = `Hello`;
+
+// the first character
+alert( str[0] ); // H
+alert( str.charAt(0) ); // H
+
+// the last character
+alert( str[str.length - 1] ); // o
+```
+
+The square brackets is a modern way of getting a character, while `charAt` exists mostly for historical reasons.
+
+The only difference between them is that if no character found, `[]` returns `undefined`, and `charAt` returns an empty string:
+
+```js run
+let str = `Hello`;
+
+alert( str[1000] ); // undefined
+alert( str.charAt(1000) ); // '' (an empty string)
+```
+
+Also we can iterate over characters using `for..of`:
+
+```js run
+for(let char of "Hello") {
+  alert(char); // H,e,l,l,o (char becomes "H", then "e", then "l" etc)
+}
+```
+
+## Strings are immutable
+
+Strings can't be changed in JavaScript. It is impossible to change a character.
+
+Let's try to see that it doesn't work:
+
+```js run
+let str = 'Hi';
+
+str[0] = 'h'; // error
+alert( str[0] ); // doesn't work
+```
+
+The usual workaround is to create a whole new string and assign it to `str` instead of the old one.
+
+For instance:
+
+```js run
+let str = 'Hi';
+
+str = 'h' + str[1];  // replace the string
+
+alert( str ); // hi
+```
+
+In the following sections we'll see more examples of that.
+
+## Changing the case
+
+Methods [toLowerCase()](mdn:js/String/toLowerCase) and [toUpperCase()](mdn:js/String/toUpperCase) change the case:
+
+```js run
+alert( 'Interface'.toUpperCase() ); // INTERFACE
+alert( 'Interface'.toLowerCase() ); // interface
+```
+
+Or, if we want a single character lowercased:
+
+```js
+alert( 'Interface'[0].toLowerCase() ); // 'i'
+```
+
+## Searching for a substring
+
+There are multiple ways to look for a substring in a string.
+
+### str.indexOf
+
+The first method is [str.indexOf(substr, pos)](mdn:js/String/indexOf).
+
+It looks for the `substr` in `str`, starting from the given position `pos`, and returns the position where the match was found or `-1` if nothing can be found.
+
+For instance:
+
+```js run
+let str = 'Widget with id';
+
+alert( str.indexOf('Widget') ); // 0, because 'Widget' is found at the beginning
+alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive
+
+alert( str.indexOf("id") ); // 1, "id" is found at the position 1 (..idget with id)
+```
+
+The optional second parameter allows to search starting from the given position.
+
+For instance, the first occurence of `"id"` is at the position `1`. To look for the next occurence, let's start the search from the position `2`:
+
+```js run
+let str = 'Widget with id';
+
+alert( str.indexOf('id', 2) ) // 12
+```
+
+
+If we're interested in all occurences, we can run `indexOf` in a loop. Every new call is made with the position after the previous match:
+
+
+```js run
+let str = 'As sly as a fox, as strong as an ox';
+
+let target = 'as'; // let's look for it
+
+let pos = 0;
+while (true) {
+  let foundPos = str.indexOf(target, pos);
+  if (foundPos == -1) break;
+
+  alert( `Found at ${foundPos}` );
+  pos = foundPos + 1; // continue the search from the next position
+}
+```
+
+The same algorithm can be layed out shorter:
+
+```js run
+let str = "As sly as a fox, as strong as an ox";
+let target = "as";
+
+*!*
+let pos = -1;
+while ((pos = str.indexOf(target, pos + 1)) != -1) {
+  alert( pos );
+}
+*/!*
+```
+
+```smart header="`str.lastIndexOf(pos)`"
+There is also a similar method [str.lastIndexOf(pos)](mdn:js/String/lastIndexOf) that searches from the end of the string to its beginning.
+
+It would list the occurences in the reverse way.
+```
+
+There is a slight inconvenience with `indexOf` in the `if` test. We can't put it in the `if` like this:
+
+```js run
+let str = "Widget with id";
+
+if (str.indexOf("Widget")) {
+    alert("We found it"); // doesn't work!
+}
+```
+
+The `alert` in the example above doesn't show, because `str.indexOf("Widget")` returns `0` (meaning that it found the match at the starting position). Right, but `if` considers that to be `false`.
+
+So, we should actualy check for `-1`, like that:
+
+```js run
+let str = "Widget with id";
+
+*!*
+if (str.indexOf("Widget") != -1) {
+*/!*
+    alert("We found it"); // works now!
+}
+```
+
+````smart header="The bitwise NOT trick"
+One of the old tricks used here is the [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` operator. It converts the number to 32-bit integer (removes the decimal part if exists) and then reverses all bits in its binary representation.
+
+For 32-bit integers the call `~n` means exactly the same as `-(n+1)` (due to IEEE-754 format).
+
+For instance:
+
+```js run
+alert( ~2 ); // -3, the same as -(2+1)
+alert( ~1 ); // -2, the same as -(1+1)
+alert( ~0 ); // -1, the same as -(0+1)
+*!*
+alert( ~-1 ); // 0, the same as -(-1+1)
+*/!*
+```
+
+As we can see, `~n` is zero only if `n == -1`.
+
+So, the test `if ( ~str.indexOf("...") )` is truthy that the result of `indexOf` is not `-1`. In other words, when there is a match.
+
+People use it to shorten `indexOf` checks:
+
+```js run
+let str = "Widget";
+
+if (~str.indexOf("Widget")) {
+  alert( 'Found it!' ); // works
+}
+```
+
+It is usually not recommended to use language features in a non-obvious way, but this particular trick is widely used in old code, so we should understand it.
+
+Just remember: `if (~str.indexOf(...))` reads as "if found".
+````
+
+### includes, startsWith, endsWith
+
+The more modern method [str.includes(substr, pos)](mdn:js/String/includes) returns `true/false` depending on whether `str` has `substr` as its part.
+
+It's the right choice if we need to test for the match, but don't need its position:
+
+```js run
+alert( "Widget with id".includes("Widget") ); // true
+
+alert( "Hello".includes("Bye") ); // false
+```
+
+The optional second argument of `str.includes` is the position to start searching from:
+
+```js run
+alert( "Midget".includes("id") ); // true
+alert( "Midget".includes("id", 3) ); // false, from position 3 there is no "id"
+```
+
+The methods [str.startsWith](mdn:js/String/startsWith) and [str.endsWith](mdn:js/String/endsWith) do exactly what they say:
+
+```js run
+alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
+alert( "Widget".endsWith("get") );   // true, "Widget" ends with "get"
+```
+
+## Getting a substring
+
+There are 3 methods in JavaScript to get a substring: `substring`, `substr` and `slice`.
+
+`str.slice(start [, end])`
+: Returns the part of the string from `start` to (but not including) `end`.
+
+    For instance:
+
+    ```js run
+    let str = "stringify";
+    alert( str.slice(0,5) ); // 'strin', the substring from 0 to 5 (not including 5)
+    alert( str.slice(0,1) ); // 's', from 0 to 1, but not including 1, so only character at 0
+    ```
+
+    If there is no second argument, then `slice` goes till the end of the string:
+
+    ```js run
+    let str = "st*!*ringify*/!*";
+    alert( str.slice(2) ); // ringify, from the 2nd position till the end
+    ```
+
+    Negative values for `start/end` are also possible. They mean the position is counted from the string end:
+
+    ```js run
+    let str = "strin*!*gif*/!*y";
+
+    // start at the 4th position from the right, end at the 1st from the right
+    alert( str.slice(-4, -1) ); // gif
+    ```
+
+
+`str.substring(start [, end])`
+: Returns the part of the string *between* `start` and `end`.
+
+    Almost the same as `slice`, but allows `start` to be greater than `end`.
+
+    For instance:
+
+
+    ```js run
+    let str = "st*!*ring*/!*ify";
+
+    // these are same for substring
+    alert( str.substring(2, 6) ); // "ring"
+    alert( str.substring(6, 2) ); // "ring"
+
+    // ...but not for slice:
+    alert( str.slice(2, 6) ); // "ring" (the same)
+    alert( str.slice(6, 2) ); // "" (an empty string)
+
+    ```
+
+    Negative arguments are (unlike slice) not supported, they are treated as `0`.
+
+
+`str.substr(start [, length])`
+: Returns the part of the string from `start`, with the given `length`.
+
+    In contrast with the previous methods, this one allows to specify the `length` instead of the ending position:
+
+    ```js run
+    let str = "st*!*ring*/!*ify";
+    alert( str.substr(2, 4) ); // ring, from the 2nd position get 4 characters
+    ```
+
+    The first argument may be negative, to count from the end:
+
+    ```js run
+    let str = "strin*!*gi*/!*fy";
+    alert( str.substr(-4, 2) ); // gi, from the 4th position get 2 characters
+    ```
+
+Let's recap the methods to avoid any confusion:
+
+| method | selects... | negatives |
+|--------|-----------|-----------|
+| `slice(start, end)` | from `start` to `end` | allows negatives |
+| `substring(start, end)` | between `start` and `end` | negative values mean `0` |
+| `substr(start, length)` | from `start` get `length` characters | allows negative `start` |
+
+
+```smart header="Which one to choose?"
+All of them can do the job. Formally, `substr` has a minor drawback: it is described not in the core JavaScript specification, but in Annex B, which covers browser-only features that exist mainly for historical reasons. So, non-browser environments may fail to support it. But in practice it works everywhere.
+
+The author finds himself using `slice` almost all the time.
+```
+
+## Comparing strings
+
+As we know from the chapter <info:comparison>, strings are compared character-by-character, in the alphabet order.
+
+Although, there are some oddities.
+
+1. A lowercase letter is always greater than the uppercase:
+
+    ```js run
+    alert( 'a' > 'Z' ); // true
+    ```
+
+2. Letters with diacritical marks are "out of order":
+
+    ```js run
+    alert( 'Österreich' > 'Zealand' ); // true
+    ```
+
+    That may lead to strange results if we sort country names. Usually people would await for `Zealand` to be after `Österreich` in the list.
+
+To understand what happens, let's review the internal representation of strings in JavaScript.
+
+All strings are encoded using [UTF-16](https://en.wikipedia.org/wiki/UTF-16). That is: each character has a corresponding numeric code. There are special methods that allow to get the character for the code and back.
+
+`str.codePointAt(pos)`
+: Returns the code for the character at position `pos`:
+
+    ```js run
+    // different case letters have different codes
+    alert( "z".codePointAt(0) ); // 122
+    alert( "Z".codePointAt(0) ); // 90
+    ```
+
+`String.fromCodePoint(code)`
+: Creates a character by its numeric `code`
+
+    ```js run
+    alert( String.fromCodePoint(90) ); // Z
+    ```
+
+    We can also add unicode characters by their codes using `\u` followed by the hex code:
+
+    ```js run
+    // 90 is 5a in hexadecimal system
+    alert( '\u005a' ); // Z
+    ```
+
+Now let's see the characters with codes `65..220` (the latin alphabet and a little bit extra) by making a string of them:
+
+```js run
+let str = '';
+
+for (let i = 65; i <= 220; i++) {
+  str += String.fromCodePoint(i);
+}
+alert( str );
+// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„
+// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ
+```
+
+See? Capital character go first, then few special ones, then lowercase characters.
+
+Now it becomes obvious why `a > Z`.
+
+The characters are compared by their numeric code. The greater code means that the character is greater. The code for `a` (97) is greater than the code for `Z` (90).
+
+- All lowercase letters go after uppercase letters, their codes are greater.
+- Some letters like `Ö` stand apart from the main alphabet. Here, it's code is greater than anything from `a` to `z`.
+
+
+### Correct comparisons
+
+The "right" algorithm to do string comparisons is more complex than it may seem. Because alphabets are different for different languages. The same-looking letter may be located differently in different alphabets.
+
+So, the browser needs to know the language to compare.
+
+Luckily, all modern browsers (IE10- requires the additional library [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) support the internationalization standard [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf).
+
+It provides a special method to compare strings in different languages, following their rules.
+
+The call [str.localeCompare(str2)](mdn:js/String/localeCompare):
+
+- Returns `1` if `str` is greater than `str2` according to the language rules.
+- Returns `-1` if `str` is less than `str2`.
+- Returns `0` if they are equal.
+
+For instance:
+
+```js run
+alert( 'Österreich'.localeCompare('Zealand') ); // -1
+```
+
+The method actually has two additional arguments specified in [the documentation](mdn:js/String/localeCompare), that allow to specify the language (by default taken from the environment) and setup additional rules like case sensivity or should `"a"` and `"á"` be treated as the same etc.
+
+## Internals, Unicode
+
+```warn header="Advanced knowledge"
+The section goes deeper into string internals. The knowledge will be useful for you if you plan to deal with emoji, rare mathematical of hieroglyphs characters or other rare symbols.
+
+You can skip the section if you don't plan to support them.
+```
+
+### Surrogate pairs
+
+Most symbols have a 2-byte code. Letters of most european languages, numbers, even most hieroglyphs have a 2-byte representation.
+
+But 2 bytes only allow 65536 combinations that's not enough for every possible symbol. So rare symbols are encoded with a pair of 2-byte characters called "a surrogate pair".
+
+The length of such symbols is `2`:
+
+```js run
+alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
+alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
+alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
+```
+
+Note that surrogate pairs did not exist at the time when JavaScript was created, and thus are not correctly processed by the language!
+
+We actually have a single symbol in each of the strings above, but the `length` shows the length of `2`.
+
+`String.fromCodePoint` and `str.codePointAt` are few rare methods that deal with surrogate pairs right. They recently appeared in the language. Before them, there were only [String.fromCharCode](mdn:js/String/fromCharCode) and [str.charCodeAt](mdn:js/String/charCodeAt). These methods are actually the same as `fromCodePoint/codePointAt`, but don't work with surrogate pairs.
+
+But, for instance, getting a symbol can be tricky, because surrogate pairs are treated as two characters:
+
+```js run
+alert( '𝒳'[0] ); // strange symbols...
+alert( '𝒳'[1] ); // ...pieces of the surrogate pair
+```
+
+Note that pieces of the surrogate pair have no meaning without each other. So, the alerts in the example above actually display garbage.
+
+Technically, surrogate pairs are also detectable by their codes: if a character has the code in the interval of `0xd800..0xdbff`, then it is the first part of the surrogate pair. The next character (second part) must have the code in interval `0xdc00..0xdfff`. These intervals are reserved exclusively for surrogate pairs by the standard.
+
+In the case above:
+
+```js run
+// charCodeAt is not surrogate-pair aware, so it gives codes for parts
+
+alert( '𝒳'.charCodeAt(0).toString(16) ); // d835, between 0xd800 and 0xdbff
+alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, between 0xdc00 and 0xdfff
+```
+
+You will find more ways to deal with surrogate pairs later in the chapter <info:iterable>. Probably, there are special libraries for that too, but nothing famous enough to suggest here.
+
+### Diacritical marks and normalization
+
+In many languages there are symbols that are composed of the base character and a mark above/under it.
+
+For instance, letter `a` can be the base character for: `àáâäãåā`. Most common "composite" character have their own code in the UTF-16 table. But not all of them, because there are too many possible combinations.
+
+To support arbitrary compositions, UTF-16 allows to use several unicode characters. The base character and one or many "mark" characters that "decorate" it.
+
+For instance, if we have `S` followed by the special "dot above" character (code `\u0307`), it is shown as Ṡ.
+
+```js run
+alert( 'S\u0307' ); // Ṡ
+```
+
+If we need a one more mark over the letter (or below it) -- no problem, just add the necessary mark character.
+
+For instance, if we append a character "dot below" (code `\u0323`), then we'll have "S with dots above and below": `Ṩ`.
+
+The example:
+
+```js run
+alert( 'S\u0307\u0323' ); // Ṩ
+```
+
+This gives great flexibility, but also an interesting problem: the same symbol visually can be represented with different unicode compositions.
+
+For instance:
+
+```js run
+alert( 'S\u0307\u0323' ); // Ṩ, S + dot above + dot below
+alert( 'S\u0323\u0307' ); // Ṩ, S + dot below + dot above
+
+alert( 'S\u0307\u0323' == 'S\u0323\u0307' ); // false
+```
+
+To solve it, there exists a "unicode normalization" algorithm that brings each string to the single "normal" form.
+
+It is implemented by [str.normalize()](mdn:js/String/normalize).
+
+```js run
+alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true
+```
+
+It's funny that in our situation `normalize()` actually brings a sequence of 3 characters to one: `\u1e68` (S with two dots).
+
+```js run
+alert( "S\u0307\u0323".normalize().length ); // 1
+
+alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
+```
+
+In real, that is not always so. The reason is that symbol `Ṩ` is "common enough", so UTF-16 creators included it into the main table and gave it the code.
+
+If you want to learn more about normalization rules and variants -- they are described in the appendix to the Unicode standard: [Unicode Normalization Forms](http://www.unicode.org/reports/tr15/), but for most practical reasons the information from this section is enough.
+
+
+## Summary
+
+- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions.
+- Strings in JavaScript are encoded using UTF-16.
+- We can use special characters like `\n` and insert letters by their unicode using `\u...`.
+- To get a character: use `[]`.
+- To get a substring: use `slice` or `substring`.
+- To lowercase/uppercase a string: use `toLowerCase/toUpperCase`.
+- To look for a substring: use `indexOf`, or `includes/startsWith/endsWith` for simple checks.
+- To compare strings according to the language, use `localeCompare`, otherwise they are compared by character codes.
+
+There are several other helpful methods in strings:
+
+- `str.trim()` -- removes ("trims") spaces from the beginning and end of the string.
+- `str.repeat(n)` -- repeats the string `n` times.
+- ...and others, see the [manual](mdn:js/String) for details.
+
+Also strings have methods for doing search/replace with regular expressions. But that topic deserves a separate chapter, so we'll return to that later.
diff --git a/1-js/05-data-types/04-array/1-item-value/solution.md b/1-js/05-data-types/04-array/1-item-value/solution.md
new file mode 100644
index 00000000..e631f1c7
--- /dev/null
+++ b/1-js/05-data-types/04-array/1-item-value/solution.md
@@ -0,0 +1,17 @@
+The result is `4`:
+
+
+```js run
+let fruits = ["Apples", "Pear", "Orange"];
+
+let shoppingCart = fruits;
+
+shoppingCart.push("Banana");
+
+*!*
+alert( fruits.length ); // 4
+*/!*
+```
+
+That's because arrays are objects. So both `shoppingCart` and `fruits` are the references to the same array.
+
diff --git a/1-js/05-data-types/04-array/1-item-value/task.md b/1-js/05-data-types/04-array/1-item-value/task.md
new file mode 100644
index 00000000..4fcf384f
--- /dev/null
+++ b/1-js/05-data-types/04-array/1-item-value/task.md
@@ -0,0 +1,19 @@
+importance: 3
+
+---
+
+# Is array copied?
+
+What is this code going to show?
+
+```js
+let fruits = ["Apples", "Pear", "Orange"];
+
+// push a new value into the "copy"
+let shoppingCart = fruits;
+shoppingCart.push("Banana");
+
+// what's in fruits?
+alert( fruits.length ); // ?
+```
+
diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js
new file mode 100644
index 00000000..51632837
--- /dev/null
+++ b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js
@@ -0,0 +1,11 @@
+function getMaxSubSum(arr) {
+  let maxSum = 0;
+  let partialSum = 0;
+
+  for (let item of arr) {
+    partialSum += item;
+    maxSum = Math.max(maxSum, partialSum);
+    if (partialSum < 0) partialSum = 0;
+  }
+  return maxSum;
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js
new file mode 100644
index 00000000..143ad534
--- /dev/null
+++ b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js
@@ -0,0 +1,33 @@
+describe("getMaxSubSum", function() {
+  it("maximal subsum of [1, 2, 3] equals 6", function() {
+    assert.equal(getMaxSubSum([1, 2, 3]), 6);
+  });
+
+  it("maximal subsum of [-1, 2, 3, -9] equals 5", function() {
+    assert.equal(getMaxSubSum([-1, 2, 3, -9]), 5);
+  });
+
+  it("maximal subsum of [-1, 2, 3, -9, 11] equals 11", function() {
+    assert.equal(getMaxSubSum([-1, 2, 3, -9, 11]), 11);
+  });
+
+  it("maximal subsum of [-2, -1, 1, 2] equals 3", function() {
+    assert.equal(getMaxSubSum([-2, -1, 1, 2]), 3);
+  });
+
+  it("maximal subsum of [100, -9, 2, -3, 5] equals 100", function() {
+    assert.equal(getMaxSubSum([100, -9, 2, -3, 5]), 100);
+  });
+
+  it("maximal subsum of [] equals 0", function() {
+    assert.equal(getMaxSubSum([]), 0);
+  });
+
+  it("maximal subsum of [-1] equals 0", function() {
+    assert.equal(getMaxSubSum([-1]), 0);
+  });
+
+  it("maximal subsum of [-1, -2] equals 0", function() {
+    assert.equal(getMaxSubSum([-1, -2]), 0);
+  });
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/solution.md b/1-js/05-data-types/04-array/10-maximal-subarray/solution.md
new file mode 100644
index 00000000..a2ba50bf
--- /dev/null
+++ b/1-js/05-data-types/04-array/10-maximal-subarray/solution.md
@@ -0,0 +1,94 @@
+# The slow solution
+
+We can calculate all possible subsums.
+
+The simplest way is to take every element and calculate sums of all subarrays starting from it.
+
+For instance, for `[-1, 2, 3, -9, 11]`:
+
+```js no-beautify
+// Starting from -1:
+-1
+-1 + 2
+-1 + 2 + 3
+-1 + 2 + 3 + (-9)
+-1 + 2 + 3 + (-9) + 11
+
+// Starting from 2:
+2
+2 + 3
+2 + 3 + (-9)
+2 + 3 + (-9) + 11
+
+// Starting from 3:
+3
+3 + (-9)
+3 + (-9) + 11
+
+// Starting from -9
+-9
+-9 + 11
+
+// Starting from -11
+-11
+```
+
+The code is actually a nested loop: the external loop over array elements, and the internal counts subsums starting with the current element.
+
+```js run
+function getMaxSubSum(arr) {
+  let maxSum = 0; // if we take no elements, zero will be returned
+
+  for (let i = 0; i < arr.length; i++) {
+    let sumFixedStart = 0;
+    for (let j = i; j < arr.length; j++) {
+      sumFixedStart += arr[j];
+      maxSum = Math.max(maxSum, sumFixedStart);
+    }
+  }
+
+  return maxSum;
+}
+
+alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
+alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
+alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
+alert( getMaxSubSum([1, 2, 3]) ); // 6
+alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
+```
+
+The solution has a time complexety of [O(n<sup>2</sup>)](https://en.wikipedia.org/wiki/Big_O_notation). In other words, if we increase the array size 2 times, the algorithm will work 4 times longer.
+
+For big arrays (1000, 10000 or more items) such algorithms can lead to a seroius sluggishness.
+
+# Fast solution
+
+Let's walk the array and keep the current partial sum of elements in the variable `s`. If `s` becomes negative at some point, then assign `s=0`. The maximum of all such `s` will be the answer.
+
+If the description is too vague, please see the code, it's short enough:
+
+```js run
+function getMaxSubSum(arr) {
+  let maxSum = 0;
+  let partialSum = 0;
+
+  for (let item of arr) { // for each item of arr
+    partialSum += item; // add it to partialSum
+    maxSum = Math.max(maxSum, partialSum); // remember the maximum
+    if (partialSum < 0) partialSum = 0; // zero if negative
+  }
+
+  return maxSum;
+}
+
+alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
+alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
+alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
+alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
+alert( getMaxSubSum([1, 2, 3]) ); // 6
+alert( getMaxSubSum([-1, -2, -3]) ); // 0
+```
+
+The algorithm requires exactly 1 array pass, so the time complexity is O(n).
+
+You can find more detail information about the algorithm here: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem). If it's still not obvious why that works, then please trace the algorithm on the examples above, see how it works, that's better than any words.
diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/task.md b/1-js/05-data-types/04-array/10-maximal-subarray/task.md
new file mode 100644
index 00000000..b5ffc4c2
--- /dev/null
+++ b/1-js/05-data-types/04-array/10-maximal-subarray/task.md
@@ -0,0 +1,30 @@
+importance: 2
+
+---
+
+# A maximal subarray
+
+The input is an array of numbers, e.g. `arr = [1, -2, 3, 4, -9, 6]`.
+
+The task is: find the contiguous subarray of `arr` with the maximal sum of items.
+
+Write the function `getMaxSubSum(arr)` that will find return that sum.
+
+For instance: 
+
+```js
+getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (the sum of highlighted items)
+getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6
+getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11
+getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3
+getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100
+getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (take all)
+```
+
+If all items are negative, it means that we take none (the subarray is empty), so the sum is zero:
+
+```js
+getMaxSubSum([-1, -2, -3]) = 0
+```
+
+Please try to think of a fast solution: [O(n<sup>2</sup>)](https://en.wikipedia.org/wiki/Big_O_notation) or even O(n) if you can.
\ No newline at end of file
diff --git a/1-js/05-data-types/04-array/2-create-array/solution.md b/1-js/05-data-types/04-array/2-create-array/solution.md
new file mode 100644
index 00000000..24351434
--- /dev/null
+++ b/1-js/05-data-types/04-array/2-create-array/solution.md
@@ -0,0 +1,10 @@
+
+
+```js run
+let styles = ["Jazz", "Blues"];
+styles.push("Rock-n-Roll");
+styles[(styles.length + 1) / 2] = "Classics";
+alert( styles.shift() );
+styles.unshift("Rap", "Reggie");
+```
+
diff --git a/1-js/05-data-types/04-array/2-create-array/task.md b/1-js/05-data-types/04-array/2-create-array/task.md
new file mode 100644
index 00000000..e6dab6a9
--- /dev/null
+++ b/1-js/05-data-types/04-array/2-create-array/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Array operations.
+
+Let's try 5 array operations.
+
+1. Create an array `styles` with items "Jazz" and "Blues".
+2. Append "Rock-n-Roll" to the end.
+3. Replace the value in the middle by "Classics". Your code for finding the middle value should work for any arrays with odd length.
+4. Strip off the first value of the array and show it.
+5. Prepend `Rap` and `Reggie` to the array.
+
+The array in the process:
+
+```js no-beautify
+Jazz, Blues
+Jazz, Bues, Rock-n-Roll
+Jazz, Classics, Rock-n-Roll
+Classics, Rock-n-Roll
+Rap, Reggie, Classics, Rock-n-Roll
+```
+
diff --git a/1-js/05-data-types/04-array/3-call-array-this/solution.md b/1-js/05-data-types/04-array/3-call-array-this/solution.md
new file mode 100644
index 00000000..e994ae07
--- /dev/null
+++ b/1-js/05-data-types/04-array/3-call-array-this/solution.md
@@ -0,0 +1,15 @@
+The call `arr[2]()` is syntactically the good old `obj[method]()`, in the role of `obj` we have `arr`, and in the role of `method` we have `2`.
+
+So we have a call of the function `arr[2]` as an object method. Naturally, it receives `this` referencing the object `arr` and outputs the array:
+
+```js run
+let arr = ["a", "b"];
+
+arr.push(function() {
+  alert( this );
+})
+
+arr[2](); // "a","b",function
+```
+
+The array has 3 values: initially it had two, plus the function. 
diff --git a/1-js/05-data-types/04-array/3-call-array-this/task.md b/1-js/05-data-types/04-array/3-call-array-this/task.md
new file mode 100644
index 00000000..340c5fee
--- /dev/null
+++ b/1-js/05-data-types/04-array/3-call-array-this/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Calling in an array context
+
+What is the result? Why?
+
+```js
+let arr = ["a", "b"];
+
+arr.push(function() {
+  alert( this );
+})
+
+arr[2](); // ?
+```
+
diff --git a/1-js/05-data-types/04-array/5-array-input-sum/solution.md b/1-js/05-data-types/04-array/5-array-input-sum/solution.md
new file mode 100644
index 00000000..cbdfbded
--- /dev/null
+++ b/1-js/05-data-types/04-array/5-array-input-sum/solution.md
@@ -0,0 +1,27 @@
+Please note the subtle, but important detail of the solution. We don't convert `value` to number instantly after `prompt`, because after `value = +value` we would not be able to tell an empty string (stop sign) from the zero (valid number). We do it later instead.
+
+
+```js run demo
+function sumInput() {
+ 
+  let numbers = [];
+
+  while (true) {
+
+    let value = prompt("A number please?", 0);
+
+    // should we cancel?
+    if (value === "" || value === null || !isFinite(value)) break;
+
+    numbers.push(+value);
+  }
+
+  let sum = 0;
+  for (let number of numbers) {
+    sum += number;
+  }
+}
+
+alert( sumInput() ); 
+```
+
diff --git a/1-js/05-data-types/04-array/5-array-input-sum/task.md b/1-js/05-data-types/04-array/5-array-input-sum/task.md
new file mode 100644
index 00000000..4af8e7c9
--- /dev/null
+++ b/1-js/05-data-types/04-array/5-array-input-sum/task.md
@@ -0,0 +1,15 @@
+importance: 4
+
+---
+
+# Sum input numbers
+
+Write the function `sumInput()` that:
+
+- Asks the user for values using `prompt` and stores the values in the array.
+- Finishes asking when the user enters a non-numeric value, an empty string, or presses "Cancel".
+- Calculates and returns the sum of array items.
+
+P.S. A zero `0` is a valid number, please don't stop the input on zero.
+
+[demo]
diff --git a/1-js/05-data-types/04-array/array-pop.png b/1-js/05-data-types/04-array/array-pop.png
new file mode 100644
index 00000000..023642fa
Binary files /dev/null and b/1-js/05-data-types/04-array/array-pop.png differ
diff --git a/1-js/05-data-types/04-array/array-pop@2x.png b/1-js/05-data-types/04-array/array-pop@2x.png
new file mode 100644
index 00000000..301fd8f6
Binary files /dev/null and b/1-js/05-data-types/04-array/array-pop@2x.png differ
diff --git a/1-js/05-data-types/04-array/array-shift.png b/1-js/05-data-types/04-array/array-shift.png
new file mode 100644
index 00000000..5f2cef5d
Binary files /dev/null and b/1-js/05-data-types/04-array/array-shift.png differ
diff --git a/1-js/05-data-types/04-array/array-shift@2x.png b/1-js/05-data-types/04-array/array-shift@2x.png
new file mode 100644
index 00000000..1bd68b31
Binary files /dev/null and b/1-js/05-data-types/04-array/array-shift@2x.png differ
diff --git a/1-js/05-data-types/04-array/array-speed.png b/1-js/05-data-types/04-array/array-speed.png
new file mode 100644
index 00000000..3737e824
Binary files /dev/null and b/1-js/05-data-types/04-array/array-speed.png differ
diff --git a/1-js/05-data-types/04-array/array-speed@2x.png b/1-js/05-data-types/04-array/array-speed@2x.png
new file mode 100644
index 00000000..e45624b5
Binary files /dev/null and b/1-js/05-data-types/04-array/array-speed@2x.png differ
diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md
new file mode 100644
index 00000000..bd7a64e6
--- /dev/null
+++ b/1-js/05-data-types/04-array/article.md
@@ -0,0 +1,466 @@
+# Arrays 
+
+Objects allow to store keyed collections of values. That's fine.
+
+But quite often we find that we need an *ordered collection*, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. 
+
+It not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use.
+
+There exists a special data structure named `Array`, to store ordered collections. 
+
+[cut]
+
+## Declaration
+
+There are two syntaxes for creating an empty array:
+
+```js
+let arr = new Array();
+let arr = [];
+```
+
+Almost all the time, the second syntax is used. We can supply initial elements in the brackets:
+
+```js
+let fruits = ["Apple", "Orange", "Plum"];
+```
+
+Array elements are numbered, starting with zero.
+
+We can get an element by its number in square brackets:
+
+```js run
+let fruits = ["Apple", "Orange", "Plum"];
+
+alert( fruits[0] ); // Apple
+alert( fruits[1] ); // Orange
+alert( fruits[2] ); // Plum
+```
+
+We can replace an element:
+
+```js
+fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"]
+```
+
+...Or add a new one to the array:
+
+```js
+fruits[3] = 'Lemon'; // now ["Apple", "Orange", "Pear", "Lemon"]
+```
+
+The total count of the elements in the array is its `length`:
+
+```js run
+let fruits = ["Apple", "Orange", "Plum"];
+
+alert( fruits.length ); // 3
+```
+
+We can also use `alert` to show the whole array.
+
+```js run
+let fruits = ["Apple", "Orange", "Plum"];
+
+alert( fruits ); // Apple,Orange,Plum
+```
+
+An array can store elements of any type.
+
+For instance:
+
+```js run no-beautify
+// mix of values
+let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];
+
+// get the object at index 1 and then show its name
+alert( arr[1].name ); // John
+
+// get the function at index 3 and run it
+arr[3](); // hello
+```
+
+
+````smart header="Trailing comma"
+An array, just like an object, may end with a comma:
+```js 
+let fruits = [
+  "Apple", 
+  "Orange", 
+  "Plum"*!*,*/!*
+];
+```
+
+The "trailing comma" style makes it easier to insert/remove items, because all lines become alike.
+````
+
+
+## Methods pop/push, shift/unshift
+
+A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:
+
+- `push` appends an element to the end.
+- `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.
+
+![](queue.png)
+
+Arrays support both operations.
+
+In practice we meet it very often. For example, a queue of messages that need to be shown on-screen.
+
+There's another use case for arrays -- the data structure named [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). 
+
+It supports two operations:
+
+- `push` adds an element to the end.
+- `pop` takes an element to the end.
+
+So new elements are added or taken always from the "end".
+
+A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:
+
+![](stack.png)
+
+For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).
+
+Arrays in JavaScript can work both as a queue and as a stack. They allow to add/remove elements both to/from the beginning or the end. 
+
+In computer science the data structure that allows it is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue).
+
+**Methods that work with the end of the array:**
+
+`pop`
+: Extracts the last element of the array and returns it:
+
+    ```js run
+    let fruits = ["Apple", "Orange", "Pear"];
+
+    alert( fruits.pop() ); // remove "Pear" and alert it
+
+    alert( fruits ); // Apple, Orange
+    ```
+
+`push`
+: Append the element to the end of the array:
+
+    ```js run
+    let fruits = ["Apple", "Orange"];
+
+    fruits.push("Pear");
+
+    alert( fruits ); // Apple, Orange, Pear
+    ```
+
+    The call `fruits.push(...)` is equal to `fruits[fruits.length] = ...`.
+
+**Methods that work with the beginning of the array:**
+
+`shift`
+: Extracts the first element of the array and returns it:
+
+    ```js
+    let fruits = ["Apple", "Orange", "Pear"];
+
+    alert( fruits.shift() ); // remove Apple and alert it
+
+    alert( fruits ); // Orange, Pear
+    ```
+
+`unshift`
+: Add the element to the beginning of the array:
+
+    ```js
+    let fruits = ["Orange", "Pear"];
+
+    fruits.unshift('Apple');
+
+    alert( fruits ); // Apple, Orange, Pear
+    ```
+
+Methods `push` and `unshift` can add multiple elements at once:
+
+```js run
+let fruits = ["Apple"];
+
+fruits.push("Orange", "Peach");
+fruits.unshift("Pineapple", "Lemon");
+
+// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
+alert( fruits );
+```
+
+## Internals
+
+An array is a special kind of object. The square brackets used to access a property `arr[0]` actually come from the object syntax. Numbers are used as keys. 
+
+They extend objects providing special methods to work with ordered collections of data and also the `length` property. But at the core it's still an object.
+
+Remember, there are only 7 basic types in JavaScript. Array is an object and thus behaves like an object. 
+
+For instance, it is copied by reference:
+
+```js run
+let fruits = ["Banana"]
+
+let arr = fruits; // copy by reference (two variables reference the same array)
+
+alert( arr === fruits ); // true
+ 
+arr.push("Pear"); // modify the array by reference
+
+alert( fruits ); // Banana, Pear - 2 items now
+```
+
+...But what makes arrays really  special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast.
+
+But they all break if we quit working with an array as with an "ordered collection" and start working with it as if it were a regular object.
+
+For instance, technically we can do like that:
+
+```js
+let fruits = []; // make an array
+
+fruits[99999] = 5; // assign a property with the index far greater than its length
+
+fruits.age = 25; // create a property with an arbitrary name
+```
+
+That's possible, because arrays are objects at their base. We can add any properties to them.
+
+But the engine will see that we're working with the array as with a regular object. Array-specific optimizations are not suited for such cases and will be turned off, their benefits disappear.
+
+The ways to misuse an array:
+
+- Add a non-numeric property like `arr.test = 5`. 
+- Make holes, like: add `arr[0]` and then `arr[1000]` (and nothing between them).
+- Fill the array in the reverse order, like `arr[1000]`, `arr[999]` and so on.
+
+Please think of arrays as special structures to work with the *ordered data*. They provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object `{}`.
+
+## Performance
+
+Methods `push/pop` run fast, while `shift/unshift` are slow.
+
+![](array-speed.png)
+
+Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution:
+
+```js
+fruits.shift(); // take 1 element from the start
+```
+
+It's not enough to take and remove the element with the number `0`. Other elements need to be renumbered as well.
+
+The `shift` operation must do 3 things:
+
+1. Remove the element with the index `0`.
+2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on.
+3. Update the `length` property.
+
+![](array-shift.png)
+
+**The more elements in the array, the more time to move them, more in-memory operations.**
+
+The similar thing happens with `unshift`: to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes.
+
+And what's with `push/pop`? They do not need to move anything. To extract an element from the end, the `pop` method cleans the index and shortens `length`.
+
+The actions for the `pop` operation:
+
+```js
+fruits.pop(); // take 1 element from the end
+```
+
+![](array-pop.png)
+
+**The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.**
+
+The similar thing with the `push` method.
+
+## Loops
+
+One of the oldest ways to cycle array items is the `for` loop over indexes:
+
+```js run
+let arr = ["Apple", "Orange", "Pear"];
+
+*!*
+for (let i = 0; i < arr.length; i++) {
+*/!*
+  alert( arr[i] );
+}
+```
+
+But for arrays there is another form of loop, `for..of`:
+
+```js run
+let fruits = ["Apple", "Orange", "Plum"];
+
+// iterates over array elements
+for(let fruit of fruits) {
+  alert( fruit ); 
+}
+```
+
+The `for..of` doesn't give access to the number of the current element, just its value, but in most cases that's enough. And it's shorter.
+
+Technically, because arrays are objects, it is also possible to use `for..in`:
+
+```js run
+let arr = ["Apple", "Orange", "Pear"];
+
+*!*
+for (let key in arr) {
+*/!*
+  alert( arr[key] ); // Apple, Orange, Pear
+}
+```
+
+But that's actually a bad idea. There are potential problems with it:
+
+1. The loop `for..in` iterates over *all properties*, not only the numeric ones.
+
+    There are so-called "array-like" objects in the browser and in other environments, that *look like arrays*. That is, they have `length` and indexes properties, but they may also have other non-numeric properties and methods, which we usually don't need. The `for..in` loop will list them though. So if we need to work with array-like objects, then these "extra" properties can become a problem.
+
+2. The `for..in` loop is optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it's still very fast. The speedup may matter only in bottlenecks or just irrelevant. But still we should be aware of the difference.
+
+Generally, we shouldn't use `for..in` for arrays.
+
+
+## A word about "length"
+
+The `length` property automatically updates when we modify the array. To be precise, it is actually not the count of values in the array, but the greatest numeric index plus one.
+
+For instance, a single element with a large index gives a big length:
+
+```js run
+let fruits = [];
+fruits[123] = "Apple";
+
+alert( fruits.length ); // 124
+```
+
+Note that we usually don't use arrays like that. 
+
+Another interesting thing about the `length` property is that it's writable.
+
+If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversible, here's the example:
+
+```js run
+let arr = [1, 2, 3, 4, 5];
+
+arr.length = 2; // truncate to 2 elements
+alert( arr ); // [1, 2]
+
+arr.length = 5; // return length back
+alert( arr[3] ); // undefined: the values do not return
+```
+
+So, the simplest way to clear the array is: `arr.length=0`.
+
+
+## new Array() [#new-array]
+
+There is one more syntax to create an array:
+
+```js
+let arr = *!*new Array*/!*("Apple", "Pear", "etc");
+```
+
+It's rarely used, because square brackets `[]` are shorter. Also there's a tricky feature with it.
+
+If `new Array` is called with a single argument which is a number, then it creates an array *without items, but with the given length*.
+
+Let's see how one can shoot himself in the foot:
+
+```js run
+let arr = new Array(2); // will it create an array of [2] ?
+
+alert( arr[0] ); // undefined! no elements.
+
+alert( arr.length ); // length 2
+```
+
+In the code above, `new Array(number)` has all elements `undefined`.
+
+To evade such surprises, we usually use square brackets, unless we really know what we're doing.
+
+## Multidimentional arrays
+
+Arrays can have items that are also arrays. We can use it for multidimentional arrays, to store matrices:
+
+```js run
+let matrix = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9]
+];
+
+alert( matrix[1][1] ); // the central element
+```
+
+## toString
+
+Arrays have their own implementation of `toString` method that returns a comma-separated list of elements.
+
+For instance:
+
+
+```js run
+let arr = [1, 2, 3];
+
+alert( arr ); // 1,2,3
+alert( String(arr) === '1,2,3' ); // true
+```
+
+Also, let's try this:
+
+```js run
+alert( [] + 1 ); // "1"
+alert( [1] + 1 ); // "11"
+alert( [1,2] + 1 ); // "1,21"
+```
+
+Arrays do not have `Symbol.toPrimitive`, neither a viable `valueOf`, they implement only `toString` conversion, so here `[]` becomes an empty string, `[1]` becomes `"1"` and `[1,2]` becomes `"1,2".
+
+When the binary plus `"+"` operator adds something to a string, it converts it to a string as well, so the next step looks like this:
+
+```js run
+alert( "" + 1 ); // "1"
+alert( "1" + 1 ); // "11"
+alert( "1,2" + 1 ); // "1,21"
+```
+
+## Summary
+
+Array is a special kind of objects, suited to store and manage ordered data items.
+
+- The declaration:
+
+    ```js
+    // square brackets (usual)
+    let arr = [item1, item2...];
+
+    // new Array (exceptionally rare)
+    let arr = new Array(item1, item2...);
+    ```
+
+    The call to `new Array(number)` creates an array with the given length, but without elements.
+
+- The `length` property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods. 
+- If we shorten `length` manually, the array is truncated.
+
+We can use an array as a deque with the following operations:
+
+- `push(...items)` adds `items` to the end.
+- `pop()` removes the element from the end and returns it.
+- `shift()` removes the element from the beginning and returns it.
+- `unshift(...items)` adds items to the beginning.
+
+To loop over the elements of the array:
+  - `for(let i=0; i<arr.length; i++)` -- works fastest, old-browser-compatible.
+  - `for(let item of arr)` -- the modern syntax for items only,
+  - `for(let i in arr)` -- never use.
+
+We will return to arrays and study more methods to add, remove, extract elements and sort arrays in the chapter <info:array-methods>.
+
diff --git a/1-js/05-data-types/04-array/queue.png b/1-js/05-data-types/04-array/queue.png
new file mode 100644
index 00000000..5e1fb640
Binary files /dev/null and b/1-js/05-data-types/04-array/queue.png differ
diff --git a/1-js/05-data-types/04-array/queue@2x.png b/1-js/05-data-types/04-array/queue@2x.png
new file mode 100644
index 00000000..6acfc83d
Binary files /dev/null and b/1-js/05-data-types/04-array/queue@2x.png differ
diff --git a/1-js/05-data-types/04-array/stack.png b/1-js/05-data-types/04-array/stack.png
new file mode 100644
index 00000000..d1c9cb9a
Binary files /dev/null and b/1-js/05-data-types/04-array/stack.png differ
diff --git a/1-js/05-data-types/04-array/stack@2x.png b/1-js/05-data-types/04-array/stack@2x.png
new file mode 100644
index 00000000..b3835fa4
Binary files /dev/null and b/1-js/05-data-types/04-array/stack@2x.png differ
diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js b/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js
new file mode 100644
index 00000000..024d6d6c
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js
@@ -0,0 +1,8 @@
+function camelize(str) {
+  return str
+    .split('-') // my-long-word -> ['my', 'long', 'word']
+    .map( 
+      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
+    ) // ['my', 'long', 'word'] -> ['my', 'Long', 'Word']
+    .join(''); // ['my', 'Long', 'Word'] -> myLongWord
+}
diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js b/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js
new file mode 100644
index 00000000..bcf5e955
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js
@@ -0,0 +1,19 @@
+describe("camelize", function() {
+
+  it("leaves an empty line as is", function() {
+    assert.equal(camelize(""), "");
+  });
+
+  it("turns background-color into backgroundColor", function() {
+    assert.equal(camelize("background-color"), "backgroundColor");
+  });
+
+  it("turns list-style-image into listStyleImage", function() {
+    assert.equal(camelize("list-style-image"), "listStyleImage");
+  });
+
+  it("turns -webkit-transition into WebkitTransition", function() {
+    assert.equal(camelize("-webkit-transition"), "WebkitTransition");
+  });
+
+});
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.md b/1-js/05-data-types/05-array-methods/1-camelcase/solution.md
similarity index 100%
rename from 2-ui/1-document/17-coordinates/2-position-at/solution.md
rename to 1-js/05-data-types/05-array-methods/1-camelcase/solution.md
diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/task.md b/1-js/05-data-types/05-array-methods/1-camelcase/task.md
new file mode 100644
index 00000000..6e27d9ce
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/1-camelcase/task.md
@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# Translate border-left-width to borderLeftWidth
+
+Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString".
+
+That is: removes all dashes, each word after dash becomes uppercased.
+
+Examples:
+
+```js
+camelize("background-color") == 'backgroundColor';
+camelize("list-style-image") == 'listStyleImage';
+camelize("-webkit-transition") == 'WebkitTransition';
+```
+
+
diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js
new file mode 100644
index 00000000..d15cea2c
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js
@@ -0,0 +1,11 @@
+function unique(arr) {
+  let result = [];
+
+  for (let str of arr) {
+    if (!result.includes(str)) {
+      result.push(str);
+    }
+  }
+
+  return result;
+}
diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js
new file mode 100644
index 00000000..cfc7b1fc
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("unique", function() {
+  it("removes non-unique elements", function() {
+    let strings = ["Hare", "Krishna", "Hare", "Krishna",
+      "Krishna", "Krishna", "Hare", "Hare", ":-O"
+    ];
+
+    assert.deepEqual(unique(strings), ["Hare", "Krishna", ":-O"]);
+  });
+
+  it("does not change the source array", function() {
+    let strings = ["Krishna", "Krishna", "Hare", "Hare"];
+    unique(strings);
+    assert.deepEqual(strings, ["Krishna", "Krishna", "Hare", "Hare"]);
+  });
+});
diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/solution.md b/1-js/05-data-types/05-array-methods/11-array-unique/solution.md
new file mode 100644
index 00000000..5b565d42
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/11-array-unique/solution.md
@@ -0,0 +1,39 @@
+Let's walk the array items:
+- For each item we'll check if the resulting array already has that item.
+- If it is so, then ignore, otherwise add to results.
+
+```js run
+function unique(arr) {
+  let result = [];
+
+  for (let str of arr) {
+    if (!result.includes(str) {
+      result.push(str);
+    }
+  }
+
+  return result;
+}
+
+let strings = ["Hare", "Krishna", "Hare", "Krishna",
+  "Krishna", "Krishna", "Hare", "Hare", ":-O"
+];
+
+alert( unique(strings) ); // Hare, Krishna, :-O
+```
+
+The code works, but there's a potential performance problem in it.
+
+The method `result.includes(str)` internally walks the array `result` and compares each element against `str` to find the match.
+
+So if there are `100` elements in `result` and no one matches `str`, then it will walk the whole `result` and do exactly `100` comparisons. And if `result` is large, like `10000`, then there would be `10000` comparisons.
+
+That's not a problem by itself, because JavaScript engines are very fast, so walk `10000` array is a matter of microseconds.
+
+But we do such test for each element of `arr`, in the `for` loop.
+
+So if `arr.length` is `10000` we'll have something like `10000*10000` = 100 millions of comparisons. That's a lot.
+
+So the solution is only good for small arrays.
+
+Further in the chapter <info:map-set-weakmap-weakset> we'll see how to optimize it.
diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/task.md b/1-js/05-data-types/05-array-methods/11-array-unique/task.md
new file mode 100644
index 00000000..5b56d362
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/11-array-unique/task.md
@@ -0,0 +1,23 @@
+importance: 4
+
+---
+
+# Filter unique array members
+
+Let `arr` be an array.
+
+Create a function `unique(arr)` that should return an array with unique items of `arr`.
+
+For instance:
+
+```js
+function unique(arr) {
+  /* your code */
+}
+
+let strings = ["Hare", "Krishna", "Hare", "Krishna",
+  "Krishna", "Krishna", "Hare", "Hare", ":-O"
+];
+
+alert( unique(strings) ); // Hare, Krishna, :-O
+```
diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js
new file mode 100644
index 00000000..0bdfbae5
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js
@@ -0,0 +1,5 @@
+
+function filterRange(arr, a, b) {
+  // added brackets around the expression for better readability
+  return arr.filter(item => (a <= item && item <= b));
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js
new file mode 100644
index 00000000..fb26c8dc
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js
@@ -0,0 +1,21 @@
+describe("filterRange", function() {
+
+  it("returns the filtered values", function() {
+
+    let arr = [5, 3, 8, 1];
+
+    let filtered = filterRange(arr, 1, 4); 
+
+    assert.deepEqual(filtered, [3, 1]);
+  });
+
+  it("doesn't change the array", function() {
+
+    let arr = [5, 3, 8, 1];
+
+    let filtered = filterRange(arr, 1, 4); 
+
+    assert.deepEqual(arr, [5,3,8,1]);
+  });
+
+});
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.md b/1-js/05-data-types/05-array-methods/2-filter-range/solution.md
similarity index 100%
rename from 2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.md
rename to 1-js/05-data-types/05-array-methods/2-filter-range/solution.md
diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/task.md b/1-js/05-data-types/05-array-methods/2-filter-range/task.md
new file mode 100644
index 00000000..fb6f06ee
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/2-filter-range/task.md
@@ -0,0 +1,22 @@
+importance: 4
+
+---
+
+# Filter "in place"
+
+Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements between `a` and `b` in it and returns an array of them. 
+
+The function should not modify the array. It should return the new array.
+
+For instance:
+
+```js
+let arr = [5, 3, 8, 1];
+
+let filtered = filterRange(arr, 1, 4); 
+
+alert( filtered ); // 3,1 (matching values)
+
+alert( arr ); // 5,3,8,1 (not modified)
+```
+
diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js
new file mode 100644
index 00000000..61cda126
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js
@@ -0,0 +1,15 @@
+
+
+function filterRangeInPlace(arr, a, b) {
+
+  for (let i = 0; i < arr.length; i++) {
+    let val = arr[i];
+
+    // remove if outside of the interval
+    if (val < a || val > b) {
+      arr.splice(i, 1);
+      i--;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js
new file mode 100644
index 00000000..db32d9a1
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js
@@ -0,0 +1,16 @@
+describe("filterRangeInPlace", function() {
+
+  it("returns the filtered values", function() {
+
+    let arr = [5, 3, 8, 1];
+
+    filterRangeInPlace(arr, 1, 4); 
+
+    assert.deepEqual(arr, [3, 1]);
+  });
+
+  it("doesn't return anything", function() {
+    assert.isUndefined(filterRangeInPlace([1,2,3], 1, 4)); 
+  });
+
+});
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.md b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md
similarity index 100%
rename from 2-ui/1-document/18-coordinates-document/3-position-at-2/solution.md
rename to 1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md
diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md
new file mode 100644
index 00000000..a737a525
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md
@@ -0,0 +1,18 @@
+importance: 4
+
+---
+
+# Filter range "in place"
+
+Write a function `filterRangeInPlace(arr, a, b)` that gets an array `arr` and removes from it all values except those that are between `a` and `b. The test is: `a ≤ arr[i] ≤ b`.
+
+The function should only modify the array. It should not return anything.
+
+For instance:
+```js
+let arr = [5, 3, 8, 1];
+
+filterRangeInPlace(arr, 1, 4); // removed the numbers except from 1 to 4
+
+alert( arr ); // [3, 1]
+```
diff --git a/1-js/05-data-types/05-array-methods/4-sort-back/solution.md b/1-js/05-data-types/05-array-methods/4-sort-back/solution.md
new file mode 100644
index 00000000..5a9f076b
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/4-sort-back/solution.md
@@ -0,0 +1,10 @@
+
+
+```js run
+let arr = [5, 2, 1, -10, 8];
+
+arr.sort((a,b) => b - a);
+
+alert( arr );
+```
+
diff --git a/1-js/05-data-types/05-array-methods/4-sort-back/task.md b/1-js/05-data-types/05-array-methods/4-sort-back/task.md
new file mode 100644
index 00000000..05a08aad
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/4-sort-back/task.md
@@ -0,0 +1,14 @@
+importance: 4
+
+---
+
+# Sort in the reverse order
+
+```js
+let arr = [5, 2, 1, -10, 8];
+
+// ... your code to sort it in the reverse order
+
+alert( arr ); // 8, 5, 2, 1, -10
+```
+
diff --git a/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md b/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md
new file mode 100644
index 00000000..8537b129
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md
@@ -0,0 +1,17 @@
+We can use `slice()` to make a copy and run the sort on it:
+
+```js run
+function copySorted(arr) {
+  return arr.slice().sort();
+}
+
+let arr = ["HTML", "JavaScript", "CSS"];
+
+*!*
+let sorted = copySorted(arr);
+*/!*
+
+alert( sorted );
+alert( arr );
+```
+
diff --git a/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md b/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md
new file mode 100644
index 00000000..c1395b4a
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Copy and sort array
+
+We have an array of strings `arr`. We'd like to have a sorted copy of it, but keep `arr` unmodified.
+
+Create a function `copySorted(arr)` that returns such a copy.
+
+```js
+let arr = ["HTML", "JavaScript", "CSS"];
+
+let sorted = copySorted(arr);
+
+alert( sorted ); // CSS, HTML, JavaScript
+alert( arr ); // HTML, JavaScript, CSS (no changes)
+```
diff --git a/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md b/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md
new file mode 100644
index 00000000..f44a2b81
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md
@@ -0,0 +1,13 @@
+```js run
+
+let john = { name: "John", age: 25 };
+let pete = { name: "Pete", age: 30 };
+let mary = { name: "Mary", age: 28 };
+
+let users = [ john, pete, mary ];
+
+let names = users.map(item => item.name);
+
+alert( names ); // John, Pete, Mary
+```
+
diff --git a/1-js/05-data-types/05-array-methods/6-array-get-names/task.md b/1-js/05-data-types/05-array-methods/6-array-get-names/task.md
new file mode 100644
index 00000000..74c8a9d7
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/6-array-get-names/task.md
@@ -0,0 +1,22 @@
+importance: 5
+
+---
+
+# Map to names
+
+You have an array of `user` objects, each one has `user.name`. Write the code that converts it into an array of names.
+
+For instance:
+
+```js no-beautify
+let john = { name: "John", age: 25 };
+let pete = { name: "Pete", age: 30 };
+let mary = { name: "Mary", age: 28 };
+
+let users = [ john, pete, mary ];
+
+let names = /* ... your code */
+
+alert( names ); // John, Pete, Mary
+```
+
diff --git a/1-js/05-data-types/05-array-methods/7-map-objects/solution.md b/1-js/05-data-types/05-array-methods/7-map-objects/solution.md
new file mode 100644
index 00000000..5e9b815f
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/7-map-objects/solution.md
@@ -0,0 +1,51 @@
+
+```js run no-beautify
+let john = { name: "John", surname: "Smith", id: 1 };
+let pete = { name: "Pete", surname: "Hunt", id: 2 };
+let mary = { name: "Mary", surname: "Key", id: 3 };
+
+let users = [ john, pete, mary ];
+
+*!*
+let usersMapped = users.map(user => ({
+  fullName: `${user.name} ${user.surname}`,
+  id: user.id
+}));
+*/!*
+
+/*
+usersMapped = [
+  { fullName: "John Smith", id: 1 },
+  { fullName: "Pete Hunt", id: 2 },
+  { fullName: "Mary Key", id: 3 }
+]
+*/
+
+alert( usersMapped[0].id ) // 1
+alert( usersMapped[0].fullName ) // John Smith
+```
+
+Please note that in for the arrow functions we need to use additional brackets. 
+
+We can't write like this:
+```js
+let usersMapped = users.map(user => *!*{*/!*
+  fullName: `${user.name} ${user.surname}`,
+  id: user.id
+});
+```
+
+As we remember, there are two arrow functions: without body `value => expr` and with body `value => {...}`.
+
+Here JavaScript would treat `{` as the start of function body, not the start of the object. The workaround is to wrap them in the "normal" brackets:
+
+```js
+let usersMapped = users.map(user => *!*({*/!*
+  fullName: `${user.name} ${user.surname}`,
+  id: user.id
+});
+```
+
+Now fine.
+
+
diff --git a/1-js/05-data-types/05-array-methods/7-map-objects/task.md b/1-js/05-data-types/05-array-methods/7-map-objects/task.md
new file mode 100644
index 00000000..b11d1215
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/7-map-objects/task.md
@@ -0,0 +1,36 @@
+importance: 5
+
+---
+
+# Map to objects
+
+You have an array of `user` objects, each one has `name`, `surname` and `id`.
+
+Write the code to create another array from it, of objects with `id` and `fullName`, where `fullName` is generated from `name` and `surname`.
+
+For instance:
+
+```js no-beautify
+let john = { name: "John", surname: "Smith", id: 1 };
+let pete = { name: "Pete", surname: "Hunt", id: 2 };
+let mary = { name: "Mary", surname: "Key", id: 3 };
+
+let users = [ john, pete, mary ];
+
+*!*
+let usersMapped = /* ... your code ... */
+*/!*
+
+/*
+usersMapped = [
+  { fullName: "John Smith", id: 1 },
+  { fullName: "Pete Hunt", id: 2 },
+  { fullName: "Mary Key", id: 3 }
+]
+*/
+
+alert( usersMapped[0].id ) // 1
+alert( usersMapped[0].fullName ) // John Smith
+```
+
+So, actually you need to map one array of objects to another. Try using `=>` here. There's a small catch.
\ No newline at end of file
diff --git a/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md b/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md
new file mode 100644
index 00000000..2c7c5181
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md
@@ -0,0 +1,17 @@
+```js run no-beautify
+function sortByName(arr) {
+  arr.sort((a, b) => a.name > b.name);
+}
+
+let john = { name: "John", age: 25 };
+let pete = { name: "Pete", age: 30 };
+let mary = { name: "Mary", age: 28 };
+
+let arr = [ john, pete, mary ];
+
+sortByName(arr);
+
+// now sorted is: [john, mary, pete]
+alert(arr[1].name) // Mary
+```
+
diff --git a/1-js/05-data-types/05-array-methods/8-sort-objects/task.md b/1-js/05-data-types/05-array-methods/8-sort-objects/task.md
new file mode 100644
index 00000000..935c27fc
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/8-sort-objects/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Sort objects
+
+Write the function `sortByName(users)` that gets an array of objects with property `name` and sorts it.
+
+For instance:
+
+```js no-beautify
+let john = { name: "John", age: 25 }
+let pete = { name: "Pete", age: 30 }
+let mary = { name: "Mary", age: 28 }
+
+let arr = [ john, pete, mary ];
+
+lsortByName(arr);
+
+// now: [john, mary, pete]
+alert(arr[1].name) // Mary
+```
+
diff --git a/1-js/05-data-types/05-array-methods/9-average-age/solution.md b/1-js/05-data-types/05-array-methods/9-average-age/solution.md
new file mode 100644
index 00000000..87bb3a94
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/9-average-age/solution.md
@@ -0,0 +1,14 @@
+```js run
+function getAverageAge(users) {
+  return arr.reduce((prev, user) => prev + user.age, 0) / arr.length;
+}
+
+let john = { name: "John", age: 25 }
+let pete = { name: "Pete", age: 30 }
+let mary = { name: "Mary", age: 29 }
+
+let arr = [ john, pete, mary ];
+
+alert( getAverageAge(arr) ); // 28
+```
+
diff --git a/1-js/05-data-types/05-array-methods/9-average-age/task.md b/1-js/05-data-types/05-array-methods/9-average-age/task.md
new file mode 100644
index 00000000..ccb2142d
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/9-average-age/task.md
@@ -0,0 +1,22 @@
+importance: 4
+
+---
+
+# Get average age
+
+Write the function `getAverageAge(users)` that gets an array of objects with property `age` and gets the average.
+
+The formula for the average is `(age1 + age2 + ... + ageN) / N`.
+
+For instance:
+
+```js no-beautify
+let john = { name: "John", age: 25 }
+let pete = { name: "Pete", age: 30 }
+let mary = { name: "Mary", age: 29 }
+
+let arr = [ john, pete, mary ];
+
+alert( getAverageAge(arr) ); // (25+30+29)/3 = 28
+```
+
diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md
new file mode 100644
index 00000000..a16707fc
--- /dev/null
+++ b/1-js/05-data-types/05-array-methods/article.md
@@ -0,0 +1,705 @@
+# Array methods
+
+Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups.
+
+[cut]
+
+## Add/remove items
+
+We already know methods that add and remove items from the beginning or the end:
+
+- `arr.push(...items)` -- adds items to the end,
+- `arr.pop()` -- extracts an item from the end,
+- `arr.shift()` -- extracts an item from the beginning,
+- `arr.unshift(...items)` -- adds items to the beginning.
+
+Here are few others.
+
+### splice
+
+How to delete an element from the array?
+
+The arrays are objects, so we can try to use `delete`:
+
+```js run
+let arr = ["I", "go", "home"];
+
+delete arr[1]; // remove "go"
+
+alert( arr[1] ); // undefined
+
+// now arr = ["I",  , "home"];
+alert( arr.length ); // 3
+```
+
+The element was removed, but the array still has 3 elements, we can see that `arr.length == 3`.
+
+That's natural, because `delete obj.key` removes a value by the `key`. It's all it does. Fine for objects. But for arrays we usually want the rest of elements to shift and occupy the freed place. We expect to have a shorter array now.
+
+So, special methods should be used.
+
+The [arr.splice(str)](mdn:js/Array/splice) method is a swiss army knife for arrays. It can do everything: add, remove and insert elements.
+
+The syntax is:
+
+```js
+arr.splice(index[, deleteCount, elem1, ..., elemN])
+```
+
+It starts from the position `index`: removes `deleteCount` elements and then inserts `elem1, ..., elemN` at their place. Returns the array of removed elements.
+
+This method is easy to grasp by examples.
+
+Let's start with the deletion:
+
+```js run
+let arr = ["I", "study", "JavaScript"];
+
+*!*
+arr.splice(1, 1); // from index 1 remove 1 element
+*/!*
+
+alert( arr ); // ["I", "JavaScript"]
+```
+
+Easy, right? Starting from the index `1` it removed `1` element.
+
+In the next example we remove 3 elements and replace them by the other two:
+
+```js run
+let arr = [*!*"I", "study", "JavaScript",*/!* "right", "now"];
+
+// remove 3 first elements and replace them by another
+arr.splice(0, 3, "Let's", "dance")
+
+alert( arr ) // now [*!*"Let's", "dance"*/!*, "right", "now"]
+```
+
+Here we can see that `splice` returns the array of removed elements:
+
+```js run
+let arr = [*!*"I", "study",*/!* "JavaScript", "right", "now"];
+
+// remove 2 first elements
+let removed = arr.splice(0, 2);
+
+alert( removed ); // "I", "study" <-- array of removed elements
+```
+
+The `splice` method is also able to insert the elements without any removals. For that we need to set `deleteCount` to `0`:
+
+```js run
+let arr = ["I", "study", "JavaScript"];
+
+// from index 2
+// delete 0
+// then insert "complex" and "language"
+arr.splice(2, 0, "complex", "language");
+
+alert( arr ); // "I", "study", "complex", "language", "JavaScript"
+```
+
+````smart header="Negative indexes allowed"
+Here and in other array methods, negative indexes are allowed. The specify the position from the end of the array, like here:
+
+```js run
+let arr = [1, 2, 5]
+
+// from index -1 (one step from the end)
+// delete 0 elements,
+// then insert 3 and 4
+arr.splice(-1, 0, 3, 4);
+
+alert( arr ); // 1,2,3,4,5
+```
+````
+
+### slice
+
+The method [arr.slice](mdn:js/Array/slice) is much simpler than similar-looking `arr.splice`.
+
+The syntax is:
+
+```js
+arr.slice(start, end)
+```
+
+It returns a new array where it copies all items start index `"start"` to `"end"` (not including `"end"`). Both `start` and `end` can be negative, in that case position from array end is assumed.
+
+It works like `str.slice`, but makes subarrays instead of substrings.
+
+For instance:
+
+```js run
+let str = "test";
+let arr = ["t", "e", "s", "t"];
+
+alert( str.slice(1, 3) ); // es
+alert( arr.slice(1, 3) ); // e,s
+
+alert( str.slice(-2) ); // st
+alert( arr.slice(-2) ); // s,t
+```
+
+### concat
+
+The method [arr.concat](mdn:js/Array/concat) joins the array with other arrays and/or items.
+
+The syntax is:
+
+```js
+arr.concat(arg1, arg2...)
+```
+
+It accepts any number of arguments -- either arrays or values.
+
+The result is a new array containing items from `arr`, then `arg1`, `arg2` etc.
+
+If an argument is an array or has `Symbol.isConcatSpreadable` property, then all its elements are copied. Otherwise the argument itself is copied.
+
+For instance:
+
+```js run
+let arr = [1, 2];
+
+// merge arr with [3,4]
+alert( arr.concat([3, 4])); // 1,2,3,4
+
+// merge arr with [3,4] and [5,6]
+alert( arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6
+
+// merge arr with [3,4], then add values 5 and 6
+alert( arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6
+```
+
+Normally, it only copies elements from arrays ("spreads" them), other objects even if they look like arrays and added as a whole:
+
+```js run
+let arr = [1, 2];
+
+let arrayLike = {
+  0: "something",
+  length: 1
+};
+
+alert( arr.concat(arrayLike) ); // 1,2,[object Object]
+//[1, 2, arrayLike]
+```
+
+...But if an array-like object has `Symbol.isConcatSpreadable` property, then its elements are added instead:
+
+```js run
+let arr = [1, 2];
+
+let arrayLike = {
+  0: "something",
+  1: "else",
+*!*
+  [Symbol.isConcatSpreadable]: true,
+*/!*
+  length: 2
+};
+
+alert( arr.concat(arrayLike) ); // 1,2,something,else
+```
+
+## Searching in array
+
+These are methods to search for something in an array.
+
+### indexOf/lastIndexOf and includes
+
+The methods [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) and [arr.includes](mdn:js/Array/includes) have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters:
+
+- `arr.indexOf(item, from)` looks for `item` starting from index `from`, and returns the index where it was found, otheriwse `-1`.
+- `arr.lastIndexOf(item, from)` -- same, but looks from right to left.
+- `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found.
+
+For instance:
+
+```js run
+let arr = [1, 0, false];
+
+alert( arr.indexOf(0) ); // 1
+alert( arr.indexOf(false) ); // 2
+alert( arr.indexOf(null) ); // -1
+
+alert( arr.includes(1) ); // true
+```
+
+Note that the methods use `===` comparison. So, if we look for `false`, it finds exactly `false` and not the zero.
+
+If we wan to check for inclusion, and don't want to know the exact index, then `arr.includes` is preferred.
+
+
+### find and findIndex
+
+Imagine we have an array of objects. How do we find an object with the specific condition?
+
+Here the [arr.find](mdn:js/Array/find) method comes in handy.
+
+The syntax is:
+```js
+let result = arr.find(function(item, index, array) {
+  // should return true if the item is what we are looking for
+});
+```
+
+The function is called repetitively for each element of the array:
+
+- `item` is the element.
+- `index` is its index.
+- `array` is the array itself.
+
+If it returns `true`, the search is stopped, the `item` is returned. If nothing found, `undefined` is returned.
+
+For example, we have an array of users, each with the fields `id` and `name`. Let's find the one with `id == 1`:
+
+```js run
+let users = [
+  {id: 1, name: "John"},
+  {id: 2, name: "Pete"},
+  {id: 3, name: "Mary"}
+];
+
+let user = users.find(item => item.id == 1);
+
+alert(user.name); // John
+```
+
+In real life arrays of objects is a common thing, so the `find` method is very useful.
+
+Note that in the example we provide to `find` a single-argument function `item => item.id == 1`. Other parameters of `find` are rarely used.
+
+The [arr.findIndex](mdn:js/Array/findIndex) method is essentially the same, but it returns the index where the element was found instead of the element itself.
+
+### filter
+
+The `find` method looks for a single (first) element that makes the function return `true`.
+
+If there may be many, we can use [arr.filter(fn)](mdn:js/Array/filter).
+
+The syntax is roughly the same as `find`, but it returns an array of matching elements:
+
+```js
+let results = arr.filter(function(item, index, array) {
+  // should return true if the item passes the filter
+});
+```
+
+For instance:
+
+```js run
+let users = [
+  {id: 1, name: "John"},
+  {id: 2, name: "Pete"},
+  {id: 3, name: "Mary"}
+];
+
+// returns array of the first two users
+let someUsers = users.filter(item => item.id < 3);
+
+alert(someUsers.length); // 2
+```
+
+## Transform an array
+
+This section is about the methods transforming or reordering the array.
+
+
+### map
+
+The [arr.map](mdn:js/Array/map) method is one of the most useful and often used.
+
+The syntax is:
+
+```js
+let result = arr.map(function(item, index, array) {
+  // returns the new value instead of item
+}
+```
+
+It calls the function for each element of the array and returns the array of results.
+
+For instance, here we transform each element into its length:
+
+```js run
+let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length)
+alert(lengths); // 5,7,6
+```
+
+### sort(fn)
+
+The method [arr.sort](mdn:js/Array/sort) sorts the array *in place*.
+
+For instance:
+
+```js run
+let arr = [ 1, 2, 15 ];
+
+// the method reorders the content of arr (and returns it)
+arr.sort();
+
+alert( arr );  // *!*1, 15, 2*/!*
+```
+
+Did you notice anything strange in the outcome?
+
+The order became `1, 15, 2`. Incorrect. But why?
+
+**The items are sorted as strings by default.**
+
+Literally, all elements are converted to strings and then compared. So, the lexicographic ordering is applied and indeed `"2" > "15"`.
+
+To use our own sorting order, we need to supply a function of two arguments as the argument of `arr.sort()`.
+
+The function should work like this:
+```js
+function compare(a, b) {
+  if (a > b) return 1;
+  if (a == b) return 0;
+  if (a < b) return -1;
+}
+```
+
+For instance:
+
+```js run
+function compareNumeric(a, b) {
+  if (a > b) return 1;
+  if (a == b) return 0;
+  if (a < b) return -1;
+}
+
+let arr = [ 1, 2, 15 ];
+
+*!*
+arr.sort(compareNumeric);
+*/!*
+
+alert(arr);  // *!*1, 2, 15*/!*
+```
+
+Now it works as intended.
+
+Let's step aside and thing what's happening. The `arr` can be array of anything, right? It may contain numbers or strings or html elements or whatever. We have a set of *something*. To sort it, we need an *ordering function* that knows how to compare its elements. The default is a string order.
+
+The `arr.sort(fn)` method has a built-in implementation of sorting algorithm. We don't need to care how it exactly works (an optimized [quicksort](https://en.wikipedia.org/wiki/Quicksort) most of the time). It will walk the array, compare its elements using the provided function and reorder them, all we need is to provide the `fn` which does the comparison.
+
+By the way, if we ever want to know which elements are compared -- nothing prevents from alerting them:
+
+```js run
+[1, -2, 15, 2, 0, 8].sort(function(a, b) {
+  alert( a + " <> " + b );
+});
+```
+
+The algorithm may compare an element multiple times in the process, but it tries to make as few comparisons as possible.
+
+
+````smart header="A comparison function may return any number"
+Actually, a comparison function is only required to return a positive number to say "greater" and a negative number to say "less".
+
+That allows to write shorter functions:
+
+```js run
+let arr = [ 1, 2, 15 ];
+
+arr.sort(function(a, b) { return a - b; });
+
+alert(arr);  // *!*1, 2, 15*/!*
+```
+````
+
+````smart header="Arrow functions for the best"
+Remember [arrow functions](info:function-expression#arrow-functions)? We can use them here for neater sorting:
+
+```js
+arr.sort( (a, b) => a - b );
+```
+
+This works exactly the same as the other, longer, version above.
+````
+
+### reverse
+
+The method [arr.reverse](mdn:js/Array/reverse) reverses the order of elements in `arr`.
+
+For instance:
+
+```js run
+let arr = [1, 2, 3, 4, 5];
+arr.reverse();
+
+alert( arr ); // 5,4,3,2,1
+```
+
+It also returns the array `arr` after the reversal.
+
+### split and join
+
+Here's the situation from the real life. We are writing a messaging app, and the person enters the comma-delimited list of receivers: `John, Pete, Mary`. But for us an array of names would be much more comfortable than a single string. How to get it?
+
+The [str.split(delim)](mdn:js/String/split) method does exactly that. It splits the string into an array by the given delimiter `delim`.
+
+In the example below, we split by a comma followed by space:
+
+```js run
+let names = 'Bilbo, Gandalf, Nazgul';
+
+let arr = names.split(', ');
+
+for (let name of arr) {
+  alert( `A message to ${name}.` ); // A message to Bilbo  (and other names)
+}
+```
+
+The `split` method has an optional second numeric argument -- a limit on the array length. If it is provided, then the extra elements are ignored. In practice it is rarely used though:
+
+```js run
+let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
+
+alert(arr); // Bilbo, Gandalf
+```
+
+````smart header="Split into letters"
+The call to `split(s)` with an empty `s` would split the string into an array of letters:
+
+```js run
+let str = "test";
+
+alert( str.split('') ); // t,e,s,t
+```
+````
+
+The call [arr.join(str)](mdn:js/Array/join) does the reverse to `split`. It creates a string of `arr` items glued by `str` beween them.
+
+For instance:
+
+```js run
+let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
+
+let str = arr.join(';');
+
+alert( str ); // Bilbo;Gandalf;Nazgul
+```
+
+### reduce/reduceRight
+
+When we need to iterate over an array -- we can use `forEach`.
+
+When we need to iterate and return the data for each element -- we can use `map`.
+
+The methods [arr.reduce](mdn:js/Array/reduce) and [arr.reduceRight](mdn:js/Array/reduceRight) also belong to that breed, but are a little bit more intricate. They are used to calculate a single value based on the array.
+
+The syntax is:
+
+```js
+let value = arr.reduce(function(previousValue, item, index, arr) {
+  // ...
+}, initial);
+```
+
+The function is applied to the elements. You may notice the familiar arguments, starting from the 2nd:
+
+- `item` -- is the current array item.
+- `index` -- is its position.
+- `arr` -- is the array.
+
+So far, like `forEach/map`. But there's one more argument:
+
+- `previousValue` -- is the result of the previous function call, `initial` for the first call.
+
+The easiest way to grasp that is by example.
+
+Here we get a sum of array in one line:
+
+```js run
+let arr = [1, 2, 3, 4, 5]
+
+let result = arr.reduce((sum, current) => sum + current), 0);
+
+alert(result); // 15
+```
+
+Here we used the most common variant of `reduce` which uses only 2 arguments.
+
+Let's see the details of what's going on.
+
+1. On the first run, `sum` is the initial value (the last argument of `reduce`), equals `0`, and `current` is the first array element, equals `1`. So the result is `1`.
+2. On the second run, `sum = 1`, we add the second array element (`2`) to it and return.
+3. On the 3rd run, `sum = 3` and we add one more element ot it, and so on...
+
+The calculation flow:
+
+![](reduce.png)
+
+Or in the form of a table, where each row represents is a function call on the next array element:
+
+|   |`sum`|`current`|`result`|
+|---|-----|---------|---------|
+|the first call|`0`|`1`|`1`|
+|the second call|`1`|`2`|`3`|
+|the third call|`3`|`3`|`6`|
+|the fourth call|`6`|`4`|`10`|
+|the fifth call|`10`|`5`|`15`|
+
+
+As we can see, the result of the previous call becomes the first argument of the next one.
+
+We also can omit the initial value:
+
+```js run
+let arr = [1, 2, 3, 4, 5];
+
+// removed initial value from reduce (no 0)
+let result = arr.reduce((sum, current) => sum + current);
+
+alert( result ); // 15
+```
+
+The result is the same. That's because if there's no initial, then `reduce` takes the first element of the array as the initial value and starts the iteration from the 2nd element.
+
+The calculation table is the same as above, minus the first row.
+
+But such use requires an extreme care. If the array is empty, then `reduce` call without initial value gives an error.
+
+Here's an example:
+
+```js run
+let arr = [];
+
+// Error: Reduce of empty array with no initial value
+// if the initial value existed, reduce would return it for the empty arr.
+arr.reduce((sum, current) => sum + current);
+```
+
+
+So it's advised to always specify the initial value.
+
+The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left.
+
+
+## Iterate: forEach
+
+The [arr.forEach](mdn:js/Array/forEach) method allows to run a function for every element of the array.
+
+The syntax:
+```js
+arr.forEach(function(item, index, array) {
+  // ... do something with item
+});
+```
+
+For instance, this shows each element of the array:
+
+```js run
+// for each element call alert
+["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
+```
+
+And this code is more elaborate about their positions in the target array:
+
+```js run
+["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
+  alert(`${item} is at index ${index} in ${array}`);
+});
+```
+
+The result of the function (if it returns any) is thrown away and ignored.
+
+## Array.isArray
+
+Arrays do not form a separate language type. They are based on objects.
+
+So `typeof` does not help to distinguish a plain object from an array:
+
+```js run
+alert(typeof {}); // object
+alert(typeof []); // same
+```
+
+...But arrays are used so often that there's a special method for that: [Array.isArray(value)](mdn:js/Array/isArray). It returns `true` if the `value` is an array, and `false` otherwise.
+
+```js run
+alert(Array.isArray({})); // false
+
+alert(Array.isArray([])); // true
+```
+
+## Most methods support "thisArg"
+
+Almost all array methods that call functions -- like `find`, `filter`, `map`, with a notable exception of `sort`, accept an optional additional parameter `thisArg`.
+
+That parameter is not explained in the sections above, because it's rarely used. But for completeness we have to cover it.
+
+Here's the full syntax of these methods:
+
+```js
+arr.find(func, thisArg);
+arr.filter(func, thisArg);
+arr.map(func, thisArg);
+// ...
+// thisArg is the optional last argument
+```
+
+The value of `thisArg` parameter becomes `this` for `func`.
+
+For instance, here we use an object method as a filter and `thisArg` comes in handy:
+
+```js run
+let user = {
+  age: 18,
+  younger(otherUser) {
+    return otherUser.age < this.age;
+  }
+};
+
+let users = [
+  {age: 12},
+  {age: 16},
+  {age: 32}
+];
+
+*!*
+// find all users younger than user
+let youngerUsers = users.filter(user.younger, user);
+*/!*
+
+alert(youngerUsers.length); // 2
+```
+
+In the call above, we use `user.younger` as a filter and also provide `user` as the context for it. If we didn't provide the context, `users.filter(user.younger)` would call `user.younger` as a standalone function, with `this=undefined`. That would mean an instant error.
+
+## Other methods
+
+We covered the most useful methods. But there are few others:
+
+- [arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) checks the array.
+
+  The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`.
+
+- [arr.fill(value, start, end)](mdn:js/Array/fill) -- fills the array with repeating `value` from index `start` to `end`.
+
+- [arr.copyWithin(target, start, end)](mdn:js/Array/copyWithin) -- copies its elements from position `start` till position `end` into *itself*, at position `target` (overwrites existing).
+
+These and other methods are also listed in the [manual](mdn:js/Array).
+
+
+## Summary
+
+Most used array methods:
+
+- `split/join` -- convert a string to array and back.
+- `splice` -- delete and insert elements at the given position.
+- `sort` -- sorts the array.
+- `indexOf/lastIndexOf`, `includes` -- look for the value.
+- `find/filter` -- return first/all values satisfying the given condition, `findIndex` is like `find`, but returns the index instead of a value.
+- `forEach` -- runs a function for each element.
+- `map` -- transforms the array through the function.
+- `reduce/reduceRight` -- calculates a single value based on array.
+- `slice` -- copy the part of the array.
+
+These methods are used in 95% of cases. For the full list, see the [manual](mdn:js/Array).
+
+The methods are easy to remember when you use them. Please refer to the tasks for some practice.
diff --git a/1-js/05-data-types/05-array-methods/reduce.png b/1-js/05-data-types/05-array-methods/reduce.png
new file mode 100644
index 00000000..41476d2a
Binary files /dev/null and b/1-js/05-data-types/05-array-methods/reduce.png differ
diff --git a/1-js/05-data-types/05-array-methods/reduce@2x.png b/1-js/05-data-types/05-array-methods/reduce@2x.png
new file mode 100644
index 00000000..f31647d1
Binary files /dev/null and b/1-js/05-data-types/05-array-methods/reduce@2x.png differ
diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md
new file mode 100644
index 00000000..a5a02433
--- /dev/null
+++ b/1-js/05-data-types/06-iterable/article.md
@@ -0,0 +1,301 @@
+
+# Iterables
+
+*Iterable* objects is a generalization of arrays. That's a concept that allows to make any object useable in a `for..of` loop.
+
+Arrays by themselves are iterable. But not only arrays. Strings are iterable too, and many other built-in objects as well.
+
+Iterables are widely used by the core JavaScript, as we'll see many operators and built-in methods rely on them.
+
+[cut]
+
+## Symbol.iterator
+
+We can easily grasp the concept of iterables by making one of our own.
+
+For instance, we have an object, that is not an array, but looks suitable for `for..of`.
+
+Like a `range` object that represents an interval of numbers:
+
+```js
+let range = {
+  from: 1,
+  to: 5
+};
+
+// We want for..of to work:
+// for(let num of range) ... num=1,2,3,4,5
+```
+
+To make the `range` iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that).
+
+- When `for..of` starts, it calls that method (or errors if none found).
+- The method must return an *iterator* -- an object with the method `next`.
+- When `for..of` wants the next value, it calls `next()` on that object.
+- The result of `next()` must have the form `{done: Boolean, value: any}`, where `done=true`  means that the iteration is finished, otherwise `value` must be the new value.
+
+Here's the full implementation for `range`:
+
+```js run
+let range = {
+  from: 1,
+  to: 5
+};
+
+// 1. call to for..of initially calls this
+range[Symbol.iterator] = function() {
+
+  // 2. ...it returns the iterator:
+  return {
+    current: this.from, // start at "range.from",
+    last: this.to,      // end at "range.to"
+
+    // 3. next() is called on each iteration by for..of
+    next() {
+      if (this.current <= this.last) {
+        // 4. it should return the value as an object {done:.., value :...}
+        return { done: false, value: this.current++ };
+      } else {
+        return { done: true };
+      }
+    }
+  };
+};
+
+for (let num of range) {
+  alert(num); // 1, then 2, 3, 4, 5
+}
+```
+
+There is an important separation of concerns in this code:
+
+- The `range` itself does not have the `next()` method.
+- Instead, another object, a so-called "iterator" is created by the call to `range[Symbol.iterator]()`, and it handles the iteration.
+
+So, the iterator is separate from the object.
+
+Technically, we may merge them and use `range` itself as the iterator, to make the code simpler.
+
+Like this:
+
+```js run
+let range = {
+  from: 1,
+  to: 5,
+
+  [Symbol.iterator]() {
+    this.current = this.from;
+    return this;
+  },
+
+  next() {
+    if (this.current <= this.to) {
+      return { done: false, value: this.current++ };
+    } else {
+      return { done: true };
+    }
+  }
+};
+
+for (let num of range) {
+  alert(num); // 1, then 2, 3, 4, 5
+}
+```
+
+Now `range[Symbol.iterator]()` returns the `range` object itself, and it has the necessary `next()` method. Sometimes that's fine too. The downside is that now it's impossible to have two `for..of` loops running over the object simultaneously: they'll share the iteration state, because there's only one iterator -- the object itself.
+
+```smart header="Infinite iterators"
+Infinite iterators are also doable. For instance, the `range` becomes infinite for `range.to = Infinity`. Or we can make an iterable object that generates an infinite sequence of pseudorandom numbers. Also can be useful.
+
+There are no limitations on `next`, it can return more and more values, that's normal.
+
+Of course, the `for..of` loop over such an iterable would be endless. But we can always stop it using `break`.
+```
+
+
+## String is iterable
+
+Arrays and strings are most widely used built-in iterables.
+
+For a string, `for..of` loops over its characters:
+
+```js run
+for(let char of "test") {
+  alert( char ); // t, then e, then s, then t
+}
+```
+
+And it works right with surrogate pairs!
+
+```js run
+let str = '𝒳😂';
+for(let char of str) {
+    alert(char); // 𝒳, and then 😂
+}
+```
+
+## Calling an iterator explicitly
+
+Normally, internals of iterables are hidden from the external code. There's a `for..of` loop, that works, that's all it needs to know.
+
+But to understand things a little bit more deeper let's see how to create an iterator explicitly. We'll do that the same way as `for..of`, but with direct calls.
+
+For instance, this code gets a string iterator and calls it "manually":
+
+```js run
+let str = "Hello";
+
+// does the same as
+// for (let char of str) alert(char);
+
+let iterator = str[Symbol.iterator]();
+
+while(true) {
+  let result = iterator.next();
+  if (result.done) break;
+  alert(result.value); // outputs characters one by one
+}
+```
+
+That is rarely needed, but gives us more control than `for..of`. For instance, we can split the iteration process: iterate a bit, then stop, do something else, and then resume later.
+
+## Iterables and array-likes [#array-like]
+
+There are two official terms that look similar, but are very different. Please be careful to avoid the confusion.
+
+- *Iterables* are objects that implement the `Symbol.iterator` method, as described above.
+- *Array-likes* are objects that have indexes and `length`, so they look like arrays.
+
+Naturally, they can combine. For instance, strings are both iterable and array-like.
+
+But an iterable may be not array-like and vice versa.
+
+For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`.
+
+And here's the object that is array-like, but not iterable:
+
+```js run
+let arrayLike = { // has indexes and length => array-like
+  0: "Hello",
+  1: "World",
+  length: 2
+};
+
+*!*
+// Error (no Symbol.iterator)
+for(let item of arrayLike) {}
+*/!*
+```
+
+What they share in common -- both iterables and array-likes are usually *not arrays*, they don't have `push`, `pop` etc. That's rather inconvenient if we have such an object and want to work with it as with an array.
+
+## Array.from
+
+There's a universal method [Array.from](mdn:js/Array/from) that brings them together. It takes an iterable or array-like value and makes a "real" `Array` from it. Then we can call array methods on it.
+
+For instance:
+
+```js run
+let arrayLike = {
+  0: "Hello",
+  1: "World",
+  length: 2
+};
+
+*!*
+let arr = Array.from(arrayLike); // (*)
+*/!*
+alert(arr.pop()); // World (method works)
+```
+
+`Array.from` at the line `(*)` takes the object, examines it for being an iterable or array-like, then makes a new array and copies there all items.
+
+The same happens for an iterable:
+
+```js
+// assuming that range is taken from the example above
+let arr = Array.from(range);
+alert(arr); // 1,2,3,4,5 (array toString conversion works)
+```
+
+The full syntax for `Array.from` allows to provide an optional "mapping" function:
+```js
+Array.from(obj[, mapFn, thisArg])
+```
+
+The second argument `mapFn` should be the function to apply to each element before adding to the array, and `thisArg` allows to set `this` for it.
+
+For instance:
+
+```js
+// assuming that range is taken from the example above
+
+// square each number
+let arr = Array.from(range, num => num * num);
+
+alert(arr); // 1,4,9,16,25
+```
+
+We can also use `Array.from` to turn a string into an array of characters:
+
+```js run
+let str = '𝒳😂';
+
+// splits str into array of characters
+let chars = Array.from(str);
+
+alert(chars[0]); // 𝒳
+alert(chars[1]); // 😂
+alert(chars.length); // 2
+```
+
+Unlike `str.split`, it relies on the iterable nature of the string and so, just like `for..of`, correctly works with surrogate pairs.
+
+Technically here it does the same as:
+
+```js run
+let str = '𝒳😂';
+
+let chars = []; // Array.from internally does the same loop
+for(let char of str) {
+  chars.push(char);
+}
+
+alert(chars);
+```
+
+...But is shorter.    
+
+We can even build surrogate-aware `slice` on it:
+
+```js run
+function slice(str, start, end) {
+  return Array.from(str).slice(start, end).join('');
+}
+
+let str = '𝒳😂𩷶';
+
+alert( slice(str, 1, 3) ); // 😂𩷶
+
+// native method does not support surrogate pairs
+alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs)
+```
+
+
+## Summary
+
+Objects that can be used in `for..of` are called *iterable*.
+
+- Technically, iterables must implement the method named `Symbol.iterator`.
+    - The result of `obj[Symbol.iterator]` is called an *iterator*. It handles the further iteration process.
+    - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the iteration end, otherwise the `value` is the next value.
+- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly.
+- Built-in iterables like strings or arrays, also implement `Symbol.iterator`.
+- String iterator knows about surrogate pairs.
+
+
+Objects that have indexed properties and `length` are called *array-like*. Such objects may also have other properties and methods, but lack built-in methods of arrays.
+
+If we look inside the specification -- we'll see that most built-in methods assume that they work with iterables or array-likes instead of "real" arrays, because that's more abstract.
+
+`Array.from(obj[, mapFn, thisArg])` makes a real `Array` of an iterable or array-like `obj`, and then we can use array methods on it. The optional arguments `mapFn` and `thisArg` allow to apply a function to each item.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/solution.js b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/solution.js
new file mode 100644
index 00000000..de504e1e
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/solution.js
@@ -0,0 +1,3 @@
+function unique(arr) {
+  return Array.from(new Set(arr));
+}
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/test.js b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/test.js
new file mode 100644
index 00000000..cfc7b1fc
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("unique", function() {
+  it("removes non-unique elements", function() {
+    let strings = ["Hare", "Krishna", "Hare", "Krishna",
+      "Krishna", "Krishna", "Hare", "Hare", ":-O"
+    ];
+
+    assert.deepEqual(unique(strings), ["Hare", "Krishna", ":-O"]);
+  });
+
+  it("does not change the source array", function() {
+    let strings = ["Krishna", "Krishna", "Hare", "Hare"];
+    unique(strings);
+    assert.deepEqual(strings, ["Krishna", "Krishna", "Hare", "Hare"]);
+  });
+});
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.md b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/solution.md
similarity index 100%
rename from 2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.md
rename to 1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/solution.md
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/task.md b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/task.md
new file mode 100644
index 00000000..d6803003
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/01-array-unique-map/task.md
@@ -0,0 +1,27 @@
+importance: 5
+
+---
+
+# Filter unique array members
+
+Let `arr` be an array.
+
+Create a function `unique(arr)` that should return an array with unique items of `arr`.
+
+For instance:
+
+```js
+function unique(arr) {
+  /* your code */
+}
+
+let values = ["Hare", "Krishna", "Hare", "Krishna",
+  "Krishna", "Krishna", "Hare", "Hare", ":-O"
+];
+
+alert( unique(values) ); // Hare, Krishna, :-O
+```
+
+P.S. Here strings are used, but can be values of any type.
+
+P.P.S. Use `Set` to store unique values.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/solution.js b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/solution.js
new file mode 100644
index 00000000..b9f5016f
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/solution.js
@@ -0,0 +1,11 @@
+
+function aclean(arr) {
+  let map = new Map();
+
+  for(let word of arr) {
+    let sorted = word.toLowerCase().split("").sort().join("");
+    map.set(sorted, word);
+  }
+
+  return Array.from(map.values());
+}
\ No newline at end of file
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/test.js b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/test.js
new file mode 100644
index 00000000..75acb36b
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/_js.view/test.js
@@ -0,0 +1,24 @@
+function intersection(arr1, arr2) {
+  return arr1.filter(item => arr2.includes(item));
+}
+
+describe("aclean", function() {
+
+  it("returns exactly 1 word from each anagram set", function() {
+    let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
+
+    let result = aclean(arr);
+    assert.equal(result.length, 3);
+
+    assert.equal(intersection(result, ["nap", "PAN"]).length, 1);
+    assert.equal(intersection(result, ["teachers", "cheaters", "hectares"]).length, 1);
+    assert.equal(intersection(result, ["ear", "era"]).length, 1);
+
+  });
+
+  it("is case-insensitive", function() {
+    let arr = ["era", "EAR"];
+    assert.equal(aclean(arr).length, 1);
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/solution.md b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/solution.md
new file mode 100644
index 00000000..f95b41aa
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/solution.md
@@ -0,0 +1,77 @@
+To find all anagrams, let's split every word to letters and sort them. When letter-sorted, all anagrams are same.
+
+For instance:
+
+```
+nap, pan -> anp
+ear, era, are -> aer
+cheaters, hectares, teachers -> aceehrst
+...
+```
+
+We'll use the letter-sorted variants as map keys to store only one value per each key:
+
+```js run
+function aclean(arr) {
+  let map = new Map();
+
+  for(let word of arr) {
+    // split the word by letters, sort them and join back
+*!*
+    let sorted = word.toLowerCase().split('').sort().join(''); // (*)
+*/!*
+    map.set(sorted, word);
+  }
+
+  return Array.from(map.values());
+}
+
+let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
+
+alert( aclean(arr) );
+```
+
+Letter-sorting is done by the chain of calls in the line `(*)`.
+
+For convenience let's split it into multiple lines:
+
+```js
+let sorted = arr[i] // PAN
+  .toLowerCase() // pan
+  .split('') // ['p','a','n']
+  .sort() // ['a','n','p']
+  .join(''); // anp
+```
+
+Two different words `'PAN'` and `'nap'` receive the same letter-sorted form `'anp'`.
+
+The next line put the word into the map:
+
+```js
+map.set(sorted, word);
+```
+
+If we ever meet a word the same letter-sorted form again, then it would overwrite the previous value with the same key in the map. So we'll always have at maximum one word per letter-form.
+
+At the end `Array.from(map.values())` takes an iterable over map values (we don't need keys in the result) and returns an array of them.
+
+Here we could also use a plain object instead of the `Map`, because keys are strings.
+
+That's how the solution can look:
+
+```js run
+function aclean(arr) {
+  let obj = {};
+
+  for (let i = 0; i < arr.length; i++) {
+    let sorted = arr[i].toLowerCase().split("").sort().join("");
+    obj[sorted] = arr[i];
+  }
+
+  return Array.from(Object.values(obj));
+}
+
+let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
+
+alert( aclean(arr) );
+```
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/task.md b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/task.md
new file mode 100644
index 00000000..731fd2c2
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/02-filter-anagrams/task.md
@@ -0,0 +1,28 @@
+importance: 4
+
+---
+
+# Filter anagrams
+
+[Anagrams](https://en.wikipedia.org/wiki/Anagram) are words that have the same number of same letters, but in different order.
+
+For instance:
+
+```
+nap - pan
+ear - are - era
+cheaters - hectares - teachers
+```
+
+Write a function `aclean(arr)` that returns an array cleaned from anagrams.
+
+For instance:
+
+```js
+let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
+
+alert( aclean(arr) ); // "nap,teachers,ear" or "PAN,cheaters,era"
+```
+
+From every anagram group should remain only one word, no matter which one.
+
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/solution.md b/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/solution.md
new file mode 100644
index 00000000..7310d1d3
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/solution.md
@@ -0,0 +1,19 @@
+
+That's because `map.keys()` returns an iterable, but not an array.
+
+We can convert it into an array using `Array.from`:
+
+
+```js run
+let map = new Map();
+
+map.set("name", "John");
+
+*!*
+let keys = Array.from(map.keys());
+*/!*
+
+keys.push("more");
+
+alert(keys); // name, more
+```
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/task.md b/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/task.md
new file mode 100644
index 00000000..9a3e5d25
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/03-iterable-keys/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Iterable keys
+
+We want to get an array of `map.keys()` and go on working with it (apart from the map itself).
+
+But there's a problem:
+
+```js run
+let map = new Map();
+
+map.set("name", "John");
+
+let keys = map.keys();
+
+*!*
+// Error: numbers.push is not a function
+keys.push("more");
+*/!*
+```
+
+Why? How can we fix the code to make `keys.push` work?
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/solution.md b/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/solution.md
new file mode 100644
index 00000000..ce56f593
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/solution.md
@@ -0,0 +1,41 @@
+The sane choice here is a `WeakSet`:
+
+```js
+let messages = [
+    {text: "Hello", from: "John"},
+    {text: "How goes?", from: "John"},
+    {text: "See you soon", from: "Alice"}
+];
+
+let readMessages = new WeakSet();
+
+// two messages have been read
+readMessages.add(messages[0]);
+readMessages.add(messages[1]);
+// readMessages has 2 elements
+
+// ...let's read the first message again!
+readMessages.add(messages[0]);
+// readMessages still has 2 unique elements
+
+// answer: was the message[0] read?
+alert("Read message 0: " + readMessages.has(messages[0])); // true
+
+messages.shift();
+// now readMessages has 1 element (technically memory may be cleaned later)
+```
+
+The `WeakSet` allows to store a set of messages and easily check for the existance of a message in it.
+
+It cleans up itself automatically. The tradeoff is that we can't iterate over it. We can't get "all read messages" directly. But we can do it by iterating over all messages and filtering those that are in the set.
+
+P.S. Adding a property of our own to each message may be dangerous if messages are managed by someone else's code, but we can make it a symbol to evade conflicts.
+
+Like this:
+```js
+// the symbolic property is only known to our code
+let isRead = Symbol("isRead");
+messages[0][isRead] = true;
+```
+
+Now even if someone else's code uses `for..in` loop for message properties, our secret flag won't appear.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/task.md b/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/task.md
new file mode 100644
index 00000000..7ec1faf1
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/04-recipients-read/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Store "unread" flags
+
+There's an array of messages:
+
+```js
+let messages = [
+    {text: "Hello", from: "John"},
+    {text: "How goes?", from: "John"},
+    {text: "See you soon", from: "Alice"}
+];
+```
+
+Your code can access it, but the messages are managed by someone else's code. New messages are added, old ones are removed regularly by that code, and you don't know the exact moments when it happens.
+
+Now, which data structure you could use to store information whether the message "have been read"? The structure must be well-suited to give the answer "was it read?" for the given message object.
+
+P.S. When a message is removed from `messages`, it should disappear from your structure as well.
+
+P.P.S. We shouldn't modify message objects directly. If they are managed by someone else's code, then adding extra properties to them may have bad consequences.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/solution.md b/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/solution.md
new file mode 100644
index 00000000..7f387b4d
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/solution.md
@@ -0,0 +1,15 @@
+
+To store a date, we can use `WeakMap`:
+
+```js
+let messages = [
+    {text: "Hello", from: "John"},
+    {text: "How goes?", from: "John"},
+    {text: "See you soon", from: "Alice"}
+];
+
+let readMap = new WeakMap();
+
+readMap.set(messages[0], new Date(2017, 1, 1));
+// Date object we'll study later
+```
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/task.md b/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/task.md
new file mode 100644
index 00000000..22b51a38
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/05-recipients-when-read/task.md
@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# Store read dates
+
+There's an array of messages as in the [previous task](info:task/recipients-read). The situation is similar.
+
+```js
+let messages = [
+    {text: "Hello", from: "John"},
+    {text: "How goes?", from: "John"},
+    {text: "See you soon", from: "Alice"}
+];
+```
+
+The question now is: which data structure you'd suggest to store the information: "when the message was read?".
+
+In the previous task we only needed to store the "yes/no" fact. Now we need to store the date and it, once again, should disappear if the message is gone.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/article.md b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md
new file mode 100644
index 00000000..34347151
--- /dev/null
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md
@@ -0,0 +1,432 @@
+
+# Map, Set, WeakMap and WeakSet
+
+Now we know the following complex data structures:
+
+- Objects for storing keyed collections.
+- Arrays for storing ordered collections.
+
+But that's not enough for real life. That's why there also exist `Map` and `Set`.
+
+## Map
+
+[Map](mdn:js/Map) is a collection of keyed data items. Just like an `Object`. But the main difference is that `Map` allows keys of any type.
+
+The main methods are:
+
+- `new Map()` -- creates the map.
+- `map.set(key, value)` -- stores the value by the key.
+- `map.get(key)` -- returns the value by the key.
+- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise.
+- `map.delete(key)` -- removes the value by the key.
+- `map.clear()` -- clears the map
+- `map.size` -- is the current elements count.
+
+For instance:
+
+```js run
+let map = new Map();
+
+map.set('1', 'str1');   // a string key
+map.set(1, 'num1');     // a numeric key
+map.set(true, 'bool1'); // a boolean key
+
+// remember the regular Object? it would convert keys to string
+// Map keeps the type, so these two are different:
+alert( map.get(1)   ); // 'num1'
+alert( map.get('1') ); // 'str1'
+
+alert( map.size ); // 3
+```
+
+As we can see, unlike objects, keys are not converted to strings. Any type of key is possible.
+
+**Map can also use objects as keys.**
+
+For instance:
+```js run
+let john = { name: "John" };
+
+// for every user, let's store his visits count
+let visitsCountMap = new Map();
+
+// john is the key for the map
+visitsCountMap.set(john, 123);
+
+alert( visitsCountMap.get(john) ); // 123
+```
+
+Using objects as keys is one of most notable and important `Map` features. For string keys, `Object` can be fine, but it would be difficult to replace the `Map` with a regular `Object` in the example above.
+
+In the old times, before `Map` existed, people added unique identifiers to objects for that:
+
+```js run
+// we add the id field
+let john = { name: "John", *!*id: 1*/!* };
+
+let visitsCounts = {};
+
+// now store the value by id
+visitCounts[john.id] = 123;
+
+alert( visitsCounts[john.id] ); // 123
+```
+
+...But `Map` is much more elegant.
+
+
+```smart header="How `Map` compares keys"
+To test values for equivalence, `Map` uses the algorithm [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). It is roughly the same as the strict equality `===`, but the difference is that `NaN` is considered equal to `NaN`. So `NaN` can be used as the key as well.
+
+This algorithm can't be changed or customized.
+```
+
+
+````smart header="Chaining"
+
+Every `map.set` call returns the map itself, so we can "chain" the calls:
+
+```js
+map.set('1', 'str1')
+  .set(1, 'num1')
+  .set(true, 'bool1');
+```
+````
+
+## Map from Object
+
+When a `Map` is created, we can pass an array (or another iterable) with key-value pairs, like this:
+
+```js
+// array of [key, value] pairs
+let map = new Map([
+  ['1',  'str1'],
+  [1,    'num1'],
+  [true, 'bool1']
+]);
+```
+
+There is a built-in method [Object.entries(obj)](mdn:js/Object/entries) that returns the array of key/value pairs for an object exactly in that format.
+
+So we can initialize a map from an object like this:
+
+```js
+let map = new Map(Object.entries({
+  name: "John",
+  age: 30
+}));
+```
+
+Here, `Object.entries` returns the array of key/value pairs: `[ ["name","John"], ["age", 30] ]`. That's what `Map` needs.
+
+## Iteration over Map
+
+For looping over a `map`, there are 3 methods:
+
+- `map.keys()` -- returns an iterable for keys,
+- `map.values()` -- returns an iterable for values,
+- `map.entries()` -- returns an iterable for entries `[key, value]`, it's used by default in `for..of`.
+
+For instance:
+
+```js run
+let recipeMap = new Map([
+  ['cucumber', 500],
+  ['tomatoes', 350],
+  ['onion',    50]
+]);
+
+// iterate over keys (vegetables)
+for(let vegetable of recipeMap.keys()) {
+  alert(vegetable); // cucumber, tomateos, onion
+}
+
+// iterate over values (amounts)
+for(let amount of recipeMap.values()) {
+  alert(amount); // 500, 350, 50
+}
+
+// iterate over [key, value] entries
+for(let entry of recipeMap) { // the same as of recipeMap.entries()
+  alert(entry); // cucumber,50 (and so on)
+}
+```
+
+```smart header="The insertion order is used"
+The iteration goes in the same order as the values were inserted. `Map` preserves this order, unlike a regular `Object`.
+```
+
+Besides that, `Map` has a built-in `forEach` method, similar to `Array`:
+
+```js
+recipeMap.forEach( (value, key, map) => {
+  alert(`${key}: ${value}`); // cucumber: 50 etc
+});
+```
+
+
+## Set
+
+`Set` -- is a collection of values, where each value may occur only once.
+
+The main methods are:
+
+- `new Set(iterable)` -- creates the set, optionally from an array of values (any iterable will do).
+- `set.add(value)` -- adds a value, returns the set itself.
+- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
+- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`.
+- `set.clear()` -- removes everything from the set.
+- `set.size` -- is the elements count.
+
+For example, we have visitors coming, and we'd like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be "counted" only once.
+
+`Set` is just the right thing for that:
+
+```js run
+let set = new Set();
+
+let john = { name: "John" };
+let pete = { name: "Pete" };
+let mary = { name: "Mary" };
+
+// visits, some users come multiple times
+set.add(john);
+set.add(pete);
+set.add(mary);
+set.add(john);
+set.add(mary);
+
+// set keeps only unique values
+alert( set.size ); // 3
+
+for(let user of set) {
+  alert(user.name); // John (then Pete and Mary)
+}
+```
+
+The alternative to `Set` could be an array of users, and the code to check for duplicates on every insertion using [arr.find](mdn:js/Array/find). But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks.
+
+## Iteration over Set
+
+We can loop over a set either with `for..of` or using `forEach`:
+
+```js run
+let set = new Set(["oranges", "apples", "bananas"]);
+
+for(let value of set) alert(value);
+
+// the same with forEach:
+set.forEach((value, valueAgain, set) => {
+  alert(value);
+});
+```
+
+Note the funny thing. The `forEach` function in the `Set` has 3 arguments: a value, then *again a value*, and then the target object. Indeed, the same value appears in the arguments twice.
+
+That's made for compatibility with `Map` where `forEach` has three arguments.
+
+The same methods as `Map` has for iterators are also supported:
+
+- `set.keys()` -- returns an iterable object for values,
+- `set.values()` -- same as `set.keys`, for compatibility with `Map`,
+- `set.entries()` -- returns an iterable object for entries `[value, value]`, exists for compatibility with `Map`.
+
+## WeakMap and WeakSet
+
+`WeakSet` is a special kind of `Set` that does not prevent JavaScript from removing its items from memory. `WeakMap` is the same thing for `Map`.
+
+As we know from the chapter <info:garbage-collection>, JavaScript engine stores a value in memory while it is reachable (and can potentially be used).
+
+For instance:
+```js
+let john = { name: "John" };
+
+// the object can be accessed, john is the reference to it
+
+// overwrite the reference
+john = null;
+
+*!*
+// the object will be removed from memory
+*/!*
+```
+
+Usually, properties of an object or elements of an array or another data structure are considered reachable and kept in memory while that data structure is in memory.
+
+In a regular `Map`, it does not matter if we store an object as a key or as a value. It's kept in memory even if there are no more references to it.
+
+For instance:
+```js
+let john = { name: "John" };
+
+let map = new Map();
+map.set(john, "...");
+
+john = null; // overwrite the reference
+
+*!*
+// john is stored inside the map
+// we can get it by using map.keys()
+*/!*
+```
+
+
+With the exception of `WeakMap/WeakSet`.
+
+**`WeakMap/WeakSet` does not prevent the object removal from the memory.**
+
+Let's start with `WeakMap`.
+
+The first difference from `Map` is that its keys must be  objects, not primitive values:
+
+```js run
+let weakMap = new WeakMap();
+
+let obj = {};
+
+weakMap.set(obj, "ok"); // works fine (object key)
+
+*!*
+weakMap.set("test", "Whoops"); // Error, because "test" is a primitive
+*/!*
+```
+
+Now, if we use an object as the key in it, and there are no other references to that object -- it will be removed from memory (and from the map) automatically.
+
+```js
+let john = { name: "John" };
+
+let weakMap = new WeakMap();
+weakMap.set(john, "...");
+
+john = null; // overwrite the reference
+
+// john is removed from memory!
+```
+
+Compare it with the regular `Map` example above. Now if `john` only exists as the key of `WeakMap` -- it is to be automatically deleted.
+
+...And `WeakMap` does not support methods `keys()`, `values()`, `entries()`, we can not iterate over it. So there's really no way to receive all keys or values from it.
+
+`WeakMap` has only the following methods:
+
+- `weakMap.get(key)`
+- `weakMap.set(key, value)`
+- `weakMap.delete(key, value)`
+- `weakMap.has(key)`
+
+Why such a limitation? That's for technical reasons. If the object has lost all other references (like `john` in the code above), then it is to be deleted automatically. But technically it's not exactly specified *when the cleanup happens*.
+
+The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically the current element count of the `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access `WeakMap` as a whole are not supported.
+
+Now where do we need such thing?
+
+The idea of `WeakMap` is that we can store something for an object that exists only while the object exists. But we do not force the object to live by the mere fact that we store something for it.
+
+```js
+weakMap.put(john, "secret documents");
+// if john dies, secret documents will be destroyed
+```
+
+That's useful for situations when we have a main storage for the objects somewhere and need to keep additional information that is only relevant while the object lives.
+
+Let's see an example.
+
+For instance, we have a code that keeps a visit count for each user. The information is stored in a map: a user is the key and the visit count is the value. When a user leaves, we don't want to store his visit count any more.
+
+One way would be to keep track of leaving users and clean up the storage manually:
+
+```js run
+let john = { name: "John" };
+
+// map: user => visits count
+let visitsCountMap = new Map();
+
+// john is the key for the map
+visitsCountMap.set(john, 123);
+
+// now john leaves us, we don't need him any more
+john = null;
+
+*!*
+// but it's still in the map, we need to clean it!
+*/!*
+alert( visitsCountMap.size ); // 1
+// it's also in the memory, because Map uses it as the key
+```
+
+Another way would be to use `WeakMap`:
+
+```js
+let john = { name: "John" };
+
+let visitsCountMap = new WeakMap();
+
+visitsCountMap.set(john, 123);
+
+// now john leaves us, we don't need him any more
+john = null;
+
+// there are no references except WeakMap,
+// so the object is removed both from the memory and from visitsCountMap automatically
+```
+
+With a regular `Map`, cleaning up after a user has left becomes a tedious task: we not only need to remove the user from its main storage (be it a variable or an array), but also need to clean up the additional stores like `visitsCountMap`. And it can become cumbersome in more complex cases when users are managed in one place of the code and the additional structure is at another place and is getting no information about removals.
+
+`WeakMap` can make things simpler, because it is cleaned up automatically. The information in it like visits count in the example above lives only while the key object exists.
+
+`WeakSet` behaves similarly:
+
+- It is analogous to `Set`, but we may only add objects to `WeakSet` (not primitives).
+- An object exists in the set while it has reachable from somewhere else.
+- Like `Set`, it supports `add`, `has` and `delete`, but not `size`, `keys()` and no iterations.
+
+For instance, we can use it to keep track of whether an item is checked:
+
+```js
+let messages = [
+    {text: "Hello", from: "John"},
+    {text: "How goes?", from: "John"},
+    {text: "See you soon", from: "Alice"}
+];
+
+// fill it with array elements (3 items)
+let unreadSet = new WeakSet(messages);
+
+// we can use unreadSet to see whether a message is unread
+alert(unreadSet.has(messages[1])); // true
+// remove it from the set after reading
+unreadSet.delete(messages[1]); // true
+
+// and when we shift our messages history, the set is cleaned up automatically
+messages.shift();
+// no need to clean unreadSet, it now has 2 items
+// unfortunately, there's no method to get the exact count of items, so can't show it
+```
+
+The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterations, and inability to get all current content. That may appear inconvenient, but actually does not prevent `WeakMap/WeakSet` from doing their main job -- be an "additional" storage of data for objects which are stored/managed at another place.
+
+## Summary
+
+- `Map` -- is a a collection of keyed values.
+
+    The differences from a regular `Object`:
+
+    - Any keys, objects can be keys.
+    - Iterates in the insertion order.
+    - Additional convenient methods, the `size` property.
+
+- `Set` -- is a collection of unique values.
+
+    - Unlike an array, does not allow to reorder elements.
+    - Keeps the insertion order.
+
+- `WeakMap` -- a variant of `Map` that allows only objects as keys and removes them once they become unaccessible by other means.
+
+    - It does not support operations on the structure as a whole: no `size`, no `clear()`, no iterations.
+
+- `WeakSet` -- is a variant of `Set` that only stores objects and removes them once they become unaccessible by other means.
+
+    - Also does not support `size/clear()` and iterations.
+
+`WeakMap` and `WeakSet` are used as "secondary" data structures in additional to the "main" object storage. Once the object is removed from the main storage, so it only stays in `WeakMap/WeakSet`, they clean up aumatically.
diff --git a/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/solution.js b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/solution.js
new file mode 100644
index 00000000..509b3589
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/solution.js
@@ -0,0 +1,10 @@
+function sumSalaries(salaries) {
+
+  let sum = 0;
+  for (let salary of Object.values(salaries)) {
+    sum += salary;
+  }
+
+  return sum;
+}
+
diff --git a/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/test.js b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/test.js
new file mode 100644
index 00000000..684b0894
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("sumSalaries", function() {
+  it("returns sum of salaries", function() {
+    let salaries = {
+      "John": 100,
+      "Pete": 300,
+      "Mary": 250
+    };
+
+    assert.equal( sumSalaries(salaries), 650 );
+  });
+
+  it("returns 0 for the empty object", function() {
+    assert.strictEqual( sumSalaries({}), 0);
+  });
+});
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.md b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/solution.md
similarity index 100%
rename from 2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.md
rename to 1-js/05-data-types/08-keys-values-entries/01-sum-salaries/solution.md
diff --git a/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/task.md b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/task.md
new file mode 100644
index 00000000..211357d0
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/01-sum-salaries/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Sum the properties
+
+There is a `salaries` object with arbitrary number of salaries. 
+
+Write the function `sumSalaries(salaries)` that returns the sum of all salaries using `Object.values` and the `for..of` loop.
+
+If `salaries` is empty, then the result must be `0`.
+
+For instance:
+
+```js
+let salaries = {
+  "John": 100,
+  "Pete": 300,
+  "Mary": 250
+};
+
+alert( sumSalaries(salaries) ); // 650
+```
+
diff --git a/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/solution.js b/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/solution.js
new file mode 100644
index 00000000..1853d20e
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/solution.js
@@ -0,0 +1,4 @@
+function count(obj) { 
+  return Object.keys(obj).length;
+}
+
diff --git a/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/test.js b/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/test.js
new file mode 100644
index 00000000..e568c320
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/02-count-properties/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("count", function() {
+  it("counts the number of properties", function() {
+    assert.equal( count({a: 1, b: 2}), 2 );
+  });
+
+  it("returns 0 for an empty object", function() {
+    assert.equal( count({}), 0 );
+  });
+
+  it("ignores symbolic properties", function() {
+    assert.equal( count({ [Symbol('id')]: 1 }), 0 );
+  });
+});
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.md b/1-js/05-data-types/08-keys-values-entries/02-count-properties/solution.md
similarity index 100%
rename from 2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.md
rename to 1-js/05-data-types/08-keys-values-entries/02-count-properties/solution.md
diff --git a/1-js/05-data-types/08-keys-values-entries/02-count-properties/task.md b/1-js/05-data-types/08-keys-values-entries/02-count-properties/task.md
new file mode 100644
index 00000000..d7aebb1f
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/02-count-properties/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Count properties
+
+Write a function `count(obj)` that returns the number of properties in the object:
+
+```js
+let user = {
+  name: 'John',
+  age: 30
+};
+
+alert( count(user) ); // 2
+```
+
+Try to make the code as short as possible.
+
+P.S. Ignore symbolic properties, count only "regular" ones.
+
diff --git a/1-js/05-data-types/08-keys-values-entries/article.md b/1-js/05-data-types/08-keys-values-entries/article.md
new file mode 100644
index 00000000..f18c065b
--- /dev/null
+++ b/1-js/05-data-types/08-keys-values-entries/article.md
@@ -0,0 +1,70 @@
+
+# Object.keys, values, entries
+
+Let's step away from the indivitual data structures and talk about the iterations over them. 
+
+In the previous chapter we saw methods `map.keys()`, `map.values()`, `map.entries()`.
+
+These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too. 
+
+They are supported for:
+
+- `Map`
+- `Set`
+- `Array` (except `arr.values()`)
+
+Plain objects also support similar methods, but the syntax is a bit different.
+
+## Object.keys, values, entries
+
+For plain objects, the following methods are available:
+
+- [Object.keys(obj)](mdn:js/Object/keys) -- returns an array of keys.
+- [Object.values(obj)](mdn:js/Object/values) -- returns an array of values.
+- [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of `[key, value]` pairs.
+
+...But please note the distinctions (compared to map for example):
+
+|             | Map              | Object       |
+|-------------|------------------|--------------|
+| Call syntax | `map.keys()`  | `Object.keys(obj)`, but not `obj.keys()` |
+| Returns     | iterable    | "real" Array                     |
+
+The first difference is that we have to call `Object.keys(obj)`, and not `obj.keys()`.
+
+Why so? There main reason is flexibility. Remember, objects are a base of all complex structures in JavaScript. So we may have an object of our own like `order` that implements its own `order.values()` method. And we still can call `Object.values(order)` on it.
+
+The second difference is that `Object.*` methods return "real" array objects, not just an iterable. That's mainly for historical reasons.
+
+For instance:
+
+```js
+let user = {
+  name: "John",
+  age: 30
+};
+```
+
+- `Object.keys(user) = [name, age]`
+- `Object.values(user) = ["John", 30]`
+- `Object.entries(user) = [ ["name","John"], ["age",30] ]`
+
+Here's an example of using `Object.values` to loop over property values:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+// loop over values
+for(let value of Object.values(user)) {
+  alert(value); // John, then 30
+}
+```
+
+```smart header="`Object.keys/values/entries` ignore symbolic properties"
+Just like `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys.
+
+Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, the method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) returns *all* keys.
+```
diff --git a/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/solution.md b/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/solution.md
new file mode 100644
index 00000000..cc226e7c
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/solution.md
@@ -0,0 +1,13 @@
+
+```js run
+let user = {
+  name: "John",
+  years: 30
+};
+
+let {name, years: age, isAdmin = false} = user;
+
+alert( name ); // John
+alert( age ); // 30
+alert( isAdmin ); // false
+```
\ No newline at end of file
diff --git a/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/task.md b/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/task.md
new file mode 100644
index 00000000..b2213323
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/1-destructuring-assignment/task.md
@@ -0,0 +1,33 @@
+importance: 5
+
+---
+
+# Destructuring assignment
+
+We have an object:
+
+```js
+let user = {
+  name: "John",
+  years: 30
+};
+```
+
+Write the destructuring assignment that reads:
+
+- `name` property into the variable `name`.
+- `years` property into the variable `age`.
+- `isAdmin` property into the variable `isAdmin` (false if absent)
+
+The values after the assignment should be:
+
+```js
+let user = { name: "John", years: 30 };
+
+// your code to the left side:
+// ... = user
+
+alert( name ); // John
+alert( age ); // 30
+alert( isAdmin ); // false
+```
diff --git a/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/solution.js b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/solution.js
new file mode 100644
index 00000000..d95cf1b1
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/solution.js
@@ -0,0 +1,16 @@
+function topSalary(salaries) {
+
+  let max = 0;
+  let maxName = null;
+
+  for(let [name, salary] of Object.entries(salaries)) {
+    if (max < salary) {
+      max = salary;
+      maxName = name;
+    }
+  }
+
+  return maxName;
+}
+
+
diff --git a/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/test.js b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/test.js
new file mode 100644
index 00000000..e1da754b
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("topSalary", function() {
+  it("returns top-paid person", function() {
+    let salaries = {
+      "John": 100,
+      "Pete": 300,
+      "Mary": 250
+    };
+
+    assert.equal( topSalary(salaries), "Pete" );
+  });
+
+  it("returns null for the empty object", function() {
+    assert.isNull( topSalary({}) );
+  });
+});
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.md b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/solution.md
similarity index 100%
rename from 2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.md
rename to 1-js/05-data-types/09-destructuring-assignment/6-max-salary/solution.md
diff --git a/1-js/05-data-types/09-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/task.md
new file mode 100644
index 00000000..9f33de08
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/6-max-salary/task.md
@@ -0,0 +1,22 @@
+importance: 5
+
+---
+
+# The maximal salary 
+
+There is a `salaries` object:
+
+```js
+let salaries = {
+  "John": 100,
+  "Pete": 300,
+  "Mary": 250
+};
+```
+
+Create the function `topSalary(salaries)` that returns the name of the top-paid person.
+
+- If `salaries` is empty, it should return `null`.
+- If there are multiple top-paid persons, return any of them.
+
+P.S. Use `Object.entries` and destructuring to iterate over key/value pairs.
diff --git a/1-js/05-data-types/09-destructuring-assignment/article.md b/1-js/05-data-types/09-destructuring-assignment/article.md
new file mode 100644
index 00000000..701deb06
--- /dev/null
+++ b/1-js/05-data-types/09-destructuring-assignment/article.md
@@ -0,0 +1,517 @@
+# Destructuring assignment
+
+The two most used data structures in JavaScript are `Object` and `Array`.
+
+Objects allow to pack many pieces of information into a single entity and arrays allow to store ordered collections. So we can make an object or an array and handle it as a single thing, maybe pass to a function call.
+
+*Destructuring assignment* is a special syntax that allows to "unpack" arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and soon we'll see how these are handled too.
+
+[cut]
+
+## Array destructuring
+
+An example of how the array is destructured into variables:
+
+```js
+// we have an array with the name and surname
+let arr = ["Ilya", "Kantor"]
+
+*!*
+// destructuring assignment
+let [firstName, surname] = arr;
+*/!*
+
+alert(firstName); // Ilya
+alert(surname);  // Kantor
+```
+
+Now we can work with variables instead of array members.
+
+It looks great when combined with `split` or other array-returning methods:
+
+```js
+let [firstName, surname] = "Ilya Kantor".split(' ');
+```
+
+````smart header="\"Destructuring\" does not mean \"destructive\""
+That's called "destructuring assignment", because it "destructurizes" by copying items into variables. But the array itself is not modified.
+
+That's just a shorter way to write:
+```js
+// let [firstName, surname] = arr;
+let firstName = arr[0];
+let surname = arr[1];
+```
+````
+
+````smart header="Ignore first elements"
+Unwanted elements of the array can also be thrown away via an extra comma:
+
+```js run
+*!*
+// first and second elements are not needed
+let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
+*/!*
+
+alert( title ); // Imperator
+```
+
+In the code above, the first and second elements of the array are skipped, the third one is assigned to `title`, and the rest is also skipped.
+````
+
+````smart header="Works with any iterable on the right-side"
+
+...Actually, we can use it with any iterable, not only an array:
+
+```js
+let [a, b, c] = "abc"; // ["a", "b", "c"]
+let [one, two, three] = new Set([1, 2, 3]);
+```
+
+````
+
+
+````smart header="Assign to anything at the left-side"
+
+We can use any "assignables" at the left side.
+
+For instance, an object property:
+```js run
+let user = {};
+[user.name, user.surname] = "Ilya Kantor".split(' ');
+
+alert(user.name); // Ilya
+```
+
+````
+
+````smart header="Looping with .entries()"
+
+In the previous chapter we saw [Object.entries(obj)](mdn:js/Object/entries) method.
+
+We can use it with destructuring to loop over keys-and-values of an object:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+// loop over keys-and-values
+*!*
+for(let [key, value] of Object.entries(user)) {
+*/!*
+  alert(`${key}:${value}`); // name:John, then age:30
+}
+```
+
+...And the same for a map:
+
+```js run
+let user = new Map();
+user.set("name", "John");
+user.set("age", "30");
+
+*!*
+for(let [key, value] of user.entries()) {
+*/!*
+  alert(`${key}:${value}`); // name:John, then age:30
+}
+```
+````
+### The rest '...'
+
+If we want not just to get first values, but also to gather all that follows -- we can add one more parameter that gets "the rest" using the three dots `"..."`:
+
+```js run
+let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
+
+alert(name1); // Julius
+alert(name2); // Caesar
+
+*!*
+alert(rest[0]); // Consul
+alert(rest[1]); // of the Roman Republic
+alert(rest.length); // 2
+*/!*
+```
+
+The value of `rest` is the array of the remaining array elements. We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes the last.
+
+### Default values
+
+If there are fewer values in the array than variables in the assignment -- there will be no error, absent values are considered undefined:
+
+```js run
+*!*
+let [firstName, surname] = [];
+*/!*
+
+alert(firstName); // undefined
+```
+
+If we want a "default" value to replace the missing one, we can provide it using `=`:
+
+```js run
+*!*
+// default values
+let [name="Guest", surname="Anonymous"] = ["Julius"];
+*/!*
+
+alert(name);    // Julius (from array)
+alert(surname); // Anonymous (default used)
+```
+
+Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided.
+
+For instance, here we use `prompt` function for two defaults. But it will only run only for the missing one:
+
+```js run
+// runs only prompt for surname
+let [name=prompt('name?'), surname=prompt('surname?')] = ["Julius"];
+
+alert(name);    // Julius (from array)
+alert(surname); // whatever prompt gets
+```
+
+
+
+## Object destructuring
+
+The destructuring assignment also works with objects.
+
+The basic syntax is:
+
+```js
+let {var1, var2} = {var1:…, var2…}
+```
+
+We have an existing object at the right side, that we want to split into variables. To the left side contains a "pattern" for corresponding properties. In the simple case that's a list of variable names in `{...}`.
+
+For instance:
+
+```js run
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+*!*
+let {title, width, height} = options;
+*/!*
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+```
+
+Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. The order does not matter, that works too:
+
+```js
+// changed the order of properties in let {...}
+let {height, width, title} = { title: "Menu", height: 200, width: 100 }
+```
+
+The pattern on the left side may be more complex and specify the mapping between properties and variables.
+
+If we want to assign a property to a variable with another name, for instance, `options.width` to go into the variable named `w`, then we can set it using a colon:
+
+```js run
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+*!*
+// { sourceProperty: targetVariable }
+let {width: w, height: h, title} = options;
+*/!*
+
+// width -> w
+// height -> h
+// title -> title
+
+alert(title);  // Menu
+alert(w);      // 100
+alert(h);      // 200
+```
+
+The colon shows "what : goes where". In the example above the property `width` goes to `w`, property `height` goes to `h`, and `title` is assigned to the same name.
+
+For potentially missing properties we can set default values using `"="`, like this:
+
+```js run
+let options = {
+  title: "Menu"
+};
+
+*!*
+let {width=100, height=200, title} = options;
+*/!*
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+```
+
+Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided.
+
+The code below asks for width, but not about the title.
+
+```js run
+let options = {
+  title: "Menu"
+};
+
+*!*
+let {width=prompt("width?"), title=prompt("title?")} = options;
+*/!*
+
+alert(title);  // Menu
+alert(width);  // (whatever you the result of prompt is)
+```
+
+We also can combine both the colon and equality:
+
+```js run
+let options = {
+  title: "Menu"
+};
+
+*!*
+let {width:w=100, height:h=200, title} = options;
+*/!*
+
+alert(title);  // Menu
+alert(w);      // 100
+alert(h);      // 200
+```
+
+### The rest operator
+
+What if the object has more properties than we have variables? Can we take some and then assign the "rest" somewhere?
+
+The specification for using the rest operator (three dots) here is almost in the standard, but most browsers do not support it yet.
+
+It looks like this:
+
+```js run
+let options = {
+  title: "Menu",
+  height: 200,
+  width: 100
+};
+
+*!*
+let {title, ...rest} = options;
+*/!*
+
+// now title="Menu", rest={height: 200, widht: 100}
+alert(rest.height);  // 200
+alert(rest.width);   // 100
+```
+
+
+
+````smart header="Gotcha without `let`"
+In the examples above variables were declared right before the assignment: `let {…} = {…}`. Of course, we could use existing variables too. But there's a catch.
+
+This won't work:
+```js run
+let title, width, height;
+
+// error in this line
+{title, width, height} = {title: "Menu", width: 200, height: 100};
+```
+
+The problem is that JavaScript treats `{...}` in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this:
+
+```js run
+{
+  // a code block
+  let message = "Hello";
+  // ...
+  alert( message );
+}
+```
+
+To show JavaScript that it's not a code block, we can wrap the whole assignment in brackets `(...)`:
+
+```js run
+let title, width, height;
+
+// okay now
+*!*(*/!*{title, width, height} = {title: "Menu", width: 200, height: 100}*!*)*/!*;
+
+alert( title ); // Menu
+```
+
+````
+
+## Nested destructuring
+
+If an object or an array contain other objects and arrays, we can use more complex left-side patterns to extract deeper portions.
+
+In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern at the left side of the assignment has the same structure:
+
+```js run
+let options = {
+  size: {
+    width: 100,
+    height: 200
+  },
+  items: ["Cake", "Donut"],
+  extra: true    // something extra that we will not destruct
+};
+
+// destructuring assignment on multiple lines for clarity
+let {
+  size: { // put size here
+    width,
+    height
+  },
+  items: [item1, item2], // assign items here
+  title = "Menu" // not present in the object (default value is used)
+} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+alert(item1);  // Cake
+alert(item2);  // Donut
+```
+
+The whole `options` object except `extra` that was not mentioned, is assigned to corresponding variables.
+
+![](destructuring-complex.png)
+
+Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value.
+
+That often happens with destructuring assignments. We have a complex object with may properties and want extract only what we need.
+
+Even like this:
+```js
+// take size as a whole into a variable, ignore the rest
+let { size } = options;
+```
+
+## Smart function parameters
+
+There are times when a function may have many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on.
+
+Here's a bad way to write such function:
+
+```js
+function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
+  // ...
+}
+```
+
+The real-life problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default.
+
+Like this?
+
+```js
+showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])
+```
+
+That's ugly. And becomes unreadable when we deal with more parameters.
+
+Destructuring comes to the rescue!
+
+We can pass parameters as an object, and the function immediately destructurizes them into variables:
+
+```js run
+// we pass object to function
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+// ...and it immediately expands it to variables
+function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) {
+  // title, items – taken from options,
+  // width, height – defaults used
+  alert( title + ' ' + width + ' ' + height ); // My Menu 100 200
+  alert( items ); // Item1, Item2
+}
+
+showMenu(options);
+```
+
+We can also use more complex destructuring with nested objects and colon mappings:
+
+```js run
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+*!*
+function showMenu({
+  title = "Untitled",
+  width:w = 100,  // width goes to w
+  height:h = 200, // height goes to h
+  items: [item1, item2] // items first element goes to item1, second to item2
+}) {
+*/!*
+  alert( title + ' ' + w + ' ' + h ); // My Menu 100 200
+  alert( item1 ); // Item1
+  alert( item2 ); // Item2
+}
+
+showMenu(options);
+```
+
+The syntax is the same as for a destructuring assignment:
+```js
+function({
+  incomingProperty: parameterName = defaultValue
+  ...
+})
+```
+
+Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object:
+
+```js
+showMenu({});
+
+// that would give an error
+showMenu();
+```
+
+We can fix this by making `{}` the default value for the whole destructuring thing:
+
+
+```js run
+// simplified parameters a bit for clarity
+function showMenu(*!*{ title="Menu", width=100, height=200 } = {}*/!*) {
+  alert( title + ' ' + width + ' ' + height );
+}
+
+showMenu(); // Menu 100 200
+```
+
+In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize.
+
+## Summary
+
+- Destructuring assignment allows to instantly map an object or array into many variables.
+- The object syntax:
+    ```js
+    let {prop : varName = default, ...} = object
+    ```
+
+    This means that property `prop` should go into the variable `varName` and, if no such property exists, then `default` value should be used.
+
+- The array syntax:
+
+    ```js
+    let [item1 = default, item2, ...rest] = array
+    ```
+
+    The first item goes to `item1`, the second goes into `item2`, all the rest makes the array `rest`.
+
+- For more complex cases, the left side must have the same structure as the right one.
diff --git a/1-js/05-data-types/09-destructuring-assignment/destructuring-complex.png b/1-js/05-data-types/09-destructuring-assignment/destructuring-complex.png
new file mode 100644
index 00000000..50c4ffc9
Binary files /dev/null and b/1-js/05-data-types/09-destructuring-assignment/destructuring-complex.png differ
diff --git a/1-js/05-data-types/09-destructuring-assignment/destructuring-complex@2x.png b/1-js/05-data-types/09-destructuring-assignment/destructuring-complex@2x.png
new file mode 100644
index 00000000..bb908281
Binary files /dev/null and b/1-js/05-data-types/09-destructuring-assignment/destructuring-complex@2x.png differ
diff --git a/1-js/05-data-types/10-date/1-new-date/solution.md b/1-js/05-data-types/10-date/1-new-date/solution.md
new file mode 100644
index 00000000..eb271a91
--- /dev/null
+++ b/1-js/05-data-types/10-date/1-new-date/solution.md
@@ -0,0 +1,8 @@
+The `new Date` constructor uses the local time zone by default. So the only important thing to remember is that months start from zero.
+
+So February has number 1.
+
+```js run
+let d = new Date(2012, 1, 20, 3, 12);
+alert( d );
+```
diff --git a/1-js/05-data-types/10-date/1-new-date/task.md b/1-js/05-data-types/10-date/1-new-date/task.md
new file mode 100644
index 00000000..1b40d5ac
--- /dev/null
+++ b/1-js/05-data-types/10-date/1-new-date/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Create a date
+
+Create a `Date` object for the date: Feb 20, 2012, 3:12am. The time zone is local.
+
+Show it using `alert`.
diff --git a/1-js/05-data-types/10-date/2-get-week-day/_js.view/solution.js b/1-js/05-data-types/10-date/2-get-week-day/_js.view/solution.js
new file mode 100644
index 00000000..642c376a
--- /dev/null
+++ b/1-js/05-data-types/10-date/2-get-week-day/_js.view/solution.js
@@ -0,0 +1,5 @@
+function getWeekDay(date) {
+  let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+
+  return days[date.getDay()];
+}
diff --git a/1-js/05-data-types/10-date/2-get-week-day/_js.view/test.js b/1-js/05-data-types/10-date/2-get-week-day/_js.view/test.js
new file mode 100644
index 00000000..3cdc9183
--- /dev/null
+++ b/1-js/05-data-types/10-date/2-get-week-day/_js.view/test.js
@@ -0,0 +1,29 @@
+describe("getWeekDay", function() {
+  it("3 January 2014 - friday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 3)), 'FR');
+  });
+
+  it("4 January 2014 - saturday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 4)), 'SA');
+  });
+
+  it("5 January 2014 - sunday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 5)), 'SU');
+  });
+
+  it("6 January 2014 - monday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 6)), 'MO');
+  });
+
+  it("7 January 2014 - tuesday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 7)), 'TU');
+  });
+
+  it("8 January 2014 - wednesday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 8)), 'WE');
+  });
+
+  it("9 January 2014 - thursday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 9)), 'TH');
+  });
+});
diff --git a/1-js/05-data-types/10-date/2-get-week-day/solution.md b/1-js/05-data-types/10-date/2-get-week-day/solution.md
new file mode 100644
index 00000000..2acaabf9
--- /dev/null
+++ b/1-js/05-data-types/10-date/2-get-week-day/solution.md
@@ -0,0 +1,14 @@
+The method `date.getDay()` returns the number of the weekday, starting from sunday.
+
+Let's make an array of weekdays, so that we can get the proper day name by its number:
+
+```js run
+function getWeekDay(date) {
+  let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+
+  return days[date.getDay()];
+}
+
+let date = new Date(2014, 0, 3); // 3 Jan 2014
+alert( getWeekDay(date) ); // FR
+```
diff --git a/1-js/05-data-types/10-date/2-get-week-day/task.md b/1-js/05-data-types/10-date/2-get-week-day/task.md
new file mode 100644
index 00000000..5cf31565
--- /dev/null
+++ b/1-js/05-data-types/10-date/2-get-week-day/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Show a weekday
+
+Write a function `getWeekDay(date)` to show the weekday in short format: 'MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'.
+
+For instance:
+
+```js no-beautify
+let date = new Date(2012, 0, 3);  // 3 Jan 2012
+alert( getWeekDay(date) );        // should output "TU"
+```
diff --git a/1-js/05-data-types/10-date/3-weekday/_js.view/solution.js b/1-js/05-data-types/10-date/3-weekday/_js.view/solution.js
new file mode 100644
index 00000000..fb9e3d2a
--- /dev/null
+++ b/1-js/05-data-types/10-date/3-weekday/_js.view/solution.js
@@ -0,0 +1,10 @@
+function getLocalDay(date) {
+
+  let day = date.getDay();
+
+  if (day == 0) { // weekday 0 (sunday) is 7 in european
+    day = 7;
+  }
+
+  return day;
+}
diff --git a/1-js/05-data-types/10-date/3-weekday/_js.view/test.js b/1-js/05-data-types/10-date/3-weekday/_js.view/test.js
new file mode 100644
index 00000000..cdf0f535
--- /dev/null
+++ b/1-js/05-data-types/10-date/3-weekday/_js.view/test.js
@@ -0,0 +1,29 @@
+describe("getLocalDay returns the \"european\" weekday", function() {
+  it("3 January 2014 - friday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 3)), 5);
+  });
+
+  it("4 January 2014 - saturday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 4)), 6);
+  });
+
+  it("5 January 2014 - sunday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 5)), 7);
+  });
+
+  it("6 January 2014 - monday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 6)), 1);
+  });
+
+  it("7 January 2014 - tuesday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 7)), 2);
+  });
+
+  it("8 January 2014 - wednesday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 8)), 3);
+  });
+
+  it("9 January 2014 - thursday", function() {
+    assert.equal(getWeekDay(new Date(2014, 0, 9)), 4);
+  });
+});
diff --git a/1-js/05-data-types/10-date/3-weekday/solution.md b/1-js/05-data-types/10-date/3-weekday/solution.md
new file mode 100644
index 00000000..bfe3f4ca
--- /dev/null
+++ b/1-js/05-data-types/10-date/3-weekday/solution.md
@@ -0,0 +1,14 @@
+```js run
+function getLocalDay(date) {
+
+  let day = date.getDay();
+
+  if (day == 0) { // 0 becomes 7
+    day = 7;
+  }
+
+  return day;
+}
+
+alert( getLocalDay(new Date(2012, 0, 3)) ); // 2
+```
diff --git a/1-js/05-data-types/10-date/3-weekday/task.md b/1-js/05-data-types/10-date/3-weekday/task.md
new file mode 100644
index 00000000..c2ae2168
--- /dev/null
+++ b/1-js/05-data-types/10-date/3-weekday/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# European weekday
+
+European countries have days of week starting with monday (number 1), then tuesday (number 2) and till sunday (number 7). Write a function `getLocalDay(date)` that returns the "european" day of week for `date`.
+
+```js no-beautify
+let date = new Date(2012, 0, 3);  // 3 Jan 2012
+alert( getLocalDay(date) );       // tuesday, should show 2
+```
diff --git a/1-js/05-data-types/10-date/4-get-date-ago/_js.view/solution.js b/1-js/05-data-types/10-date/4-get-date-ago/_js.view/solution.js
new file mode 100644
index 00000000..9cce0fb9
--- /dev/null
+++ b/1-js/05-data-types/10-date/4-get-date-ago/_js.view/solution.js
@@ -0,0 +1,6 @@
+function getDateAgo(date, days) {
+  let dateCopy = new Date(date);
+
+  dateCopy.setDate(date.getDate() - days);
+  return dateCopy.getDate();
+}
diff --git a/1-js/05-data-types/10-date/4-get-date-ago/_js.view/test.js b/1-js/05-data-types/10-date/4-get-date-ago/_js.view/test.js
new file mode 100644
index 00000000..255acffe
--- /dev/null
+++ b/1-js/05-data-types/10-date/4-get-date-ago/_js.view/test.js
@@ -0,0 +1,27 @@
+describe("getDateAgo", function() {
+
+  it("1 day before 02.01.2015 -> day 1", function() {
+    assert.equal(getDateAgo(new Date(2015, 0, 2), 1), 1);
+  });
+
+
+  it("2 days before 02.01.2015 -> day 31", function() {
+    assert.equal(getDateAgo(new Date(2015, 0, 2), 2), 31);
+  });
+
+  it("100 days before 02.01.2015 -> day 24", function() {
+    assert.equal(getDateAgo(new Date(2015, 0, 2), 100), 24);
+  });
+
+  it("365 days before 02.01.2015 -> day 2", function() {
+    assert.equal(getDateAgo(new Date(2015, 0, 2), 365), 2);
+  });
+
+  it("does not modify the given date", function() {
+    let date = new Date(2015, 0, 2);
+    let dateCopy = new Date(date);
+    getDateAgo(dateCopy, 100);
+    assert.equal(date.getTime(), dateCopy.getTime());
+  });
+
+});
diff --git a/1-js/05-data-types/10-date/4-get-date-ago/solution.md b/1-js/05-data-types/10-date/4-get-date-ago/solution.md
new file mode 100644
index 00000000..7abc7ab9
--- /dev/null
+++ b/1-js/05-data-types/10-date/4-get-date-ago/solution.md
@@ -0,0 +1,27 @@
+The idea is simple: to substract given number of days from `date`:
+
+```js
+function getDateAgo(date, days) {
+  date.setDate(date.getDate() - days);
+  return date.getDate();
+}
+```
+
+...But the function should not change `date`. That's an important thing, because the outer code which gives us the date does not expect it to change.
+
+To implement it let's clone the date, like this:
+
+```js run
+function getDateAgo(date, days) {
+  let dateCopy = new Date(date);
+
+  dateCopy.setDate(date.getDate() - days);
+  return dateCopy.getDate();
+}
+
+let date = new Date(2015, 0, 2);
+
+alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015)
+alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014)
+alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014)
+```
diff --git a/1-js/05-data-types/10-date/4-get-date-ago/task.md b/1-js/05-data-types/10-date/4-get-date-ago/task.md
new file mode 100644
index 00000000..40dcd926
--- /dev/null
+++ b/1-js/05-data-types/10-date/4-get-date-ago/task.md
@@ -0,0 +1,21 @@
+importance: 4
+
+---
+
+# Which day of month was many days ago?
+
+Create a function `getDateAgo(date, days)` to return the day of month `days` ago from the `date`.
+
+For instance, if today is 20th, then `getDateAgo(new Date(), 1)` should be 19th and `getDateAgo(new Date(), 2)` should be 18th.
+
+Should also work over months/years reliably:
+
+```js
+let date = new Date(2015, 0, 2);
+
+alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015)
+alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014)
+alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014)
+```
+
+P.S. The function should not modify the given `date`.
diff --git a/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/solution.js b/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/solution.js
new file mode 100644
index 00000000..d0d7d37f
--- /dev/null
+++ b/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/solution.js
@@ -0,0 +1,4 @@
+function getLastDayOfMonth(year, month) {
+  let date = new Date(year, month + 1, 0);
+  return date.getDate();
+}
diff --git a/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/test.js b/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/test.js
new file mode 100644
index 00000000..4ff3e116
--- /dev/null
+++ b/1-js/05-data-types/10-date/5-last-day-of-month/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("getLastDayOfMonth", function() {
+  it("last day of 01.01.2012 - 31", function() {
+    assert.equal(getLastDayOfMonth(2012, 0), 31);
+  });
+
+  it("last day of 01.02.2012 - 29 (leap year)", function() {
+    assert.equal(getLastDayOfMonth(2012, 1), 29);
+  });
+
+  it("last day of 01.02.2013 - 28", function() {
+    assert.equal(getLastDayOfMonth(2013, 1), 28);
+  });
+});
diff --git a/1-js/05-data-types/10-date/5-last-day-of-month/solution.md b/1-js/05-data-types/10-date/5-last-day-of-month/solution.md
new file mode 100644
index 00000000..65f61c5b
--- /dev/null
+++ b/1-js/05-data-types/10-date/5-last-day-of-month/solution.md
@@ -0,0 +1,13 @@
+Let's create a date using the next month, but pass zero as the day:
+```js run
+function getLastDayOfMonth(year, month) {
+  let date = new Date(year, month + 1, 0);
+  return date.getDate();
+}
+
+alert( getLastDayOfMonth(2012, 0) ); // 31
+alert( getLastDayOfMonth(2012, 1) ); // 29
+alert( getLastDayOfMonth(2013, 1) ); // 28
+```
+
+Normally, dates start from 1, but technically we can pass any number, the date will autoadjust itself. So when we pass 0, then it means "one day before 1st day of the month", in other words: "the last day of the previous month".
diff --git a/1-js/05-data-types/10-date/5-last-day-of-month/task.md b/1-js/05-data-types/10-date/5-last-day-of-month/task.md
new file mode 100644
index 00000000..10dfb7a7
--- /dev/null
+++ b/1-js/05-data-types/10-date/5-last-day-of-month/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Last day of month?
+
+Write a function `getLastDayOfMonth(year, month)` that returns the last day of month. Sometimes it is 30th, 31st or even 28/29th for Feb.
+
+Parameters:
+
+- `year` -- four-digits year, for instance 2012.
+- `month` -- month, from 0 to 11.
+
+For instance, `getLastDayOfMonth(2012, 1) = 29` (leap year, Feb).
diff --git a/1-js/05-data-types/10-date/6-get-seconds-today/solution.md b/1-js/05-data-types/10-date/6-get-seconds-today/solution.md
new file mode 100644
index 00000000..91903d90
--- /dev/null
+++ b/1-js/05-data-types/10-date/6-get-seconds-today/solution.md
@@ -0,0 +1,26 @@
+To get the number of seconds, we can generate a date using the current day and time 00:00:00, then substract it from "now".
+
+The difference is the number of milliseconds from the beginning of the day, that we should divide by 1000 to get seconds:
+
+```js run
+function getSecondsToday() {
+  let now = new Date();
+
+  // create an object using the current day/month/year
+  let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  let diff = now - today; // ms difference
+  return Math.round(diff / 1000); // make seconds
+}
+
+alert( getSecondsToday() );
+```
+
+An alternative solution would be to get hours/minutes/seconds and convert them to seconds:
+
+```js run
+function getSecondsToday() {
+  let d = new Date();
+  return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
+};
+```
diff --git a/1-js/05-data-types/10-date/6-get-seconds-today/task.md b/1-js/05-data-types/10-date/6-get-seconds-today/task.md
new file mode 100644
index 00000000..3fbe1328
--- /dev/null
+++ b/1-js/05-data-types/10-date/6-get-seconds-today/task.md
@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# How many seconds has passed today?
+
+Write a function `getSecondsToday()` that returns the number of seconds from the beginning of today.
+
+For instance, if now `10:00 am`, and there was no daylight savings shift, then:
+
+```js
+getSecondsToday() == 36000 // (3600 * 10)
+```
+
+The function should work in any day. That is, it should not have a hard-coded value of "today".
diff --git a/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/solution.md b/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/solution.md
new file mode 100644
index 00000000..a89c8b3e
--- /dev/null
+++ b/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/solution.md
@@ -0,0 +1,15 @@
+To get the number of milliseconds till tomorrow, we can from "tomorrow 00:00:00" substract the current date.
+
+First, we generate that "tomorrow", and then do it:
+
+```js run
+function getSecondsToTomorrow() {
+  let now = new Date();
+
+  // tomorrow date
+  let tomorrow = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*);
+
+  let diff = tomorrow - now; // difference in ms
+  return Math.round(diff / 1000); // convert to seconds
+}
+```
diff --git a/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/task.md b/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/task.md
new file mode 100644
index 00000000..e0590302
--- /dev/null
+++ b/1-js/05-data-types/10-date/7-get-seconds-to-tomorrow/task.md
@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# How many seconds till tomorrow?
+
+Create a function `getSecondsToTomorrow()` that returns the number of seconds till tomorrow.
+
+For instance, if now is `23:00`, then:
+
+```js
+getSecondsToTomorrow() == 3600
+```
+
+P.S. The function should work at any day, the "today" is not hardcoded.
diff --git a/1-js/05-data-types/10-date/8-format-date-relative/_js.view/solution.js b/1-js/05-data-types/10-date/8-format-date-relative/_js.view/solution.js
new file mode 100644
index 00000000..4695354a
--- /dev/null
+++ b/1-js/05-data-types/10-date/8-format-date-relative/_js.view/solution.js
@@ -0,0 +1,33 @@
+
+function formatDate(date) {
+  let diff = new Date() - date; // the difference in milliseconds
+
+  if (diff < 1000) { // less than 1 second
+    return 'right now';
+  }
+
+  let sec = Math.floor(diff / 1000); // convert diff to seconds
+
+  if (sec < 60) {
+    return sec + ' sec. ago';
+  }
+
+  let min = Math.floor(diff / 60000); // convert diff to minutes
+  if (min < 60) {
+    return min + ' min. ago';
+  }
+
+  // format the date
+  // add leading zeroes to single-digit day/month/hours/minutes
+  let d = date;
+  d = [
+    '0' + d.getDate(),
+    '0' + (d.getMonth() + 1),
+    '' + d.getFullYear(),
+    '0' + d.getHours(),
+    '0' + d.getMinutes()
+  ].map(component => component.slice(-2)); // take last 2 digits of every component
+
+  // join the components into date
+  return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');
+}
diff --git a/1-js/05-data-types/10-date/8-format-date-relative/_js.view/test.js b/1-js/05-data-types/10-date/8-format-date-relative/_js.view/test.js
new file mode 100644
index 00000000..9b4cb2f5
--- /dev/null
+++ b/1-js/05-data-types/10-date/8-format-date-relative/_js.view/test.js
@@ -0,0 +1,18 @@
+describe("formatDate", function() {
+  it("shows 1ms ago as \"right now\"", function() {
+    assert.equal(formatDate(new Date(new Date - 1)), 'right now');
+  });
+
+  it('"30 seconds ago"', function() {
+    assert.equal(formatDate(new Date(new Date - 30 * 1000)), "30 sec. ago");
+  });
+
+  it('"5 minutes ago"', function() {
+    assert.equal(formatDate(new Date(new Date - 5 * 60 * 1000)), "5 min. ago");
+  });
+
+  it("older dates as DD.MM.YY HH:mm", function() {
+    assert.equal(formatDate(new Date(2014, 2, 1, 11, 22, 33)), "01.03.14 11:22");
+  });
+
+});
diff --git a/1-js/05-data-types/10-date/8-format-date-relative/solution.md b/1-js/05-data-types/10-date/8-format-date-relative/solution.md
new file mode 100644
index 00000000..87864be7
--- /dev/null
+++ b/1-js/05-data-types/10-date/8-format-date-relative/solution.md
@@ -0,0 +1,45 @@
+To get the time from `date` till now -- let's substract the dates.
+
+```js run
+function formatDate(date) {
+  let diff = new Date() - date; // the difference in milliseconds
+
+  if (diff < 1000) { // less than 1 second
+    return 'right now';
+  }
+
+  let sec = Math.floor(diff / 1000); // convert diff to seconds
+
+  if (sec < 60) {
+    return sec + ' sec. ago';
+  }
+
+  let min = Math.floor(diff / 60000); // convert diff to minutes
+  if (min < 60) {
+    return min + ' min. ago';
+  }
+
+  // format the date
+  // add leading zeroes to single-digit day/month/hours/minutes
+  let d = date;
+  d = [
+    '0' + d.getDate(),
+    '0' + (d.getMonth() + 1),
+    '' + d.getFullYear(),
+    '0' + d.getHours(),
+    '0' + d.getMinutes()
+  ].map(component => component.slice(-2)); // take last 2 digits of every component
+
+  // join the components into date
+  return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');
+}
+
+alert( formatDate(new Date(new Date - 1)) ); // "right now"
+
+alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago"
+
+alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago"
+
+// yesterday's date like 31.12.2016, 20:00
+alert( formatDate(new Date(new Date - 86400 * 1000)) );
+```
diff --git a/1-js/05-data-types/10-date/8-format-date-relative/task.md b/1-js/05-data-types/10-date/8-format-date-relative/task.md
new file mode 100644
index 00000000..7b341ca2
--- /dev/null
+++ b/1-js/05-data-types/10-date/8-format-date-relative/task.md
@@ -0,0 +1,25 @@
+importance: 4
+
+---
+
+# Format the relative date
+
+Write a function `formatDate(date)` that should format `date` as follows:
+
+- If since `date` passed less than 1 second, then `"right now"`.
+- Otherwise, if since `date` passed less than 1 minute, then `"n sec. ago"`.
+- Otherwise, if less than an hour, then `"m min. ago"`.
+- Otherwise, the full date in the format `"DD.MM.YY HH:mm"`. That is: `"day.month.year hours:minutes"`, all in 2-digit format, e.g. `31.12.16 10:00`.
+
+For instance:
+
+```js
+alert( formatDate(new Date(new Date - 1)) ); // "right now"
+
+alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago"
+
+alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago"
+
+// yesterday's date like 31.12.2016, 20:00
+alert( formatDate(new Date(new Date - 86400 * 1000)) );
+```
diff --git a/1-js/05-data-types/10-date/article.md b/1-js/05-data-types/10-date/article.md
new file mode 100644
index 00000000..ace3f932
--- /dev/null
+++ b/1-js/05-data-types/10-date/article.md
@@ -0,0 +1,423 @@
+# Date and time
+
+Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time and provides methods for date/time management.
+
+For instance, we can use it to store creation/modification times, or to measure time, or just to print out the current date.
+
+[cut]
+
+## Creation
+
+To create a new `Date` object call `new Date()` with one of the following arguments:
+
+`new Date()`
+: Without arguments -- create a `Date` object for the current date and time:
+
+    ```js run
+    let now = new Date();
+    alert( now ); // shows current date/time
+    ```
+
+`new Date(milliseconds)`
+: Create a `Date` object with the time equal to number of milliseconds (1/1000 of a second) passed after the Jan 1st of 1970 UTC+0.
+
+    ```js run
+    // 0 means 01.01.1970 UTC+0
+    let Jan01_1970 = new Date(0);
+    alert( Jan01_1970 );
+
+    // now add 24 hours, get 02.01.1970 UTC+0
+    let Jan02_1970 = new Date(24 * 3600 * 1000);
+    alert( Jan02_1970 );
+    ```
+
+    The number of milliseconds that has passed since the beginning of 1970 is called a *timestamp*.
+
+    It's a lightweight numeric representation of a date. We can always create a date from a timestamp using `new Date(timestamp)` and convert the existing `Date` object to a timestamp using the `date.getTime()` method (see below).
+
+`new Date(datestring)`
+: If there is a single argument, and it's a string, then it is parsed with the `Date.parse` algorithm (see below).
+
+
+    ```js run
+    let date = new Date("2017-01-26");
+    alert(date); // Thu Jan 26 2017 ...
+    ```
+
+`new Date(year, month, date, hours, minutes, seconds, ms)`
+: Create the date with the given components in the local time zone. Only two first arguments are obligatory.
+
+    Note:
+
+    - The `year` must have 4 digits: `2013` is okay, `98` is not.
+    - The `month` count starts with `0` (Jan), up to `11` (Dec).
+    - The `date` parameter is actually the day of month, if absent then `1` is assumed.
+    - If `hours/minutes/seconds/ms` is absent, they are assumed to be equal `0`.
+
+    For instance:
+
+    ```js
+    new Date(2011, 0, 1, 0, 0, 0, 0); // // 1 Jan 2011, 00:00:00
+    new Date(2011, 0, 1); // the same, hours etc are 0 by default
+    ```
+
+    The minimal precision is 1 ms (1/1000 sec):
+
+    ```js run
+    let date = new Date(2011, 0, 1, 2, 3, 4, 567);
+    alert( date ); // 1.01.2011, 02:03:04.567
+    ```
+
+## Access date components
+
+There are many methods to access the year, month and so on from the `Date` object. But they can be easily remembered when categorized.
+
+`getFullYear()`
+: Get the year (4 digits)
+
+`getMonth()`
+: Get the month, **from 0 to 11**.
+
+`getDate()`
+: Get the day of month, from 1 to 31, the name of the method does look a little bit strange.
+
+`getHours(), getMinutes(), getSeconds(), getMilliseconds()`
+: Get the corresponding time components.
+
+```warn header="Not `getYear()`, but `getFullYear()`"
+Many JavaScript engines implement a non-standard method `getYear()`. This method is deprecated. It returns 2-digit year sometimes. Please never use it. There is `getFullYear()` for the year.
+```
+
+Additionally, we can get a day of week:
+
+`getDay()`
+: Get the day of week, from `0` (Sunday) to `6` (Saturday). The first day is always Sunday, in some countries that's not so, but can't be changed.
+
+**All the methods above return the components relative to the local time zone.**
+
+There are also their UTC-counterparts, that return day, month, year and so on for the time zone UTC+0: `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. Just insert the `"UTC"` right after `"get"`.
+
+If your local time zone is shifted relative to UTC, then the code below shows different hours:
+
+```js run
+// currend date
+let date = new Date();
+
+// the hour in your current time zone
+alert( date.getHours() );
+
+// the hour in UTC+0 time zone (London time without daylight savings)
+alert( date.getUTCHours() );
+```
+
+Besides the given methods, there are two special ones, that do not have a UTC-variant:
+
+`getTime()`
+: Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0.
+
+`getTimezoneOffset()`
+: Returns the difference between the local time zone and UTC, in minutes:
+
+    ```js run
+    // if you are in timezone UTC-1, outputs 60
+    // if you are in timezone UTC+3, outputs -180
+    alert( new Date().getTimezoneOffset() );
+
+    ```
+
+## Setting date components
+
+The following methods allow to set date/time components:
+
+- `setFullYear(year [, month, date])`
+- `setMonth(month [, date])`
+- `setDate(date)`
+- `setHours(hour [, min, sec, ms])`
+- `setMinutes(min [, sec, ms])`
+- `setSeconds(sec [, ms])`
+- `setMilliseconds(ms)`
+- `setTime(milliseconds)` (sets the whole date by milliseconds since 01.01.1970 UTC)
+
+Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`.
+
+As we can see, some methods can set multiple components at once, for example `setHours`. The components that are not mentioned are not modified.
+
+For instance:
+
+```js run
+let today = new Date();
+
+today.setHours(0);
+alert(today); // still today, but the hour is changed to 0
+
+today.setHours(0, 0, 0, 0);
+alert(today); // still today, now 00:00:00 sharp.
+```
+
+## Autocorrection
+
+The *autocorrection* is a very handy feature of `Date` objects. We can set out-of-range values, and it will auto-adjust itself.
+
+For instance:
+
+```js run
+let date = new Date(2013, 0, *!*32*/!*); // 32 Jan 2013 ?!?
+alert(date); // ...is 1st Feb 2013!
+```
+
+Out-of-range date components are distributed automatically.
+
+Let's say we need to increase the date "28 Feb 2016" by 2 days. It may be "2 Mar" or "1 Mar" in case of a leap-year. We don't need to think about it. Just add 2 days. The `Date` object will do the rest:
+
+```js run
+let date = new Date(2016, 1, 28);
+*!*
+date.setDate(date.getDate() + 2);
+*/!*
+
+alert( date ); // 1 Mar 2016
+```
+
+That feature is often used to get the date after the given period of time. For instance, let's get the date for "70 seconds after now":
+
+```js run
+let date = new Date();
+date.setSeconds(date.getSeconds() + 70);
+
+alert( date ); // shows the correct date
+```
+
+We can also set zero or even negative values. For example:
+
+```js run
+let date = new Date(2016, 0, 2); // 2 Jan 2016
+
+date.setDate(1); // set day 1 of month
+alert( date );
+
+date.setDate(0); // min day is 1, so the last day of the previous month is assumed
+alert( date ); // 31 Dec 2015
+```
+
+## Date to number, date diff
+
+When a `Date` object is converted to number, it becomes the timestamp same as `date.getTime()`:
+
+```js run
+let date = new Date();
+alert(+date); // the number of milliseconds, same as date.getTime()
+```
+
+The important side effect: dates can be substracted, the result is their difference in ms.
+
+That can be used for time measurements:
+
+```js run
+let start = new Date(); // start counting
+
+// do the job
+for (let i = 0; i < 100000; i++) {
+  let doSomething = i * i * i;
+}
+
+let end = new Date(); // done
+
+alert( `The loop took ${end - start} ms` );
+```
+
+## Date.now()
+
+If we only want to measure the difference, we don't need the `Date` object.
+
+There's a special method `Date.now()` that returns the current timestamp.
+
+It is semantically equivalent to `new Date().getTime()`, but it doesn't create an intermediate `Date` object. So it's faster and doesn't put pressure on garbage collection.
+
+It is used mostly for convenience or when performance matters, like in games in JavaScript or other specialized applications.
+
+So this is probably better:
+
+```js run
+*!*
+let start = Date.now(); // milliseconds count from 1 Jan 1970
+*/!*
+
+// do the job
+for (let i = 0; i < 100000; i++) {
+  let doSomething = i * i * i;
+}
+
+*!*
+let end = Date.now(); // done
+*/!*
+
+alert( `The loop took ${end - start} ms` ); // substract numbers, not dates
+```
+
+## Benchmarking
+
+If we want a reliable benchmark of CPU-hungry function, we should be careful.
+
+For instance, let's measure two functions that calculate the difference between two dates: which one is faster?
+
+```js
+// we have date1 and date2, which function faster returns their difference in ms?
+function diffSubstract(date1, date2) {
+  return date2 - date1;
+}
+
+// or
+function diffGetTime(date1, date2) {
+  return date2.getTime() - date1.getTime();
+}
+```
+
+These two do exactly the same thing, but one of them uses an explicit `date.getTime()` to get the date in ms, and the other one relies on a date-to-number transform. Their result is always the same.
+
+So, which one is faster?
+
+The first idea may be to run them many times in a row and measure the time difference. For our case, functions are very simple, so we have to do it around 100000 times.
+
+Let's measure:
+
+```js run
+function diffSubstract(date1, date2) {
+  return date2 - date1;
+}
+
+function diffGetTime(date1, date2) {
+  return date2.getTime() - date1.getTime();
+}
+
+function bench(f) {
+  let date1 = new Date(0);
+  let date2 = new Date();
+
+  let start = Date.now();
+  for (let i = 0; i < 100000; i++) f(date1, date2);
+  return Date.now() - start;
+}
+
+alert( 'Time of diffSubstract: ' + bench(diffSubstract) + 'ms' );
+alert( 'Time of diffGetTime: ' + bench(diffGetTime) + 'ms' );
+```
+
+Wow! Using `getTime()` is so much faster! That's because there's no type conversion, it is much easier for engines to optimize.
+
+Okay, we have something. But that's not a good benchmark yet.
+
+Imagine that at the time of running `bench(diffSubstract)` CPU was doing something in parallel, and it was taking resources. And by the time of running `bench(diffGetTime)` the work has finished.
+
+A pretty real scenario for a modern multi-process OS.
+
+As a result, the first benchmark will have less CPU resources than the second. That may lead to wrong results.
+
+**For more reliable benchmarking, the whole pack of benchmarks should be rerun multiple times.**
+
+Here's the code example:
+
+```js run
+function diffSubstract(date1, date2) {
+  return date2 - date1;
+}
+
+function diffGetTime(date1, date2) {
+  return date2.getTime() - date1.getTime();
+}
+
+function bench(f) {
+  let date1 = new Date(0);
+  let date2 = new Date();
+
+  let start = Date.now();
+  for (let i = 0; i < 100000; i++) f(date1, date2);
+  return Date.now() - start;
+}
+
+let time1 = 0;
+let time2 = 0;
+
+*!*
+// run bench(upperSlice) and bench(upperLoop) each 10 times alternating
+for (let i = 0; i < 10; i++) {
+  time1 += bench(diffSubstract);
+  time2 += bench(diffGetTime);
+}
+*/!*
+
+alert( 'Total time for diffSubstract: ' + time1 );
+alert( 'Total time for diffGetTime: ' + time2 );
+```
+
+Modern JavaScript engines start applying advanced optimizations only to "hot code" that executes many times (no need to optimize rarely executed things). So, in the example above, first executions are not well-optimized. We may want to add a heat-up run:
+
+```js
+// added for "heating up" prior to the main loop
+bench(diffSubstract);
+bench(diffGetTime);
+
+// now benchmark
+for (let i = 0; i < 10; i++) {
+  time1 += bench(diffSubstract);
+  time2 += bench(diffGetTime);
+}
+```
+
+```warn header="Be careful doing microbenchmarking"
+Modern JavaScript engines perform many optimizations. They may tweak results of "artificial tests" compared to "normal usage", especially when we benchmark something very small. So if you seriously want to understand performance, then please study how the JavaScript engine works. And then you probably won't need microbenchmarks at all.
+
+The great pack of articles about V8 can be found at <http://mrale.ph>.
+```
+
+## Date.parse from a string
+
+The method [Date.parse(str)](mdn:js/Date/parse) can read a date from a string.
+
+The string format should be: `YYYY-MM-DDTHH:mm:ss.sssZ`, where:
+
+- `YYYY-MM-DD` -- is the date: year-month-day.
+- The character `"T"` is used as the delimiter.
+- `HH:mm:ss.sss` -- is the time: hours, minutes, seconds and milliseconds.
+- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` that would mean UTC+0.
+
+Shorter variants are also possible, like `YYYY-MM-DD` or `YYYY-MM` or even `YYYY`.
+
+The call to `Date.parse(str)` parses the string in the given format and returns the timestamp (number of milliseconds from 1 Jan 1970 UTC+0). If the format is invalid, returns `NaN`.
+
+For instance:
+
+```js run
+let ms = Date.parse('2012-01-26T13:51:50.417-07:00');
+
+alert(ms); // 1327611110417  (timestamp)
+```
+
+We can instantly create a `new Date` object from the timestamp:
+
+```js run
+let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );
+
+alert(date);  
+```
+
+## Summary
+
+- Date and time in JavaScript are represented with the [Date](mdn:js/Date) object. We can't create "only date" or "only time": `Date` objects always carry both.
+- Months are counted from zero (yes, January is a zero month).
+- Days of week in `getDay()` are also counted from zero (that's Sunday).
+- `Date` auto-corrects itself when out-of-range components are set. Good for adding/substracting days/months/hours.
+- Dates can be substracted, giving their difference in milliseconds. That's because a `Date` becomes the timestamp if converted to a number.
+- Use `Date.now()` to get the current timestamp fast.
+
+Note that unlike many other systems, timestamps in JavaScript are in milliseconds, not in seconds.
+
+Also, sometimes we need more precise time measurements. JavaScript itself does not have a way to measure time in microseconds (1 millionth of a second), but most environments provide it. For instance, browser has [performance.now()](mdn:api/Performance/now) that gives the number of milliseconds from the start of page loading with microsecond precision (3 digits after the point):
+
+```js run
+alert(`Loading started ${performance.now()}ms ago`);
+// Something like: "Loading started 34731.26000000001ms ago"
+// .26 is microseconds (260 microseconds)
+// more than 3 digits after the decimal point are precision errors, but only 3 first are correct
+```
+
+Node.JS has `microtime` module and other ways. Technically, any device and environment allows to get more precision, it's just not in `Date`.
diff --git a/1-js/05-data-types/11-json/1-serialize-object/solution.md b/1-js/05-data-types/11-json/1-serialize-object/solution.md
new file mode 100644
index 00000000..db1bcaa8
--- /dev/null
+++ b/1-js/05-data-types/11-json/1-serialize-object/solution.md
@@ -0,0 +1,13 @@
+
+
+```js
+let user = {
+  name: "John Smith",
+  age: 35
+};
+
+*!*
+let user2 = JSON.parse(JSON.stringify(user));
+*/!*
+```
+
diff --git a/1-js/05-data-types/11-json/1-serialize-object/task.md b/1-js/05-data-types/11-json/1-serialize-object/task.md
new file mode 100644
index 00000000..cbb04609
--- /dev/null
+++ b/1-js/05-data-types/11-json/1-serialize-object/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Turn the object into JSON and back
+
+Turn the `leader` into JSON and then read it back into another variable.
+
+```js
+let user = {
+  name: "John Smith",
+  age: 35
+};
+```
diff --git a/1-js/05-data-types/11-json/2-serialize-event-circular/solution.md b/1-js/05-data-types/11-json/2-serialize-event-circular/solution.md
new file mode 100644
index 00000000..7a3a533b
--- /dev/null
+++ b/1-js/05-data-types/11-json/2-serialize-event-circular/solution.md
@@ -0,0 +1,30 @@
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  occupiedBy: [{name: "John"}, {name: "Alice"}],
+  place: room
+};
+
+room.occupiedBy = meetup;
+meetup.self = meetup;
+
+alert( JSON.stringify(meetup, function replacer(key, value) {
+  return (key != "" && value == meetup) ? undefined : value;
+}));
+
+/* 
+{
+  "title":"Conference",
+  "occupiedBy":[{"name":"John"},{"name":"Alice"}],
+  "place":{"number":23}
+}
+*/
+```
+
+Here we also need to test `key==""` to exclude the first call where it is normal that `value` is `meetup`.
+
diff --git a/1-js/05-data-types/11-json/2-serialize-event-circular/task.md b/1-js/05-data-types/11-json/2-serialize-event-circular/task.md
new file mode 100644
index 00000000..8b3963dd
--- /dev/null
+++ b/1-js/05-data-types/11-json/2-serialize-event-circular/task.md
@@ -0,0 +1,42 @@
+importance: 5
+
+---
+
+# Exclude backreferences
+
+In simple cases of circular references, we can exclude an offending property from serialization by its name.
+
+But sometimes there are many backreferences. And names may be used both in circular references and normal properties.
+
+Write `replacer` function to stringify everything, but remove properties that reference `meetup`:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  occupiedBy: [{name: "John"}, {name: "Alice"}],
+  place: room
+};
+
+*!*
+// circular references 
+room.occupiedBy = meetup;
+meetup.self = meetup;
+*/!*
+
+alert( JSON.stringify(meetup, function replacer(key, value) {
+  /* your code */
+}));
+
+/* result should be:
+{
+  "title":"Conference",
+  "occupiedBy":[{"name":"John"},{"name":"Alice"}],
+  "place":{"number":23}
+}
+*/
+```
+
diff --git a/1-js/05-data-types/11-json/article.md b/1-js/05-data-types/11-json/article.md
new file mode 100644
index 00000000..096570e3
--- /dev/null
+++ b/1-js/05-data-types/11-json/article.md
@@ -0,0 +1,527 @@
+# JSON methods, toJSON
+
+Let's say we have a complex object, and we'd like to convert it into a string, to send it over a network, or just to output it for logging purposes.
+
+Naturally, such a string should include all important properties.
+
+We could implement the conversion like this:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+
+*!*
+  toString() {
+    return `{name: "${this.name}", age: ${this.age}}`;
+  }
+*/!*
+};
+
+alert(user); // {name: "John", age: 30}
+```
+
+...But in the process of development, new properties are added, old properties are renamed and removed. Updating such `toString` every time can become a pain. We could try to loop over properties in it, but what if the object is complex and has nested objects in properties? We'd need to implement their conversion as well. And, if we're sending the object over a network, then we also need to supply the code to "read" our object on the receiving side.
+
+Luckily, there's no need to write the code to handle all this. The task has been solved already.
+
+[cut]
+
+## JSON.stringify
+
+The [JSON](http://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) is a general format to represent values and objects. It is described as in [RFC 4627](http://tools.ietf.org/html/rfc4627) standard. Initially it was made for JavaScript, but many other languages have libraries to handle it as well.  So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever.
+
+JavaScript provides methods:
+
+- `JSON.stringify` to convert objects into JSON.
+- `JSON.parse` to convert JSON back into an object.
+
+For instance, here's we `JSON.stringify` a student:
+```js run
+let student = {
+  name: 'John',
+  age: 30,
+  isAdmin: false,
+  courses: ['html', 'css', 'js'],
+  wife: null
+};
+
+*!*
+let json = JSON.stringify(student);
+*/!*
+
+alert(typeof json); // we've got a string!
+
+alert(json);
+*!*
+/* JSON-encoded object:
+{
+  "name": "John",
+  "age": 30,
+  "isAdmin": false,
+  "courses": ["html", "css", "js"],
+  "wife": null
+}
+*/
+*/!*
+```
+
+The method `JSON.stringify(student)` takes the object and converts it into a string.
+
+The resulting `json` string is a called *JSON-encoded* or *serialized* or *stringified* or *marshalled* object. We are ready to send it over the wire or put into plain data store.
+
+
+Please note that JSON-encoded object has several important differences from the object literal:
+
+- Strings use double quotes. No single quotes or backticks in JSON. So `'John'` becomes `"John"`.
+- Object property names are double-quoted also. That's obligatory. So `age:30` becomes `"age":30`.
+
+`JSON.stringify` can be applied to primitives as well.
+
+Natively supported JSON types are:
+
+- Objects `{ ... }`
+- Arrays `[ ... ]`
+- Primitives:
+    - strings,
+    - numbers,
+    - boolean values `true/false`,
+    - `null`.
+
+For instance:
+
+```js run
+// a number in JSON is just a number
+alert( JSON.stringify(1) ) // 1
+
+// a string in JSON is still a string, but double-quoted
+alert( JSON.stringify('test') ) // "test"
+
+alert( JSON.stringify(true) ); // true
+
+alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]
+```
+
+JSON is data-only cross-language specification, so some JavaScript-specific object properties are skipped by `JSON.stringify`.
+
+Namely:
+
+- Function properties (methods).
+- Symbolic properties.
+- Properties that store `undefined`.
+
+```js run
+let user = {
+  sayHi() { // ignored
+    alert("Hello");
+  },
+  [Symbol("id")]: 123, // ignored
+  something: undefined // ignored
+};
+
+alert( JSON.stringify(user) ); // {} (empty object)
+```
+
+Usually that's fine. If that's not what we want, then soon we'll see how to customize the process.
+
+The great thing is that nested objects are supported and converted automatically.
+
+For instance:
+
+```js run
+let meetup = {
+  title: "Conference",
+*!*
+  room: {
+    number: 123,
+    participants: ["john", "ann"]
+  }
+*/!*
+};
+
+alert( JSON.stringify(meetup) );
+/* The whole structure is stringified:
+{
+  "title":"Conference",
+  "room":{"number":23,"participants":["john","ann"]},
+}
+*/
+```
+
+The important limitation: there must be no circular references.
+
+For instance:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  participants: ["john", "ann"]
+};
+
+meetup.room = room;       // meetup references room
+room.occupiedBy = meetup; // room references meetup
+
+*!*
+JSON.stringify(meetup); // Error: Converting circular structure to JSON
+*/!*
+```
+
+Here, the conversion fails, because of circular reference: `room.occupiedBy` references `meetup`, and `meetup.place` references `room`:
+
+![](json-meetup.png)
+
+
+## Excluding and transforming: replacer
+
+The full syntax of `JSON.stringify` is:
+
+```js
+let json = JSON.stringify(value[, replacer, space])
+```
+
+value
+: A value to encode.
+
+replacer
+: Array of properties to encode or a mapping function `function(key, value)`.
+
+space
+: Amount of space to use for formatting
+
+Most of time, `JSON.stringify` is used with first argument only. But if we need to fine-tune the replacement process, like to filter out circular references, we can use the second argument of `JSON.stringify`.
+
+If we pass an array of properties to it, only these properties will be encoded.
+
+For instance:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  participants: [{name: "John"}, {name: "Alice"}],
+  place: room // meetup references room
+};
+
+room.occupiedBy = meetup; // room references meetup
+
+alert( JSON.stringify(meetup, *!*['title', 'participants']*/!*) );
+// {"title":"Conference","participants":[{},{}]}
+```
+
+Here we are probably too strict. The property list is applied to the whole object structure. So participants are empty, because `name` is not in the list.
+
+Let's include every property except `room.occupiedBy` that would cause the circular reference:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  participants: [{name: "John"}, {name: "Alice"}],
+  place: room // meetup references room
+};
+
+room.occupiedBy = meetup; // room references meetup
+
+alert( JSON.stringify(meetup, *!*['title', 'participants', 'place', 'name', 'number']*/!*) );
+/*
+{
+  "title":"Conference",
+  "participants":[{"name":"John"},{"name":"Alice"}],
+  "place":{"number":23}
+}
+*/
+```
+
+Now everything except `occupiedBy` is serialized. But the list of properties is quite long.
+
+Fortunately, we can use a function instead of an array as the `replacer`.
+
+The function will be called for every `(key,value)` pair and should return the "replaced" value, which will be used instead of the original one.
+
+In our case, we can return `value` "as is" for everything except `occupiedBy`. To ignore `occupiedBy`, the code below returns `undefined`:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  participants: [{name: "John"}, {name: "Alice"}],
+  place: room // meetup references room
+};
+
+alert( JSON.stringify(meetup, function replacer(key, value) {
+  alert(`${key}: ${value}`); // to see what replacer gets
+  return (key == 'occupiedBy') ? undefined : value;
+}));
+
+/* key:value pairs that come to replacer:
+:             [object Object]
+title:        Conference
+participants: [object Object],[object Object]
+0:            [object Object]
+name:         John
+1:            [object Object]
+name:         Alice
+place:        [object Object]
+number:       23
+*/
+```
+
+Please note that `replacer` function gets every key/value pair including nested objects and array items. It is applied recursively. The value of `this` inside `replacer` is the object that contains the current property.
+
+The first call is special. It is made using a special "wrapper object": `{"": meetup}`. In other words, the first `(key,value)` pair has an empty key, and the value is the target object as a whole. That's why the first line is `":[object Object]"` in the example above.
+
+The idea is to provide as much power for `replacer` as possible: it has a chance to analyze and replace/skip the whole object if necessary.
+
+
+## Formatting: spacer
+
+The third argument of `JSON.stringify(value, replacer, spaces)` is the number of spaces to use for pretty formatting.
+
+Previously, all stringified objects had no indents and extra spaces. That's fine if we want to send an object over a network. The `spacer` argument is used exclusively for a nice output.
+
+Here `spacer = 2` tells JavaScript to show nested objects on multiple lines, with indentation of 2 spaces inside an object:
+
+```js run
+let user = {
+  name: "John",
+  age: 25,
+  roles: {
+    isAdmin: false,
+    isEditor: true
+  }
+};
+
+alert(JSON.stringify(user, null, 2));
+/* two-space indents:
+{
+  "name": "John",
+  "age": 25,
+  "roles": {
+    "isAdmin": false,
+    "isEditor": true
+  }
+}
+*/
+
+/* for JSON.stringify(user, null, 4) the result would be more indented:
+{
+    "name": "John",
+    "age": 25,
+    "roles": {
+        "isAdmin": false,
+        "isEditor": true
+    }
+}
+*/
+```
+
+The `spaces` parameter is used solely for logging and nice-output purposes.
+
+## Custom "toJSON"
+
+Like `toString` for a string conversion, an object may provide method `toJSON` for to-JSON conversion. `JSON.stringify` automatically calls it if available.
+
+For instance:
+
+```js run
+let room = {
+  number: 23
+};
+
+let meetup = {
+  title: "Conference",
+  date: new Date(Date.UTC(2017, 0, 1)),
+  room
+};
+
+alert( JSON.stringify(meetup) );
+/*
+  {
+    "title":"Conference",
+*!*
+    "date":"2017-01-01T00:00:00.000Z",  // (1)
+*/!*
+    "room": {"number":23}               // (2)
+  }
+*/
+```
+
+Here we can see that `date` `(1)` became a string. That's because all dates have a built-in `toJSON` method which returns such kind of string.
+
+Now let's add a custom `toJSON` for our object `room`:
+
+```js run
+let room = {
+  number: 23,
+*!*
+  toJSON() {
+    return this.number;
+  }
+*/!*
+};
+
+let meetup = {
+  title: "Conference",
+  room
+};
+
+*!*
+alert( JSON.stringify(room) ); // 23
+*/!*
+
+alert( JSON.stringify(meetup) );
+/*
+  {
+    "title":"Conference",
+*!*
+    "room": 23
+*/!*
+  }
+*/
+```
+
+As we can see, `toJSON` is used both for the direct call `JSON.stringify(room)` and for the nested object.
+
+
+## JSON.parse
+
+To decode a JSON-string, we need another method named [JSON.parse](mdn:js/JSON/parse).
+
+The syntax:
+```js
+let value = JSON.parse(str[, reviver]);
+```
+
+str
+: JSON-string to parse.
+
+reviver
+: Optional function(key,value) that will be called for each `(key,value)` pair and can transform the value.
+
+For instance:
+
+```js run
+// stringified array
+let numbers = "[0, 1, 2, 3]";
+
+numbers = JSON.parse(numbers);
+
+alert( numbers[1] ); // 1
+```
+
+Or for nested objects:
+
+```js run
+let user = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';
+
+user = JSON.parse(user);
+
+alert( user.friends[1] ); // 1
+```
+
+The JSON may be as complex as necessary, objects and arrays can include other objects and arrays. But they must obey the format.
+
+Here are typical mistakes in hand-written JSON (sometimes we have to write it for debugging purposes):
+
+```js
+let json = `{
+  *!*name*/!*: "John",                     // mistake: property name without quotes
+  "surname": *!*'Smith'*/!*,               // mistake: single quotes in value (must be double)
+  *!*'isAdmin'*/!*: false                  // mistake: single quotes in key (must be double)
+  "birthday": *!*new Date(2000, 2, 3)*/!*, // mistake: no "new" is allowed, only bare values
+  "friends": [0,1,2,3]              // here all fine
+}`;
+```
+
+Besides, JSON does not support comments. Adding a comment to JSON makes it invalid.
+
+There's another format named [JSON5](http://json5.org/), which allows unquoted keys, comments etc. But this is a standalone library, not in the specification of the language.
+
+The regular JSON is that strict not because its developers are lazy, but to allow easy, reliable and very fast implementations of the parsing algorithm.
+
+## Using reviver
+
+Imagine, we got a stringified `meetup` object from the server.
+
+It looks like this:
+
+```js
+// title: (meetup title), date: (meetup date)
+let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
+```
+
+...And now we need to *deserialize* it, to turn back into JavaScript object.
+
+Let's do it by calling `JSON.parse`:
+
+```js run
+let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
+
+let meetup = JSON.parse(str);
+
+*!*
+alert( meetup.date.getDate() ); // Error!
+*/!*
+```
+
+Whoops! An error!
+
+The value of `meetup.date` is a string, not a `Date` object. How could `JSON.parse` know that it should transform that string into a `Date`?
+
+Let's pass to `JSON.parse` the reviving function that returns all values "as is", but `date` will become a `Date`:
+
+```js run
+let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
+
+*!*
+let meetup = JSON.parse(str, function(key, value) {
+  if (key == 'date') return new Date(value);
+  return value;
+});
+*/!*
+
+alert( meetup.date.getDate() ); // now works!
+```
+
+By the way, that works for nested objects as well:
+
+```js run
+let schedule = `{
+  "meetups": [
+    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
+    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
+  ]
+}`;
+
+schedule = JSON.parse(schedule, function(key, value) {
+  if (key == 'date') return new Date(value);
+  return value;
+});
+
+*!*
+alert( schedule.meetups[1].date.getDate() ); // works!
+*/!*
+```
+
+
+
+## Summary
+
+- JSON is a data format that has its own independent standard and libraries for most programming languages.
+- JSON supports plain objects, arrays, strings, numbers, booleans and `null`.
+- JavaScript provides methods [JSON.stringify](mdn:js/JSON/stringify) to serialize into JSON and [JSON.parse](mdn:js/JSON/parse) to read from JSON.
+- Both methods support transformer functions for smart reading/writing.
+- If an object has `toJSON`, then it is called by `JSON.stringify`.
diff --git a/1-js/05-data-types/11-json/json-meetup.png b/1-js/05-data-types/11-json/json-meetup.png
new file mode 100644
index 00000000..0a26e0a6
Binary files /dev/null and b/1-js/05-data-types/11-json/json-meetup.png differ
diff --git a/1-js/05-data-types/11-json/json-meetup@2x.png b/1-js/05-data-types/11-json/json-meetup@2x.png
new file mode 100644
index 00000000..b5f6a401
Binary files /dev/null and b/1-js/05-data-types/11-json/json-meetup@2x.png differ
diff --git a/1-js/05-data-types/index.md b/1-js/05-data-types/index.md
new file mode 100644
index 00000000..246e2bc9
--- /dev/null
+++ b/1-js/05-data-types/index.md
@@ -0,0 +1,3 @@
+# Data types
+
+More data structures and more in-depth study of the types.
diff --git a/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md b/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md
new file mode 100644
index 00000000..237b9ef9
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md
@@ -0,0 +1,40 @@
+The solution using a loop:
+
+```js run
+function sumTo(n) {
+  let sum = 0;
+  for (let i = 1; i <= n; i++) {
+    sum += i;
+  }
+  return sum;
+}
+
+alert( sumTo(100) );
+```
+
+The solution using recursion:
+
+```js run
+function sumTo(n) {
+  if (n == 1) return 1;
+  return n + sumTo(n - 1);
+}
+
+alert( sumTo(100) );
+```
+
+The solution using the formula: `sumTo(n) = n*(n+1)/2`:
+
+```js run
+function sumTo(n) {
+  return n * (n + 1) / 2;
+}
+
+alert( sumTo(100) );
+```
+
+P.S. Naturally, the formula is the fastest solution. It uses only 3 operations for any number `n`. The math helps!
+
+The loop variant is the second in terms of speed. In both the recursive and the loop variant we sum the same numbers. But the recursion involves nested calls and execution stack management. That also takes resources, so it's slower.
+
+P.P.S. The standard describes a "tail call" optimization: if the recursive call is the very last one in the function (like in `sumTo` above), then the outer function will not need to resume the execution and we don't need to remember its execution context. In that case `sumTo(100000)` is countable. But if your JavaScript engine does not support it, there will be an error: maximum stack size exceeded, because there's usually a limitation on the total stack size.
diff --git a/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md b/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md
new file mode 100644
index 00000000..cabc1329
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md
@@ -0,0 +1,36 @@
+importance: 5
+
+---
+
+# Sum all numbers till the given one
+
+Write a function `sumTo(n)` that calculates the sum of numbers `1 + 2 + ... + n`.
+
+For instance:
+
+```js no-beautify
+sumTo(1) = 1
+sumTo(2) = 2 + 1 = 3
+sumTo(3) = 3 + 2 + 1 = 6
+sumTo(4) = 4 + 3 + 2 + 1 = 10
+...
+sumTo(100) = 100 + 99 + ... + 2 + 1 = 5050
+```
+
+Make 3 solution variants:
+
+1. Using a for loop.
+2. Using a recursion, cause `sumTo(n) = n + sumTo(n-1)` for `n > 1`.
+3. Using the [arithmetic progression](https://en.wikipedia.org/wiki/Arithmetic_progression) formula.
+
+An example of the result:
+
+```js
+function sumTo(n) { /*... your code ... */ }
+
+alert( sumTo(100) ); // 5050
+```
+
+P.S. Which solution variant is the fastest? The slowest? Why?
+
+P.P.S. Can we use recursion to count `sumTo(100000)`? 
diff --git a/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md b/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md
new file mode 100644
index 00000000..59040a2b
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md
@@ -0,0 +1,21 @@
+By definition, a factorial is `n!` can be written as `n * (n-1)!`.
+
+In other words, the result of `factorial(n)` can be calculated as `n` multiplied by the result of `factorial(n-1)`. And the call for `n-1` can recursively descend lower, and lower, till `1`.
+
+```js run
+function factorial(n) {
+  return (n != 1) ? n * factorial(n - 1) : 1;
+}
+
+alert( factorial(5) ); // 120
+```
+
+The basis of recursion is the value `1`. We can also make `0` the basis here, doesn't matter much, but gives one more recursive step:
+
+```js run
+function factorial(n) {
+  return n ? n * factorial(n - 1) : 1;
+}
+
+alert( factorial(5) ); // 120
+```
diff --git a/1-js/06-advanced-functions/01-recursion/02-factorial/task.md b/1-js/06-advanced-functions/01-recursion/02-factorial/task.md
new file mode 100644
index 00000000..d2aef2d9
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/02-factorial/task.md
@@ -0,0 +1,31 @@
+importance: 4
+
+---
+
+# Calculate factorial
+
+The [factorial](https://en.wikipedia.org/wiki/Factorial) of a natural number is a number multiplied by `"number minus one"`, then by `"number minus two"`, and so on till `1`. The factorial of `n` is denoted as `n!`
+
+We can write a definition of factorial like this:
+
+```js
+n! = n * (n - 1) * (n - 2) * ...*1
+```
+
+Values of factorials for different `n`:
+
+```js
+1! = 1
+2! = 2 * 1 = 2
+3! = 3 * 2 * 1 = 6
+4! = 4 * 3 * 2 * 1 = 24
+5! = 5 * 4 * 3 * 2 * 1 = 120
+```
+
+The task is to write a function `factorial(n)` that calculates `n!` using recursive calls.
+
+```js
+alert( factorial(5) ); // 120
+```
+
+P.S. Hint: `n!` can be written as `n * (n-1)!` For instance: `3! = 3*2! = 3*2*1! = 6`
diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png
new file mode 100644
index 00000000..c45418ff
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png
new file mode 100644
index 00000000..6fc39ae1
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md
new file mode 100644
index 00000000..91bcecc0
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md
@@ -0,0 +1,110 @@
+The first solution we could try here is the recursive one.
+
+Fibonacci numbers are recursive by definition:
+
+```js run
+function fib(n) {
+  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
+}
+
+alert( fib(3) ); // 2
+alert( fib(7) ); // 13
+// fib(77); // will be extremely slow!
+```
+
+...But for big values of `n` it's very slow. For instance, `fib(77)` may hang up the engine for some time eating all CPU resources.
+
+That's because the function makes too many subcalls. The same values are re-evaluated again and again.
+
+For instance, let's see a piece of calculations for `fib(5)`:
+
+```js no-beautify
+...
+fib(5) = fib(4) + fib(3)
+fib(4) = fib(3) + fib(2)
+...
+```
+
+Here we can see that the value of `fib(3)` is needed for both `fib(5)` and `fib(4)`. So `fib(3)` will be called and evaluated two times completely independently.
+
+Here's the full recursion tree:
+
+![fibonacci recursion tree](fibonacci-recursion-tree.png)
+
+We can clearly notice that `fib(3)` is evaluated two times and `fib(2)` is evaluated three times. The total amount of computations grows much faster than `n`, making it enormous even for `n=77`.
+
+We can optimize that by remembering already-evaluated values: if a value of say `fib(3)` is calculated once, then we can just reuse it in future computations.
+
+Another variant would be to give up recursion and use a totally different loop-based algorithm.
+
+Instead of going from `n` down to lower values, we can make a loop that starts from `1` and `2`, then gets `fib(3)` as their sum, then `fib(4)` as the sum of two previous values, then `fib(5)` and goes up and up, till it gets to the needed value. On each step we only need to remember two previous values.
+
+Here are the steps of the new algorithm in details.
+
+The start:
+
+```js
+// a = fib(1), b = fib(2), these values are by definition 1
+let a = 1, b = 1;
+
+// get c = fib(3) as their sum
+let c = a + b;
+
+/* we now have fib(1), fib(2), fib(3)
+a  b  c
+1, 1, 2
+*/
+```
+
+Now we want to get `fib(4) = fib(2) + fib(3)`.
+
+Let's shift the variables: `a,b` will get `fib(2),fib(3)`, and `c` will get their sum:
+
+```js no-beautify
+a = b; // now a = fib(2)
+b = c; // now b = fib(3)
+c = a + b; // c = fib(4)
+
+/* now we have the sequence:
+   a  b  c
+1, 1, 2, 3
+*/
+```
+
+The next step gives another sequence number:
+
+```js no-beautify
+a = b; // now a = fib(3)
+b = c; // now b = fib(4)
+c = a + b; // c = fib(5)
+
+/* now the sequence is (one more number):
+      a  b  c
+1, 1, 2, 3, 5
+*/
+```
+
+...And so on until we get the needed value. That's much faster than recursion and involves no duplicate computations.
+
+The full code:
+
+```js run
+function fib(n) {
+  let a = 1;
+  let b = 1;
+  for (let i = 3; i <= n; i++) {
+    let c = a + b;
+    a = b;
+    b = c;
+  }
+  return b;
+}
+
+alert( fib(3) ); // 2
+alert( fib(7) ); // 13
+alert( fib(77) ); // 5527939700884757
+```
+
+The loop starts with `i=3`, because the first and the second sequence values are hard-coded into variables `a=1`, `b=1`.
+
+The approach is called [dynamic programming bottom-up](https://en.wikipedia.org/wiki/Dynamic_programming).
diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md
new file mode 100644
index 00000000..3cdadd21
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md
@@ -0,0 +1,25 @@
+importance: 5
+
+---
+
+# Fibonacci numbers
+
+The sequence of [Fibonacci numbers](https://en.wikipedia.org/wiki/Fibonacci_number) has the formula <code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>. In other words, the next number is a sum of the two preceding ones.
+
+First two numbers are `1`, then `2(1+1)`, then `3(1+2)`, `5(2+3)` and so on: `1, 1, 2, 3, 5, 8, 13, 21...`.
+
+Fibonacci numbers are related to the [Golden ratio](https://en.wikipedia.org/wiki/Golden_ratio) and many natural phenomena around us.
+
+Write a function `fib(n)` that returns the `n-th` Fibonacci number.
+
+An example of work:
+
+```js
+function fib(n) { /* your code */ }
+
+alert(fib(3)); // 2
+alert(fib(7)); // 13
+alert(fib(77)); // 5527939700884757
+```
+
+P.S. The function should be fast. The call to `fib(77)` should take no more than a fraction of a second.
diff --git a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md
new file mode 100644
index 00000000..4e9de146
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md
@@ -0,0 +1,88 @@
+# Loop-based solution
+
+The loop-based variant of the solution:
+
+```js run
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+
+function printList(list) {
+  let tmp = list;
+
+  while (tmp) {
+    alert(tmp.value);
+    tmp = tmp.next;
+  }
+
+}
+
+printList(list);
+```
+
+Please note that we use a temporary variable `tmp` to walk over the list. Technically, we could use a function parameter `list` instead:
+
+```js
+function printList(list) {
+
+  while(*!*list*/!*) {
+    alert(list.value);
+    list = list.next;
+  }
+
+}
+```
+
+...But that would be unwise. In the future we may need to extend a function, do something else with the list. If we change `list`, then we loose such ability.
+
+Talking about good variable names, `list` here is the list itself. The first element of it. And it should remain like that. That's clear and reliable.
+
+From the other side, the role of `tmp` is exclusively a list traversal, like `i` in the `for` loop.
+
+# Recursive solution
+
+The recursive variant of `printList(list)` follows a simple logic: to output a list we should output the current element `list`, then do the same for `list.next`:
+
+```js run
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+
+function printList(list) {
+
+  alert(list.value); // output the current item
+
+  if (list.next) {
+    printList(list.next); // do the same for the rest of the list
+  }
+
+}
+
+printList(list);
+```
+
+Now what's better?
+
+Technically, the loop is more effective. These two variants do the same, but the loop does not spend resources for nested function calls.
+
+From the other side, the recursive variant is shorter and sometimes easier to understand.
diff --git a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md
new file mode 100644
index 00000000..1076b952
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md
@@ -0,0 +1,29 @@
+importance: 5
+
+---
+
+# Output a single-linked list
+
+Let's say we have a single-linked list (as described in the chapter <info:recursion>):
+
+```js
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+```
+
+Write a function `printList(list)` that outputs list items one-by-one.
+
+Make two variants of the solution: using a loop and using recursion.
+
+What's better: with recursion or without it?
diff --git a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
new file mode 100644
index 00000000..a9ba0baf
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
@@ -0,0 +1,74 @@
+# Using a recursion
+
+The recursive logic is a little bit tricky here.
+
+We need to first output the rest of the list and *then* output the current one:
+
+```js run
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+
+function printReverseList(list) {
+
+  if (list.next) {
+    printReverseList(list.next);
+  }
+
+  alert(list.value);
+}
+
+printReverseList(list);
+```
+
+# Using a loop
+
+The loop variant is also a little bit more complicated then the direct output.
+
+There is no way to get the last value in our `list`. We also can't "go back".
+
+So what we can do is to first go through the items in the direct order and rememeber them in an array, and then output what we remembered in the reverse order:
+
+```js run
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+
+function printReverseList(list) {
+  let arr = [];
+  let tmp = list;
+
+  while (tmp) {
+    arr.push(tmp.value);
+    tmp = tmp.next;
+  }
+
+  for (let i = arr.length - 1; i >= 0; i--) {
+    alert( arr[i] );
+  }
+}
+
+printReverseList(list);
+```
+
+Please note that the recursive solution actually does exactly the same: it follows the list, remembers the items in the chain of nested calls (in the execution context stack), and then outputs them. 
diff --git a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md
new file mode 100644
index 00000000..81b1f3e3
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Output a single-linked list in the reverse order
+
+Output a single-linked list from the previous task <info:task/output-single-linked-list> in the reverse order.
+
+Make two solutions: using a loop and using a recursion.
diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md
new file mode 100644
index 00000000..6995cdc4
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/article.md
@@ -0,0 +1,534 @@
+# Recursion and stack
+
+Let's return to functions and study them more in-depth.
+
+Our first topic will be *recursion*.
+
+If you are not new to programming, then it is probably familiar and you could skip this chapter.
+
+Recursion is a programming pattern that is useful in situations when a task can be naturally split into several tasks of the same kind, but simpler. Or when a task can be simplified into an easy action plus a simpler variant of the same task. Or, as we'll see soon, to deal with certain data structures.
+
+When a function solves a task, in the process it can call many other functions. A partial case of this is when a function calls *itself*. That's called *recursion*.
+
+[cut]
+
+## Two ways of thinking
+
+For something simple to start with -- let's write a function `pow(x, n)` that raises `x` to a natural power of `n`. In other words, multiplies `x` by itself `n` times.
+
+```js
+pow(2, 2) = 4
+pow(2, 3) = 8
+pow(2, 4) = 16
+```
+
+There are two ways to implement it.
+
+1. Iterative thinking: the `for` loop:
+
+    ```js run
+    function pow(x, n) {
+      let result = 1;
+
+      // multiply result by x n times in the loop
+      for(let i = 0; i < n; i++) {
+        result *= x;
+      }
+
+      return result;
+    }
+
+    alert( pow(2, 3) ); // 8
+    ```
+
+2. Recursive thinking: simplify the task and call self:
+
+    ```js run
+    function pow(x, n) {
+      if (n == 1) {
+        return x;
+      } else {
+        return x * pow(x, n - 1);
+      }
+    }
+
+    alert( pow(2, 3) ); // 8
+    ```
+
+Please note how the recursive variant is fundamentally different.
+
+When `pow(x, n)` is called, the execution splits into two branches:
+
+```js
+              if n==1  = x
+             /
+pow(x, n) =
+             \       
+              else     = x * pow(x, n - 1)
+```
+
+1. If `n==1`, then everything is trivial. It is called *the base* of recursion, because it immediately produces the obvious result: `pow(x, 1)` equals `x`.
+2. Otherwise, we can represent `pow(x, n)` as `x * pow(x, n-1)`. In maths, one would write <code>x<sup>n</sup> = x * x<sup>n-1</sup></code>. This is called *a recursive step*: we transform the task into a simpler action (multiplication by `x`) and a simpler call of the same task (`pow` with lower `n`). Next steps simplify it further and further untill `n` reaches `1`.
+
+We can also say that `pow` *recursively calls itself* till `n == 1`.
+
+![recursive diagram of pow](recursion-pow.png)
+
+
+For example, to calculate `pow(2, 4)` the recursive variant does these steps:
+
+1. `pow(2, 4) = 2 * pow(2, 3)`
+2. `pow(2, 3) = 2 * pow(2, 2)`
+3. `pow(2, 2) = 2 * pow(2, 1)`
+4. `pow(2, 1) = 2`
+
+So, the recursion reduces a function call to a simpler one, and then -- to even more simpler, and so on, until the result becomes obvious.
+
+````smart header="Recursion is usually shorter"
+A recursive solution is usually shorter than an iterative one.
+
+Here we can rewrite the same using the ternary `?` operator instead of `if` to make `pow(x, n)` more terse and still very readable:
+
+```js run
+function pow(x, n) {
+  return (n == 1) ? x : (x * pow(x, n-1));
+}
+```
+````
+
+The maximal number of nested calls (including the first one) is called *recursion depth*. In our case, it will be exactly `n`.
+
+The maximal recursion depth is limited by JavaScript engine. We can make sure about 10000, some engines allow more, but 100000 is probably out of limit for the majority of them. There are automatic optimizations that help alleviate this ("tail calls optimizations"), but they are not yet supported everywhere and work only in simple cases.
+
+That limits the application of recursion, but it still remains very wide. There are many tasks where recursive way of thinking gives simpler code, easier to maintain.
+
+## The execution stack
+
+Now let's examine how recursive calls work. For that we'll look under the hood of functions.
+
+The information about a function run is stored in its *execution context*.
+
+The [execution context](https://tc39.github.io/ecma262/#sec-execution-contexts) is an internal data structure that contains details about the execution of a function: where the control flow is now, the current variables, the value of `this` (we don't use it here) and few other internal details.
+
+One function call has exactly one execution context associated with it.
+
+When a function makes a nested call, the following happens:
+
+- The current function is paused.
+- The execution context associated with it is remembered in a special data structure called *execution context stack*.
+- The nested call executes.
+- After it ends, the old execution context is retrieved from the stack, and the outer function is resumed from where it stopped.
+
+Let's see what happens during the `pow(2, 3)` call.
+
+### pow(2, 3)
+
+In the beginning of the call `pow(2, 3)` the execution context will store variables: `x = 2, n = 3`, the execution flow is at line `1` of the function.
+
+We can sketch it as:
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 1 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+That's when the function starts to execute. The condition `n == 1` is falsy, so the flow continues into the second branch of `if`:
+
+```js run
+function pow(x, n) {
+  if (n == 1) {
+    return x;
+  } else {
+*!*
+    return x * pow(x, n - 1);
+*/!*
+  }
+}
+
+alert( pow(2, 3) );
+```
+
+
+The variables are same, but the line changes, so the context is now:
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+To calculate `x*pow(x, n-1)`, we need to make a subcall of `pow` with new arguments `pow(2, 2)`.
+
+### pow(2, 2)
+
+To do a nested call, JavaScript remembers the current execution context in the *execution context stack*.
+
+Here we call the same function `pow`, but it absolutely doesn't matter. The process is the same for all functions:
+
+1. The current context is "remembered" on top of the stack.
+2. The new context is created for the subcall.
+3. When the subcall is finished -- the previous context is popped from the stack, and its execution continues.
+
+Here's the context stack when we entered the subcall `pow(2, 2)`:
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 2, at line 1 }</span>
+    <span class="function-execution-context-call">pow(2, 2)</span>
+  </li>
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+The new current execution context is on top (and bold), and previous remembered contexts are below.
+
+When we finish the subcall -- it is easy to resume the previous context, because it keeps both variables and the exact place of the code where it stopped. Here in the picture we use the word "line", but of course it's more precise.
+
+### pow(2, 1)
+
+The process repeats: a new subcall is made at line `5`, now with arguments `x=2`, `n=1`.
+
+A new execution context is created, the previous one is pushed on top of the stack:
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 1, at line 1 }</span>
+    <span class="function-execution-context-call">pow(2, 1)</span>
+  </li>
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 2, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 2)</span>
+  </li>
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+There are 2 old contexts now and 1 currently running for `pow(2, 1)`.
+
+### The exit
+
+During the execution of `pow(2, 1)`, unlike before, the condition `n == 1` is truthy, so the first branch of `if` works:
+
+```js
+function pow(x, n) {
+  if (n == 1) {
+*!*
+    return x;
+*/!*
+  } else {
+    return x * pow(x, n - 1);
+  }
+}
+```
+
+There are no more nested calls, so the function finishes, returning `2`.
+
+As the function finishes, its execution context is not needed any more, so it's removed from the memory. The previous one is restored off the top of the stack:
+
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 2, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 2)</span>
+  </li>
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+The execution of `pow(2, 2)` is resumed. It has the result of the subcall `pow(2, 1)`, so it also can finish the evaluation of `x * pow(x, n-1)`, returning `4`.
+
+Then the previous context is restored:
+
+<ul class="function-execution-context-list">
+  <li>
+    <span class="function-execution-context">Context: { x: 2, n: 3, at line 5 }</span>
+    <span class="function-execution-context-call">pow(2, 3)</span>
+  </li>
+</ul>
+
+When it finishes, we have a result of `pow(2, 3) = 8`.
+
+The recursion depth in this case was: **3**.
+
+As we can see from the illustrations above, recursion depth equals the maximal number of context in the stack.
+
+Note the memory requirements. Contexts take memory. In our case, raising to the power of `n` actually requires the memory for `n` contexts, for all lower values of `n`.
+
+A loop-based algorithm is more memory-saving:
+
+```js
+function pow(x, n) {
+  let result = 1;
+
+  for(let i = 0; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+```
+
+The iterative `pow` uses a single context changing `i` and `result` in the process. Its memory requirements are small, fixed and do not depend on `n`.
+
+**Any recursion can be rewritten as a loop. The loop variant usually can be made more effective.**
+
+...But sometimes the rewrite is non-trivial, especially when function uses different recursive subcalls depending on conditions and merges their results or when the branching is more intricate. And the optimization may be unneeded and totally not worth the efforts.
+
+Recursion can give a shorter code, easier to understand and support. Optimizations are not required in every place, mostly we need a good code, that's why it's used.
+
+## Recursive traversals
+
+Another great application of the recursion is a recursive traversal.
+
+Imagine, we have an company. The staff structure can be presented as an object:
+
+```js
+let company = {
+  sales: [{
+    name: 'John',
+    salary: 1000
+  }, {
+    name: 'Alice',
+    salary: 600
+  }],
+
+  development: {
+    sites: [{
+      name: 'Peter',
+      salary: 2000
+    }, {
+      name: 'Alex',
+      salary: 1800
+    }],
+
+    internals: [{
+      name: 'Jack',
+      salary: 1300
+    }]
+  }
+};
+```
+
+In other words, a company has departments.
+
+- A department may have an array of staff. For instance, `sales` department has 2 employees: John and Alice.
+- Or a department may split into subdepartments, like `development` has two branches: `sites` and `internals`. Each of them has the own staff.
+- It is also possible that when a subdepartment grows, it divides into subsubdepartments (or teams).
+
+    For instance, the `sites` department in the future may be split into teams for `siteA` and `siteB`. And they, potentially, can split even more. That's not on the picture, just something to have in mind.
+
+Now let's say we want a function to get the sum of all salaries. How can we do that?
+
+An iterative approach is not easy, because the structure is not simple. The first idea may be to make a `for` loop over `company` with nested subloop over 1st level departments. But then we need more nested subloops to iterate over the staff in 2nd level departments like `sites`. ...And then another subloop inside those for 3rd level departments that might appear in the future? Should we stop on level 3 or make 4 levels of loops? If we put 3-4 nested subloops in the code to traverse a single object, it becomes rather ugly.
+
+Let's try recursion.
+
+As we can see, when our function gets a department to sum, there are two possible cases:
+
+1. Either it's a "simple" department with an *array of people* -- then we can sum the salaries in a simple loop.
+2. Or it's *an object with `N` subdepartments* -- then we can make `N` recursive calls to get the sum for each of the subdeps and combine the results.
+
+The (1) is the base of recursion, the trivial case.
+
+The (2) is the recursive step. A complex task is split into subtasks for smaller departments. They may in turn split again, but sooner or later the split will finish at (1).
+
+The algorithm is probably even easier to read from the code:
+
+
+```js run
+let company = { // the same object, compressed for brevity
+  sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 600 }],
+  development: {
+    sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }],
+    internals: [{name: 'Jack', salary: 1300}]
+  }
+};
+
+// The function to do the job
+*!*
+function sumSalaries(department) {
+  if (Array.isArray(department)) { // case (1)
+    return department.reduce((prev, current) => prev + current.salary, 0); // sum the array
+  } else { // case (2)
+    let sum = 0;
+    for(let subdep of Object.values(department)) {
+      sum += sumSalaries(subdep); // recursively call for subdepartments, sum the results
+    }
+    return sum;
+  }
+}
+*/!*
+
+alert(sumSalaries(company)); // 6700
+```
+
+The code is short and easy to understand (hopefully?). That's the power of recursion. It also works for any level of subdepartment nesting.
+
+Here's the diagram of calls:
+
+![recursive salaries](recursive-salaries.png)
+
+We can easily see the principle: for an object `{...}` subcalls are made, while arrays `[...]` are the "leaves" of the recursion tree, they give immediate result.
+
+Note that the code uses smart features that we've covered before:
+
+- Method `arr.reduce` explained in the chapter <info:array-methods> to get the sum of the array.
+- Loop `for(val of Object.values(obj))` to iterate over object values: `Object.values` returns an array of them.
+
+
+## Recursive structures
+
+A recursive (recursively-defined) data structure is a structure that replicates itself in parts.
+
+We've just seen it in the example of a company structure above.
+
+A company *department* is:
+- Either an array of people.
+- Or an object with *departments*.
+
+For web-developers there are much better known examples: HTML and XML documents.
+
+In the HTML document, an *HTML-tag* may contain a list of:
+- Text pieces.
+- HTML-comments.
+- Other *HTML-tags* (that in turn may contain text pieces/comments or other tags etc).
+
+That's once again a recursive definition.
+
+For better understanding, we'll cover one more recursive structure named "Linked list" that might be a better alternative for arrays in some cases.
+
+### Linked list
+
+Imagine, we want to store an ordered list of objects.
+
+The natural choice would be an array:
+
+```js
+let arr = [obj1, obj2, obj3];
+```
+
+...But there's a problem with arrays. The "delete element" and "insert element" operations are expensive. For instance, `arr.unshift(obj)` operation has to renumber all elements to make room for a new `obj`, and if the array is big, it takes time. Same with `arr.shift()`.
+
+The only structural modifications that do not require mass-renumbering are those that operate with the end of array: `arr.push/pop`. So an array can be quite slow for big queues.
+
+Alternatively, if we really need fast insertion/deletion, we can choose another data structure called a [linked list](https://en.wikipedia.org/wiki/Linked_list).
+
+The *linked list element* is recursively defined as an object with:
+- `value`.
+- `next` property referencing the next *linked list element* or `null` if that's the end.
+
+For instance:
+
+```js
+let list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+```
+
+Graphical representation of the list:
+
+![linked list](linked-list.png)
+
+An alternative code for creation:
+
+```js no-beautify
+let list = { value: 1 };
+list.next = { value: 2 };
+list.next.next = { value: 3 };
+list.next.next.next = { value: 4 };
+```
+
+Here we can even more clearer see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element.
+
+The list can be easily split into multiple parts and later joined back:
+
+```js
+let secondList = list.next.next;
+list.next.next = null;
+```
+
+![linked list split](linked-list-split.png)
+
+To join:
+
+```js
+list.next.next = secondList;
+```
+
+And surely we can insert or remove items in any place.
+
+For instance, to prepend a new value, we need to update the head of the list:
+
+```js
+let list = { value: 1 };
+list.next = { value: 2 };
+list.next.next = { value: 3 };
+list.next.next.next = { value: 4 };
+
+*!*
+// prepend the new value to the list
+list = { value: "new item", next: list };
+*/!*
+```
+
+![linked list](linked-list-0.png)
+
+To remove a value from the middle, change `next` of the previous one:
+
+```js
+list.next = list.next.next;
+```
+
+![linked list](linked-list-remove-1.png)
+
+We made `list.next` jump over `1` to value `2`. The value `1` is now excluded from the chain. If it's not stored anywhere else, it will be automatically removed from the memory.
+
+Unlike arrays, there's no mass-renumbering, we can easily rearrange elements.
+
+Naturally, lists are not always better than arrays. Otherwise everyone would use only lists.
+
+The main drawback is that we can't easily access an element by its number. In an array that's easy: `arr[n]` is a direct reference. But in the list we need to start from the first item and go `next` `N` times to get the Nth element.
+
+...But we don't always need such operations. For instance, when we need a queue or even a [deque](https://en.wikipedia.org/wiki/Double-ended_queue) -- the ordered structure that must allow very fast adding/removing elements from both ends.
+
+Sometimes it's worth to add another variable named `tail` to track the last element of the list (and update it when adding/removing elements from the end). For large sets of elements the speed difference versus arrays is huge.
+
+## Summary
+
+Terms:
+- *Recursion*  is a programming term that means a "self-calling" function. Such functions can be used to solve certain tasks in elegant ways.
+
+    When a function calls itself, that's called a *recursion step*. The *basis* of recursion is function arguments that make the task so simple that the function does not make further calls.
+
+- A [recursively-defined](https://en.wikipedia.org/wiki/Recursive_data_type) data structure is a data structure that can be defined using itself.
+
+    For instance, the linked list can be defined as a data structure consisting of an object referencing a list (or null).
+
+    ```js
+    list = { value, next -> list }
+    ```
+
+    Trees like HTML elements tree or the department tree from this chapter are also naturally recursive: they branch and every branch can have other branches.
+
+    Recursive functions can be used to walk them as we've seen in the `sumSalary` example.
+
+Any recursive function can be rewritten into an iterative one. And that's sometimes required to optimize stuff. But for many tasks a recursive solution is fast enough and easier to write and support.
diff --git a/1-js/06-advanced-functions/01-recursion/head.html b/1-js/06-advanced-functions/01-recursion/head.html
new file mode 100644
index 00000000..c2ac3e8c
--- /dev/null
+++ b/1-js/06-advanced-functions/01-recursion/head.html
@@ -0,0 +1,26 @@
+<style>
+.function-execution-context-list {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+.function-execution-context {
+  border: 1px solid black;
+  font-family: "Consolas", monospace;
+  padding: 4px 6px;
+  margin: 0 4px;
+}
+
+.function-execution-context-call {
+  color: gray;
+}
+
+.function-execution-context-call::before {
+  content: ' call: ';
+}
+
+.function-execution-context-list li:first-child {
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0.png b/1-js/06-advanced-functions/01-recursion/linked-list-0.png
new file mode 100644
index 00000000..000a80da
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-0.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png
new file mode 100644
index 00000000..5a236869
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png
new file mode 100644
index 00000000..477989ad
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png
new file mode 100644
index 00000000..41de7661
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split.png b/1-js/06-advanced-functions/01-recursion/linked-list-split.png
new file mode 100644
index 00000000..ac220349
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-split.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png
new file mode 100644
index 00000000..201c66f1
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list.png b/1-js/06-advanced-functions/01-recursion/linked-list.png
new file mode 100644
index 00000000..64b6fb2b
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/linked-list@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list@2x.png
new file mode 100644
index 00000000..c28fa825
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/linked-list@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/recursion-pow.png b/1-js/06-advanced-functions/01-recursion/recursion-pow.png
new file mode 100644
index 00000000..30577f89
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/recursion-pow.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/recursion-pow@2x.png b/1-js/06-advanced-functions/01-recursion/recursion-pow@2x.png
new file mode 100644
index 00000000..c1997342
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/recursion-pow@2x.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries.png b/1-js/06-advanced-functions/01-recursion/recursive-salaries.png
new file mode 100644
index 00000000..2b901540
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/recursive-salaries.png differ
diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png b/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png
new file mode 100644
index 00000000..261ab144
Binary files /dev/null and b/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png differ
diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md
new file mode 100644
index 00000000..eaa42ab9
--- /dev/null
+++ b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md
@@ -0,0 +1,247 @@
+# Rest parameters and spread operator
+
+Many JavaScript built-in functions support on arbitrary number of arguments.
+
+For instance:
+
+- `Math.max(arg1, arg2, ..., argN)` -- returns the greatest of the arguments.
+- `Object.assign(dest, src1, ..., srcN)` -- copies properties from `src1..N` into `dest`.
+- ...and so on.
+
+In this chapter we'll see how to do the same. And, more important, how to feel comfortable working with such functions and arrays.
+
+[cut]
+
+## Rest parameters `...`
+
+A function can be called with any number of arguments, no matter how it is defined.
+
+Like here:
+```js run
+function sum(a, b) {
+  return a + b;
+}
+
+alert( sum(1, 2, 3, 4, 5) );
+```
+
+There will be no error because of "excessive" arguments. But of course in the result only the first two will be counted.
+
+The rest parameters can be mentioned in a function definition with three dots `...`. They literally mean: "gather the remaining parameters into an array".
+
+For instance, to gather all arguments into array `args`:
+
+```js run
+function sumAll(...args) { // args is the name for the array
+  let sum = 0;
+
+  for(let arg of args) sum += arg;
+
+  return sum;
+}
+
+alert( sumAll(1) ); // 1
+alert( sumAll(1, 2) ); // 3
+alert( sumAll(1, 2, 3) ); // 6
+```
+
+We can choose to get first parameters as variables, and gather only the rest.
+
+Here the first two arguments go into variables and the rest goes to `titles` array:
+
+```js run
+function showName(firstName, lastName, ...titles) {
+  alert( firstName + ' ' + lastName ); // Julius Caesar
+
+  // the rest go into titles array
+  // i.e. titles = ["Consul", "Imperator"]
+  alert( titles[0] ); // Consul
+  alert( titles[1] ); // Imperator
+  alert( titles.length ); // 2
+}
+
+showName("Julius", "Caesar", "Consul", "Imperator");
+```
+
+````warn header="The rest parameters must be at the end"
+The rest parameters gather all remaining arguments, so the following has no sense:
+
+```js
+function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
+  // error
+}
+```
+
+The `...rest` must always be the last.
+````
+
+## The "arguments" variable
+
+There is also a special array-like object named `arguments` that contains all arguments by their index.
+
+For instance:
+
+```js run
+function showName() {
+  alert( arguments.length );
+  alert( arguments[0] );
+  alert( arguments[1] );
+
+  // it's iterable
+  // for(let arg of arguments) alert(arg);
+}
+
+// shows: 2, Julius, Caesar
+showName("Julius", "Caesar");
+
+// shows: 1, Ilya, undefined (no second argument)
+showName("Ilya");
+```
+
+In old times, rest parameters did not exist in the language, and `arguments` was the only way to get all arguments of the function no matter of their total number.
+
+And it still works, we can use it.
+
+But the downside is that although `arguments` is both array-like and iterable, it's not an array. It does not support array methods, so we can't say call `arguments.map(...)`.
+
+Also, it always has all arguments in it, we can't capture them partially, like we did with rest parameters.
+
+So when we need these features, then rest parameters are preferred.
+
+````smart header="Arrow functions do not have `\"arguments\"`"
+If we access the `arguments` object from an arrow function, it takes them from the outer "normal" function.
+
+Here's an example:
+
+```js run
+function f() {
+  let showArg = () => alert(arguments[0]);
+  showArg();
+}
+
+f(1); // 1
+```
+As we remember, arrow functions don't have their own `this`. Now we know they don't have the special `arguments` object either.
+
+````
+
+## Spread operator [#spread-operator]
+
+We've just seen how to get an array from the list of parameters.
+
+But sometimes we need to do exactly the reverse.
+
+For instance, there's a built-in function [Math.max](mdn:js/Math/max) that returns the greatest number from the list:
+
+```js run
+alert( Math.max(3, 5, 1) ); // 5
+```
+
+Now let's say we have an array `[3, 5, 1]`. How to call `Math.max` with it?
+
+Passing it "as it" won't work, because `Math.max` expects a list of numeric arguments, not a single array:
+
+```js run
+let arr = [3, 5, 1];
+
+*!*
+alert( Math.max(arr) ); // NaN
+*/!*
+```
+
+...And surely we can't manually list items in the code `Math.max(arg[0], arg[1], arg[2])`, because we may be unsure how much are there. As our script executes, there might be many, or there might be none. Also that would be ugly.
+
+*Spread operator* to the rescue. It looks similar to rest parameters, also using `...`, but does quite the opposite.
+
+When `...arr` is used in the function call, it "expands" an iterable object `arr` into the list of arguments.
+
+For `Math.max`:
+
+```js run
+let arr = [3, 5, 1];
+
+alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)
+```
+
+We also can pass multiple iterables this way:
+
+```js run
+let arr1 = [1, -2, 3, 4];
+let arr2 = [8, 3, -8, 1];
+
+alert( Math.max(...arr1, ...arr2) ); // 8
+```
+
+...And even combine the spread operator with normal values:
+
+
+```js run
+let arr1 = [1, -2, 3, 4];
+let arr2 = [8, 3, -8, 1];
+
+alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25
+```
+
+Also spread operator can be used to merge arrays:
+
+```js run
+let arr = [3, 5, 1];
+let arr2 = [8, 9, 15];
+
+*!*
+let merged = [0, ...arr, 2, ...arr2];
+*/!*
+
+alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)
+```
+
+In the examples above we used an array to demonstrate the spread operator, but any iterable will do.
+
+For instance, here we use spread operator to turn the string into array of characters:
+
+```js run
+let str = "Hello";
+
+alert( [...str] ); // H,e,l,l,o
+```
+
+The spread operator internally uses iterators to gather elements, the same way as `for..of` does.
+
+So, for a string, `for..of` returns characters and `...str` becomes `"h","e","l","l","o"`. The list of characters is passed to array initializer `[...str]`.
+
+For this particular task we could also use `Array.from`, because it converts an iterable (like a string) into an array:
+
+```js run
+let str = "Hello";
+
+// Array.from converts an iterable into an array
+alert( Array.from(str) ); // H,e,l,l,o
+```
+
+The result is the same as `[...str]`.
+
+But there's a subtle difference between `Array.from(obj)` and `[...obj]`:
+
+- `Array.from` operates on both array-likes and iterables.
+- The spread operator operates only on iterables.
+
+So, for the task of turning something into an array, `Array.from` appears more universal.
+
+
+## Summary
+
+When we see `"..."` in the code, it is either rest parameters or the spread operator.
+
+There's an easy way to distinguish between them:
+
+- When `...` is at the end of function parameters, it's "rest parameters" and gathers the rest of the list into the array.
+- When `...` occurs in a function call or alike, it's called a "spread operator" and expands an array into the list.
+
+Use patterns:
+
+- Rest parameters are used to create functions that accept any number of arguments.
+- The spread operator is used to pass an array to functions that normally require a list of many arguments.
+
+Together they help to travel between a list and an array of parameters with ease.
+
+All arguments of a function call are also available in "old-style" `arguments`: array-like iterable object.
diff --git a/1-js/06-advanced-functions/03-closure/1-counter-independent/solution.md b/1-js/06-advanced-functions/03-closure/1-counter-independent/solution.md
new file mode 100644
index 00000000..cff69a25
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/1-counter-independent/solution.md
@@ -0,0 +1,5 @@
+The answer: **0,1.**
+
+Functions `counter` and `counter2` are created by different invocations of `makeCounter`.
+
+So they have independent outer Lexical Environments, each one has it's own `count`.
diff --git a/1-js/06-advanced-functions/03-closure/1-counter-independent/task.md b/1-js/06-advanced-functions/03-closure/1-counter-independent/task.md
new file mode 100644
index 00000000..e8c17dd3
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/1-counter-independent/task.md
@@ -0,0 +1,31 @@
+importance: 5
+
+---
+
+# Are counters independent?
+
+Here we make two counters: `counter` and `counter2` using the same `makeCounter` function.
+
+Are they independent? What is the second counter going to show? `0,1` or `2,3` or something else?
+
+```js
+function makeCounter() {
+  let count = 0;
+
+  return function() {
+    return count++;
+  };
+}
+
+let counter = makeCounter();
+let counter2 = makeCounter();
+
+alert( counter() ); // 0
+alert( counter() ); // 1
+
+*!*
+alert( counter2() ); // ?
+alert( counter2() ); // ?
+*/!*
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/2-counter-object-independent/solution.md b/1-js/06-advanced-functions/03-closure/2-counter-object-independent/solution.md
new file mode 100644
index 00000000..cd4e641e
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/2-counter-object-independent/solution.md
@@ -0,0 +1,24 @@
+
+Surely it will work just fine.
+
+Both nested functions are created within the same outer Lexical Environment, so they share access to the same `count` variable:
+
+```js run
+function Counter() {
+  let count = 0;
+
+  this.up = function() {
+    return ++count;
+  };
+  
+  this.down = function() {
+    return --count;
+  };
+}
+
+let counter = new Counter();
+
+alert( counter.up() ); // 1
+alert( counter.up() ); // 2
+alert( counter.down() ); // 1
+```
diff --git a/1-js/06-advanced-functions/03-closure/2-counter-object-independent/task.md b/1-js/06-advanced-functions/03-closure/2-counter-object-independent/task.md
new file mode 100644
index 00000000..d770b0ff
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/2-counter-object-independent/task.md
@@ -0,0 +1,29 @@
+importance: 5
+
+---
+
+# Counter object
+
+Here a counter object is made with the help of the constructor function.
+
+Will it work? What will it show?
+
+```js
+function Counter() {
+  let count = 0;
+
+  this.up = function() {
+    return ++count;
+  };
+  this.down = function() {
+    return --count;
+  };
+}
+
+let counter = new Counter();
+
+alert( counter.up() ); // ?
+alert( counter.up() ); // ?
+alert( counter.down() ); // ?
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/3-function-in-if/solution.md b/1-js/06-advanced-functions/03-closure/3-function-in-if/solution.md
new file mode 100644
index 00000000..e2e7a91b
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/3-function-in-if/solution.md
@@ -0,0 +1,3 @@
+The result is **an error**.
+
+The function `sayHi` is declared inside the `if`, so it only lives inside it. There is no `sayHi` outside.
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/03-closure/3-function-in-if/task.md b/1-js/06-advanced-functions/03-closure/3-function-in-if/task.md
new file mode 100644
index 00000000..d0dbbeb1
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/3-function-in-if/task.md
@@ -0,0 +1,20 @@
+
+# Function in if
+
+Look at the code. What will be result of the call at the last line?
+
+```js run
+let phrase = "Hello";
+
+if (true) {
+  let user = "John";
+
+  function sayHi() {
+    alert(`${phrase}, ${user}`);
+  }
+}
+
+*!*
+sayHi();
+*/!*
+```
diff --git a/1-js/06-advanced-functions/03-closure/4-closure-sum/solution.md b/1-js/06-advanced-functions/03-closure/4-closure-sum/solution.md
new file mode 100644
index 00000000..e8c8c465
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/4-closure-sum/solution.md
@@ -0,0 +1,17 @@
+For the second brackets to work, the first ones must return a function.
+
+Like this:
+
+```js run
+function sum(a) {
+
+  return function(b) {
+    return a + b; // takes "a" from the outer lexical environment
+  };
+
+}
+
+alert( sum(1)(2) ); // 3
+alert( sum(5)(-1) ); // 4
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/4-closure-sum/task.md b/1-js/06-advanced-functions/03-closure/4-closure-sum/task.md
new file mode 100644
index 00000000..c2f3eabe
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/4-closure-sum/task.md
@@ -0,0 +1,17 @@
+importance: 4
+
+---
+
+# Sum with closures
+
+Write function `sum` that works like this: `sum(a)(b) = a+b`.
+
+Yes, exactly this way, via double brackets (not a mistype).
+
+For instance:
+
+```js
+sum(1)(2) = 3
+sum(5)(-1) = 4
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/solution.js
new file mode 100644
index 00000000..66a149d9
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/solution.js
@@ -0,0 +1,8 @@
+
+function inArray(arr) {
+  return x => arr.includes(x);
+}
+
+function inBetween(a, b) {
+  return x => (x >= a && x <= b);
+}
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/source.js b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/source.js
new file mode 100644
index 00000000..74989df2
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/source.js
@@ -0,0 +1,10 @@
+
+let arr = [1, 2, 3, 4, 5, 6, 7];
+
+function inBetween(a, b) {
+  // ...your code...
+}
+
+function inArray(arr) {
+  // ...your code...
+}
diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/test.js b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/test.js
new file mode 100644
index 00000000..86d2d3b4
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/test.js
@@ -0,0 +1,21 @@
+
+describe("inArray", function() {
+  let arr = [1, 2, 3, 4, 5, 6, 7];
+
+  it("returns the filter for values in array", function() {
+
+    let filter = inArray(arr);
+    assert.isTrue(filter(5));
+    assert.isFalse(filter(0));
+  });
+});
+
+
+describe("inBetween", function() {
+
+  it("returns the filter for values between", function() {
+    let filter = inBetween(3, 6);
+    assert.isTrue(filter(5));
+    assert.isFalse(filter(0));
+  });
+});
diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/solution.md b/1-js/06-advanced-functions/03-closure/6-filter-through-function/solution.md
new file mode 100644
index 00000000..5bbc33b0
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/6-filter-through-function/solution.md
@@ -0,0 +1,26 @@
+
+# Filter inBetween
+
+```js run
+function inBetween(a, b) {
+  return function(x) {
+    return x >= a && x <= b;
+  };
+}
+
+let arr = [1, 2, 3, 4, 5, 6, 7];
+alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6
+```
+
+# Filter inArray
+
+```js run
+function inArray(arr) {
+  return function(x) {
+    return arr.includes(x);
+  };
+}
+
+let arr = [1, 2, 3, 4, 5, 6, 7];
+alert( arr.filter(inArray([1, 2, 10])) ); // 1,2
+```
diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/task.md b/1-js/06-advanced-functions/03-closure/6-filter-through-function/task.md
new file mode 100644
index 00000000..d1c39f94
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/6-filter-through-function/task.md
@@ -0,0 +1,29 @@
+importance: 5
+
+---
+
+# Filter through function
+
+We have a built-in method `arr.filter(f)` for arrays. It filters all elements through the function `f`. If it returns `true`, then that element is returned in the resulting array.
+
+Make a set of "ready to use" filters:
+
+- `inBetween(a, b)` -- between `a` and `b` or equal to them (inclusively).
+- `inArray([...])` -- in the given array.
+
+The usage must be like this:
+
+- `arr.filter(inBetween(3,6))` -- selects only values between 3 and 6.
+- `arr.filter(inArray([1,2,3]))` -- selects only elements matching with one of the members of `[1,2,3]`.
+
+For instance:
+
+```js
+/* .. your code for inBetween and inArray */
+let arr = [1, 2, 3, 4, 5, 6, 7];
+
+alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6
+
+alert( arr.filter(inArray([1, 2, 10])) ); // 1,2
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/7-sort-by-field/solution.md b/1-js/06-advanced-functions/03-closure/7-sort-by-field/solution.md
new file mode 100644
index 00000000..bd57085e
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/7-sort-by-field/solution.md
@@ -0,0 +1,22 @@
+
+
+```js run
+let users = [
+  { name: "John", age: 20, surname: "Johnson" }, 
+  { name: "Pete", age: 18, surname: "Peterson" },
+  { name: "Ann", age: 19, surname: "Hathaway" }
+];
+
+*!*
+function byField(field) {
+  return (a, b) => a[field] > b[field] ? 1 : -1;
+}
+*/!*
+
+users.sort(byField('name'));
+users.forEach(user => alert(user.name)); // Ann, John, Pete
+
+users.sort(byField('age'));
+users.forEach(user => alert(user.name)); // Pete, Ann, John
+```
+
diff --git a/1-js/06-advanced-functions/03-closure/7-sort-by-field/task.md b/1-js/06-advanced-functions/03-closure/7-sort-by-field/task.md
new file mode 100644
index 00000000..08fb5cc3
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/7-sort-by-field/task.md
@@ -0,0 +1,36 @@
+importance: 5
+
+---
+
+# Sort by field
+
+We've got an array of objects to sort:
+
+```js
+let users = [
+  { name: "John", age: 20, surname: "Johnson" },
+  { name: "Pete", age: 18, surname: "Peterson" },
+  { name: "Ann", age: 19, surname: "Hathaway" }
+];
+```
+
+The usual way to do that would be:
+
+```js
+// by name (Ann, John, Pete)
+users.sort((a, b) => a.name > b.name ? 1 : -1);
+
+// by age (Pete, Ann, John)
+users.sort((a, b) => a.age > b.age ? 1 : -1);
+```
+
+Can we make it even less verbose, like this?
+
+```js
+users.sort(byField('name'));
+users.sort(byField('age'));
+```
+
+So, instead of writing a function, just put `byField(fieldName)`.
+
+Write the function `byField` that can be used for that.
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js
new file mode 100644
index 00000000..a26578ae
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js
@@ -0,0 +1,13 @@
+function makeArmy() {
+
+  let shooters = [];
+
+  for(let i = 0; i < 10; i++) {
+    let shooter = function() { // shooter function
+      alert( i ); // should show its number
+    };
+    shooters.push(shooter);
+  }
+
+  return shooters;
+}
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js
new file mode 100644
index 00000000..7c7aaa1e
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js
@@ -0,0 +1,22 @@
+function makeArmy() {
+  let shooters = [];
+
+  let i = 0;
+  while (i < 10) {
+    let shooter = function() { // shooter function
+      alert( i ); // should show its number
+    };
+    shooters.push(shooter);
+    i++;
+  }
+
+  return shooters;
+}
+
+/*
+let army = makeArmy();
+
+army[0](); // the shooter number 0 shows 10
+army[5](); // and number 5 also outputs 10...
+// ... all shooters show 10 instead of their 0, 1, 2, 3...
+*/
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js
new file mode 100644
index 00000000..b61e6e4d
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js
@@ -0,0 +1,25 @@
+describe("army", function() {
+
+  let army;
+  
+  before(function() {
+    army = makeArmy();
+    window.alert = sinon.stub(window, "alert");
+  });
+
+  it("army[0] shows 0", function() {
+    army[0]();
+    assert(alert.calledWith(0));
+  });
+
+
+  it("army[5] shows 5", function() {
+    army[5]();
+    assert(alert.calledWith(5));
+  });
+
+  after(function() {
+    window.alert.restore();
+  });
+
+});
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png
new file mode 100644
index 00000000..d51e8167
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png differ
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png
new file mode 100644
index 00000000..e70edbd6
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/solution.md b/1-js/06-advanced-functions/03-closure/8-make-army/solution.md
new file mode 100644
index 00000000..03c34b07
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/solution.md
@@ -0,0 +1,121 @@
+
+Let's examine what's done inside `makeArmy`, and the solution will become obvious.
+
+1. It creates an empty array `shooters`:
+
+    ```js
+    let shooters = [];
+    ```
+2. Fills it in the loop via `shooters.push(function...)`.
+
+    Every element is a function, so the resulting array looks like this:
+
+    ```js no-beautify
+    shooters = [
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); },
+      function () { alert(i); }
+    ];
+    ```
+
+3. The array is returned from the function.
+
+Then, later, the call to `army[5]()` will get the element `army[5]` from the array (it will be a function) and call it.
+
+Now why all such functions show the same?
+
+That's because there's no local variable `i` inside `shooter` functions. When such a function is called, it takes `i` from its outer lexical environment.
+
+What will be the value of `i`?
+
+If we look at the source:
+
+```js
+function makeArmy() {
+  ...
+  let i = 0;
+  while (i < 10) {
+    let shooter = function() { // shooter function
+      alert( i ); // should show its number
+    };
+    ...
+  }
+  ...
+}
+```
+
+...We can see that it lives in the lexical environment associated with the current `makeArmy()` run. But when `army[5]()` is called, `makeArmy` has already finished its job, and `i` has the last value: `10` (the end of `while`).
+
+As a result, all `shooter` functions get from the outer lexical envrironment the same, last value `i=10`.
+
+The fix can be very simple:
+
+```js run
+function makeArmy() {
+
+  let shooters = [];
+
+*!*
+  for(let i = 0; i < 10; i++) {
+*/!*
+    let shooter = function() { // shooter function
+      alert( i ); // should show its number
+    };
+    shooters.push(shooter);
+  }
+
+  return shooters;
+}
+
+let army = makeArmy();
+
+army[0](); // 0
+army[5](); // 5
+```
+
+Now it works correctly, because every time the code block in `for (..) {...}` is executed, a new Lexical Environment is created for it, with the corresponding value of `i`.
+
+So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. A `shooter` gets the value exactly from the one where it was created.
+
+![](lexenv-makearmy.png)
+
+Here we rewrote `while` into `for`.
+
+Another trick could be possible, let's see it for better understanding of the subject:
+
+
+```js run
+function makeArmy() {
+  let shooters = [];
+
+  let i = 0;
+  while (i < 10) {
+*!*
+    let j = i;
+*/!*
+    let shooter = function() { // shooter function
+      alert( *!*j*/!* ); // should show its number
+    };
+    shooters.push(shooter);
+    i++;
+  }
+
+  return shooters;
+}
+
+let army = makeArmy();
+
+army[0](); // 0
+army[5](); // 5
+```
+
+The `while` loop, just like `for`, makes a new Lexical Environment for each run. So here we make sure that it gets the right value for a `shooter`.
+
+We copy `let j = i`. This makes a loop body local `j` and copies the value of `i` to it. Primitives are copied "by value", so we actually get a complete independent copy of `i`, belonging to the current loop iteration.
diff --git 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
new file mode 100644
index 00000000..ede8fd04
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/task.md
@@ -0,0 +1,35 @@
+importance: 5
+
+---
+
+# Army of functions
+
+The following code creates an array of `shooters`.
+
+Every function is meant to output its number. But something is wrong...
+
+```js run
+function makeArmy() {
+  let shooters = [];
+
+  let i = 0;
+  while (i < 10) {
+    let shooter = function() { // shooter function
+      alert( i ); // should show its number
+    };
+    shooters.push(shooter);
+    i++;
+  }
+
+  return shooters;
+}
+
+let army = makeArmy();
+
+army[0](); // the shooter number 0 shows 10
+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.
+
diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md
new file mode 100644
index 00000000..7e3b14db
--- /dev/null
+++ b/1-js/06-advanced-functions/03-closure/article.md
@@ -0,0 +1,644 @@
+
+# Closure
+
+JavaScript is a very function-oriented language. It gives a lot of freedom. A function can be created at one moment, then copied to another variable or passed as an argument to another function and called from a totally different place later.
+
+We know that a function can access variables outside of it. And this feature is used quite often.
+
+But what happens when an outer variables changes? Does a function get a most recent value or the one that existed when the function was created?
+
+Also, what happens when a function travels to another place of the code and is called from there -- does it get access to outer variables in the new place?
+
+Different languages behave differently here, in this chapter we cover JavaScript.
+
+[cut]
+
+## A couple of questions
+
+Let's formulate two questions for the seed, and then study internal mechanics piece-by-piece, so that you'll be able to answer these questions and more complex ones in the future.
+
+1. The function `sayHi` uses an external variable `name`. When the function runs, which value of these two it's going to use?
+
+    ```js
+    let name = "John";
+
+    function sayHi() {
+      alert("Hi, " + name);
+    }
+
+    name = "Pete";
+
+    *!*
+    sayHi(); // what will it show: "John" or "Pete"?
+    */!*
+    ```
+
+    Such situations are common in both browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request.
+
+    So, the question is: does it pick up latest changes?
+
+
+2. The function `makeWorker` makes another function and returns it. That new function can be called from somewhere else. Will it have access to outer variables from its creation place or the invocation place or maybe both?
+
+    ```js
+    function makeWorker() {
+      let name = "Pete";
+
+      return function() {
+        alert(name);
+      };
+    }
+
+    let name = "John";
+
+    // create a function
+    let work = makeWorker();
+
+    // call it
+    *!*
+    work(); // what will it show? "Pete" (name where created) or "John" (name where called)?
+    */!*
+    ```
+
+
+## Lexical Environment
+
+To understand what's going on, let's first discuss what a "variable" technically is.
+
+In JavaScript, every running function, code block and the script as a whole have an associated object named *Lexical Environment*.
+
+The Lexical Environment object consists of two parts:
+
+1. *Environment Record* -- an object that has all local variables as its properties (and some other information like the value of `this`).
+2. A reference to the *outer lexical environment*, usually the one associated with the code lexically right outside of it (outside of the current figure brackets).a
+
+So, a "variable" is just a property of the special internal object, Environment Record. "To get or change a variable" means "to get or change the property of that object".
+
+For instance, in this simple code, there is only one Lexical Environment:
+
+![lexical environment](lexical-environment-global.png)
+
+This is a so-called global Lexical Environment, associated with the whole script. For browsers, all `<script>` tags share the same global environment.
+
+On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer one, so that's `null`.
+
+Here's the bigger picture of how `let` variables work:
+
+![lexical environment](lexical-environment-global-2.png)
+
+Rectangles ont the right-hand side demonstrate how the global Lexical Environment changes during the execution:
+
+1. When the script starts, the Lexical Environment is empty.
+2. The `let phrase` definition appears. Now it initially has no value, so `undefined` is stored.
+3. `phrase` is assigned.
+4. `phrase` refers to a new value.
+
+Everything looks simple for now, right?
+
+To summarize:
+
+- A variable is a property of a special internal object, associated with the currently executing block/function/script.
+- Working with variables is actually working with the properties of that object.
+
+### Function Declaration
+
+Function Declarations are special. Unlike `let` variables, they are processed not when the execution reaches them, but when a Lexical Environment is created. For the global Lexical Environment, it means the moment when the script is started.
+
+...And that is why we can call a function declaration before it is defined.
+
+The code below demonstrates that the Lexical Environment is non-empty from the beginning. It has `say`, because that's a Function Declaration. And later it gets `phrase`, declared with `let`:
+
+![lexical environment](lexical-environment-global-3.png)
+
+
+### Inner and outer Lexical Environment
+
+During the call `say()` uses an outer variable, so let's see the details of what's going on.
+
+First, when a function runs, a new function Lexical Environment is created automatically. That's a general rule for all functions. That Lexical Environment is used to store local variables and parameters of the call.
+
+<!--
+```js
+let phrase = "Hello";
+
+function say(name) {
+  alert( `${phrase}, ${name}` );
+}
+
+say("John"); // Hello, John
+```
+-->
+
+Here's the picture of Lexical Environments when the execution is inside `say("John")`, at the line labelled with an arrow:
+
+![lexical environment](lexical-environment-simple.png)
+
+During the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global):
+
+- The inner Lexical Environment corresponds to the current execution of  `say`. It has a single variable: `name`, the function argument. We called `say("John")`, so the value of `name` is `"John"`.
+- The outer Lexical Environment is the global Lexical Environment.
+
+The inner Lexical Environment one has the `outer` reference to the outer one.
+
+**When a code wants to access a variable -- it is first searched in the inner Lexical Environment, then in the outer one, then the more outer one and so on until the end of the chain.**
+
+If a variable is not found anywhere, that's an error in strict mode. Without `use strict`, an assignment to an undefined variable creates a new global variable, for backwards compatibility.
+
+Let's see how the search proceeds in our example:
+
+- When the `alert` inside `say` wants to access `name`, it finds it immediately in the function Lexical Environment.
+- When it wants to access `phrase`, then there is no `phrase` locally, so it follows the `outer` reference and finds it globally.
+
+![lexical environment lookup](lexical-environment-simple-lookup.png)
+
+Now we can give the answer to the first seed question from the beginning of the chapter.
+
+**A function gets outer variables as they are now, the most recent values.**
+
+That's because of the described mechanism. Old variable values are not saved anywhere. When a function wants them, it takes the current values from its own or an outer Lexical Environment.
+
+So the answer here is `Pete`:
+
+```js run
+let name = "John";
+
+function sayHi() {
+  alert("Hi, " + name);
+}
+
+name = "Pete"; // (*)
+
+*!*
+sayHi(); // Pete
+*/!*
+```
+
+
+The execution flow of the code above:
+
+1. The global Lexical Envrionment has `name: "John"`.
+2. At the line `(*)` the global variable is changed, now it has `name: "Pete"`.
+3. When the function `say()`, is executed and takes `name` from outside. Here that's from the global Lexical Environment where it's already `"Pete"`.
+
+
+```smart header="One call -- one Lexical Environment"
+Please note that a new function Lexical Environment is created each time a function runs.
+
+And if a function is called multiple times, then each invocation will have its own Lexical Environment, with local variables and parameters specific for that very run.
+```
+
+```smart header="Lexical Environment is a specification object"
+"Lexical Environment" is a specification object. We can't get this object in our code and manipulate it directly. JavaScript engines also may optimize it, discard variables that are unused to save memory and perform other internal tricks.
+```
+
+
+## Nested functions
+
+A function is called "nested" when it is created inside another function.
+
+Technically, that is easily possible.
+
+We can use it to organize the code, like this:
+
+```js
+function sayHiBye(firstName, lastName) {
+
+  // helper nested function to use below
+  function getFullName() {
+    return firstName + " " + lastName;
+  }
+
+  alert( "Hello, " + getFullName() );
+  alert( "Bye, " + getFullName() );
+
+}
+```
+
+Here the *nested* function `getFullName()` is made for convenience. It can access the outer variables and so can return the full name.
+
+What's more interesting, a nested function can be returned: as a property of a new object (if the outer function creates and returns it) or as a result by itself. And then used somewhere else. No matter where, it still keeps the access to the same outer variables.
+
+An example with the constructor function (see the chapter <info:constructor-new>):
+
+```js run
+// constructor function returns a new object
+function User(name) {
+
+  // the method is created as a nested function
+  this.sayHi = function() {
+    alert(name);
+  };
+}
+
+let user = new User("John");
+user.sayHi();
+```
+
+An example with returning a function:
+
+```js run
+function makeCounter() {
+  let count = 0;
+
+  return function() {
+    return count++;
+  };
+}
+
+let counter = makeCounter();
+
+alert( counter() ); // 0
+alert( counter() ); // 1
+alert( counter() ); // 2
+```
+
+Let's go on with the `makeCounter` example. It creates the "counter" function that returns the next number on each invocation. Despite being simple, slightly modified variants of that code have practical uses, for instance, as a [pseudorandom number generator](https://en.wikipedia.org/wiki/Pseudorandom_number_generator), and more. So the example is not exactly "artificial".
+
+How does the counter work?
+
+When the inner function runs, the variable in `count++` is searched from inside out.
+
+For the example above, the order will be:
+
+![](lexical-search-order.png)
+
+1. The locals of the nested function.
+2. The variables of the outer function.
+3. ...And further until it reaches globals.
+
+In that example `count` is found on the step `2`. When an outer variable is modified, it's changed where it's found. So `count++` finds the outer variable and increases it in the Lexical Environment where it belongs. Like if we had `let count = 1`.
+
+Here's a couple of questions:
+
+1. Can we somehow reset the `counter` from the code that doesn't belong to `makeCounter`? E.g. after `alert` calls in the example above.
+2. If we call `makeCounter()` multiple times -- it returns many `counter` functions. Are they independent or do they share the same `count`?
+
+Try to answer them before going on reading.
+
+...Are you done?
+
+Okay, here we go with the answers.
+
+1. There is no way. The `counter` is a local function variable, we can't access it from the outside.
+2. For every call to `makeCounter()` a new function Lexical Environment is created, with its own `counter`. So the resulting `counter` functions are independent.
+
+Here's the demo:
+
+```js run
+function makeCounter() {
+  let count = 0;
+  return function() {
+    return count++;
+  };
+}
+
+let counter1 = makeCounter();
+let counter2 = makeCounter();
+
+alert( counter1() ); // 0
+alert( counter1() ); // 1
+
+alert( counter2() ); // 0 (independant)
+```
+
+
+Probably, the situation with outer variables is quite clear for you as of now. But in more complex situations a deeper understanding of internals may be required. So here you go.
+
+## Environments in detail
+
+For a more in-depth understanding, here's what's going on in the `makeCounter` example step-by-step, down to the nuts and bolts:
+
+1. When the script has just started, there is only global Lexical Environment:
+
+    ![](lexenv-nested-makecounter-1.png)
+
+    At that starting moment there is only `makeCounter` function, because it's a Function Declaration. It did not run yet.
+
+    All functions "on birth" receive a hidden property `[[Environment]]` with the reference to the Lexical Environment of their creation. We didn't talk about it yet, but technically that's a way how the function knows where it was made.
+
+    Here, `makeCounter` is created in the global Lexical Environment, so `[[Environment]]` keeps the reference to it.
+
+2. Then the code runs on, and the call to `makeCounter()` is performed. Here's the picture for the moment when the execution is on the first line inside `makeCounter()`:
+
+    ![](lexenv-nested-makecounter-2.png)
+
+    At the moment of the call of `makeCounter()`, the Lexical Environment is created, to hold its variables and arguments.
+
+    As all Lexical Environments, it stores two things:
+    1. An Environment Record with local variables. In our case `count` is the only local variable (appears in it when the line with `let count` is executed).
+    2. The outer lexical reference, which is set to `[[Environment]]` of the function. Here `[[Environment]]` of `makeCounter` references the global Lexical Environment.
+
+    So, now we have two Lexical Environments: the first one is global, the second one is for the current `makeCounter` call, with the outer reference to global.
+
+3. During the execution of `makeCounter()`, a tiny nested function is created.
+
+    It doesn't matter whether the function is created using Function Declaration or Function Expression. All functions get the `[[Environment]]` property that references the Lexical Environment where they were made.
+
+    For our new nested function that is the current Lexical Environment of `makeCounter()`:
+
+    ![](lexenv-nested-makecounter-3.png)
+
+    Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running, we're going to return it.
+
+4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`:
+
+    ![](lexenv-nested-makecounter-4.png)
+
+    That function has only one line: `return count++`, that will be executed when we run it.
+
+5. When the `counter()` is called, an "empty" Lexical Environment is created for it. It has no local variables by itself. But the `[[Environment]]` of `counter` is used as the outer reference for it, so it has access to the variables of the former `makeCounter()` call, where it was created:
+
+    ![](lexenv-nested-makecounter-5.png)
+
+    Now if it accesses a variable, it first searches its own Lexical Environment (empty), then the Lexical Environment of the former `makeCounter()` call, then the global one.
+
+    When it looks for `count`, it finds it among the variables `makeCounter`, in the nearest outer Lexical Environment.
+
+    Please note how memory management works here. When `makeCounter()` call finished some time ago, its Lexical Environment was retained in memory, because there's a nested function with `[[Environment]]` referencing it.
+
+    Generally, a Lexical Environment object lives until there is a function which may use it. And when there are none, it is cleared.
+
+6. The call to `counter()` not only returns the value of `count`, but also increases it. Note that the modification is done "in place". The value of `count` is modified exactly in the environment where it was found.
+
+    ![](lexenv-nested-makecounter-6.png)
+
+    So we return to the previous step with the only change -- the new value of `count`. The following calls all do the same.
+
+7. Next `counter()` invocations do the same.
+
+The answer to the second seed question from the beginning of the chapter should now be obvious.
+
+The `work()` function in the code below uses the `name` from the place of its origin through the outer lexical environment reference:
+
+![](lexenv-nested-work.png)
+
+So, the result is `"Pete"` here.
+
+...But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case it would be `"John"`.
+
+```smart header="Closures"
+There is a general programming term "closure", that developers generally should know.
+
+A [closure](https://en.wikipedia.org/wiki/Closure_(computer_programming)) is a function that remembers its outer variables and can access them. In some languages, that's not possible, or a function should be written in a special way to make it happen. But as explained above, in JavaScript all functions are naturally closures (there is only one exclusion, to be covered in <info:new-function>).
+
+That is: they automatically remember where they are created using a hidden `[[Environment]]` property, and all of them can access outer variables.
+
+When on an interview a frontend developer gets a question about "what's a closure?", a valid answer would be a definition of the closure and an explanation that all functions in JavaScript are closures, and maybe few more words about technical details: the `[[Environment]]` property and how Lexical Environments work.
+```
+
+## Code blocks and loops, IIFE
+
+The examples above concentrated on functions. But Lexical Environments also exist for code blocks `{...}`.
+
+They are created when a code block runs and contain block-local variables. Here's a couple of examples.
+
+## If
+
+In the example below, when the execution goes into `if` block, the new "if-only" Lexical Environment is created for it:
+
+<!--
+```js run
+let phrase = "Hello";
+
+if (true) {
+  let user = "John";
+
+  alert(`${phrase}, ${user}`); // Hello, John
+}
+
+alert(user); // Error, can't see such variable!
+```
+-->
+
+![](lexenv-if.png)
+
+The new Lexical Environment gets the enclosing one as the outer reference, so `phrase` can be found. But all variables and Function Expressions declared inside `if` reside in that Lexical Environment and can't be seen from the outside.
+
+For instance, after `if` finishes, the `alert` below won't see the `user`, hence the error.
+
+## For, while
+
+For a loop, every run has a separate Lexical Environment. If the variable is declared in `for`, then it's also local to that Lexical Environment:
+
+```js run
+for(let i = 0; i < 10; i++) {
+  // Each loop has its own Lexical Environment
+  // {i: value}
+}
+
+alert(i); // Error, no such variable
+```
+
+That's actually an exception, because `let i` is visually outside of `{...}`. But in fact each run of the loop has its own Lexical Environment with the current `i` in it.
+
+After the loop, `i` is not visible.
+
+### Code blocks
+
+We also can use a "bare" code block `{…}` to isolate variables into a "local scope".
+
+For instance, in a web browser all scripts share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other.
+
+That may happen if the variable name is a widespread word, and script authors are unaware of each other.
+
+If we'd like to evade that, we can use a code block to isolate the whole script or an area in it:
+
+```js run
+{
+  // do some job with local variables that should not be seen outside
+
+  let message = "Hello";
+
+  alert(message); // Hello
+}
+
+alert(message); // Error: message is not defined
+```
+
+The code outside of the block (or inside another script) doesn't see variables in it, because a code block has its own Lexical Environment.
+
+### IIFE
+
+In old scripts, one can find so-called "immediately-invoked function expressions" (abbreviated as IIFE) used for this purpose.
+
+They look like this:
+
+```js run
+(function() {
+
+  let message = "Hello";
+
+  alert(message); // Hello
+
+})();
+```
+
+Here a Function Expression is created and immediately called. So the code executes right now and has its own private variables.
+
+The Function Expression is wrapped with brackets `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as a start of Function Declaration. But a Function Declaration must have a name, so there will be an error:
+
+```js run
+// Error: Unexpected token (
+function() { // <-- JavaScript cannot find function name, meets ( and gives error
+
+  let message = "Hello";
+
+  alert(message); // Hello
+
+}();
+```
+
+We can say "okay, let it be Function Declaration, let's add a name", but it won't work. JavaScript does not allow Function Declarations to be called immediately:
+
+```js run
+// syntax error because of brackets below
+function go() {
+
+}(); // <-- can't call Function Declaration immediately
+```
+
+...So the brackets are needed to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression. Needs no name and can be called immediately.
+
+There are other ways to tell JavaScript that we mean Function Expression:
+
+```js run
+// Ways to create IIFE
+
+(function() {
+  alert("Brackets around the function");
+}*!*)*/!*();
+
+(function() {
+  alert("Brackets around the whole thing");
+}()*!*)*/!*;
+
+*!*!*/!*function() {
+  alert("Bitwise NOT operator starts the expression");
+}();
+
+*!*+*/!*function() {
+  alert("Unary plus starts the expression");
+}();
+```
+
+In all cases above we declare a Function Expression and run it immediately.
+
+## Garbage collection
+
+Lexical Environment objects that we've been talking about are subjects to same memory management rules as regular values.
+
+- Usually, Lexical Environment is cleaned up after the function run. For instance:
+
+    ```js
+    function f() {
+      let value1 = 123;
+      let value2 = 456;
+    }
+
+    f();
+    ```
+
+    Here two values are technically the properties of the Lexical Environment. But after `f()` finishes that Lexical Environment becomes unreachable, so it's deleted from the memory.
+
+- ...But if there's a nested function that is still reachable after the end of `f`, then its `[[Environment]]` reference keeps the outer lexical environment alive as well:
+
+    ```js
+    function f() {
+      let value = 123;
+
+      function g() { alert(value); }
+
+    *!*
+      return g;
+    */!*
+    }
+
+    let g = f(); // g is reachable, and keeps the outer lexical environment in memory
+    ```
+
+- Please note that if `f()` is called many times, and resulting functions are saved, then the corresponding Lexical Environment objects will also be retained in memory. All 3 of them in the code below:
+
+    ```js
+    function f() {
+      let value = Math.random();
+
+      return function() { alert(value); };
+    }
+
+    // 3 functions in array, every of them links to LexicalEnvrironment
+    // from the corresponding f() run
+    //         LE   LE   LE
+    let arr = [f(), f(), f()];
+    ```
+
+- A Lexical Environment object dies when it becomes unreachable. That is: when no nested functions remain that reference it. In the code below, after `g` becomes unreachable, the `value` is also cleaned from the memory;
+
+    ```js
+    function f() {
+      let value = 123;
+
+      function g() { alert(value); }
+
+      return g;
+    }
+
+    let g = f(); // while g is alive
+    // there corresponding Lexical Environment lives
+
+    g = null; // ...and now the memory is cleaned up
+    ```
+
+### Real-life optimizations
+
+As we've seen, in theory while a function is alive, all outer variables are also retained.
+
+But in practice, JavaScript engines try to optimize that. They analyze variable usage and if it's easy to see that an outer variable is not used -- it is removed.
+
+**An important side effect in V8 (Chrome, Opera) is that such variable will become unavailable in debugging.**
+
+Try running the example below with the open Developer Tools in Chrome.
+
+When it pauses, in console type `alert(value)`.
+
+```js run
+function f() {
+  let value = Math.random();
+
+  function g() {
+    debugger; // in console: type alert( value ); No such variable!
+  }
+
+  return g;
+}
+
+let g = f();
+g();
+```
+
+As you could see -- there is no such variable! In theory, it should be accessible, but the engine optimized it out.
+
+That may lead to funny (if not such time-consuming) debugging issues. One of them -- we can see a same-named outer variable instead of the expected one:
+
+```js run global
+let value = "Surprise!";
+
+function f() {
+  let value = "the closest value";
+
+  function g() {
+    debugger; // in console: type alert( value ); Surprise!
+  }
+
+  return g;
+}
+
+let g = f();
+g();
+```
+
+```warn header="See ya!"
+This feature of V8 is good to know. If you are debugging with Chrome/Opera, sooner or later you will meet it.
+
+That is not a bug of debugger, but a special feature of V8. Maybe it will be changed some time.
+You always can check for it by running examples on this page.
+```
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-if.png b/1-js/06-advanced-functions/03-closure/lexenv-if.png
new file mode 100644
index 00000000..a27fb309
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-if.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png
new file mode 100644
index 00000000..6da6f5b9
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png
new file mode 100644
index 00000000..92a4603c
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png
new file mode 100644
index 00000000..0a5ea9e5
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png
new file mode 100644
index 00000000..47038d18
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png
new file mode 100644
index 00000000..4a317c7f
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png
new file mode 100644
index 00000000..f8d8af0e
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png
new file mode 100644
index 00000000..a926bce4
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png
new file mode 100644
index 00000000..98eacdcc
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png
new file mode 100644
index 00000000..46074276
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png
new file mode 100644
index 00000000..527c4157
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png
new file mode 100644
index 00000000..035dfd31
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png
new file mode 100644
index 00000000..5a10a134
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png
new file mode 100644
index 00000000..684f017e
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png
new file mode 100644
index 00000000..aff8804d
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png
new file mode 100644
index 00000000..893724c1
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png
new file mode 100644
index 00000000..47163aaa
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png
new file mode 100644
index 00000000..240b0103
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png
new file mode 100644
index 00000000..9d2284ac
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png
new file mode 100644
index 00000000..808b2f44
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global.png
new file mode 100644
index 00000000..c35f3491
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png
new file mode 100644
index 00000000..5aa9432b
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png
new file mode 100644
index 00000000..06730045
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png
new file mode 100644
index 00000000..722aaba7
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png
new file mode 100644
index 00000000..e6fd8b6e
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png
new file mode 100644
index 00000000..28e971b3
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order.png b/1-js/06-advanced-functions/03-closure/lexical-search-order.png
new file mode 100644
index 00000000..392cb571
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-search-order.png differ
diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png b/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png
new file mode 100644
index 00000000..870897d8
Binary files /dev/null and b/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png differ
diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md
new file mode 100644
index 00000000..9a089b5f
--- /dev/null
+++ b/1-js/06-advanced-functions/04-var/article.md
@@ -0,0 +1,187 @@
+
+# The old "var"
+
+In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration:
+
+1. `let`
+2. `const`
+3. `var`
+
+`let` and `const` behave exactly the same way in terms of Lexical Environments.
+
+But `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones.
+
+If you don't plan meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later.
+
+[cut]
+
+From the first sight, `var` behaves similar to `let`. That is, declares a variable:
+
+```js run
+function sayHi() {
+  var phrase = "Hello"; // local variable, "var" instead of "let"
+
+  alert(phrase); // Hello
+}
+
+sayHi();
+
+alert(phrase); // Error, phrase is not defined
+```
+
+...But here are the differences.
+
+## "var" has no block scope
+
+`var` variables are either function-wide or global, they are visible through blocks.
+
+For instance:
+
+```js
+if (true) {
+  var test = true; // use "var" instead of "let"
+}
+
+*!*
+alert(test); // true, the variable lives after if
+*/!*
+```
+
+If we used `let test` on the 2nd line, then it wouldn't be visible to `alert`. But `var` ignores code blocks, so we've got a global `test`.
+
+The same thing for loops: `var` cannot be block- or loop-local:
+
+```js
+for(var i = 0; i < 10; i++) {
+  // ...
+}
+
+*!*
+alert(i); // 10, "i" is visible after loop, it's a global variable
+*/!*
+```
+
+If a code block in inside a function, then `var` becomes a function-level variable:
+
+```js
+function sayHi() {
+  if (true) {
+    var phrase = "Hello";
+  }
+
+  alert(phrase); // works
+}
+
+sayHi();
+alert(phrase); // Error: phrase is not defined
+```
+
+As we can see, `var` pierces through `if`, `for` or other code blocks. That's because long time ago in JavaScript blocks had no Lexical Environments. And `var` is a reminiscence of that.
+
+## "var" are processed at the function start
+
+`var` declarations are processed when the function starts (or script starts for globals).
+
+In other words, `var` variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function).
+
+So this code:
+
+```js
+function sayHi() {
+  phrase = "Hello";
+
+  alert(phrase);
+
+*!*
+  var phrase;
+*/!*
+}
+```
+
+...Is technically the same as this (moved `var phrase` above):
+
+```js
+function sayHi() {
+*!*
+  var phrase;
+*/!*
+
+  phrase = "Hello";
+
+  alert(phrase);
+}
+```
+
+...Or even as this (remember, code blocks are ignored):
+
+```js
+function sayHi() {
+  phrase = "Hello"; // (*)
+
+  *!*
+  if (false) {
+    var phrase;
+  }
+  */!*
+
+  alert(phrase);
+}
+```
+
+People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function.
+
+So in the example above, `if (false)` branch never executes, but that doesn't matter. The `var` inside it is processed in the beginning of the function, so at the moment of `(*)` the variable exists.
+
+**Declarations are hoisted, but assignments are not.**
+
+That's better to demonstrate with an example, like this:
+
+```js run
+function sayHi() {
+  alert(phrase);  
+
+*!*
+  var phrase = "Hello";
+*/!*
+}
+
+sayHi();
+```
+
+The line `var phrase = "Hello"` has two actions in it:
+
+1. Variable declaration `var`
+2. Variable assignment `=`.
+
+The declaration is processed at the start of function execution ("hoisted"), but the assignment always works at the place where it appears. So the code works essentially like this:
+
+```js run
+function sayHi() {
+*!*
+  var phrase; // declaration works at the start...
+*/!*
+
+  alert(phrase); // undefined
+
+*!*
+  phrase = "Hello"; // ...assignment - when the execution reaches it.
+*/!*
+}
+
+sayHi();
+```
+
+Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments.
+
+In both examples above `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`.
+
+## Summary
+
+There are two main differences of `var`:
+
+1. Variables have no block scope, they are visible minimum at the function level.
+2. Variable declarations are processed at function start.
+
+There's one more minor difference related to the global object, we'll cover that in the next chapter.
+
+These differences are actually a bad thing most of time. First, we can't create block-local variables. And hoisting just creates more space for errors. So, for new scripts `var` is used exceptionally rarely.
diff --git a/1-js/06-advanced-functions/05-global-object/article.md b/1-js/06-advanced-functions/05-global-object/article.md
new file mode 100644
index 00000000..0443eba9
--- /dev/null
+++ b/1-js/06-advanced-functions/05-global-object/article.md
@@ -0,0 +1,171 @@
+
+
+# Global object
+
+When JavaScript was created, there was an idea of a "global object" that provides all global variables and functions. It was planned that multiple in-browser scripts would use that single global object and share variables through it.
+
+Since then, JavaScript greatly evolved, and that idea of linking code through global variables became much less appealing. In modern JavaScript, the concept of modules took its place.
+
+But the global object still remains in the specification.
+
+In a browser it is named "window", for Node.JS it is "global", for other environments it may have another name.
+
+It does two things:
+
+1. Provides access to built-in functions and values, defined by the specification and the environment.
+    For instance, we can call `alert` directly or as a method of `window`:
+
+    ```js run
+    alert("Hello");
+
+    // the same as
+    window.alert("Hello");
+    ```
+
+    The same applies to other built-ins. E.g. we can use `window.Array` instead of `Array`.
+
+2. Provides access to global Function Declarations and `var` variables. We can read and write them using its properties, for instance:
+
+    <!-- no-strict to move variables out of eval -->
+    ```js untrusted run no-strict refresh
+    var phrase = "Hello";
+
+    function sayHi() {
+      alert(phrase);
+    }
+
+    // can read from window
+    alert( window.phrase ); // Hello (global var)
+    alert( window.sayHi ); // function (global function declaration)
+
+    // can write to window (creates a new global variable)
+    window.test = 5;
+
+    alert(test); // 5
+    ```
+
+...But the global object does not have variables declared with `let/const`!
+
+```js untrusted run no-strict refresh
+*!*let*/!* user = "John";
+alert(user); // John
+
+alert(window.user); // undefined, don't have let
+alert("user" in window); // false
+```
+
+```smart header="The global object is not a global Environment Record"
+In versions of ECMAScript prior to ES-2015, there were no `let/const` variables, only `var`. And global object was used as a global Environment Record (wordings were a bit different, but that's the gist).
+
+But starting from ES-2015, these entities are split apart. There's a global Lexical Environment with its Environment Record. And there's a global object that provides *some* of the global variables.
+
+As a practical difference, global `let/const` variables are definitively properties of the global Environment Record, but they do not exist in the global object.
+
+Naturally, that's because the idea of a global object as a way to access "all global things" comes from ancient times. Nowadays is not considered to be a good thing. Modern language features like `let/const` do not make friends with it, but old ones are still compatible.
+```
+
+## Uses of "window"
+
+In server-side environments like Node.JS, the `global` object is used exceptionally rarely. Probably it would be fair to say "never".
+
+In-browser `window` is sometimes used though.
+
+Usually, it's not a good idea to use it, but here are some examples you can meet.
+
+1. To access exactly the global variable if the function has the local one with the same name.
+
+    ```js untrusted run no-strict refresh
+    var user = "Global";
+
+    function sayHi() {
+      var user = "Local";
+
+    *!*
+      alert(window.user); // Global
+    */!*
+    }
+
+    sayHi();
+    ```
+
+    Such use is a workaround. Would be better to name variables differently, that won't require use to write the code it this way. And please note `"var"` before `user`. The trick doesn't work with `let` variables.
+
+2. To check if a certain global variable or a builtin exists.
+
+    For instance, we want to check whether a global function `XMLHttpRequest` exists.
+
+    We can't write `if (XMLHttpRequest)`, because if there's no `XMLHttpRequest`, there will be an error (variable not defined).
+
+    But we can read it from `window.XMLHttpRequest`:
+
+    ```js run
+    if (window.XMLHttpRequest) {
+      alert('XMLHttpRequest exists!')
+    }
+    ```
+
+    If there is no such global function then `window.XMLHttpRequest` is just a non-existing object property. That's `undefined`, no error, so it works.
+
+    We can also write the test without `window`:
+
+    ```js
+    if (typeof XMLHttpRequest == 'function') {
+      /* is there a function XMLHttpRequest? */
+    }
+    ```
+
+    This doesn't use `window`, but is (theoretically) less reliable, because `typeof` may use a local XMLHttpRequest, and we want the global one.
+
+
+3. To take the variable from the right window. That's probably the most valid use case.
+
+    A browser may open multiple windows and tabs. A window may also embed another one in `<iframe>`. Every browser window has its own `window` object and global variables. JavaScript allows windows that come from the same site (same protocol, host, port) to access variables from each other.
+
+    That use is a little bit beyond our scope for now, but it looks like:
+    ```html run
+    <iframe src="/" id="iframe"></iframe>
+
+    <script>
+      alert( innerWidth ); // get innerWidth property of the current window (browser only)
+      alert( Array ); // get Array of the current window (javascript core builtin)
+
+      // when the iframe loads...
+      iframe.onload = function() {
+        // get width of the iframe window
+      *!*
+        alert( iframe.contentWindow.innerWidth );
+      */!*
+        // get the builtin Array from the iframe window
+      *!*
+        alert( iframe.contentWindow.Array );
+      */!*
+      };
+    </script>
+    ```
+
+    Here, first two alerts use the current window, and the latter two take variables from `iframe` window. Can be any variables if `iframe` originates from the same protocol/host/port.
+
+## "this" and global object
+
+Sometimes, the value of `this` is exactly the global object. That's rarely used, but some scripts rely on that.
+
+1. In the browser, the value of `this` in the global area is `window`:
+
+    ```js run
+    // outside of functions
+    alert( this === window ); // true
+    ```
+
+    Other, non-browser environments, may use another value for `this` in such cases.
+
+2. When a function with `this` is called in non-strict mode, it gets the global object as `this`:
+    ```js run no-strict
+    // not in strict mode (!)
+    function f() {
+      alert(this); // [object Window]
+    }
+
+    f(); // called without an object
+    ```
+
+    By specification, `this` in this case must be the global object, even in non-browser environments like Node.JS. That's for compatibility with old scripts, in strict mode `this` would be `undefined`.
diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js
new file mode 100644
index 00000000..ce894698
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js
@@ -0,0 +1,13 @@
+function makeCounter() {
+  let count = 0;
+
+  function counter() {
+    return count++;
+  }
+
+  counter.set = value => count = value;
+
+  counter.decrease = () => count--;
+
+  return counter;
+}
diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js
new file mode 100644
index 00000000..5bf29aa2
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js
@@ -0,0 +1,18 @@
+function makeCounter() {
+  let count = 0;
+
+  // ... your code ...
+}
+
+let counter = makeCounter();
+
+alert( counter() ); // 0
+alert( counter() ); // 1
+
+counter.set(10); // set the new count
+
+alert( counter() ); // 10
+
+counter.decrease(); // decrease the count by 1
+
+alert( counter() ); // 10 (instead of 11)
diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js
new file mode 100644
index 00000000..0e613aba
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js
@@ -0,0 +1,41 @@
+describe("counter", function() {
+
+  it("increases from call to call", function() {
+
+    let counter = makeCounter();
+
+    assert.equal( counter(), 0 ); 
+    assert.equal( counter(), 1 ); 
+    assert.equal( counter(), 2 ); 
+  });
+
+  
+  describe("counter.set", function() {
+    it("sets the count", function() {
+
+      let counter = makeCounter();
+
+      counter.set(10);
+
+      assert.equal( counter(), 10 ); 
+      assert.equal( counter(), 11 ); 
+    });
+  });
+  
+  describe("counter.decrease", function() {
+    it("decreases the count", function() {
+
+      let counter = makeCounter();
+
+      counter.set(10);
+
+      assert.equal( counter(), 10 ); 
+
+      counter.decrease();
+
+      assert.equal( counter(), 10 ); 
+
+    });
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md
new file mode 100644
index 00000000..e829d96e
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md
@@ -0,0 +1,2 @@
+
+The solution uses `count` in the local variable, but addition methods are written right into the `counter`. They share the same outer lexical environment and also can access the current `count`.
diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md
new file mode 100644
index 00000000..e34bb67b
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md
@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# Set and decrease for counter
+
+Modify the code of `makeCounter()` so that the counter can also decrease and set the number:
+
+- `counter()` should return the next number (as before).
+- `counter.set(value)` should set the `count` to `value`.
+- `counter.decrease(value)` should decrease the `count` by 1.
+
+See the sandbox code for the complete usage example.
+
+P.S. You can use either a closure or the function property to keep the current count. Or write both variants.
diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md
new file mode 100644
index 00000000..5c932691
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md
@@ -0,0 +1,55 @@
+
+1. For the whole thing to work *anyhow*, the result of `sum` must be function.
+2. That function must keep in memory the current value between calls.
+3. According to the task, the function must become the number when used in `==`. Functions are objects, so the conversion happens as described in the chapter <info:object-toprimitive>, and we can provide our own method that returns the number.
+
+Now the code:
+
+```js run
+function sum(a) {
+
+  let currentSum = a;
+
+  function f(b) {
+    currentSum += b;
+    return f;
+  }
+
+  f.toString = function() {
+    return currentSum;
+  };
+
+  return f;
+}
+
+alert( sum(1)(2) ); // 3
+alert( sum(5)(-1)(2) ); // 6
+alert( sum(6)(-1)(-2)(-3) ); // 0
+alert( sum(0)(1)(2)(3)(4)(5) ); // 15
+```
+
+Please note that the `sum` function actually works only once. It returns function `f`.
+
+Then, on each subsequent call, `f` adds its parameter to the sum `currentSum`, and returns itself.
+
+**There is no recursion in the last line of `f`.**
+
+Here is what recursion looks like:
+
+```js
+function f(b) {
+  currentSum += b;
+  return f(); // <-- recursive call
+}
+```
+
+And in our case, we just return the function, without calling it:
+
+```js
+function f(b) {
+  currentSum += b;
+  return f; // <-- does not call itself, returns itself
+}
+```
+
+This `f` will be used in the next call, again return itself, so many times as needed. Then, when used as a number or a string -- the `toString` returns the `currentSum`. We could also use `Symbol.toPrimitive` or `valueOf` here for the conversion.
diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md
new file mode 100644
index 00000000..dc13f260
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md
@@ -0,0 +1,17 @@
+importance: 2
+
+---
+
+# Sum with an arbitrary amount of brackets
+
+Write function `sum` that would work like this:
+
+```js
+sum(1)(2) == 3; // 1 + 2
+sum(1)(2)(3) == 6; // 1 + 2 + 3
+sum(5)(-1)(2) == 6
+sum(6)(-1)(-2)(-3) == 0
+sum(0)(1)(2)(3)(4)(5) == 15
+```
+
+P.S. Hint: you may need to setup custom object to primitive conversion for your function.
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md
new file mode 100644
index 00000000..fb9a5798
--- /dev/null
+++ b/1-js/06-advanced-functions/06-function-object/article.md
@@ -0,0 +1,354 @@
+
+# Function object, NFE
+
+As we already know, functions in JavaScript are values.
+
+Every value in JavaScript has the type. What type of value is a function?
+
+In JavaScript, a function is an object.
+
+A good way to imagine functions is as callable "action objects". We can not only call them, but also treat them as objects: add/remove properties, pass by reference etc.
+
+
+## The "name" property
+
+Function objects contain few sometimes-useable properties.
+
+For instance, a function name is accessible as the "name" property:
+
+```js run
+function sayHi() {
+  alert("Hi");
+}
+
+alert(sayHi.name); // sayHi
+```
+
+What's more funny, the name-assigning logic is smart. It also sticks the right name to function that are used in assignments:
+
+```js run
+let sayHi = function() {
+  alert("Hi");
+}
+
+alert(sayHi.name); // sayHi (works!)
+```
+
+Also works if the assignment is done via a default value:
+
+```js run
+function f(sayHi = function() {}) {
+  alert(sayHi.name); // sayHi (works!)
+}
+
+f();
+```
+
+In the specification, this feature is called a "contextual name". If the function does not provide one, then in an assignment it is figured out from the context.
+
+Object methods have names too:
+
+```js run
+let user = {
+
+  sayHi() {
+    // ...
+  },
+
+  sayBye: function() {
+    // ...
+  }
+
+}
+
+alert(user.sayHi.name); // sayHi
+alert(user.sayBye.name); // sayBye
+```
+
+There's no magic though. There are cases when there's no way to figure out the right name.
+
+Then it's empty, like here:
+
+```js
+// function created inside array
+let arr = [function() {}];
+
+alert( arr[0].name ); // <empty string>
+// the engine has no way to set up the right name, so there is none
+```
+
+In practice, most functions do have a name.
+
+## The "length" property
+
+There is another built-in property "length" that returns the number of function parameters, for instance:
+
+```js run
+function f1(a) {}
+function f2(a, b) {}
+function many(a, b, ...more) {}
+
+alert(f1.length); // 1
+alert(f2.length); // 2
+alert(many.length); // 2
+```
+
+Here we can see that rest parameters are not counted.
+
+The `length` property is sometimes used for introspection in functions that operate on other functions.
+
+For instance, in the code below `ask` function accepts a `question` to ask and an arbitrary number of `handler` functions to call.
+
+When a user answers, it calls the handlers. We can pass two kinds of handlers:
+
+- A zero-argument function, then it is only called for a positive answer.
+- A function with arguments, then it is called in any case and gets the answer.
+
+The idea is that we have a simple no-arguments handler syntax for positive cases (most frequent variant), but allow to provide universal handlers as well.
+
+To call `handlers` the right way, we examine the `length` property:
+
+```js run
+function ask(question, ...handlers) {
+  let isYes = confirm(question);
+
+  for(let handler of handlers) {
+    if (handler.length == 0) {
+      if (isYes) handler();
+    } else {
+      handler(isYes);
+    }
+  }
+
+}
+
+// for positive answer, both handlers are called
+// for negative answer, only the second one
+ask("Question?", () => alert('You said yes'), result => alert(result));
+```
+
+This is a particular case of so-called [polymorphism](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)) -- treating arguments differently depending on their type or, in our case depending on the `length`. The idea does have a use in JavaScript libraries.
+
+## Custom properties
+
+We can also add properties of our own.
+
+Here we add the `counter` property to track the total calls count:
+
+```js run
+function sayHi() {
+  alert("Hi");
+
+  *!*
+  // let's count how many times we run
+  sayHi.counter++;
+  */!*
+}
+sayHi.counter = 0; // initial value
+
+sayHi(); // Hi
+sayHi(); // Hi
+
+alert( `Called ${sayHi.counter} times` ); // Called 2 times
+```
+
+```warn header="A property is not a variable"
+A property assigned to a function like `sayHi.counter = 0` does *not* define a local variable `counter` inside it. In other words, a property `counter` and a variable `let counter` are two unrelated things.
+
+We can treat a function as an object, store properties in it, but that has no effect on its execution. Variables never use function properties and vice versa. These are just parallel words.
+```
+
+Function properties can replace the closure sometimes. For instance, we can rewrite the counter example from the chapter <info:closure> to use a function property:
+
+```js run
+function makeCounter() {
+  // instead of:
+  // let count = 0
+
+  function counter() {
+    return counter.count++;
+  };
+
+  counter.count = 0;
+
+  return counter;
+}
+
+let counter = makeCounter();
+alert( counter() ); // 0
+alert( counter() ); // 1
+```
+
+The `count` is now stored in the function directly, not in its outer Lexical Environment.
+
+Is it worse or better than using the closure?
+
+The main difference is that if the value of `count` lives in an outer variable, then an external code is unable to access it. Only nested functions may modify it. And if it's bound to function, then such thing is possible:
+
+```js run
+function makeCounter() {
+
+  function counter() {
+    return counter.count++;
+  };
+
+  counter.count = 0;
+
+  return counter;
+}
+
+let counter = makeCounter();
+
+*!*
+counter.count = 10;
+alert( counter() ); // 10
+*/!*
+```
+
+So it depends on our aims which variant to choose.
+
+## Named Function Expression
+
+Named Function Expression or, shortly, NFE, is a term for Function Expressions that have a name.
+
+For instance, let's take an ordinary Function Expression:
+
+```js
+let sayHi = function(who) {
+  alert(`Hello, ${who}`);
+};
+```
+
+...And add a name to it:
+
+```js
+let sayHi = function *!*func*/!*(who) {
+  alert(`Hello, ${who}`);
+};
+```
+
+Did we do anything sane here? What's the role of that additional `"func"` name?
+
+First let's note, that we still have a Function Expression. Adding the name `"func"` after `function` did not make it a Function Declaration, because it is still created as a part of an assignment expression.
+
+Adding such a name also did not break anything.
+
+The function is still available as `sayHi()`:
+
+```js run
+let sayHi = function *!*func*/!*(who) {
+  alert(`Hello, ${who}`);
+};
+
+sayHi("John"); // Hello, John
+```
+
+There are two special things about the name `func`:
+
+1. It allows to reference the function from inside itself.
+2. It is not visible outside of the function.
+
+For instance, the function `sayHi` below re-calls itself with `"Guest"` if no `who` is provided:
+
+```js run
+let sayHi = function *!*func*/!*(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    func("Guest"); // use func to re-call itself
+*/!*
+  }
+};
+
+sayHi(); // Hello, Guest
+
+// But this won't work:
+func(); // Error, func is not defined (not visible outside of the function)
+```
+
+Why do we use `func`? Maybe just use `sayHi` for the nested call?
+
+
+Actually, in most cases we can:
+
+```js
+let sayHi = function(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    sayHi("Guest");
+*/!*
+  }
+};
+```
+
+The problem with that code is that the value of `sayHi` may change. The function may go to another variable, and the code will start to give errors:
+
+```js run
+let sayHi = function(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    sayHi("Guest"); // Error: sayHi is not a function
+*/!*
+  }
+};
+
+let welcome = sayHi;
+sayHi = null;
+
+welcome(); // Error, the nested sayHi call doesn't work any more!
+```
+
+That happens because the function takes `sayHi` from its outer lexical environment. There's no local `sayHi`, so the outer variable is used. And at the moment of the call that outer `sayHi` is `null`.
+
+The optional name which we can put into the Function Expression is exactly meant to solve this kind of problems.
+
+Let's use it to fix the code:
+
+```js run
+let sayHi = function *!*func*/!*(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    func("Guest"); // Now all fine
+*/!*
+  }
+};
+
+let welcome = sayHi;
+sayHi = null;
+
+welcome(); // Hello, Guest (nested call works)
+```
+
+Now it works, because the name `"func"` is function-local. It is not taken from outside (and not visible there). The specification guarantees that it always references the current function.
+
+The outer code still has it's variable `sayHi` or `welcome` later. And `func` is an "internal function name", how it calls itself privately.
+
+```smart header="There's no such thing for Function Declaration"
+The "internal name" feature described here is only available for Function Expressions, not to Function Declarations. For Function Declarations, there's just no syntax possibility to add a one more "internal" name.
+
+Sometimes, when we need a reliable internal name, it's the reason to rewrite a Function Declaration to Named Function Expression form.
+```
+
+## Summary
+
+Functions are objects.
+
+Here we covered their properties:
+
+- `name` -- the function name. Exists not only when given in the function definition, but also for assignments and object properties.
+- `length` -- the number of arguments in the function definition. Rest parameters are not counted.
+
+If the function is declared as a Function Expression (not in the main code flow), and it carries the name, then it is called Named Function Expression. The name can be used inside to reference itself, for recursive calls or such.
+
+Also, functions may carry additional properties. Many well-known JavaScript libraries make a great use of this feature.
+
+They create a "main" function and attach many other "helper" functions to it. For instance, the [jquery](https://jquery.com) library creates a function named `$`. The [lodash](https://lodash.com) library creates a function `_`. And then adds `_.clone`, `_.keyBy` and other properties to (see the [docs](https://lodash.com/docs) when you want learn more about them). Actually, they do it to less pollute the global space, so that a single library gives only one global variable. That lowers the chance of possible naming conflicts.
+
+So, a function can do a useful job by itself and also carry a bunch of other functionality in properties.
diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md
new file mode 100644
index 00000000..b44da634
--- /dev/null
+++ b/1-js/06-advanced-functions/07-new-function/article.md
@@ -0,0 +1,139 @@
+
+# The "new Function" syntax
+
+There's one more way to create a function. It's rarely used, but sometimes there's no alternative.
+
+[cut]
+
+## The syntax
+
+The syntax for creating a function:
+
+```js
+let func = new Function('a', 'b', 'return a + b');
+```
+
+All arguments of `new Function` are strings. Parameters go first, and the body is the last.
+
+For instance:
+
+```js run
+let sum = new Function('arg1', 'arg2', 'return arg1 + arg2');
+
+alert( sum(1, 2) ); // 3
+```
+
+If there are no arguments, then there will be only body:
+
+```js run
+let sayHi = new Function('alert("Hello")');
+
+sayHi(); // Hello
+```
+
+The major difference from other ways we've seen -- the function is created literally from a string, that is passed at run time. 
+
+All previous declarations required us, programmers, to write the function code in the script.
+
+But `new Function` allows to turn any string into a function, for example we can receive a new function from the server and then execute it:
+
+```js
+let str = ... receive the code from the server dynamically ...
+
+let func = new Function(str);
+func();
+```
+
+It is used in very specific cases, like when we receive the code from the server, or to dynamically compile a function from a template. The need for that usually arises at advanced stages of development.
+
+## The closure
+
+Usually, a function remembers where it was born in the special property `[[Environment]]`. It references the Lexical Environment from where it's created.
+
+But when a function is created using `new Function`, its `[[Environment]]` references not the current Lexical Environment, but instead the global one.
+
+```js run
+
+function getFunc() {
+  let value = "test";
+
+*!*
+  let func = new Function('alert(value)');
+*/!*
+
+  return func;
+}
+
+getFunc()(); // error: value is not defined
+```
+
+Compare it with the regular behavior:
+
+```js run 
+function getFunc() {
+  let value = "test";
+
+*!*
+  let func = function() { alert(value); };
+*/!*
+
+  return func;
+}
+
+getFunc()(); // *!*"test"*/!*, from the Lexical Environment of getFunc
+```
+
+This special feature of `new Function` looks strange, but appears very useful in practice.
+
+Imagine that we really have to create a function from the string. The code of that function is not known at the time of writing the script (that's why we don't use regular functions), but will be known in the process of execution. We may receive it from the server or from another source.
+
+Our new function needs to interact with the main script.
+
+Maybe we want it to be able to access outer local variables?
+
+But the problem is that before JavaScript is published to production, it's compressed using a *minifier* -- a special program that shrinks code by removing extra comments, spaces and -- what's important, renames local variables into shorter ones.
+
+For instance, if a function has `let userName`, minifier replaces it `let a` (or another letter if this one is occupied), and does it everywhere. That's usually a safe thing to do, because the variable is local, nothing outside the function can access it. And inside the function minifier replaces every mention of it. Minifiers are smart, they analyze the code structure, not just find-and-replace, so that's ok.
+
+...But if `new Function` could access outer variables, then it would be unable to find `userName`.
+
+**Even if we could access outer lexical environment in `new Function`, we would have problems with minifiers.**
+
+The "special feature" of `new Function` saves us from mistakes.
+
+And it enforces better code. If we need to pass something to a function, created by `new Function`, we should pass it explicitly as arguments.
+
+The "sum" function actually does that right:
+
+```js run 
+*!*
+let sum = new Function('a', 'b', ' return a + b; ');
+*/!*
+
+let a = 1, b = 2;
+
+*!*
+// outer values are passed as arguments
+alert( sum(a, b) ); // 3
+*/!*
+```
+
+## Summary
+
+The syntax:
+
+```js
+let func = new Function(arg1, arg2, ..., body);
+```
+
+For historical reasons, arguments can also be given as a comma-separated list. 
+
+These three mean the same:
+
+```js 
+new Function('a', 'b', ' return a + b; '); // basic syntax
+new Function('a,b', ' return a + b; '); // comma-separated
+new Function('a , b', ' return a + b; '); // comma-separated with spaces
+```
+
+Functions created with `new Function`, have `[[Environment]]` referencing the global Lexical Environment, not the outer one. Hence, they can not use outer variables. But that's actually good, because it saves us from errors. Explicit parameters passing is a much better thing architecturally and has no problems with minifiers.
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md
new file mode 100644
index 00000000..13f01deb
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md
@@ -0,0 +1,42 @@
+
+Using `setInterval`:
+
+```js run
+function printNumbers(from, to) {
+  let current = from;
+
+  let timerId = setInterval(function() {
+    alert(current);
+    if (current == to) {
+      clearInterval(timerId);
+    }
+    current++;
+  }, 1000);
+}
+
+// usage:
+printNumbers(5, 10);
+```
+
+Using recursive `setTimeout`:
+
+
+```js run
+function printNumbers(from, to) {
+  let current = from;
+
+  setTimeout(function go() {
+    alert(current);
+    if (current < to) {
+      setTimeout(go, 1000);
+    }
+    current++;
+  }, 1000);
+}
+
+// usage:
+printNumbers(5, 10);
+```
+
+Note that in both solutions, there is an initial delay before the first output. Sometimes we need to add a line to make the first output immediately, that's easy to do.
+
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md
new file mode 100644
index 00000000..87e723c6
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Output every second
+
+Write a function `printNumbers(from, to)` that outputs a number every second, starting from `from` and ending with `to`.
+
+Make two variants of the solution.
+
+1. Using `setInterval`.
+2. Using recursive `setTimeout`.
+
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/solution.md b/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/solution.md
new file mode 100644
index 00000000..42a6a004
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/solution.md
@@ -0,0 +1,23 @@
+
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+let timer = setInterval(count, 0);
+
+function count() {
+
+  for(let j = 0; j < 1000000; j++) {
+    i++;
+  }
+
+  if (i == 1000000000) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+    cancelInterval(timer);
+  }
+
+}
+```
+
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/task.md b/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/task.md
new file mode 100644
index 00000000..3c788170
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/task.md
@@ -0,0 +1,32 @@
+importance: 4
+
+---
+
+# Rewrite setTimeout with setInterval
+
+Here's the function that uses nested `setTimeout` to split a job into pieces.
+
+Rewrite it to `setInterval`:
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  if (i == 1000000000) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+  } else {
+    setTimeout(count, 0);
+  }
+
+  // a piece of heavy job
+  for(let j = 0; j < 1000000; j++) {
+    i++;
+  }
+
+}
+
+count();
+```
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md
new file mode 100644
index 00000000..e652a3b3
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md
@@ -0,0 +1,15 @@
+
+Any `setTimeout` will run only after the current code has finished.
+
+The `i` will be the last one: `100000000`.
+
+```js run
+let i = 0;
+
+setTimeout(() => alert(i), 100); // 100000000
+
+// assume that the time to execute this function is >100ms
+for(let j = 0; j < 100000000; j++) {
+  i++; 
+}
+```
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md
new file mode 100644
index 00000000..faca4600
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md
@@ -0,0 +1,27 @@
+importance: 5
+
+---
+
+# What will setTimeout show?
+
+In the code below there's a `setTimeout` call scheduled, then a heavy calculation is run, that takes more than 100ms to finish.
+
+When the scheduled function will run?
+
+1. After the loop.
+2. Before the loop.
+3. In the beginning of the loop.
+
+
+What `alert` is going to show?
+
+```js
+let i = 0;
+
+setTimeout(() => alert(i), 100); // ?
+
+// assume that the time to execute this function is >100ms
+for(let j = 0; j < 100000000; j++) {
+  i++; 
+}
+```
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md
new file mode 100644
index 00000000..1cb92015
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md
@@ -0,0 +1,464 @@
+# Scheduling: setTimeout and setInterval
+
+We may decide to execute a function not right now, but at a certain time later. That's called "scheduling a call".
+
+There are two methods for it:
+
+- `setTimeout` allows to run a function once after the interval of time.
+- `setInterval` allows to run a function regularly with the interval between the runs.
+
+These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.JS.
+
+
+[cut]
+
+## setTimeout
+
+The syntax:
+
+```js
+let timerId = setTimeout(func|code, delay[, arg1, arg2...])
+```
+
+Parameters:
+
+`func|code`
+: Function or a string of code to execute.
+Usually, that's a function. For historical reasons, a string of code can be passed, but that's not recommended.
+
+`delay`
+: The delay before run, in milliseconds (1000 ms = 1 second).
+
+`arg1`, `arg2`...
+: Arguments for the function (not supported in IE9-)
+
+For instance, this code calls `sayHi()` after one second:
+
+```js run
+function sayHi() {
+  alert('Hello');
+}
+
+*!*
+setTimeout(sayHi, 1000);
+*/!*
+```
+
+With arguments:
+
+```js run
+function sayHi(phrase, who) {
+  alert( phrase + ', ' + who );
+}
+
+*!*
+setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John
+*/!*
+```
+
+If the first argument is a string, then JavaScript creates a function from it.
+
+So, this will also work:
+
+```js run no-beautify
+setTimeout("alert('Hello')", 1000);
+```
+
+But using strings is not recommended, use functions instead of them, like this:
+
+```js run no-beautify
+setTimeout(() => alert('Hello'), 1000);
+```
+
+````smart header="Pass a function, but don't run it"
+Novice developers sometimes make a mistake by adding brackets `()` after the function:
+
+```js
+// wrong!
+setTimeout(sayHi(), 1000);
+```
+That doesn't work, because `setTimeout` expects a reference to function. And here `sayHi()` runs the function, and the *result of its execution* is passed to `setTimeout`. In our case the result of `sayHi()` is `undefined` (the function returns nothing), so nothing is scheduled.
+````
+
+### Canceling with clearTimeout
+
+A call to `setTimeout` returns a "timer identifier" `timerId` that we can use to cancel the execution.
+
+The syntax to cancel:
+
+```js
+let timerId = setTimeout(...);
+clearTimeout(timerId);
+```
+
+In the code below we schedule the function and then cancel it (changed our mind). As a result, nothing happens:
+
+```js run no-beautify
+let timerId = setTimeout(() => alert("never happens"), 1000);
+alert(timerId); // timer identifier
+
+clearTimeout(timerId);
+alert(timerId); // same identifier (doesn't become null after canceling)
+```
+
+As we can see from `alert` output, in a browser the timer identifier is a number. In other environments, that can be something else. For instance, Node.JS returns a timer object with additional methods.
+
+Again, there is no universal specification for these methods, so that's fine.
+
+For browsers, timers are described in the [timers section](https://www.w3.org/TR/html5/webappapis.html#timers) of HTML5 standard.
+
+## setInterval
+
+Method `setInterval` has the same syntax as `setTimeout`:
+
+```js
+let timerId = setInterval(func|code, delay[, arg1, arg2...])
+```
+
+All arguments have the same meaning. But unlike `setTimeout` it runs the function not only once, but regularly after the given interval of time.
+
+To stop further calls, we should call `clearInterval(timerId)`.
+
+The following example will show the message every 2 seconds. After 5 seconds, the output is stopped:
+
+```js run
+// repeat with the interval of 2 seconds
+let timerId = setInterval(() => alert('tick'), 2000);
+
+// after 5 seconds stop
+setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);
+```
+
+```smart header="Modal windows freeze time in Chrome/Opera/Safari"
+In browsers IE and Firefox the internal timer continues "ticking" while showing `alert/confirm/prompt`, but in Chrome, Opera and Safari the internal timer becomes "frozen".
+
+So if you run the code above and don't dismiss the `alert` window for some time, then in Firefox/IE next `alert` will be shown immediately as you do it (2 seconds passed from the previous invocation), and in Chrome/Opera/Safari -- after 2 more seconds (timer did not tick during the `alert`).
+```
+
+## Recursive setTimeout
+
+There are two ways of running something regularly.
+
+One is `setInterval`. The other one is a recursive `setTimeout`, like this:
+
+```js
+/** instead of:
+let timerId = setInterval(() => alert('tick'), 2000);
+*/
+
+let timerId = setTimeout(function tick() {
+  alert('tick');
+*!*
+  timerId = setTimeout(tick, 2000); // (*)
+*/!*
+}, 2000);
+```
+
+The `setTimeout` above schedules next call right at the end of the current one `(*)`.
+
+Recursive `setTimeout` is more flexible method than `setInterval`. This way the next call may be scheduled differently, depending on the results of the current one.
+
+For instance, we need to write a service that each 5 seconds sends a request to server asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds...
+
+Here's the pseudocode:
+```js
+let delay = 5000;
+
+let timerId = setTimeout(function request() {
+  ...send request...
+
+  if (request failed due to server overload) {
+    // increase the interval to the next run
+    delay *= 2;
+  }
+
+  timerId = setTimeout(tick, delay);
+
+}, delay);
+```
+
+
+And if we regulary have CPU-hungry tasks, then we can measure the time taken by the execution and plan the next call sooner or later.
+
+**Recursive `setTimeout` guarantees a delay between the executions, `setInterval` -- does not.**
+
+Let's compare two code fragments. The first one uses `setInterval`:
+
+```js
+let i = 1;
+setInterval(function() {
+  func(i);
+}, 100);
+```
+
+The second one uses recursive `setTimeout`:
+
+```js
+let i = 1;
+setTimeout(function run() {
+  func(i);
+  setTimeout(run, 100);
+}, 100);
+```
+
+For `setInterval` the internal scheduler will run `func(i)` every 100ms:
+
+![](setinterval-interval.png)
+
+Did you notice?...
+
+**The real delay between `func` calls for `setInterval` is less than in the code!**
+
+That's natural, because the time taken by `func` execution "consumes" a part of the interval.
+
+It is possible that `func` execution turns out to be longer than we expected and takes more than 100ms.
+
+In this case the engine waits for `func` to complete, then checks the scheduler and if the time is up, then runs it again *immediately*.
+
+In the edge case, if the function always executes longer than `delay` ms, then the calls will happen without pause at all.
+
+And here is the picture for recursive `setTimeout`:
+
+![](settimeout-interval.png)
+
+**Recursive `setTimeout` guarantees the fixed delay (here 100ms).**
+
+That's because a new call is planned at the end of the previous one.
+
+````smart header="Garbage collection"
+When a function is passed in `setInterval/setTimeout`, an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it.
+
+```js
+// the function stays in memory until the scheduler calls it
+setTimeout(function() {...}, 100);
+```
+
+For `setInterval` the function stays in memory until `cancelInterval` is called.
+
+There's a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don't need the scheduled function any more, it's better to cancel it, even if it's very small.
+````
+
+## setTimeout(...,0)
+
+There's a special use case: `setTimeout(func, 0)`.
+
+This schedules the execution of `func` as soon as possible. But scheduler will invoke it only after the current code is complete.
+
+So the function is scheduled to run "right after" the current code. In other words, *asynchronously*.
+
+For instance, this outputs "Hello", then immediately "World":
+
+```js run
+setTimeout(() => alert("World"), 0);
+
+alert("Hello");
+```
+
+The first line "puts the call into calendar after 0ms". But the scheduler will only "check the calendar" after the current code is complete, so `"Hello"` is first, and `"World"` -- after it.
+
+### Splitting CPU-hungry tasks
+
+There's a trick to split CPU-hungry task using `setTimeout`.
+
+For instance, syntax highlighting script (used to colorize code examples on this page) is quite CPU-heavy. To hightlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a big text that takes a lot. It may even cause the browser to "hang", that's unacceptable.
+
+So we can split the long text to pieces. First 100 lines, then plan another 100 lines using `setTimeout(...,0)`, and so on.
+
+For clarity, let's take a simpler example for consideration. We have a function to count from `1` to `1000000000`.
+
+If you run it, the CPU will hang. For server-side JS that's clearly noticeable, and if you are running it in-browser, then try to click other buttons on the page -- you'll see that whole JavaScript actually is paused, no other actions work until it finishes.
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // do a heavy job
+  for(let j = 0; j < 1e9; j++) {
+    i++;
+  }
+
+  alert("Done in " + (Date.now() - start) + 'ms');
+}
+
+count();
+```
+
+The browser may even show "the script takes too long" warning (but hopefully won't, the number is not very big).
+
+Let's split the job using the nested `setTimeout`:
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // do a piece of the heavy job (*)
+  do {
+    i++;
+  } while (i % 1e6 != 0);
+
+  if (i == 1e9) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+  } else {
+    setTimeout(count, 0); // schedule the new call (**)
+  }
+
+}
+
+count();
+```
+
+Now the browser UI is fully functional during the "counting" process.
+
+We do a part of the job `(*)`:
+
+1. First run: `i=1...1000000`.
+2. Second run: `i=1000001..2000000`.
+3. ...and so on, the `while` checks if `i` is evenly divided by `100000`.
+
+Then the next call is scheduled in `(*)` if we're not done yet.
+
+Pauses between `count` executions provide just enough "breath" for the JavaScript engine to do something else, to react on other user actions.
+
+The notable thing is that both variants: with and without splitting the job by `setInterval` -- are comparable in speed. There's no much difference in the overall counting time.
+
+To make them closer let's make an improvement.
+
+We'll move the scheduling in the beginning of the `count()`:
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // move the scheduling at the beginning
+  if (i < 1e9 - 1e6) {
+    setTimeout(count, 0); // schedule the new call
+  }
+
+  do {
+    i++;
+  } while (i % 1e6 != 0);
+
+  if (i == 1e9) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+  }
+
+}
+
+count();
+```
+
+Now when we start to `count()` and know that we'll need to `count()` more -- we schedule that immediately, before doing the job.
+
+If you run it, easy to notice that it takes significantly less time.
+
+````smart header="Minimal delay of nested timers in-browser"
+In the browser, there's a limitation of how often nested timers can run. The [HTML5 standard](https://www.w3.org/TR/html5/webappapis.html#timers) says: "after five nested timers..., the interval is forced to be at least four milliseconds.".
+
+Let's demonstrate what it means by the example below. The `setTimeout` call in it re-schedules itself after `0ms`. Each call remembers the real time from the previous one in the `times` array. What the real delays look like? Let's see:
+
+```js run
+let start = Date.now();
+let times = [];
+
+setTimeout(function run() {
+  times.push(Date.now() - start); // remember delay from the previous call
+
+  if (start + 100 < Date.now()) alert(times); // show the delays after 100ms
+  else setTimeout(run, 0); // else re-schedule
+}, 0);
+
+// an example of the output:
+// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100
+```
+
+First timers run immediately (just as written in the spec), and then the delay comes into play and we see `9, 15, 20, 24...`.
+
+That limitation comes from ancient times and many scripts rely on it, so it exists for historical reasons.
+
+For server-side JavaScript, that limitation does not exist, and there exist other ways to schedule an immediate asynchronous job, like [process.nextTick](https://nodejs.org/api/process.html) and [setImmediate](https://nodejs.org/api/timers.html) for Node.JS. So the notion is browser-specific only.
+````
+
+### Allowing the browser to render
+
+Another benefit for in-browser scripts is that they can show a progress bar or something to the user. That's because the browser usually does all "repainting" after the script is complete.
+
+So if we do a single huge function then even if it changes something, the changes are not reflected in the document till it finishes.
+
+Here's the demo:
+```html run
+<div id="progress"></div>
+
+<script>
+  let i = 0;
+
+  function count() {
+    for(let j = 0; j < 1e6; j++) {
+      i++;
+      // put the current i into the <div>
+      // (we'll talk more about innerHTML in the specific chapter, should be obvious here)
+      progress.innerHTML = i;
+    }
+  }
+
+  count();
+</script>
+```
+
+If you run it, the changes to `i` will show up after the whole count finishes.
+
+And if we use `setTimeout` to split it into pieces then changes are applied in-between the runs, so this looks better:
+
+```html run
+<div id="progress"></div>
+
+<script>
+  let i = 0;
+
+  function count() {
+
+    // do a piece of the heavy job (*)
+    do {
+      i++;
+      progress.innerHTML = i;
+    } while (i % 1e3 != 0);
+
+    if (i < 1e9) {
+      setTimeout(count, 0);
+    }
+
+  }
+
+  count();
+</script>
+```
+
+Now the `<div>` shows increasing values of `i`.
+
+## Summary
+
+- Methods `setInterval(func, delay, ...args)` and `setTimeout(func, delay, ...args)` allow to run the `func` regularly/once after `delay` milliseconds.
+- To cancel the execution, we should call `clearInterval/clearTimeout` with the value returned by `setInterval/setTimeout`.
+- Nested `setTimeout` calls is a more flexible alternative to `setInterval`. Also they can guarantee the minimal time *between* the executions.
+- Zero-timeout scheduling `setTimeout(...,0)` is used to schedule the call "as soon as possible, but after the current code is complete".
+
+Some use cases of `setTimeout(...,0)`:
+- To split CPU-hungry tasks into pieces, so that the script doesn't "hang"
+- To let the browser do something else while the process is going on (paint the progress bar).
+
+Please note that all scheduling methods do not *guarantee* the exact delay. We should not rely on that in the scheduled code.
+
+For example, the in-browser timer may slow down for a lot of reasons:
+- The CPU is overloaded.
+- The browser tab is in the background mode.
+- The laptop is on battery.
+
+All that may decrease the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and settings.
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png
new file mode 100644
index 00000000..060b2c29
Binary files /dev/null and b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png
new file mode 100644
index 00000000..4071849c
Binary files /dev/null and b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png
new file mode 100644
index 00000000..6c473a33
Binary files /dev/null and b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png
new file mode 100644
index 00000000..dd45e324
Binary files /dev/null and b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js
new file mode 100644
index 00000000..9ef50370
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js
@@ -0,0 +1,11 @@
+function spy(func) {
+
+  function wrapper(...args) {
+    wrapper.calls.push(args);
+    return func.apply(this, arguments);
+  }
+
+  wrapper.calls = [];
+
+  return wrapper;
+}
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js
new file mode 100644
index 00000000..38da0105
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js
@@ -0,0 +1,5 @@
+function spy(func) {
+  // your code
+}
+
+
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js
new file mode 100644
index 00000000..7e84f3c9
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js
@@ -0,0 +1,44 @@
+describe("spy", function() {
+  it("records calls into its property", function() {
+    function work() {}
+
+    work = spy(work);
+    assert.deepEqual(work.calls, []);
+
+    work(1, 2);
+    assert.deepEqual(work.calls, [
+      [1, 2]
+    ]);
+
+    work(3, 4);
+    assert.deepEqual(work.calls, [
+      [1, 2],
+      [3, 4]
+    ]);
+  });
+
+  it("transparently wraps functions", function() {
+
+    let sum = sinon.spy((a, b) => a + b);
+
+    let wrappedSum = spy(sum);
+
+    assert.equal(wrappedSum(1, 2), 3);
+    assert(spy.calledWith(1, 2));
+  });
+
+
+  it("transparently wraps methods", function() {
+
+    let calc = {
+      sum: sinon.spy((a, b) => a + b)
+    };
+
+    calc.wrappedSum = spy(calc.sum);
+
+    assert.equal(calculator.wrappedSum(1, 2), 3);
+    assert(spy.calledWith(1, 2));
+    assert(spy.calledOn(calculator));
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md
new file mode 100644
index 00000000..4a79d3e1
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md
@@ -0,0 +1 @@
+Here we can use `log.push(args)` to store all arguments in the log and `f.apply(this, args)` to forward the call.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md
new file mode 100644
index 00000000..e4a30cb8
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md
@@ -0,0 +1,30 @@
+importance: 5
+
+---
+
+# Spy decorator
+
+Create a decorator `spy(func)` that should return a wrapper that saves all calls to function in its `calls` property.
+
+Every call is saved as an array of arguments.
+
+For instance:
+
+```js
+function work(a, b) {
+  alert( a + b ); // work is an arbitrary function or method
+}
+
+*!*
+work = spy(work);
+*/!*
+
+work(1, 2); // 3
+work(4, 5); // 9
+
+for(let args of work.calls) {
+  alert( 'call:' + args.join() ); // "call:1,2", "call:4,5"
+}
+```
+
+P.S. That decorator is sometimes useful for unit-testing, it's advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js
new file mode 100644
index 00000000..127cff98
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js
@@ -0,0 +1,7 @@
+function delay(f, ms) {
+
+  return function() {
+    setTimeout(() => f.apply(this, arguments), ms);
+  };
+
+};
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js
new file mode 100644
index 00000000..d9295da5
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js
@@ -0,0 +1,46 @@
+describe("delay", function() {
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+  it("calls the function after the specified timeout", function() {
+    let start = Date.now();
+
+    function f(x) {
+      assert.equal(Date.now() - start, 1000);
+    }
+    f = sinon.spy(f);
+
+    let f1000 = delay(f, 1000);
+    f1000("test");
+    this.clock.tick(2000);
+    assert(f.calledOnce, 'calledOnce check fails');
+  });
+
+  it("passes arguments and this", function() {
+    let start = Date.now();
+    let user = {
+      sayHi: function(phrase, who) {
+        assert.equal(this, user);
+        assert.equal(phrase, "Hello");
+        assert.equal(who, "John");
+        assert.equal(Date.now() - start, 1500);
+      }
+    };
+
+    user.sayHi = sinon.spy(user.sayHi);
+
+    let spy = user.sayHi;
+    user.sayHi = delay(user.sayHi, 1500);
+
+    user.sayHi("Hello", "John");
+
+    this.clock.tick(2000);
+
+    assert(spy.calledOnce, 'calledOnce check failed');
+  });
+});
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
new file mode 100644
index 00000000..44b5024e
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
@@ -0,0 +1,29 @@
+The solution:
+
+```js
+function delay(f, ms) {
+
+  return function() {
+    setTimeout(() => f.apply(this, arguments), ms);
+  };
+
+}
+```
+
+Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper.
+
+If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (in-browser), so we'd need to write a bit more code to pass them from the wrapper:
+
+```js
+function delay(f, ms) {
+
+  // added variables to pass this and arguments from the wrapper inside setTimeout
+  return function(...args) {
+    let savedThis = this;
+    setTimeout(function() {
+      f.apply(savedThis, args);
+    }, ms);
+  };
+
+}
+```
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md
new file mode 100644
index 00000000..c04c68d7
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md
@@ -0,0 +1,26 @@
+importance: 5
+
+---
+
+# Delaying decorator
+
+Create a decorator `delay(f, ms)` that delays each call of `f` by `ms` milliseconds.
+
+For instance:
+
+```js
+function f(x) {
+  alert(x);
+}
+
+// create wrappers
+let f1000 = delay(f, 1000);
+let f1500 = delay(f, 1500);
+
+f1000("test"); // shows "test" after 1000ms
+f1500("test"); // shows "test" after 1500ms
+```
+
+In other words, `delay(f, ms)` returns a "delayed by `ms`" variant of `f`.
+
+In the code above, `f` is a function of a single argument, but your solution should pass all arguments and the context `this`.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js
new file mode 100644
index 00000000..065a77d1
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js
@@ -0,0 +1,15 @@
+function debounce(f, ms) {
+
+  let isCooldown = false;
+
+  return function() {
+    if (isCooldown) return;
+
+    f.apply(this, arguments);
+
+    isCooldown = true;
+
+    setTimeout(() => isCooldown = false, ms);
+  };
+
+}
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js
new file mode 100644
index 00000000..16dc171e
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js
@@ -0,0 +1,41 @@
+describe("debounce", function() {
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+  it("calls the function at maximum once in ms milliseconds", function() {
+    let log = '';
+
+    function f(a) {
+      log += a;
+    }
+
+    f = debounce(f, 1000);
+
+    f(1); // runs at once
+    f(2); // ignored
+
+    setTimeout(() => f(3), 100);  // ignored (too early)
+    setTimeout(() => f(4), 1100); // runs (1000 ms passed)
+    setTimeout(() => f(5), 1500); // ignored (less than 1000 ms from the last run)
+
+    this.clock.tick(5000);
+    assert.equal(log, "14");
+  });
+
+  it("keeps the context of the call", function() {
+    let obj = {
+      f() {
+        assert.equal(this, obj);
+      }
+    };
+
+    obj.f = debounce(obj.f, 1000);
+    obj.f("test");
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
new file mode 100644
index 00000000..1516aca3
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
@@ -0,0 +1,30 @@
+
+
+```js run no-beautify
+function debounce(f, ms) {
+
+  let isCooldown = false;
+
+  return function() {
+    if (isCooldown) return;
+
+    f.apply(this, arguments);
+
+    isCooldown = true;
+
+    setTimeout(() => isCooldown = false, ms);
+  };
+
+}
+```
+
+The call to `debounce` returns a wrapper. There may be two states:
+
+- `isCooldown = false` -- ready to run.
+- `isCooldown = true` -- waiting for the timeout.
+
+In the first call `isCooldown` is falsy, so the call proceeds, and the state changes to `true`.
+
+While `isCooldown` is true, all other calls are ignored.
+
+Then `setTimeout` reverts it to `false` after the given delay.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
new file mode 100644
index 00000000..466c6bc3
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Debounce decorator
+
+The result of `debounce(f, ms)` decorator should be a wrapper that passes the call to `f` at maximum once per `ms` milliseconds.
+
+In other words, when we call a "debounced" function, it guarantees that all other future in the closest `ms` milliseconds will be ignored.
+
+For instance:
+
+```js no-beautify
+let f = debounce(alert, 1000);
+
+f(1); // runs immediately
+f(2); // ignored
+
+setTimeout( () => f(3), 100); // ignored ( only 100 ms passed )
+setTimeout( () => f(4), 1100); // runs
+setTimeout( () => f(5), 1500); // ignored (less than 1000 ms from the last run)
+```
+
+In practice `debounce` is useful for functions that retrieve/update something when we know that nothing new can be done in such a short period of time, so it's better not to waste resources.
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js
new file mode 100644
index 00000000..8071be9d
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js
@@ -0,0 +1,34 @@
+function throttle(func, ms) {
+
+  let isThrottled = false,
+    savedArgs,
+    savedThis;
+
+  function wrapper() {
+
+    if (isThrottled) {
+      // memo last arguments to call after the cooldown
+      savedArgs = arguments;
+      savedThis = this;
+      return;
+    }
+
+    // otherwise go to cooldown state
+    func.apply(this, arguments);
+
+    isThrottled = true;
+
+    // plan to reset isThrottled after the delay
+    setTimeout(function() {
+      isThrottled = false;
+      if (savedArgs) {
+        // if there were calls, savedThis/savedArgs have the last one
+        // recursive call runs the function and sets cooldown again
+        wrapper.apply(savedThis, savedArgs);
+        savedArgs = savedThis = null;
+      }
+    }, ms);
+  }
+
+  return wrapper;
+}
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js
new file mode 100644
index 00000000..5339c8d1
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js
@@ -0,0 +1,47 @@
+describe("throttle(f, 1000)", function() {
+  let f1000;
+  let log = "";
+
+  function f(a) {
+    log += a;
+  }
+
+  before(function() {
+    f1000 = throttle(f, 1000);
+    this.clock = sinon.useFakeTimers();
+  });
+
+  it("the first call runs now", function() {
+    f1000(1); // runs now
+    assert.equal(log, "1");
+  });
+
+  it("then calls are ignored till 1000ms when the last call works", function() {
+    f1000(2); // (throttling - less than 1000ms since the last run)
+    f1000(3); // (throttling - less than 1000ms since the last run)
+    // after 1000 ms f(3) call is scheduled
+
+    assert.equal(log, "1"); // right now only the 1st call done
+
+    this.clock.tick(1000); // after 1000ms...
+    assert.equal(log, "13"); // log==13, the call to f1000(3) is made
+  });
+
+  it("the third call waits 1000ms after the second call", function() {
+    this.clock.tick(100);
+    f1000(4); // (throttling - less than 1000ms since the last run)
+    this.clock.tick(100);
+    f1000(5); // (throttling - less than 1000ms since the last run)
+    this.clock.tick(700);
+    f1000(6); // (throttling - less than 1000ms since the last run)
+
+    this.clock.tick(100); // now 100 + 100 + 700 + 100 = 1000ms passed
+
+    assert.equal(log, "136"); // the last call was f(6)
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
new file mode 100644
index 00000000..372ebedd
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
@@ -0,0 +1,39 @@
+```js
+function throttle(func, ms) {
+
+  let isThrottled = false,
+    savedArgs,
+    savedThis;
+
+  function wrapper() {
+
+    if (isThrottled) { // (2)
+      savedArgs = arguments;
+      savedThis = this;
+      return;
+    }
+
+    func.apply(this, arguments); // (1)
+
+    isThrottled = true;
+
+    setTimeout(function() {
+      isThrottled = false; // (3)
+      if (savedArgs) {
+        wrapper.apply(savedThis, savedArgs);
+        savedArgs = savedThis = null;
+      }
+    }, ms);
+  }
+
+  return wrapper;
+}
+```
+
+A call to `throttle(func, ms)` returns `wrapper`.
+
+1. During the first call, the `wrapper` just runs `func` and sets the cooldown state (`isThrottled = true`).
+2. In this state all calls memorized in `savedArgs/savedThis`. Please note that both the context and the arguments are equally important and should be memorized. We need them simultaneously to reproduce the call.
+3. ...Then after `ms` milliseconds pass, `setTimeout` triggers. The cooldown state is removed (`isThrottled = false`). And if we had ignored calls, then `wrapper` is executed with last memorized arguments and context.
+
+The 3rd step runs not `func`, but `wrapper`, because we not only need to execute `func`, but once again enter the cooldown state and setup the timeout to reset it.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
new file mode 100644
index 00000000..4af0d54c
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
@@ -0,0 +1,48 @@
+importance: 5
+
+---
+
+# Throttle decorator
+
+Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper, passing the call to `f` at maximum once per `ms` milliseconds. Those calls that fall into the "cooldown" period, are ignored.
+
+**The difference with `debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
+
+Let's check the real-life application to better understand that requirement and to see where it comes from.
+
+**For instance, we want to track mouse movements.**
+
+In browser we can setup a function to run at every mouse micro-movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
+
+**The tracking function should update some information on the web-page.**
+
+Updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in making it more often than once per 100ms.
+
+So we'll assign `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but `update()` will be called at maximum once per 100ms.
+
+Visually, it will look like this:
+
+1. For the first mouse movement the decorated variant passes the call to `update`. That's important, the user sees our reaction to his move immediately.
+2. Then as the mouse moves on, until `100ms` nothing happens. The decorated variant ignores calls.
+3. At the end of `100ms` -- one more `update` happens with the last coordinates. 
+4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` runs with last coordinates. So, perhaps the most important, the final mouse coordinates are processed.
+
+A code example:
+
+```js
+function f(a) {
+  console.log(a)
+};
+
+// f1000 passes calls to f at maximum once per 1000 ms
+let f1000 = throttle(f, 1000);
+
+f1000(1); // shows 1
+f1000(2); // (throttling, 1000ms not out yet)
+f1000(3); // (throttling, 1000ms not out yet)
+
+// when 1000 ms time out...
+// ...outputs 3, intermediate value 2 was ignored
+```
+
+P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
new file mode 100644
index 00000000..707bbf58
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -0,0 +1,461 @@
+# Decorators and forwarding, call/apply
+
+JavaScript gives exceptional flexibility when dealing with functions. They can be passed around, used as objects, and now we'll see how to *forward* calls between them and *decorate* them.
+
+[cut]
+
+## Transparent caching
+
+Let's say we have a function `slow(x)` which is CPU-heavy, but its results are stable. In other words, for the same `x` it always returns the same result.
+
+If the function is called often, we may want to cache (remember) the results for different `x` to avoid spending extra-time on recalculations.
+
+But instead of adding that functionality into `slow()` we'll create a wrapper. As we'll see, there are many benefits of doing so.
+
+Here's the code, and explanations follow:
+
+```js run
+function slow(x) {
+  // there can be a heavy CPU-intensive job here
+  alert(`Called with ${x}`);
+  return x;
+}
+
+function cachingDecorator(func) {
+  let cache = new Map();
+
+  return function(x) {
+    if (cache.has(x)) { // if the result is in the map
+      return cache.get(x); // return it
+    }
+
+    let result = func(x); // otherwise call func
+
+    cache.set(x, result); // and cache (remember) the result
+    return result;
+  };
+}
+
+slow = cachingDecorator(slow);
+
+alert( slow(1) ); // slow(1) is cached
+alert( "Again: " + slow(1) ); // the same
+
+alert( slow(2) ); // slow(2) is cached
+alert( "Again: " + slow(2) ); // the same as the previous line
+```
+
+In the code above `cachingDecorator` is a *decorator*: a special function that takes another function and alters its behavior.
+
+The idea is that we can call `cachingDecorator` for any function, and it will return the caching wrapper. That's great, because we can have many functions that could use such a feature, and all we need to do is to apply `cachingDecorator` to them.
+
+By separating caching from the main function code we also keep the main code simpler.
+
+Now let's get into details of how it works.
+
+The result of `cachingDecorator(func)` is a "wrapper": `function(x)` that "wraps" the call of `func(x)` into caching logic:
+
+![](decorator-makecaching-wrapper.png)
+
+As we can see, the wrapper returns the result of `func(x)` "as is". From an outside code, the wrapped `slow` function still does the same. It just got a caching aspect added to its behavior.
+
+To summarize, there are several benefits of using a separate `cachingDecorator` instead of altering the code of `slow` itself:
+
+- The `cachingDecorator` is reusable. We can apply it to another function.
+- The caching logic is separate, it did not increase the complexity of `slow` itself (if there were any).
+- We can combine multiple decorators if needed (other decorators will follow).
+
+
+## Using "func.call" for the context
+
+The caching decorator mentioned above is not suited to work with object methods.
+
+For instance, in the code below `user.format()` stops working after the decoration:
+
+```js run
+// we'll make worker.slow caching
+let worker = {
+  someMethod() {
+    return 1;
+  },
+
+  slow(x) {
+    // actually, there can be a scary CPU-heavy task here  
+    alert("Called with " + x);
+    return x * this.someMethod(); // (*)
+  }
+};
+
+// same code as before
+function cachingDecorator(func) {
+  let cache = new Map();
+  return function(x) {
+    if (cache.has(x)) {
+      return cache.get(x);
+    }
+*!*
+    let result = func(x); // (**)
+*/!*
+    cache.set(x, result);
+    return result;
+  };
+}
+
+alert( worker.slow(1) ); // the original method works
+
+worker.slow = cachingDecorator(worker.slow); // now make it caching
+
+*!*
+alert( worker.slow(2) ); // Whoops! Error: Cannot read property 'someMethod' of undefined
+*/!*
+```
+
+The error occurs in the line `(*)` that tries to access `this.someMethod` and fails. Can you see why?
+
+The reason is that the wrapper calls the original function as `func(x)` in the line `(**)`. And, when called like that, the function gets `this = undefined`.
+
+We would observe a similar symptom if we tried to run:
+
+```js
+let func = worker.slow;
+func(2);
+```
+
+So, the wrapper passes the call to the original method, but without the context `this`. Hence the error.
+
+Let's fix it.
+
+There's a special built-in function method [func.call(context, ...args)](mdn:js/Function/call) that allows to call a function explicitly setting `this`.
+
+The syntax is:
+
+```js
+func.call(context, arg1, arg2, ...)
+```
+
+It runs `func` providing the first argument as `this`, and the next as the arguments.
+
+To put it simple, these two calls do almost the same:
+```js
+func(1, 2, 3);
+func.call(obj, 1, 2, 3)
+```
+
+They both call `func` with arguments `1`, `2` and `3`. The only difference is that `func.call` also sets `this` to `obj`.
+
+As an example, in the code below we call `sayHi` in the context of different objects: `sayHi.call(user)` runs `sayHi` providing `this=user`, and the next line sets `this=admin`:
+
+```js run
+function sayHi() {
+  alert(this.name);
+}
+
+let user = { name: "John" };
+let admin = { name: "Admin" };
+
+// use call to pass different objects as "this"
+sayHi.call( user ); // John
+sayHi.call( admin ); // Admin
+```
+
+And here we use `call` to call `say` with the given context and phrase:
+
+
+```js run
+function say(phrase) {
+  alert(this.name + ': ' + phrase);
+}
+
+let user = { name: "John" };
+
+// user becomes this, and "Hello" becomes the first argument
+say.call( user, "Hello" ); // John: Hello
+```
+
+
+In our case, we can use `call` in the wrapper to pass the context to the original function:
+
+
+```js run
+let worker = {
+  someMethod() {
+    return 1;
+  },
+
+  slow(x) {
+    alert("Called with " + x);
+    return x * this.someMethod(); // (*)
+  }
+};
+
+function cachingDecorator(func) {
+  let cache = new Map();
+  return function(x) {
+    if (cache.has(x)) {
+      return cache.get(x);
+    }
+*!*
+    let result = func.call(this, x); // "this" is passed correctly now
+*/!*
+    cache.set(x, result);
+    return result;
+  };
+}
+
+worker.slow = cachingDecorator(worker.slow); // now make it caching
+
+alert( worker.slow(2) ); // works
+alert( worker.slow(2) ); // works, doesn't call the original (cached)
+```
+
+Now everything is fine.
+
+To make it all clear, let's see more deeply how `this` is passed along:
+
+1. After the decoration `worker.slow` is now the wrapper `function (x) { ... }`.
+2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot).
+3. Inside the wrapper, assuming the result is not yet cached, `func.call(this, x)` passes the current `this` (`=worker`) and the current argument (`=2`) to the original method.
+
+## Going multi-argument with "func.apply"
+
+Now let's make `cachingDecorator` even more universal. Till now it was working only with single-argument functions.
+
+Now how to cache the multi-argument `worker.slow` method?
+
+```js
+let worker = {
+  slow(min, max) {
+    return min + max; // scary CPU-hogger is assumed
+  }
+};
+
+// should remember same-argument calls
+worker.slow = cachingDecorator(worker.slow);
+```
+
+We have two tasks to solve here.
+
+First is how to use both arguments `min` and `max` for the key in `cache` map. Previously, for a single argument `x` we could just `cache.set(x, result)` to save the result and `cache.get(x)` to retrieve it. But now we need to remember the result for a *combination of arguments* `(min,max)`. The native `Map` takes single value only as the key.
+
+There are many solutions possible:
+
+1. Implement a new (or use a third-party) map-like data structure that is more versatile and allows multi-keys.
+2. Use nested maps: `cache.set(min)` will be a `Map` that stores the pair `(max, result)`. So we can get `result` as `cache.get(min).get(max)`.
+3. Join two values into one. In our particular case we can just use a string `"min,max"` as the `Map` key. For flexibility, we can allow to provide a *hashing function* for the decorator, that knows how to make a one value from many.
+
+
+For many practical applications, the 3rd variant is good enough, so we'll stick to it.
+
+The second task to solve is how to pass many arguments to `func`. Currently, the wrapper `function(x)` assumes a single argument, and `func.call(this, x)` passes it.
+
+Here we can use another built-in method [func.apply](mdn:js/Function/apply).
+
+The syntax is:
+
+```js
+func.apply(context, args)
+```
+
+It runs the `func` setting `this=context` and using an array-like object `args` as the list of arguments.
+
+
+For instance, these two calls are almost the same:
+
+```js
+func(1, 2, 3);
+func.apply(context, [1, 2, 3])
+```
+
+Both run `func` giving it arguments `1,2,3`. But `apply` also sets `this=context`.
+
+For instance, here `say` is called with `this=user` and `messageData` as a list of arguments:
+
+```js run
+function say(time, phrase) {
+  alert(`[${time}] ${this.name}: ${phrase}`);
+}
+
+let user = { name: "John" };
+
+let messageData = ['10:00', 'Hello']; // become time and phrase
+
+*!*
+// user becomes this, messageData is passed as a list of arguments (time, phrase)
+say.apply(user, messageData); // [10:00] John: Hello (this=user)
+*/!*
+```
+
+The only syntax difference between `call` and `apply` is that `call` expects a list of arguments, while `apply` takes an array-like object with them.
+
+We already know the spread operator `...` from the chapter <info:rest-parameters-spread-operator> that can pass an array (or any iterable) as a list of arguments. So if we use it with `call`, we can achieve almost the same as `apply`.
+
+These two calls are almost equivalent:
+
+```js
+let args = [1, 2, 3];
+
+*!*
+func.call(context, ...args); // pass an array as list with spread operator
+func.apply(context, args);   // is same as using apply
+*/!*
+```
+
+If we look more closely, there's a minor difference between such uses of `call` and `apply`.
+
+- The spread operator `...` allows to pass *iterable* `args` as the list to `call`.
+- The `apply` accepts only *array-like* `args`.
+
+So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
+
+And if `args` is both iterable and array-like, like a real array, then we technically could use any of them, but `apply` will probably be faster, because it's a single operation. Most JavaScript engines internally optimize is better than a pair `call + spread`.
+
+One of the most important uses of `apply` is passing the call to another function, like this:
+
+```js
+let wrapper = function() {
+  return anotherFunction.apply(this, arguments);
+};
+```
+
+That's called *call forwarding*. The `wrapper` passes everything it gets: the context `this` and arguments to `anotherFunction` and returns back its result.
+
+When an external code calls such `wrapper`, it is undistinguishable from the call of the original function.
+
+Now let's bake it all into the more powerful `cachingDecorator`:
+
+```js run
+let worker = {
+  slow(min, max) {
+    alert(`Called with ${min},${max}`);
+    return min + max;
+  }
+};
+
+function cachingDecorator(func, hash) {
+  let cache = new Map();
+  return function() {
+*!*
+    let key = hash(arguments); // (*)
+*/!*
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+
+*!*
+    let result = func.apply(this, arguments); // (**)
+*/!*
+
+    cache.set(key, result);
+    return result;
+  };
+}
+
+function hash(args) {
+  return args[0] + ',' + args[1];
+}
+
+worker.slow = cachingDecorator(worker.slow, hash);
+
+alert( worker.slow(3, 5) ); // works
+alert( "Again " + worker.slow(3, 5) ); // same (cached)
+```
+
+Now the wrapper operates with any number of arguments.
+
+There are two changes:
+
+- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions.
+- Then `(**)` uses `func.apply` to pass both the context and all arguments the wrapper got (no matter how many) to the original function.
+
+
+## Borrowing a method [#method-borrowing]
+
+Now let's make one more minor improvement in the hashing function:
+
+```js
+function hash(args) {
+  return args[0] + ',' + args[1];
+}
+```
+
+As of now, it works only on two arguments. It would be better if it could glue any number of `args`.
+
+The natural solution would be to use [arr.join](mdn:js/Array/join) method:
+
+```js
+function hash(args) {
+  return args.join();
+}
+```
+
+...Unfortunately, that won't work. Because we are calling `hash(arguments)` and `arguments` object is both iterable and array-like, but not a real array.
+
+So calling `join` on it would fail, as we can see below:
+
+```js run
+function hash() {
+*!*
+  alert( arguments.join() ); // Error: arguments.join is not a function
+*/!*
+}
+
+hash(1, 2);
+```
+
+Still, there's an easy way to use array join:
+
+```js run
+function hash() {
+*!*
+  alert( [].join.call(arguments) ); // 1,2
+*/!*
+}
+
+hash(1, 2);
+```
+
+The trick is called *method borrowing*.
+
+We take (borrow) a join method from a regular array `[].join`. And use `[].join.call` to run it in the context of `arguments`.
+
+Why does it work?
+
+That's because the internal algorithm of the native method `arr.join(glue)` is very simple.
+
+Taken from the specification almost "as-is":
+
+1. Let `glue` be the first argument or, if no arguments, then a comma `","`.
+2. Let `result` be an empty string.
+3. Append `this[0]` to `result`.
+4. Append `glue` and `this[1]`.
+5. Append `glue` and `this[2]`.
+6. ...Do so until `this.length` items are glued.
+7. Return `result`.
+
+So, technically it takes `this` and joins `this[0]`, `this[1]` ...etc together. It's intentionally written in a way that allows any array-like `this` (not a coincidence, many methods follow this practice). That's why it also works with `this=arguments`.
+
+## Summary
+
+*Decorator* is a wrapper around a function that alters its behavior. The main job is still carried out by the function.
+
+It is generally safe to replace a function or a method with a decorated one, except for one little thing. If the original function had properties on it, like `func.calledCount` or whatever, then the decorated one will not provide them. Because that is a wrapper. So one need to be careful if one uses them. Some decorators provide their own properties.
+
+Decorators can be seen as "features" or "aspects" that can be added to a function. We can add one or add many. And all this without changing its code!
+
+To implement `cachingDecorator`, we studied methods:
+
+- [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- calls `func` with given context and arguments.
+- [func.apply(context, args)](mdn:js/Function/apply) -- calls `func` passing `context` as `this` and array-like `args` into a list of arguments.
+
+The generic *call forwarding* is usually done with `apply`:
+
+```js
+let wrapper = function() {
+  return original.apply(this, arguments);
+}
+```
+
+We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to arguments. The alternative is to use rest parameters object that is a real array.
+
+
+There are many decorators there in the wild. Check how well you got them by solving the tasks of this chapter.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png
new file mode 100644
index 00000000..171e2791
Binary files /dev/null and b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png
new file mode 100644
index 00000000..8d3b5434
Binary files /dev/null and b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png differ
diff --git a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md
new file mode 100644
index 00000000..737a1448
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md
@@ -0,0 +1,18 @@
+The answer: `null`.
+
+
+```js run
+function f() {
+  alert( this ); // null
+}
+
+let user = {
+  g: f.bind(null)
+};
+
+user.g();
+```
+
+The context of a bound function is hard-fixed. There's just no way to further change it.
+
+So even while we run `user.g()`, the original function is called with `this=null`.
diff --git a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md
new file mode 100644
index 00000000..6d7e1fb2
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Bound function as a method
+
+What will be the output?
+
+```js
+function f() {
+  alert( this ); // ?
+}
+
+let user = {
+  g: f.bind(null)
+};
+
+user.g();
+```
+
diff --git a/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md b/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md
new file mode 100644
index 00000000..97e1c280
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md
@@ -0,0 +1,15 @@
+The answer: **John**.
+
+```js run no-beautify
+function f() {
+  alert(this.name);
+}
+
+f = f.bind( {name: "John"} ).bind( {name: "Pete"} );
+
+f(); // John
+```
+
+The exotic [bound function](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) object returned by `f.bind(...)` remembers the context (and arguments if provided) only at creation time. 
+
+A function cannot be re-bound.
diff --git a/1-js/06-advanced-functions/10-bind/3-second-bind/task.md b/1-js/06-advanced-functions/10-bind/3-second-bind/task.md
new file mode 100644
index 00000000..5daf053c
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/3-second-bind/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Second bind
+
+Can we change `this` by additional binding?
+
+What will be the output?
+
+```js no-beautify
+function f() {
+  alert(this.name);
+}
+
+f = f.bind( {name: "John"} ).bind( {name: "Ann" } );
+
+f();
+```
+
diff --git a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md
new file mode 100644
index 00000000..181555d9
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md
@@ -0,0 +1,4 @@
+The answer: `undefined`.
+
+The result of `bind` is another object. It does not have the `test` property.
+
diff --git a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md
new file mode 100644
index 00000000..8cd18ec5
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Function property after bind
+
+There's a value in the property of a function. Will it change after `bind`? Why, elaborate?
+
+```js run
+function sayHi() {
+  alert( this.name );
+}
+sayHi.test = 5;
+
+*!*
+let bound = sayHi.bind({
+  name: "John"
+});
+
+alert( bound.test ); // what will be the output? why?
+*/!*
+```
+
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
new file mode 100644
index 00000000..0cb673b1
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
@@ -0,0 +1,43 @@
+
+The error occurs because `ask` gets functions `loginOk/loginFail` without the object.
+
+When it calls them, they naturally assume `this=undefined`.
+
+Let's `bind` the context:
+
+```js run
+function askPassword(ok, fail) {
+  let password = prompt("Password?", '');
+  if (password == "rockstar") ok();
+  else fail();
+}
+
+let user = {
+  name: 'John',
+
+  loginOk() {
+    alert(`${this.name} logged in`);
+  },
+
+  loginFail() {
+    alert(`${this.name} failed to log in`);
+  },
+
+};
+
+*!*
+askPassword(user.loginOk.bind(user), user.loginFail.bind(user));
+*/!*
+```
+
+Now it works.
+
+An alternative solution could be:
+```js
+//...
+askPassword(() => user.loginOk(), () => user.loginFail());
+```
+
+Usually that also works, but may fail in more complex situations where `user` has a chance of being overwritten between the moments of asking and running `() => user.loginOk()`. 
+
+
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md
new file mode 100644
index 00000000..eb19e664
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md
@@ -0,0 +1,38 @@
+importance: 5
+
+---
+
+# Ask losing this
+
+The call to `askPassword()` in the code below should check the password and then call `user.loginOk/loginFail` depending on the answer.
+
+But it leads to an error. Why?
+
+Fix the highlighted line for everything to start working right (other lines are not to be changed).
+
+```js run
+function askPassword(ok, fail) {
+  let password = prompt("Password?", '');
+  if (password == "rockstar") ok();
+  else fail();
+}
+
+let user = {
+  name: 'John',
+
+  loginOk() {
+    alert(`${this.name} logged in`);
+  },
+
+  loginFail() {
+    alert(`${this.name} failed to log in`);
+  },
+
+};
+
+*!*
+askPassword(user.loginOk, user.loginFail);
+*/!*
+```
+
+
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
new file mode 100644
index 00000000..87637929
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -0,0 +1,205 @@
+libs:
+  - lodash
+
+---
+
+# Function binding
+
+When using `setTimeout` with object methods or passing object methods along, there's a known problem: "losing `this`".
+
+Suddenly, `this` just stops working right. The situation is typical for novice developers, but happens with experienced ones as well.
+
+[cut]
+
+## Losing "this"
+
+We already know that in JavaScript it's easy to lose `this`. Once a method is passed somewhere separately from the object -- `this` is lost.
+
+Here's how it may happen with `setTimeout`:
+
+```js run
+let user = {
+  firstName: "John",
+  sayHi() {
+    alert(`Hello, ${this.firstName}!`);
+  }
+};
+
+*!*
+setTimeout(user.sayHi, 1000); // Hello, undefined!
+*/!*
+```
+
+As we can see, the output shows not "John" as `this.firstName`, but `undefined`!
+
+That's because `setTimeout` got the function `user.sayHi`, separately from the object. The last line can be rewritten as:
+
+```js
+let f = user.sayHi;
+setTimeout(f, 1000); // lost user context
+```
+
+The method `setTimeout` in-browser is a little special: it sets `this=window` for the function call (for Node.JS, `this` becomes the timer object, but doesn't really matter here). So for `this.firstName` it tries to get `window.firstName`, which does not exist. In other similar cases as we'll see, usually `this` just becomes `undefined`.
+
+The task is quite typical -- we want to pass an object method somewhere else (here -- to the scheduler) where it will be called. How to make sure that it will be called in the right context?
+
+## Solution 1: a wrapper
+
+The simplest solution is to use an wrapping function:
+
+```js run
+let user = {
+  firstName: "John",
+  sayHi() {
+    alert(`Hello, ${this.firstName}!`);
+  }
+};
+
+*!*
+setTimeout(function() {
+  user.sayHi(); // Hello, John!
+}, 1000);
+*/!*
+```
+
+Now it works, because it receives `user` from the outer lexical environment, and then calls the method normally.
+
+The same, but shorter:
+
+```js
+setTimeout(() => user.sayHi(), 1000); // Hello, John!
+```
+
+Looks fine, but a slight vulnerability appears in our code structure.
+
+What if before `setTimeout` triggers (there's one second delay!) `user` changes value? Then, suddenly, the it will call the wrong object!
+
+
+```js run
+let user = {
+  firstName: "John",
+  sayHi() {
+    alert(`Hello, ${this.firstName}!`);
+  }
+};
+
+setTimeout(() => user.sayHi(), 1000);
+
+// ...within 1 second
+user = { sayHi() { alert("Another user in setTimeout!"); } };
+
+// Another user in setTimeout?!?
+```
+
+The next solution guarantees that such thing won't happen.
+
+## Solution 2: bind
+
+Functions provide a built-in method [bind](mdn:js/Function/bind) that allows to fix `this`.
+
+The basic syntax is:
+
+```js
+// more complex syntax will be little later
+let boundFunc = func.bind(context);
+````
+
+The result of `func.bind(context)` is a special function-like "exotic object", that is callable as function and transparently passes the call to `func` setting `this=context`.
+
+In other words, calling `boundFunc` is like `func` with fixed `this`.
+
+For instance, here `funcUser` passes a call to `func` with `this=user`:
+
+```js run  
+let user = {
+  firstName: "John"
+};
+
+function func() {
+  alert(this.firstName);
+}
+
+*!*
+let funcUser = func.bind(user);
+funcUser(); // John  
+*/!*
+```
+
+Here `func.bind(user)` as a "bound variant" of `func`, with fixed `this=user`.
+
+All arguments are passed to the original `func` "as is", for instance:
+
+```js run  
+let user = {
+  firstName: "John"
+};
+
+function func(phrase) {
+  alert(phrase + ', ' + this.firstName);
+}
+
+// bind this to user
+let funcUser = func.bind(user);
+
+*!*
+funcUser("Hello"); // Hello, John (argument "Hello" is passed, and this=user)
+*/!*
+```
+
+Now let's try with an object method:
+
+
+```js run
+let user = {
+  firstName: "John",
+  sayHi() {
+    alert(`Hello, ${this.firstName}!`);
+  }
+};
+
+*!*
+let sayHi = user.sayHi.bind(user); // (*)
+*/!*
+
+sayHi(); // Hello, John!
+
+setTimeout(sayHi, 1000); // Hello, John!
+```
+
+In the line `(*)` we take the method `user.sayHi` and bind it to `user`. The `sayHi` is a "bound" function, that can be called alone or passed to `setTimeout` -- doesn't matter, the context will be right.
+
+Here we can see that arguments are passed "as is", only `this` is fixed by `bind`:
+
+```js run
+let user = {
+  firstName: "John",
+  say(phrase) {
+    alert(`${phrase}, ${this.firstName}!`);
+  }
+};
+
+let say = user.say.bind(user);
+
+say("Hello"); // Hello, John ("Hello" argument is passed to say)
+say("Bye"); // Bye, John ("Bye" is passed to say)
+```
+
+````smart header="Convenience method: `bindAll`"
+If an object has many methods and we plan to actively pass it around, then we could bind them all in a loop:
+
+```js
+for (let key in user) {
+  if (typeof user[key] == 'function') {
+    user[key] = user[key].bind(user);
+  }
+}
+```
+
+JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(obj)](http://lodash.com/docs#bindAll) in lodash.
+````
+
+## Summary
+
+Method `func.bind(context, ...args)` returns a "bound variant" of function `func` that fixes the context `this` and first arguments if given.
+
+Usually we apply `bind` to fix `this` in an object method, so that we can pass it somewhere. For example, to `setTimeout`. There are more reasons to `bind` in the modern development, we'll meet them later.
diff --git a/1-js/06-advanced-functions/10-bind/head.html b/1-js/06-advanced-functions/10-bind/head.html
new file mode 100644
index 00000000..afdb888d
--- /dev/null
+++ b/1-js/06-advanced-functions/10-bind/head.html
@@ -0,0 +1,21 @@
+<script>
+function mul(a, b) {
+  return a * b;
+};
+
+function ask(question, answer, ok, fail) {
+  let result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+function bind(func, context /*, args*/) {
+  let bindArgs = [].slice.call(arguments, 2); // (1)
+  function wrapper() {                        // (2)
+    let args = [].slice.call(arguments);
+    let unshiftArgs = bindArgs.concat(args);  // (3)
+    return func.apply(context, unshiftArgs);  // (4)
+  }
+  return wrapper;
+}
+</script>
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/solution.md b/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/solution.md
new file mode 100644
index 00000000..3284c943
--- /dev/null
+++ b/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/solution.md
@@ -0,0 +1,16 @@
+
+
+1. Either use a wrapper function, an arrow to be concise:
+
+    ```js 
+    askPassword(() => user.login(true), () => user.login(false)); 
+    ```
+
+    Now it gets `user` from outer variables and runs it the normal way.
+
+2. Or create a partial function from `user.login` that uses `user` as the context and has the correct first argument:
+
+
+    ```js 
+    askPassword(user.login.bind(user, true), user.login.bind(user, false)); 
+    ```
diff --git a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md b/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md
new file mode 100644
index 00000000..915d8aee
--- /dev/null
+++ b/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md
@@ -0,0 +1,34 @@
+importance: 5
+
+---
+
+# Partial application for login
+
+The task is a little more complex variant of <info:task/question-use-bind>. 
+
+The `user` object was modified. Now instead of two functions `loginOk/loginFail`, it has a single function `user.login(true/false)`.
+
+What to pass `askPassword` in the code below, so that it calls `user.login(true)` as `ok` and `user.login(fail)` as `fail`?
+
+```js
+function askPassword(ok, fail) {
+  let password = prompt("Password?", '');
+  if (password == "rockstar") ok();
+  else fail();
+}
+
+let user = {
+  name: 'John',
+
+  login(result) {
+    alert( this.name + (result ? ' logged in' : ' failed to log in') );
+  }
+};
+
+*!*
+askPassword(?, ?); // ?
+*/!*
+```
+
+Your changes should only modify the highlighted fragment.
+
diff --git a/1-js/06-advanced-functions/11-currying-partials/article.md b/1-js/06-advanced-functions/11-currying-partials/article.md
new file mode 100644
index 00000000..6e7b78e8
--- /dev/null
+++ b/1-js/06-advanced-functions/11-currying-partials/article.md
@@ -0,0 +1,298 @@
+libs:
+  - lodash
+
+---
+
+# Currying and partials
+
+Till now we were only talking about binding `this`. Now let's make a step further.
+
+We can bind not only `this`, but also arguments. That's rarely done, but sometimes can be handy.
+
+[cut]
+
+The full syntax of `bind`:
+
+```js
+let bound = func.bind(context, arg1, arg2, ...);
+```
+
+It allows to bind context as `this` and starting arguments of the function.
+
+For instance, we have a multiplication function `mul(a, b)`:
+
+```js
+function mul(a, b) {
+  return a * b;
+}
+```
+
+Let's use `bind` to create a function `double` on its base:
+
+```js run
+*!*
+let double = mul.bind(null, 2);
+*/!*
+
+alert( double(3) ); // = mul(2, 3) = 6
+alert( double(4) ); // = mul(2, 4) = 8
+alert( double(5) ); // = mul(2, 5) = 10
+```
+
+The call to `mul.bind(null, 2)` creates a new function `double` that passes calls to `mul`, fixing `null` as the context and `2` as the first argument. Further arguments are passed "as is".
+
+That's called [partial function application](https://en.wikipedia.org/wiki/Partial_application) -- we create a new function by fixing some parameters of the existing one.
+
+Please note that here we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`.
+
+The function `triple` in the code below triples the value:
+
+```js run
+*!*
+let triple = mul.bind(null, 3);
+*/!*
+
+alert( triple(3) ); // = mul(3, 3) = 9
+alert( triple(4) ); // = mul(3, 4) = 12
+alert( triple(5) ); // = mul(3, 5) = 15
+```
+
+Why do we usually make a partial function?
+
+Here our benefit is that we created an independent function with a readable name (`double`, `triple`). We can use it and don't write the first argument of every time, cause it's fixed with `bind`.
+
+In other cases, partial application is useful when we have a very generic function, and want a less universal variant of it for convenience.
+
+For instance, we have a function `send(from, to, text)`. Then, inside a `user` object we may want to use a partial variant of it: `sendTo(to, text)` that sends from the current user.
+
+## Going partial without context
+
+What if we'd like to fix some arguments, but not bind `this`?
+
+The native `bind` does not allow that. We can't just omit the context and jump to arguments.
+
+Fortunately, a `partial` function for binding only arguments can be easily implemented.
+
+Like this:
+
+```js run
+*!*
+function partial(func, ...argsBound) {
+  return function(...args) { // (*)
+    return func.call(this, ...argsBound, ...args);
+  }
+}
+*/!*
+
+// Usage:
+let user = {
+  firstName: "John",
+  say(time, phrase) {
+    alert(`[${time}] ${this.firstName}: ${phrase}!`);
+  }
+};
+
+// add a partial method that says something now by fixing the first argument
+user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());
+
+user.sayNow("Hello");
+// Something like:
+// [10:00] Hello, John!
+```
+
+The result of `partial(func[, arg1, arg2...])` call is a wrapper `(*)` that calls `func` with:
+- Same `this` as it gets (for `user.sayNow` call it's `user`)
+- Then gives it `...argsBound` -- arguments from the `partial` call (`"10:00"`)
+- Then gives it `...args` -- arguments given to the wrapper (`"Hello"`)
+
+So easy to do it with the spread operator, right?
+
+Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation from lodash library.
+
+## Currying
+
+Sometimes people mix up partial function application mentioned above with another thing named "currying". That's another interesting technique of working with functions that we just have to mention here.
+
+[Currying](https://en.wikipedia.org/wiki/Currying) is translating a function from callable as `f(a, b, c)` into callable as `f(a)(b)(c)`.
+
+Let's make `curry` function that performs currying for binary functions. In other words, it translates `f(a, b)` into `f(a)(b)`:
+
+```js run
+*!*
+function curry(func) {
+  return function(a) {
+    return function(b) {
+      return func(a, b);
+    };
+  };
+}
+*/!*
+
+// usage
+function sum(a, b) {
+  return a + b;
+}
+
+let carriedSum = curry(sum);
+
+alert( carriedSum(1)(2) ); // 3
+```
+
+As you can see, the implementation is a series of wrappers.
+
+- The result of `curry(func)` is a wrapper `function(a)`.
+- When it is called like `sum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`.
+- Then `sum(1)(2)` finally calls `function(b)` providing `2`, and it passes the call to the original multi-argument `sum`.
+
+More advanced implementations of currying like [_.curry](https://lodash.com/docs#curry) from lodash library do something more sophisticated. They return a wrapper that allows a function to be called normally when all arguments are supplied *or* returns a partial otherwise.
+
+```js
+function curry(f) {
+  return function(..args) {
+    // if args.length == f.length (as many arguments as f has),
+    //   then pass the call to f
+    // otherwise return a partial function that fixes args as first arguments
+  };
+}
+```
+
+## Currying? What for?
+
+Advanced currying allows both to keep the function callable normally and to get partials easily. To understand the benefits we definitely need a worthy real-life example.
+
+For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions also have many other useful features like: sending it over the network or filtering:
+
+```js
+function log(date, importance, message) {
+  alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
+}
+```
+
+Let's curry it!
+
+```js
+log = _.curry(log);
+```
+
+After that `log` still works the normal way:
+
+```js
+log(new Date(), "DEBUG", "some debug");
+```
+
+...But also can be called in the curried form:
+
+```js
+log(new Date())("DEBUG")("some debug"); // log(a)(b)(c)
+```
+
+Let's get a convenience function for today's logs:
+
+```js
+// todayLog will be the partial of log with fixed first argument
+let todayLog = log(new Date());
+
+// use it
+todayLog("INFO", "message"); // [HH:mm] INFO message
+```
+
+And now a convenience function for today's debug messages:
+
+```js
+let todayDebug = todayLog("DEBUG");
+
+todayDebug("message"); // [HH:mm] DEBUG message
+```
+
+So:
+1. We didn't lose anything after currying: `log` is still callable normally.
+2. We were able to generate partial functions that are convenient in many cases.
+
+## Advanced curry implementation
+
+In case you're interested, here's the "advanced" curry implementation that we could use above.
+
+```js run
+function curry(func) {
+
+  return function curried(...args) {
+    if (args.length >= func.length) {
+      return func.apply(this, args);
+    } else {
+      return function(...args2) {
+        return curried.apply(this, args.concat(args2));
+      }
+    }
+  };
+
+}
+
+function sum(a, b, c) {
+  return a + b + c;
+}
+
+let curriedSum = curry(sum);
+
+// still callable normally
+alert( curriedSum(1, 2, 3) ); // 6
+
+// get the partial with curried(1) and call it with 2 other arguments
+alert( curriedSum(1)(2,3) ); // 6
+
+// full curried form
+alert( curriedSum(1)(2)(3) ); // 6
+```
+
+The new `curry` may look complicated, but it's actually pretty easy to understand.
+
+The result of `curry(func)` is the wrapper `curried` that looks like this:
+
+```js
+// func is the function to transform
+function curried(...args) {
+  if (args.length >= func.length) { // (1)
+    return func.apply(this, args);
+  } else {
+    return function pass(...args2) { // (2)
+      return curried.apply(this, args.concat(args2));
+    }
+  }
+};
+```
+
+When we run it, there are two branches:
+
+1. Call now: if passed `args` count is the same as the original function has in its definition (`func.length`) or longer, then just pass the call to it.
+2. Get a partial: otherwise, `func` is not called yet. Instead, another wrapper `pass` is returned, that will re-apply `curried` providing previous arguments together with the new ones. Then on a new call, again, we'll get either a new partial (if not enough arguments) or, finally, the result.
+
+For instance, let's see what happens in the case of `sum(a, b, c)`. Three arguments, so `sum.length = 3`.
+
+For the call `curried(1)(2)(3)`:
+
+1. The first call `curried(1)` remembers `1` in its Lexical Environment, and returns a wrapper `pass`.
+2. The wrapper `pass` is called with `(2)`: it takes previous args (`1`), concatenates them with what it got `(2)` and calls `curried(1, 2)` with them together.
+
+    As the argument count is still less than 3, `curry` returns `pass`.
+3. The wrapper `pass` is called again with `(3)`,  for the next call `pass(3)` takes previous args (`1`, `2`) and adds `3` to them, making the call `curried(1, 2, 3)` -- there are `3` arguments at last, they are given to the original function.
+
+If that's still not obvious, just trace the calls sequence in your mind or on the paper.
+
+```smart header="Fixed-length functions only"
+The currying requires the function to have a known fixed number of arguments.
+```
+
+```smart header="A little more than currying"
+By definition, currying should convert `sum(a, b, c)` into `sum(a)(b)(c)`.
+
+But most implementations of currying in JavaScript are advanced, as described: they also keep the function callable in the multi-argument variant.
+```
+
+## Summary
+
+- When we fix some arguments of an existing function, the resulting (less universal) function is called *a partial*. We can use `bind` to get a partial, but there are other ways also.
+
+    Partials are convenient when we don't want to repeat the same argument over and over again. Like if we have a `send(from, to)` function, and `from` should always be the same for our task, we can get a partial and go on with it.
+
+- *Currying* is a transform that makes `f(a,b,c)` callable as `f(a)(b)(c)`. JavaScript implementations usually both keep the function callable normally and return the partial if arguments count is not enough.
+
+    Currying is great when we want easy partials. As we've seen in the logging example: the universal function `log(date, importance, message)` after currying gives us partials when called with one argument like `log(date)` or two arguments `log(date, importance)`.  
diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md
new file mode 100644
index 00000000..dcae22a4
--- /dev/null
+++ b/1-js/06-advanced-functions/12-arrow-functions/article.md
@@ -0,0 +1,128 @@
+# Arrow functions revisited
+
+Let's revisit arrow functions.
+
+[cut]
+
+Arrow functions are not just a "shorthand" for writing small stuff.
+
+JavaScript is full of situations where we need to write a small function, that's executed somewhere else.
+
+For instance:
+
+- `arr.forEach(func)` -- `func` is executed by `forEach` for every array item.
+- `setTimeout(func)` -- `func` is executed by the built-in scheduler.
+- ...there are more.
+
+It's in the very spirit of JavaScript to create a function and pass it somewhere.
+
+And in such functions we usually don't want to leave the current context.
+
+## Arrow functions have no "this"
+
+As we remember from the chapter <info:object-methods>, arrow functions do not have `this`. If `this` is accessed, it is taken from the outside.
+
+For instance, we can use it to iterate inside an object method:
+
+```js run
+let group = {
+  title: "Our Group",
+  students: ["John", "Pete", "Alice"],
+
+  showList() {
+*!*
+    this.students.forEach(
+      student => alert(this.title + ': ' + student)
+    );
+*/!*
+  }
+};
+
+group.showList();
+```
+
+Here in `forEach`, the arrow function is used, so `this.title` in it is exactly the same as in the outer method `showList`. That is: `group.title`.
+
+If we used a "regular" function, there would be an error:
+
+```js run
+let group = {
+  title: "Our Group",
+  students: ["John", "Pete", "Alice"],
+
+  showList() {
+*!*
+    this.students.forEach(function(student) {
+      // Error: Cannot read property 'title' of undefined
+      alert(this.title + ': ' + student)
+    });
+*/!*
+  }
+};
+
+group.showList();
+```
+
+The error occurs because `forEach` runs functions with `this=undefined` by default, so the attempt to access `undefined.title` is made.
+
+That doesn't affect arrow functions, because they just don't have `this`.
+
+```warn header="Arrow functions can't run with `new`"
+Not having `this` naturally means another limitation: arrow functions can't be used as constructors. They can't be called with `new`.
+```
+
+```smart header="Arrow functions VS bind"
+There's a subtle difference between an arrow function `=>` and a regular function called with `.bind(this)`:
+
+- `.bind(this)` creates a "bound version" of the function.
+- The arrow `=>` doesn't create any binding. The function simply doesn't have `this`. The lookup of `this` is made exactly the same way as a regular variable search: in the outer lexical environment.
+```
+
+## Arrows have no "arguments"
+
+Arrow functions also have no `arguments` variable.
+
+That's great for decorators, when we need to forward a call with the current `this` and `arguments`.
+
+For instance, `defer(f, ms)` gets a function and returns a wrapper around it that delays the call by `ms` milliseconds:
+
+```js run
+function defer(f, ms) {
+  return function() {
+    setTimeout(() => f.apply(this, arguments), ms)
+  };
+}
+
+function sayHi(who) {
+  alert('Hello, ' + who);
+}
+
+let sayHiDeferred = defer(sayHi, 2000);
+sayHiDeferred("John"); // Hello, John after 2 seconds
+```
+
+The same without an arrow function would look like:
+
+```js
+function defer(f, ms) {
+  return function(...args) {
+    let ctx = this;
+    setTimeout(function() {
+      return f.apply(ctx, args);
+    }, ms);
+  };
+}
+```
+
+Here we had to create additional variables `args` and `ctx` so that the function inside `setTimeout` could take them.
+
+## Summary
+
+Arrow functions:
+
+- Do not have `this`.
+- Do not have `arguments`.
+- Can't be called with `new`.
+- (They also don't have `super`, but we didn't study it. Will be in the chapter <info:class-inheritance>).
+
+That's because they are meant for short pieces of code that does not have their own "context", but rather works in the current one. And they really shine in that use case.
diff --git a/1-js/06-advanced-functions/index.md b/1-js/06-advanced-functions/index.md
new file mode 100644
index 00000000..7800dcc4
--- /dev/null
+++ b/1-js/06-advanced-functions/index.md
@@ -0,0 +1 @@
+# Advanced working with functions
diff --git a/1-js/07-object-oriented-programming/01-property-descriptors/article.md b/1-js/07-object-oriented-programming/01-property-descriptors/article.md
new file mode 100644
index 00000000..92d83365
--- /dev/null
+++ b/1-js/07-object-oriented-programming/01-property-descriptors/article.md
@@ -0,0 +1,311 @@
+
+# Property flags and descriptors
+
+As we know, objects can store properties.
+
+Till now, a property was a simple "key-value" pair to us. But an object property is actually more complex and tunable thing.
+
+[cut]
+
+## Property flags
+
+Object properties, besides a **`value`**, have three special attributes (so-called "flags"):
+
+- **`writable`** -- if `true`, can be changed, otherwise it's read-only.
+- **`enumerable`** -- if `true`, then listed in loops, otherwise not listed.
+- **`configurable`** -- if `true`, the property can be deleted and these attributes can be modified, otherwise not.
+
+We didn't see them yet, because generally they do not show up. When we create a property "the usual way", all of them are `true`. But we also can change them any time.
+
+First, let's see how to get those flags.
+
+The method [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property.
+
+The syntax is:
+```js
+let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
+```
+
+`obj`
+: The object to get information from.
+
+`propertyName`
+: The name of the property.
+
+The returned value is a so-called "property descriptor" object: it contains the value and all the flags.
+
+For instance:
+
+```js run
+let user = {
+  name: "John"
+};
+
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/* property descriptor:
+{
+  "value": "John",
+  "writable": true,
+  "enumerable": true,
+  "configurable": true
+}
+*/
+```
+
+To change the flags, we can use [Object.defineProperty](mdn:js/Object/defineProperty).
+
+The syntax is:
+
+```js
+Object.defineProperty(obj, propertyName, descriptor)
+```
+
+`obj`, `propertyName`
+: The object and property to work on.
+
+`descriptor`
+: Property descriptor to apply.
+
+If the property exists, `defineProperty` updates its flags. Otherwise, it creates the property with the given value and flags; in that case, if a flag is not supplied, it is assumed `false`.
+
+For instance, here a property `name` is created with all falsy flags:
+
+```js run
+let user = {};
+
+*!*
+Object.defineProperty(user, "name", {
+  value: "John"
+});
+*/!*
+
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/*
+{
+  "value": "John",
+*!*
+  "writable": false,
+  "enumerable": false,
+  "configurable": false
+*/!*
+}
+ */
+```
+
+Compare it with "normally created" `user.name` above: now all flags are falsy. If that's not what we want then we'd better set them to `true` in `descriptor`.
+
+Now let's see effects of the flags by example.
+
+## Read-only
+
+Let's make `user.name` read-only by changing `writable` flag:
+
+```js run
+let user = {
+  name: "John"
+};
+
+Object.defineProperty(user, "name", {
+*!*
+  writable: false
+*/!*
+});
+
+*!*
+user.name = "Pete"; // Error: Cannot assign to read only property 'name'...
+*/!*
+```
+
+Now no one can change the name of our user, unless he applies his own `defineProperty` to override ours.
+
+Here's the same operation, but for the case when a property doesn't exist:
+
+```js run
+let user = { };
+
+Object.defineProperty(user, "name", {
+*!*
+  value: "Pete",
+  // for new properties need to explicitly list what's true
+  enumerable: true,
+  configurable: true
+*/!*
+});
+
+alert(user.name); // Pete
+user.name = "Alice"; // Error
+```
+
+
+## Non-enumerable
+
+Now let's a custom `toString` to `user`.
+
+Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add `toString` of our own, then by default it shows up in `for..in`.
+
+...But if we don't like it, then we can set `enumerable:false`. Then it won't appear in `for..in` loop, just like the built-in one:
+
+```js run
+let user = {
+  name: "John",
+  toString() {
+    return this.name;
+  }
+};
+
+// By default, both our properties are listed:
+for(let key in user) alert(key); // name, toString
+
+Object.defineProperty(user, "toString", {
+*!*
+  enumerable: false
+*/!*
+});
+
+*!*
+// Now toString disappears:
+*/!*
+for(let key in user) alert(key); // name
+```
+
+Non-enumerable properties are also excluded from `Object.keys`:
+
+```js
+alert(Object.keys(user)); // name
+```
+
+
+
+## Non-configurable
+
+The non-configurable flag (`configurable:false`) is usually set for built-in objects and properties.
+
+A non-configurable property can not be deleted or altered with `defineProperty`.
+
+For instance, `Math.PI` is both read-only, non-enumerable and non-configurable:
+
+```js run
+let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/*
+{
+  "value": 3.141592653589793,
+  "writable": false,
+  "enumerable": false,
+  "configurable": false
+}
+*/
+```
+So, a programmer is unable to change the value of `Math.PI` or overwrite it.
+
+```js run
+Math.PI = 3; // Error
+
+// delete Math.PI won't work either
+```
+
+Making a property non-configurable is a one-way road. We cannot change it back, because `defineProperty` doesn't work on non-configurable properties.
+
+Here we are making `user.name` a "forever sealed" constant:
+
+```js run
+let user = { };
+
+Object.defineProperty(user, "name", {
+  value: "John",
+  writable: false,
+  configurable: false
+});
+
+*!*
+// won't be able to change user.name or its flags
+// all this won't work:
+//   user.name = "Pete"
+//   delete user.name
+//   defineProperty(user, "name", ...)
+Object.defineProperty(user, "name", {writable: true}); // Error
+*/!*
+```
+
+```smart header="Errors appear only in use strict"
+In the non-strict mode, no errors occur when writing to read-only properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
+```
+
+## Object.defineProperties
+
+There's a method [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) that allows to define many properties at once.
+
+The syntax is:
+
+```js
+Object.defineProperties(obj, {
+  prop1: descriptor1,
+  prop2: descriptor2
+  // ...
+});
+```
+
+For instance:
+
+```js
+Object.defineProperties(user, {
+  name: { value: "John", writable: false },
+  surname: { value: "Smith", writable: false },
+  // ...
+});
+```
+
+So, we can set many properties at once.
+
+## Object.getOwnPropertyDescriptors
+
+To get many descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors).
+
+Together with `Object.defineProperties` it can be used as a "flags-aware" way of cloning an object:
+
+```js
+let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));
+```
+
+Normally when we clone an object, we use an assignment to copy properties, like this:
+
+```js
+for(let key in user) {
+  clone[key] = user[key]
+}
+```
+
+...But that does not copy flags. So if we want a "better" clone then `Object.defineProperties` is preferred.
+
+## Sealing an object globally
+
+Property descriptors work at the level of individual properties.
+
+There are also methods that limit access to the *whole* object:
+
+[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions)
+: Forbids to add properties to the object.
+
+[Object.seal(obj)](mdn:js/Object/seal)
+: Forbids to add/remove properties, sets for all existing properties `configurable: false`.
+
+[Object.freeze(obj)](mdn:js/Object/freeze)
+: Forbids to add/remove/change properties, sets for all existing properties `configurable: false, writable: false`.
+
+And also there are tests for them:
+
+[Object.isExtensible(obj)](mdn:js/Object/isExtensible)
+: Returns `false` if adding properties is forbidden, otherwise `true`.
+
+[Object.isSealed(obj)](mdn:js/Object/isSealed)
+: Returns `true` if adding/removing properties is forbidden, and all existing properties have `configurable: false`.
+
+[Object.isFrozen(obj)](mdn:js/Object/isFrozen)
+: Returns `true` if adding/removing/changing properties is forbidden, and all current properties are `configurable: false, writable: false`.
+
+These methods are rarely used in practice.
diff --git a/1-js/07-object-oriented-programming/02-property-accessors/article.md b/1-js/07-object-oriented-programming/02-property-accessors/article.md
new file mode 100644
index 00000000..616348e7
--- /dev/null
+++ b/1-js/07-object-oriented-programming/02-property-accessors/article.md
@@ -0,0 +1,239 @@
+
+# Property getters and setters
+
+There are two kinds of properties.
+
+The first kind is *data properties*. We already know how to work with them. Actually, all properties that we've been using till now were data properties.
+
+The second type of properties is something new. It's *accessor properties*. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.
+
+[cut]
+
+## Getters and setters
+
+Accessor properties are represented by "getter" and "setter" methods. In an object literal they are denoted by `get` and `set`:
+
+```js
+let obj = {
+  *!*get propName()*/!* {
+    // getter, the code executed on getting obj.propName
+  },
+
+  *!*set propName(value)*/!* {
+    // setter, the code executed on setting obj.propName = value
+  }
+};
+```
+
+The getter works when `obj.propName` is read, the setter -- when it is assigned.
+
+For instance, we have a `user` object with `name` and `surname`:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith"
+};
+```
+
+Now we want to add a "fullName" property, that should be "John Smith". Of course, we don't want to copy-paste existing information, so we can implement it as an accessor:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith",
+
+*!*
+  get fullName() {
+    return `${this.name} ${this.surname}`;
+  }
+*/!*
+};
+
+*!*
+alert(user.fullName); // John Smith
+*/!*
+```
+
+From outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call* `user.fullName` as a function, we *read* it normally: the getter runs behind the scenes.
+
+As of now, `fullName` has only a getter. If we attempt to assign `user.fullName=`, there will be an error.
+
+Let's fix it by adding a setter for `user.fullName`:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith",
+
+  get fullName() {
+    return `${this.name} ${this.surname}`;
+  },
+
+*!*
+  set fullName(value) {
+    [this.name, this.surname] = value.split(" ");
+  }
+*/!*
+};
+
+// set fullName is executed with the given value.
+user.fullName = "Alice Cooper";
+
+alert(user.name); // Alice
+alert(user.surname); // Cooper
+```
+
+Now we have a "virtual" property. It is readable and writable, but in fact does not exist.
+
+```smart header="Accessor properties are only accessible with get/set"
+A property can either be a "data property" or an "accessor property", but not both.
+
+Once a property is defined with `get prop()` or `set prop()`, it's an accessor property. So there must be a getter to read it, and must be a setter if we want to assign it.
+
+Sometimes it's normal that there's only a setter or only a getter. But the property won't be readable or writable in that case.
+```
+
+
+## Accessor descriptors
+
+Descriptors for accessor properties are different -- as compared with data properties.
+
+For accessor properties, there is no `value` and `writable`, but instead there are `get` and `set` functions.
+
+So an accessor descriptor may have:
+
+- **`get`** -- a function without arguments, that works when a property is read,
+- **`set`** -- a function with one argument, that is called when the property is set,
+- **`enumerable`** -- same as for data properties,
+- **`configurable`** -- same as for data properties.
+
+For instance, to create an accessor `fullName` with `defineProperty`, we can pass a descriptor with `get` and `set`:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith"
+};
+
+*!*
+Object.defineProperty(user, 'fullName', {
+  get() {
+    return `${this.name} ${this.surname}`;
+  },
+
+  set(value) {
+    [this.name, this.surname] = value.split(" ");
+  }
+*/!*
+});
+
+alert(user.fullName); // John Smith
+
+for(let key in user) alert(key);
+```
+
+Please note once again that a property can be either an accessor or a data property, not both.
+
+If we try to supply both `get` and `value` in the same descriptor, there will be an error:
+
+```js run
+*!*
+// Error: Invalid property descriptor.
+*/!*
+Object.defineProperty({}, 'prop', {
+  get() {
+    return 1
+  },
+
+  value: 2
+});
+```
+
+## Smarter getters/setters
+
+Getters/setters can be used as wrappers over "real" property values to gain more control over them.
+
+For instance, if we want to forbid too short names for `user`, we can store `name` in a special property `_name`. And filter assignments in the setter:
+
+```js run
+let user = {
+  get name() {
+    return this._name;
+  },
+
+  set name(value) {
+    if (value.length < 4) {
+      alert("Name is too short, need at least 4 characters");
+      return;
+    }
+    this._name = value;
+  }
+};
+
+user.name = "Pete";
+alert(user.name); // Pete
+
+user.name = ""; // Name is too short...
+```
+
+Technically, the external code may still access the name directly by using `user._name`. But there is a widely known agreement that properties starting with an underscore `"_"` are internal and should not be touched from outside the object.
+
+
+## Using for compatibility
+
+One of the great ideas behind getters and setters -- they allow to take control over a "normal" data property and tweak it at any moment.
+
+For instance, we started implementing user objects using data properties `name` and `age`:
+
+```js
+function User(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+let john = new User("John", 25);
+
+alert( john.age ); // 25
+```
+
+...But sooner or later, things may change. Instead of `age` we may decide to store `birthday`, because it's more precise and convenient:
+
+```js
+function User(name, birthday) {
+  this.name = name;
+  this.birthday = birthday;
+}
+
+let john = new User("John", new Date(1992, 6, 1));
+```
+
+Now what to do with the old code that still uses `age` property?
+
+We can try to find all such places and fix them, but that takes time and can be hard to do if that code is written by other people. And besides, `age` is a nice thing to have in `user`, right? In some places it's just what we want.
+
+Adding a getter for `age` mitigates the problem:
+
+```js run no-beautify
+function User(name, birthday) {
+  this.name = name;
+  this.birthday = birthday;
+
+*!*
+  // age is calculated from the current date and birthday
+  Object.defineProperty(this, "age", {
+    get() {
+      let todayYear = new Date().getFullYear();
+      return todayYear - this.birthday.getFullYear();
+    }
+  });
+*/!*
+}
+
+let john = new User("John", new Date(1992, 6, 1));
+
+alert( john.birthday ); // birthday is available
+alert( john.age );      // ...as well as the age
+```
+
+Now the old code works too and we've got a nice additional property.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md
new file mode 100644
index 00000000..6d25a462
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md
@@ -0,0 +1,4 @@
+
+1. `true`, taken from `rabbit`.
+2. `null`, taken from `animal`.
+3. `undefined`, there's no such property any more.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md
new file mode 100644
index 00000000..f38fb6f9
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md
@@ -0,0 +1,31 @@
+importance: 5
+
+---
+
+# Working with prototype
+
+Here's the code that creates a pair of objects, then modifies them.
+
+Which values are shown in the process?
+
+```js
+let animal = {
+  jumps: null
+};
+let rabbit = {
+  __proto__: animal,
+  jumps: true
+};
+
+alert( rabbit.jumps ); // ? (1)
+
+delete rabbit.jumps;
+
+alert( rabbit.jumps ); // ? (2)
+
+delete animal.jumps;
+
+alert( rabbit.jumps ); // ? (3)
+```
+
+There should be 3 answers.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md
new file mode 100644
index 00000000..a16796f9
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md
@@ -0,0 +1,32 @@
+
+1. Let's add `__proto__`:
+
+    ```js run
+    let head = {
+      glasses: 1
+    };
+
+    let table = {
+      pen: 3,
+      __proto__: head
+    };
+
+    let bed = {
+      sheet: 1,
+      pillow: 2,
+      __proto__: table
+    };
+
+    let pockets = {
+      money: 2000,
+      __proto__: bed
+    };
+
+    alert( pockets.pen ); // 3
+    alert( bed.glasses ); // 1
+    alert( table.money ); // undefined
+    ```
+
+2. In modern engines, performance-wise, there's no difference whether we take a property from an object or its prototype. They remember where the property was found and reuse it in the next request.
+
+    For instance, for `pockets.glasses` they remember where they found `glasses` (in `head`), and next time will search right there. They are also smart enough to update internal caches if something changes, so that optimization is safe.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md
new file mode 100644
index 00000000..70b8b288
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md
@@ -0,0 +1,31 @@
+importance: 5
+
+---
+
+# Searching algorithm
+
+The task has two parts.
+
+We have an object:
+
+```js
+let head = {
+  glasses: 1
+};
+
+let table = {
+  pen: 3
+};
+
+let bed = {
+  sheet: 1,
+  pillow: 2
+};
+
+let pockets = {
+  money: 2000
+};
+```
+
+1. Use `__proto__` to assign prototypes in a way that any property lookup will follow the path: `pockets` -> `bed` -> `table` -> `head`. For instance, `pockets.pen` should be `3` (found in `table`), and `bed.glasses` should be `1` (found in `head`).
+2. Answer the question: is it faster to get `glasses` as `pocket.glasses` or `head.glasses`? Benchmark if needed.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md
new file mode 100644
index 00000000..c7d147b9
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md
@@ -0,0 +1,6 @@
+**The answer: `rabbit`.**
+
+That's because `this` is an object before the dot, so `rabbit.eat()` modifies `rabbit`.
+
+Property lookup and execution are two different things.
+The method `rabbit.eat` is first found in the prototype, then executed with `this=rabbit`
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md
new file mode 100644
index 00000000..b37499ba
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md
@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Where it writes?
+
+We have `rabbit` inheriting from `animal`.
+
+If we call `rabbit.eat()`, which object receives the `full` property: `animal` or `rabbit`? 
+
+```js
+let animal = {
+  eat() {
+    this.full = true;
+  }
+};
+
+let rabbit = {
+  __proto__: animal
+};
+
+rabbit.eat();
+```
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md
new file mode 100644
index 00000000..8ffdb76c
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md
@@ -0,0 +1,80 @@
+Let's look carefully at what's going on in the call `speedy.eat("apple")`.
+
+1. The method `speedy.eat` is found in the prototype (`=hamster`), then executed with `this=speedy` (the object before the dot).
+
+2. Then `this.stomach.push()` needs to find `stomach` property and call `push` on it. It looks for `stomach` in `this` (`=speedy`), but nothing found.
+
+3. Then it follows the prototype chain and finds `stomach` in `hamster`.
+
+4. Then it calls `push` on it, adding the food into *the stomach of the prototype*.
+
+So all hamsters share a single stomach!
+
+Every time the `stomach` is taken from the prototype, then `stomach.push` modifies it "at place".
+
+Please note that such thing doesn't happen in case of a simple assignment `this.stomach=`:
+
+```js run
+let hamster = {
+  stomach: [],
+
+  eat(food) {
+*!*
+    // assign to this.stomach instead of this.stomach.push
+    this.stomach = [food];
+*/!*
+  }
+};
+
+let speedy = {
+   __proto__: hamster
+};
+
+let lazy = {
+  __proto__: hamster
+};
+
+// Speedy one found the food
+speedy.eat("apple");
+alert( speedy.stomach ); // apple
+
+// Lazy one's stomach is empty
+alert( lazy.stomach ); // <nothing>
+```
+
+Now all works fine, because `this.stomach=` does not perform a lookup of `stomach`. The value is written directly into `this` object.
+
+Also we can totally evade the problem by making sure that each hamster has his own stomach:
+
+```js run
+let hamster = {
+  stomach: [],
+
+  eat(food) {
+    this.stomach.push(food);
+  }
+};
+
+let speedy = {
+  __proto__: hamster,
+*!*
+  stomach: []
+*/!*
+};
+
+let lazy = {
+  __proto__: hamster,
+*!*
+  stomach: []
+*/!*
+};
+
+// Speedy one found the food
+speedy.eat("apple");
+alert( speedy.stomach ); // apple
+
+// Lazy one's stomach is empty
+alert( lazy.stomach ); // <nothing>
+```
+
+As a common solution, all properties that describe the state of a particular object, like `stomach` above, are usually written into that object. That prevents such problems.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md
new file mode 100644
index 00000000..6f9fb279
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md
@@ -0,0 +1,35 @@
+importance: 5
+
+---
+
+# Why two hamsters are full?
+
+We have two hamsters: `speedy` and `lazy` inheriting from the general `hamster` object. 
+
+When we feed one of them, the other one is also full. Why? How to fix it?
+
+```js run
+let hamster = {
+  stomach: [],
+
+  eat(food) {
+    this.stomach.push(food);
+  }
+};
+
+let speedy = {
+  __proto__: hamster
+};
+
+let lazy = {
+  __proto__: hamster
+};
+
+// This one found the food
+speedy.eat("apple");
+alert( speedy.stomach ); // apple
+
+// This one also has it, why? fix please.
+alert( lazy.stomach ); // apple
+```
+
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
new file mode 100644
index 00000000..40dff06b
--- /dev/null
+++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
@@ -0,0 +1,252 @@
+# Prototypal inheritance
+
+In programming, we often want to take something and extend it.
+
+For instance, we have a `user` object with its properties and methods, and want to make `admin` and `guest` as slightly modified variants of it. We'd like to reuse what we have in `user`, not copy/reimplement its methods, just build a new object on top of it.
+
+*Prototypal inheritance* is a language feature that helps in that.
+
+[cut]
+
+## [[Prototype]]
+
+In JavaScript, objects have a special hidden property `[[Prototype]]` (as named in the specification), that is either `null` or references another object. That object is called "a prototype":
+
+![prototype](object-prototype-empty.png)
+
+That `[[Prototype]]` has a "magical" meaning. When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
+
+The property `[[Prototype]]` is internal and hidden, but there are many ways to set it.
+
+One of them is to use `__proto__`, like this:
+
+```js run
+let animal = {
+  eats: true
+};
+let rabbit = {
+  jumps: true
+};
+
+*!*
+rabbit.__proto__ = animal;
+*/!*
+```
+
+Please note that `__proto__` is *not the same* as `[[Prototype]]`. That's a getter/setter for it. We'll talk about other ways of setting it later, but for now `__proto__` will do just fine.
+
+If we look for a property in `rabbit`, and it's missing, JavaScript automatically takes it from `animal`.
+
+For instance:
+
+```js run
+let animal = {
+  eats: true
+};
+let rabbit = {
+  jumps: true
+};
+
+*!*
+rabbit.__proto__ = animal; // (*)
+*/!*
+
+// we can find both properties in rabbit now:
+*!*
+alert( rabbit.eats ); // true (**)
+*/!*
+alert( rabbit.jumps ); // true
+```
+
+Here the line `(*)` sets `animal` to be a prototype of `rabbit`.
+
+Then, when `alert` tries to read property `rabbit.eats` `(**)`, it's not in `rabbit`, so JavaScript follows the `[[Prototype]]` reference and finds it in `animal` (look from the bottom up):
+
+![](proto-animal-rabbit.png)
+
+Here we can say that "`animal` is the prototype of `rabbit`" or "`rabbit` prototypally inherits from `animal`".
+
+So if `animal` has a lot of useful properties and methods, then they become automatically available in `rabbit`. Such properties are called "inherited".
+
+If we have a method in `animal`, it can be called on `rabbit`:
+
+```js run
+let animal = {
+  eats: true,
+*!*
+  walk() {
+    alert("Animal walk");
+  }
+*/!*
+};
+
+let rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+// walk is taken from the prototype
+*!*
+rabbit.walk(); // Animal walk
+*/!*
+```
+
+The method is automatically taken from the prototype, like this:
+
+![](proto-animal-rabbit-walk.png)
+
+The prototype chain can be longer:
+
+
+```js run
+let animal = {
+  eats: true,
+  walk() {
+    alert("Animal walk");
+  }
+};
+
+let rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+let longEar = {
+  earLength: 10,
+  __proto__: rabbit
+}
+
+// walk is taken from the prototype chain
+longEar.walk(); // Animal walk
+alert(longEar.jumps); // true (from rabbit)
+```
+
+![](proto-animal-rabbit-chain.png)
+
+There are actually only two limitations:
+
+1. The references can't go in circles. JavaScript will throw an error if we try to assign `__proto__` in a circle.
+2. The value of `__proto__` can be either an object or `null`. All other values (like primitives) are ignored.
+
+Also it may be obvious, but still: there can be only one `[[Prototype]]`. An object may not inherit from two others.
+
+## Read/write rules
+
+The prototype is only used for reading properties.
+
+For data properties (not getters/setters) write/delete operations work directly with the object.
+
+In the example below, we assign its own `walk` method to `rabbit`:
+
+```js run
+let animal = {
+  eats: true,
+  walk() {
+    /* this method won't be used by rabbit */  
+  }
+};
+
+let rabbit = {
+  __proto__: animal
+}
+
+*!*
+rabbit.walk = function() {
+  alert("Rabbit! Bounce-bounce!");
+};
+*/!*
+
+rabbit.walk(); // Rabbit! Bounce-bounce!
+```
+
+From now on, `rabbit.walk()` call finds the method immediately in the object and executes it, without using the prototype:
+
+![](proto-animal-rabbit-walk-2.png)
+
+For getters/setters -- if we read/write a property, they are looked up in the prototype and invoked.
+
+For instance, check out `admin.fullName` property in the code below:
+
+```js run
+let user = {
+  name: "John",
+  surname: "Smith",
+
+  set fullName(value) {
+    [this.name, this.surname] = value.split(" ");
+  },
+
+  get fullName() {
+    return `${this.name} ${this.surname}`;
+  }
+};
+
+let admin = {
+  __proto__: user,
+  isAdmin: true
+};
+
+alert(admin.fullName); // John Smith (*)
+
+// setter triggers!
+admin.fullName = "Alice Cooper"; // (**)
+```
+
+Here in the line `(*)` the property `admin.fullName` has a getter in the prototype `user`, so it is called. And in the line `(**)` the property has a setter in the prototype, so it is called.
+
+## The value of "this"
+
+An interesting question may arise in the example above: what's the value of `this` inside `set fullName(value)`? Where the properties `this.name` and `this.surname` are written: `user` or `admin`?
+
+The answer is simple: `this` is not affected by prototypes at all.
+
+**No matter where the method is found: in an object or its prototype. In a method call, `this` is always the object before the dot.**
+
+So, the setter actually uses `admin` as `this`, not `user`.
+
+That is actually a super-important thing, because we may have a big object with many methods and inherit from it. Then we can run its methods on inherited objects and they will modify the state of these objects, not the big one.
+
+For instance, here `animal` represents a "method storage", and `rabbit` makes use of it.
+
+The call `rabbit.sleep()` sets `this.isSleeping` on the `rabbit` object:
+
+```js run
+// animal has methods
+let animal = {
+  walk() {
+    if (!this.isSleeping) {
+      alert(`I walk`);
+    }
+  },
+  sleep() {
+    this.isSleeping = true;
+  }
+};
+
+let rabbit = {
+  name: "White Rabbit",
+  __proto__: animal
+};
+
+// modifies rabbit.isSleeping
+rabbit.sleep();
+
+alert(rabbit.isSleeping); // true
+alert(animal.isSleeping); // undefined (no such property in the prototype)
+```
+
+The resulting picture:
+
+![](proto-animal-rabbit-walk-3.png)
+
+If we had other objects like `bird`, `snake` etc inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects.
+
+As a result, methods are shared, but the object state is not.
+
+## Summary
+
+- In JavaScript, all objects have a hidden `[[Prototype]]` property that's either another object or `null`.
+- We can use `obj.__proto__` to access it (there are other ways too, to be covered soon).
+- The object referenced by `[[Prototype]]` is called a "prototype".
+- If we want to read a property of `obj` or call a method, and it doesn't exist, then JavaScript tries to find it in the prototype. Write/delete operations work directly on the object, they don't use the prototype (unless the property is actually a setter).
+- If we call `obj.method()`, and the `method` is taken from the prototype, `this` still references `obj`. So methods always work with the current object even if they are inherited.
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png
new file mode 100644
index 00000000..1d228b5c
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png
new file mode 100644
index 00000000..a4c195ad
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png
new file mode 100644
index 00000000..a302343e
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png
new file mode 100644
index 00000000..4d331199
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png
new file mode 100644
index 00000000..19c1881a
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png
new file mode 100644
index 00000000..cd38624a
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png
new file mode 100644
index 00000000..0ea869d3
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png
new file mode 100644
index 00000000..194db77e
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png
new file mode 100644
index 00000000..5bd21114
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png
new file mode 100644
index 00000000..1e4ef6ef
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png
new file mode 100644
index 00000000..c18e0205
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png
new file mode 100644
index 00000000..4d9e8ec0
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png
new file mode 100644
index 00000000..aed69c59
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png
new file mode 100644
index 00000000..2b11b256
Binary files /dev/null and b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md b/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md
new file mode 100644
index 00000000..771e3061
--- /dev/null
+++ b/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md
@@ -0,0 +1,20 @@
+
+Answers:
+
+1. `true`. 
+
+    The assignment to `Rabbit.prototype` sets up `[[Prototype]]` for new objects, but it does not affect the existing ones. 
+
+2. `false`. 
+
+    Objects are assigned by reference. The object from `Rabbit.prototype` is not duplicated, it's still a single object is referenced both by `Rabbit.prototype` and by the `[[Prototype]]` of `rabbit`. 
+
+    So when we change its content through one reference, it is visible through the other one.
+
+3. `true`.
+
+    All `delete` operations are applied directly to the object. Here `delete rabbit.eats` tries to remove `eats` property from `rabbit`, but it doesn't have it. So the operation won't have any effect.
+
+4. `undefined`.
+
+    The property `eats` is deleted from the prototype, it doesn't exist any more.
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md b/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md
new file mode 100644
index 00000000..4b8522d3
--- /dev/null
+++ b/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md
@@ -0,0 +1,89 @@
+importance: 5
+
+---
+
+# Changing "prototype"
+
+In the code below we create `new Rabbit`, and then try to modify its prototype.
+
+In the start, we have this code:
+
+```js run
+function Rabbit() {}
+Rabbit.prototype = {
+  eats: true
+};
+
+let rabbit = new Rabbit();
+
+alert( rabbit.eats ); // true
+```
+
+
+1. We added one more string (emphasized), what `alert` shows now?
+
+    ```js
+    function Rabbit() {}
+    Rabbit.prototype = {
+      eats: true
+    };
+
+    let rabbit = new Rabbit();
+
+    *!*
+    Rabbit.prototype = {};
+    */!*
+
+    alert( rabbit.eats ); // ?
+    ```
+
+2. ...And if the code is like this (replaced one line)?
+
+    ```js
+    function Rabbit() {}
+    Rabbit.prototype = {
+      eats: true
+    };
+
+    let rabbit = new Rabbit();
+
+    *!*
+    Rabbit.prototype.eats = false;
+    */!*
+
+    alert( rabbit.eats ); // ?
+    ```
+
+3. Like this (replaced one line)?
+
+    ```js
+    function Rabbit() {}
+    Rabbit.prototype = {
+      eats: true
+    };
+
+    let rabbit = new Rabbit();
+
+    *!*
+    delete rabbit.eats;
+    */!*
+
+    alert( rabbit.eats ); // ?
+    ```
+
+4. The last variant:
+
+    ```js
+    function Rabbit() {}
+    Rabbit.prototype = {
+      eats: true
+    };
+
+    let rabbit = new Rabbit();
+
+    *!*
+    delete Rabbit.prototype.eats;
+    */!*
+
+    alert( rabbit.eats ); // ?
+    ```
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md b/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md
new file mode 100644
index 00000000..43190e16
--- /dev/null
+++ b/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md
@@ -0,0 +1,44 @@
+We can use such approach if we are sure that `"constructor"` property has the correct value.
+
+For instance, if we don't touch the default `"prototype"`, then this code works for sure:
+
+```js run
+function User(name) {
+  this.name = name;
+}
+
+let user = new User('John');
+let user2 = new user.constructor('Pete');
+
+alert( user2.name ); // Pete (worked!)
+```
+
+It worked, because `User.prototype.constructor == User`.
+
+..But if someone, so to say, overwrites `User.prototype` and forgets to recreate `"constructor"`, then it would fail.
+
+For instance:
+
+```js run
+function User(name) {
+  this.name = name;
+}
+*!*
+User.prototype = {}; // (*)
+*/!*
+
+let user = new User('John');
+let user2 = new user.constructor('Pete');
+
+alert( user2.name ); // undefined
+```
+
+Why `user2.name` is `undefined`?
+
+Here's how `new user.constructor('Pete')` works:
+
+1. First, it looks for `constructor` in `user`. Nothing.
+2. Then it follows the prototype chain. The prototype of `user` is `User.prototype`, and it also has nothing.
+3. The value of `User.prototype` is a plain object `{}`, its prototype is `Object.prototype`. And there is `Object.prototype.constructor == Object`. So it is used.
+
+At the end, we have `let user2 = new Object('Pete')`. The built-in `Object` constructor ignores arguments, it always creates an empty object -- that's what we have in `user2` after all.
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md b/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md
new file mode 100644
index 00000000..934f3470
--- /dev/null
+++ b/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md
@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# Create an object with the same constructor
+
+Imagine, we have an arbitrary object `obj`, created by a constructor function -- we don't know which one, but we'd like to create a new object using it.
+
+Can we do it like that?
+
+```js
+let obj2 = new obj.constructor();
+```
+
+Give an example of a constructor function for `obj` which lets such code work right. And an example that makes it work wrong.
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/article.md b/1-js/07-object-oriented-programming/04-function-prototype/article.md
new file mode 100644
index 00000000..27c67e32
--- /dev/null
+++ b/1-js/07-object-oriented-programming/04-function-prototype/article.md
@@ -0,0 +1,176 @@
+# F.prototype
+
+In modern JavaScript we can set a prototype using `__proto__`. But it wasn't like that all the time.
+
+[cut]
+
+JavaScript has had prototypal inheritance from the beginning. It was one of the core features of the language.
+
+But in the old times, there was another (and the only) way to set it: to use a `"prototype"` property of the constructor function. And there are still many scripts that use it.
+
+## The "prototype" property
+
+As we know already, `new F()` creates a new object. But what we didn't use yet `F.prototype` property.
+
+That property is used by the JavaScript itself to set `[[Prototype]]` for new objects.
+
+**When a new object is created with `new F()`, the object's `[[Prototype]]` is set to `F.prototype`.**
+
+Please note that `F.prototype` here means a regular property named `"prototype"` on `F`. It sounds something similar to the term "prototype", but here we really mean a regular property with this name.
+
+Here's the example:
+
+```js run
+let animal = {
+  eats: true
+};
+
+function Rabbit(name) {
+  this.name = name;
+}
+
+*!*
+Rabbit.prototype = animal;
+*/!*
+
+let rabbit = new Rabbit("White Rabbit"); //  rabbit.__proto__ == animal
+
+alert( rabbit.eats ); // true
+```
+
+Setting `Rabbit.prototype = animal` literally states the following: "When a `new Rabbit` is created, assign its `[[Prototype]]` to `animal`".
+
+That's the resulting picture:
+
+![](proto-constructor-animal-rabbit.png)
+
+On the picture, `"prototype"` is a horizontal arrow, it's a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`.
+
+
+## Default F.prototype, constructor property
+
+Every function has the `"prototype"` property even if we don't supply it.
+
+The default `"prototype"` is an object with the only property `constructor` that points back to the function itself.
+
+Like this:
+
+```js
+function Rabbit() {}
+
+/* default prototype
+Rabbit.prototype = { constructor: Rabbit };
+*/
+```
+
+![](function-prototype-constructor.png)
+
+We can check it:
+
+```js run
+function Rabbit() {}
+// by default:
+// Rabbit.prototype = { constructor: Rabbit }
+
+alert( Rabbit.prototype.constructor == Rabbit ); // true
+```
+
+Naturally, it we do nothing, the `constructor` property is available to all rabbits through  `[[Prototype]]`:
+
+```js run
+function Rabbit() {}
+// by default:
+// Rabbit.prototype = { constructor: Rabbit }
+
+let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}
+
+alert(rabbit.constructor == Rabbit); // true (from prototype)
+```
+
+![](rabbit-prototype-constructor.png)
+
+We can use `constructor` property to create a new object using the same constructor as the existing one.
+
+Like here:
+
+```js run
+function Rabbit(name) {
+  this.name = name;
+  alert(name);
+}
+
+let rabbit = new Rabbit("White Rabbit");
+
+*!*
+let rabbit2 = new rabbit.constructor("Black Rabbit");
+*/!*
+```
+
+That's handy when we have an object, don't know which constructor was used for it (e.g. it comes from a 3rd party library), and we need to create another one of the same kind.
+
+But probably the most important thing about `"constructor"` is that...
+
+**...JavaScript itself does not ensure the right `"constructor"` value.**
+
+Yes, it exists in the default `"prototype"` for functions, but that's all. What happens with it later -- is totally on us.
+
+In particular, if we replace the default prototype as a whole, then there will be no `"constructor"` in it.
+
+For instance:
+
+```js run
+function Rabbit() {}
+Rabbit.prototype = {
+  jumps: true
+};
+
+let rabbit = new Rabbit();
+*!*
+alert(rabbit.constructor === Rabbit); // false
+*/!*
+```
+
+So, to keep the right `"constructor"` we can choose to add/remove properties to the default `"prototype"` instead of overwriting it as a whole:
+
+```js
+function Rabbit() {}
+
+// Not overwrite Rabbit.prototype totally
+// just add to it
+Rabbit.prototype.jumps = true
+// the default Rabbit.prototype.constructor is preserved
+```
+
+Or, alternatively, recreate the `constructor` property it manually:
+
+```js
+Rabbit.prototype = {
+  jumps: true,
+*!*
+  constructor: Rabbit
+*/!*
+};
+
+// now constructor is also correct, because we added it
+```
+
+
+## Summary
+
+In this chapter we briefly described the way of setting a `[[Prototype]]` for objects created via a constructor function. Later we'll see more advanced programming patterns that rely on it.
+
+Everything is quite simple, just few notes to make things clear:
+
+- The `F.prototype` property is not the same as `[[Prototype]]`. The only thing `F.prototype` does: it sets `[[Prototype]]` of new objects when `new F()` is called.
+- The value of `F.prototype` should be either an object or null: other values won't work.
+-  The `"prototype"` property only has such a special effect when is set to a constructor function, and invoked with `new`.
+
+On regular objects the `prototype` is nothing special:
+```js
+let user = {
+  name: "John",
+  prototype: "Bla-bla" // no magic at all
+};
+```
+
+By default all functions have `F.prototype = { constructor: F }`, so we can get the constructor of an object by accessing its `"constructor"` property.
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png
new file mode 100644
index 00000000..0dbc7b8f
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png
new file mode 100644
index 00000000..e38cb85b
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png
new file mode 100644
index 00000000..83258d06
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png
new file mode 100644
index 00000000..d77cc8f4
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png
new file mode 100644
index 00000000..fa6a2943
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png
new file mode 100644
index 00000000..9368d7e5
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png
new file mode 100644
index 00000000..e7c6bdb2
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png
new file mode 100644
index 00000000..34c256bb
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png
new file mode 100644
index 00000000..d97d87d2
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png
new file mode 100644
index 00000000..76ce4c9a
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png
new file mode 100644
index 00000000..3eec740f
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png
new file mode 100644
index 00000000..ed28a388
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png
new file mode 100644
index 00000000..3254270f
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png
new file mode 100644
index 00000000..f794d7b8
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png
new file mode 100644
index 00000000..d3ef3448
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png
new file mode 100644
index 00000000..45cbb6ba
Binary files /dev/null and b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md b/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md
new file mode 100644
index 00000000..ebd2f44e
--- /dev/null
+++ b/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md
@@ -0,0 +1,13 @@
+
+
+```js run
+Function.prototype.defer = function(ms) {
+  setTimeout(this, ms);
+};
+
+function f() {
+  alert("Hello!");
+}
+
+f.defer(1000); // shows "Hello!" after 1 sec
+```
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md b/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md
new file mode 100644
index 00000000..d3b3a51c
--- /dev/null
+++ b/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md
@@ -0,0 +1,17 @@
+importance: 5
+
+---
+
+# Add method "f.defer(ms)" to functions
+
+Add to the prototype of all functions the method `defer(ms)`, that runs the function after `ms` milliseconds.
+
+After you do it, such code should work:
+
+```js
+function f() {
+  alert("Hello!");
+}
+
+f.defer(1000); // shows "Hello!" after 1 second
+```
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md
new file mode 100644
index 00000000..e3651683
--- /dev/null
+++ b/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md
@@ -0,0 +1,17 @@
+
+
+```js run
+Function.prototype.defer = function(ms) {
+  let f = this;
+  return function(...args) {
+    setTimeout(() => f.apply(this, args), ms);
+  }
+};
+
+// check it
+function f(a, b) {
+  alert( a + b );
+}
+
+f.defer(1000)(1, 2); // shows 3 after 1 sec
+```
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md b/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md
new file mode 100644
index 00000000..4d3823bb
--- /dev/null
+++ b/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md
@@ -0,0 +1,19 @@
+importance: 4
+
+---
+
+# Add the decorating "defer()" to functions
+
+Add to the prototype of all functions the method `defer(ms)`, that returns a wrapper, delaying the call by `ms` milliseconds.
+
+Here's an example of how it should work:
+
+```js
+function f(a, b) {
+  alert( a + b );
+}
+
+f.defer(1000)(1, 2); // shows 3 after 1 second
+```
+
+Please note that the arguments should be passed to the original function.
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/article.md b/1-js/07-object-oriented-programming/05-native-prototypes/article.md
new file mode 100644
index 00000000..6c29c7f1
--- /dev/null
+++ b/1-js/07-object-oriented-programming/05-native-prototypes/article.md
@@ -0,0 +1,180 @@
+# Native prototypes
+
+The `"prototype"` property is widely used by the core of JavaScript itself. All built-in constructor functions use it.
+
+We'll see how it is for plain objects first, and then for more complex ones.
+
+## Object.prototype
+
+Let's say we output an empty object:
+
+```js run
+let obj = {};
+alert( obj ); // "[object Object]" ?
+```
+
+Where's the code that generates the string `"[object Object]"`? That's a built-in `toString` method, but where is it? The `obj` is empty!
+
+...But the short notation `obj = {}` is the same as `obj = new Object()`, where `Object` -- is a built-in object constructor function. And that function has `Object.prototype` that references a huge object with `toString` and other functions.
+
+Like this (all that is built-in):
+
+![](object-prototype.png)
+
+When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` by the rule that we've discussed in the previous chapter:
+
+![](object-prototype-1.png)
+
+Afterwards when `obj.toString()` is called -- the method is taken from `Object.prototype`.
+
+We can check it like this:
+
+```js run
+let obj = {};
+
+alert(obj.__proto__ === Object.prototype); // true
+// obj.toString === obj.__proto__toString == Object.prototype.toString
+```
+
+Please note that there is no additional `[[Prototype]]` in the chain above `Object.prototype`:
+
+```js run
+alert(Object.prototype.__proto__); // null
+```
+
+## Other built-in prototypes
+
+Other built-in objects such as `Array`, `Date`, `Function` and others also keep methods in prototypes.
+
+For instance, when we create an array `[1, 2, 3]`, the default `new Array()` constructor is  used internally. So the array data is written into the new object, and `Array.prototype` becomes its prototype and provides methods. That's very memory-efficient.
+
+By specification, all built-in prototypes have `Object.prototype` on the top. Sometimes people say that "everything inherits from objects".
+
+Here's the overall picture (for 3 built-ins to fit):
+
+![](native-prototypes-classes.png)
+
+Let's check the prototypes manually:
+
+```js run
+let arr = [1, 2, 3];
+
+// it inherits from Array.prototype?
+alert( arr.__proto__ === Array.prototype ); // true
+
+// then from Object.prototype?
+alert( arr.__proto__.__proto__ === Object.prototype ); // true
+
+// and null on the top.
+alert( arr.__proto__.__proto__.__proto__ ); // null
+```
+
+Some methods in prototypes may overlap, for instance, `Array.prototype` has its own `toString` that lists comma-delimited elements:
+
+```js run
+let arr = [1, 2, 3]
+alert(arr); // 1,2,3 <-- the result of Array.prototype.toString
+```
+
+As we've seen before, `Object.prototype` has `toString` as well, but `Array.prototype` is closer in the chain, so the array variant is used.
+
+
+![](native-prototypes-array-tostring.png)
+
+
+In-browser tools like Chrome developer console also show inheritance (may need to use `console.dir` for built-in objects):
+
+![](console_dir_array.png)
+
+Other built-in objects also work the same way. Even functions. They are objects of a built-in `Function` constructor, and their methods: `call/apply` and others are taken from `Function.prototype`. Functions have their own `toString` too.
+
+```js run
+function f() {}
+
+alert(f.__proto__ == Function.prototype); // true
+alert(f.__proto__.__proto__ == Object.prototype); // true, inherit from objects
+```
+
+## Primitives
+
+The most intricate thing happens with strings, numbers and booleans.
+
+As we remember, they are not objects. But if we try to access their properties, then temporary wrapper objects are created using built-in constructors `String`, `Number`, `Boolean`, they provide the methods and disappear.
+
+These objects are created invisibly to us and most engines optimize them out, but the specification describes it exactly this way. Methods of these objects also reside in prototypes, available as `String.prototype`, `Number.prototype` and `Boolean.prototype`.
+
+```warn header="Values `null` and `undefined` have no object wrappers"
+Special values `null` and `undefined` stand apart. They have no object wrappers, so methods and properties are not available for them. And there are no corresponding prototypes too.
+```
+
+## Changing native prototypes [#native-prototype-change]
+
+Native prototypes can be modified. For instance, if we add a method to `String.prototype`,  it becomes available to all strings:
+
+```js run
+String.prototype.show = function() {
+  alert(this);
+};
+
+"BOOM!".show(); // BOOM!
+```
+
+During the process of development we may have ideas which new built-in methods we'd like to have. And there may be a slight temptation to add them to native prototypes. But that is generally a bad idea.
+
+Prototypes are global, so it's easy to get a conflict. If two libraries add a method `String.prototype.show`, then one of them overwrites the other one.
+
+In modern programming, there is only one case when modifying native prototypes is approved. That's polyfills. In other words, if there's a method in JavaScript specification that is not yet supported by our JavaScript engine (or any of those that we want to support), then may implement it manually and populate the built-in prototype with it.
+
+For instance:
+
+```js run
+if (!String.prototype.repeat) { // if there's no such method
+  // add it to the prototype
+
+  String.prototype.repeat = function(n) {
+    // repeat the string n times
+
+    // actually, the code should be more complex than that,
+    // throw errors for negative values of "n"
+    // the full algorithm is in the specification
+    return new Array(n + 1).join(this);
+  };
+}
+
+alert( "La".repeat(3) ); // LaLaLa
+```
+
+## Borrowing from prototypes
+
+In the chapter <info:call-apply-decorators#method-borrowing> we talked about method borrowing:
+
+```js run
+function showArgs() {
+*!*
+  // borrow join from array and call in the context of arguments
+  alert( [].join.call(arguments, " - ") );
+*/!*
+}
+
+showArgs("John", "Pete", "Alice"); // John - Pete - Alice
+```
+
+Because `join` resides in `Array.prototype`, we can call it from there directly and rewrite it as:
+
+```js
+function showArgs() {
+*!*
+  alert( Array.prototype.join.call(arguments, " - ") );
+*/!*
+}
+```
+
+That's more efficient, because it avoids the creation of an extra array object `[]`. On the other hand, it is longer to write.
+
+## Summary
+
+- All built-in objects follow the same pattern:
+    - The methods are stored in the prototype (`Array.prototype`, `Object.prototype`, `Date.prototype` etc).
+    - The object itself stores only the data (array items, object properties, the date).
+- Primitives also store methods in prototypes of wrapper objects: `Number.prototype`, `String.prototype`, `Boolean.prototype`. There are no wrapper objects only for `undefined` and `null`.
+- Built-in prototypes can be modified or populated with new methods. But it's not recommended to change them. Probably the only allowable cause is when we add-in a new standard, but not yet supported by the engine JavaScript method.
diff --git a/1-js/9-prototypes/5-class-inheritance/console_dir_array.png b/1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png
old mode 100755
new mode 100644
similarity index 100%
rename from 1-js/9-prototypes/5-class-inheritance/console_dir_array.png
rename to 1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png
new file mode 100644
index 00000000..0dbc7b8f
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png
new file mode 100644
index 00000000..e38cb85b
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png
new file mode 100644
index 00000000..83258d06
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png
new file mode 100644
index 00000000..d77cc8f4
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png
new file mode 100644
index 00000000..fa6a2943
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png
new file mode 100644
index 00000000..9368d7e5
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png
new file mode 100644
index 00000000..e7c6bdb2
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png
new file mode 100644
index 00000000..34c256bb
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png
new file mode 100644
index 00000000..7c2e3f9c
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png
new file mode 100644
index 00000000..fec1facb
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png
new file mode 100644
index 00000000..d97d87d2
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png
new file mode 100644
index 00000000..76ce4c9a
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png
new file mode 100644
index 00000000..3eec740f
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png
new file mode 100644
index 00000000..ed28a388
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png
new file mode 100644
index 00000000..d3ef3448
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png
new file mode 100644
index 00000000..45cbb6ba
Binary files /dev/null and b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md b/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md
new file mode 100644
index 00000000..debaecd6
--- /dev/null
+++ b/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md
@@ -0,0 +1,29 @@
+
+The method can take all enumerable keys using `Object.keys` and output their list.
+
+To make `toString` non-enumerable, let's define it using a property descriptor. The syntax of `Object.create` allows to provide an object with property descriptors as the second argument.
+
+```js run
+*!*
+let dictionary = Object.create(null, {
+  toString: { // define toString property
+    value() { // the value is a function
+      return Object.keys(this).join();
+    }
+  }
+});
+*/!*
+
+dictionary.apple = "Apple";
+dictionary.__proto__ = "test";
+
+// apple and __proto__ is in the loop
+for(let key in dictionary) {
+  alert(key); // "apple", then "__proto__"
+}  
+
+// comma-separated list of properties by toString
+alert(dictionary); // "apple,__proto__"
+```
+
+When we create a property using a descriptor, its flags are `false` by default. So in the code above, `dictionary.toString` is non-enumerable.
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md b/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md
new file mode 100644
index 00000000..0d831f2c
--- /dev/null
+++ b/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md
@@ -0,0 +1,31 @@
+importance: 5
+
+---
+
+# Add toString to the dictionary
+
+There's an object `dictionary`, created as `Object.create(null)`, to store any `key/value` pairs.
+
+Add method `dictionary.toString()` into it, that should return a comma-delimited list of keys. Your `toString` should not show up in `for..in` over the object.
+
+Here's how it should work:
+
+```js
+let dictionary = Object.create(null);
+
+*!*
+// your code to add dictionary.toString method
+*/!*
+
+// add some data
+dictionary.apple = "Apple";
+dictionary.__proto__ = "test"; // __proto__ is a regular property key here
+
+// only apple and __proto__ are in the loop
+for(let key in dictionary) {
+  alert(key); // "apple", then "__proto__"
+}  
+
+// your toString in action
+alert(dictionary); // "apple,__proto__"
+```
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md b/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md
new file mode 100644
index 00000000..90d3118b
--- /dev/null
+++ b/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md
@@ -0,0 +1,20 @@
+
+The first call has `this == rabbit`, the other ones have `this` equal to `Rabbit.prototype`, because it's actually the object before the dot.
+
+So only the first call shows `Rabbit`, other ones show `undefined`:
+
+```js run
+function Rabbit(name) {
+  this.name = name;
+}
+Rabbit.prototype.sayHi = function() {
+  alert( this.name );
+}
+
+let rabbit = new Rabbit("Rabbit");
+
+rabbit.sayHi();                        // Rabbit
+Rabbit.prototype.sayHi();              // undefined
+Object.getPrototypeOf(rabbit).sayHi(); // undefined
+rabbit.__proto__.sayHi();              // undefined
+```
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md b/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md
new file mode 100644
index 00000000..92653bd8
--- /dev/null
+++ b/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md
@@ -0,0 +1,27 @@
+importance: 5
+
+---
+
+# The difference beteeen calls
+
+Let's create a new `rabbit` object:
+
+```js
+function Rabbit(name) {
+  this.name = name;
+}
+Rabbit.prototype.sayHi = function() {
+  alert(this.name);
+};
+
+let rabbit = new Rabbit("Rabbit");
+```
+
+These calls do the same thing or not?
+
+```js
+rabbit.sayHi();
+Rabbit.prototype.sayHi();
+Object.getPrototypeOf(rabbit).sayHi();
+rabbit.__proto__.sayHi();
+```
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/article.md b/1-js/07-object-oriented-programming/06-prototype-methods/article.md
new file mode 100644
index 00000000..ec14fd48
--- /dev/null
+++ b/1-js/07-object-oriented-programming/06-prototype-methods/article.md
@@ -0,0 +1,255 @@
+
+# Methods for prototypes
+
+In this chapter we cover additional methods to work with a prototype.
+
+There are also other ways to get/set a prototype, besides those that we already know:
+
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
+- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.
+- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.
+
+[cut]
+
+For instance:
+
+```js run
+let animal = {
+  eats: true
+};
+
+// create a new object with animal as a prototype
+*!*
+let rabbit = Object.create(animal);
+*/!*
+
+alert(rabbit.eats); // true
+*!*
+alert(Object.getPrototypeOf(rabbit) === animal); // get the prototype of rabbit
+*/!*
+
+*!*
+Object.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {}
+*/!*
+```
+
+`Object.create` has an optional second argument: property descriptors. We can provide additional properties to the new object there, like this:
+
+```js run
+let animal = {
+  eats: true
+};
+
+let rabbit = Object.create(animal, {
+  jumps: {
+    value: true
+  }
+});
+
+alert(rabbit.jumps); // true
+```
+
+The descriptors are in the same format as described in the chapter <info:property-descriptors>.
+
+We can use `Object.create` to perform a full object cloning, like this:
+
+```js
+// fully identical shallow clone of obj
+let clone = Object.create(obj, Object.getOwnPropertyDescriptors(obj));
+```
+
+This call makes a truly exact copy of `obj`, including all properties: enumerable and non-enumerable, data properties and setters/getters -- everything, and with the right `[[Prototype]]`. But not an in-depth copy of course.
+
+## Brief history
+
+If we count all the ways to manage `[[Prototype]]`, there's a lot! Many ways to do the same!
+
+Why so?
+
+That's for historical reasons.
+
+- The `"prototype"` property of a constructor function works since very ancient times.
+- Later in the year 2012: `Object.create` appeared in the standard. It allowed to create objects with the given prototype, but did not allow to get/set it. So browsers implemented non-standard `__proto__` accessor that allowed to get/set a prototype at any time.
+- Later in the year 2015: `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard. The `__proto__` was de-facto implemented everywhere, so it made its way to the Annex B of the standard, that is optional for non-browser environments.
+
+As of now we have all these ways at our disposal.
+
+Technically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time, and then do not modify: `rabbit` inherits from `animal`, and that is not going to change. And JavaScript engines are highly optimized to that. Changing a prototype "on-the-fly" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation. But it is possible.
+
+## "Very plain" objects
+
+As we know, objects can be used as associative arrays to store key/value pairs.
+
+...But if we try to store *user-provided* keys in it (for instance, a user-entered dictionary), we can see an interesting glitch: all keys work fine except `"__proto__"`.
+
+Check out the example:
+
+```js run
+let obj = {};
+
+let key = prompt("What's the key?", "__proto__");
+obj[key] = "some value";
+
+alert(obj[key]); // [object Object], not "some value"!
+```
+
+Here if the user types in `__proto__`, the assignment is ignored!
+
+That shouldn't surprise us. The `__proto__` property is special: it must be either an object or `null`, a string can not become a prototype.
+
+But we did not intend to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug. Here the consequences are not terrible. But in other cases the prototype may indeed be changed, so the execution may go wrong in totally unexpected ways.
+
+What's worst -- usually developers do not think about such possibility at all. That makes such bugs hard to notice and even turn them into vulnerabilities, especially when JavaScript is used on server-side.
+
+Such thing happens only with `__proto__`. All other properties are "assignable" normally.
+
+How to evade the problem?
+
+First, we can just switch to using `Map`, then everything's fine.
+
+But `Object` also can serve us well here, because language creators gave a thought to that problem long ago.
+
+The `__proto__` is not a property of an object, but an accessor property of `Object.prototype`:
+
+![](object-prototype-2.png)
+
+So, if `obj.__proto__` is read or assigned, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`.
+
+As it was said in the beginning: `__proto__` is a way to access `[[Prototype]]`, it is not `[[Prototype]]` itself.
+
+Now, if we want to use an object as an associative array, we can do it with a little trick:
+
+```js run
+*!*
+let obj = Object.create(null);
+*/!*
+
+let key = prompt("What's the key?", "__proto__");
+obj[key] = "some value";
+
+alert(obj[key]); // "some value"
+```
+
+`Object.create(null)` creates an empty object without a prototype (`[[Prototype]]` is `null`):
+
+![](object-prototype-null.png)
+
+So, there is no inherited getter/setter for `__proto__`. Now it is processed as a regular data property, so the example above works right.
+
+We can call such object "very plain" or "pure dictionary objects", because they are even simpler than regular plain object `{...}`.
+
+A downside is that such objects lack any built-in object methods, e.g. `toString`:
+
+```js run
+*!*
+let obj = Object.create(null);
+*/!*
+
+alert(obj); // Error (no toString)
+```
+
+...But that's usually fine for associative arrays.
+
+Please note that most object-related methods are `Object.something(...)`, like `Object.keys(obj)` -- they are not in the prototype, so they will keep working on such objects:
+
+
+```js run
+let chineseDictionary = Object.create(null);
+chineseDictionary.hello = "ni hao";
+chineseDictionary.bye = "zai jian";
+
+alert(Object.keys(chineseDictionary)); // hello,bye
+```
+
+## Getting all properties
+
+There are many ways to get keys/values from an object.
+
+We already know these ones:
+
+- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs. These methods only list *enumerable* properties, and those that have *strings as keys*.
+
+If we want symbolic properties:
+
+- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic property names.
+
+If we want non-enumerable properties:
+
+- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string property names.
+
+If we want *all* properties:
+
+- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own property names.
+
+These methods are a bit different about which properties they return, but all of them operate on the object itself. Properties from the prototype are not listed.
+
+The `for..in` loop is different: it loops over inherited properties too.
+
+For instance:
+
+```js run
+let animal = {
+  eats: true
+};
+
+let rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+*!*
+// only own keys
+alert(Object.keys(rabbit)); // jumps
+*/!*
+
+*!*
+// inherited keys too
+for(let prop in rabbit) alert(prop); // jumps, then eats
+*/!*
+```
+
+If we want to distinguish inherited properties, there's a built-in method [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+
+So we can filter out inherited properties (or do something else with them):
+
+```js run
+let animal = {
+  eats: true
+};
+
+let rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+for(let prop in rabbit) {
+  let isOwn = rabbit.hasOwnProperty(prop);
+  alert(`${prop}: ${isOwn}`); // jumps:true, then eats:false
+}
+```
+Here we have the following inheritance chain: `rabbit`, then `animal`, then `Object.prototype` (because `animal` is a literal object `{...}`, so it's by default), and then `null` above it:
+
+![](rabbit-animal-object.png)
+
+Note, there's one funny thing. Where is the method `rabbit.hasOwnProperty` coming from? Looking at the chain we can see that the method is provided by `Object.prototype.hasOwnProperty`. In other words, it's inherited.
+
+...But why `hasOwnProperty` does not appear in `for..in` loop, if it lists all inherited properties?  The answer is simple: it's not enumerable. Just like all other properties of `Object.prototype`. That's why they are not listed.
+
+## Summary
+
+Here's a brief list of methods we discussed in this chapter -- as a recap:
+
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.
+- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter).
+- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter).
+- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs.
+- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic property names.
+- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string property names.
+- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own property names.
+- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+
+We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just as other methods.
+
+We can create an object without a prototype by `Object.create(null)`. Such objects are used as "pure dictionaries", they have no issues with `"__proto__"` as the key.
+
+All methods that return object properties (like `Object.keys` and others) -- return "own" properties. If we want inherited ones, then we can use `for..in`.
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png
new file mode 100644
index 00000000..ee42f6b9
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png
new file mode 100644
index 00000000..1917c663
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png
new file mode 100644
index 00000000..7c2e3f9c
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png
new file mode 100644
index 00000000..fec1facb
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png
new file mode 100644
index 00000000..3254270f
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png
new file mode 100644
index 00000000..f794d7b8
Binary files /dev/null and b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
new file mode 100644
index 00000000..55f945ca
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
@@ -0,0 +1,46 @@
+Here's the line with the error:
+
+```js
+Rabbit.prototype = Animal.prototype;
+```
+
+Here `Rabbit.prototype` and `Animal.prototype` become the same object. So methods of both classes become mixed in that object.
+
+As a result, `Rabbit.prototype.walk` overwrites `Animal.prototype.walk`, so all animals start to bounce:
+
+```js run
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.walk = function() {
+  alert(this.name + ' walks');
+};
+
+function Rabbit(name) {
+  this.name = name;
+}
+
+*!*
+Rabbit.prototype = Animal.prototype;
+*/!*
+
+Rabbit.prototype.walk = function() {
+  alert(this.name + " bounces!");
+};
+
+*!*
+let animal = new Animal("pig");
+animal.walk(); // pig bounces!
+*/!*
+```
+
+The correct variant would be:
+
+```js
+Rabbit.prototype.__proto__ = Animal.prototype;
+// or like this:
+Rabbit.prototype = Object.create(Animal.prototype);
+```
+
+That makes prototypes separate, each of them stores methods of the corresponding class, but `Rabbit.prototype` inherits from `Animal.prototype`.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
new file mode 100644
index 00000000..ee486c3d
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
@@ -0,0 +1,29 @@
+importance: 5
+
+---
+
+# An error in the inheritance
+
+Find an error in the prototypal inheritance below.
+
+What's wrong? What are consequences going to be?
+
+```js
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.walk = function() {
+  alert(this.name + ' walks');
+};
+
+function Rabbit(name) {
+  this.name = name;
+}
+
+Rabbit.prototype = Animal.prototype;
+
+Rabbit.prototype.walk = function() {
+  alert(this.name + " bounces!");
+};
+```
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
new file mode 100644
index 00000000..300b25d9
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
@@ -0,0 +1 @@
+Please note that properties that were internal in functional style (`template`, `timer`) and the internal method `render` are marked private with the underscore `_`.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
new file mode 100644
index 00000000..7a193b79
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
@@ -0,0 +1,32 @@
+function Clock({ template }) {
+  this._template = template;
+}
+
+Clock.prototype._render = function() {
+  let date = new Date();
+
+  let hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  let mins = date.getMinutes();
+  if (mins < 10) min = '0' + mins;
+
+  let secs = date.getSeconds();
+  if (secs < 10) secs = '0' + secs;
+
+  let output = this._template
+    .replace('h', hours)
+    .replace('m', mins)
+    .replace('s', secs);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  this._timer = setInterval(() => this._render(), 1000);
+};
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html
new file mode 100644
index 00000000..fdee13d0
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <script src="clock.js"></script>
+  <script>
+    let clock = new Clock({template: 'h:m:s'});
+    clock.start();
+  </script>
+
+</body>
+</html>
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
new file mode 100644
index 00000000..26081a35
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
@@ -0,0 +1,34 @@
+function Clock({ template }) {
+
+  let timer;
+
+  function render() {
+    let date = new Date();
+
+    let hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+
+    let mins = date.getMinutes();
+    if (mins < 10) min = '0' + mins;
+
+    let secs = date.getSeconds();
+    if (secs < 10) secs = '0' + secs;
+
+    let output = template
+      .replace('h', hours)
+      .replace('m', mins)
+      .replace('s', secs);
+
+    console.log(output);
+  }
+
+  this.stop = function() {
+    clearInterval(timer);
+  };
+
+  this.start = function() {
+    render();
+    timer = setInterval(render, 1000);
+  };
+
+}
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html
new file mode 100644
index 00000000..fdee13d0
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <script src="clock.js"></script>
+  <script>
+    let clock = new Clock({template: 'h:m:s'});
+    clock.start();
+  </script>
+
+</body>
+</html>
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
new file mode 100644
index 00000000..71131816
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Rewrite to prototypes
+
+The `Clock` class is written in functional style. Rewrite it using prototypes.
+
+P.S. The clock ticks in the console, open it to see.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/article.md b/1-js/07-object-oriented-programming/08-class-patterns/article.md
new file mode 100644
index 00000000..83c312a2
--- /dev/null
+++ b/1-js/07-object-oriented-programming/08-class-patterns/article.md
@@ -0,0 +1,243 @@
+
+# Class patterns
+
+```quote author="Wikipedia"
+In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).
+```
+
+There's a special syntax construct and a keyword `class` in JavaScript. But before studying it, we should consider that the term "class" comes the theory of object-oriented programming. The definition is cited above, and it's language-independant.
+
+In JavaScript there are several well-known programming patterns to make classes even without using the `class` keyword. And here we'll talk about them first.
+
+The `class` construct will be described in the next chapter, but in JavaScript it's a "syntax sugar" and an extension of one of the patterns that we'll study here.
+
+[cut]
+
+
+## Functional class pattern
+
+The constructor function below can be considered a "class" according to the definition:
+
+```js run
+function User(name) {
+  this.sayHi = function() {
+    alert(name);
+  };
+}
+
+let user = new User("John");
+user.sayHi(); // John
+```
+
+It follows all parts of the definition:
+
+1. It is a "program-code-template" for creating objects (callable with `new`).
+2. It provides initial values for the state (`name` from parameters).
+3. It provides methods (`sayHi`).
+
+This is called *functional class pattern*.
+
+In the functional class pattern, local variables and nested functions inside `User`, that are not assigned to `this`, are visible from inside, but not accessible by the outer code.
+
+So we can easily add internal functions and variables, like `calcAge()` here:
+
+```js run
+function User(name, birthday) {
+
+*!*
+  // only visible from other methods inside User
+  function calcAge() {
+    return new Date().getFullYear() - birthday.getFullYear();
+  }
+*/!*
+
+  this.sayHi = function() {
+    alert(name + ', age:' + calcAge());
+  };
+}
+
+let user = new User("John", new Date(2000,0,1));
+user.sayHi(); // John
+```
+
+In this code variables `name`, `birthday` and the function `calcAge()` are internal, *private* to the object. They are only visible from inside of it.
+
+From the other hand, `sayHi` is the external, *public* method. The external code that creates `user` can access it.
+
+This way we can hide internal implementation details and helper methods from the outer code. Only what's assigned to `this` becomes visible outside.
+
+## Factory class pattern
+
+We can create a class without using `new` at all.
+
+Like this:
+
+```js run
+function User(name, birthday) {
+  // only visible from other methods inside User
+  function calcAge() {
+    return new Date().getFullYear() - birthday.getFullYear();
+  }
+
+  return {
+    sayHi() {
+      alert(name + ', age:' + calcAge());
+    }
+  };
+}
+
+*!*
+let user = User("John", new Date(2000,0,1));
+*/!*
+user.sayHi(); // John
+```
+
+As we can see, the function `User` returns an object with public properties and methods. The only benefit of this method is that we can omit `new`: write `let user = User(...)` instead of `let user = new User(...)`. In other aspects it's almost the same as the functional pattern.
+
+## Prototype-based classes
+
+Prototype-based classes is the most important and generally the best. Functional and factory class patterns are rarely used in practice.
+
+Soon you'll see why.
+
+Here's the same class rewritten using prototypes:
+
+```js run
+function User(name, birthday) {
+*!*
+  this._name = name;
+  this._birthday = birthday;
+*/!*
+}
+
+*!*
+User.prototype._calcAge = function() {
+*/!*
+  return new Date().getFullYear() - this._birthday.getFullYear();
+};
+
+User.prototype.sayHi = function() {
+  alert(this._name + ', age:' + this._calcAge());
+};
+
+let user = new User("John", new Date(2000,0,1));
+user.sayHi(); // John
+```
+
+The code structure:
+
+- The constructor `User` only initializes the current object state.
+- Methods are added to `User.prototype`.
+
+As we can see, methods are lexically not inside `function User`, they do not share a common lexical environment. If we declare variables inside `function User`, then they won't be visible to methods.
+
+So, there is a widely known agreement that internal properties and methods are prepended with an underscore `"_"`. Like `_name` or `_calcAge()`. Technically, that's just an agreement, the outer code still can access them. But most developers recognize the meaning of `"_"` and try not to touch prefixed properties and methods in the external code.
+
+Here are the advantages over the functional pattern:
+
+- In the functional pattern, each object has its own copy of every method. We assign a separate copy of `this.sayHi = function() {...}` and other methods in the constructor.
+- In the prototypal pattern, all methods are in `User.prototype` that is shared between all user objects. An object itself only stores the data.
+
+So the prototypal pattern is more memory-efficient.
+
+...But not only that. Prototypes allow us to setup the inheritance in a really efficient way. Built-in JavaScript objects all use prototypes. Also there's a special syntax construct: "class" that provides nice-looking syntax for them. And there's more, so let's go on with them.
+
+## Prototype-based inheritance for classes
+
+Let's say we have two prototype-based classes.
+
+`Rabbit`:
+
+```js
+function Rabbit(name) {
+  this.name = name;
+}
+
+Rabbit.prototype.jump = function() {
+  alert(this.name + ' jumps!');
+};
+
+let rabbit = new Rabbit("My rabbit");
+```
+
+![](rabbit-animal-independent-1.png)
+
+...And `Animal`:
+
+```js
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.eat = function() {
+  alert(this.name + ' eats.');
+};
+
+let animal = new Animal("My animal");
+```
+
+![](rabbit-animal-independent-2.png)
+
+Right now they are fully independent.
+
+But we'd want `Rabbit` to extend `Animal`. In other words, rabbits should be based on animals, have access to methods of `Animal` and extend them with its own methods.
+
+What does it mean in the language on prototypes?
+
+Right now methods for `rabbit` objects are in `Rabbit.prototype`. We'd like `rabbit` to use `Animal.prototype` as a "fallback", if the method is not found in `Rabbit.prototype`.
+
+So the prototype chain should be `rabbit` -> `Rabbit.prototype` -> `Animal.prototype`.
+
+Like this:
+
+![](class-inheritance-rabbit-animal.png)
+
+The code to implement that:
+
+```js run
+// Same Animal as before
+function Animal(name) {
+  this.name = name;
+}
+
+// All animals can eat, right?
+Animal.prototype.eat = function() {
+  alert(this.name + ' eats.');
+};
+
+// Same Rabbit as before
+function Rabbit(name) {
+  this.name = name;
+}
+
+Rabbit.prototype.jump = function() {
+  alert(this.name + ' jumps!');
+};
+
+*!*
+// setup the inheritance chain
+Rabbit.prototype.__proto__ = Animal.prototype; // (*)
+*/!*
+
+let rabbit = new Rabbit("White Rabbit");
+*!*
+rabbit.eat(); // rabbits can eat too
+*/!*
+rabbit.jump();
+```
+
+The line `(*)` sets up the prototype chain. So that `rabbit` first searches methods in `Rabbit.prototype`, then `Animal.prototype`. And then, just for completeness, let's mention that if the method is not found in `Animal.prototype`, then the search continues in `Object.prototype`, because `Animal.prototype` is a regular plain object, so it inherits from it.
+
+So here's the full picture:
+
+![](class-inheritance-rabbit-animal-2.png)
+
+## Summary
+
+The term "class" comes from the object-oriented programming. In JavaScript it usually means the functional class pattern or the prototypal pattern. The prototypal pattern is more powerful and memory-efficient, so it's recommended to stick to it.
+
+According to the prototypal pattern:
+1. Methods are stored in `Class.prototype`.
+2. Prototypes inherit from each other.
+
+In the next chapter we'll study `class` keyword and construct. It allows to write prototypal classes shorter and provides some additional benefits.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png
new file mode 100644
index 00000000..ad4a4093
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png
new file mode 100644
index 00000000..199ed3ee
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png
new file mode 100644
index 00000000..70708c28
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png
new file mode 100644
index 00000000..0db13018
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png
new file mode 100644
index 00000000..8df10f5d
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png
new file mode 100644
index 00000000..b61ddfbd
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png
new file mode 100644
index 00000000..435ec5f8
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png
new file mode 100644
index 00000000..5731da73
Binary files /dev/null and b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png differ
diff --git a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/solution.md b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.md
similarity index 100%
rename from 2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/solution.md
rename to 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.md
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js
new file mode 100644
index 00000000..c710b9da
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js
@@ -0,0 +1,34 @@
+class Clock {
+  constructor({ template }) {
+    this._template = template;
+  }
+
+  _render() {
+    let date = new Date();
+
+    let hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+
+    let mins = date.getMinutes();
+    if (mins < 10) min = '0' + mins;
+
+    let secs = date.getSeconds();
+    if (secs < 10) secs = '0' + secs;
+
+    let output = this._template
+      .replace('h', hours)
+      .replace('m', mins)
+      .replace('s', secs);
+
+    console.log(output);
+  }
+
+  stop() {
+    clearInterval(this._timer);
+  }
+
+  start() {
+    this._render();
+    this._timer = setInterval(() => this._render(), 1000);
+  }
+}
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
new file mode 100644
index 00000000..fdee13d0
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <script src="clock.js"></script>
+  <script>
+    let clock = new Clock({template: 'h:m:s'});
+    clock.start();
+  </script>
+
+</body>
+</html>
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js
new file mode 100644
index 00000000..b1a26250
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js
@@ -0,0 +1,34 @@
+
+
+function Clock({ template }) {
+  this._template = template;
+}
+
+Clock.prototype._render = function() {
+  let date = new Date();
+
+  let hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  let mins = date.getMinutes();
+  if (mins < 10) min = '0' + mins;
+
+  let secs = date.getSeconds();
+  if (secs < 10) secs = '0' + secs;
+
+  let output = this._template
+    .replace('h', hours)
+    .replace('m', mins)
+    .replace('s', secs);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  this._timer = setInterval(() => this._render(), 1000);
+};
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
new file mode 100644
index 00000000..fdee13d0
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <script src="clock.js"></script>
+  <script>
+    let clock = new Clock({template: 'h:m:s'});
+    clock.start();
+  </script>
+
+</body>
+</html>
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md
new file mode 100644
index 00000000..a29d347f
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Rewrite to class
+
+Rewrite the `Clock` class from prototypes to the modern "class" syntax.
+
+P.S. The clock ticks in the console, open it to see.
diff --git a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png
new file mode 100644
index 00000000..2db88f36
Binary files /dev/null and b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png differ
diff --git a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png
new file mode 100644
index 00000000..9539fe9e
Binary files /dev/null and b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png differ
diff --git a/1-js/07-object-oriented-programming/09-class/article.md b/1-js/07-object-oriented-programming/09-class/article.md
new file mode 100644
index 00000000..cb1beec0
--- /dev/null
+++ b/1-js/07-object-oriented-programming/09-class/article.md
@@ -0,0 +1,310 @@
+
+# Classes
+
+The "class" construct allows to define prototype-based classes with a clean, nice-looking syntax.
+
+[cut]
+
+## The "class" syntax
+
+The `class` syntax is versatile, we'll start from a simple example first.
+
+Here's a prototype-based class `User`:
+
+```js run
+function User(name) {
+  this.name = name;
+}
+
+User.prototype.sayHi = function() {
+  alert(this.name);
+}
+
+let user = new User("John");
+user.sayHi();
+```
+
+...And that's the same using `class` syntax:
+
+```js run
+class User {
+
+  constructor(name) {
+    this.name = name;
+  }
+
+  sayHi() {
+    alert(this.name);
+  }
+
+}
+
+let user = new User("John");
+user.sayHi();
+```
+
+It's easy to see that the two examples are alike. So, what exactly does `class` do? We may think that it defines a new language-level entity, but that would be wrong.
+
+The `class User {...}` here actually does two things:
+
+1. Declares a variable `User` that references the function named `"constructor"`.
+2. Puts into `User.prototype` methods listed in the definition. Here it includes `sayHi` and the `constructor`.
+
+Here's some code to demonstrate that:
+
+```js run
+class User {
+  constructor(name) { this.name = name; }
+  sayHi() { alert(this.name);  }
+}
+
+*!*
+// proof: User is the "constructor" function
+*/!*
+alert(User == User.prototype.constructor); // true
+
+*!*
+// proof: there are two methods in its "prototype"
+*/!*
+alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
+```
+
+Here's the illustration of `class User`:
+
+![](class-user.png)
+
+So `class` is a special syntax to define the constructor with prototype methods.
+
+...But not only that. There are minor tweaks here and there to ensure the right usage.
+
+For instance, the `constructor` function can't be called without `new`:
+```js run
+class User {
+  constructor() {}
+}
+
+alert(typeof User); // function
+User(); // Error: Class constructor User cannot be invoked without 'new'
+```
+
+```smart header="Outputting a class"
+If we output it like `alert(User)`, some engines show `"class User..."`, while others show `"function User..."`.
+
+Please don't be confused: the string representation may vary, but that's still a function, there is no separate "class" entity in JavaScript language.
+```
+
+```smart header="Class methods are non-enumerable"
+Class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`. That's good, because if we `for..in` over an object, we usually don't want its class methods.
+```
+
+```smart header="What if there's no constructor?"
+If there's no `constructor` in the `class` construct, then an empty function is generated, same as if we had written `constructor() {}`.
+```
+
+```smart header="Classes always `use strict`"
+All code inside the class construct is automatically in strict mode.
+```
+
+### Getters/setters
+
+Classes may also include getters/setters. Here's an example with `user.name` implemented using them:
+
+```js run
+class User {
+
+  constructor(name) {
+    // invokes the setter
+    this.name = name;
+  }
+
+*!*
+  get name() {
+*/!*
+    return this._name;
+  }
+
+*!*
+  set name(value) {
+*/!*
+    if (value.length < 4) {
+      alert("Name too short.");
+      return;
+    }
+    this._name = value;
+  }
+
+}
+
+let user = new User("John");
+alert(user.name); // John
+
+user = new User(""); // Name too short.
+```
+
+### Only methods
+
+Unlike object literals, no `property:value` assignments are allowed inside `class`. There may be only methods (without a comma between them) and getters/setters.
+
+The idea is that everything inside `class` goes to the prototype. And the prototype should store methods only, which are shared between objects. The data describing a concrete object state should reside in individual objects.
+
+If we really insist on putting a non-function value into the prototype, then `class` can't help here. We can alter `prototype` manually though, like this:
+
+```js run
+class User { }
+
+User.prototype.test = 5;
+
+alert( new User().test ); // 5
+```
+
+So, technically that's possible, but we should know why we're doing it.
+
+An alternative here would be to use a getter:
+
+```js run
+class User {
+  get test() {
+    return 5;
+  }
+}
+
+alert( new User().test ); // 5
+```
+
+From the external code, the usage is the same. But the getter variant is probably a bit slower.
+
+## Class Expression
+
+Just like functions, classes can be defined inside another expression, passed around, returned etc.
+
+Here's a class-returning function ("class factory"):
+
+```js run
+function getClass(phrase) {
+*!*
+  return class {
+    sayHi() {
+      alert(phrase);
+    };
+  };
+*/!*
+}
+
+let User = getClass("Hello");
+
+new User().sayHi(); // Hello
+```
+
+That's quite normal if we recall that `class` is just a special form of function-with-prototype definition.
+
+And, like Named Function Expressions, such classes also may have a name, that is visible inside that class only:
+
+```js run
+let User = class *!*MyClass*/!* {
+  sayHi() {
+    alert(MyClass);
+  }
+};
+
+new User().sayHi(); // works, shows MyClass definition
+
+alert(MyClass); // error, MyClass is only visible in methods of the class
+```
+
+## Static methods
+
+Static methods are bound to the class function, not to its `"prototype"`.
+
+An example:
+
+```js run
+class User {
+*!*
+  static staticMethod() {
+*/!*
+    alert(this == User);
+  }
+}
+
+User.staticMethod(); // true
+```
+
+That actually does the same as assigning it as a function property:
+
+```js
+function User() { }
+
+User.staticMethod = function() {
+  alert(this == User);
+};
+```
+
+The value of `this` inside `User.staticMethod()` is the class constructor `User` itself (the "object before dot" rule).
+
+Usually, static methods are used when the code is related to the class, but not to a particular object of it.
+
+For instance, we have `Article` objects and need a function to compare them. The natural choice would be `Article.compare`, like this:
+
+```js run
+class Article {
+  constructor(title, date) {
+    this.title = title;
+    this.date = date;
+  }
+
+*!*
+  static compare(articleA, articleB) {
+    return articleA.date - articleB.date;
+  }
+*/!*
+}
+
+// usage
+let articles = [
+  new Article("Mind", new Date(2016, 1, 1)),
+  new Article("Body", new Date(2016, 0, 1)),
+  new Article("JavaScript", new Date(2016, 11, 1))
+];
+
+*!*
+articles.sort(Article.compare);
+*/!*
+
+alert( articles[0].title ); // Body
+```
+
+Here `Article.compare` stands "over" the articles, as a means to compare them.
+
+Another example would be a so-called "factory" method, that creates an object with specific parameters.
+
+Like `Article.createTodays()` here:
+
+```js run
+class Article {
+  constructor(title, date) {
+    this.title = title;
+    this.date = date;
+  }
+
+*!*
+  static createTodays() {
+    // remember, this = Article
+    return new this("Todays digest", new Date());
+  }
+*/!*
+}
+
+let article = Article.createTodays();
+
+alert( articles.title ); // Todays digest
+```
+
+Now every time we need to create a todays digest, we can call `Article.createTodays()`.
+
+Static methods are often used in database-related classes to search/save/remove entries from the database, like this:
+
+```js
+// assuming Article is a special class for managing articles
+// static method to remove the article:
+Article.remove({id: 12345});
+```
diff --git a/1-js/07-object-oriented-programming/09-class/class-user.png b/1-js/07-object-oriented-programming/09-class/class-user.png
new file mode 100644
index 00000000..5579e6bb
Binary files /dev/null and b/1-js/07-object-oriented-programming/09-class/class-user.png differ
diff --git a/1-js/07-object-oriented-programming/09-class/class-user@2x.png b/1-js/07-object-oriented-programming/09-class/class-user@2x.png
new file mode 100644
index 00000000..5a85e658
Binary files /dev/null and b/1-js/07-object-oriented-programming/09-class/class-user@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md b/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md
new file mode 100644
index 00000000..4711e482
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md
@@ -0,0 +1,27 @@
+That's because the child constructor must call `super()`.
+
+Here's the corrected code:
+
+```js run
+class Animal {
+
+  constructor(name) {
+    this.name = name;
+  }
+
+}
+
+class Rabbit extends Animal {
+  constructor(name) {  
+    *!*
+    super(name);
+    */!*
+    this.created = Date.now();
+  }
+}
+
+*!*
+let rabbit = new Rabbit("White Rabbit"); // ok now
+*/!*
+alert(rabbit.name); // White Rabbit
+```
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md b/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md
new file mode 100644
index 00000000..380a4720
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md
@@ -0,0 +1,30 @@
+importance: 5
+
+---
+
+# Error creating an instance
+
+Here's the code with `Rabbit` extending `Animal`.
+
+Unfortunately, `Rabbit` objects can't be created. What's wrong? Fix it.
+```js run
+class Animal {
+
+  constructor(name) {
+    this.name = name;
+  }
+
+}
+
+class Rabbit extends Animal {
+  constructor(name) {  
+    this.name = name;
+    this.created = Date.now();
+  }
+}
+
+*!*
+let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined
+*/!*
+alert(rabbit.name);
+```
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md
similarity index 100%
rename from 2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md
rename to 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
new file mode 100644
index 00000000..c710b9da
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
@@ -0,0 +1,34 @@
+class Clock {
+  constructor({ template }) {
+    this._template = template;
+  }
+
+  _render() {
+    let date = new Date();
+
+    let hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+
+    let mins = date.getMinutes();
+    if (mins < 10) min = '0' + mins;
+
+    let secs = date.getSeconds();
+    if (secs < 10) secs = '0' + secs;
+
+    let output = this._template
+      .replace('h', hours)
+      .replace('m', mins)
+      .replace('s', secs);
+
+    console.log(output);
+  }
+
+  stop() {
+    clearInterval(this._timer);
+  }
+
+  start() {
+    this._render();
+    this._timer = setInterval(() => this._render(), 1000);
+  }
+}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
new file mode 100644
index 00000000..4eb12381
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
@@ -0,0 +1,12 @@
+class ExtendedClock extends Clock {
+  constructor(options) {
+    super(options);
+    let { precision=1000 } = options;
+    this._precision = precision;
+  }
+
+  start() {
+    this._render();
+    this._timer = setInterval(() => this._render(), this._precision);
+  }
+};
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html
new file mode 100644
index 00000000..7ac1db71
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+</head>
+
+<body>
+
+  <script src="clock.js"></script>
+  <script src="extended-clock.js"></script>
+
+  <script>
+    let lowResolutionClock = new ExtendedClock({
+      template: 'h:m:s',
+      precision: 10000
+    });
+
+    lowResolutionClock.start();
+  </script>
+
+</body>
+</html>
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
new file mode 100644
index 00000000..c710b9da
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
@@ -0,0 +1,34 @@
+class Clock {
+  constructor({ template }) {
+    this._template = template;
+  }
+
+  _render() {
+    let date = new Date();
+
+    let hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+
+    let mins = date.getMinutes();
+    if (mins < 10) min = '0' + mins;
+
+    let secs = date.getSeconds();
+    if (secs < 10) secs = '0' + secs;
+
+    let output = this._template
+      .replace('h', hours)
+      .replace('m', mins)
+      .replace('s', secs);
+
+    console.log(output);
+  }
+
+  stop() {
+    clearInterval(this._timer);
+  }
+
+  start() {
+    this._render();
+    this._timer = setInterval(() => this._render(), 1000);
+  }
+}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html
new file mode 100644
index 00000000..b48a2a00
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Console clock</title>
+</head>
+
+<body>
+
+  <!-- source clock -->
+  <script src="clock.js"></script>
+  <script>
+    let clock = new Clock({
+      template: 'h:m:s'
+    });
+    clock.start();
+
+
+    /* Your class should work like this: */
+
+    /*
+
+      let lowResolutionClock = new ExtendedClock({
+        template: 'h:m:s',
+        precision: 10000
+      });
+
+      lowResolutionClock.start();
+    */
+  </script>
+
+</body>
+
+</html>
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
new file mode 100644
index 00000000..05da4538
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# Extended clock
+
+We've got a `Clock` class. As of now, it prints the time every second.
+
+Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default.
+
+- Your code should be in the file `extended-clock.js`
+- Don't modify the original `clock.js`. Extend it.
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png
new file mode 100644
index 00000000..d4ff37e5
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png
new file mode 100644
index 00000000..a54a9d2f
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md
new file mode 100644
index 00000000..16a20f2a
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md
@@ -0,0 +1,87 @@
+The answer has two parts.
+
+The first, an easy one is that the inheriting class needs to call `super()` in the constructor. Otherwise `"this"` won't be "defined".
+
+So here's the fix:
+
+```js run
+class Rabbit extends Object {
+  constructor(name) {
+*!*
+    super(); // need to call the parent constructor when inheriting
+*/!*
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+alert( rabbit.hasOwnProperty('name') ); // true
+```
+
+But that's not all yet.
+
+Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`.
+
+As we know, the "extends" syntax sets up two prototypes:
+
+1. Between `"prototype"` of the constructor functions (for methods).
+2. Between the constructor functions itself (for static methods).
+
+In our case, for `class Rabbit extends Object` it means:
+
+```js run
+class Rabbit extends Object {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) true
+```
+
+So we can access static methods of `Object` via `Rabbit`, like this:
+
+```js run
+class Rabbit extends Object {}
+
+*!*
+// normally we call Object.getOwnPropertyNames
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
+*/!*
+```
+
+And if we don't use `extends`, then `class Rabbit` does not get the second reference.
+
+Please compare with it:
+
+```js run
+class Rabbit {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) false (!)
+
+*!*
+// error, no such function in Rabbit
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
+*/!*
+```
+
+For the simple `class Rabbit`, the `Rabbit` function has the same prototype
+
+```js run
+class Rabbit {}
+
+// instead of (2) that's correct for Rabbit (just like any function):
+alert( Rabbit.__proto__ === Function.prototype );
+```
+
+By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`.
+
+Here's the picture:
+
+![](rabbit-extends-object.png)
+
+So, to put it short, there are two differences:
+
+| class Rabbit | class Rabbit extends Object  |
+|--------------|------------------------------|
+| --             | needs to call `super()` in constructor |
+| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` |
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md
new file mode 100644
index 00000000..d59de085
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md
@@ -0,0 +1,43 @@
+importance: 5
+
+---
+
+# Class extends Object?
+
+As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods.
+
+Like demonstrated here:
+
+```js run
+class Rabbit {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+*!*
+// hasOwnProperty method is from Object.prototype
+// rabbit.__proto__ === Object.prototype
+alert( rabbit.hasOwnProperty('name') ); // true
+*/!*
+```
+
+So, is it correct to say that `"class Rabbit extends Object"` does exactly the same as `"class Rabbit"`, or not?
+
+Will it work?
+
+```js
+class Rabbit extends Object {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+alert( rabbit.hasOwnProperty('name') ); // true
+```
+
+If it won't please fix the code. 
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png
new file mode 100644
index 00000000..998c8233
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png
new file mode 100644
index 00000000..98a80d38
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/article.md b/1-js/07-object-oriented-programming/10-class-inheritance/article.md
new file mode 100644
index 00000000..1fe66877
--- /dev/null
+++ b/1-js/07-object-oriented-programming/10-class-inheritance/article.md
@@ -0,0 +1,574 @@
+
+# Class inheritance, super
+
+Classes can extend one another. There's a nice syntax, technically based on the prototypal inheritance.
+
+To inherit from another class, we should specify `"extends"` and the parent class before the brackets `{..}`.
+
+[cut]
+
+Here `Rabbit` inherits from `Animal`:
+
+```js run
+class Animal {
+
+  constructor(name) {
+    this.speed = 0;
+    this.name = name;
+  }
+
+  run(speed) {
+    this.speed += speed;
+    alert(`${this.name} runs with speed ${this.speed}.`);
+  }
+
+  stop() {
+    this.speed = 0;
+    alert(`${this.name} stopped.`);
+  }
+
+}
+
+*!*
+// Inherit from Animal
+class Rabbit extends Animal {
+  hide() {
+    alert(`${this.name} hides!`);
+  }
+}
+*/!*
+
+let rabbit = new Rabbit("White Rabbit");
+
+rabbit.run(5); // White Rabbit runs with speed 5.
+rabbit.hide(); // White Rabbit hides!
+```
+
+The `extends` keyword actually adds a `[[Prototype]]` reference from `Rabbit.prototype` to `Animal.prototype`, just as you expect it to be, and as we've seen before.
+
+![](animal-rabbit-extends.png)
+
+So now `rabbit` has access both to its own methods and to methods of `Animal`.
+
+````smart header="Any expression is allowed after `extends`"
+Class syntax allows to specify not just a class, but any expression after `extends`.
+
+For instance, a function call that generates the parent class:
+
+```js run
+function f(phrase) {
+  return class {
+    sayHi() { alert(phrase) }
+  }
+}
+
+*!*
+class User extends f("Hello") {}
+*/!*
+
+new User().sayHi(); // Hello
+```
+Here `class User` inherits from the result of `f("Hello")`.
+
+That may be useful for advanced programming patterns when we use functions to generate classes depending on many conditions and can inherit from them.
+````
+
+## Overriding a method
+
+Now let's move forward and override a method. As of now, `Rabbit` inherits the `stop` method that sets `this.speed = 0` from `Animal`.
+
+If we specify our own `stop` in `Rabbit`, then it will be used instead:
+
+```js
+class Rabbit extends Animal {
+  stop() {
+    // ...this will be used for rabbit.stop()
+  }
+}
+```
+
+
+...But usually we don't want to totally replace a parent method, but rather to build on top of it, tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process.
+
+Classes provide `"super"` keyword for that.
+
+- `super.method(...)` to call a parent method.
+- `super(...)` to call a parent constructor (inside our constructor only).
+
+For instance, let our rabbit autohide when stopped:
+
+```js run
+class Animal {
+
+  constructor(name) {
+    this.speed = 0;
+    this.name = name;
+  }
+
+  run(speed) {
+    this.speed += speed;
+    alert(`${this.name} runs with speed ${this.speed}.`);
+  }
+
+  stop() {
+    this.speed = 0;
+    alert(`${this.name} stopped.`);
+  }
+
+}
+
+class Rabbit extends Animal {
+  hide() {
+    alert(`${this.name} hides!`);
+  }
+
+*!*
+  stop() {
+    super.stop(); // call parent stop
+    this.hide(); // and then hide
+  }
+*/!*
+}
+
+let rabbit = new Rabbit("White Rabbit");
+
+rabbit.run(5); // White Rabbit runs with speed 5.
+rabbit.stop(); // White Rabbit stopped. White rabbit hides!
+```
+
+Now `Rabbit` has the `stop` method that calls the parent `super.stop()` in the process.
+
+````smart header="Arrow functions have no `super`"
+As was mentioned in the chapter <info:arrow-functions>, arrow functions do not have `super`.
+
+If accessed, it's taken from the outer function. For instance:
+```js
+class Rabbit extends Animal {
+  stop() {
+    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
+  }
+}
+```
+
+The `super` in the arrow function is the same as in `stop()`, so it works as intended. If we specified a "regular" function here, there would be an error:
+
+```js
+// Unexpected super
+setTimeout(function() { super.stop() }, 1000);
+```
+````
+
+
+## Overriding constructor
+
+With constructors, things are is a little bit tricky.
+
+Till now, `Rabbit` did not have its own `constructor`.
+
+According to the [specification](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation), if a class extends another class and has no `constructor`, then the following `constructor` is generated:
+
+```js
+class Rabbit extends Animal {
+  // generated for extending classes without own constructors
+*!*
+  constructor(...args) {
+    super(...args);
+  }
+*/!*
+}
+```
+
+As we can see, it basically calls the parent `constructor` passing it all the arguments. That happens if we don't write a constructor of our own.
+
+Now let's add a custom constructor to `Rabbit`. It will specify the `earLength` in addition to `name`:
+
+```js run
+class Animal {
+  constructor(name) {
+    this.speed = 0;
+    this.name = name;
+  }
+  // ...
+}
+
+class Rabbit extends Animal {
+
+*!*
+  constructor(name, earLength) {
+    this.speed = 0;
+    this.name = name;
+    this.earLength = earLength;
+  }
+*/!*
+
+  // ...
+}
+
+*!*
+// Doesn't work!
+let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.
+*/!*
+```
+
+Whoops! We've got an error. Now we can't create rabbits. What went wrong?
+
+The short answer is: constructors in inheriting classes must call `super(...)`, and (!) do it before using `this`.
+
+...But why? What's going on here? Indeed, the requirement seems strange.
+
+Of course, there's an explanation. Let's get into details, so you'd really understand what's going on.
+
+In JavaScript, there's a distinction between a "constructor function of an inheriting class" and all others. In an inheriting class, the corresponding constructor function is labelled with a special internal property `[[ConstructorKind]]:"derived"`.
+
+The difference is:
+
+- When a normal constructor runs, it creates an empty object as `this` and continues with it.
+- But when a derived constructor runs, it doesn't do it. It expects the parent constructor to do this job.
+
+So if we're making a constructor of our own, then we must call `super`, because otherwise the object with `this` reference to it won't be created. And we'll get an error.
+
+For `Rabbit` to work, we need to call `super()` before using `this`, like here:
+
+```js run
+class Animal {
+
+  constructor(name) {
+    this.speed = 0;
+    this.name = name;
+  }
+
+  // ...
+}
+
+class Rabbit extends Animal {
+
+  constructor(name, earLength) {
+*!*
+    super(name);
+*/!*
+    this.earLength = earLength;
+  }
+
+  // ...
+}
+
+*!*
+// now fine
+let rabbit = new Rabbit("White Rabbit", 10);
+alert(rabbit.name); // White Rabbit
+alert(rabbit.earLength); // 10
+*/!*
+```
+
+
+## Super: internals, [[HomeObject]]
+
+Let's get a little deeper under the hood of `super`. We'll see some interesting things by the way.
+
+First to say, from all that we've learned till now, it's impossible for `super` to work.
+
+Yeah, indeed, let's ask ourselves, how it could technically work? When an object method runs, it gets the current object as `this`. If we call `super.method()` then, how to retrieve that  method? In other words, we need to take the `method` from the parent prototype of the current object. How, technically, we (or a JavaScript engine) can do it?
+
+Maybe we can get it `[[Prototype]]` of `this`, as `this.__proto__.method`? Unfortunately, that won't work.
+
+Let's try to do it. Without classes, using plain objects for the sake of simplicity.
+
+Here, `rabbit.eat()` should call `animal.eat()` method of the parent object:
+
+```js run
+let animal = {
+  name: "Animal",
+  eat() {
+    alert(this.name + " eats.");
+  }
+};
+
+let rabbit = {
+  __proto__: animal,
+  name: "Rabbit",
+  eat() {
+*!*
+    this.__proto__.eat.call(this); // (*)
+*/!*
+  }
+};
+
+rabbit.eat(); // Rabbit eats.
+```
+
+At the line `(*)` we take `eat` from the prototype (`animal`) and call it in the context of the current object. Please note that `.call(this)` is important here, because a simple `this.__proto__.eat()` would execute parent `eat` in the context of the prototype, not the current object.
+
+And here it works.
+
+Now let's add one more object to the chain. We'll see how things break:
+
+```js run
+let animal = {
+  name: "Animal",
+  eat() {
+    alert(this.name + " eats.");
+  }
+};
+
+let rabbit = {
+  __proto__: animal,
+  eat() {
+    // ...bounce around rabbit-style and call parent (animal) method
+    this.__proto__.eat.call(this); // (*)
+  }
+};
+
+let longEar = {
+  __proto__: rabbit,
+  eat() {
+    // ...do something with long ears and call parent (rabbit) method
+    this.__proto__.eat.call(this); // (**)
+  }
+};
+
+*!*
+longEar.eat(); // Error: Maximum call stack size exceeded
+*/!*
+```
+
+The code doesn't work any more! We can see the error trying to call `longEar.eat()`.
+
+It may be not that obvious, but if we trace `longEar.eat()` call, then we can see why. In both lines `(*)` and `(**)` the value of `this` is the current object (`longEar`). That's essential: all object methods get the current object as `this`, not a prototype or something.
+
+So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the same: `rabbit`. They both call `rabbit.eat` without going up the chain.
+
+In other words:
+
+1. Inside `longEar.eat()`, we pass the call up to `rabbit.eat` giving it the same `this=longEar`.
+    ```js
+    // inside longEar.eat() we have this = longEar
+    this.__proto__.eat.call(this) // (**)
+    // becomes
+    longEar.__proto__.eat.call(this)
+    // or
+    rabbit.eat.call(this);
+    ```
+2. Inside `rabbit.eat`, we want to pass the call even higher in the chain, but `this=longEar`, so `this.__proto__.eat` is `rabbit.eat`!
+
+    ```js
+    // inside rabbit.eat() we also have this = longEar
+    this.__proto__.eat.call(this) // (*)
+    // becomes
+    longEar.__proto__.eat.call(this)
+    // or (again)
+    rabbit.eat.call(this);
+    ```
+
+3. ...So `rabbit.eat` calls itself in the endless loop, because it can't ascend any further.
+
+![](this-super-loop.png)
+
+There problem is unsolvable, because `this` must always be the calling object itself, no matter which parent method is called. So its prototype will always be the immediate parent of the object. We can't go up the chain.
+
+### `[[HomeObject]]`
+
+To provide the solution, JavaScript adds one more special internal property for functions: `[[HomeObject]]`.
+
+**When a function is specified as a class or object method, its `[[HomeObject]]` property becomes that object.**
+
+This actually violates the idea of "unbound" functions, because methods remember their objects. And `[[HomeObject]]` can't be changed, so this bound is forever. So that's a very important change in the language.
+
+But this change is safe. `[[HomeObject]]` is used only for calling parent methods in `super`, to resolve the prototype. So it doesn't break compatibility.
+
+Let's see how it works for `super` -- again, using plain objects:
+
+```js run
+let animal = {
+  name: "Animal",
+  eat() {         // [[HomeObject]] == animal
+    alert(this.name + " eats.");
+  }
+};
+
+let rabbit = {
+  __proto__: animal,
+  name: "Rabbit",
+  eat() {         // [[HomeObject]] == rabbit
+    super.eat();
+  }
+};
+
+let longEar = {
+  __proto__: rabbit,
+  name: "Long Ear",
+  eat() {         // [[HomeObject]] == longEar
+    super.eat();
+  }
+};
+
+*!*
+longEar.eat();  // Long Ear eats.
+*/!*
+```
+
+Every method remembers its object in the internal `[[HomeObject]]` property. Then `super` uses it to resolve the parent prototype.
+
+`[[HomeObject]]` is defined for methods defined both in classes and in plain objects. But for objects, methods must be specified exactly the given way: as `method()`, not as `"method: function()"`.
+
+In the example below a non-method syntax is used for comparison. `[[HomeObject]]` property is not set and the inheritance doesn't work:
+
+```js run
+let animal = {
+  eat: function() { // should be the short syntax: eat() {...}
+    // ...
+  }
+};
+
+let rabbit = {
+  __proto__: animal,
+  eat: function() {
+    super.eat();
+  }
+};
+
+*!*
+rabbit.eat();  // Error calling super (because there's no [[HomeObject]])
+*/!*
+```
+
+## Static methods and inheritance
+
+The `class` syntax supports inheritance for static properties too.
+
+For instance:
+
+```js run
+class Animal {
+
+  constructor(name, speed) {
+    this.speed = speed;
+    this.name = name;
+  }
+
+  run(speed = 0) {
+    this.speed += speed;
+    alert(`${this.name} runs with speed ${this.speed}.`);
+  }
+
+  static compare(animalA, animalB) {
+    return animalA.speed - animalB.speed;
+  }
+
+}
+
+// Inherit from Animal
+class Rabbit extends Animal {
+  hide() {
+    alert(`${this.name} hides!`);
+  }
+}
+
+let rabbits = [
+  new Rabbit("White Rabbit", 10),
+  new Rabbit("Black Rabbit", 5)
+];
+
+rabbits.sort(Rabbit.compare);
+
+rabbits[0].run(); // Black Rabbit runs with speed 5.
+```
+
+Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` will be called.
+
+How does it work? Again, using prototypes. As you might have already guessed, extends also gives `Rabbit` the `[[Prototype]]` reference to `Animal`.
+
+
+![](animal-rabbit-static.png)
+
+So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything.
+
+Here, let's check that:
+
+```js run
+class Animal {}
+class Rabbit extends Animal {}
+
+// for static propertites and methods
+alert(Rabbit.__proto__ == Animal); // true
+
+// and the next step is Function.prototype
+alert(Animal.__proto__ == Function.prototype); // true
+
+// that's in addition to the "normal" prototype chain for object methods
+alert(Rabbit.prototype.__proto__ === Animal.prototype);
+```
+
+This way `Rabbit` has access to all static methods of `Animal`.
+
+Please note that built-in classes don't have such static `[[Prototype]]` reference. For instance, `Object` has `Object.defineProperty`, `Object.keys` and so on, but `Array`, `Date` etc do not inherit them.
+
+Here's the picture structure for `Date` and `Object`:
+
+![](object-date-inheritance.png)
+
+Note, there's no link between `Date` and `Object`. Both `Object` and `Date` exist independently. `Date.prototype` inherits from `Object.prototype`, but that's all.
+
+Such difference exists for historical reasons: there was no thought about class syntax and inheriting static methods at the dawn of JavaScript language.
+
+## Natives are extendable
+
+Built-in classes like Array, Map and others are extendable also.
+
+For instance, here `PowerArray` inherits from the native `Array`:
+
+```js run
+// add one more method to it (can do more)
+class PowerArray extends Array {
+  isEmpty() {
+    return this.length == 0;
+  }
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+let filteredArr = arr.filter(item => item >= 10);
+alert(filteredArr); // 10, 50
+alert(filteredArr.isEmpty()); // false
+```
+
+Please note one very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type. They rely on the `constructor` property to do so.
+
+In the example above,
+```js
+arr.constructor === PowerArray
+```
+
+So when `arr.filter()` is called, it internally creates the new array of results exactly as `new PowerArray`. And we can keep using its methods further down the chain.
+
+Even more, we can customize that behavior. The static getter `Symbol.species`, if exists, returns the constructor to use in such cases.
+
+For example, here due to `Symbol.species` built-in methods like `map`, `filter` will return "normal" arrays:
+
+```js run
+class PowerArray extends Array {
+  isEmpty() {
+    return this.length == 0;
+  }
+
+*!*
+  // built-in methods will use this as the constructor
+  static get [Symbol.species]() {
+    return Array;
+  }
+*/!*
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+// filter creates new array using arr.constructor[Symbol.species] as constructor
+let filteredArr = arr.filter(item => item >= 10);
+
+*!*
+// filteredArr is not PowerArray, but Array
+*/!*
+alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function
+```
+
+We can use it in more advanced keys to strip extended functionality from resulting values if not needed. Or, maybe, to extend it even further.
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png
new file mode 100644
index 00000000..c5d71263
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png
new file mode 100644
index 00000000..edc4e841
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png
new file mode 100644
index 00000000..70708c28
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png
new file mode 100644
index 00000000..0db13018
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png
new file mode 100644
index 00000000..387975a9
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
new file mode 100644
index 00000000..ca731359
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png
new file mode 100644
index 00000000..542a0c9f
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png
new file mode 100644
index 00000000..21485062
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png
new file mode 100644
index 00000000..bb4c1fc4
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png
new file mode 100644
index 00000000..91d2e03c
Binary files /dev/null and b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md b/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md
new file mode 100644
index 00000000..d41d90ed
--- /dev/null
+++ b/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md
@@ -0,0 +1,7 @@
+Yeah, looks strange indeed.
+
+But `instanceof` does not care about the function, but rather about its `prototype`, that it matches against the prototype chain.
+
+And here `a.__proto__ == B.prototype`, so `instanceof` returns `true`.
+
+So, by the logic of `instanceof`, the `prototype` actually defines the type, not the constructor function.
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md b/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md
new file mode 100644
index 00000000..e9481912
--- /dev/null
+++ b/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Strange instanceof
+
+Why `instanceof` below returns `true`? We can easily see that `a` is not created by `B()`.
+
+```js run
+function A() {}
+function B() {}
+
+A.prototype = B.prototype = {};
+
+let a = new A();
+
+*!*
+alert( a instanceof B ); // true
+*/!*
+```
diff --git a/1-js/07-object-oriented-programming/11-instanceof/article.md b/1-js/07-object-oriented-programming/11-instanceof/article.md
new file mode 100644
index 00000000..1d725eea
--- /dev/null
+++ b/1-js/07-object-oriented-programming/11-instanceof/article.md
@@ -0,0 +1,213 @@
+# Class checking: "instanceof"
+
+The `instanceof` operator allows to check whether an object belongs to a certain class. It also takes inheritance into account.
+
+Such a check may be necessary in many cases, here we'll use it for building a *polymorphic* function, the one that treats arguments differently depending on their type.
+
+[cut]
+
+## The instanceof operator [#ref-instanceof]
+
+The syntax is:
+```js
+obj instanceof Class
+```
+
+It returns `true` if `obj` belongs to the `Class` (or a class inheriting from it).
+
+For instance:
+
+```js run
+class Rabbit {}
+let rabbit = new Rabbit();
+
+// is it an object of Rabbit class?
+*!*
+alert( rabbit instanceof Rabbit ); // true
+*/!*
+```
+
+It also works with constructor functions:
+
+```js run
+*!*
+// instead of class
+function Rabbit() {}
+*/!*
+
+alert( new Rabbit() instanceof Rabbit ); // true
+```
+
+...And with built-in classes like `Array`:
+
+```js run
+let arr = [1, 2, 3];
+alert( arr instanceof Array ); // true
+alert( arr instanceof Object ); // true
+```
+
+Please note that `arr` also belongs to the `Object` class. That's because `Array` prototypally inherits from `Object`.
+
+The `instanceof` operator examines the prototype chain for the check, and is also fine-tunable using the static method `Symbol.hasInstance`.
+
+The algorithm of `obj instanceof Class` works roughly as follows:
+
+1. If there's a static method `Symbol.hasInstance`, then use it. Like this:
+
+    ```js run
+    // assume anything that canEat is an animal
+    class Animal {
+      static [Symbol.hasInstance](obj) {
+        if (obj.canEat) return true;
+      }
+    }
+
+    let obj = { canEat: true };
+    alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) is called
+    ```
+
+2. Most classes do not have `Symbol.hasInstance`. In that case, check if `Class.prototype` equals to one of prototypes in the `obj` prototype chain.
+
+    In other words, compare:
+    ```js
+    obj.__proto__ == Class.prototype
+    obj.__proto__.__proto__ == Class.prototype
+    obj.__proto__.__proto__.__proto__ == Class.prototype
+    ...
+    ```
+
+    In the example above `Rabbit.prototype == rabbit.__proto__`, so that gives the answer immediately.
+
+    In the case of an inheritance, `rabbit` is an instance of the parent class as well:
+
+    ```js run
+    class Animal {}
+    class Rabbit extends Animal {}
+
+    let rabbit = new Rabbit();
+    *!*
+    alert(rabbit instanceof Animal); // true
+    */!*
+    // rabbit.__proto__ == Rabbit.prototype
+    // rabbit.__proto__.__proto__ == Animal.prototype (match!)
+    ```
+
+Here's the illustration of what `rabbit instanceof Animal` compares with `Animal.prototype`:
+
+![](instanceof.png)
+
+By the way, there's also a method [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf), that returns `true` if `objA` is somewhere in the chain of prototypes for `objB`. So the test of `obj instanceof Class` can be rephrased as `Class.prototype.isPrototypeOf(obj)`.
+
+That's funny, but the `Class` constructor itself does not participate in the check! Only the chain of prototypes and `Class.prototype` matters.
+
+That can lead to interesting consequences when `prototype` is changed.
+
+Like here:
+
+```js run
+function Rabbit() {}
+let rabbit = new Rabbit();
+
+// changed the prototype
+Rabbit.prototype = {};
+
+// ...not a rabbit any more!
+*!*
+alert( rabbit instanceof Rabbit ); // false
+*/!*
+```
+
+That's one of reasons to avoid changing `prototype`. Just to keep safe.
+
+## Bonus: Object toString for the type
+
+We already know that plain objects are converted to string as `[object Object]`:
+
+```js run
+let obj = {};
+
+alert(obj); // [object Object]
+alert(obj.toString()); // the same
+```
+
+That's their implementation of `toString`. But there's a hidden feature thank makes `toString` actually much more powerful than that. We can use it as an extended `typeof` and an alternative for `instanceof`.
+
+Sounds strange? Indeed. Let's demistify.
+
+By [specification](https://tc39.github.io/ecma262/#sec-object.prototype.tostring), the built-in `toString` can be extracted from the object and executed in the context of any other value. And its result depends on that value.
+
+- For a number, it will be `[object Number]`
+- For a boolean, it will be `[object Boolean]`
+- For `null`: `[object Null]`
+- For `undefined`: `[object Undefined]`
+- For arrays: `[object Array]`
+- ...etc (customizable).
+
+Let's demonstrate:
+
+```js run
+// copy toString method into a variable for convenience
+let objectToString = Object.prototype.toString;
+
+// what type is this?
+let arr = [];
+
+alert( objectToString.call(arr) ); // [object Array]
+```
+
+Here we used [call](mdn:js/function/call) as described in the chapter [](info:call-apply-decorators) to execute the function `objectToString` in the context `this=arr`.
+
+Internally, the `toString` algorithm examines `this` and returns the corresponding result. More examples:
+
+```js run
+let s = Object.prototype.toString;
+
+alert( s.call(123) ); // [object Number]
+alert( s.call(null) ); // [object Null]
+alert( s.call(alert) ); // [object Function]
+```
+
+### Symbol.toStringTag
+
+The behavior of Object `toString` can be customized using a special object property `Symbol.toStringTag`.
+
+For instance:
+
+```js run
+let user = {
+  [Symbol.toStringTag]: 'User'
+};
+
+alert( {}.toString.call(user) ); // [object User]
+```
+
+For most environment-specific objects, there is such a property. Here are few browser specific examples:
+
+```js run
+// toStringTag for the envinronment-specific object and class:
+alert( window[Symbol.toStringTag]); // window
+alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
+
+alert( {}.toString.call(window) ); // [object Window]
+alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
+```
+
+As you can see, the result is exactly `Symbol.toStringTag` (if exists), wrapped into `[object ...]`.
+
+At the end we have "typeof on steroids" that not only works for primitive data types, but also for built-in objects and even can be customized.
+
+It can be used instead of `instanceof` for built-in objects when we want to get the type as a string rather than just to check.
+
+## Summary
+
+Let's recap the type-checking methods that we know:
+
+|               | works for   |  returns      |
+|---------------|-------------|---------------|
+| `typeof`      | primitives  |  string       |
+| `{}.toString` | primitives, built-in objects, objects with `Symbol.toStringTag`   |       string |
+| `instanceof`  | objects     |  true/false   |
+
+As we can see, `{}.toString` is technically a "more advanced" `typeof`.
+
+And `instanceof` operator really shines when we are working with a class hierarchy and want to check for the class taking into account inheritance.
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof.png
new file mode 100644
index 00000000..85aa9a55
Binary files /dev/null and b/1-js/07-object-oriented-programming/11-instanceof/instanceof.png differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png
new file mode 100644
index 00000000..fba77122
Binary files /dev/null and b/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/article.md b/1-js/07-object-oriented-programming/13-mixins/article.md
new file mode 100644
index 00000000..624f4426
--- /dev/null
+++ b/1-js/07-object-oriented-programming/13-mixins/article.md
@@ -0,0 +1,199 @@
+# Mixins
+
+In JavaScript we can only inherit from a single object. There can be only one `[[Prototype]]`.
+
+But sometimes we need such kind of thing. For instance, we have a code that implements events exchange or templating, and we'd like to be able to add these capabilities to any class easily.
+
+What can help here is *mixins*.
+
+As [defined in Wikipedia](https://en.wikipedia.org/wiki/Mixin), a *mixin* is a class that contains methods for use by other classes without having to be the parent class of those other classes.
+
+In other words, a *mixin* is a class that implements a certain behavior. But we do not use it alone, we use it to add the behavior to other classes.
+
+## A mixin example
+
+The simplest way to make a mixin in JavaScript -- is to make an object with useful methods, that we can just copy into the prototype.
+
+For instance here the mixin `sayHiMixin` is used to add some "speech" for `User`:
+
+```js run
+*!*
+// mixin
+*/!*
+let sayHiMixin = {
+  sayHi() {
+    alert("Hello " + this.name);
+  },
+  sayBye() {
+    alert("Bye " + this.name);
+  }
+};
+
+*!*
+// usage:
+*/!*
+class User {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// copy the methods
+Object.assign(User.prototype, sayHiMixin);
+
+// now User can say hi
+new User("Dude").sayHi(); // Hi Dude!
+```
+
+There's no inheritance, there's a simple method copying. So `User` may extend some other class and also include the mixin to "mix-in" the additional methods.
+
+Mixins also can make use of inheritance.
+
+For instance, here `sayHiMixin` inherits from `sayMixin`:
+
+```js run
+let sayMixin = {
+  say(phrase) {
+    alert(phrase);
+  }
+};
+
+let sayHiMixin = {
+  // can use any way of prototype setting here
+  __proto__: sayMixin,
+
+  sayHi() {
+    *!*
+    // call parent method
+    */!*
+    super.say("Hello " + this.name);
+  },
+  sayBye() {
+    super.say("Bye " + this.name);
+  }
+};
+
+class User {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// copy the methods
+Object.assign(User.prototype, sayHiMixin);
+
+// now User can say hi
+new User("Dude").sayHi(); // Hi Dude!
+```
+
+Please note that the call to the parent method `super.say()` from `sayHiMixin` looks for the method in the prototype of that mixin, not the class.
+
+![](mixin-inheritance.png)
+
+That's because methods from `sayHiMixin` have `[[HomeObject]]` set to it. So `super` actually means `sayHiMixin.__proto__`, not `User.__proto__`.
+
+## EventMixin
+
+Now a mixin for the real life.
+
+The important feature of many objects is working with events.
+
+That is: an object should have a method to "generate an event" when something important happens to it, and other objects should be able to "subscribe" to receive such notifications.
+
+An event must have a name and, if necessary, the attached data.
+
+For instance, an object `user` can generate an event `"login"` when the visitor logs in. And an object `calendar` may want to receive such notifications and load the information about that visitor.
+
+Or, the object `menu` can generate the event `"select"` when a menu item is selected, and other objects may want to get that information and react on that event.
+
+Events is a way to "share information" with anyone who wants it.
+
+Here is `eventMixin` that implements the corresponding methods:
+
+```js run
+let eventMixin = {
+
+  /**
+   * Subscribe to event, usage:
+   *  menu.on('select', function(item) { ... }
+  */
+  on(eventName, handler) {
+    if (!this._eventHandlers) this._eventHandlers = {};
+    if (!this._eventHandlers[eventName]) {
+      this._eventHandlers[eventName] = [];
+    }
+    this._eventHandlers[eventName].push(handler);
+  },
+
+  /**
+   * Cancel the subscription, usage:
+   *  menu.off('select', handler)
+   */
+  off(eventName, handler) {
+    let handlers = this._eventHandlers && this._eventHandlers[eventName];
+    if (!handlers) return;
+    for(let i = 0; i < handlers.length; i++) {
+      if (handlers[i] == handler) {
+        handlers.splice(i--, 1);
+      }
+    }
+  },
+
+  /**
+   * Generate the event and attach the data to it
+   *  this.trigger('select', data1, data2);
+   */
+  trigger(eventName, ...args) {
+    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+      return; // no handlers for that event name
+    }
+
+    // call the handlers
+    this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
+  }
+};
+```
+
+There are 3 methods here:
+
+1. `.on(eventName, handler)` -- assigns function `handler` to run when the event with that name happens. The handlers are stored in the `_eventHandlers` property.
+2. `.off(eventName, handler)` -- removes the function from the handlers list.
+3. `.trigger(eventName, ...args)` -- generates the event: all assigned handlers are called and `args` are passed as arguments to them.
+
+
+Usage:
+
+```js run
+// Make a class
+class Menu {
+  choose(value) {
+    this.trigger("select", value);
+  }
+}
+// Add the mixin
+Object.assign(Menu.prototype, eventMixin);
+
+let menu = new Menu();
+
+// call the handler on selection:
+*!*
+menu.on("select", value => alert("Value selected: " + value));
+*/!*
+
+// triggers the event => shows Value selected: 123
+menu.choose("123"); // value selected
+```
+
+Now if we have the code interested to react on user selection, we can bind it with `menu.on(...)`.
+
+And the `eventMixin` can add such behavior to as many classes as we'd like, without interfering with the inheritance chain.
+
+## Summary
+
+*Mixin* -- is a generic object-oriented programming term: a class that contains methods for other classes.
+
+Some other languages like e.g. python allow to create mixins using multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying them into the prototype.
+
+We can use mixins as a way to augment a class by multiple behaviors, like event-handling as we have seen above.
+
+Mixins may become a point of conflict if they occasionally overwrite native class methods. So generally one should think well about the naming for a mixin, to minimize such possibility.
diff --git a/1-js/07-object-oriented-programming/13-mixins/head.html b/1-js/07-object-oriented-programming/13-mixins/head.html
new file mode 100644
index 00000000..77ea38b2
--- /dev/null
+++ b/1-js/07-object-oriented-programming/13-mixins/head.html
@@ -0,0 +1,43 @@
+<script>
+let eventMixin = {
+
+  /**
+   * Subscribe to event, usage:
+   *  menu.on('select', function(item) { ... }
+  */
+  on(eventName, handler) {
+    if (!this._eventHandlers) this._eventHandlers = {};
+    if (!this._eventHandlers[eventName]) {
+      this._eventHandlers[eventName] = [];
+    }
+    this._eventHandlers[eventName].push(handler);
+  },
+
+  /**
+   * Cancel the subscription, usage:
+   *  menu.off('select', handler)
+   */
+  off(eventName, handler) {
+    let handlers = this._eventHandlers && this._eventHandlers[eventName];
+    if (!handlers) return;
+    for(let i = 0; i < handlers.length; i++) {
+      if (handlers[i] == handler) {
+        handlers.splice(i--, 1);
+      }
+    }
+  },
+
+  /**
+   * Generate the event and attach the data to it
+   *  this.trigger('select', data1, data2);
+   */
+  trigger(eventName, ...args) {
+    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+      return; // no handlers for that event name
+    }
+
+    // call the handlers
+    this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
+  }
+};
+</script>
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png
new file mode 100644
index 00000000..7cc65503
Binary files /dev/null and b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png
new file mode 100644
index 00000000..f53ecf68
Binary files /dev/null and b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png differ
diff --git a/1-js/07-object-oriented-programming/index.md b/1-js/07-object-oriented-programming/index.md
new file mode 100644
index 00000000..7053ada8
--- /dev/null
+++ b/1-js/07-object-oriented-programming/index.md
@@ -0,0 +1,3 @@
+# Objects, classes, inheritance
+
+In this section we return to objects and learn them even more in-depth.
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md b/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md
new file mode 100644
index 00000000..05ba72e0
--- /dev/null
+++ b/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md
@@ -0,0 +1,47 @@
+The difference becomes obvious when we look at the code inside a function.
+
+The behavior is different if there's a "jump out" of `try..catch`.
+
+For instance, when there's a `return` inside `try..catch`. The `finally` clause works in case of *any* exit from `try..catch`, even via the `return` statement: right after `try..catch` is done, but before the calling code gets the control.
+
+```js run
+function f() {
+  try {
+    alert('start');
+*!*
+    return "result";
+*/!*
+  } catch (e) {
+    /// ...
+  } finally {
+    alert('cleanup!');
+  }
+}
+
+f(); // cleanup!
+```
+
+...Or when there's a `throw`, like here:
+
+```js run
+function f() {
+  try {
+    alert('start');
+    throw new Error("an error");
+  } catch (e) {
+    // ...
+    if("can't handle the error") {
+*!*
+      throw e;
+*/!*
+    }
+
+  } finally {
+    alert('cleanup!')
+  }
+}
+
+f(); // cleanup!
+```
+
+It's `finally` that guarantees the cleanup here. If we just put the code at the end of `f`, it wouldn't run.
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md b/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md
new file mode 100644
index 00000000..e8468734
--- /dev/null
+++ b/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md
@@ -0,0 +1,38 @@
+importance: 5
+
+---
+
+# Finally or just the code?
+
+Compare the two code fragments.
+
+1. The first one uses `finally` to execute the code after `try..catch`:
+
+    ```js
+    try {
+      work work
+    } catch (e) {
+      handle errors
+    } finally {
+    *!*
+      cleanup the working space
+    */!*
+    }
+    ```
+2. The second fragment puts the cleaning right after `try..catch`:
+
+    ```js
+    try {
+      work work
+    } catch (e) {
+      handle errors
+    }
+
+    *!*
+    cleanup the working space
+    */!*
+    ```
+
+We definitely need the cleanup after the work has started, doesn't matter if there was an error or not.
+
+Is there an advantage here in using `finally` or both code fragments are equal? If there is such an advantage, then give an example when it matters.
diff --git a/1-js/08-error-handling/1-try-catch/article.md b/1-js/08-error-handling/1-try-catch/article.md
new file mode 100644
index 00000000..bc3b509b
--- /dev/null
+++ b/1-js/08-error-handling/1-try-catch/article.md
@@ -0,0 +1,662 @@
+# Error handling, "try..catch"
+
+No matter how great we are at programming, sometimes our scripts have errors. They may occur because of our mistakes, an unexpected user input, an erroneous server response and for a thousand of other reasons.
+
+Usually, a script "dies" (immediately stops) in case of an error, printing it to console.
+
+But there's a syntax construct `try..catch` that allows to "catch" errors and, instead of dying, do something more reasonable.
+
+[cut]
+
+## The "try..catch" syntax
+
+The `try..catch` construct has two main blocks: `try`, and then `catch`:
+
+```js
+try {
+
+  // code...
+
+} catch (err) {
+
+  // error handling
+
+}
+```
+
+It works like this:
+
+1. First, the code in `try {...}` is executed.
+2. If there were no errors, then `catch(err)` is ignored: the execution reaches the end of `try` and then jumps over `catch`.
+3. If an error occurs, then `try` execution is stopped, and the control flows to the beginning of `catch(err)`. The `err` variable (can use any name for it) contains an error object with details about what's happened.
+
+![](try-catch-flow.png)
+
+So, an error inside the `try {…}` block does not kill the script: we have a chance to handle it in `catch`.
+
+Let's see more examples.
+
+- An errorless example: shows `alert` `(1)` and `(2)`:
+
+    ```js run
+    try {
+
+      alert('Start of try runs');  // *!*(1) <--*/!*
+
+      // ...no errors here
+
+      alert('End of try runs');   // *!*(2) <--*/!*
+
+    } catch(err) {
+
+      alert('Catch is ignored, because there are no errors'); // (3)
+
+    }
+
+    alert("...Then the execution continues");
+    ```
+- An example with an error: shows `(1)` and `(3)`:
+
+    ```js run
+    try {
+
+      alert('Start of try runs');  // *!*(1) <--*/!*
+
+    *!*
+      lalala; // error, variable is not defined!
+    */!*
+
+      alert('End of try (never reached)');  // (2)
+
+    } catch(err) {
+
+      alert(`Error has occured!`); // *!*(3) <--*/!*
+
+    }
+
+    alert("...Then the execution continues");
+    ```
+
+
+````warn header="`try..catch` only works for runtime errors"
+For `try..catch` to work, the code must be runnable. In other words, it should be valid JavaScript.
+
+It won't work if the code is syntactically wrong, for instance it has unmatched figure brackets:
+
+```js run
+try {
+  {{{{{{{{{{{{
+} catch(e) {
+  alert("The engine can't understand this code, it's invalid");
+}
+```
+
+The JavaScript engine first reads the code, and then runs it. The errors that occur on the reading phrase are called "parse-time" errors and are unrecoverable (from inside that code). That's because the engine can't understand the code.
+
+So, `try..catch` can only handle errors that occur in the valid code. Such errors are called "runtime errors" or, sometimes, "exceptions".
+````
+
+
+````warn header="`try..catch` works synchronously"
+If an exception happens in a "scheduled" code, like in `setTimeout`, then `try..catch` won't catch it:
+
+```js run
+try {
+  setTimeout(function() {
+    noSuchVariable; // script will die here
+  }, 1000);
+} catch (e) {
+  alert( "won't work" );
+}
+```
+
+That's because `try..catch` actually wraps the `setTimeout` call that schedules the function. But the function itself is executed later, when the engine has already have left the `try..catch` construct.
+
+To catch an exception inside a scheduled function, `try..catch` must be inside that function:
+```js run
+setTimeout(function() {
+  try {    
+    noSuchVariable; // try..catch handles the error!
+  } catch (e) {
+    alert( "error is caught here!" );
+  }
+}, 1000);
+```
+````
+
+## Error object
+
+When an error occurs, JavaScript generates an object containing the details about it. The object is then passed as an argument to `catch`:
+
+```js
+try {
+  // ...
+} catch(err) { // <-- the "error object", could use another word instead of err
+  // ...
+}
+```
+
+For all built-in errors, the error object inside `catch` block has two main properties:
+
+`name`
+: Error name. For an undefined variable that's `"ReferenceError"`.
+
+`message`
+: Textual message about error details.
+
+There are other non-standard properties available in most environments. One of most widely used and supported is:
+
+`stack`
+: Current call stack: a string with information about the sequence of nested calls that led to the error. Used for debugging purposes.
+
+For instance:
+
+```js run untrusted
+try {
+*!*
+  lalala; // error, variable is not defined!
+*/!*
+} catch(err) {
+  alert(err.name); // ReferenceError
+  alert(err.message); // lalala is not defined
+  alert(err.stack); // ReferenceError: lalala is not defined at ...
+
+  // Can also show an error as a whole
+  // The error is converted to string as "name: message"
+  alert(err); // ReferenceError: lalala is not defined
+}
+```
+
+
+## Using "try..catch"
+
+Let's explore a real-life use case of `try..catch`.
+
+As we already know, JavaScript supports method [JSON.parse(str)](mdn:js/JSON/parse) to read JSON-encoded values.
+
+Usually it's used to decode the data received over the network, from the server or another source.
+
+We receive it and call `JSON.parse`, like this:
+
+```js run
+let json = '{"name":"John", "age": 30}'; // data from the server
+
+*!*
+let user = JSON.parse(json); // convert the text representation to JS object
+*/!*
+
+// now user is an object with properties from the string
+alert( user.name ); // John
+alert( user.age );  // 30
+```
+
+More detailed information about JSON you can find in the chapter <info:json>.
+
+**If `json` is malformed, `JSON.parse` generates an error, so the script "dies".**
+
+Should we be satisfied with that? Of course, not!
+
+This way if something's wrong with the data, the visitor will never know that (unless he opens developer console). And people really really don't like when something "just dies" without any error message.
+
+Let's use `try..catch` to handle the error:
+
+```js run
+let json = "{ bad json }";
+
+try {
+
+*!*
+  let user = JSON.parse(json); // <-- when an error occurs...
+*/!*
+  alert( user.name ); // doesn't work
+
+} catch (e) {
+*!*
+  // ...the execution jumps here
+  alert( "Our apologies, the data has errors, we'll try to request it one more time." );
+  alert( e.name );
+  alert( e.message );
+*/!*
+}
+```
+
+Here we use `catch` block only to show the message, but we can do much more: a new network request, suggest an alternative to the visitor, send the information about the error to a logging facility... All much better than just dying.
+
+## Throwing our own errors
+
+What if `json` is syntactically correct... But doesn't have a required `"name"` property?
+
+Like this:
+
+```js run
+let json = '{ "age": 30 }'; // incomplete data
+
+try {
+
+  let user = JSON.parse(json); // <-- no errors
+*!*
+  alert( user.name ); // no name!
+*/!*
+
+} catch (e) {
+  alert( "doesn't execute" );
+}
+```
+
+Here `JSON.parse` runs normally, but the absence of `"name"` is actually an error for us.
+
+To unify error handling, we'll use the `throw` operator.
+
+### "Throw" operator
+
+The `throw` operator generates an error.
+
+The syntax is:
+
+```js
+throw <error object>
+```
+
+Technically, we can use anything as an error object. That may be even a primitive, like a number or a string, but it's better to use objects, preferrably with `name` and `message` properties (to stay somewhat compatible with built-in errors).
+
+JavaScript has many built-in constructors for standard errors: `Error`, `SyntaxError`, `ReferenceError`, `TypeError` and others. We can use them to create error objects as well.
+
+Their syntax is:
+
+```js
+let error = new Error(message);
+// or
+let error = new SyntaxError(message);
+let error = new ReferenceError(message);
+// ...
+```
+
+For built-in errors (not for any objects, just for errors), the `name` property is exactly the name of the constructor. And `message` is taken from the argument.
+
+For instance:
+
+```js run
+let error = new Error("Things happen o_O");
+
+alert(error.name); // Error
+alert(error.message); // Things happen o_O
+```
+
+Let's see what kind of error `JSON.parse` generates:
+
+```js run
+try {
+  JSON.parse("{ bad json o_O }");
+} catch(e) {
+*!*
+  alert(e.name); // SyntaxError
+*/!*
+  alert(e.message); // Unexpected token o in JSON at position 0
+}
+```
+
+As we can see, that's a `SyntaxError`.
+
+...And in our case, the absense of `name` could be treated as a syntax error also, assuming that users must have a `"name"`.
+
+So let's throw it:
+
+```js run
+let json = '{ "age": 30 }'; // incomplete data
+
+try {
+
+  let user = JSON.parse(json); // <-- no errors
+
+  if (!user.name) {
+*!*
+    throw new SyntaxError("Incomplete data: no name"); // (*)
+*/!*
+  }
+
+  alert( user.name );
+
+} catch(e) {
+  alert( "JSON Error: " + e.message ); // JSON Error: Incomplete data: no name
+}
+```
+
+In the line `(*)` the `throw` operator generates `SyntaxError` with the given `message`, the same way as JavaScript would generate itself. The execution of `try` immediately stops and the control flow jumps into `catch`.
+
+Now `catch` became a single place for all error handling: both for `JSON.parse` and other cases.
+
+## Rethrowing
+
+In the example above we use `try..catch` to handle incorrect data. But is it possible that *another unexpected error* occurs within the `try {...}` block? Like a variable is undefined or something else, not just that "incorrect data" thing.
+
+Like this:
+
+```js run
+let json = '{ "age": 30 }'; // incomplete data
+
+try {
+  user = JSON.parse(json); // <-- forgot to put "let" before user
+
+  // ...
+} catch(err) {
+  alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined
+  // (not JSON Error actually)
+}
+```
+
+Of course, everything's possible! Programmers do make mistakes. Even in open-source utilities used by millions for decades -- suddenly a crazy bug may be discovered that leads to terrible hacks (like it happened with the `ssh` tool).
+
+In our case, `try..catch` is meant to catch "incorrect data" errors. But by its nature, `catch` gets *all* errors from `try`. Here it gets an unexpected error, but still shows the same `"JSON Error"` message. That's wrong and also makes the code more difficult to debug.
+
+Fortunately, we can find out which error we get, for instance from its `name`:
+
+```js run
+try {
+  user = { /*...*/ };
+} catch(e) {
+*!*
+  alert(e.name); // "ReferenceError" for accessing an undefined variable
+*/!*
+}
+```
+
+The rule is simple:
+
+**Catch should only process errors that it knows and "rethrow" all others.**
+
+The "rethrowing" technique can be explained in more detail as:
+
+1. Catch gets all errors.
+2. In `catch(err) {...}` block we analyze the error object `err`.
+2. If we don't know how to handle it, then we do `throw err`.
+
+In the code below, we use rethrowing so that `catch` only handles `SyntaxError`:
+
+```js run
+let json = '{ "age": 30 }'; // incomplete data
+try {
+
+  let user = JSON.parse(json);
+
+  if (!user.name) {
+    throw new SyntaxError("Incomplete data: no name");
+  }
+
+*!*
+  blabla(); // unexpected error
+*/!*
+
+  alert( user.name );
+
+} catch(e) {
+
+*!*
+  if (e.name == "SyntaxError") {
+    alert( "JSON Error: " + e.message );
+  } else {
+    throw e; // rethrow (*)
+  }
+*/!*
+
+}
+```
+
+The error throwing on line `(*)` from inside `catch` block "falls out" of `try..catch` and can be either caught by an outer `try..catch` construct (if it exists), or it kills the script.
+
+So the `catch` block actually handles only errors that it knows how to deal with and "skips" all others.
+
+The example below demonstrates how such errors can be caught by one more level of `try..catch`:
+
+```js run
+function readData() {
+  let json = '{ "age": 30 }';
+
+  try {
+    // ...
+*!*
+    blabla(); // error!
+*/!*
+  } catch (e) {
+    // ...
+    if (e.name != 'SyntaxError') {
+*!*
+      throw e; // rethrow (don't know how to deal with it)
+*/!*
+    }
+  }
+}
+
+try {
+  readData();
+} catch (e) {
+*!*
+  alert( "External catch got: " + e ); // caught it!
+*/!*
+}
+```
+
+Here `readData` only knows how to handle `SyntaxError`, while the outer `try..catch` knows how to handle everything.
+
+## try..catch..finally
+
+Wait, that's not all.
+
+The `try..catch` construct may have one more code clause: `finally`.
+
+If it exists, it runs in all cases:
+
+- after `try`, if there were no errors,
+- after `catch`, if there were errors.
+
+The extended syntax looks like this:
+
+```js
+*!*try*/!* {
+   ... try to execute the code ...
+} *!*catch*/!*(e) {
+   ... handle errors ...
+} *!*finally*/!* {
+   ... execute always ...
+}
+```
+
+Try running this code:
+
+```js run
+try {
+  alert( 'try' );
+  if (confirm('Make an error?')) BAD_CODE();
+} catch (e) {
+  alert( 'catch' );
+} finally {
+  alert( 'finally' );
+}
+```
+
+The code has two ways of execution:
+
+1. If you answer "Yes" to "Make an error?", then `try -> catch -> finally`.
+2. If you say "No", then `try -> finally`.
+
+The `finally` clause is often used when we start doing something before `try..catch` and want to finalize it in any case of outcome.
+
+For instance, we want to measure time that a Fibonacci numbers function `fib(n)` takes. Naturally, we can start measuring before it runs and finish afterwards. But what if there's an error during the function call? In particular, the implementation of `fib(n)` in the code below returns an error for negative or non-integer numbers.
+
+The `finally` clause is a great place to finish the measurements no matter what.
+
+Here `finally` guarantees that the time will be measured correctly in both situations -- in case of a successful execution of `fib` and in case of an error in it:
+
+```js run
+let num = +prompt("Enter a positive integer number?", 35)
+
+let diff, result;
+
+function fib(n) {
+  if (n < 0 || Math.trunc(n) != n) {
+    throw new Error("Must not be negative, and also an integer.");
+  }
+  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
+}
+
+let start = Date.now();
+
+try {
+  result = fib(num);
+} catch (e) {
+  result = 0;
+*!*
+} finally {
+  diff = Date.now() - start;
+}
+*/!*
+
+alert(result || "error occured");
+
+alert( `execution took ${diff}ms` );
+```
+
+You can check by running the code with entering `35` into `prompt` -- it executes normally, `finally` after `try`. And then enter `-1` -- there will be an immediate error, an the execution will take `0ms`. Both measurements are done correctly.
+
+In other words, there may be two ways to exit a function: either a `return` or `throw`. The `finally` clause handles them both.
+
+
+```smart header="Variables are local inside `try..catch..finally`"
+Please note that `result` and `diff` variables in the code above are declared *before* `try..catch`.
+
+Otherwise, if `let` were made inside the `{...}` block, it would only be visible inside of it.
+```
+
+````smart header="`finally` and `return`"
+Finally clause works for *any* exit from `try..catch`. That includes an explicit `return`.
+
+In the example below, there's a `return` in `try`. In this case, `finally` is executed just before the control returns to the outer code.
+
+```js run
+function func() {
+
+  try {
+*!*
+    return 1;
+*/!*
+
+  } catch (e) {
+    /* ... */
+  } finally {
+*!*
+    alert( 'finally' );
+*/!*
+  }
+}
+
+alert( func() ); // first works alert from finally, and then this one
+```
+````
+
+````smart header="`try..finally`"
+
+The `try..finally` construct, without `catch` clause, is also useful. We apply it when we don't want to handle errors right here, but want to be sure that processes that we started are finalized.
+
+```js
+function func() {
+  // start doing something that needs completion (like measurements)
+  try {
+    // ...
+  } finally {
+    // complete that thing even if all dies
+  }
+}
+```
+In the code above, an error inside `try` always falls out, because there's no `catch`. But `finally` works before the execution flow jumps outside.
+````
+
+## Global catch
+
+```warn header="Environment-specific"
+The information from this section is not a part of the core JavaScript.
+```
+
+Let's imagine we've got a fatal error outside of `try..catch`, and the script died. Like a programming error or something else terrible.
+
+Is there a way to react on such occurrences? We may want to log the error, show something to the user (normally he doesn't see error messages) etc.
+
+There is none in the specification, but environments usually provide it, because it's really useful. For instance, Node.JS has [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception) for that. And in the browser we can assign a function to special [window.onerror](mdn:api/GlobalEventHandlers/onerror) property. It will run in case of an uncaught error.
+
+The syntax:
+
+```js
+window.onerror = function(message, url, line, col, error) {
+  // ...
+};
+```
+
+`message`
+: Error message.
+
+`url`
+: URL of the script where error happened.
+
+`line`, `col`
+: Line and column numbers where error happened.
+
+`error`
+: Error object.
+
+For instance:
+
+```html run untrusted refresh height=1
+<script>
+*!*
+  window.onerror = function(message, url, line, col, error) {
+    alert(`${message}\n At ${line}:${col} of ${url}`);
+  };
+*/!*
+
+  function readData() {
+    badFunc(); // Whoops, something went wrong!
+  }
+
+  readData();
+</script>
+```
+
+The role of the global handler `window.onerror` is usually not to recover the script execution -- that's probably impossible in case of programming errors, but to send the error message to developers.
+
+There are also web-services that provide error-logging for such cases, like <https://errorception.com> or <http://www.muscula.com>.
+
+They work like this:
+
+1. We register at the service and get a piece of JS (or a script URL) from them to insert on pages.
+2. That JS script has a custom `window.onerror` function.
+3. When an error occurs, it sends a network request about it to the service.
+4. We can log in to the service web interface and see errors.
+
+## Summary
+
+The `try..catch` construct allows to handle runtime errors. It literally allows to try running the code and catch errors that may occur in it.
+
+The syntax is:
+
+```js
+try {
+  // run this code
+} catch(err) {
+  // if an error happened, then jump here
+  // err is the error object
+} finally {
+  // do in any case after try/catch
+}
+```
+
+There may be no `catch` section or no `finally`, so `try..catch` and `try..finally` are also valid.
+
+Error objects have following properties:
+
+- `message` -- the human-readable error message.
+- `name` -- the string with error name (error constructor name).
+- `stack` (non-standard) -- the stack at the moment of error creation.
+
+We can also generate our own errors using the `throw` operator. Technically, the argument of `throw` can be anything, but usually it's an error object inheriting from the built-in `Error` class. More on extending errors in the next chapter.
+
+Rethrowing is a basic pattern of error handling: a `catch` block usually expects and knows how to handle the particular error type, so it should rethrow errors it doesn't know.
+
+Even if we don't have `try..catch`, most environments allow to setup a "global" error handler to catch errors that "fall out". In-browser that's `window.onerror`.
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow.png b/1-js/08-error-handling/1-try-catch/try-catch-flow.png
new file mode 100644
index 00000000..6a91b632
Binary files /dev/null and b/1-js/08-error-handling/1-try-catch/try-catch-flow.png differ
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png b/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png
new file mode 100644
index 00000000..8bf9680f
Binary files /dev/null and b/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png differ
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/solution.md b/1-js/08-error-handling/2-custom-errors/1-format-error/solution.md
new file mode 100644
index 00000000..bb6b74cf
--- /dev/null
+++ b/1-js/08-error-handling/2-custom-errors/1-format-error/solution.md
@@ -0,0 +1,16 @@
+```js run untrusted
+class FormatError extends SyntaxError {
+  constructor(message) {
+    super(message);
+    this.name = "FormatError";
+  }
+}
+
+let err = new FormatError("formatting error");
+
+alert( err.message ); // formatting error
+alert( err.name ); // FormatError
+alert( err.stack ); // stack
+
+alert( err instanceof SyntaxError ); // true
+```
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/task.md b/1-js/08-error-handling/2-custom-errors/1-format-error/task.md
new file mode 100644
index 00000000..2c8e910f
--- /dev/null
+++ b/1-js/08-error-handling/2-custom-errors/1-format-error/task.md
@@ -0,0 +1,22 @@
+importance: 5
+
+---
+
+# Inherit from SyntaxError
+
+Create a class `FormatError` that inherits from the built-in `SyntaxError` class.
+
+It should support `message`, `name` and `stack` properties.
+
+Usage example:
+
+```js
+let err = new FormatError("formatting error");
+
+alert( err.message ); // formatting error
+alert( err.name ); // FormatError
+alert( err.stack ); // stack
+
+alert( err instanceof FormatError ); // true
+alert( err instanceof SyntaxError ); // true (because inherits from SyntaxError)
+```
diff --git a/1-js/08-error-handling/2-custom-errors/article.md b/1-js/08-error-handling/2-custom-errors/article.md
new file mode 100644
index 00000000..d7a780f6
--- /dev/null
+++ b/1-js/08-error-handling/2-custom-errors/article.md
@@ -0,0 +1,307 @@
+# Custom errors, extending Error
+
+When we develop something, we often need our own error classes to reflect specific things that may go wrong in our tasks. For errors in network operations we may need `HttpError`, for database operations `DbError`, for searching operations `NotFoundError` and so on.
+
+Our errors should support basic error properties like `message`, `name` and, preferably, `stack`. But they also may have other properties of their own, e.g. `HttpError` objects may have `statusCode` property with a value like `404` or `403` or `500`.
+
+JavaScript allows to use `throw` with any argument, so technically our custom error classes don't need to inherit from `Error`. But if we inherit, then it becomes possible to use `obj instanceof Error` to identify error objects. So it's better to inherit from it.
+
+As we build our application, our own errors naturally form a hierarchy, for instance `HttpTimeoutError` may inherit from `HttpError`, and so on.
+
+## Extending Error
+
+As an example, let's consider a function `readUser(json)` that should read JSON with user data.
+
+Here's an example of how a valid `json` may look:
+```js
+let json = `{ "name": "John", "age": 30 }`;
+```
+
+Internally, we'll use `JSON.parse`. If it receives malformed `json`, then it throws `SyntaxError`.
+
+But even if `json` is syntactically correct, that doesn't mean that it's a valid user, right? It may miss the necessary data. For instance, if may not have `name` and `age` properties that are essential for our users.
+
+Our function `readUser(json)` will not only read JSON, but check ("validate") the data. If there are no required fields, or the format is wrong, then that's an error. And that's not a `SyntaxError`, because the data is syntactically correct, but another kind of error. We'll call it `ValidationError` and create a class for it. An error of that kind should also carry the information about the offending field.
+
+Our `ValidationError` class should inherit from the built-in `Error` class.
+
+That class is built-in, but we should have its approximate code before our eyes, to understand what we're extending.
+
+So here you are:
+
+```js
+// The "pseudocode" for the built-in Error class defined by JavaScript itself
+class Error {
+  constructor(message) {
+    this.message = message;
+    this.name = "Error"; // (different names for different built-in error classes)
+    this.stack = <nested calls>; // non-standard, but most environments support it
+  }
+}
+```
+
+Now let's go on and inherit `ValidationError` from it:
+
+```js run untrusted
+*!*
+class ValidationError extends Error {
+*/!*
+  constructor(message) {
+    super(message); // (1)
+    this.name = "ValidationError"; // (2)
+  }
+}
+
+function test() {
+  throw new ValidationError("Whoops!");
+}
+
+try {
+  test();
+} catch(err) {
+  alert(err.message); // Whoops!
+  alert(err.name); // ValidationError
+  alert(err.stack); // a list of nested calls with line numbers for each
+}
+```
+
+Please take a look at the constructor:
+
+1. In the line `(1)` we call the parent constructor. JavaScript requires us to call `super` in the child constructor, so that's obligatory. The parent constructor sets the `message` property.
+2. The parent constructor also sets the `name` property to `"Error"`, so in the line `(2)` we reset it to the right value.
+
+Let's try to use it in `readUser(json)`:
+
+```js run
+class ValidationError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+  }
+}
+
+// Usage
+function readUser(json) {
+  let user = JSON.parse(json);
+
+  if (!user.age) {
+    throw new ValidationError("No field: age");
+  }
+  if (!user.name) {
+    throw new ValidationError("No field: name");
+  }
+
+  return user;
+}
+
+// Working example with try..catch
+
+try {
+  let user = readUser('{ "age": 25 }');
+} catch (err) {
+  if (err instanceof ValidationError) {
+*!*
+    alert("Invalid data: " + err.message); // Invalid data: No field: name
+*/!*
+  } else if (err instanceof SyntaxError) { // (*)
+    alert("JSON Syntax Error: " + err.message);
+  } else {
+    throw err; // unknown error, rethrow it (**)
+  }
+}
+```
+
+The `try..catch` block in the code above handles both our `ValidationError` and the built-in `SyntaxError` from `JSON.parse`.
+
+Please take a look at how we use `instanceof` to check for the specific error type in the line `(*)`.
+
+We could also look at `err.name`, like this:
+
+```js
+// ...
+// instead of (err instanceof SyntaxError)
+} else if (err.name == "SyntaxError") { // (*)
+// ...
+```  
+
+The `instanceof` version is much better, because in the future we are going to extend `ValidationError`, make subtypes of it, like `PropertyRequiredError`. And `instanceof` check will continue to work for new inheriting classes. So that's future-proof.
+
+Also it's important that if `catch` meets an unknown error, then it rethrows it in the line `(**)`. The `catch`  only knows how to handle validation and syntax errors, other kinds (due to a typo in the code or such) should fall through.
+
+## Further inheritance
+
+The `ValidationError` class is very generic. Many things may go wrong. The property may be absent or it may be in a wrong format (like a string value for `age`). Let's make a more concrete class `PropertyRequiredError`, exactly for absent properties. It will carry additional information about the property that's missing.
+
+```js run
+class ValidationError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+  }
+}
+
+*!*
+class PropertyRequiredError extends ValidationError {
+  constructor(property) {
+    super("No property: " + property);
+    this.name = "PropertyRequiredError";
+    this.property = property;
+  }
+}
+*/!*
+
+// Usage
+function readUser(json) {
+  let user = JSON.parse(json);
+
+  if (!user.age) {
+    throw new PropertyRequiredError("age");
+  }
+  if (!user.name) {
+    throw new PropertyRequiredError("name");
+  }
+
+  return user;
+}
+
+// Working example with try..catch
+
+try {
+  let user = readUser('{ "age": 25 }');
+} catch (err) {
+  if (err instanceof ValidationError) {
+*!*
+    alert("Invalid data: " + err.message); // Invalid data: No property: name
+    alert(err.name); // PropertyRequiredError
+    alert(err.property); // name
+*/!*
+  } else if (err instanceof SyntaxError) {
+    alert("JSON Syntax Error: " + err.message);
+  } else {
+    throw err; // unknown error, rethrow it
+  }
+}
+```
+
+The new class `PropertyRequiredError` is easy to use: we only need to pass the property name: `new PropertyRequiredError(property)`. The human-readable `message` is generated by the constructor.
+
+Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedius -- to assign `this.name = <class name>` when creating each custom error. But there's a way out. We can make our own "basic error" class that removes this burden from our shoulders by using `this.constructor.name` for `this.name` in the constructor. And then inherit from it.
+
+Let's call it `MyError`.
+
+Here's the code with `MyError` and other custom error classes, simplified:
+
+```js run
+class MyError extends Error {
+  constructor(message) {
+    super(message);
+*!*
+    this.name = this.constructor.name;
+*/!*
+  }
+}
+
+class ValidationError extends MyError { }
+
+class PropertyRequiredError extends ValidationError {
+  constructor(property) {
+    super("No property: " + property);
+    this.property = property;
+  }
+}
+
+// name is correct
+alert( new PropertyRequiredError("field").name ); // PropertyRequiredError
+```
+
+Now custom errors are much shorter, especially `ValidationError`, as we got rid of the `"this.name = ..."` line in the constructor.
+
+## Wrapping exceptions
+
+The purpose of the function `readUser` in the code above is "to read the user data", right? There may occur different kinds of errors in the process. Right now we have `SyntaxError` and `ValidationError`, but in the future `readUser` function may grow: the new code will probably generate other kinds of errors.
+
+The code which calls `readUser` should handle these errors. Right now it uses multiple `if` in the `catch` block to check for different error types and rethrow the unknown ones. But if `readUser` function generates several kinds of errors -- then we should ask ourselves: do we really want to check for all error types one-by-one in every code that calls `readUser`?
+
+Often the answer is "No": the outer code wants to be "one level above all that". It wants to have some kind of "data reading error". Why exactly it happened -- is often irrelevant (the error message describes it). Or, even better if there is a way to get error details, but only if we need to.
+
+So let's make a new class `ReadError` to represent such errors. If an error occurs inside `readUser`, we'll catch it there and generate `ReadError`. We'll also keep the reference to the original error in the `cause` property. Then the outer code will only have to check for `ReadError`.
+
+Here's the code that defines `ReadError` and demonstrates its use in `readUser` and `try..catch`:
+
+```js run
+class ReadError extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.cause = cause;
+    this.name = 'ReadError';
+  }
+}
+
+class ValidationError extends Error { /*...*/ }
+class PropertyRequiredError extends ValidationError { /* ... */ }
+
+function validateUser(user) {
+  if (!user.age) {
+    throw new PropertyRequiredError("age");
+  }
+
+  if (!user.name) {
+    throw new PropertyRequiredError("name");
+  }
+}
+
+function readUser(json) {
+  let user;
+
+  try {
+    user = JSON.parse(json);
+  } catch (err) {
+*!*
+    if (err instanceof SyntaxError) {
+      throw new ReadError("Syntax Error", err);
+    } else {
+      throw err;
+    }
+*/!*
+  }
+
+  try {
+    validateUser(user);
+  } catch (err) {
+*!*
+    if (err instanceof ValidationError) {
+      throw new ReadError("Validation Error", err);
+    } else {
+      throw err;
+    }
+*/!*
+  }
+
+}
+
+try {
+  readUser('{bad json}');
+} catch (e) {
+  if (e instanceof ReadError) {
+*!*
+    alert(e);
+    // Original error: SyntaxError: Unexpected token b in JSON at position 1
+    alert("Original error: " + e.cause);
+*/!*
+  } else {
+    throw e;
+  }
+}
+```
+
+In the code above, `readUser` works exactly as described -- catches syntax and validation errors and throws `ReadError` errors instead (unknown errors are rethrown as usual).
+
+So the outer code checks `instanceof ReadError` and that's it. No need to list possible all error types.
+
+The approach is called "wrapping exceptions", because we take "low level exceptions" and "wrap" them into `ReadError` that is more abstract and more convenient to use for the calling code. It is widely used in object-oriented programming.
+
+## Summary
+
+- We can inherit from `Error` and other built-in error classes normally, just need to take care of `name` property and don't forget to call `super`.
+- Most of the time, we should use `instanceof` to check for particular errors. It also works with inheritance. But sometimes we have an error object coming from the 3rd-party library and there's no easy way to get the class. Then `name` property can be used for such checks.
+- Wrapping exceptions is a widespread technique when a function handles low-level exceptions and makes a higher-level object to report about the errors. Low-level exceptions sometimes become properties of that object like `err.cause` in the examples above, but that's not strictly required.
diff --git a/1-js/08-error-handling/index.md b/1-js/08-error-handling/index.md
new file mode 100644
index 00000000..face61c6
--- /dev/null
+++ b/1-js/08-error-handling/index.md
@@ -0,0 +1 @@
+# Error handling
diff --git a/1-js/1-getting-started/1-intro/article.md b/1-js/1-getting-started/1-intro/article.md
deleted file mode 100644
index 75db80f1..00000000
--- a/1-js/1-getting-started/1-intro/article.md
+++ /dev/null
@@ -1,234 +0,0 @@
-# Введение в JavaScript
-
-Давайте посмотрим, что такого особенного в JavaScript, почему именно он, и какие еще технологии существуют, кроме JavaScript.
-
-## Что такое JavaScript?   
-
-*JavaScript* изначально создавался для того, чтобы сделать web-странички "живыми".  
-Программы на этом языке называются *скриптами*. В браузере они подключаются напрямую к HTML и, как только загружается страничка -- тут же выполняются.
-
-**Программы на JavaScript -- обычный текст**. Они не требуют какой-то специальной подготовки.
-
-В этом плане JavaScript сильно отличается от другого языка, который называется [Java](http://ru.wikipedia.org/wiki/Java).
-
-[smart header="Почему <u>Java</u>Script?"]
-Когда создавался язык JavaScript, у него изначально было другое название: "LiveScript". Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.
-
-Планировалось, что JavaScript будет эдаким "младшим братом" Java. Однако, история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется [ECMAScript](https://ru.wikipedia.org/wiki/ECMAScript), и к Java не имеет никакого отношения.
-
-У него много особенностей, которые усложняют освоение, но по ходу учебника мы с ними разберёмся.
-[/smart]
-
-JavaScript может выполняться не только в браузере, а где угодно, нужна лишь специальная программа -- [интерпретатор](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%82%D0%BE%D1%80). Процесс выполнения скрипта называют "интерпретацией".
-
-[smart header="Компиляция и интерпретация, для программистов"]
-Для выполнения программ, не важно на каком языке, существуют два способа: "компиляция" и "интерпретация". 
-
-<ul>
-<li>*Компиляция* -- это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется "компилятор", преобразуется в другой язык, как правило -- в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика.</li>
-<li>*Интерпретация* -- это когда исходный код программы получает другой инструмент, который называют "интерпретатор", и выполняет его "как есть". При этом распространяется именно сам исходный код (скрипт). Этот подход применяется в браузерах для JavaScript.</li>
-</ul>
-
-Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.
-[/smart]
-
-Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице. Но, разумеется, JavaScript можно использовать не только в браузере. Это полноценный язык, программы на котором можно запускать и на сервере, и даже в стиральной машинке, если в ней установлен соответствующий интерпретатор.
-
-[warn header="Поговорим о браузерах"]
-
-Далее в этой главе мы говорим о возможностях и ограничениях JavaScript именно в контексте браузера.
-
-[/warn]
-
-## Что умеет JavaScript?   
-
-Современный JavaScript -- это "безопасный" язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.
-
-Что же касается остальных возможностей -- они зависят от окружения, в котором запущен JavaScript. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером: 
-
-<ul>
-<li>Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.</li>
-<li>Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п. </li>
-<li>Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется &quot;AJAX&quot;).</li>
-<li>Получать и устанавливать cookie, запрашивать данные, выводить сообщения...</li>
-<li>...и многое, многое другое!</li> 
-</ul>
-
-## Что НЕ умеет JavaScript?   
-
-JavaScript -- быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.. 
-
-Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя. 
-
-Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере. Кроме того, современные браузеры предоставляют свои механизмы по установке плагинов и расширений, которые обладают расширенными возможностями, но требуют специальных действий по установке от пользователя
-
-**Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.**
-
-<img src="limitations.png" width="530" height="400">
-
-<ul>
-<li>JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
-
-Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией -- *"песочницей"*. Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
-</li>
-<li>JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
-
-Есть способы это обойти, и они раскрыты в учебнике, но они требуют специального кода на оба документа, которые находятся в разных вкладках или окнах. Без него, из соображений безопасности, залезть из одной вкладки в другую при помощи JavaScript нельзя. 
-</li>
-<li>Из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т. к. и здесь есть ограничения безопасности. 
-</li>
-</ul>
-
-## В чём уникальность JavaScript?   
-
-Есть как минимум *три* замечательных особенности JavaScript:
-
-[compare]
-+Полная интеграция с HTML/CSS.
-+Простые вещи делаются просто.
-+Поддерживается всеми распространёнными браузерами и включён по умолчанию.
-[/compare]
-
-**Этих трёх вещей одновременно нет больше ни в одной браузерной технологии.** 
-
-Поэтому JavaScript и является самым распространённым средством создания браузерных интерфейсов.
-
-## Тенденции развития
-
-Перед тем, как вы планируете изучить новую технологию, полезно ознакомиться с её развитием и перспективами. Здесь в JavaScript всё более чем хорошо.
-
-### HTML 5
-
-*HTML 5* -- эволюция стандарта HTML, добавляющая новые теги и, что более важно, ряд новых возможностей браузерам.
-
-Вот несколько примеров:
-<ul>
-<li>Чтение/запись файлов на диск (в специальной "песочнице", то есть не любые).</li>
-<li>Встроенная в браузер база данных, которая позволяет хранить данные на компьютере пользователя.</li>
-<li>Многозадачность с одновременным использованием нескольких ядер процессора.</li>
-<li>Проигрывание видео/аудио, без Flash.</li>
-<li>2D и 3D-рисование с аппаратной поддержкой, как в современных играх.</li>
-</ul>
-
-Многие возможности HTML5 всё ещё в разработке, но браузеры постепенно начинают их поддерживать.
-
-[summary]Тенденция: JavaScript становится всё более и более мощным и возможности браузера растут в сторону десктопных приложений.[/summary]
-
-### EcmaScript 6
-
-Сам язык JavaScript улучшается. Современный стандарт EcmaScript 5 включает в себя новые возможности для разработки, EcmaScript 6 будет шагом вперёд в улучшении синтаксиса языка.
-
-Современные браузеры улучшают свои движки, чтобы увеличить скорость исполнения JavaScript, исправляют баги и стараются следовать стандартам.
-
-[summary]Тенденция: JavaScript становится всё быстрее и стабильнее, в язык добавляются новые возможности.[/summary]
-
-Очень важно то, что новые стандарты HTML5 и ECMAScript сохраняют максимальную совместимость с предыдущими версиями. Это позволяет избежать неприятностей с уже существующими приложениями.
-
-Впрочем, небольшая проблема с "супер-современными штучками" всё же есть. Иногда браузеры стараются включить новые возможности, которые ещё не полностью описаны в стандарте, но настолько интересны, что разработчики просто не могут ждать.  
-
-...Однако, со временем стандарт меняется и браузерам приходится подстраиваться к нему, что может привести к ошибкам в уже написанном, основанном на старой реализации, JavaScript-коде. Поэтому следует дважды подумать перед тем, как применять на практике такие "супер-новые" решения.
-
-При этом все браузеры сходятся к стандарту, и различий между ними уже гораздо меньше, чем всего лишь несколько лет назад.
-
-[summary]Тенденция: всё идет к полной совместимости со стандартом.[/summary]
-
-
-## Альтернативные браузерные технологии
-
-Вместе с JavaScript на страницах используются и другие технологии. Связка с ними может помочь достигнуть более интересных результатов в тех местах, где браузерный JavaScript пока не столь хорош, как хотелось бы. 
-
-### Java   
-
-Java -- язык общего назначения, на нём можно писать самые разные программы. Для интернет-страниц есть особая возможность - написание *апплетов*.
-
-*Апплет* -- это программа на языке Java, которую можно подключить к HTML при помощи тега `applet`, выглядит это примерно так:
-
-```html
-<!--+ run -->
-<applet code="BTApplet.class" codebase="/files/tutorial/intro/alt/">
-  <param name="nodes" value="50,30,70,20,40,60,80,35,65,75,85,90">
-  <param name="root" value="50">
-</applet>
-```
-
-Такой тег загружает Java-программу из файла `BTApplet.class` и выполняет её с параметрами `param`. Апплет выполняется в отдельной части страницы, в прямоугольном "контейнере". Все действия пользователя внутри него обрабатывает апплет. Контейнер, впрочем, может быть и спрятан, если апплету нечего показывать.
-
-Конечно, для этого на компьютере должна быть установлена и включена среда выполнения Java, включая браузерный плагин. Кроме того, апплет должен быть подписан сертификатом издателя (в примере выше апплет без подписи), иначе Java заблокирует его.
-
-**Чем нам, JavaScript-разработчикам, может быть интересен Java?**
-
-В первую очередь тем, что подписанный Java-апплет может всё то же, что и обычная программа, установленная на компьютере посетителя. Конечно, для этого понадобится согласие пользователя при открытии такого апплета.
-
-[compare]
-+Java может делать *всё* от имени посетителя, совсем как установленная программа. Потенциально опасные действия требуют подписанного апплета и согласия пользователя.
--Java требует больше времени для загрузки.
--Среда выполнения Java, включая браузерный плагин, должна быть установлена на компьютере посетителя и включена.
--Java-апплет не интегрирован с HTML-страницей, а выполняется отдельно. Но он может вызывать функции JavaScript.
-[/compare]
-
-
-### Плагины и расширения для браузера
-
-Все современные браузеры предоставляют возможность написать плагины. Для этого можно использовать как JavaScript (Chrome, Opera, Firefox), так и язык С (ActiveX для Internet Explorer).
-
-Эти плагины могут как отображать содержимое специального формата (плагин для проигрывания музыки, для показа PDF), так и взаимодействовать со страницей.
-
-Как и в ситуации с Java-апплетом, у них широкие возможности, но посетитель поставит их в том случае, если вам доверяет.
-
-### Adobe Flash   
-
-Adobe Flash -- кросс-браузерная платформа для мультимедиа-приложений, анимаций, аудио и видео. 
-
-*Flash-ролик* -- это скомпилированная программа, написанная на языке ActionScript. Её можно подключить к HTML-странице и запустить в прямоугольном контейнере.
-
-В первую очередь Flash полезен тем, что позволяет **кросс-браузерно** работать с микрофоном, камерой, с буфером обмена, а также поддерживает продвинутые возможности по работе с сетевыми соединениями. 
-
-[compare]
-+Сокеты, UDP для P2P и другие продвинутые возможности по работе с сетевыми соединениями
-+Поддержка мультимедиа: изображения, аудио, видео. Работа с веб-камерой и микрофоном.
--Flash должен быть установлен и включён. А на некоторых устройствах он вообще не поддерживается.
--Flash не интегрирован с HTML-страницей, а выполняется отдельно.
--Существуют ограничения безопасности, однако они немного другие, чем в JavaScript.
-[/compare]
-
-Из Flash можно вызывать JavaScript и наоборот, поэтому обычно сайты используют JavaScript, а там, где он не справляется -- можно подумать о Flash.
-
-
-## Языки поверх JavaScript
-
-
-Синтаксис JavaScript устраивает не всех: одним он кажется слишком свободным, другим -- наоборот, слишком ограниченным, третьи хотят добавить в язык дополнительные возможности, которых нет в стандарте...
-
-Это нормально, ведь требования и проекты у всех разные. 
-
-В последние годы появилось много языков, которые добавляют различные возможности "поверх" JavaScript, а для запуска в браузере -- при помощи специальных инструментов "трансляторов" превращаются в обычный JavaScript-код.
-
-Это преобразование происходит автоматически и совершенно прозрачно, при этом неудобств в разработке и отладке практически нет.
-
-При этом разные языки выглядят по-разному и добавляют совершенно разные вещи:
-
-<ul>
-<li>Язык [CoffeeScript](http://coffeescript.org/) -- это "синтаксический сахар" поверх JavaScript. Он сосредоточен на большей ясности и краткости кода. Как правило, его особенно любят программисты на Ruby.</li>
-<li>Язык [TypeScript](http://www.typescriptlang.org/) сосредоточен на добавлении строгой типизации данных. Он предназначен для упрощения разработки и поддержки больших систем. Его разрабатывает Microsoft.</li>
-<li>Язык [Dart](https://www.dartlang.org/) интересен тем, что он не только транслируется в JavaScript, как и другие языки, но и имеет свою независимую среду выполнения, которая даёт ему ряд возможностей и доступна для встраивания в приложения (вне браузера). Он разрабатывается компанией Google.</li>
-</ul>
-
-[smart header="ES6 и ES7 прямо сейчас"]
-Существуют также трансляторы, которые берут код, использующий возможности будущих стандартов JavaScript, и преобразуют его в более старый вариант, который понимают все браузеры.
-
-Например, [babeljs](https://babeljs.io/).
-
-Благодаря этому, мы можем использовать многие возможности будущего уже сегодня.
-[/smart]
-
-
-## Итого
-
-Язык JavaScript уникален благодаря своей полной интеграции с HTML/CSS. Он работает почти у всех посетителей.
-
-...Но хороший JavaScript-программист не должен забывать и о других технологиях.
-
-Ведь наша цель -- создание хороших приложений, и здесь Flash, Java и браузерные расширения имеют свои уникальные возможности, которые можно использовать вместе с JavaScript.
-
-Что же касается CoffeeScript, TypeScript и других языков, построенных над JavaScript -- они могут быть очень полезны. Рекомендуется посмотреть их, хотя бы в общих чертах, но, конечно, уже после освоения самого JavaScript.
-
diff --git a/1-js/1-getting-started/1-intro/limitations.png b/1-js/1-getting-started/1-intro/limitations.png
deleted file mode 100644
index 0f58b9d6..00000000
Binary files a/1-js/1-getting-started/1-intro/limitations.png and /dev/null differ
diff --git a/1-js/1-getting-started/1-intro/limitations@2x.png b/1-js/1-getting-started/1-intro/limitations@2x.png
deleted file mode 100644
index e790016b..00000000
Binary files a/1-js/1-getting-started/1-intro/limitations@2x.png and /dev/null differ
diff --git a/1-js/1-getting-started/2-pre-coding/article.md b/1-js/1-getting-started/2-pre-coding/article.md
deleted file mode 100644
index 05833be2..00000000
--- a/1-js/1-getting-started/2-pre-coding/article.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Справочники и спецификации
-
-В этом разделе мы познакомимся со справочниками и спецификациями.
-
-Если вы только начинаете изучение, то вряд ли они будут нужны прямо сейчас. Тем не менее, эта глава находится в начале, так как предсказать точный момент, когда вы захотите заглянуть в справочник -- невозможно, но точно известно, что этот момент настанет. 
-
-Поэтому рекомендуется кратко взглянуть на них и взять на заметку, чтобы при необходимости вернуться к ним в будущем.
-
-[cut]
-
-## Справочники, и как в них искать
-
-Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.
-
-Её объём таков, что перевести всё с английского невозможно. Даже сделать "единый полный справочник" не получается, так как изменений много и они происходят постоянно.
-
-Тем не менее, жить вполне можно если знать, куда смотреть.
-
-**Есть три основных справочника по JavaScript на английском языке**: 
-
-<ol>
-<li>[Mozilla Developer Network](https://developer.mozilla.org/) -- содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox (они помечены).
-
-Когда мне нужно быстро найти "стандартную" информацию по `RegExp` - ввожу в Google **"RegExp MDN"**, и ключевое слово "MDN" (Mozilla Developer Network) приводит к информации из этого справочника.
-</li>
-<li>[MSDN](http://msdn.microsoft.com) -- справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его "JScript"). Если нужно что-то, специфичное для IE -- лучше лезть сразу туда. 
-
-Например, для информации об особенностях `RegExp` в IE -- полезное сочетание: **"RegExp msdn"**. Иногда к поисковой фразе лучше добавить термин "JScript": **"RegExp msdn jscript"**. </li>
-<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- менее известен и используется реже, но в нём тоже можно найти ценную информацию.</li> 
-</ol>
-
-Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:
-
-<ol>
-<li>[http://help.dottoro.com]() -- содержит подробную информацию по HTML/CSS/JavaScript.</li>
-<li>[http://javascript.ru/manual]() -- справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [http://javascript.ru/RegExp]().
-</li>
-<li>[http://www.quirksmode.org]() -- информация о браузерных несовместимостях. Этот ресурс сам по себе довольно старый и, в первую очередь, полезен для поддержки устаревших браузеров. Для поиска можно пользоваться комбинацией **"quirksmode onkeypress"** в Google. </li>
-<li>[http://caniuse.com]() -- ресурс о поддержке браузерами новейших возможностей HTML/CSS/JavaScript. Например, для поддержки функций криптографии: [http://caniuse.com/#feat=cryptography]().
-</li>
-</ol>
-
-## Спецификации
-
-Спецификация -- это самый главный, определяющий документ, в котором написано, как себя ведёт JavaScript, браузер, CSS и т.п.
-
-Если что-то непонятно, и справочник не даёт ответ, то спецификация, как правило, раскрывает тему гораздо глубже и позволяет расставить точки над i.
-
-### Спецификация ECMAScript
-
-Спецификация (формальное описание синтаксиса, базовых объектов и алгоритмов) языка Javascript называется [ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
-
-Её перевод есть на сайте в разделе [стандарт языка](http://es5.javascript.ru/).
-
-[smart header="Почему не просто &quot;JavaScript&quot; ?"]
-Вы можете спросить: "Почему спецификация для JavaScript не называется просто *"JavaScript"*, зачем существует какое-то отдельное название?"
-
-Всё потому, что JavaScript&trade; -- зарегистрированная торговая марка, принадлежащая корпорации Oracle. 
-
-Название "ECMAScript" было выбрано, чтобы сохранить спецификацию независимой от владельцев торговой марки.
-[/smart]
-
-Спецификация может рассказать многое о том, как работает язык, и она является самым фундаментальным, доверенным источником информации.
-
-### Спецификации HTML/DOM/CSS 
-
-JavaScript -- язык общего назначения, поэтому в спецификации ECMAScript нет ни слова о браузерах. 
-
-Главная организация, которая занимается HTML, CSS, XML и множеством других стандартов -- [Консорциум Всемирной паутины](https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D1%80%D1%86%D0%B8%D1%83%D0%BC_%D0%92%D1%81%D0%B5%D0%BC%D0%B8%D1%80%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D1%83%D1%82%D0%B8%D0%BD%D1%8B) (World Wide Consortium, сокращённо W3C).
-
-Информацию о них можно найти на сайте [w3.org](http://w3.org). К сожалению, найти в этой куче то, что нужно, может быть нелегко, особенно когда неизвестно в каком именно стандарте искать. Самый лучший способ -- попросить Google с указанием сайта. 
-
-Например, для поиска `document.cookie` набрать [document.cookie site:w3.org](https://www.google.com/search?q=document.cookie+site%3Aw3.org). 
-
-Последние версии стандартов расположены на домене [dev.w3.org](http://dev.w3.org).
-
-Кроме того, в том, что касается HTML5 и DOM/CSS, W3C активно использует наработки другой организации -- [WhatWG](https://whatwg.org/). Поэтому самые актуальные версии спецификаций по этим темам обычно находятся на [https://whatwg.org/specs/](). 
-
-Иногда бывает так, что информация на сайте [http://dev.w3.org]() отличается от [http://whatwg.org](). В этом случае, как правило, следует руководствоваться [http://whatwg.org]().
-
-## Итого
-
-Итак, посмотрим какие у нас есть источники информации.
-
-Справочники:
-<ul>
-<li><a href="https://developer.mozilla.org/">Mozilla Developer Network</a> -- информация для Firefox и большинства браузеров. 
-Google-комбо: `"RegExp MDN"`, ключевое слово "MDN".</li>
-<li><a href="http://msdn.microsoft.com/">MSDN</a> -- информация по IE. 
-Google-комбо: `"RegExp msdn"`. Иногда лучше добавить термин "JScript": `"RegExp msdn jscript"`.</li>
-<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- информация по Safari.</li>
-<li><a href="http://help.dottoro.com">http://help.dottoro.com</a> -- подробная информация по HTML/CSS/JavaScript с учётом браузерной совместимости.
-Google-комбо: `"RegExp dottoro"`.</li>
-<li>[](http://javascript.ru/manual) -- справочник по JavaScript на русском языке. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [](http://javascript.ru/RegExp).
-Google-комбо: `"RegExp site:javascript.ru"`.
-</li>
-</ul>
-
-Спецификации содержат важнейшую информацию о том, как оно "должно работать":
-
-<ul>
-<li>JavaScript, современный стандарт [ES5 (англ)](http://www.ecma-international.org/publications/standards/Ecma-262.htm), и предыдущий [ES3 (рус)](http://javascript.ru/ecma).</li>
-<li>HTML/DOM/CSS -- на сайте [http://w3.org](http://www.w3.org).
-Google-комбо: `"document.cookie site:w3.org"`.</li>
-<li>...А самые последние версии стандартов -- на [http://dev.w3.org]() и на [http://whatwg.org/specs/](https://whatwg.org/specs/).</li>
-</ul>
-
-То, как оно на самом деле работает и несовместимости:
-
-<ul>
-<li>[http://quirksmode.org/](). Google-комбо: `"innerHeight quirksmode"`.</li>
-</ul>
-
-Поддержка современных и новейших возможностей браузерами:
-
-<ul>
-<li>[http://caniuse.com](). Google-комбо: `"caniuse geolocation"`.</li>
-</ul>
diff --git a/1-js/1-getting-started/3-editor/article.md b/1-js/1-getting-started/3-editor/article.md
deleted file mode 100644
index 34cc4e85..00000000
--- a/1-js/1-getting-started/3-editor/article.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Редакторы для кода
-
-Для разработки обязательно нужен хороший редактор. 
-
-Выбранный вами редактор должен иметь в своем арсенале:
-
-<ol>
-<li>Подсветку синтаксиса.</li>
-<li>Автодополнение.</li>
-<li>"Фолдинг" (от англ. folding) -- возможность скрыть-раскрыть блок кода.</li>
-</ol>
-
-[cut]
-## IDE
-
-Термин IDE (Integrated Development Environment) -- "интегрированная среда разработки", означает редактор, который расширен большим количеством "наворотов", умеет работать со вспомогательными системами, такими как багтрекер, контроль версий, и много чего ещё.
-
-Как правило, IDE загружает весь проект целиком, поэтому может предоставлять автодополнение по функциям всего проекта, удобную навигацию по его файлам и т.п.
-
-Если вы ещё не задумывались над выбором IDE, присмотритесь к следующим вариантам. 
-
-<ul>
-<li>Продукты IntelliJ: [WebStorm](http://www.jetbrains.com/webstorm/), а также в зависимости от дополнительного языка программирования [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) и другие.</li>
-<li>Visual Studio, в сочетании с разработкой под .NET (Win)</li>
-<li>Продукты на основе Eclipse, в частности [Aptana](http://www.aptana.com/) и Zend Studio</li>
-<li>[Komodo IDE](http://www.activestate.com/komodo-ide) и его облегчённая версия [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
-<li>[Netbeans](http://netbeans.org/)</li>
-</ul>
-
-Почти все они, за исключением Visual Studio, кросс-платформенные.
-
-Сортировка в этом списке ничего не означает. Выбор осуществляется по вкусу и по другим технологиям, которые нужно использовать вместе с JavaScript.
-
-Большинство IDE -- платные, с возможностью скачать и бесплатно использовать некоторое время. Но их стоимость, по сравнению с зарплатой веб-разработчика, невелика, поэтому ориентироваться можно на удобство.
-
-## Лёгкие редакторы
-
-Лёгкие редакторы -- не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют. 
-
-Основная сфера применения лёгкого редактора -- мгновенно открыть нужный файл, чтобы что-то в нём поправить.
-
-На практике "лёгкие" редакторы могут обладать большим количеством плагинов, так что граница между IDE и "лёгким" редактором размыта, спорить что именно редактор, а что IDE -- не имеет смысла. 
-
-Достойны внимания:
-
-<ul>
-<li><a href="http://www.sublimetext.com">Sublime Text</a> (кросс-платформенный, shareware).</li>
-<li><a href="http://www.scintilla.org/">SciTe</a> простой, легкий и очень быстрый (Windows, бесплатный).</li>
-<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, бесплатный).</li>
-<li>Vim, Emacs. Если умеете их готовить.</li>
-</ul>
-
-## Мои редакторы
-
-Лично мои любимые редакторы:
-
-<ul>
-<li>Как IDE -- редакторы от Jetbrains: для чистого JavaScript [WebStorm](http://www.jetbrains.com/webstorm/), если ещё какой-то язык, то в зависимости от языка: [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). У них есть и другие редакторы под разные языки, но я ими не пользовался.</li>
-<li>Как быстрый редактор -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
-<li>Иногда Visual Studio, если разработка идёт под платформу .NET (Win).</li>
-</ul>
-
-Если не знаете, что выбрать -- можно посмотреть на них ;)
-
-## Не будем ссориться
-
-В списках выше перечислены редакторы, которые использую я или мои знакомые -- хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится -- пользуйтесь.
-
-Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.
diff --git a/1-js/1-getting-started/4-devtools/article.md b/1-js/1-getting-started/4-devtools/article.md
deleted file mode 100644
index 7a26dfce..00000000
--- a/1-js/1-getting-started/4-devtools/article.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# Консоль разработчика
-
-При разработке скриптов всегда возможны ошибки... Впрочем, что я говорю? У вас абсолютно точно будут ошибки, если конечно вы -- человек, а не <a href="http://ru.wikipedia.org/wiki/%D0%91%D0%B5%D0%BD%D0%B4%D0%B5%D1%80_(%D0%A4%D1%83%D1%82%D1%83%D1%80%D0%B0%D0%BC%D0%B0)">робот</a>.
-
-Чтобы читать их в удобном виде, а также получать массу полезной информации о выполнении скриптов, в браузерах есть *инструменты разработки*.  
-
-**Для разработки рекомендуется использовать Chrome или Firefox.**
-
-Другие браузеры, как правило, находятся в положении "догоняющих" по возможностям встроенных инструментов разработки. Если ошибка, к примеру, именно в Internet Explorer, тогда уже смотрим конкретно в нём, но обычно -- Chrome/Firefox.
-
-В инструментах разработчика предусмотрена масса возможностей, но на текущем этапе мы просто посмотрим, как их открывать, смотреть в консоли ошибки и запускать команды JavaScript.
-
-[cut]
-
-## Google Chrome   
-
-Откройте страницу [bug.html](bug.html). 
-
-В её JavaScript-коде есть ошибка. Конечно, обычному посетителю она не видна, нужно открыть инструменты разработчика.
-
-Для этого используйте сочетание клавиш [key Ctrl+Shift+J], а если у вас Mac, то [key Cmd+Shift+J].
-
-При этом откроются инструменты разработчика и вкладка Console, в которой будет ошибка.
-
-Выглядеть будет примерно так:
-
-<img src="chrome.png">
-
-
-<ul>
-<li>При клике на `bug.html` вы перейдёте во вкладку с кодом к месту ошибки, там будет и краткое описание ошибки. 
-В данном случае ошибка вызвана строкой `lalala`, которая интерпретатору непонятна. </li>
-<li>В этом же окошке вы можете набирать команды на JavaScript. Например, наберите `alert("Hello")` -- команду вывода сообщения и запустите её нажатием [key Enter]. Мы познакомимся с этой и другими командами далее.</li>
-<li>Для перевода курсора на следующую строку (если команда состоит из нескольких строк) --  используется сочетание [key Shift+Enter].</li> 
-</ul>
-
-Далее в учебнике мы подробнее рассмотрим отладку в Chrome в главе [](/debugging-chrome).
-
-## Firefox   
-
-Для разработки в Firefox используется расширение Firebug. 
-
-<ol>
-<li>Первым делом его надо установить.
-
-Это можно сделать со страницы <a href="https://addons.mozilla.org/ru/firefox/addon/firebug/">https://addons.mozilla.org/ru/firefox/addon/firebug/</a>.
-
-Перезапустите браузер. Firebug появится в правом-нижнем углу окна:
-
-<img src="firebug-gray.png">
-
-Если иконки не видно -- возможно, у вас выключена панель расширений. Нажмите [key Ctrl+\] для её отображения. 
-
-Ну а если её нет и там, то нажмите [key F12] -- это горячая клавиша для запуска Firebug, расширение появится, если установлено.
-</li>
-<li>Далее, для того чтобы консоль заработала, её надо включить.
-
-Если консоль уже была включена ранее, то этот шаг не нужен, но если она серая -- выберите в меню `Консоль` и включите её:
-
-<img src="firefox_console_enable.png">
-
-</li>
-<li>Для того, чтобы Firebug работал без глюков, желательно сначала открыть Firebug, а уже потом -- зайти на страницу.
-
-С открытым Firebug зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html).
-
-Консоль покажет ошибку:
-
-<img src="firefox.png">
-
-Кликните на строчке с ошибкой и браузер покажет исходный код. При необходимости включайте дополнительные панели.
-</li>
-</ol>
-
-Как и в Chrome, можно набирать и запускать команды. Область для команд на рисунке находится справа, запуск команд осуществляется нажатием [key Ctrl+Enter] (для Mac -- [key Cmd+Enter]).
-
-Можно перенести её вниз, нажав на кнопочку <img src="firefox_console_down.png"> (на рисунке её не видно, но она присутствует в правом нижнем углу панели разработки).
-
-Об основных возможностях можно прочитать на сайте <a href="http://firebug.ru">firebug.ru</a>.
-
-## Internet Explorer   
-
-Панель разработчика запускается нажатием [key F12].
-
-Откройте её и зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html). Если вы разобрались с Chrome/Firefox, то дальнейшее будет вам более-менее понятно, так как инструменты IE построены позже и по аналогии с Chrome/Firefox.
-
-## Safari   
-
-Горячие клавиши: [key Ctrl+Shift+I], [key Ctrl+Alt+C] для Mac -- [key Cmd] вместо [key Ctrl].
-
-Для доступа к функционалу разработки через меню:
-
-<ol>
-<li>
-В Safari первым делом нужно активировать меню разработки.
-
-Откройте меню, нажав на колесико справа-сверху и выберите `Настройки`.
-
-Затем вкладка `Дополнительно`:
-
-<img src="safari.png">
-
-Отметьте `Показывать меню "Разработка" в строке меню`. Закройте настройки.
-</li>
-<li>Нажмите на колесико и выберите `Показать строку меню`.
-
-Инструменты будут доступны в появившейся строке меню, в пункте `Разработка`.</li>
-</ol>
-
-## Итого
-
-Мы разобрали, как открывать инструменты разработчика и смотреть ошибки, а также запускать простые команды, не отходя от браузера.
-
-Далее мы приступим к изучению JavaScript.
diff --git a/1-js/1-getting-started/4-devtools/bug.html b/1-js/1-getting-started/4-devtools/bug.html
deleted file mode 100755
index b72b78f5..00000000
--- a/1-js/1-getting-started/4-devtools/bug.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  На этой странице есть скрипт с ошибкой.
-  <script>
-    lalala
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/1-getting-started/4-devtools/chrome.png b/1-js/1-getting-started/4-devtools/chrome.png
deleted file mode 100644
index b084d584..00000000
Binary files a/1-js/1-getting-started/4-devtools/chrome.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/chrome@2x.png b/1-js/1-getting-started/4-devtools/chrome@2x.png
deleted file mode 100755
index 35fbb424..00000000
Binary files a/1-js/1-getting-started/4-devtools/chrome@2x.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firebug-gray.png b/1-js/1-getting-started/4-devtools/firebug-gray.png
deleted file mode 100755
index dd234fe0..00000000
Binary files a/1-js/1-getting-started/4-devtools/firebug-gray.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox.png b/1-js/1-getting-started/4-devtools/firefox.png
deleted file mode 100644
index 9ce9691c..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox@2x.png b/1-js/1-getting-started/4-devtools/firefox@2x.png
deleted file mode 100755
index ff3633b7..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox@2x.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox_console_down.png b/1-js/1-getting-started/4-devtools/firefox_console_down.png
deleted file mode 100644
index 54cf92cd..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox_console_down.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png b/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png
deleted file mode 100755
index e19b9f3e..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox_console_enable.png b/1-js/1-getting-started/4-devtools/firefox_console_enable.png
deleted file mode 100644
index 848f2b82..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox_console_enable.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png b/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png
deleted file mode 100755
index 2bf6ea18..00000000
Binary files a/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png and /dev/null differ
diff --git a/1-js/1-getting-started/4-devtools/safari.png b/1-js/1-getting-started/4-devtools/safari.png
deleted file mode 100755
index 9a9cac5b..00000000
Binary files a/1-js/1-getting-started/4-devtools/safari.png and /dev/null differ
diff --git a/1-js/1-getting-started/index.md b/1-js/1-getting-started/index.md
deleted file mode 100644
index b3e8e77d..00000000
--- a/1-js/1-getting-started/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Введение
-
-Про язык JavaScript и окружение для разработки на нём.
\ No newline at end of file
diff --git a/1-js/10-es-modern/1-es-modern-usage/article.md b/1-js/10-es-modern/1-es-modern-usage/article.md
deleted file mode 100644
index 86b8b7ff..00000000
--- a/1-js/10-es-modern/1-es-modern-usage/article.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# ES-2015 сейчас
-
-[Стандарт ES-2015](http://www.ecma-international.org/publications/standards/Ecma-262.htm) был принят в июне 2015. Пока что большинство браузеров реализуют его частично, текущее состояние реализации различных возможностей можно посмотреть здесь: [](https://kangax.github.io/compat-table/es6/).
-
-Когда стандарт будет более-менее поддерживаться во всех браузерах, то весь учебник будет обновлён в соответствии с ним. Пока же, как центральное место для "сбора" современных фич JavaScript, создан этот раздел.
-
-Чтобы писать код на ES-2015 прямо сейчас, есть следующие варианты.
-
-## Конкретный движок JS
-
-Самое простое -- это когда нужен один конкретный движок JS, например V8 (Chrome).
-
-Тогда можно использовать только то, что поддерживается именно в нём. Заметим, что в V8 большинство возможностей ES-2015 поддерживаются только при включённом `use strict`.
-
-При разработке на Node.JS обычно так и делают. Если же нужна кросс-браузерная поддержка, то этот вариант не подойдёт.
-
-## Babel.JS
-
-[Babel.JS](https://babeljs.io) -- это [транспайлер](https://en.wikipedia.org/wiki/Source-to-source_compiler), переписывающий код на ES-2015 в код на предыдущем стандарте ES5.
-
-Он состоит из двух частей:
-
-<ol>
-<li>Собственно транспайлер, который переписывает код.</li>
-<li>Полифилл, который добавляет методы `Array.from`, `String.prototype.repeat` и другие.</li>
-</ol>
-
-На странице [](https://babeljs.io/repl/) можно поэкспериментировать с транспайлером: слева вводится код в ES-2015, а справа появляется результат его преобразования в ES5.
-
-Обычно Babel.JS работает на сервере в составе системы сборки JS-кода (например [webpack](http://webpack.github.io/) или [brunch](http://brunch.io/)) и автоматически переписывает весь код в ES5.
-
-Настройка такой конвертации тривиальна, единственно -- нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
-
-Если же хочется "поиграться", то можно использовать и браузерный вариант Babel.
-
-Это выглядит так:
-
-```html
-<!--+ run -->
-*!*
-<!-- browser.js лежит на моём сервере, не надо брать с него -->
-<script src="https://js.cx/babel-core/browser.min.js"></script>
-*/!*
-
-<script type="text/babel">
-  let arr = ["hello", 2]; // let
-
-  let [str, times] = arr; // деструктуризация
-
-  alert( str.repeat(times) ); // hellohello, метод repeat
-</script>
-```
-
-Сверху подключается браузерный скрипт `browser.min.js` из пакета Babel. Он включает в себя полифилл и транспайлер. Далее он автоматически транслирует и выполняет скрипты с `type="text/babel"`.
-
-Размер `browser.min.js` превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
-
-# Примеры на этом сайте
-
-[warn header="Только при поддержке браузера"]
-Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
-[/warn]
-
-Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки...
-
-Рекомендуется [Chrome Canary](https://www.google.com/chrome/browser/canary.html) большинство примеров в нём работает. [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные [let](/let-const) работают только при указании `version=1.7` в типе скрипта: `<script type="application/javascript;version=1.7">`. Надеюсь, скоро это требование (`version=1.7`) отменят.
-
-Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) -- почти все примеры вы можете запустить его при помощи Babel, на странице [Babel: try it out](https://babeljs.io/repl/). Там же увидите и преобразованный код.
-
-На практике для кросс-браузерности всё равно используют Babel.
-
-Ещё раз заметим, что самая актуальная ситуация по поддержке современного стандарта браузерами и транспайлерами отражена на странице [](https://kangax.github.io/compat-table/es6/).
-
-Итак, поехали!
-
diff --git a/1-js/10-es-modern/10-set-map/article.md b/1-js/10-es-modern/10-set-map/article.md
deleted file mode 100644
index f7f3f51c..00000000
--- a/1-js/10-es-modern/10-set-map/article.md
+++ /dev/null
@@ -1,284 +0,0 @@
-
-# Set, Map, WeakSet и WeakMap
-
-В ES-2015 появились новые типы коллекций в JavaScript: `Set`, `Map`, `WeakSet` и `WeakMap`.
-
-
-## Map
-
-`Map` -- коллекция для хранения записей вида `ключ:значение`.
-
-В отличие от объектов, в которых ключами могут быть только строки, в `Map` ключом может быть произвольное значение, например:
-
-```js
-//+ run
-'use strict';
-
-let map = new Map();
-
-map.set('1', 'str1');   // ключ-строка
-map.set(1, 'num1');     // число
-map.set(true, 'bool1'); // булевое значение
-
-// в обычном объекте это было бы одно и то же,
-// map сохраняет тип ключа
-alert( map.get(1)   ); // 'num1'
-alert( map.get('1') ); // 'str1'
-
-alert( map.size ); // 3
-```
-
-Как видно из примера выше, для сохранения и чтения значений используются методы `get` и `set`. И ключи и значения сохраняются "как есть", без преобразований типов.
-
-Свойство `map.size` хранит общее количество записей в `map`.
-
-Метод `set` можно чейнить:
-
-```js
-map
-  .set('1', 'str1')
-  .set(1, 'num1')
-  .set(true, 'bool1'); 
-```
-
-При создании `Map` можно сразу инициализовать списком значений.
-
-Объект `map` с тремя ключами, как и в примере выше:
-
-```js
-let map = new Map([
-  ['1',  'str1'],
-  [1,    'num1'],
-  [true, 'bool1']
-]);
-```
-
-Аргументом `new Map` должен быть итерируемый объект (не обязательно именно массив). Везде утиная типизация, максимальная гибкость.
-
-**В качестве ключей `map` можно использовать и объекты:**
-
-```js
-//+ run
-'use strict';
-
-let user = { name: "Вася" };
-
-// для каждого пользователя будем хранить количество посещений
-let visitsCountMap = new Map();
-
-*!*
-// объект user является ключом в visitsCountMap
-visitsCountMap.set(user, 123);
-*/!*
-
-alert( visitsCountMap.get(user) ); // 123
-```
-
-[smart header="Как map сравнивает ключи"]
-Для проверки значений на эквивалентность используется алгоритм [SameValueZero](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-samevaluezero). Он аналогичен строгому равенству `===`, отличие -- в том, что `NaN` считается равным `NaN`. Поэтому значение `NaN` также может быть использовано в качестве ключа.
-
-Этот алгоритм жёстко фиксирован в стандарте, его нельзя изменять или задавать свою функцию сравнения.
-[/smart]
-
-Методы для удаления записей:
-<ul>
-<li>`map.delete(key)` удаляет запись с ключом `key`, возвращает `true`, если такая запись была, иначе `false`.</li>
-<li>`map.clear()` -- удаляет все записи, очищает `map`.</li>
-</ul>
-
-Для проверки существования ключа:
-
-<ul>
-<li>`map.has(key)` -- возвращает `true`, если ключ есть, иначе `false`.</li>
-</ul>
-
-### Итерация 
-
-Для итерации по `map` используется один из трёх методов:
-<ul>
-<li>`map.keys()` -- возвращает итерируемый объект для ключей,</li>
-<li>`map.values()` -- возвращает итерируемый объект для значений,</li>
-<li>`map.entries()` -- возвращает итерируемый объект для записей `[ключ, значение]`, он используется по умолчанию в `for..of`.</li>
-</ul>
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let recipeMap = new Map([
-  ['огурцов',   '500 гр'],
-  ['помидоров', '350 гр'],
-  ['сметаны',   '50 гр']
-]);
-
-// цикл по ключам
-for(let fruit of recipeMap.keys()) {
-  alert(fruit); // огурцов, помидоров, сметаны
-} 
-
-// цикл по значениям [ключ,значение]
-for(let amount of recipeMap.values()) {
-  alert(amount); // 500 гр, 350 гр, 50 гр
-} 
-
-// цикл по записям
-for(let entry of recipeMap) { // то же что и recipeMap.entries()
-  alert(entry); // огурцов,500 гр , и т.д., массивы по 2 значения
-} 
-```
-
-[smart header="Перебор идёт в том же порядке, что и вставка"]
-Перебор осуществляется в порядке вставки. Объекты `Map` гарантируют это, в отличие от обычных объектов `Object`.
-[/smart]
-
-Кроме того, у `Map` есть стандартный метод `forEach`, аналогичный массиву:
-
-```js
-//+ run
-'use strict';
-
-let recipeMap = new Map([
-  ['огурцов',   '500 гр'],
-  ['помидоров', '350 гр'],
-  ['сметаны',   '50 гр']
-]);
-
-recipeMap.forEach( (value, key, map) => {
-  alert(`${key}: ${value}`); // огурцов: 500 гр, и т.д.
-});
-```
-
-## Set
-
-`Set` -- коллекция для хранения множества значений, причём каждое значение может встречаться лишь один раз.
-
-Например, к нам приходят посетители, и мы хотели бы сохранять всех, кто пришёл. При этом повторные визиты не должны приводить к дубликатам, то есть каждого посетителя нужно "посчитать" ровно один раз.
-
-`Set` для этого отлично подходит:
-
-```js
-//+ run
-'use strict';
-
-let set = new Set();
-
-let vasya = {name: "Вася"};
-let petya = {name: "Петя"};
-let dasha = {name: "Даша"};
-
-// посещения, некоторые пользователи заходят много раз
-set.add(vasya);
-set.add(petya);
-set.add(dasha);
-set.add(vasya);
-set.add(petya);
-
-// set сохраняет только уникальные значения
-alert( set.size ); // 3
-
-set.forEach( user => alert(user.name ) ); // Вася, Петя, Даша
-```
-
-В примере выше многократные добавления одного и того же объекта в `set` не создают лишних копий.
-
-Альтернатива `Set` -- это массивы с поиском дубликата при каждом добавлении, но они гораздо хуже по производительности. Или можно использовать обычные объекты, где в качестве ключа выступает какой-нибудь уникальный идентификатор посетителя. Но это менее удобно, чем простой и наглядный `Set`.
-
-Основные методы:
-<ul>
-<li>`set.add(item)` -- добавляет в коллекцию `item`, возвращает `set` (чейнится).</li>
-<li>`set.delete(item)` -- удаляет `item` из коллекции, возвращает `true`, если он там был, иначе `false`.</li>
-<li>`set.has(item)` -- возвращает `true`, если `item` есть в коллекции, иначе `false`.</li>
-<li>`set.clear()` -- очищает `set`.</li>
-</ul>
-
-Перебор `Set` осуществляется через `forEach` или `for..of` аналогично `Map`:
-
-```js
-//+ run
-'use strict';
-
-let set = new Set(["апельсины", "яблоки", "бананы"]);
-
-// то же, что: for(let value of set)
-set.forEach((value, valueAgain, set) => {
-  alert(value); // апельсины, затем яблоки, затем бананы
-}); 
-```
-
-Заметим, что в `Set` у функции в `.forEach` три аргумента: значение, ещё раз значение, и затем сам перебираемый объект `set`. При этом значение повторяется в аргументах два раза.
-
-Так сделано для совместимости с `Map`, где у `.forEach`-функции также три аргумента. Но в `Set` первые два всегда совпадают и содержат очередное значение множества. 
-
-## WeakMap и WeakSet
-
-`WeakSet` -- особый вид `Set` не препятствующий сборщику мусора удалять свои элементы. То же самое -- `WeakMap` для `Map`.
-
-То есть, если некий объект присутствует только в `WeakSet/WeakMap` -- он удаляется из памяти.
-
-Это нужно для тех ситуаций, когда основное место для хранения и использования объектов находится где-то в другом месте кода, а здесь мы хотим хранить для них "вспомогательные" данные, существующие лишь пока жив объект.
-
-Например, у нас есть элементы на странице или, к примеру, пользователи, и мы хотим хранить для них вспомогательную инфомацию, например обработчики событий или просто данные, но действительные лишь пока объект, к которому они относятся, существует.
-
-Если поместить такие данные в `WeakMap`, а объект сделать ключом, то они будут автоматически удалены из памяти, когда удалится элемент. 
-
-Например:
-
-```js
-// текущие активные пользователи
-let activeUsers = [
-  {name: "Вася"}, 
-  {name: "Петя"},
-  {name: "Маша"}
-];
-
-// вспомогательная информация о них, 
-// которая напрямую не входит в объект юзера,
-// и потому хранится отдельно
-let weakMap = new WeakMap();
-
-weakMap[activeUsers[0]] = 1;
-weakMap[activeUsers[1]] = 2;
-weakMap[activeUsers[2]] = 3;
-
-alert( weakMap[activeUsers[0]] ); // 1
-
-activeUsers.splice(0, 1); // Вася более не активный пользователь
-
-// weakMap теперь содержит только 2 элемента
-
-activeUsers.splice(0, 1); // Петя более не активный пользователь
-
-// weakMap теперь содержит только 1 элемент
-```
-
-Таким образом, `WeakMap` избавляет нас от необходимости вручную удалять вспомогательные данные, когда удалён основной объект.
-
-У WeakMap есть ряд ограничений:
-<ul>
-<li>Нет свойства `size`.</li>
-<li>Нельзя перебрать элементы итератором или `forEach`.</li>
-<li>Нет метода `clear()`.</li>
-</ul>
-
-Иными словами, `WeakMap` работает только на запись (`set`, `delete`) и чтение (`get`, `has`) элементов по конкретному ключу, а не как полноценная коллекция. Нельзя вывести всё содержимое `WeakMap`, нет соответствующих методов.
-
-Это связано с тем, что содержимое `WeakMap` может быть модифицировано сборщиком мусора в любой момент, независимо от программиста. Сборщик мусора работает сам по себе. Он не гарантирует, что очистит объект сразу же, когда это стало возможным. В равной степени он не гарантирует и обратное. Нет какого-то конкретного момента, когда такая очистка точно произойдёт -- это определяется внутренними алгоритмами сборщика и его сведениями о системе.
-
-Поэтому содержимое `WeakMap` в произвольный момент, строго говоря, не определено. Может быть, сборщик мусора уже удалил какие-то записи, а может и нет. С этим, а также с требованиями к эффективной реализации `WeakMap`, и связано отсутствие методов, осуществляющих доступ ко всем записям.
-
-То же самое относится и к `WeakSet`: можно добавлять элементы, проверять их наличие, но нельзя получить их список и даже узнать количество.
-
-Эти ограничения могут показаться неудобными, но по сути они не мешают `WeakMap/WeakSet` выполнять свою основную задачу -- быть "вторичным" хранилищем данных для объектов, актуальный список которых (и сами они) хранятся в каком-то другом месте.
-
-## Итого
-
-<ul>
-<li>`Map` -- коллекция записей вида `ключ: значение`, лучше `Object` тем, что перебирает всегда в порядке вставки и допускает любые ключи.</li>
-<li>`Set` -- коллекция уникальных элементов, также допускает любые ключи.
-<li>`WeakMap` и `WeakSet` -- "урезанные" по функционалу варианты `Map/Set`, которые позволяют только "точечно" обращаться элементам (по конкретному ключу или значению). Они не препятствуют сборке мусора, то есть если ссылка на объект осталась только в `WeakSet/WeakMap` -- он будет удалён.</li>
-</ul>
-
-
-
diff --git a/1-js/10-es-modern/11-promise/1-promise-settimeout/solution.md b/1-js/10-es-modern/11-promise/1-promise-settimeout/solution.md
deleted file mode 100644
index 791fe90e..00000000
--- a/1-js/10-es-modern/11-promise/1-promise-settimeout/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-
-```js
-function delay(ms) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, ms);
-  });
-}
-```
\ No newline at end of file
diff --git a/1-js/10-es-modern/11-promise/1-promise-settimeout/task.md b/1-js/10-es-modern/11-promise/1-promise-settimeout/task.md
deleted file mode 100644
index 60f76659..00000000
--- a/1-js/10-es-modern/11-promise/1-promise-settimeout/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
-# Промисифицировать setTimeout
-
-Напишите функцию `delay(ms)`, которая возвращает промис, переходящий в состояние `"resolved"` через `ms` миллисекунд.
-
-Пример использования:
-```js
-delay(1000)
-  .then(() => alert("Hello!"))
-```
-
-Такая полезна для использования в других промис-цепочках.
-
-Вот такой вызов:
-```js
-return new Promise((resolve, reject) => {
-  setTimeout(() => {
-    doSomeThing();
-    resolve();
-  }, ms)
-});
-```
-
-Станет возможным переписать так:
-```js
-return delay(ms).then(doSomething);
-```
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.md b/1-js/10-es-modern/11-promise/2-promise-sequence/solution.md
deleted file mode 100644
index 4b787725..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Для последовательной загрузки нужно организовать промисы в цепочку, чтобы они выполнялись строго -- один после другого.
-
-Вот код, который это делает:
-
-```js
-// начало цепочки
-let chain = Promise.resolve(); 
-
-let results = [];
-
-// в цикле добавляем задачи в цепочку
-urls.forEach(function(url) {
-  chain = chain
-    .then(() => httpGet(url))
-    .then((result) => {
-      results.push(result);
-    });
-});
-
-// в конце — выводим результаты
-chain.then(() => {
-  alert(results);
-});
-```
-
-Использование `Promise.resolve()` как начала асинхронной цепочки -- очень распространённый приём. 
-
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/guest.json b/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/guest.json
deleted file mode 100644
index c32ac845..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/guest.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "guest",
-  "isAdmin": false
-}
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/httpGet.js b/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/httpGet.js
deleted file mode 100644
index d7a16a96..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/httpGet.js
+++ /dev/null
@@ -1,25 +0,0 @@
-function httpGet(url) {
-
-  return new Promise(function(resolve, reject) {
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-
-    xhr.onload = function() {
-      if (this.status == 200) {
-        resolve(this.response);
-      } else {
-        var error = new Error(this.statusText);
-        error.code = this.status;
-        reject(error);
-      }
-    };
-
-    xhr.onerror = function() {
-      reject(new Error("Network Error"));
-    };
-
-    xhr.send();
-  });
-
-}
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/index.html b/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/index.html
deleted file mode 100644
index 18559232..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="UTF-8">
-</head>
-<body>
-
-  <script src="httpGet.js"></script>
-
-  <script>
-    'use strict';
-
-    let urls = ['guest.json', 'user.json'];
-
-    let chain = Promise.resolve();
-
-    let results = [];
-
-    urls.forEach(function(url) {
-      chain = chain
-        .then(() => httpGet(url))
-        .then((result) => {
-          results.push(result);
-        });
-    });
-
-    chain.then(() => {
-      alert(results);
-    });
-
-  </script>
-      
-</body>
-</html>
\ No newline at end of file
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/guest.json b/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/guest.json
deleted file mode 100644
index c32ac845..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/guest.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "guest",
-  "isAdmin": false
-}
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/httpGet.js b/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/httpGet.js
deleted file mode 100644
index d7a16a96..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/httpGet.js
+++ /dev/null
@@ -1,25 +0,0 @@
-function httpGet(url) {
-
-  return new Promise(function(resolve, reject) {
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-
-    xhr.onload = function() {
-      if (this.status == 200) {
-        resolve(this.response);
-      } else {
-        var error = new Error(this.statusText);
-        error.code = this.status;
-        reject(error);
-      }
-    };
-
-    xhr.onerror = function() {
-      reject(new Error("Network Error"));
-    };
-
-    xhr.send();
-  });
-
-}
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/index.html b/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/index.html
deleted file mode 100644
index fa875c5b..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="UTF-8">
-</head>
-<body>
-
-  <script src="httpGet.js"></script>
-
-  <script>
-    'use strict';
-
-    let urls = ['guest.json', 'user.json'];
-
-    // ... ваш код
-    
-  </script>
-      
-</body>
-</html>
\ No newline at end of file
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/task.md b/1-js/10-es-modern/11-promise/2-promise-sequence/task.md
deleted file mode 100644
index a75b8d9a..00000000
--- a/1-js/10-es-modern/11-promise/2-promise-sequence/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-
-# Загрузить массив последовательно
-
-Есть массив URL:
-
-```js
-//+ run
-'use strict';
-
-let urls = [
-  'user.json',
-  'guest.json'
-];
-```
-
-Напишите код, который все URL из этого массива загружает -- один за другим (последовательно), и сохраняет в результаты в массиве `results`, а потом выводит.
-
-Вариант с параллельной загрузкой выглядел бы так:
-
-```js
-Promise.all( urls.map(httpGet) )
-  .then(alert); 
-```
-
-В этой задаче загрузку нужно реализовать последовательно.
-
diff --git a/1-js/10-es-modern/11-promise/anon.png b/1-js/10-es-modern/11-promise/anon.png
deleted file mode 100644
index a1675d2f..00000000
Binary files a/1-js/10-es-modern/11-promise/anon.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/article.md b/1-js/10-es-modern/11-promise/article.md
deleted file mode 100644
index 5adb3687..00000000
--- a/1-js/10-es-modern/11-promise/article.md
+++ /dev/null
@@ -1,843 +0,0 @@
-# Promise
-
-Promise (обычно их так и называют "промисы") -- предоставляют удобный способ организации асинхронного кода.
-
-В современном JavaScript промисы часто используются в том числе и неявно, при помощи генераторов, но об этом чуть позже. 
-
-## Что такое Promise?
-
-Promise -- это специальный объект, который содержит своё состояние. Вначале `pending` ("ожидание"), затем -- одно из: `fulfilled` ("выполнено успешно") или `rejected` ("выполнено с ошибкой").
-
-<img src="promiseInit.png">
-
-На `promise` можно навешивать коллбэки двух типов:
-
-<ul>
-<li>`onFulfilled` -- срабатывают, когда `promise` в состоянии "выполнен успешно".</li>
-<li>`onRejected` -- срабатывают, когда `promise` в состоянии "выполнен с ошибкой".</li>
-</ul>
-
-Способ использования, в общих чертах, такой:
-<ol>
-<li>Код, которому надо сделать что-то асинхронно, создаёт объект `promise` и возвращает его.</li>
-<li>Внешний код, получив `promise`, навешивает на него обработчики.</li>
-<li>По завершении процесса асинхронный код переводит `promise` в состояние `fulfilled` (с результатом) или `rejected` (с ошибкой). При этом автоматически вызываются соответствующие обработчики во внешнем коде.</li>
-</ol>
-
-Синтаксис создания `Promise`:
-
-```js
-var promise = new Promise(function(resolve, reject) {
-  // Эта функция будет вызвана автоматически 
-
-  // В ней можно делать любые асинхронные операции, 
-  // А когда они завершатся — нужно вызвать одно из:
-  // resolve(результат) при успешном выполнении
-  // reject(ошибка) при ошибке
-})
-```
-
-Универсальный метод для навешивания обработчиков:
-
-```js
-promise.then(onFulfilled, onRejected)
-```
-
-<ul>
-<li>`onFulfilled` -- функция, которая будет вызвана с результатом при `resolve`.</li>
-<li>`onRejected` -- функция, которая будет вызвана с ошибкой при `reject`.</li>
-</ul>
-
-С его помощью можно назначить как оба обработчика сразу, так и только один:
-
-```js
-// onFulfilled сработает при успешном выполнении
-promise.then(onFulfilled)
-// onRejected сработает при ошибке
-promise.then(null, onRejected)
-```
-
-[smart header=".catch"]
-Для того, чтобы поставить обработчик только на ошибку, вместо `.then(null, onRejected)` можно написать `.catch(onRejected)` -- это то же самое.
-[/smart]
-
-[smart header="Синхронный `throw` -- то же самое, что `reject`"]
-Если в функции промиса происходит синхронный `throw` (или иная ошибка), то вызывается `reject`:
-```js
-//+ run
-'use strict';
-
-let p = new Promise((resolve, reject) => {
-  // то же что reject(new Error("o_O"))
-  throw new Error("o_O");
-})
-
-p.catch(alert); // Error: o_O
-```
-[/smart]
-
-Посмотрим, как это выглядит вместе, на простом примере.
-
-
-## Пример с setTimeout
-
-Возьмём `setTimeout` в качестве асинхронной операции, которая должна через некоторое время успешно завершиться с результатом "result":
-
-```js
-//+ run
-'use strict';
-
-// Создаётся объект promise
-let promise = new Promise((resolve, reject) => {
-  
-  setTimeout(() => {
-    // переведёт промис в состояние fulfilled с результатом "result"
-    resolve("result");
-  }, 1000);
-
-});
-
-// promise.then навешивает обработчики на успешный результат или ошибку
-promise
-  .then(
-    result => {
-      // первая функция-обработчик - запустится при вызове resolve
-      alert("Fulfilled: " + result); // result - аргумент resolve
-    }, 
-    error => {
-      // вторая функция - запустится при вызове reject
-      alert("Rejected: " + error); // error - аргумент reject
-    }
-  );
-
-```
-
-В результате запуска кода выше -- через 1 секунду выведется "Fulfilled: result".
-
-А если бы вместо `resolve("result")` был вызов `reject("error")`, то вывелось бы "Rejected: error". Впрочем, как правило, если при выполнении возникла проблема, то `reject` вызывают не со строкой, а с объектом ошибки типа `new Error`:
-
-```js
-//+ run
-// Этот promise завершится с ошибкой через 1 секунду
-var promise = new Promise((resolve, reject) => {
-  
-  setTimeout(() => {
-*!*
-    reject(new Error("время вышло!"));
-*/!*
-  }, 1000);
-
-});
-
-promise
-  .then(
-    result => alert("Fulfilled: " + result),
-*!*
-    error => alert("Rejected: " + error.message) // Rejected: время вышло!
-*/!*
-  );
-
-```
-
-Конечно, вместо `setTimeout` внутри функции промиса может быть и запрос к серверу и ожидание ввода пользователя, или другой асинхронный процесс. Главное, чтобы по своему завершению он вызвал `resolve` или `reject`, которые передадут результат обработчикам.
-
-[smart header="Только один аргумент"]
-Функции `resolve/reject` принимают ровно один аргумент -- результат/ошибку. 
-
-Именно он передаётся обработчикам в `.then`, как можно видеть в примерах выше. 
-[/smart]
-
-## Promise после reject/resolve -- неизменны
-
-Заметим, что после вызова `resolve/reject` промис уже не может "передумать".
-
-Когда промис переходит в состояние "выполнен" -- с результатом (resolve) или ошибкой (reject) -- это навсегда.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let promise = new Promise((resolve, reject) => {
-
-*!*
-  // через 1 секунду готов результат: result
-*/!*
-  setTimeout(() => resolve("result"), 1000);
-
-*!*
-  // через 2 секунды — reject с ошибкой, он будет проигнорирован
-*/!*
-  setTimeout(() => reject(new Error("ignored")), 2000);
-
-});
-
-promise
-  .then(
-    result => alert("Fulfilled: " + result), // сработает
-    error => alert("Rejected: " + error) // не сработает
-  );
-
-```
-
-В результате вызова этого кода сработает только первый обработчик `then`, так как после вызова `resolve` промис уже получил состояние (с результатом), и в дальнейшем его уже ничто не изменит.
-
-Последующие вызовы resolve/reject  будут просто проигнороированы.
-
-А так -- наоборот, ошибка будет раньше:
-
-
-```js
-//+ run
-'use strict';
-
-let promise = new Promise((resolve, reject) => {
-
-  // reject вызван раньше, resolve будет проигнорирован
-  setTimeout(() => reject(new Error("error")), 1000);
-
-  setTimeout(() => resolve("ignored"), 2000);
-
-});
-
-promise
-  .then(
-    result => alert("Fulfilled: " + result), // не сработает
-    error => alert("Rejected: " + error) // сработает
-  );
-
-```
-
-
-## Промисификация
-
-*Промисификация* -- это когда берут асинхронный функционал и делают для него обёртку, возвращающую промис.
-
-После промисификации использование функционала зачастую становится гораздо удобнее.
-
-В качестве примера сделаем такую обёртку для запросов при помощи XMLHttpRequest.
-
-Функция `httpGet(url)` будет возвращать промис, который при успешной загрузке данных с `url` будет переходить в `fulfilled` с этими данными, а при ошибке -- в `rejected` с информацией об ошибке:
-
-```js
-//+ autorun
-function httpGet(url) {
-
-  return new Promise(function(resolve, reject) {
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-
-    xhr.onload = function() {
-      if (this.status == 200) {
-*!*
-        resolve(this.response);
-*/!*  
-      } else {
-*!*
-        var error = new Error(this.statusText);
-        error.code = this.status;
-        reject(error);
-*/!*
-      }
-    };
-
-    xhr.onerror = function() {
-*!*
-      reject(new Error("Network Error"));
-*/!*
-    };
-
-    xhr.send();
-  });
-
-}
-```
-
-Как видно, внутри функции объект `XMLHttpRequest` создаётся и отсылается как обычно, при `onload/onerror` вызываются, соответственно, `resolve` (при статусе 200) или `reject`.
-
-Использование:
-
-```js
-//+ run
-httpGet("/article/promise/user.json")
-  .then(
-    response => alert(`Fulfilled: ${response}`),
-    error => alert(`Rejected: ${error}`)
-  );
-```
-
-
-[smart header="Метод `fetch`"]
-Заметим, что ряд современных браузеров уже поддерживает [fetch](/fetch) -- новый встроенный метод для AJAX-запросов, призванный заменить XMLHttpRequest. Он гораздо мощнее, чем `httpGet`. И -- да, этот метод использует промисы. Полифилл для него доступен на [](https://github.com/github/fetch). 
-[/smart]
-
-
-## Цепочки промисов
-
-"Чейнинг" (chaining), то есть возможность строить асинхронные цепочки из промисов -- пожалуй, основная причина, из-за которой существуют и активно используются промисы.
-
-Например, мы хотим по очереди:
-<ol>
-<li>Загрузить данные посетителя с сервера (асинхронно).</li>
-<li>Затем отправить запрос о нём на github (асинхронно).</li>
-<li>Когда это будет готово, вывести его github-аватар на экран (асинхронно).</li>
-<li>...И сделать код расширяемым, чтобы цепочку можно было легко продолжить.</li>
-</ol>
-
-Вот код для этого, использующий функцию `httpGet`, описанную выше:
-
-```js
-//+ run
-'use strict';
-
-// сделать запрос
-httpGet('/article/promise/user.json')
-*!*
-  // 1. Получить данные о пользователе в JSON и передать дальше
-*/!*
-  .then(response => {
-    console.log(response); 
-    let user = JSON.parse(response);
-*!*
-    return user; 
-*/!*
-  })
-*!*
-  // 2. Получить информацию с github
-*/!*
-  .then(user => {
-    console.log(user);
-*!*
-    return httpGet(`https://api.github.com/users/${user.name}`); 
-*/!*
-  })
-*!*
-  // 3. Вывести аватар на 3 секунды (можно с анимацией)
-*/!*
-  .then(githubUser => {
-    console.log(githubUser);
-    githubUser = JSON.parse(githubUser);
-    
-    let img = new Image();
-    img.src = githubUser.avatar_url;
-    img.className = "promise-avatar-example";
-    document.body.appendChild(img);
-
-*!*
-    setTimeout(() => img.remove(), 3000); // (*)
-*/!*
-  });
-```
-
-Самое главное в этом коде -- последовательность вызовов:
-
-```js
-httpGet(...)
-  .then(...)
-  .then(...)
-  .then(...)
-```
-
-При чейнинге, то есть последовательных вызовах `.then…then…then`, в каждый следующий `then` переходит результат от предыдущего. Вызовы `console.log` оставлены, чтобы при запуске можно было посмотреть конкретные значения, хотя они здесь и не очень важны.
-
-**Если очередной `then` вернул промис, то далее по цепочке будет передан не сам этот промис, а его результат.**
-
-В коде выше:
-
-<ol>
-<li>В первом `then` возвращается объект `user`, он переходит в следующий `then`.</li>
-<li>Во втором `then` возвращается промис (результат нового вызова `httpGet`). Когда он будет завершён (может пройти какое-то время), то будет вызван следующий `then`.</li>
-<li>Третий `then` ничего не возвращает.</li>
-</ol>
-
-Схематично его работу можно изобразить так:
-
-<img src="promiseUserFlow.png">
-
-Значком "песочные часы" помечены периоды ожидания, которых всего два: в исходном `httpGet` и в подвызове далее по цепочке. 
-
-Если `then` возвращает промис, то до его выполнения может пройти некоторое время, оставшаяся часть цепочки будет ждать.
-
-То есть, логика довольно проста:
-<ul>
-<li>В каждом `then` мы получаем текущий результат работы.</li>
-<li>Можно его обработать синхронно и вернуть результат (например, применить `JSON.parse`). Или же, если нужна асинхронная обработка -- инициировать её и вернуть промис.</li>
-</ul>
-
-Обратим внимание, что последний `then` в нашем примере ничего не возвращает. Если мы хотим, чтобы после `setTimeout` `(*)` асинхронная цепочка могла быть продолжена, то последний `then` тоже должен вернуть промис. Это общее правило: если внутри `then` стартует новый асинхронный процесс, то для того, чтобы оставшаяся часть цепочки выполнилась после его окончания, мы должны вернуть промис.
-
-В данном случае промис должен перейти в состояние "выполнен" после срабатывания `setTimeout`.
-
-Строку `(*)` для этого нужно переписать так:
-```js
-.then(githubUser => {
-  ...
-  
-  // вместо setTimeout(() => img.remove(), 3000); (*)
-
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      img.remove();
-      // после таймаута — вызов resolve,
-      // можно без результата, чтобы управление перешло в следующий then
-      // (или можно передать данные пользователя дальше по цепочке)
-*!*
-      resolve(); 
-*/!*
-    }, 3000);
-  });
-})
-```
-
-Теперь, если к цепочке добавить ещё `then`, то он будет вызван после окончания `setTimeout`.
-
-## Перехват ошибок
-
-Выше мы рассмотрели "идеальный случай" выполнения, когда ошибок нет.
-
-А что, если github не отвечает? Или JSON.parse бросил синтаксическую ошибку при обработке данных?
-
-Да мало ли, где ошибка...
-
-Правило здесь очень простое.
-
-**При возникновении ошибки -- она отправляется в ближайший обработчик `onRejected`.**
-
-Такой обработчик нужно поставить через второй аргумент `.then(..., onRejected)` или, что то же самое, через `.catch(onRejected)`.
-
-Чтобы поймать всевозможные ошибки, которые возникнут при загрузке и обработке данных, добавим `catch` в конец нашей цепочки:
-
-```js
-//+ run
-'use strict';
-
-*!*
-// в httpGet обратимся к несуществующей странице
-*/!*
-httpGet('/page-not-exists')
-  .then(response => JSON.parse(response))
-  .then(user => httpGet(`https://api.github.com/users/${user.name}`))
-  .then(githubUser => {
-    githubUser = JSON.parse(githubUser);
-
-    let img = new Image();
-    img.src = githubUser.avatar_url;
-    img.className = "promise-avatar-example";
-    document.body.appendChild(img);
-
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        img.remove();
-        resolve();
-      }, 3000);
-    });
-  })
-*!*
-  .catch(error => {
-    alert(error); // Error: Not Found
-  });
-*/!*
-```
-
-В примере выше ошибка возникает в первом же `httpGet`, но `catch` с тем же успехом поймал бы ошибку во втором `httpGet` или в `JSON.parse`.
-
-Принцип очень похож на обычный `try..catch`: мы делаем асинхронную цепочку из `.then`, а затем, когда нужно перехватить ошибки, вызываем `.catch(onRejected)`.
-
-
-[smart header="А что после `catch`?"]
-Обработчик `.catch(onRejected)` получает ошибку и должен обработать её. 
-
-Есть два варианта развития событий:
-<ol>
-<li>Если ошибка не критичная, то `onRejected` возвращает значение через `return`, и управление переходит в ближайший `.then(onFulfilled)`.</li>
-<li>Если продолжить выполнение с такой ошибкой нельзя, то он делает `throw`, и тогда ошибка переходит в следующий ближайший `.catch(onRejected)`.
-</li>
-</ol>
-
-Это также похоже на обычный `try..catch` -- в блоке `catch` ошибка либо обрабатывается, и тогда выполнение кода продолжается как обычно, либо он делает `throw`. Существенное отличие -- в том, что промисы асинхронные, поэтому при отсутствии внешнего `.catch` ошибка не "вываливается" в консоль и не "убивает" скрипт. 
-
-Ведь возможно, что новый обработчик `.catch` будет добавлен в цепочку позже.
-[/smart]
-
-## Промисы в деталях
-
-Самым основным источником информации по промисам является, разумеется, [стандарт](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-promise-objects).
-
-Чтобы наше понимание промисов было полным, и мы могли с лёгкостью разрешать сложные ситуации, посмотрим внимательнее, что такое промис и как он работает, но уже не в общих словах, а детально, в соответствии со стандартом EcmaScript.
-
-Согласно стандарту, у объекта `new Promise(executor)` при создании есть четыре внутренних свойства:
-
-<ul>
-<li>`PromiseState` -- состояние, вначале "pending".</li>
-<li>`PromiseResult` -- результат, при создании значения нет.</li>
-<li>`PromiseFulfillReactions` -- список функций-обработчиков успешного выполнения.</li>
-<li>`PromiseRejectReactions` -- список функций-обработчиков ошибки.</li>
-</ul>
-
-<img src="promiseEcma.png">
-
-Когда функция-executor вызывает `reject` или `resolve`, то `PromiseState` становится `"resolved"` или `"rejected"`, а все функции-обработчики из соответствующего списка перемещаются в специальную системную очередь `"PromiseJobs"`.
-
-Эта очередь автоматически выполняется, когда интерпретатору "нечего делать".  Иначе говоря, все функции-обработчики выполнятся асинхронно, одна за другой, по завершении текущего кода, примерно как `setTimeout(..,0)`.
-
-Исключение из этого правила -- если `resolve` возвращает другой `Promise`. Тогда дальнейшее выполнение ожидает его результата (в очередь помещается специальная задача), и функции-обработчики выполняются уже с ним.
-
-Добавляет обработчики в списки один метод: `.then(onResolved, onRejected)`. Метод `.catch(onRejected)` -- всего лишь сокращённая запись `.then(null, onRejected)`.
-
-Он делает следующее:
-<ul>
-<li>Если `PromiseState == "pending"`, то есть промис ещё не выполнен, то обработчики добавляются в соответствующие списки.</li>
-<li>Иначе обработчики сразу помещаются в очередь на выполнение.</li>
-</ul>
-
-Здесь важно, что обработчики можно добавлять в любой момент. Можно до выполнения промиса (они подождут), а можно -- после (выполнятся в ближайшее время, через асинхронную очередь).
-
-Например:
-
-```js
-//+ run
-// Промис выполнится сразу же
-var promise = new Promise((resolve, reject) => resolve(1));
-
-// PromiseState = "resolved"
-// PromiseResult = 1
-
-// Добавили обработчик к выполненному промису
-promise.then(alert); // ...он сработает тут же
-```
-
-Разумеется, можно добавлять и много обработчиков на один и тот же промис:
-
-
-```js
-//+ run
-// Промис выполнится сразу же
-var promise = new Promise((resolve, reject) => resolve(1));
-
-promise.then( function f1(result) {
-*!*
-  alert(result); // 1
-*/!*
-  return 'f1'; 
-})
-
-promise.then( function f2(result) {
-*!*
-  alert(result); // 1
-*/!*
-  return 'f2';
-})
-```
-
-Вид объекта `promise` после этого:
-
-<img src="promiseTwo.png">
-
-На этой иллюстрации можно увидеть добавленные нами обработчики `f1`, `f2`, а также -- автоматические добавленные обработчики ошибок `"Thrower"`.
-
-Дело в том, что `.then`, если один из обработчиков не указан, добавляет его "от себя", следующим образом:
-<ul>
-<li>Для успешного выполнения -- функция `Identity`, которая выглядит как `arg => return arg`, то есть возвращает аргумент без изменений.</li>
-<li>Для ошибки -- функция `Thrower`, которая выглядит как `arg => throw arg`, то есть генерирует ошибку.</li>
-</ul>
-
-Это, по сути дела, формальность, но без неё некоторые особенности поведения промисов могут "не сойтись" в общую логику, поэтому мы упоминаем о ней здесь.
-
-Обратим внимание, в этом примере намеренно *не используется чейнинг*. То есть, обработчики добавляются именно на один и тот же промис.
-
-Поэтому оба `alert` выдадут одно значение `1`. 
-
-Все функции из списка обработчиков вызываются с результатом промиса, одна за другой. Никакой передачи результатов между обработчиками в рамках одного промиса нет, а сам результат промиса (`PromiseResult`) после установки не меняется.
-
-Поэтому, чтобы продолжить работу с результатом, используется чейнинг.
-
-**Для того, чтобы результат обработчика передать следующей функции, `.then` создаёт новый промис и возвращает его.**
-
-В примере выше создаётся два таких промиса (т.к. два вызова `.then`), каждый из которых даёт свою ветку выполнения:
-
-<img src="promiseTwoThen.png">
-
-Изначально эти новые промисы -- "пустые", они ждут. Когда в будущем выполнятся обработчики `f1, f2`, то их результат будет передан в новые промисы по стандартному принципу:
-
-<ul>
-<li>Если вернётся обычное значение (не промис), новый промис перейдёт в `"resolved"` с ним.</li>
-<li>Если был `throw`, то новый промис перейдёт в состояние `"rejected"` с ошибкой.</li>
-<li>Если вернётся промис, то используем его результат (он может быть как `resolved`, так и `rejected`).</li>
-</ul>
-
-<img src="promiseHandlerVariants.png">
-
-Дальше выполнятся уже обработчики на новом промисе, и так далее.
-
-Чтобы лучше понять происходящее, посмотрим на цепочку, которая получается в процессе написания кода для показа github-аватара.
-
-Первый промис и обработка его результата:
-
-```js
-httpGet('/article/promise/user.json')
-  .then(JSON.parse)
-```
-
-<img src="promiseLoadAvatarChain-1.png">
-
-
-Если промис завершился через `resolve`, то результат -- в `JSON.parse`, если `reject` -- то в Thrower. 
-
-Как было сказано выше, `Thrower` -- это стандартная внутренняя функция, которая автоматически используется, если второй обработчик не указан. 
-
-Можно считать, что второй обработчик выглядит так:
-
-```js
-httpGet('/article/promise/user.json')
-  .then(JSON.parse, *!*err => throw err*/!*)
-```
-
-Заметим, что когда обработчик в промисах делает `throw` -- в данном случае, при ошибке запроса, то такая ошибка не "валит" скрипт и не выводится в консоли. Она просто будет передана в ближайший следующий обработчик `onRejected`.
-
-Добавим в код ещё строку:
-
-```js
-httpGet('/article/promise/user.json')
-  .then(JSON.parse)
-*!*
-  .then(user => httpGet(`https://api.github.com/users/${user.name}`))
-*/!*
-```
-
-Цепочка "выросла вниз":
-
-<img src="promiseLoadAvatarChain-2.png">
-
-Функция `JSON.parse` либо возвращает объект с данными, либо генерирует ошибку (что расценивается как `reject`). 
-
-Если всё хорошо, то `then(user => httpGet(…))` вернёт новый промис, на который стоят уже два обработчика:
-
-
-```js
-httpGet('/article/promise/user.json')
-  .then(JSON.parse)
-  .then(user => httpGet(`https://api.github.com/users/${user.name}`))
-  .then(
-*!*
-    JSON.parse,
-    function avatarError(error) {
-      if (error.code == 404) {
-        return {name: "NoGithub", avatar_url: '/article/promise/anon.png'};
-      } else {
-        throw error;
-      }
-    }
-*/!*
-  })
-```
-
-<img src="promiseLoadAvatarChain-3.png">
-
-Наконец-то хоть какая-то обработка ошибок!
-
-Обработчик `avatarError` перехватит ошибки, которые были ранее. Функция `httpGet` при генерации ошибки записывает её HTTP-код в свойство `error.code`, так что мы легко можем понять -- что это: 
-
-<ul>
-<li>Если страница на Github не найдена -- можно продолжить выполнение, используя "аватар по умолчанию"</li>
-<li>Иначе -- пробрасываем ошибку дальше.</li>
-</ul>
-
-Итого, после добавления оставшейся части цепочки, картина получается следующей:
-
-```js
-//+ run
-'use strict';
-
-httpGet('/article/promise/userNoGithub.json')
-  .then(JSON.parse)
-  .then(user => loadUrl(`https://api.github.com/users/${user.name}`))
-  .then(
-    JSON.parse,
-    function githubError(error) {
-      if (error.code == 404) {
-        return {name: "NoGithub", avatar_url: '/article/promise/anon.png'};
-      } else {
-        throw error;
-      }
-    }
-  })
-  .then(function showAvatar(githubUser) {
-    let img = new Image();
-    img.src = githubUser.avatar_url;
-    img.className = "promise-avatar-example";
-    document.body.appendChild(img);
-    setTimeout(() => img.remove(), 3000);
-  })
-  .catch(function genericError(error) {
-    alert(error); // Error: Not Found
-  });
-```
-
-<img src="promiseLoadAvatarChain-4.png">
-
-В конце срабатывает общий обработчик `genericError`, который перехватывает любые ошибки. В данном случае ошибки, которые в него попадут, уже носят критический характер, что-то серьёзно не так. Чтобы посетитель не удивился отсутствию информации, мы показываем ему сообщение об этом. 
-
-Можно и как-то иначе вывести уведомление о проблеме, главное -- не забыть обработать ошибки в конце. Если последнего `catch` не будет, а цепочка завершится с ошибкой, то посетитель об этом не узнает.
-
-В консоли тоже ничего не будет, так как ошибка остаётся "внутри" промиса, ожидая добавления следующего обработчика `onRejected`, которому будет передана.
-
-Итак, мы рассмотрели основные приёмы использования промисов. Далее -- посмотрим некоторые полезные вспомогательные методы.
-
-## Параллельное выполнение
-
-Что, если мы хотим осуществить несколько асинхронных процессов одновременно и обработать их результат?
-
-
-В классе `Promise` есть следующие статические методы.
-
-### Promise.all(iterable)
-
-Вызов `Promise.all(iterable)` получает массив (или другой итерируемый объект) промисов и возвращает промис, который ждёт, пока все переданные промисы завершатся, и переходит в состояние "выполнено" с массивом их результатов.
-
-Например:
-
-```js
-//+ run
-
-Promise.all([
-  httpGet('/article/promise/user.json'),
-  httpGet('/article/promise/guest.json')
-]).then(results => {
-  alert(results);
-}); 
-```
-
-Допустим, у нас есть массив с URL. 
-
-```js
-let urls = [
-  '/article/promise/user.json',
-  '/article/promise/guest.json'
-];
-```
-
-Чтобы загрузить их параллельно, нужно:
-<ol>
-<li>Создать для каждого URL соответствующий промис.</li>
-<li>Обернуть массив таких промисов в `Promise.all`.</li>
-</ol>
-
-Получится так:
-
-```js
-//+ run
-'use strict';
-
-let urls = [
-  '/article/promise/user.json',
-  '/article/promise/guest.json'
-];
-
-*!*
-Promise.all( urls.map(httpGet) )
-*/!*
-  .then(results => {
-    alert(results);
-  }); 
-```
-
-Заметим, что если какой-то из промисов завершился с ошибкой, то результатом `Promise.all` будет эта ошибка. При этом остальные промисы игнорируются.
-
-Например:
-
-
-```js
-//+ run
-
-Promise.all([
-  httpGet('/article/promise/user.json'),
-  httpGet('/article/promise/guest.json'),
-  httpGet('/article/promise/no-such-page.json') // (нет такой страницы)
-]).then(
-  result => alert("не сработает"),
-  error => alert("Ошибка: " + error.message) // Ошибка: Not Found
-)
-```
-
-### Promise.race(iterable)
-
-Вызов `Promise.race`, как и `Promise.all`, получает итерируемый объект с промисами, которые нужно выполнить, и возвращает новый промис.
-
-Но, в отличие от `Promise.all`, результатом будет только первый успешно выполнившийся промис из списка. Остальные игнорируются.
-
-Например:
-
-```js
-//+ run
-
-Promise.race([
-  httpGet('/article/promise/user.json'),
-  httpGet('/article/promise/guest.json')
-]).then(firstResult => {
-  firstResult = JSON.parse(firstResult);
-  alert( firstResult.name ); // iliakan или guest, смотря что загрузится раньше 
-}); 
-```
-
-## Promise.resolve(value)
-
-Вызов `Promise.resolve(value)` создаёт успешно выполнившийся промис с результатом `value`.
-
-Он аналогичен конструкции:
-
-```js
-new Promise((resolve) => resolve(value))
-```
-
-`Promise.resolve`, когда хотят построить асинхронную цепочку, и начальный результат уже есть.
-
-
-Например:
-
-```js
-//+ run
-Promise.resolve(window.location) // начать с этого значения
-  .then(httpGet) // вызвать для него httpGet
-  .then(alert) // и вывести результат
-```
-
-## Promise.reject(error)
-
-Аналогично `Promise.resolve(value)` создаёт уже выполнившийся промис, но не с успешным результатом, а с ошибкой `error`.
-
-Например:
-
-```js
-//+ run
-Promise.reject(new Error("...")) 
-  .catch(alert) // Error: ...
-```
-
-Метод `Promise.reject` используется очень редко, гораздо реже чем `resolve`, потому что ошибка возникает обычно не в начале цепочки, а в процессе её выполнения.
-
-## Итого
-
-<ul>
-<li>Промис -- это специальный объект, который хранит своё состояние, текущий результат (если есть) и коллбэки.</li>
-<li>При создании `new Promise((resolve, reject) => ...)` автоматически запускается функция-аргумент, которая должна вызвать `resolve(result)` при успешном выполнении и `reject(error)` -- при ошибке.</li>
-<li>Аргумент `resolve/reject` (только первый, остальные игнорируются) передаётся обработчикам на этом промисе.</li>
-<li>Обработчики назначаются вызовом `.then/catch`.</li>
-<li>Для передачи результата от одного обработчика к другому используется чейнинг.</li>
-</ul>
-
-У промисов есть некоторые ограничения. В частности, стандарт не предусматривает какой-то метод для "отмены" промиса, хотя в ряде ситуаций (http-запросы) это было бы довольно удобно. Возможно, он появится в следующей версии стандарта JavaScript.
-
-В современной JavaScript-разработке сложные цепочки с промисами используются редко, так как они куда проще описываются при помощи генераторов с библиотекой `co`, которые рассмотрены в [соответствующей главе](/generator). Можно сказать, что промисы лежат в основе более продвинутых способов асинхронной разработки.
-
-[head]
-<style>
-.promise-avatar-example {
-  border-radius: 50%;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-</style>
-[/head]
diff --git a/1-js/10-es-modern/11-promise/guest.json b/1-js/10-es-modern/11-promise/guest.json
deleted file mode 100644
index c32ac845..00000000
--- a/1-js/10-es-modern/11-promise/guest.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "guest",
-  "isAdmin": false
-}
diff --git a/1-js/10-es-modern/11-promise/promiseEcma.png b/1-js/10-es-modern/11-promise/promiseEcma.png
deleted file mode 100644
index f3ffe574..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseEcma.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseEcma@2x.png b/1-js/10-es-modern/11-promise/promiseEcma@2x.png
deleted file mode 100644
index f1a801a9..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseEcma@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseHandlerVariants.png b/1-js/10-es-modern/11-promise/promiseHandlerVariants.png
deleted file mode 100644
index 4161d9f5..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseHandlerVariants.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseHandlerVariants@2x.png b/1-js/10-es-modern/11-promise/promiseHandlerVariants@2x.png
deleted file mode 100644
index f4130ca6..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseHandlerVariants@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseInit.png b/1-js/10-es-modern/11-promise/promiseInit.png
deleted file mode 100644
index 148b4b8d..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseInit.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseInit@2x.png b/1-js/10-es-modern/11-promise/promiseInit@2x.png
deleted file mode 100644
index aabb57b7..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseInit@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1.png
deleted file mode 100644
index 58847d65..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1@2x.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1@2x.png
deleted file mode 100644
index 9b4ae76b..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-1@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2.png
deleted file mode 100644
index ebd35699..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2@2x.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2@2x.png
deleted file mode 100644
index e9b73840..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-2@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3.png
deleted file mode 100644
index 3e9056a7..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3@2x.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3@2x.png
deleted file mode 100644
index 3c461f7e..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-3@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4.png
deleted file mode 100644
index d2d1d3a5..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4@2x.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4@2x.png
deleted file mode 100644
index d3bc720d..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain-4@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain.png
deleted file mode 100644
index ea162ad1..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain@2x.png b/1-js/10-es-modern/11-promise/promiseLoadAvatarChain@2x.png
deleted file mode 100644
index 1e5f23bb..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseLoadAvatarChain@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseTwo.png b/1-js/10-es-modern/11-promise/promiseTwo.png
deleted file mode 100644
index 0600ba4d..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseTwo.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseTwo@2x.png b/1-js/10-es-modern/11-promise/promiseTwo@2x.png
deleted file mode 100644
index 95e4e749..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseTwo@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseTwoThen.png b/1-js/10-es-modern/11-promise/promiseTwoThen.png
deleted file mode 100644
index 439b4d85..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseTwoThen.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseTwoThen@2x.png b/1-js/10-es-modern/11-promise/promiseTwoThen@2x.png
deleted file mode 100644
index db5be298..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseTwoThen@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseUserFlow.png b/1-js/10-es-modern/11-promise/promiseUserFlow.png
deleted file mode 100644
index 110ce79b..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseUserFlow.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/promiseUserFlow@2x.png b/1-js/10-es-modern/11-promise/promiseUserFlow@2x.png
deleted file mode 100644
index a185fb73..00000000
Binary files a/1-js/10-es-modern/11-promise/promiseUserFlow@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/11-promise/user.json b/1-js/10-es-modern/11-promise/user.json
deleted file mode 100644
index 32f89971..00000000
--- a/1-js/10-es-modern/11-promise/user.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "iliakan",
-  "isAdmin": true
-}
diff --git a/1-js/10-es-modern/11-promise/userNoGithub.json b/1-js/10-es-modern/11-promise/userNoGithub.json
deleted file mode 100644
index 9e23f32b..00000000
--- a/1-js/10-es-modern/11-promise/userNoGithub.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "an-unknown-person-32662",
-  "isAdmin": false
-}
diff --git a/1-js/10-es-modern/12-generator/anon.png b/1-js/10-es-modern/12-generator/anon.png
deleted file mode 100644
index a1675d2f..00000000
Binary files a/1-js/10-es-modern/12-generator/anon.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/article.md b/1-js/10-es-modern/12-generator/article.md
deleted file mode 100644
index b7b25d1d..00000000
--- a/1-js/10-es-modern/12-generator/article.md
+++ /dev/null
@@ -1,904 +0,0 @@
-
-# Генераторы 
-
-Генераторы -- новый вид функций в современном JavaScript. Они отличаются от обычных тем, что могут приостанавливать своё выполнение, возвращать промежуточный результат и далее возобновлять его позже, в произвольный момент времени.
-
-## Создание генератора
-
-Для объявления генератора используется новая синтаксическая конструкция: `function*` (функция со звёздочкой).
-
-Её называют "функция-генератор" (generator function).
-
-Выглядит это так:
-
-```js
-function* generateSequence() {
-  yield 1;
-  yield 2;
-  return 3;
-}
-```
-
-При запуске `generateSequence()` код такой функции не выполняется. Вместо этого она возвращает специальный объект, который как раз и называют "генератором". 
-
-```js
-// generator function создаёт generator
-let generator = generateSequence();
-```
-
-Правильнее всего будет воспринимать генератор как "замороженный вызов функции":
-
-<img src="generateSequence-1.png">
-
-При создании генератора код находится в начале своего выполнения.
-
-Основным методом генератора является `next()`. При вызове он возобновляет выполнение кода до ближайшего ключевого слова `yield`. По достижении `yield` выполнение приостанавливается, а значение -- возвращается во внешний код:
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence() {
-  yield 1;
-  yield 2;
-  return 3;
-}
-
-let generator = generateSequence();
-
-*!*
-let one = generator.next();
-*/!*
-
-alert(JSON.stringify(one)); // {value: 1, done: false}
-```
-
-<img src="generateSequence-2.png">
-
-Повторный вызов `generator.next()` возобновит выполнение и вернёт результат следующего `yield`:
-
-```js
-let two = generator.next();
-
-alert(JSON.stringify(two)); // {value: 2, done: false}
-```
-
-<img src="generateSequence-3.png">
-
-И, наконец, последний вызов завершит выполнение функции и вернёт результат `return`:
-
-```js
-let three = generator.next();
-
-alert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*}
-```
-
-<img src="generateSequence-4.png">
-
-
-Функция завершена. Внешний код должен увидеть это из свойства `done:true` и обработать `value:3`, как окончательный результат. 
-
-Новые вызовы `generator.next()` больше не имеют смысла. Впрочем, если они и будут, то не вызовут ошибки, но будут возвращать один и тот же объект: `{done: true}`.
-
-"Открутить назад" завершившийся генератор нельзя, но можно создать новый ещё одним вызовом `generateSequence()` и выполнить его.
-
-[smart header="`function* (…)` или `function *(…)`?"]
-Можно ставить звёздочку как сразу после `function`, так и позже, перед названием. В интернет можно найти обе эти формы записи, они верны:
-```js
-function* f() { 
-  // звёздочка после function
-}
-
-function *f() {
-  // звёздочка перед названием
-}
-```
-
-Технически, нет разницы, но писать то так то эдак -- довольно странно, надо остановиться на чём-то одном. 
-
-Автор этого текста полагает, что правильнее использовать первый вариант `function*`, так как звёздочка относится к типу объявляемой сущности (`function*` -- "функция-генератор"), а не к её названию. Конечно, это всего лишь рекомендация-мнение, не обязательное к выполнению, работать будет в любом случае.
-[/smart] 
-
-
-
-
-## Генератор -- итератор
-
-Как вы, наверно, уже догадались по наличию метода `next()`, генератор связан с [итераторами](/iterator). В частности, он является итерируемым объектом.
-
-Его можно перебирать и через `for..of`:
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence() {
-  yield 1;
-  yield 2;
-  return 3;
-}
-
-let generator = generateSequence();
-
-for(let value of generator) {
-  alert(value); // 1, затем 2
-}
-```
-
-Заметим, однако, существенную особенность такого перебора!
-
-При запуске примера выше будет выведено значение `1`, затем `2`. Значение `3` выведено не будет. Это потому что стандартные перебор итератора игнорирует `value` на последнем значении, при `done: true`. Так что результат `return` в цикле `for..of` не выводится.
-
-Соответственно, если мы хотим, чтобы все значения возвращались при переборе через `for..of`, то надо возвращать их через `yield`:
-
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence() {
-  yield 1;
-  yield 2;
-*!*
-  yield 3;
-*/!*
-}
-
-let generator = generateSequence();
-
-for(let value of generator) {
-  alert(value); // 1, затем 2, затем 3
-}
-```
-
-...А зачем вообще `return` при таком раскладе, если его результат игнорируется? Он тоже нужен, но в других ситуациях. Перебор через `for..of` -- в некотором смысле "исключение". Как мы увидим дальше, в других контекстах `return` очень даже востребован.
-
-## Композиция генераторов
-
-Один генератор может включать в себя другие. Это называется композицией. 
-
-Разберём композицию на примере.
-
-Пусть у нас есть функция `generateSequence`, которая генерирует последовательность чисел:
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence(start, end) {
-
-  for (let i = start; i <= end; i++) {
-    yield i;
-  }
-
-}
-
-// Используем оператор … для преобразования итерируемого объекта в массив
-let sequence = [...generateSequence(2,5)];
-
-alert(sequence); // 2, 3, 4, 5
-```
-
-Мы хотим на её основе сделать другую функцию `generateAlphaNumCodes()`, которая будет генерировать коды для буквенно-цифровых символов латинского алфавита:
-
-<ul>
-<li>`48..57` -- для `0..9`</li>
-<li>`65..90` -- для `A..Z`</li>
-<li>`97..122` -- для `a..z`</li>
-</ul>
-
-Далее этот набор кодов можно превратить в строку и использовать, к примеру, для выбора из него случайного пароля. Только символы пунктуации ещё хорошо бы добавить для надёжности, но в этом примере мы будем без них.
-
-Естественно, раз в нашем распоряжении есть готовый генератор `generateSequence`, то хорошо бы его использовать.
-
-Конечно, можно внутри `generateAlphaNum` запустить несколько раз `generateSequence`, объединить результаты и вернуть. Так мы бы сделали с обычными функциями. Но композиция -- это кое-что получше.
-
-Она выглядит так:
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence(start, end) {
-  for (let i = start; i <= end; i++) yield i;
-}
-
-function* generateAlphaNum() {
-
-*!*
-  // 0..9
-  yield* generateSequence(48, 57);
-
-  // A..Z
-  yield* generateSequence(65, 90);
-
-  // a..z
-  yield* generateSequence(97, 122);
-*/!*
-
-}
-
-let str = '';
-
-for(let code of generateAlphaNum()) {
-  str += String.fromCharCode(code);
-}
-
-alert(str); // 0..9A..Za..z
-```
-
-Здесь использована специальная форма `yield*`. Она применима только к другому генератору и *делегирует* ему выполнение.
-
-То есть, при `yield*` интерпретатор переходит внутрь генератора-аргумента, к примеру, `generateSequence(48, 57)`, выполняет его, и все `yield`, которые он делает, выходят из внешнего генератора.
-
-Получается -- как будто мы вставили код внутреннего генератора во внешний напрямую, вот так:
-
-```js
-//+ run
-'use strict';
-
-function* generateSequence(start, end) {
-  for (let i = start; i <= end; i++) yield i;
-}
-
-function* generateAlphaNum() {
-
-*!*
-  // yield* generateSequence(48, 57);
-  for (let i = 48; i <= 57; i++) yield i;
-
-  // yield* generateSequence(65, 90);
-  for (let i = 65; i <= 90; i++) yield i;
-
-  // yield* generateSequence(97, 122);
-  for (let i = 97; i <= 122; i++) yield i;
-*/!*
-
-}
-
-let str = '';
-
-for(let code of generateAlphaNum()) {
-  str += String.fromCharCode(code);
-}
-
-alert(str); // 0..9A..Za..z
-```
-
-Код выше по поведению полностью идентичен варианту с `yield*`. При этом, конечно, переменные вложенного генератора не попадают во внешний, "делегирование" только выводит результаты `yield` во внешний поток.
-
-Композиция -- это естественное встраивание одного генератора в поток другого. При композиции значения из вложенного генератора выдаются "по мере готовности". Поэтому она будет работать даже если поток данных из вложенного генератора оказался бесконечным или ожидает какого-либо условия для завершения. 
-
-
-## yield -- дорога в обе стороны
-
-До этого генераторы наиболее напоминали "итераторы на стероидах". Но, как мы сейчас увидим, это не так, есть фундаментальное различие, генераторы гораздо мощнее и гибче.
-
-Всё дело в том, что `yield` -- дорога в обе стороны: он не только возвращает результат наружу, но и может передавать значение извне в генератор. 
-
-Вызов `let result = yield value` делает следующее:
-
-<ul>
-<li>Возвращает `value` во внешний код, приостанавливая выполнение генератора.</li>
-<li>Внешний код может обработать значение, и затем вызвать `next` с аргументом: `generator.next(arg)`.</li>
-<li>Генератор продолжит выполнение, аргумент `next` будет возвращён как результат `yield` (и записан в `result`).</li>
-</ul>
-
-Продемонстрируем это на примере:
-
-```js
-//+ run
-'use strict';
-
-function* gen() {
-*!*
-  // Передать вопрос во внешний код и подождать ответа
-  let result = yield "Сколько будет 2 + 2?";
-*/!*
-
-  alert(result);
-}
-
-let generator = gen();
-
-let question = generator.next().value; 
-// "Сколько будет 2 + 2?"
-
-setTimeout(() => generator.next(4), 2000);
-```
-
-На рисунке ниже прямоугольником изображён генератор, а вокруг него -- "внешний код", который с ним взаимодействует:
-
-<img src="genYield2.png">
-
-На этой иллюстрации показано то, что происходит в генераторе:
-
-<ol>
-<li>Первый вызов `generator.next()` -- всегда без аргумента, он начинает выполнение и возвращает результат первого `yield` ("Сколько будет 2+2?"). На этой точке генератор приостанавливает выполнение.</li>
-<li>Результат `yield` переходит во внешний код (в `question`). Внешний код может выполнять любые асинхронные задачи, генератор стоит "на паузе".</li>
-<li>Когда асинхронные задачи готовы, внешний код вызывает `generator.next(4)` с аргументом. Выполнение генератора возобновляется, а `4` выходит из присваивания как результат `let result = yield ...`.</li>
-</ol>
-
-В примере выше -- только два `next`. 
-
-Увеличим их количество, чтобы стал более понятен общий поток выполнения:
-
-```js
-//+ run
-'use strict';
-
-function* gen() {
-  let ask1 = yield "Сколько будет 2 + 2?"; 
-
-  alert(ask1); // 4
-
-  let ask2 = yield "3 * 3?"
-
-  alert(ask2); // 9
-}
-
-let generator = gen();
-
-alert( generator.next().value ); // "...2+2?"
-
-alert( generator.next(4).value ); // "...3*3?"
-
-alert( generator.next(9).done ); // true 
-```
-
-Взаимодействие с внешним кодом:
-
-<img src="genYield2-2.png">
-
-<ol>
-<li>Первый `.next()` начинает выполнение... Оно доходит до первого `yield`.</li>
-<li>Результат возвращается во внешний код.</li>
-<li>Второй `.next(4)` передаёт `4` обратно в генератор как результат первого `yield` и возобновляет выполнение.</li>
-<li>...Оно доходит до второго `yield`, который станет результатом `.next(4)`.</li>
-<li>Третий `next(9)` передаёт `9` в генератор как результат второго `yield` и возобновляет выполнение, которое завершается окончанием функции, так что `done: true`.</li>
-</ol>
-
-Получается "пинг-понг": каждый `next(value)` передаёт в генератор значение, которое становится результатом текущего `yield`, возобновляет выполнение и получает выражение из следующего `yield`. Исключением является первый вызов `next`, который не может передать значение в генератор, т.к. ещё не было ни одного `yield`.
-
-На рисунке ниже изображены шаги 3-4 из примера:
-
-<img src="genYield2-3.png">
-
-
-
-## generator.throw
-
-Как мы видели в примерах выше, внешний код может вернуть генератору в качестве результата `yield` любое значение.
-
-...Но "вернуть" можно не только результат, но и ошибку!
-
-Для того, чтобы передать в `yield` ошибку, используется вызов `generator.throw(err)`. При этом на строке с `yield` возникает исключение.
-
-Например, в коде ниже обращение к внешнему коду `yield "Сколько будет 2 + 2"` завершится с ошибкой:
-
-
-```js
-//+ run
-'use strict';
-
-function* gen() {
-  try {
-    // в этой строке возникнет ошибка
-    let result = yield "Сколько будет 2 + 2?"; // (**)
-
-    alert("выше будет исключение ^^^");
-  } catch(e) {
-    alert(e); // выведет ошибку
-  } 
-}
-
-let generator = gen();
-
-let question = generator.next().value;
-
-*!*
-generator.throw(new Error("ответ не найден в моей базе данных")); // (*)
-*/!*
-```
-
-"Вброшенная" в строке `(*)` ошибка возникает в строке с `yield` `(**)`. Далее она обрабатывается как обычно. В примере выше она перехватывается `try..catch` и выводится.
-
-Если ошибку не перехватить, то она "выпадет" из генератора. По стеку ближайший вызов, который инициировал выполнение -- это строка с `.throw`. Можно перехватить её там, как и продемонстрировано в примере ниже:
-
-
-```js
-//+ run
-'use strict';
-
-function* gen() {
-  // В этой строке возникнет ошибка
-  let result = yield "Сколько будет 2 + 2?";
-}
-
-let generator = gen();
-
-let question = generator.next().value;
-
-*!*
-try {
-  generator.throw(new Error("ответ не найден в моей базе данных")); 
-} catch(e) {
-  alert(e); // выведет ошибку
-}
-*/!*
-```
-
-Если же ошибка и там не перехвачена, то дальше -- как обычно, либо `try..catch` снаружи, либо она "повалит" скрипт.
-
-## Плоский асинхронный код
-
-Одна из основных областей применения генераторов -- написание "плоского" асинхронного кода.
-
-Общий принцип такой:
-<ul>
-<li>Генератор `yield'ит` не просто значения, а промисы.</li>
-<li>Есть специальная "функция-чернорабочий" `execute(generator)` которая запускает генератор, последовательными вызовами `next` получает из него промисы -- один за другим, и, когда очередной промис выполнится, возвращает его результат в генератор следующим `next`.</li>
-<li>Последнее значение генератора (`done:true`) `execute` уже обрабатывает как окончательный результат -- например, возвращает через промис куда-то ещё, во внешний код или просто использует, как в примере ниже.</li>
-</ul>
-
-Напишем такой код для получения аватара пользователя с github и его вывода, аналогичный рассмотренному в статье про [промисы](/promise).
-
-Для AJAX-запросов будем использовать метод [fetch](/fetch), он как раз возвращает промисы.
-
-```js
-//+ run
-'use strict';
-
-// генератор для получения и показа аватара
-// он yield'ит промисы
-function* showUserAvatar() {
-
-  let userFetch = yield fetch('/article/generator/user.json');
-  let userInfo = yield userFetch.json();
-
-  let githubFetch = yield fetch(`https://api.github.com/users/${userInfo.name}`); 
-  let githubUserInfo = yield githubFetch.json();
-
-  let img = new Image();
-  img.src = githubUserInfo.avatar_url;
-  img.className = "promise-avatar-example";
-  document.body.appendChild(img);
-
-  yield new Promise(resolve => setTimeout(resolve, 3000));
-
-  img.remove();
-
-  return img.src;
-}
-
-// вспомогательная функция-чернорабочий
-// для выполнения промисов из generator
-function execute(generator, yieldValue) {
-
-  let next = generator.next(yieldValue);
-
-  if (!next.done) {
-    next.value.then(
-      result => execute(generator, result),
-      err => generator.throw(err)
-    );
-  } else {
-    // обработаем результат return из генератора 
-    // обычно здесь вызов callback или что-то в этом духе
-    alert(next.value); 
-  }
-
-}
-
-*!*
-execute( showUserAvatar() );
-*/!*
-```
-
-Функция `execute` в примере выше -- универсальная, она может работать с любым генератором, который `yield'ит` промисы.
-
-Вместе с тем, это -- всего лишь набросок, чтобы было понятно, как такая функция в принципе работает. Есть уже готовые реализации, обладающие большим количеством возможностей.
-
-Одна из самых известных -- это библиотека [co](https://github.com/tj/co), которую мы рассмотрим далее.
-
-## Библиотека "co"
-
-Библиотека `co`, как и `execute` в примере выше, получает генератор и выполняет его.
-
-Начнём сразу с примера, а потом -- детали и полезные возможности:
-
-```js
-//+ run
-
-'use strict';
-
-co(function*() {
-  
-  let result = yield new Promise(
-    resolve => setTimeout(resolve, 1000, 1)
-  );
-
-  alert(result); // 1
-
-})
-```
-
-
-Предполагается, что библиотека `co` подключена к странице , например, отсюда: [](http://cdnjs.com/libraries/co/). В примере выше `function*()` делает `yield` промиса с `setTimeout`,  который через секунду возвращает `1`.
-
-Вызов `co(…)` возвращает промис с результатом генератора. Если в примере выше `function*()` что-то возвратит, то это можно будет получить через `.then` в результате `co`:
-
-```js
-//+ run
-'use strict';
-
-co(function*() {
-  
-  let result = yield new Promise(
-    resolve => setTimeout(resolve, 1000, 1)
-  );
-
-*!*
-  return result; // return 1
-
-}).then(alert); // 1
-*/!*
-```
-[warn header="Обязательно нужен `catch`"]
-
-Частая ошибка начинающих -- вообще забывать про обработку результата `co`. Даже если результата нет, ошибки нужно обработать через `catch`, иначе они "подвиснут" в промисе.
-
-Такой код ничего не выведет:
-
-```js
-//+ run
-co(function*() {
-  throw new Error("Sorry that happened");
-})
-```
-
-Программист даже не узнает об ошибке. Особенно обидно, когда это опечатка или другая программная ошибка, которую обязательно нужно поправить.
-
-Правильный вариант:
-
-```js
-//+ run
-co(function*() {
-  throw new Error("Sorry that happened");
-}).catch(alert); // обработать ошибку как-либо
-```
-
-Большинство примеров этого `catch` не содержат, но это лишь потому, что в примерах ошибок нет. А в реальном коде обязательно нужен `catch`.
-
-[/warn]
-
-Библиотека `co` умеет выполнять не только промисы. Есть несколько видов значений, которые можно `yield`, и их обработает `co`:
-
-<ul>
-<li>Промис.</li>
-<li>Объект-генератор.</li>
-<li>Функция-генератор `function*()` -- `co` её выполнит, затем выполнит полученный генератор.</li>
-<li>Функция с единственным аргументом вида `function(callback)` -- библиотека `co` её запустит со своей функцией-`callback` и будет ожидать, что при ошибке она вызовет `callback(err)`, а при успешном выполнении -- `callback(null, result)`. То есть, в первом аргументе -- будет ошибка (если есть), а втором -- результат (если нет ошибки). После чего результат будет передан в генератор.</li>
-<li>Массив или объект из вышеперечисленного. При этом все задачи будут выполнены параллельно, и результат, в той же структуре, будет выдан наружу.</li>
-</ul>
-
-В примере ниже происходит `yield` всех этих видов значений. Библиотека `co` обеспечивает их выполнение и возврат результата в генератор:
-
-```js
-//+ run
-'use strict';
-
-Object.defineProperty(window, 'result', { 
-  // присвоение result=… будет выводить значение
-  set: value => alert(JSON.stringify(value))
-});
-
-co(function*() {
-  result = yield function*() { // генератор
-    return 1;
-  }();
-
-  result = yield function*() { // функция-генератор
-    return 2;
-  };
-
-  result = yield Promise.resolve(3); // промис
-
-  result = yield function(callback) { // function(callback)
-    setTimeout(() => callback(null, 4), 1000);
-  };
-
-
-  result = yield { // две задачи выполнит параллельно, как Promise.all
-    one: Promise.resolve(1),
-    two: function*() { return 2; }
-  };
-
-  result = yield [ // две задачи выполнит параллельно, как Promise.all
-    Promise.resolve(1),
-    function*() { return 2 }
-  ];
-
-});
-```
-
-[smart header="Устаревший `yield function(callback)`"]
-Отдельно заметим вариант с `yield function(callback)`. Такие функции, с единственным-аргументом callback'ом, в англоязычной литературе называют "thunk".
-
-Функция обязана выполниться и вызвать (асинхронно) либо `callback(err)` с ошибкой, либо `callback(null, result)` с результатом. 
-
-Использование таких функций в `yield` является устаревшим подходом, так как там, где можно использовать `yield function(callback)`, можно использовать и промисы. При этом промисы мощнее. Но в старом коде его ещё можно встретить.
-[/smart]
-
-
-Посмотрим пример посложнее, с композицией генераторов:
-
-```js
-//+ run
-'use strict';
-
-co(function*() {
-  let result = yield* gen();
-  alert(result); // hello
-});
-
-function* gen() {
-  return yield* gen2();
-}
-
-function* gen2() {
-  let result = yield new Promise( // (1)
-    resolve => setTimeout(resolve, 1000, 'hello')
-  );
-  return result;
-}
-```
-
-Это -- отличный вариант для библиотеки `co`. Композиция `yield* gen()` вызывает `gen()` в потоке внешнего генератора. Аналогично делает и `yield* gen()`. 
-
-Поэтому `yield new Promise` из строки `(1)` в `gen2()` попадает напрямую в библиотеку `co`, как если бы он был сделан так:
-
-```js
-//+ run
-'use strict';
-
-co(function*() {
-  // gen() и затем gen2 встраиваются во внешний генератор
-  let result = yield new Promise(
-    resolve => setTimeout(resolve, 1000, 'hello')
-  );
-  alert(result); // hello
-});
-```
-
-Пример `showUserAvatar()` можно переписать с использованием `co` вот так:
-
-```js
-//+ run
-'use strict';
-
-// Загрузить данные пользователя с нашего сервера
-function* fetchUser(url) {
-  let userFetch = yield fetch(url);
-  
-  let user = yield userFetch.json();
-  
-  return user;
-}
-
-// Загрузить профиль пользователя с github 
-function* fetchGithubUser(user) {
-  let githubFetch = yield fetch(`https://api.github.com/users/${user.name}`); 
-  let githubUser = yield githubFetch.json();
-
-  return githubUser;
-}
-
-// Подождать ms миллисекунд
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-// Использовать функции выше для получения аватара пользователя
-function* fetchAvatar(url) {
-
-  let user = yield* fetchUser(url);
-
-  let githubUser = yield* fetchGithubUser(user);
-
-  return githubUser.avatar_url;
-}
-
-// Использовать функции выше для получения и показа аватара
-function* showUserAvatar() {
-
-  let avatarUrl;
-
-  try {
-    avatarUrl = yield* fetchAvatar('/article/generator/user.json');
-  } catch(e) {
-    avatarUrl = '/article/generator/anon.png';
-  }
-
-  let img = new Image();
-  img.src = avatarUrl;
-  img.className = "promise-avatar-example";
-  document.body.appendChild(img);
-
-  yield sleep(2000);
-
-  img.remove();
-
-  return img.src;
-}
-
-co(showUserAvatar);
-```
-
-Заметим, что для перехвата ошибок при получении аватара используется `try..catch` вокруг `yield* fetchAvatar`:
-
-```js
-try {
-  avatarUrl = yield* fetchAvatar('/article/generator/user.json');
-} catch(e) {
-  avatarUrl = '/article/generator/anon.png';
-}
-```
-
-Это -- одно из главных удобств использования генераторов. Несмотря на то, что операции `fetch` -- асинхронные, мы можем использовать обычный `try..catch` для обработки ошибок в них.
-
-## Для генераторов -- только yield*
-
-Библиотека `co` технически позволяет писать код так:
-```js
-let user = yield fetchUser(url);
-// вместо
-// let user = yield* fetchUser(url); 
-```
-
-То есть, можно сделать `yield` генератора, `co()` его выполнит и передаст значение обратно. Как мы видели выше, библиотека `co` -- довольно всеядна. Однако, рекомендуется использовать для вызова функций-генераторов именно `yield*`.
-
-Причин для этого несколько:
-<ol>
-<li>Делегирование генераторов `yield*` -- это встроенный механизм JavaScript. Вместо возвращения значения обратно в `co`, выполнения кода библиотеки... Мы просто используем возможности языка. Это правильнее.</li>
-<li>Поскольку не происходит лишних вызовов, это быстрее по производительности.</li>
-<li>И, наконец, пожалуй, самое приятное -- делегирование генераторов сохраняет стек.</li>
-</ol>
-
-Проиллюстрируем последнее на примере:
-
-```js
-//+ run
-'use strict';
-
-co(function*() {
-
-*!*
-  // при запуске в стеке не будет видно этой строки
-  yield g(); // (*)
-*/!*
-
-}).catch(function(err) {
-  alert(err.stack);
-});
-
-function* g() {
-  throw new Error("my error");
-}
-```
-
-При запуске этого кода стек может выглядеть примерно так:
-```js
-*!*
-at g (eval at runJS …, <anonymous>:13:9)
-*/!*
-  at GeneratorFunctionPrototype.next (native)
-  at onFulfilled (…/co/…/index.min.js:1:1136)
-  at …/co/…/index.min.js:1:1076
-  at co (…/co/…/index.min.js:1:1039)
-  at toPromise (…/co/…/index.min.js:1:1740)
-  at next (…/co/…/index.min.js:1:1351)
-  at onFulfilled (…/co/…/index.min.js:1:1172)
-  at …/co/…/index.min.js:1:1076
-  at co (…/co/…/index.min.js:1:1039)
-```
-
-Детали здесь не имеют значения, самое важное -- почти весь стек находится внутри библиотеки `co`.
-
-Из оригинального скрипта там только одна строка (первая):
-```js
-at g (eval at runJS …, <anonymous>:13:9)
-```
-
-То есть, стек говорит, что ошибка возникла в строке `13`:
-```js
-// строка 13 из кода выше
-throw new Error("my error");
-```
-
-Что ж, спасибо. Но как мы оказались на этой строке? Об этом в стеке нет ни слова!
-
-Заменим в строке `(*)` вызов `yield` на `yield*`:
-
-```js
-//+ run
-'use strict';
-
-co(function*() {
-
-*!*
-  // заменили yield на yield*
-  yield* g(); // (*)
-*/!*
-
-}).catch(function(err) {
-  alert(err.stack);
-});
-
-function* g() {
-  throw new Error("my error");
-}
-```
-
-Пример стека теперь:
-```js
-*!*
-at g (eval at runJS …, <anonymous>:13:9)
-*/!*
-  at GeneratorFunctionPrototype.next (native)
-*!*
-  at eval (eval at runJS …, <anonymous>:6:10)
-*/!*
-  at GeneratorFunctionPrototype.next (native)
-  at onFulfilled (…/co/…/index.min.js:1:1136)
-  at …/co/…/index.min.js:1:1076
-  at co (…/co/…/index.min.js:1:1039)
-*!*
-  at eval (eval at runJS …, <anonymous>:3:1)
-*/!*
-  at eval (native)
-  at runJS (…)
-```
-
-Если очистить от вспомогательных вызовов, то эти строки -- как раз то, что нам надо:
-```js
-at g (eval at runJS …, <anonymous>:13:9)
-  at eval (eval at runJS …, <anonymous>:6:10)
-  at eval (eval at runJS …, <anonymous>:3:1)
-```
-
-Теперь видно, что (читаем снизу) исходный вызов был в строке `3`, далее -- вложенный в строке `6`, и затем произошла ошибка была в строке `13`.
-
-Почему вариант с простым `yield` не работает -- достаточно очевидно, если внимательно посмотреть на код и воспроизвести в уме, как он работает. Оставляем это упражнение вдумчивому читателю.
-
-Итого, рекомендация уже достаточно обоснована -- при запуске вложенных генераторов используем `yield*`. 
-
-## Итого
-
-<ul>
-<li>Генераторы создаются при помощи функций-генераторов `function*(…) {…}`.</li>
-<li>Внутри генераторов и только них разрешён оператор `yield`. Это иногда создаёт недобства, поскольку в коллбэках `.map/.forEach` сделать `yield` нельзя. Впрочем, можно сделать `yield` массива (при использовании `co`).</li>
-<li>Внешний код и генератор обмениваются промежуточными результатами посредством вызовов `next/yield`.</li>
-<li>Генераторы позволяют писать плоский асинхронный код, при помощи библиотки `co`.</li>
-</ul>
-
-Что касается кросс-браузерной поддержки -- она стремительно приближается. Пока же можно использовать генераторы вместе с [Babel](https://babeljs.io). 
-
-[head]
-<style>
-.promise-avatar-example {
-  border-radius: 50%;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-</style>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/co/4.1.0/index.min.js"></script>
-[/head]
-
-
-
-
-
-
-
diff --git a/1-js/10-es-modern/12-generator/genYield2-2.png b/1-js/10-es-modern/12-generator/genYield2-2.png
deleted file mode 100644
index 67484418..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2-2.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/genYield2-2@2x.png b/1-js/10-es-modern/12-generator/genYield2-2@2x.png
deleted file mode 100644
index d6bcf78e..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2-2@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/genYield2-3.png b/1-js/10-es-modern/12-generator/genYield2-3.png
deleted file mode 100644
index ccc92309..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2-3.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/genYield2-3@2x.png b/1-js/10-es-modern/12-generator/genYield2-3@2x.png
deleted file mode 100644
index e4064bb0..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2-3@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/genYield2.png b/1-js/10-es-modern/12-generator/genYield2.png
deleted file mode 100644
index dd29c353..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/genYield2@2x.png b/1-js/10-es-modern/12-generator/genYield2@2x.png
deleted file mode 100644
index 3600cb13..00000000
Binary files a/1-js/10-es-modern/12-generator/genYield2@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-1.png b/1-js/10-es-modern/12-generator/generateSequence-1.png
deleted file mode 100644
index e5182d51..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-1.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-1@2x.png b/1-js/10-es-modern/12-generator/generateSequence-1@2x.png
deleted file mode 100644
index 311a4f69..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-1@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-2.png b/1-js/10-es-modern/12-generator/generateSequence-2.png
deleted file mode 100644
index 622f03a6..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-2.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-2@2x.png b/1-js/10-es-modern/12-generator/generateSequence-2@2x.png
deleted file mode 100644
index e761223e..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-2@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-3.png b/1-js/10-es-modern/12-generator/generateSequence-3.png
deleted file mode 100644
index 81ebadea..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-3.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-3@2x.png b/1-js/10-es-modern/12-generator/generateSequence-3@2x.png
deleted file mode 100644
index 440fd364..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-3@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-4.png b/1-js/10-es-modern/12-generator/generateSequence-4.png
deleted file mode 100644
index a9c7d7a5..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-4.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/generateSequence-4@2x.png b/1-js/10-es-modern/12-generator/generateSequence-4@2x.png
deleted file mode 100644
index f76061df..00000000
Binary files a/1-js/10-es-modern/12-generator/generateSequence-4@2x.png and /dev/null differ
diff --git a/1-js/10-es-modern/12-generator/user.json b/1-js/10-es-modern/12-generator/user.json
deleted file mode 100644
index 32f89971..00000000
--- a/1-js/10-es-modern/12-generator/user.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "iliakan",
-  "isAdmin": true
-}
diff --git a/1-js/10-es-modern/2-let-const/article.md b/1-js/10-es-modern/2-let-const/article.md
deleted file mode 100644
index a3ebaf30..00000000
--- a/1-js/10-es-modern/2-let-const/article.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# Переменные: let и const
-
-В ES-2015 предусмотрены новые способы объявления переменных: через `let` и `const` вместо `var`.
-
-Например:
-```js
-let a = 5;
-```
-
-## let
-
-У объявлений переменной через `let` есть три основных отличия от `var`:
-
-<ol>
-<li>**Область видимости переменной `let` -- блок `{...}`.**
-
-Как мы помним, переменная, объявленная через `var`, видна везде в функции. 
-
-Переменная, объявленная через `let`, видна только в рамках блока `{...}`, в котором объявлена.
-
-Это, в частности, влияет на объявления внутри `if`, `while` или `for`.
-
-Например, переменная через `var`:
-
-```js
-//+ run 
-'use strict';
-
-var apples = 5; 
-
-if (true) {
-  var apples = 10;
-
-  alert(apples); // 10 (внутри блока)
-}
-
-alert(apples); // 10 (снаружи блока то же самое)
-```
-
-В примере выше `apples` -- одна переменная на весь код, которая модифицируется в `if`.
-
-То же самое с `let` будет работать по-другому:
-
-```js
-//+ run 
-'use strict';
-
-let apples = 5; // (*)
-
-if (true) {
-  let apples = 10;
-
-  alert(apples); // 10 (внутри блока)
-}
-
-*!*
-alert(apples); // 5 (снаружи блока значение не изменилось)
-*/!*
-```
-
-Здесь, фактически, две независимые переменные `apples`, одна -- глобальная, вторая -- в блоке `if`.
-
-Заметим, что если объявление `let apples` в первой строке `(*)` удалить, то в последнем `alert` будет ошибка: переменная неопределена:
-
-```js
-//+ run 
-'use strict';
-
-if (true) {
-  let apples = 10;
-
-  alert(apples); // 10 (внутри блока)
-}
-
-*!*
-alert(apples); // ошибка!
-*/!*
-```
-
-
-Это потому что переменная `let` всегда видна именно в том блоке, где объявлена, и не более.
-
-</li>
-<li>**Переменная `let` видна только после объявления.**
-
-Как мы помним, переменные `var` существуют и до объявления. Они равны `undefined`:
-
-```js
-//+ run
-'use strict';
-
-alert(a); // undefined
-
-var a = 5;
-```
-
-С переменными `let` всё проще. До объявления их вообще нет.
-
-Такой доступ приведёт к ошибке:
-```js
-//+ run
-'use strict';
-
-*!*
-alert(a); // ошибка, нет такой переменной
-*/!*
-
-let a = 5;
-```
-
-Заметим также, что переменные `let` нельзя повторно объявлять. То есть, такой код выведет ошибку:
-
-```js
-//+ run
-'use strict';
-
-let x;
-let x; // ошибка: переменная x уже объявлена
-```
-
-Это -- хоть и выглядит ограничением по сравнению с `var`, но на самом деле проблем не создаёт. Например, два таких цикла совсем не конфликтуют:
-```js
-//+ run
-'use strict';
-
-// каждый цикл имеет свою переменную i
-for(let i = 0; i<10; i++) { /* … */ }
-for(let i = 0; i<10; i++) { /* … */ }
-
-alert( i ); // ошибка: глобальной i нет
-```
-
-При объявлении внутри цикла переменная `i` будет видна только в блоке цикла. Она не видна снаружи, поэтому будет ошибка в последнем `alert`.
-
-
-</li>
-<li>**При использовании в цикле, для каждой итерации создаётся своя переменная.**
-
-Переменная `var` -- одна на все итерации цикла и видна даже после цикла:
-
-```js
-//+ run
-for(var i=0; i<10; i++) { /* … */ }
-
-alert(i); // 10
-```
-
-С переменной `let` -- всё по-другому. 
-
-Каждому повторению цикла соответствует своя независимая переменная `let`. Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.
-
-Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче [](/task/make-army).
-
-```js
-//+ run
-'use strict';
-
-function makeArmy() {
-
-  let shooters = [];
-
-  for (*!*let*/!* i = 0; i < 10; i++) {
-    shooters.push(function() {
-      alert( i ); // выводит свой номер
-    });
-  }
-
-  return shooters;
-}
-
-var army = makeArmy();
-
-army[0](); // 0
-army[5](); // 5
-```
-
-Если бы объявление было `var i`, то была бы одна переменная `i` на всю функцию, и вызовы в последних строках выводили бы `10` (подробнее -- см. задачу [](/task/make-army)). 
-
-А выше объявление `let i` создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.
-</li>
-</ol>
-
-## const
-
-Объявление `const` задаёт константу, то есть переменную, которую нельзя менять:
-
-```js
-//+ run
-'use strict';
-
-const apple = 5;
-apple = 10; // ошибка
-```
-
-В остальном объявление `const` полностью аналогично `let`.
-
-## Итого
-
-
-Переменные `let`:
-
-<ul>
-<li>Видны только после объявления и только в текущем блоке.</li>
-<li>Нельзя переобъявлять (в том же блоке).</li>
-<li>При объявлении переменной в цикле `for(let …)` -- она видна только в этом цикле. Причём каждой итерации соответствует своя переменная `let`.</li>
-</ul>
-
-Переменная `const` -- это константа, в остальном -- как `let`.
-
diff --git a/1-js/10-es-modern/3-destructuring/article.md b/1-js/10-es-modern/3-destructuring/article.md
deleted file mode 100644
index cca7483f..00000000
--- a/1-js/10-es-modern/3-destructuring/article.md
+++ /dev/null
@@ -1,324 +0,0 @@
-
-# Деструктуризация
-
-*Деструктуризация* (destructuring assignment) -- это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.
-
-## Массив
-
-Пример деструктуризации массива:
-
-```js
-'use strict';
-
-let [firstName, lastName] = ["Илья", "Кантор"];
-
-alert(firstName); // Илья
-alert(lastName);  // Кантор
-```
-
-При таком присвоении первое значение массива пойдёт в переменную `firstName`, второе -- в `lastName`, а последующие (если есть) -- будут отброшены.
-
-Ненужные элементы массива также можно отбросить, поставив лишнюю запятую:
-
-```js
-//+ run
-'use strict';
-
-*!*
-// первый и второй элементы не нужны
-let [, , title] = "Юлий Цезарь Император Рима".split(" ");
-*/!*
-
-alert(title); // Император
-```
-
-В коде выше первый и второй элементы массива никуда не записались, они были отброшены. Как, впрочем, и все элементы после третьего.
-
-### Оператор "spread"
-
-Если мы хотим получить и последующие значения массива, но не уверены в их числе -- можно добавить ещё один параметр, который получит "всё остальное", при помощи оператора `"..."` ("spread", троеточие):
-
-```js
-//+ run
-'use strict';
-
-*!*
-let [firstName, lastName, ...rest] = "Юлий Цезарь Император Рима".split(" ");
-*/!*
-
-alert(firstName); // Юлий
-alert(lastName);  // Цезарь
-alert(rest);      // Император,Рима (массив из 2х элементов)
-```
-
-Значением `rest` будет массив из оставшихся элементов массива. Вместо `rest` можно использовать и другое имя переменной, оператор здесь -- троеточие. Оно должно стоять только последним элементом в списке слева.
-
-### Значения по умолчанию
-
-Если значений в массиве меньше, чем переменных -- ошибки не будет, просто присвоится `undefined`:
-
-
-```js
-//+ run
-'use strict';
-
-*!*
-let [firstName, lastName] = [];
-*/!*
-
-alert(firstName); // undefined
-```
-
-Впрочем, как правило, в таких случаях задают значение по умолчанию. Для этого нужно после переменной использовать символ `=` со значением, например:
-
-```js
-//+ run
-'use strict';
-
-*!*
-// значения по умолчанию
-let [firstName="Гость", lastName="Анонимный"] = [];
-*/!*
-
-alert(firstName); // Гость
-alert(lastName);  // Анонимный
-```
-
-В качестве значений по умолчанию можно использовать не только примитивы, но и выражения, даже включающие в себя вызовы функций:
-
-```js
-//+ run
-'use strict';
-
-function defaultLastName() {
-  return Date.now() + '-visitor';
-}
-
-*!*
-// lastName получит значение, соответствующее текущей дате:
-let [firstName, lastName=defaultLastName()] = ["Вася"];
-*/!*
-
-alert(firstName); // Вася
-alert(lastName);  // 1436...-visitor
-```
-
-Заметим, что вызов функции `defaultLastName()` для генерации значения по умолчанию будет осуществлён только при необходимости, то есть если значения нет в массиве. 
-
-## Деструктуризация объекта
-
-Деструктуризацию можно использовать и с объектами. При этом мы указываем, какие свойства в какие переменные должны "идти".
-
-Базовый синтаксис:
-```js
-let {var1, var2} = {var1:…, var2…}
-```
-
-Объект справа -- уже существующий, который мы хотим разбить на переменные. А слева -- список переменных, в которые нужно соответствующие свойства записать.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню",
-  width: 100,
-  height: 200
-};
-
-*!*
-let {title, width, height} = options;
-*/!*
-
-alert(title);  // Меню
-alert(width);  // 100
-alert(height); // 200
-```
-
-Как видно, свойства `options.title`, `options.width` и `options.height` автоматически присвоились соответствующим переменным.
-
-Если хочется присвоить свойство объекта в переменную с другим именем, например, чтобы свойство `options.width` пошло в переменную `w`, то можно указать соответствие через двоеточие, вот так:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню",
-  width: 100,
-  height: 200
-};
-
-*!*
-let {width: w, height: h, title} = options;
-*/!*
-
-alert(title);  // Меню
-alert(w);      // 100
-alert(h);      // 200
-```
-
-В примере выше свойство `width` отправилось в переменную `w`, свойство `height` -- в переменную `h`, а `title` -- в переменную с тем же названием. 
-
-Если каких-то свойств в объекте нет, можно указать значение по умолчанию через знак равенства `=`, вот так;
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню"
-};
-
-*!*
-let {width=100, height=200, title} = options;
-*/!*
-
-alert(title);  // Меню
-alert(width);  // 100
-alert(height); // 200
-```
-
-Можно и сочетать одновременно двоеточие и равенство:
-
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню"
-};
-
-*!*
-let {width:w=100, height:h=200, title} = options;
-*/!*
-
-alert(title);  // Меню
-alert(w);      // 100
-alert(h);      // 200
-```
-
-А что, если в объекте больше значений, чем переменных? Можно ли куда-то присвоить "остаток", аналогично массивам?
-
-Такой возможности в текущем стандарте нет. Она планируется в будущем стандарте, и выглядеть она будет примерно так:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню",
-  width: 100,
-  height: 200
-};
-
-*!*
-let {title, ...size} = options;
-*/!*
-
-// title = "Меню"
-// size = { width: 100, height: 200} (остаток)
-```
-
-Этот код будет работать, например, при использовании Babel со включёнными экспериментальными возможностями, но ещё раз заметим, что в текущий стандарт такая возможность не вошла.
-
-[smart header="Деструктуризация без объявления"]
-
-В примерах выше переменные объявлялись прямо перед присваиванием: `let {…} = {…}`. Конечно, можно и без `let`, использовать уже существующие переменные.
-
-Однако, здесь есть небольшой "подвох". В JavaScript, если в основном потоке кода (не внутри другого выражения) встречается `{...}`, то это воспринимается как блок.
-
-Например, можно использовать такой блок для ограничения видимости переменных:
-```js
-//+ run
-'use strict';
-{
-  // вспомогательные переменные, локальные для блока
-  let a = 5;
-  // поработали с ними
-  alert(a); // 5
-  // больше эти переменные не нужны
-}
-alert(a); // ошибка нет такой переменной
-```
-
-Конечно, это бывает удобно, но в данном случае это создаст проблему при деструктуризации:
-
-```js
-let a, b;
-{a, b} = {a:5, b:6}; // будет ошибка, оно посчитает, что {a,b} - блок
-```
-
-Чтобы избежать интерпретации `{a, b}` как блока, нужно обернуть всё присваивание в скобки:
-
-```js
-let a, b;
-({a, b} = {a:5, b:6}); // внутри выражения это уже не блок
-```
-[/smart]
-
-## Вложенные деструктуризации
-
-Если объект или массив содержат другие объекты или массивы, и их тоже хочется разбить на переменные -- не проблема.
-
-Деструктуризации можно как угодно сочетать и вкладывать друг в друга.
-
-В коде ниже `options` содержит подобъект и подмассив. В деструктуризации ниже сохраняется та же структура:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  size: {
-    width: 100,
-    height: 200
-  },
-  items: ["Пончик", "Пирожное"]
-}
-
-let { title="Меню", size: {width, height}, items: [item1, item2] } = options;
-
-// Меню 100 200 Пончик Пирожное
-alert(title);  // Меню
-alert(width);  // 100
-alert(height); // 200
-alert(item1);  // Пончик
-alert(item2);  // Пирожное
-```
-
-Как видно, весь объект `options` корректно разбит на переменные.
-
-
-## Итого
-
-<ul>
-<li>Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.</li>
-<li>Синтаксис:
-```js
-let {prop : varName = default, ...} = object
-```
- 
-Здесь двоеточие `:` задаёт отображение свойства `prop` в переменную `varName`, а равенство `=default` задаёт выражение, которое будет использовано, если значение отсутствует (не указано или `undefined`).
-
-Для массивов имеет значение порядок, поэтому нельзя использовать `:`, но значение по умолчанию -- можно:
-
-```js
-let [var1 = default, var2, ...rest] = array
-```
-
-Объявление переменной в начале конструкции не обязательно. Можно использовать и существующие переменные. Однако при деструктуризации объекта может потребоваться обернуть выражение в скобки.
-</li>
-<li>Вложенные объекты и массивы тоже работают, при деструктуризации нужно лишь сохранить ту же структуру, что и исходный объект/массив.</li>
-</ul>
-
-Как мы увидим далее, деструктуризации особенно пригодятся удобны при чтении объектных параметров функций.
-
-
-
-
-
-
diff --git a/1-js/10-es-modern/4-es-function/article.md b/1-js/10-es-modern/4-es-function/article.md
deleted file mode 100644
index ab0d40e3..00000000
--- a/1-js/10-es-modern/4-es-function/article.md
+++ /dev/null
@@ -1,469 +0,0 @@
-
-# Функции
-
-В функциях основные изменения касаются передачи параметров, плюс введена дополнительная короткая запись через стрелочку `=>`.
-
-## Параметры по умолчанию
-
-Можно указывать параметры по умолчанию через равенство `=`, например:
-
-```js
-//+ run
-function showMenu(title = "Без заголовка", width = 100, height = 200) {
-  alert(`${title} ${width} ${height}`);
-}
-
-showMenu("Меню"); // Меню 100 200
-```
-
-Параметр по умолчанию используется при отсутствующем аргументе или равном `undefined`, например:
-
-```js
-//+ run
-function showMenu(title = "Заголовок", width = 100, height = 200) {
-  alert(`title=${title} width=${width} height=${height}`);
-}
-
-// По умолчанию будут взяты 1 и 3 параметры
-// title=Заголовок width=null height=200
-showMenu(undefined, null); 
-```
-
-При передаче любого значения, кроме `undefined`, включая пустую строку, ноль или `null`, параметр считается переданным, и значение по умолчание не используется.
-
-**Параметры по умолчанию могут быть не только значениями, но и выражениями.**
-
-Например:
-
-```js
-//+ run
-function sayHi(who = getCurrentUser().toUpperCase()) {
-  alert(`Привет, ${who}!`);
-}
-
-function getCurrentUser() {
-  return 'Вася';
-}
-
-sayHi(); // Привет, ВАСЯ!
-```
-
-Заметим, что значение выражения `getCurrentUser().toUpperCase()` будет вычислено, и соответствующие функции вызваны -- лишь в том случае, если это необходимо, то есть когда функция вызвана без параметра.
-
-В частности, выражение по умолчанию не вычисляется при объявлении функции. В примере выше функция `getCurrentUser()` будет вызвана именно в последней строке, так как не передан параметр.
-
-
-## Оператор spread вместо arguments
-
-Чтобы получить массив аргументов, можно использовать оператор `…`, например:
-
-```js
-//+ run
-
-function showName(firstName, lastName, *!*...rest*/!*) {
-  alert(`${firstName} ${lastName} - ${rest}`);
-}
-
-// выведет: Юлий Цезарь - Император,Рима
-showName("Юлий", "Цезарь", "Император", "Рима");
-```
-
-В `rest` попадёт массив всех аргументов, начиная со второго.
-
-Заметим, что `rest` -- настоящий массив, с методами `map`, `forEach` и другими, в отличие от `arguments`.
-
-[warn header="Оператор … должен быть в конце"]
-
-Оператор `…` собирает "все оставшиеся" аргументы, поэтому такое объявление не имеет смысла:
-```js
-function f(arg1, ...rest, arg2) { // arg2 после ...rest ?!
-  // будет ошибка
-}
-```
-Параметр `...rest` должен быть в конце функции.
-[/warn]
-
-
-Выше мы увидели использование `...` для чтения параметров в объявлении функции. Но этот же оператор можно использовать и при вызове функции, для передачи массива параметров как списка, например:
-
-```js
-//+ run
-'use strict';
-
-let numbers = [2, 3, 15];
-
-// Оператор ... в вызове передаст массив как список аргументов
-// Этот вызов аналогичен Math.max(2, 3, 15)
-let max = Math.max(*!*...numbers*/!*);
-
-alert( max ); // 15
-```
-
-Формально говоря, эти два вызова делают одно и то же:
-
-```js
-Math.max(...numbers);
-Math.max.apply(Math, numbers);
-```
-
-Похоже, что первый -- короче и красивее.
-
-## Деструктуризация в параметрах
-
-Если функция получает объект, то она может его тут же разбить в переменные:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню",
-  width: 100,
-  height: 200
-};
-
-*!*
-function showMenu({title, width, height}) {
-*/!*
-  alert(`${title} ${width} ${height}`); // Меню 100 200
-}
-
-showMenu(options);
-```
-
-Можно использовать и более сложную деструктуризацию, с соответствиями и значениями по умолчанию:
-
-```js
-//+ run
-'use strict';
-
-let options = {
-  title: "Меню"
-};
-
-*!*
-function showMenu({title="Заголовок", width:w=100, height:h=200}) {
-*/!*
-  alert(`${title} ${w} ${h}`); 
-}
-
-// объект options будет разбит на переменные
-showMenu(options); // Меню 100 200
-```
-
-Заметим, что в примере выше какой-то аргумент у `showMenu()` обязательно должен быть, чтобы разбить его на переменные.
-
-Если хочется, чтобы функция могла быть вызвана вообще без аргументов -- нужно добавить ей параметр по умолчанию -- уже не внутрь деструктуризации, а в самом списке аргументов:
-
-```js
-//+ run
-'use strict';
-
-function showMenu({title="Заголовок", width:w=100, height:h=200} *!*= {}*/!*) {
-  alert(`${title} ${w} ${h}`); 
-}
-
-showMenu(); // Заголовок 100 200
-```
-
-В коде выше весь объект аргументов по умолчанию равен пустому объекту `{}`, поэтому всегда есть что деструктуризовать.
-
-## Имя "name"
-
-В свойстве `name` у функции находится её имя.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-function f() {} // f.name == "f"
-
-let g = function g() {}; // g.name == "g"
-
-alert(`${f.name} ${g.name}`) // f g
-```
-
-В примере выше показаны Function Declaration и Named Function Expression. В синтаксисе выше довольно очевидно, что у этих функций есть имя `name`. В конце концов, оно указано в объявлении.
-
-Но современный JavaScript идёт дальше, он старается даже анонимным функциям дать разумные имена.
-
-Например, при создании анонимной функции с одновременной записью в переменную или свойство -- её имя равно названию переменной (или свойства).
-
-Например:
-
-```js
-'use strict';
-
-// свойство g.name = "g"
-let g = function() {}; 
-
-let user = {
-  // свойство user.sayHi.name == "sayHi"
-  sayHi: function() { }; 
-}
-```
-
-## Функции в блоке
-
-Объявление функции Function Declaration, сделанное в блоке, видно только в этом блоке.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-if (true) {
-
-  sayHi(); // работает
-
-  function sayHi() { 
-    alert("Привет!");
-  }
-
-}
-sayHi(); // ошибка, функции не существует
-```
-
-То есть, иными словами, такое объявление -- ведёт себя в точности как если бы `let sayHi = function() {…}` было сделано в начале блока.
-
-## Функции через =>
-
-Появился новый синтаксис для задания функций через "стрелку" `=>`.
-
-Его простейший вариант выглядит так:
-```js
-//+ run
-'use strict';
-
-*!*
-let inc = x => x+1;
-*/!*
-
-alert( inc(1) ); // 2
-```
-
-Эти две записи -- примерно аналогичны:
-
-```js
-let inc = x => x+1;
-
-let inc = function(x) { return x + 1; };
-```
-
-Как видно, `"x => x+1"` -- это уже готовая функция. Слева от `=>` находится аргумент, а справа -- выражение, которое нужно вернуть.
-
-Если аргументов несколько, то нужно обернуть их в скобки, вот так:
-
-```js
-//+ run
-'use strict';
-
-*!*
-let sum = (a,b) => a + b;
-*/!*
-
-// аналог с function
-// let inc = function(a, b) { return a + b; };
-
-alert( sum(1, 2) ); // 3
-```
-
-Если нужно задать функцию без аргументов, то также используются скобки, в этом случае -- пустые:
-
-```js
-//+ run
-'use strict';
-
-*!*
-// вызов getTime() будет возвращать текущее время
-let getTime = () => `${new Date().getHours()} : ${new Date().getMinutes()}`;
-*/!*
-
-alert( getTime() ); // текущее время
-```
-
-Когда тело функции достаточно большое, то можно его обернуть в фигурные скобки `{…}`:
-
-
-```js
-//+ run
-'use strict';
-
-*!*
-let getTime = () => {
-  let date = new Date();
-  let hours = date.getHours();
-  let minutes = date.getMinutes();
-  return `${hours}:${minutes}`;
-};
-*/!*
-
-alert( getTime() ); // текущее время
-```
-
-Заметим, что как только тело функции оборачивается в `{…}`, то её результат уже не возвращается автоматически. Такая функция должна делать явный `return`, как в примере выше, если конечно хочет что-либо возвратить.
-
-Функции-стрелки очень удобны в качестве коллбеков, например:
-
-```js
-//+ run
-`use strict`;
-
-let arr = [5, 8, 3];
-
-*!*
-let sorted = arr.sort( (a,b) => a - b ); 
-*/!*
-
-alert(sorted); // 3, 5, 8
-```
-
-Такая запись -- коротка и понятна. Далее мы познакомимся с дополнительными преимуществами использования функций-стрелок для этой цели.
-
-## Функции-стрелки не имеют своего this
-
-Внутри функций-стрелок -- тот же `this`, что и снаружи. 
-
-Это очень удобно в обработчиках событий и коллбэках, например:
-
-```js
-//+ run
-'use strict';
-
-let group = {
-  title: "Наш курс",
-  students: ["Вася", "Петя", "Даша"],
-
-  showList: function() {
-*!*
-    this.students.forEach( 
-      (student) => alert(`${this.title}: ${student}`) 
-    )
-*/!*
-  }
-}
-
-group.showList();
-// Наш курс: Вася
-// Наш курс: Петя
-// Наш курс: Даша
-```
-
-Здесь в `forEach` была использована функция-стрелка, поэтому `this.title` в коллбэке -- тот же, что и во внешней функции `showList`. То есть, в данном случае -- `group.title`.
-
-Если бы в `forEach` вместо функции-стрелки была обычная функция, то была бы ошибка:
-
-```js
-//+ run
-'use strict';
-
-let group = {
-  title: "Наш курс",
-  students: ["Вася", "Петя", "Даша"],
-
-  showList: function() {
-*!*
-    this.students.forEach(function(student) {
-      alert(`${this.title}: ${student}`); // будет ошибка
-    })
-*/!*
-  }
-}
-
-group.showList();
-```
-
-При запуске будет "попытка прочитать свойство `title` у `undefined`", так как `.forEach(f)` при запуске `f` не ставит `this`. То есть, `this` внутри `forEach` будет `undefined`.
-
-[warn header="Функции стрелки нельзя запускать с `new`"]
-Отсутствие у функции-стрелки "своего `this`" влечёт за собой естественное ограничение: такие функции нельзя использовать в качестве конструктора, то есть нельзя вызывать через `new`.
-[/warn]
-
-## Функции-стрелки не имеют своего arguments
-
-В качестве `arguments` используются аргументы внешней "обычной" функции.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-function f() {
-  let showArg = () => alert(arguments[0]);
-  showArg();
-}
-
-f(1); // 1
-```
-
-Вызов `showArg()` выведет `1`, получив его из аргументов функции `f`. Функция-стрелка здесь вызвана без параметров, но это не важно: `arguments` всегда берутся из внешней "обычной" функции.
-
-Сохранение внешнего `this` и `arguments` удобно использовать для форвардинга вызовов и создания декораторов.
-
-Например, декоратор `defer(f, ms)` ниже получает функцию `f` и возвращает обёртку вокруг неё, откладывающую вызов на `ms` миллисекунд:
-
-```js
-//+ run
-'use strict';
-
-*!*
-function defer(f, ms) {
-  return function() {
-    setTimeout(() => f.apply(this, arguments), ms)
-  }
-}
-*/!*
-
-function sayHi(who) { 
-  alert(`Привет, ${who}!`);
-}
-
-let sayHiDeferred = defer(sayHi, 2000);
-sayHiDeferred("Вася"); // Привет, Вася! через 2 секунды
-```
-
-Аналогичная реализация без функции-стрелки выглядела бы так:
-
-```js
-function defer(f, ms) {
-  return function() {
-*!*
-    let args = arguments;
-    let ctx = this; 
-*/!*
-    setTimeout(function() {
-      return f.apply(ctx, args);
-    }, ms);
-  }
-}
-```
-
-В этом коде пришлось создавать дополнительные переменные `args` и `ctx` для передачи внешних аргументов и контекста через замыкание.
-
-
-## Итого
-
-Основные улучшения в функциях:
-<ul>
-<li>Можно задавать параметры по умолчанию, а также использовать деструктуризацию для чтения приходящего объекта.</li>
-<li>Оператор spread (троеточие) в объявлении позволяет функции получать оставшиеся аргументы в массив: `function f(arg1, arg2, ...rest)`.</li>
-<li>Тот же оператор spread в вызове функции позволяет передать её массив как список аргументов (вместо `apply`).</li>
-<li>У функции есть свойство `name`, оно содержит имя, указанное при объявлении функции, либо, если его нет, то имя свойства или переменную, в которую она записана. Есть и некоторые другие ситуации, в которых интерпретатор подставляет "самое подходящее" имя.</li>
-<li>Объявление Function Declaration в блоке `{...}` видно только в этом блоке.</li>
-<li>Появились функции-стрелки: 
-<ul>
-<li>Без фигурных скобок возвращают выражение `expr`: `(args) => expr`.</li>
-<li>С фигурными скобками требуют явного `return`.</li>
-<li>Сохраняют `this` и `arguments` окружающего контекста.</li>
-<li>Не могут быть использованы как конструкторы, с `new`.</li>
-</ul>
-</li>
-</ul>
-
-
-
-
diff --git a/1-js/10-es-modern/5-es-string/article.md b/1-js/10-es-modern/5-es-string/article.md
deleted file mode 100644
index f28c4b8a..00000000
--- a/1-js/10-es-modern/5-es-string/article.md
+++ /dev/null
@@ -1,332 +0,0 @@
-
-# Строки 
-
-Есть ряд улучшений и новых методов для строк.
-
-Начнём с, пожалуй, самого важного.
-
-## Строки-шаблоны
-
-Добавлен новый вид кавычек для строк: 
-```js
-let str = `обратные кавычки`;
-```
-
-Основные отличия от двойных `"…"` и одинарных `'…'` кавычек:
-
-<ul>
-<li>**В них разрешён перевод строки.**
-
-Например:
-```js
-//+ run
-alert(`моя
-  многострочная
-  строка`);
-```
-Заметим, что пробелы и, собственно, перевод строки также входят в строку, и будут выведены.
-</li>
-<li>**Можно вставлять выражения при помощи `${…}`.**
-
-Например:
-```js
-//+ run
-'use strict';
-let apples = 2;
-let oranges = 3;
-
-alert(`${apples} + ${oranges} = ${apples + oranges}`); // 2 + 3 = 5
-```
-
-Как видно, при помощи `${…}` можно вставлять как и значение переменной `${apples}`, так и более сложные выражения, которые могут включать в себя операторы, вызовы функций и т.п. Такую вставку называют "интерполяцией".
-</li>
-</ul>
-
-## Функции шаблонизации
-
-Можно использовать свою функцию шаблонизации для строк.
-
-Название этой функции ставится перед первой обратной кавычкой:
-```js
-let str = func`моя строка`;
-```
-
-Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров `${…}` и сами эти параметры.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-function f(strings, ...values) {
-  alert(JSON.stringify(strings));     // ["Sum of "," + "," =\n ","!"]
-  alert(JSON.stringify(strings.raw)); // ["Sum of "," + "," =\\n ","!"]
-  alert(JSON.stringify(values));      // [3,5,8]
-}
-
-let apples = 3;
-let oranges = 5;
-
-//          |  s[0] | v[0] |s[1]| v[1]  |s[2]  |      v[2]      |s[3] 
-let str = f`Sum of ${apples} + ${oranges} =\n ${apples + oranges}!`;
-```
-
-В примере выше видно, что строка разбивается по очереди на части: "кусок строки" -- "параметр" -- "кусок строки" -- "параметр". 
-
-<ul>
-<li>Участки строки идут в первый аргумент-массив `strings`.</li>
-<li>У этого массива есть дополнительное свойство `strings.raw`. В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в `strings` символ `\n` -- это перевод строки, а в `strings.raw` -- это именно два символа `\n`.</li>
-<li>Дальнейший список аргументов функции шаблонизации -- это значения выражений в `${...}`, в данном случае их три.</li>
-</ul>
-
-[smart header="Зачем `strings.raw`?"]
-В отличие от `strings`, в `strings.raw` содержатся участки строки в "изначально введённом" виде.
-
-То есть, если в строке находится `\n` или `\u1234` или другое особое сочетание символов, то оно таким и останется.
-
-Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна -- например, строка содержит "обычный текст", набранный непрограммистом без учёта спец. символов.
-[/smart]
-
-Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через `strings.raw` -- к оригинально введённому тексту без учёта стандартных спец. символов.
-
-Функция шаблонизации может как-то преобразовать строку и вернуть новый результат. 
-
-В простейшем случае можно просто "склеить" полученные фрагменты в строку:
-
-```js
-//+ run
-'use strict';
-
-// str восстанавливает строку
-function str(strings, ...values) {
-  let str = "";
-  for(let i=0; i<values.length; i++) {
-    str += strings[i];
-    str += values[i];
-  }
-
-  // последний кусок строки 
-  str += strings[strings.length-1];
-  return str;
-}
-
-let apples = 3;
-let oranges = 5;
-
-// Sum of 3 + 5 = 8!
-alert( str`Sum of ${apples} + ${oranges} = ${apples + oranges}!`);
-```
-
-Функция `str` в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку). 
-
-Или можно реализовать интернационализацию. В примере ниже функция `i18n` осуществляет перевод строки. 
-
-Она подбирает по строке вида `"Hello, ${name}!"` шаблон перевода `"Привет, {0}!"` (где `{0}` -- место для вставки параметра) и возвращает переведённый результат со вставленным именем `name`:
-
-```js
-//+ run
-'use strict';
-
-let messages = {
-  "Hello, {0}!": "Привет, {0}!"
-};
-
-function i18n(strings, ...values) {
-  // По форме строки получим шаблон для поиска в messages
-  // На месте каждого из значений будет его номер: {0}, {1}, …
-  let pattern = "";
-  for(let i=0; i<values.length; i++) {
-    pattern += strings[i] + '{' + i + '}';
-  }
-  pattern += strings[strings.length-1];
-  // Теперь pattern = "Hello, {0}!"
-
-  let translated = messages[pattern]; // "Привет, {0}!"
-
-  // Заменит в "Привет, {0}" цифры вида {num} на values[num]
-  return translated.replace(/\{(\d)\}/g, (s, num) => values[num]);
-}
-
-// Пример использования
-*!*
-let name = "Вася";
-
-// Перевести строку
-alert( i18n`Hello, ${name}!` ); // Привет, Вася!
-*/!*
-```
-
-Итоговое использование выглядит довольно красиво, не правда ли?
-
-Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации -- это своего рода "стандартный синтаксический сахар" для упрощения форматирования и парсинга строк.
-
-## Улучшена поддержка юникода
-
-Внутренняя кодировка строк в JavaScript -- это UTF-16, то есть под каждый символ отводится ровно два байта.
-
-Но под всевозможные символы всех языков мира 2 байт не хватает. Поэтому бывает так, что одному символу языка соответствует два юникодных символа (итого 4 байта). Такое сочетание называют "суррогатной парой".
-
-Самый частый пример суррогатной пары, который можно встретить в литературе -- это китайские иероглифы.
-
-Заметим, однако, что не всякий китайский иероглиф -- суррогатная пара. Существенная часть "основного" юникод-диапазона как раз отдана под китайский язык, поэтому некоторые иероглифы -- которые в неё "влезли" -- представляются одним юникод-символом, а те, которые не поместились (реже используемые) -- двумя.
-
-Например:
-
-```js
-//+ run
-alert( '我'.length ); // 1
-alert( '𩷶'.length ); // 2
-```
-
-В тексте выше для первого иероглифа есть отдельный юникод-символ, и поэтому длина строки `1`, а для второго используется суррогатная пара. Соответственно, длина -- `2`.
-
-Китайскими иероглифами суррогатные пары, естественно, не ограничиваются.
-
-Ими представлены редкие математические символы, а также некоторые символы для эмоций, к примеру:
-
-```js
-//+ run
-alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
-alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
-```
-
-В современный JavaScript добавлены методы [String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint) и [str.codePointAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt) -- аналоги `String.fromCharCode` и `str.charCodeAt`, корректно работающие с суррогатными парами.
-
-Например, `charCodeAt` считает суррогатную пару двумя разными символами и возвращает код каждой:
-
-```js
-//+ run
-// как будто в строке два разных символа (на самом деле один)
-alert( '𝒳'.charCodeAt(0) + ' ' + '𝒳'.charCodeAt(1) ); // 55349 56499
-```
-
-...В то время как `codePointAt` возвращает его Unicode-код суррогатной пары правильно:
-
-```js
-//+ run
-// один символ с "длинным" (более 2 байт) unicode-кодом
-alert( '𝒳'.codePointAt(0) ); // 119987
-```
-
-Метод `String.fromCodePoint(code)` корректно создаёт строку из "длинного кода", в отличие от старого `String.fromCharCode(code)`. 
-
-Например:
-
-```js
-//+ run
-// Правильно
-alert( String.fromCodePoint(119987) ); // 𝒳
-// Неверно!
-alert( String.fromCharCode(119987) ); // 풳
-```
-
-Более старый метод `fromCharCode` в последней строке дал неверный результат, так как он берёт только первые два байта от числа `119987` и создаёт символ из них, а остальные отбрасывает.
-
-
-### \u{длинный код}
-
-Есть и ещё синтаксическое улучшение для больших Unicode-кодов. 
-
-В JavaScript-строках давно можно вставлять символы по Unicode-коду, вот так:
-
-```js
-//+ run
-alert( "\u2033" ); // ″, символ двойного штриха
-```
-
-Синтаксис: `\uNNNN`, где `NNNN` -- четырёхзначный шестнадцатиричный код, причём он должен быть ровно четырёхзначным. 
-
-"Лишние" цифры уже не войдут в код, например:
-
-```js
-//+ run
-alert( "\u20331" ); // Два символа: символ двойного штриха ″, а затем 1
-```
-
-Чтобы вводить более длинные коды символов, добавили запись `\u{NNNNNNNN}`, где `NNNNNNNN` -- максимально восьмизначный (но можно и меньше цифр) код.
-
-Например:
-
-```js
-//+ run
-alert( "\u{20331}" ); // 𠌱, китайский иероглиф с этим кодом
-```
-
-### Unicode-нормализация
-
-Во многих языках есть символы, которые получаются как сочетание основного символа и какого-то значка над ним или под ним.
-
-Например, на основе обычного символа `a` существуют символы: `àáâäãåā`. Самые часто встречающиеся подобные сочетания имеют отдельный юникодный код. Но отнюдь не все.
-
-Для генерации произвольных сочетаний используются несколько юникодных символов: основа и один или несколько значков.
-
-Например, если после символа `S` идёт символ "точка сверху" (код `\u0307`), то показано это будет как "S с точкой сверху" `Ṡ`. 
-
-Если нужен ещё значок над той же буквой (или под ней) -- без проблем. Просто добавляем соответствующий символ.
-
-К примеру, если добавить символ "точка снизу" (код `\u0323`), то будет "S с двумя точками сверху и снизу" `Ṩ` .
-
-Пример этого символа в JavaScript-строке:
-
-```js
-//+ run
-alert("S\u0307\u0323"); // Ṩ
-```
-
-Такая возможность добавить произвольной букве нужные значки, с одной стороны, необходима, а с другой стороны -- возникает проблемка: можно представить одинаковый с точки зрения визуального отображения и интерпретации символ -- разными сочетаниями Unicode-кодов.
-
-Вот пример:
-```js
-//+ run
-alert("S\u0307\u0323"); // Ṩ
-alert("S\u0323\u0307"); // Ṩ
-
-alert( "S\u0307\u0323" == "S\u0323\u0307" ); // false
-```
-
-В первой строке после основы `S` идёт сначала значок "верхняя точка", а потом -- нижняя, во второй -- наоборот. По кодам строки не равны друг другу. Но символ задают один и тот же.
-
-
-С целью разрешить эту ситуацию, существует *юникодная нормализация*, при которой строки приводятся к единому, "нормальному", виду.
-
-В современном JavaScript это делает метод [str.normalize()](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/normalize).
-
-```js
-//+ run
-alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true
-```
-
-Забавно, что в данной конкретной ситуации `normalize()` приведёт последовательность из трёх символов к одному: [\u1e68 (S с двумя точками)](http://www.fileformat.info/info/unicode/char/1e68/index.htm).
-
-```js
-//+ run
-alert( "S\u0307\u0323".normalize().length ); // 1, нормализовало в один символ
-alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
-```
-
-Это, конечно, не всегда так, просто в данном случае оказалось, что именно такой символ в юникоде уже есть. Если добавить значков, то нормализация уже даст несколько символов.
-
-Для большинства практических задач информации, данной выше, должно быть вполне достаточно, но если хочется более подробно ознакомиться с вариантами и правилами нормализации -- они описаны в приложении к стандарту юникод [Unicode Normalization Forms](http://www.unicode.org/reports/tr15/). 
-
-## Полезные методы
-
-Добавлены ряд полезных методов общего назначения:
-
-<ul>
-<li>[str.includes(s)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) -- проверяет, включает ли одна строка в себя другую, возвращает `true/false`.</li>
-<li>[str.endsWith(s)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) -- возвращает `true`, если строка `str` заканчивается подстрокой `s`.</li>
-<li>[str.startsWith(s)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith) -- возвращает `true`, если строка `str` начинается со строки `s`.</li>
-<li>[str.repeat(times)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat) -- повторяет строку `str` `times` раз.</li>
-</ul>
-
-Конечно, всё это можно было сделать при помощи других встроенных методов, но новые методы более удобны.
-
-## Итого
-
-Улучшения:
-<ul>
-<li>Строки-шаблоны -- для удобного задания строк (многострочных, с переменными), плюс возможность использовать функцию шаблонизации для самостоятельного форматирования.</li>
-<li>Юникод -- улучшена работа с суррогатными парами.</li>
-<li>Полезные методы для проверок вхождения одной строки в другую.</li>
-</ul>
\ No newline at end of file
diff --git a/1-js/10-es-modern/6-es-object/article.md b/1-js/10-es-modern/6-es-object/article.md
deleted file mode 100644
index d298c03b..00000000
--- a/1-js/10-es-modern/6-es-object/article.md
+++ /dev/null
@@ -1,368 +0,0 @@
-
-# Объекты и прототипы
-
-В этом разделе мы рассмотрим нововведения, которые касаются именно объектов.
-
-По классам -- чуть позже, в отдельном разделе, оно того заслуживает.
-
-## Короткое свойство
-
-Зачастую у нас есть переменные, например, `name` и `isAdmin`, и мы хотим использовать их в объекте.
-
-При объявлении объекта в этом случае достаточно указать только имя свойства, а значение будет взято из переменной с таким именем.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let name = "Вася";
-let isAdmin = true;
-
-*!*
-let user = {
-  name, 
-  isAdmin
-};
-*/!*
-alert( JSON.stringify(user) ); // {"name": "Вася", "isAdmin": true}
-```
-
-
-## Вычисляемые свойства
-
-В качестве имени свойства можно использовать выражение, например:
-
-```js
-//+ run
-'use strict';
-
-let propName = "firstName";
-
-let user = {
-*!*
-  [propName]: "Вася"
-*/!*
-};
-
-alert( user.firstName ); // Вася
-```
-
-Или даже так:
-
-```js
-//+ run
-'use strict';
-
-let a = "Мой ";
-let b = "Зелёный ";
-let c = "Крокодил";
-
-let user = {
-*!*
-  [(a + b + c).toLowerCase()]: "Вася"
-*/!*
-};
-
-alert( user["мой зелёный крокодил"] ); // Вася
-```
-
-
-## Геттер-сеттер для прототипа
-
-В ES5 для прототипа был метод-геттер:
-<ul>
-<li>`Object.getPrototypeOf(obj)`</li>
-</ul>
-
-В ES-2015 также добавился сеттер:
-<ul>
-<li>`Object.setPrototypeOf(obj, newProto)`</li>
-</ul>
-
-...А также "узаконено" свойство `__proto__`, которое даёт прямой доступ к прототипу. Его, в качестве "нестандартного", но удобного способа работы с прототипом реализовали почти все браузеры (кроме IE10-), так что было принято решение добавить его в стандарт.
-
-## Object.assign
-
-Функция `Object.assign` получает список объектов и копирует в первый `target` свойства из остальных.
-
-Синтаксис:
-```js
-Object.assign(target, src1, src2...)
-```
-
-При этом последующие свойства перезаписывают предыдущие.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let user = { name: "Вася" };
-let visitor = { isAdmin: false, visits: true };
-let admin = { isAdmin: true };
-
-Object.assign(user, visitor, admin);
-
-// user <- visitor <- admin
-alert( JSON.stringify(user) ); // user: Вася, visits: true, isAdmin: true
-```
-
-Его также можно использовать для 1-уровневого клонирования объекта:
-
-```js
-'use strict';
-
-let user = { name: "Вася", isAdmin: false };
-
-*!*
-// clone = пустой объект + все свойства user
-let clone = Object.assign({}, user);
-*/!*
-```
-
-
-## Object.is(value1, value2)
-
-Новая функция для проверки равенства значений.
-
-Возвращает `true`, если значения `value1` и `value2` равны, иначе `false`.
-
-Она похожа на обычное строгое равенство `===`, но есть отличия:
-
-```js
-//+ run
-
-// Сравнение +0 и -0
-alert( Object.is(+0, -0)); // false
-alert( +0 === -0 );        // true
-
-// Сравнение с NaN
-alert( Object.is(NaN, NaN) ); // true
-alert( NaN === NaN );         // false
-```
-
-Отличия эти в большинстве ситуаций некритичны, так что непохоже, чтобы эта функция вытеснила обычную проверку `===`. Что интересно -- этот алгоритм сравнения, который называется [SameValue](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-samevalue), применяется во внутренних реализациях различных методов современного стандарта.
-
-
-## Методы объекта
-
-Долгое время в JavaScript термин "метод объекта" был просто альтернативным названием для свойства-функции.
-
-Теперь это уже не так, добавлены именно "методы объекта", которые, по сути, являются свойствами-функциями, привязанными к объекту. 
-
-Их особенности:
-
-<ol>
-<li>Более короткий синтаксис объявления.</li>
-<li>Наличие в методах специального внутреннего свойства `[[HomeObject]]` ("домашний объект"), ссылающегося на объект, которому метод принадлежит. Мы посмотрим его использование чуть дальше.</li>
-</ol>
-
-Для объявления метода вместо записи `"prop: function() {…}"` нужно написать просто `"prop() { … }"`.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let name = "Вася";
-let user = {
-  name,
-*!*
-  // вместо "sayHi: function() {" пишем "sayHi() {" 
-  sayHi() { 
-    alert(this.name);
-  }
-*/!*
-};
-
-user.sayHi(); // Вася
-```
-
-Как видно, для создания метода нужно писать меньше букв. Что же касается вызова -- он ничем не отличается от обычной функции. На данном этапе можно считать, что "метод" -- это просто сокращённый синтаксис для свойства-функции. Дополнительные возможности, которые даёт такое объявление, мы рассмотрим позже.
-
-Также методами станут объявления геттеров `get prop()` и сеттеров `set prop()`:
-
-```js
-//+ run
-'use strict';
-
-let name = "Вася", surname="Петров";
-let user = {
-  name,
-  surname,
-  get fullName() {
-    return `${name} ${surname}`;
-  }
-};
-
-alert( user.fullName ); // Вася Петров
-```
-
-Можно задать и метод с вычисляемым названием:
-
-```js
-//+ run
-'use strict';
-
-let methodName = "getFirstName";
-
-let user = {
-  // в квадратных скобках может быть любое выражение, 
-  // которое должно вернуть название метода
-  [methodName]() {  // вместо [methodName]: function() {
-    return "Вася";
-  }
-};
-
-alert( user.getFirstName() ); // Вася
-```
-
-Итак, мы рассмотрели синтаксические улучшения. Если коротко, то не надо писать слово "function". Теперь перейдём к другим отличиям.
-
-## super
-
-В ES-2015 появилось новое ключевое слово `super`. Оно предназначено только для использования в методах объекта.
-
-Вызов `super.parentProperty` позволяет из метода объекта получить свойство его прототипа.
-
-Например, в коде ниже `rabbit` наследует от `animal`. 
-
-Вызов `super.walk()` из метода объекта `rabbit` обращается к `animal.walk()`:
-
-```js
-//+ run
-'use strict';
-
-let animal = { 
-  walk() { 
-    alert("I'm walking");
-  }
-};
-
-let rabbit = { 
-  __proto__: animal,
-  walk() {
-*!*
-    alert(super.walk); // walk() { … }
-    super.walk(); // I'm walking
-*/!*
-  }
-};
-
-rabbit.walk();
-```
-
-Как правило, это используется в [классах](/class), которые мы рассмотрим в следующем разделе, но важно понимать, что "классы" здесь на самом деле не при чём. Свойство `super` работает через прототип, на уровне методов объекта.
-
-При обращении через `super` используется `[[HomeObject]]` текущего метода, и от него берётся `__proto__`. Поэтому `super` работает только внутри методов.
-
-В частности, если переписать этот код, оформив `rabbit.walk` как обычное свойство-функцию, то будет ошибка:
-
-```js
-//+ run
-'use strict';
-
-let animal = { 
-  walk() { 
-    alert("I'm walking");
-  }
-};
-
-let rabbit = { 
-  __proto__: animal,
-*!*
-  walk: function() { // Надо: walk() {
-    super.walk(); // Будет ошибка!
-  }
-*/!*
-};
-
-rabbit.walk();
-```
-
-Ошибка возникнет, так как `rabbit.walk` теперь обычная функция, и не имеет `[[HomeObject]]`. В ней не работает `super`.
-
-Исключением из этого правила являются функции-стрелки. В них используется `super` внешней функции. Например, здесь функция-стрелка в `setTimeout` берёт внешний `super`:
-
-
-```js
-//+ run
-'use strict';
-
-let animal = { 
-  walk() { 
-    alert("I'm walking");
-  }
-};
-
-let rabbit = { 
-  __proto__: animal,
-  walk() {
-*!*
-    setTimeout(() => super.walk()); // I'm walking
-*/!*
-  }
-};
-
-rabbit.walk();
-```
-
-Ранее мы говорили о том, что у функций-стрелок нет своего `this`, `arguments`: они используют те, которые во внешней функции. Теперь к этому списку добавился ещё и `super`.
-
-[smart header="Свойство `[[HomeObject]]` -- не изменяемое"]
-
-При создании метода -- он привязан к своему объекту навсегда. Технически можно даже скопировать его и запустить отдельно, и `super` продолжит работать:
-
-```js
-//+ run
-'use strict';
-
-let animal = { 
-  walk() { alert("I'm walking"); }
-};
-
-let rabbit = { 
-  __proto__: animal,
-  walk() {
-    super.walk();
-  }
-};
-
-let walk = rabbit.walk; // скопируем метод в переменную
-*!*
-walk(); // вызовет animal.walk()
-// I'm walking
-*/!*
-```
-
-В примере выше метод `walk()` запускается отдельно от объекта, но всё равно сохраняется через `super` доступ к его прототипу, благодаря `[[HomeObject]]`. 
-
-Это -- скорее технический момент, так как методы объекта, всё же, предназначены для вызова в контексте этого объекта. В частности, правила для `this` в методах -- те же, что и для обычных функций. В примере выше при вызове `walk()` без объекта `this` будет `undefined`. 
-[/smart]
-
-## Итого 
-
-Улучшения в описании свойств:
-<ul>
-<li>Запись `name: name` можно заменить на просто `name`</li>
-<li>Если имя свойства находится в переменной или задано выражением `expr`, то его можно указать в квадратных скобках `[expr]`.</li>
-<li>Свойства-функции можно оформить как методы: `"prop: function() {"` -> `"prop() {"`.</li>
-</ul>
-
-В методах работает обращение к свойствам прототипа через `super.parentProperty`.
-
-Для работы с прототипом:
-<ul>
-<li>`Object.setPrototypeOf(obj, proto)` -- метод для установки прототипа.</li>
-<li>`obj.__proto__` -- ссылка на прототип.</li>
-</ul>
-
-Дополнительно:
-<ul>
-<li>Метод `Object.assign(target, src1, src2...)` -- копирует свойства из всех аргументов в первый объект.</li>
-<li>Метод `Object.is(value1, value2)` проверяет два значения на равенство. В отличие от `===` считает `+0` и `-0` разными числами. А также считает, что `NaN` равно самому себе.</li>
-</ul>
diff --git a/1-js/10-es-modern/7-es-class/article.md b/1-js/10-es-modern/7-es-class/article.md
deleted file mode 100644
index 8ce0f71b..00000000
--- a/1-js/10-es-modern/7-es-class/article.md
+++ /dev/null
@@ -1,382 +0,0 @@
-
-# Классы 
-
-В современном JavaScript появился новый, "более красивый" синтаксис для классов. 
-
-Новая конструкция `class` -- удобный "синтаксический сахар" для задания конструктора вместе с прототипом.
-
-## Class
-
-Синтаксис для классов выглядит так:
-
-```js
-class Название [extends Родитель]  {
-  constructor
-  методы
-}
-```
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-class User {
-  
-  constructor(name) {
-    this.name = name;
-  }
-
-  sayHi() {
-    alert(this.name);
-  }
-
-}
-
-let user = new User("Вася");
-user.sayHi(); // Вася
-```
-
-Функция `constructor` запускается при создании `new User`, остальные методы -- записываются в `User.prototype`.
-
-Это объявление примерно аналогично такому:
-
-```js
-function User(name) {
-  this.name = name;
-}
-
-User.prototype.sayHi = function() {
-  alert(this.name);
-};
-```
-
-В обоих случаях `new User` будет создавать объекты. Метод `sayHi` -- также в обоих случаях находится в прототипе.
-
-Но при объявлении через `class` есть и ряд отличий:
-
-<ul>
-<li>`User` нельзя вызывать без `new`, будет ошибка.</li>
-<li>Объявление класса с точки зрения области видимости ведёт себя как `let`. В частности, оно видно только текущем в блоке и только в коде, который находится ниже объявления (Function Declaration видно и до объявления).</li>
-</ul>
-
-Методы, объявленные внутри `class`, также имеют ряд особенностей:
-
-<ul>
-<li>Метод `sayHi` является именно методом, то есть имеет доступ к `super`.</li>
-<li>Все методы класса работают в режиме `use strict`, даже если он не указан.</li>
-<li>Все методы класса не перечислимы. То есть в цикле `for..in` по объекту их не будет.</li>
-</ul>
-
-## Class Expression
-
-Так же, как и Function Expression, классы можно задавать "инлайн", в любом выражении и внутри вызова функции.
-
-Это называется Class Expression:
-
-```js
-//+ run
-'use strict';
-
-let User = class {
-  sayHi() { alert('Привет!'); }
-};
-
-new User().sayHi();
-```
-
-В примере выше у класса нет имени, что один-в-один соответствует синтаксису функций. Но имя можно дать. Тогда оно, как и в Named Function Expression, будет доступно только внутри класса:
-
-
-```js
-//+ run
-'use strict';
-
-let SiteGuest = class User {
-  sayHi() { alert('Привет!'); }
-};
-
-new SiteGuest().sayHi(); // Привет
-*!*
-new User(); // ошибка
-*/!*
-```
-
-В примере выше имя `User` будет доступно только внутри класса и может быть использовано, например для создания новых объектов данного типа.
-
-Наиболее очевидная область применения этой возможности -- создание вспомогательного класса прямо при вызове функции. 
-
-Например, функция `createModel` в примере ниже создаёт объект по классу и данным, добавляет ему `_id` и пишет в "реестр" `allModels`:
-
-```js
-//+ run
-'use strict';
-
-let allModels = {};
-
-function createModel(Model, ...args) {
-  let model = new Model(...args);
-
-  model._id = Math.random().toString(36).slice(2);
-  allModels[model._id] = model;
-
-  return model;
-}
-
-let user = createModel(class User {
-  constructor(name) {
-    this.name = name;
-  }
-  sayHi() {
-    alert(this.name);
-  }
-}, "Вася");
-
-user.sayHi(); // Вася
-
-alert( allModels[user._id].name ); // Вася
-```
-
-## Геттеры, сеттеры и вычисляемые свойства
-
-В классах, как и в обычных объектах, можно объявлять геттеры и сеттеры через `get/set`, а также использовать `[…]` для свойств с вычисляемыми именами:
-
-```js
-//+ run
-'use strict';
-
-class User {
-  constructor(firstName, lastName) {
-    this.firstName = firstName;
-    this.lastName = lastName;
-  }
-
-*!*
-  // геттер
-*/!*
-  get fullName() {
-    return `${this.firstName} ${this.lastName}`;
-  }
-
-*!*
-  // сеттер
-*/!*
-  set fullName(newValue) {
-    [this.firstName, this.lastName] = newValue.split(' ');
-  }
-
-*!*
-  // вычисляемое название метода
-*/!* 
-  ["test".toUpperCase()]: true
-
-};
-
-let user = new User("Вася", "Пупков");
-alert( user.fullName ); // Вася Пупков
-user.fullName = "Иван Петров";
-alert( user.fullName ); // Иван Петров
-alert( user.TEST ); // true
-```
-
-При чтении `fullName` будет вызван метод `get fullName()`, при присвоении -- метод `set fullName` с новым значением.
-
-[warn header="`class` не позволяет задавать свойства-значения"]
-
-В синтаксисе классов, как мы видели выше, можно создавать методы. Они будут записаны в прототип, как например `User.prototype.sayHi`.
-
-Однако, нет возможности задать в прототипе обычное значение (не функцию), такое как `User.prototype.key = "value"`.
-
-Конечно, никто не мешает после объявления класса в прототип дописать подобные свойства, однако предполагается, что в прототипе должны быть только методы.
-
-Если свойство-значение, всё же, необходимо, то, можно создать геттер, который будет нужное значение возвращать.
-[/warn]
-
-
-## Статические свойства
-
-Класс, как и функция, является объектом. Статические свойства класса `User` -- это свойства непосредственно `User`, то есть доступные из него "через точку".
-
-Для их объявления используется ключевое слово `static`.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-class User {
-  constructor(firstName, lastName) {
-    this.firstName = firstName;
-    this.lastName = lastName;
-  }
-
-*!*
-  static createGuest() {
-    return new User("Гость", "Сайта");
-  }
-*/!*
-};
-
-let user = User.createGuest();
-
-alert( user.firstName ); // Гость
-
-alert( User.createGuest ); // createGuest ... (функция)
-```
-
-Как правило, они используются для операций, не требующих наличия объекта, например -- для фабричных, как в примере выше, то есть как альтернативные варианты конструктора. Или же, можно добавить метод `User.compare`, который будет сравнивать двух пользователей для целей сортировки.
-
-Также статическими удобно делать константы:
-
-```js
-//+ run
-'use strict';
-
-class Menu {
-  static get elemClass() {
-    return "menu"
-  }
-}
-
-alert( Menu.elemClass ); // menu
-```
-
-## Наследование
-
-Синтаксис:
-```js
-class Child extends Parent { 
-  ...
-}
-```
-
-Посмотрим, как это выглядит на практике. В примере ниже объявлено два класса: `Animal` и наследующий от него `Rabbit`:
-
-```js
-//+ run
-'use strict';
-
-class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-
-  walk() {
-    alert("I walk: " + this.name);
-  }
-}
-
-*!*
-class Rabbit extends Animal {
-*/!*
-  walk() {
-    super.walk();
-    alert("...and jump!");
-  }
-}
-
-new Rabbit("Вася").walk(); 
-// I walk: Вася
-// and jump!
-```
-
-Как видим, в `new Rabbit` доступны как свои методы, так и (через `super`) методы родителя.
-
-Это потому, что при наследовании через `extends` формируется стандартная цепочка прототипов: методы `Rabbit` находятся в `Rabbit.prototype`, методы `Animal` -- в `Animal.prototype`, и они связаны через `__proto__`:
-
-```js
-//+ run
-'use strict';
-
-class Animal { }
-class Rabbit extends Animal { }
-
-alert( Rabbit.prototype.__proto__ == Animal.prototype ); // true
-```
-
-Как видно из примера выше, методы родителя (`walk`) можно переопределить в наследнике. При этом для обращения к родительскому методу используют `super.walk()`.
-
-Немного особая история -- с конструктором.
-
-Конструктор `constructor` родителя наследуется автоматически. То есть, если в потомке не указан свой `constructor`, то используется родительский. В примере выше `Rabbit`, таким образом, использует `constructor` от `Animal`.
-
-Если же у потомка свой `constructor`, то чтобы в нём вызвать конструктор родителя -- используется синтаксис `super()` с аргументами для родителя.
-
-Например, вызовем конструктор `Animal` в `Rabbit`:
-
-```js
-//+ run
-'use strict';
-
-class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-
-  walk() {
-    alert("I walk: " + this.name);
-  }
-}
-
-class Rabbit extends Animal {
-*!*
-  constructor() {
-    // вызвать конструктор Animal с аргументом "Кроль"
-    super("Кроль"); // то же, что и Animal.call(this, "Кроль")
-  }
-*/!*
-}
-
-new Rabbit().walk(); // I walk: Кроль
-```
-
-Для такого вызова есть небольшие ограничения:
-<ul>
-<li>Вызвать конструктор родителя можно только изнутри конструктора потомка. В частности, `super()` нельзя вызвать из произвольного метода.</li>
-<li>В конструкторе потомка мы обязаны вызвать `super()` до обращения к `this`. До вызова `super` не существует `this`, так как по спецификации в этом случае именно `super` инициализует `this`.</li>
-</ul>
-
-Второе ограничение выглядит несколько странно, поэтому проиллюстрируем его примером:
-
-```js
-//+ run
-'use strict';
-
-class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-class Rabbit extends Animal {
-*!*
-  constructor() {
-    alert(this); // ошибка, this не определён!
-    // обязаны вызвать super() до обращения к this
-    super();
-    // а вот здесь уже можно использовать this
-  }
-*/!*
-}
-
-new Rabbit();
-```
-
-
-## Итого
-
-<ul>
-<li>Классы можно объявлять как в основном потоке кода, так и "инлайн", по аналогии с Function Declaration и Expression.</li>
-<li>В объявлении классов можно использовать методы, геттеры/сеттеры и вычислимые названия методов.</li>
-<li>При наследовании вызов конструктора родителя осуществлятся через `super(...args)`, вызов родительских методов -- через `super.method(...args)`.</li>
-</ul>
-
-Концепция классов, которая после долгих обсуждений получилась в стандарте EcmaScript, носит название "максимально минимальной". То есть, в неё вошли только те возможности, которые уж точно необходимы.
-
-В частности, не вошли "приватные" и "защищённые" свойства. То есть, все свойства и методы класса технически доступны снаружи. Возможно, они появятся в будущих редакциях стандарта.
-
-
-
-
diff --git a/1-js/10-es-modern/8-symbol/article.md b/1-js/10-es-modern/8-symbol/article.md
deleted file mode 100644
index 0e89bb9b..00000000
--- a/1-js/10-es-modern/8-symbol/article.md
+++ /dev/null
@@ -1,210 +0,0 @@
-
-# Тип данных Symbol
-
-Новый примитивный тип данных Symbol служит для создания уникальных идентификаторов.
-
-Мы вначале рассмотрим объявление и особенности символов, а затем -- их использование.
-
-## Объявление
-
-Синтаксис:
-```js
-let sym = Symbol();
-```
-
-Обратим внимание, не `new Symbol`, а просто `Symbol`, так как это -- примитив.
-
-У символов есть и соответствующий `typeof`:
-
-```js
-//+ run
-'use strict';
-
-let sym = Symbol();
-alert( typeof sym ); // symbol
-```
-
-
-Каждый символ -- уникален. У функции `Symbol` есть необязательный аргумент "имя символа". Можно его использовать для описания символа, в целях отладки:
-
-```js
-//+ run
-'use strict';
-
-let sym = Symbol("name");
-alert( sym.toString() ); // Symbol(name)
-```
-
-...Но при этом если у двух символов одинаковое имя, то это не значит, что они равны:
-
-```js
-//+ run
-alert( Symbol("name") == Symbol("name") ); // false
-```
-
-Если хочется из разных частей программы использовать именно одинаковый символ, то можно передавать между ними объект символа или же -- использовать "глобальные символы" и "реестр глобальных символов", которые мы рассмотрим далее.
-
-## Глобальные символы
-
-Существует "глобальный реестр" символов, который позволяет, при необходимости, разделять символы между частями программы.
-
-Для чтения (или создания, при отсутствии) "глобального" символа служит вызов `Symbol.for(имя)`.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-// создание символа в реестре
-let name = Symbol.for("name");
-
-// символ уже есть, чтение из реестра
-alert( Symbol.for("name") == name ); // true
-```
-
-Вызов `Symbol.for` возвращает символ по имени. Обратным для него является вызов `Symbol.keyFor(sym)` позволяет получить по глобальному символу его имя:
-
-
-```js
-//+ run
-'use strict';
-
-// создание символа в реестре
-let name = Symbol.for("name");
-
-// получение имени символа
-alert( Symbol.keyFor(name) ); // name
-```
-[warn header="`Symbol.keyFor` возвращает `undefined`, если символ не глобальный"]
-Заметим, что `Symbol.keyFor` работает *только для глобальных символов*, для остальных будет возвращено `undefined`:
-
-```js
-//+ run
-'use strict';
-
-alert( Symbol.keyFor(Symbol.for("name")) ); // name, глобальный
-alert( Symbol.keyFor(Symbol("name2")) ); // undefined, обычный символ
-```
-
-Таким образом, имя символа, если этот символ не глобальный, не имеет особого применения, оно полезно лишь в целях вывода и отладки.
-[/warn]
-
-## Использование символов
-
-Символы можно использовать в качестве имён для свойств объекта, вот так:
-
-```js
-//+ run
-'use strict';
-
-let isAdmin = Symbol("isAdmin");
-
-let user = {
-  name: "Вася",
-  [isAdmin]: true
-};
-
-alert(user[isAdmin]); // true
-```
-
-Особенность символов -- в том, что если в объект записать свойство-символ, то оно не участвует в итерации:
-
-```js
-//+ run
-'use strict';
-
-let user = {
-  name: "Вася",
-  age: 30,
-  [Symbol.for("isAdmin")]: true
-};
-
-// в цикле for..in также не будет символа
-alert( Object.keys(user) ); // name, age
-
-// доступ к свойству через глобальный символ — работает
-alert( user[Symbol.for("isAdmin")] );
-```
-
-Кроме того, свойство-символ недоступно, если обратиться к его названию: `user.isAdmin` не существует.
-
-Зачем всё это, почему не просто использовать строки?
-
-Резонный вопрос. На ум могут прийти соображения производительности, так как символы -- это по сути специальные идентификаторы, они компактнее, чем строка. Но при современных оптимизациях объектов это редко имеет значение.
-
-Самое широкое применение символов предусмотрено внутри самого стандарта JavaScript. В современном стандарте есть много системных символов. Их список есть в спецификации, в таблице [Well-known Symbols](http://www.ecma-international.org/ecma-262/6.0/index.html#table-1). В спецификации принято символы для краткости обозначать их как '@@имя', например `@@iterator`, но доступны они как свойства `Symbol`.
-
-Например:
-<ul>
-<li>`Symbol.toPrimitive` -- идентификатор для свойства, задающего функцию преобразования объекта в примитив.</li>
-<li>`Symbol.iterator` -- идентификатор для свойства, задающего функцию итерации по объекту.</li>
-<li>...и т.п.</li>
-</ul>
-
-**Мы легко поймём смысл введения нового типа "символ", если поставим себя на место создателей языка JavaScript.**
-
-Допустим, в новом стандарте нам надо добавить к объекту "особый" функционал, например, функцию, которая задаёт преобразование объекта к примитиву. Как `obj.toString`, но для преобразования в примитивы.
-
-Мы ведь не можем просто сказать, что "свойство obj.toPrimitive теперь будет задавать преобразование к примитиву и автоматически вызываться в таких-то ситуациях". Это опасно. Мы не можем так просто взять и придать особый смысл свойству. Мало ли, вполне возможно, что свойство с таким именем уже используется в существующем коде, и если сделать его особым, то он сломается.
-
-Нельзя просто взять и зарезервировать какие-то свойства существующих объектов для нового функционала.
-
-Поэтому ввели целый тип "символы". Их можно использовать для задания таких свойств, так как они:
-<ul>
-<li>а) уникальны,</li>
-<li>б) не участвуют в циклах,</li>
-<li>в) заведомо не сломают старый код, который о них слыхом не слыхивал.</li>
-</ul>
-
-Продемонстрируем отсутствие конфликта для нового системного свойства `Symbol.iterator`:
-
-```js
-//+ run
-'use strict';
-
-let obj = { 
-  iterator: 1, 
-  [Symbol.iterator]() {}
-}
-
-alert(obj.iterator); // 1
-alert(obj[Symbol.iterator]) // function, символ не конфликтует
-```
-
-Выше мы использовали системный символ `Symbol.iterator`, поскольку он один из самых широко поддерживаемых. Мы подробно разберём его смысл в главе про [итераторы](/iterator), пока же -- это просто пример символа.
-
-Чтобы получить все символы объекта, есть особый вызов [Object.getOwnPropertySymbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols).
-
-Эта функция возвращает все символы в объекте (и только их). Заметим, что старая функция `getOwnPropertyNames` символы не возвращает, что опять же гарантирует отсутствие конфликтов со старым кодом.
-
-```js
-//+ run
-'use strict';
-
-let obj = { 
-  iterator: 1, 
-  [Symbol.iterator]: function() {}
-}
-
-// один символ в объекте
-alert( Object.getOwnPropertySymbols(obj) ); // Symbol(Symbol.iterator)
-
-// и одно обычное свойство
-alert( Object.getOwnPropertyNames(obj) ); // iterator
-```
-
-## Итого
-
-<ul>
-<li>Символы -- новый примитивный тип, предназначенный для уникальных идентификаторов.</li>
-<li>Все символы уникальны, символы с одинаковым именем не равны друг другу.</li>
-<li>Существует глобальный реестр символов, доступных через метод `Symbol.for(name)`. Для глобального символа можно получить имя вызовом и `Symbol.keyFor(sym)`.</li>
-</ul>
-
-Основная область использования символов -- это системные свойства объектов, которые задают разные аспекты их поведения. Поддержка у них пока небольшая, но она растёт. Системные символы позволяют разработчикам стандарта добавлять новые "особые" свойства объектов, при этом не резервируя соответствующие строковые значения.
-
-Системные символы доступны как свойства функции `Symbol`, например `Symbol.iterator`.
-
-Мы можем создавать и свои символы, использовать их в объектах. Записывать их как свойства `Symbol`, разумеется, нельзя, если нужен глобально доступный символ, то используется `Symbol.for(имя)`.
-
diff --git a/1-js/10-es-modern/9-iterator/article.md b/1-js/10-es-modern/9-iterator/article.md
deleted file mode 100644
index 4d7e50db..00000000
--- a/1-js/10-es-modern/9-iterator/article.md
+++ /dev/null
@@ -1,230 +0,0 @@
- 
-# Итераторы
-
-В современный JavaScript добавлена новая концепция "итерируемых" (iterable) объектов.
-
-Итерируемые или, иными словами, "перебираемые" объекты -- это те, содержимое которых можно перебрать в цикле.
-
-Например, перебираемым объектом является массив. Но не только он. В браузере существует множество объектов, которые не являются массивами, но содержимое которых можно перебрать (к примеру, список DOM-узлов). 
-
-Для перебора таких объектов добавлен новый синтаксис цикла: `for..of`.
-
-Например:
-
-```js
-//+ run
-'use strict';
-
-let arr = [1, 2, 3]; // массив — пример итерируемого объекта
-
-for(let value of arr) {
-  alert(value); // 1, затем 2, затем 3
-}
-```
-
-Также итерируемой является строка:
-
-```js
-//+ run
-'use strict';
-
-for(let char of "Привет") {
-  alert(char); // Выведет по одной букве: П, р, и, в, е, т
-}
-```
-
-
-Итераторы -- расширяющая понятие "массив" концепция, которая пронизывает современный стандарт JavaScript сверху донизу.
-
-Практически везде, где нужен перебор, он осуществляется через итераторы. Это включает в себя не только строки, массивы, но и вызов функции с оператором spread `f(...args)`, и многое другое.
-
-В отличие от массивов, "перебираемые" объекты могут не иметь "длины" `length`. Как мы увидим далее, итераторы дают возможность сделать "перебираемыми" любые объекты.
-
-## Свой итератор
-
-Допустим, у нас есть некий объект, который надо "умным способом" перебрать.
-
-Например, `range` -- диапазон чисел от `from` до `to`, и мы хотим, чтобы `for(let num of range)` "перебирал", этот объект. При этом под перебором мы подразумеваем перечисление чисел от `from` до `to`.
-
-Объект `range` без итератора:
-
-```js
-let range = {
-  from: 1,
-  to: 5
-};
-
-// хотим сделать перебор
-// for(let num of range) ...
-```
-
-Для возможности использовать объект в `for..of` нужно создать в нём свойство с названием `Symbol.iterator` (системный символ). 
-
-При вызове метода `Symbol.iterator` перебираемый объект должен возвращать другой объект ("итератор"), который умеет осуществлять перебор.
-
-По стандарту у такого объекта должен быть метод `next()`, который при каждом вызове возвращает очередное значение и окончен ли перебор.
-
-Так это выглядит в коде:
-
-```js
-//+ run
-'use strict';
-
-let range = {
-  from: 1,
-  to: 5
-}
-
-// сделаем объект range итерируемым
-range[Symbol.iterator] = function() {
-
-  let current = this.from;
-  let last = this.to;
-
-  // метод должен вернуть объект с next()
-  return {
-    next() {
-      if (current <= last) {
-        return {
-          done: false,
-          value: current++
-        };
-      } else {
-        return {
-          done: true
-        };
-      } 
-    }
-
-  }
-};
-
-for (let num of range) {
-  alert(num); // 1, затем 2, 3, 4, 5
-}
-```
-
-Как видно из кода выше, здесь имеет место разделение сущностей:
-
-<ul>
-<li>Перебираемый объект `range` сам не реализует методы для своего перебора.</li>
-<li>Для этого создаётся другой объект, который хранит текущее состояние перебора и возвращает значение. Этот объект называется итератором и возвращается при вызове метода `range[Symbol.iterator]`.</li>
-<li>У итератора должен быть метод `next()`, который при каждом вызове возвращает объект со свойствами:
-<ul>
-<li>`value` -- очередное значение,
-<li>`done` -- равно `false`, если есть ещё значения, и `true` -- в конце.</li>
-</ul>
-</li>
-</ul>
-
-Конструкция `for..of` в начале своего выполнения автоматически вызывает `Symbol.iterator()`, получает итератор и далее вызывает метод `next()` до получения `done: true`. Такова внутренняя механика. Внешний код при переборе через `for..of` видит только значения.
-
-Такое отделение функционала перебора от самого объекта даёт дополнительную гибкость, например, объект может возвращать разные итераторы в зависимости от своего настроения и времени суток. Однако, бывают ситуации, когда оно не нужно.
-
-Если функционал по перебору (метод `next`) предоставляется самим объектом, то можно вернуть `this` в качестве итератора:
-
-
-```js
-//+ run
-'use strict';
-
-let range = {
-  from: 1,
-  to: 5,
-
-*!*
-  [Symbol.iterator]() {
-    return this;
-  },
-*/!*
-
-  next() {
-    if (this.current === undefined) {
-      // инициализация состояния итерации
-      this.current = this.from;
-    }
-
-    if (this.current <= this.to) {
-      return {
-        done: false,
-        value: this.current++
-      };
-    } else {
-      // очистка текущей итерации
-      delete this.current;
-      return {
-        done: true
-      };
-    } 
-  }
-
-};
-
-for (let num of range) {
-  alert(num); // 1, затем 2, 3, 4, 5
-}
-
-// Произойдёт вызов Math.max(1,2,3,4,5);
-alert( Math.max(...range) ); // 5 (*)
-
-```
-
-При таком подходе сам объект и хранит состояние итерации (текущий перебираемый элемент). 
-
-В данном случае это работает, но для большей гибкости и понятности кода рекомендуется, всё же, выделять итератор в отдельный объект со своим состоянием и кодом.
-
-[smart header="Оператор spread `...` и итераторы"]
-В последней строке `(*)` примера выше можно видеть, что итерируемый объект передаётся через spread для `Math.max`. 
-
-При этом `...range` автоматически превращает итерируемый объект в массив. То есть произойдёт цикл `for..of` по `range`, и его результаты будут использованы в качестве списка аргументов.
-[/smart]
-
-[smart header="Бесконечные итераторы"]
-Возможны и бесконечные итераторы. Например, пример выше при `range.to = Infinity` будет таковым. Или можно сделать итератор, генерирующий бесконечную последовательность псевдослучайных чисел. Тоже полезно.
-
-Нет никаких ограничений на `next`, он может возвращать всё новые и новые значения, и это нормально.
-
-Разумеется, цикл `for..of` по такому итератору тоже будет бесконечным, нужно его прерывать, например, через `break`.
-[/smart]
-
-## Встроенные итераторы
-
-Встроенные в JavaScript итераторы можно получить и явным образом, без `for..of`, прямым вызовом `Symbol.iterator`.
-
-Например, этот код получает итератор для строки и вызывает его полностью "вручную":
-
-```js
-//+ run
-'use strict';
-
-let str = "Hello";
-
-// Делает то же, что и
-// for(var letter of str) alert(letter);
-
-let iterator = str[Symbol.iterator]();
-
-while(true) {
-  let result = iterator.next();
-  if (result.done) break;
-  alert(result.value); // Выведет все буквы по очереди
-}
-```
-
-То же самое будет работать и для массивов. 
-
-## Итого
-
-<ul>
-<li>*Итератор* -- объект, предназначенный для перебора другого объекта.</li>
-<li>У итератора должен быть метод `next()`, возвращающий `{done: Boolean, value: any}`, где `value` -- очередное значение, а `done: true` в конце.</li>
-<li>Метод `Symbol.iterator` предназначен для получения итератора из объекта. Цикл `for..of` делает это автоматически, но можно и вызвать его напрямую.</li>
-<li>В современном стандарте есть много мест, где вместо массива используются более абстрактные "итерируемые" (со свойством `Symbol.iterator`) объекты, например оператор spread `...`.</li>
-<li>Встроенные объекты, такие как массивы и строки, являются итерируемыми, в соответствии с описанным выше.</li>
-</ul>
-
-
-
-
-
-
diff --git a/1-js/10-es-modern/index.md b/1-js/10-es-modern/index.md
deleted file mode 100644
index 6a5c7f2f..00000000
--- a/1-js/10-es-modern/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Современные возможности ES-2015 
-
-Современный стандарт ES-2015 и его расширения для JavaScript.
-
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md
deleted file mode 100644
index b27e40d9..00000000
--- a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-Код страницы:
-
-```html
-<!--+ run -->
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    alert( 'Я - JavaScript!' );
-  </script>
-
-</body>
-
-</html>
-```
-
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html
deleted file mode 100644
index 47bb9ca9..00000000
--- a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    alert('Я - JavaScript!');
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md
deleted file mode 100644
index 0f7f9375..00000000
--- a/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Выведите alert
-
-[importance 5]
-
-Сделайте страницу, которая выводит "Я - JavaScript!".
-
-Создайте её на диске, откройте в браузере, убедитесь, что всё работает.
-
-[demo src="solution"]
diff --git a/1-js/2-first-steps/1-hello-world/article.md b/1-js/2-first-steps/1-hello-world/article.md
deleted file mode 100644
index 739b103b..00000000
--- a/1-js/2-first-steps/1-hello-world/article.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Привет, мир!
-
-В этой статье мы создадим простой скрипт и посмотрим, как он работает.
-[cut]
-## Тег SCRIPT
-
-[smart header="А побыстрее?"]
-В том (и только в том!) случае, если читатель нетерпелив и уже разрабатывал на JavaScript или имеет достаточно опыта в другом языке программировании, он может не читать каждую статью этого раздела, а перепрыгнуть сразу к главе [](/javascript-specials). Там будет кратко самое основное.
-
-Если же у вас есть достаточно времени и желание начать с азов, то читайте дальше :)
-[/smart]
-
-Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например:
-
-```html
-<!--+ run height=100 -->
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <!-- Тег meta для указания кодировки -->
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p>Начало документа...</p>
-*!*
-  <script>
-    alert( 'Привет, Мир!' );
-  </script>
-*/!*
-
-  <p>...Конец документа</p>
-
-</body>
-
-</html>
-```
-
-Этот пример использует следующие элементы:
- 
-<dl>
-<dt><code>&lt;script&gt; ... &lt;/script&gt;</code></dt>
-<dd>Тег `script` содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута `type`, но сейчас он уже не нужен. Достаточно просто `<script>`.
-
-Браузер, когда видит `<script>`:
-<ol>
-<li>Начинает отображать страницу, показывает часть документа до `script`</li>
-<li>Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.</li>
-<li>Закончив выполнение, возвращается обратно в HTML-режим и *только тогда* отображает оставшуюся часть документа.</li>
-</ol>
-
-Попробуйте этот пример в действии, и вы сами всё увидите.
-</dd>
-<dt>`alert(сообщение)`</dt>
-<dd>Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".</dd>
-</dl>
-
-[smart header="Кодировка и тег `META`"]
-При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой -- выводятся "кракозяблы", "квадратики" и "вопросики" вместо русского текста.
-
-Чтобы всё было хорошо, нужно:
-<ol>
-<li>Убедиться, что в `HEAD` есть строка `<meta charset="utf-8">`. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.</li>
-<li>Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в `windows-1251`.</li>
-</ol>
-
-Указание кодировки -- часть обычного HTML, я упоминаю об этом "на всякий случай", чтобы не было сюрпризов при запуске примеров локально.
-[/smart]
-
-
-## Современная разметка для SCRIPT
-
-В старых скриптах оформление тега `SCRIPT` было немного сложнее. В устаревших руководствах можно встретить следующие элементы: 
-
-<dl>
- <dt>Атрибут <code>&lt;script <u>type</u>=...&gt;</code></dt>
-
- <dd>В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так: `type="text/javascript"`. Если указать другое значение `type`, то скрипт выполнен не будет.
-
- В современной разработке атрибут `type` не обязателен.
-</dd>
-
- <dt>Атрибут <code>&lt;script <u>language</u>=...&gt;</code></dt>
-  <dd>Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.</dd>
-<dt>Комментарии до и после скриптов</dt>
-<dd>В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его. 
-
-Выглядит это примерно так:
-
-```html
-<!--+ no-beautify -->
-<script type="text/javascript"><!--
-    ...
-//--></script>
-```
-
-Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
-</dd>
-</dl>
-
-Итак, для вставки скрипта мы просто пишем `<script>`, без дополнительных атрибутов и комментариев.
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md
deleted file mode 100644
index bf0e32fd..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-<ol>
-<li>Операция `a^b` ставит бит результата в `1`, если на соответствующей битовой позиции в `a` или `b` (но не одновременно) стоит `1`.
-
-Так как в `0` везде стоят нули, то биты берутся в точности как во втором аргументе.</li>
-<li>Первое побитовое НЕ `~` превращает `0` в `1`, а `1` в `0`. А второе НЕ превращает ещё раз, в итоге получается как было.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md
deleted file mode 100644
index ea53eeab..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Побитовый оператор и значение
-
-[importance 5]
-
-Почему побитовые операции в примерах ниже не меняют число? Что они делают внутри?
-
-```js
-//+ run
-alert( 123 ^ 0 ); // 123
-alert( 0 ^ 123 ); // 123
-alert( ~~123 ); // 123
-```
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md
deleted file mode 100644
index 2a53ef36..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Один из вариантов такой функции:
-
-```js
-//+ run
-function isInteger(num) {
-  return (num ^ 0) === num;
-}
-
-alert( isInteger(1) ); // true
-alert( isInteger(1.5) ); // false
-alert( isInteger(-0.5) ); // false
-```
-
-Обратите внимание: `num^0` -- в скобках! Это потому, что приоритет операции `^` очень низкий. Если не поставить скобку, то `===` сработает раньше. Получится `num ^ (0 === num)`, а это уже совсем другое дело.
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md
deleted file mode 100644
index 03e8505e..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Проверка, целое ли число
-
-[importance 3]
-
-Напишите функцию `isInteger(num)`, которая возвращает `true`, если `num` -- целое число, иначе `false`.
-
-Например:
-
-```js
-alert( isInteger(1) ); // true
-alert( isInteger(1.5) ); // false
-alert( isInteger(-0.5) ); // false
-```
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md
deleted file mode 100644
index ce150747..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Операция над числами, в конечном итоге, сводится к битам. 
-
-Посмотрим, можно ли поменять местами биты слева и справа.
-
-Например, таблица истинности для `^`:
-<table>
-<thead>
-<tr>
-<th>`a`</th>
-<th>`b`</th>
-<th>результат</th>
-</tr>
-</thead>
-<tbody>
-<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
-<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr>
-<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr>
-<tr><td>`1`</td><td>`1`</td><td>`0`</td></tr>
-</tbody>
-</table>
-
-Случаи `0^0` и `1^1` заведомо не изменятся при перемене мест, поэтому нас не интересуют. А вот `0^1` и `1^0` эквивалентны и равны `1`.
-
-Аналогично можно увидеть, что и другие операторы симметричны.
-
-Ответ: **да**.
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md
deleted file mode 100644
index 96b7ef88..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Симметричны ли операции ^, |, &?
-
-[importance 5]
-
-Верно ли, что для любых `a` и `b` выполняются равенства ниже?
-<ul>
-<li>`a ^ b == b ^ a`</li>
-<li>`a & b == b & a`</li>
-<li>`a | b == b | a`</li>
-</ul>
-
-Иными словами, при перемене мест -- всегда ли результат остаётся тем же?
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md
deleted file mode 100644
index 0b6f6443..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Всё дело в том, что побитовые операции преобразуют число в 32-битное целое.
-
-Обычно число в JavaScript имеет 64-битный формат с плавающей точкой. При этом часть битов (`52`) отведены под цифры, часть (`11`) отведены под хранение номера позиции, на которой стоит десятичная точка, и один бит -- знак числа.
-
-Это означает, что максимальное целое число, которое можно хранить, занимает `52` бита.
-
-Число `12345678912345` в двоичном виде: `10110011101001110011110011100101101101011001` (44 цифры). 
-
-Побитовый оператор `^` преобразует его в 32-битное путём отбрасывания десятичной точки и "лишних" старших цифр.  При этом, так как число большое и старшие биты здесь ненулевые, то, естественно, оно изменится.
-
-Вот ещё пример:
-
-```js
-//+ run
-// в двоичном виде 1000000000000000000000000000000 (31 цифры)
-alert( Math.pow(2, 30) ); // 1073741824
-alert( Math.pow(2, 30) ^ 0 ); // 1073741824, всё ок, длины хватает
-
-// в двоичном виде 100000000000000000000000000000000 (33 цифры)
-alert( Math.pow(2, 32) ); // 4294967296
-alert( Math.pow(2, 32) ^ 0 ); // 0, отброшены старшие цифры, остались нули
-
-// пограничный случай
-// в двоичном виде 10000000000000000000000000000000 (32 цифры)
-alert( Math.pow(2, 31) ); // 2147483648
-alert( Math.pow(2, 31) ^ 0 ); // -2147483648, ничего не отброшено, 
-// но первый бит 1 теперь стоит в начале числа и является знаковым
-```
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md
deleted file mode 100644
index 13407c30..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Почему результат разный?
-
-[importance 5]
-
-Почему результат второго `alert'а` такой странный?
-
-```js
-//+ run
-alert( 123456789 ^ 0 ); // 123456789
-alert( 12345678912345 ^ 0 ); // 1942903641
-```
-
diff --git a/1-js/2-first-steps/10-bitwise-operators/article.md b/1-js/2-first-steps/10-bitwise-operators/article.md
deleted file mode 100644
index dc048db3..00000000
--- a/1-js/2-first-steps/10-bitwise-operators/article.md
+++ /dev/null
@@ -1,751 +0,0 @@
-# Побитовые операторы
-
-Побитовые операторы интерпретируют операнды как последовательность из 32 битов (нулей и единиц).  Они производят операции, используя двоичное представление числа, и возвращают новую последовательность из 32 бит (число) в качестве результата.
-
-Эта глава требует дополнительных знаний в программировании и не очень важная, при первом чтении вы можете пропустить её и вернуться потом, когда захотите понять, как побитовые операторы работают.
-[cut]
-
-## Формат 32-битного целого числа со знаком [#signed-format]
-
-Побитовые операторы в JavaScript работают с 32-битными целыми числами в их двоичном представлении. 
-
-Это представление называется "32-битное целое со знаком, старшим битом слева и дополнением до двойки". 
-
-Разберём, как устроены числа внутри подробнее, это необходимо знать для битовых операций с ними.
-
-<ul>
-<li>Что такое [двоичная система счисления](http://ru.wikipedia.org/wiki/%C4%E2%EE%E8%F7%ED%E0%FF_%F1%E8%F1%F2%E5%EC%E0_%F1%F7%E8%F1%EB%E5%ED%E8%FF), вам, надеюсь, уже известно. При разборе побитовых операций мы будем обсуждать именно двоичное представление чисел, из 32 бит. 
-
-</li>
-<li>*Старший бит слева* -- это научное название для самого обычного порядка записи цифр (от большего разряда к меньшему). При этом, если больший разряд отсутствует, то соответствующий бит равен нулю.
-
-Примеры представления чисел в двоичной системе:
-
-```js
-//+ no-beautify
-a = 0;  // 00000000000000000000000000000000
-a = 1;  // 00000000000000000000000000000001
-a = 2;  // 00000000000000000000000000000010
-a = 3;  // 00000000000000000000000000000011
-a = 255;// 00000000000000000000000011111111
-```
-
-Обратите внимание, каждое число состоит ровно из 32-битов.
-
-
-</li>
-<li>*Дополнение до двойки* -- это название способа поддержки отрицательных чисел.
-
-**Двоичный вид числа, обратного данному (например, `5` и `-5`) получается путём обращения всех битов с прибавлением 1.**
-
-То есть, нули заменяются на единицы, единицы -- на нули и к числу прибавляется `1`. Получается внутреннее представление того же числа, но со знаком минус.
-
-Например, вот число `314`:
-
-```js
-00000000000000000000000100111010
-```
-
-Чтобы получить `-314`, первый шаг -- обратить биты числа: заменить `0` на `1`, а `1` на `0`:
-
-```js
-11111111111111111111111011000101
-```
-
-Второй шаг -- к полученному двоичному числу приплюсовать единицу, обычным двоичным сложением: `11111111111111111111111011000101 + 1 = 11111111111111111111111011000110`.
-
-Итак, мы получили:
-
-```js
--314 = 11111111111111111111111011000110
-```
-
-Принцип дополнения до двойки делит все двоичные представления на два множества: если крайний-левый бит равен `0` -- число положительное, если `1` -- число отрицательное. Поэтому этот бит называется <i>знаковым битом</i>.
-</li>
-</ul>
-
-## Список операторов
-
-В следующей таблице перечислены все побитовые операторы.
-Далее операторы разобраны более подробно.
-
-<table class="fullwidth-table">
-<tr>
-<th>Оператор</th>
-<th>Использование</th>
-<th>Описание</th>
-
-</tr>
-<tr>
-<td>Побитовое И (AND)</td>
-<td style="white-space: nowrap"><code>a &amp; b</code></td>
-<td>Ставит 1 на бит результата, для которого соответствующие биты операндов равны 1.</td>
-</tr>
-<tr>
-<td>Побитовое ИЛИ (OR)</td>
-<td style="white-space: nowrap"><code>a | b</code></td>
-<td>Ставит 1 на бит результата, для которого хотя бы один из соответствующих битов операндов равен 1.</td>
-</tr>
-<tr>
-<td>Побитовое исключающее ИЛИ (XOR)</td>
-<td style="white-space: nowrap"><code>a ^ b</code></td>
-<td>Ставит 1 на бит результата, для которого только один из соответствующих битов операндов равен 1 (но не оба).</td>
-</tr>
-<tr>
-<td>Побитовое НЕ (NOT)</td>
-<td style="white-space: nowrap"><code>~a</code></td>
-<td>Заменяет каждый бит операнда на противоположный.</td>
-</tr>
-<tr>
-<td>Левый сдвиг</td>
-<td style="white-space: nowrap">`a << b`</td>
-<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов влево, добавляя справа нули.</td>
-</tr>
-<tr>
-<td>Правый сдвиг, переносящий знак</td>
-<td style="white-space: nowrap">`a >> b`</td>
-<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов вправо, отбрасывая сдвигаемые биты.</td>
-</tr>
-<tr>
-<td>Правый сдвиг с заполнением нулями</td>
-<td style="white-space: nowrap">`a >>> b`</td>
-<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов вправо, отбрасывая сдвигаемые биты и добавляя нули слева.</td>
-</tr>
-</table>
- 
-Побитовые операторы работают следующим образом:
-
-<ol> 
-<li>Операнды преобразуются в 32-битные целые числа, представленные последовательностью битов. Дробная часть, если она есть, отбрасывается.</li>
-<li>Для бинарных операторов --  каждый бит в первом операнде рассматривается вместе с соответствующим битом второго операнда: первый бит с первым, второй со вторым и т.п. Оператор применяется к каждой паре бит, давая соответствующий бит результата.</li>
-<li>Получившаяся в результате последовательность бит интерпретируется как обычное число.</li>
-</ol>
-
-Посмотрим, как работают операторы, на примерах.
-
-[smart header="Вспомогательные функции parseInt, toString"]
-
-Для удобной работы с примерами в этой статье, если вы захотите протестировать что-то в консоли, пригодятся две функции.
-
-<ul>
-<li>`parseInt("11000",  2)` -- переводит строку с двоичной записью числа в число.</li>
-<li>`n.toString(2)` -- получает для числа `n` запись в 2-ной системе в виде строки.</li>
-</ul>
-
-Например:
-
-```js
-//+ run
-var access = parseInt("11000", 2); // получаем число из строки
-
-alert( access ); // 24, число с таким 2-ным представлением
-
-var access2 = access.toString(2); // обратно двоичную строку из числа
-
-alert( access2 ); // 11000
-```
-
-Без них перевод в двоичную систему и обратно был бы куда менее удобен. 
-Более подробно они разбираются в главе [](/number).
-[/smart]
-
-## & (Побитовое И)
-
-Выполняет операцию И над каждой парой бит. 
-
-Результат `a & b` равен единице только когда оба бита `a` и `b` равны единице.
-
-Таблица истинности для `&`:
-
-<table class="standard-table"> 
-<tr><th>`a`</th><th>`b`</th><th>`a & b`</th></tr> 
-<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
-<tr><td>`0`</td><td>`1`</td><td>`0`</td></tr> 
-<tr><td>`1`</td><td>`0`</td><td>`0`</td></tr> 
-<tr><td>`1`</td><td>`1`</td><td>`1`</td></tr>
-</table>
-
-Пример:
-
-```js
-//+ no-beautify
-9 (по осн. 10) 
-  = 00000000000000000000000000001001 (по осн. 2)
-14 (по осн. 10) 
-  = 00000000000000000000000000001110 (по осн. 2)
-                   --------------------------------
-14 & 9 (по осн. 10) 
-  = 00000000000000000000000000001000 (по осн. 2) 
-  = 8 (по осн. 10)
-```
-
-## | (Побитовое ИЛИ)
-
-Выполняет операцию ИЛИ над каждой парой бит. Результат `a | b` равен 1, если хотя бы один бит из <code>a,b</code> равен 1.
-
-Таблица истинности для `|`:
-
-<table class="standard-table"> 
-<tr><th>`a`</th><th>`b`</th><th>`a | b`</th></tr> 
-<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
-<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr> 
-<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr> 
-<tr><td>`1`</td><td>`1`</td><td>`1`</td></tr>
-</table>
-
-Пример:
-
-```js
-//+ no-beautify
-9 (по осн. 10) 
-  = 00000000000000000000000000001001 (по осн. 2)
-14 (по осн. 10)
-  = 00000000000000000000000000001110 (по осн. 2)
-                   --------------------------------
-14 | 9 (по осн. 10) 
-  = 00000000000000000000000000001111 (по осн. 2) 
-  = 15 (по осн. 10)
-```
-
-## ^ (Исключающее ИЛИ)
-
-Выполняет операцию "Исключающее ИЛИ" над каждой парой бит.
-
- <code>a</code> Исключающее ИЛИ <code>b</code> равно 1, если только <code>a=1</code> или только <code>b=1</code>, но не оба одновременно <code>a=b=1</code>.
-
-Таблица истинности для исключающего ИЛИ:
-
-<table class="standard-table"> 
-<tr><th>`a`</th><th>`b`</th><th>`a ^ b`</th></tr> 
-<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
-<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr> 
-<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr> 
-<tr><td>`1`</td><td>`1`</td><td>`0`</td></tr>
-</table>
-
-Как видно, оно даёт 1, если ЛИБО слева `1`, ЛИБО справа `1`, но не одновременно. Поэтому его и называют "исключающее ИЛИ".
-
-Пример:
-
-```js
-//+ no-beautify
-9 (по осн. 10) 
-  = 00000000000000000000000000001001 (по осн. 2)
-14 (по осн. 10) 
-  = 00000000000000000000000000001110 (по осн. 2)
-                   --------------------------------
-14 ^ 9 (по осн. 10) 
-  = 00000000000000000000000000000111 (по осн. 2) 
-  = 7 (по осн. 10)
-```
-
-[smart header="Исключающее ИЛИ в шифровании"]
-Исключающее или можно использовать для шифрования, так как эта операция полностью обратима. Двойное применение исключающего ИЛИ с тем же аргументом даёт исходное число.
-
-Иначе говоря, верна формула: `a ^ b ^ b == a`.
-
-Пускай Вася хочет передать Пете секретную информацию `data`. Эта информация заранее превращена в число, например строка интерпретируется как последовательность кодов символов.
-
-Вася и Петя заранее договариваются о числовом ключе шифрования `key`.
-
-Алгоритм:
-<ul>
-<li>Вася берёт двоичное представление `data` и делает операцию `data ^ key`. При необходимости `data` бьётся на части, равные по длине `key`, чтобы можно было провести побитовое ИЛИ `^` для каждой части. В JavaScript оператор `^` работает с 32-битными целыми числами, так что `data` нужно разбить на последовательность таких чисел.</li>
-<li>Результат `data ^ key` отправляется Пете, это шифровка.</li>
-</ul>
-
-Например, пусть в `data` очередное число равно `9`, а ключ `key` равен `1220461917`.
-
-```js
-//+ no-beautify
-Данные: 9 в двоичном виде        
-00000000000000000000000000001001
-
-Ключ: 1220461917 в двоичном виде
-01001000101111101100010101011101
-
-Результат операции 9 ^ key:             
-01001000101111101100010101010100
-Результат в 10-ной системе (шифровка):
-1220461908
-```
-
-<ul>
-<li>Петя, получив очередное число шифровки `1220461908`, применяет к нему такую же операцию `^ key`.</li>
-<li>Результатом будет исходное число `data`.</li>
-</ul>
-
-В нашем случае:
-
-```js
-//+ no-beautify
-Полученная шифровка в двоичной системе:
-9 ^ key = 1220461908             
-01001000101111101100010101010100
-
-Ключ: 1220461917 в двоичном виде:
-01001000101111101100010101011101
-
-Результат операции 1220461917 ^ key:
-00000000000000000000000000001001
-Результат в 10-ной системе (исходное сообщение):
-9
-```
-
-Конечно, такое шифрование поддаётся частотному анализу и другим методам дешифровки, поэтому современные алгоритмы используют операцию XOR `^` как одну из важных частей более сложной многоступенчатой схемы.
-[/smart]
-
-
-## ~ (Побитовое НЕ)
-
-Производит операцию НЕ над каждым битом, заменяя его на обратный ему.
-
-Таблица истинности для НЕ:
-
-<table class="standard-table">
-<tr><th>`a`</th><th>`~a`</th></tr> 
-<tr><td>`0`</td><td>`1`</td></tr>
-<tr><td>`1`</td><td>`0`</td></tr>
-</table>
-
-Пример:
-
-```js
-//+ no-beautify
- 9 (по осн. 10) 
-  = 00000000000000000000000000001001 (по осн. 2)
-               --------------------------------
-~9 (по осн. 10) 
-  = 11111111111111111111111111110110 (по осн. 2) 
-  = -10 (по осн. 10)
-```
-
-Из-за внутреннего представления отрицательных чисел получается так, что `~n == -(n+1)`. 
-
-Например:
-
-```js
-//+ run
-alert( ~3 ); // -4
-alert( ~-1 ); // 0
-```
-
-### << (Битовый сдвиг влево) 
-
-Операторы битового сдвига принимают два операнда. Первый -- это число для сдвига, а второй -- количество битов, которые нужно сдвинуть в первом операнде.
-
-Оператор `<<` сдвигает первый операнд на указанное число битов влево. Лишние биты отбрасываются, справа добавляются нулевые биты.
-
-Например, `9 << 2` даст `36`:
-
-```js
-//+ no-beautify
- 
-9 (по осн.10)
-  = 00000000000000000000000000001001 (по осн.2)
-                  --------------------------------
-9 << 2 (по осн.10)
-  = 00000000000000000000000000100100 (по осн.2) 
-  = 36 (по осн.10)
-```
-
-Операция `<< 2` сдвинула и отбросила два левых нулевых бита и добавила справа два новых нулевых.
-
-[smart header="Левый сдвиг почти равен умножению на 2"]
-Битовый сдвиг `<< N` обычно имеет тот же эффект, что и умножение на два `N` раз, например:
-
-```js
-//+ run
-alert( 3 << 1 ); // 6, умножение на 2
-alert( 3 << 2 ); // 12, умножение на 2 два раза
-alert( 3 << 3 ); // 24, умножение на 2 три раза
-```
-
-Конечно, следует иметь в виду, что побитовые операторы работают только с 32-битными числами, поэтому верхний порог такого "умножения" ограничен:
-
-```js
-//+ run no-beautify
-*!*
-alert(10000000000 << 1); // -1474836480, отброшен крайний-левый бит
-*/!*
-alert(10000000000 * 2); // 20000000000, обычное умножение
-```
-
-[/smart]
-
-### >> (Правый битовый сдвиг, переносящий знак) 
-
-Этот оператор сдвигает биты вправо, отбрасывая лишние. При этом слева добавляется *копия* крайнего-левого бита.
-
-Знак числа (представленный крайним-левым битом) при этом не меняется, так как новый крайний-левый бит имеет то же значение, что и исходном числе.
-
-Поэтому он назван "переносящим знак".
-
-Например, `9 >> 2` даст <code>2</code>:
-
-```js
-//+ no-beautify
-9 (по осн.10)
-  = 00000000000000000000000000001001 (по осн.2)
-                  --------------------------------
-9 >> 2 (по осн.10)
-  = 00000000000000000000000000000010 (по осн.2) 
-  = 2 (по осн.10)
-```
-
-Операция `>> 2` сдвинула вправо и отбросила два правых бита `01` и добавила слева две копии первого бита `00`.
-
-Аналогично, `-9 >> 2` даст `-3`:
-
-```js
-//+ no-beautify
--9 (по осн.10)
-  = 11111111111111111111111111110111 (по осн.2)
-                   --------------------------------
--9 >> 2 (по осн.10)
-  = 11111111111111111111111111111101 (по осн.2) = -3 (по осн.10)
-```
-
-Здесь операция `>> 2` сдвинула вправо и отбросила два правых бита `11` и добавила слева две копии первого бита `11`. , Знак числа сохранён, так как крайний-левый (знаковый) бит сохранил значение `1`.
-
-[smart header="Правый сдвиг почти равен целочисленному делению на 2"]
-Битовый сдвиг `>> N` обычно имеет тот же результат, что и целочисленное деление на два `N` раз:
-
-```js
-//+ run
-alert( 100 >> 1 ); // 50, деление на 2
-alert( 100 >> 2 ); // 25, деление на 2 два раза
-alert( 100 >> 3 ); // 12, деление на 2 три раза, целая часть от результата
-```
-
-[/smart]
-
-
-### >>> (Правый сдвиг с заполнением нулями)
-
-Этот оператор сдвигает биты первого операнда вправо. Лишние биты справа отбрасываются. Слева добавляются нулевые биты.
-
-Знаковый бит становится равным 0, поэтому результат всегда положителен.
-
-**Для неотрицательных чисел правый сдвиг с заполнением нулями `>>>` и правый сдвиг с переносом знака `>>` дадут одинаковый результат, т.к в обоих случаях слева добавятся нули.**
-
-Для отрицательных чисел -- результат работы разный. Например, `-9 >>> 2` даст  `1073741821`, в отличие от `-9 >> 2` (дает `-3`):
-
-```js
-//+ no-beautify
--9 (по осн.10)
-  = 11111111111111111111111111110111 (по осн.2)
-                    --------------------------------
--9 >>> 2 (по осн.10)
-  = 00111111111111111111111111111101 (по осн.2) 
-  = 1073741821 (по осн.10)
-```
-
-## Применение побитовых операторов
-
-Побитовые операторы используются редко, но всё же используются.
-
-Случаи применения побитовых операторов, которые мы здесь разберём, составляют большинство всех использований в JavaScript.
-
-[warn header="Осторожно, приоритеты!"]
-В JavaScript побитовые операторы `^`, `&`, `|` выполняются после сравнений `==`.
-
-Например, в сравнении `a == b^0` будет сначала выполнено сравнение `a == b`, а потом уже операция `^0`, как будто стоят скобки `(a == b)^0`.
-
-Обычно это не то, чего мы хотим. Чтобы гарантировать желаемый порядок, нужно ставить скобки: `a == (b^0)`.
-[/warn]
-
-### Маска
-
-Для этого примера представим, что наш скрипт работает с пользователями.
-
-У них могут быть различные роли в проекте:
-
-<ul>
-<li>`Гость`</li>
-<li>`Редактор`</li>
-<li>`Админ`</li>
-</ul>
-
-Каждой роли соответствует ряд доступов к статьям и функционалу сайта.
-
-Например, `Гость` может лишь просматривать статьи сайта, а `Редактор` -- ещё и редактировать их, и тому подобное.
-
-Что-то в таком духе: 
-
-<table>
-<thead>
-<tr>
-<th>Пользователь</th>
-<th>Просмотр статей</th>
-<th>Изменение статей</th>
-<th>Просмотр товаров</th>
-<th>Изменение товаров</th>
-<th>Управление правами</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Гость</td>
-<td>Да</td>
-<td>Нет</td>
-<td>Да</td>
-<td>Нет</td>
-<td>Нет</td>
-</tr>
-<tr>
-<td>Редактор</td>
-<td>Да</td>
-<td>Да</td>
-<td>Да</td>
-<td>Да</td>
-<td>Нет</td>
-</tr>
-<tr>
-<td>Админ</td>
-<td>Да</td>
-<td>Да</td>
-<td>Да</td>
-<td>Да</td>
-<td>Да</td>
-</tr>
-</tbody>
-</table>
-
-Если вместо "Да" поставить `1`, а вместо "Нет" -- `0`, то каждый набор доступов описывается числом:
-
-<table>
-<thead>
-<tr>
-<th>Пользователь</th>
-<th>Просмотр статей</th>
-<th>Изменение статей</th>
-<th>Просмотр товаров</th>
-<th>Изменение товаров</th>
-<th>Управление правами</th>
-<th>В 10-ной системе</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Гость</td>
-<td>1</td>
-<td>0</td>
-<td>1</td>
-<td>0</td>
-<td>0</td>
-<td> = 20</td>
-</tr>
-<tr>
-<td>Редактор</td>
-<td>1</td>
-<td>1</td>
-<td>1</td>
-<td>1</td>
-<td>0</td>
-<td> = 30</td>
-</tr>
-<tr>
-<td>Админ</td>
-<td>1</td>
-<td>1</td>
-<td>1</td>
-<td>1</td>
-<td>1</td>
-<td> = 31</td>
-</tr>
-</tbody>
-</table>
-
-В последней колонке находится десятичное число, которое получится, если прочитать строку доступов в двоичном виде.
-
-Например, доступ гостя `10100 = 20`.
-
-Такая интерпретация доступов позволяет "упаковать" много информации в одно число. Это экономит память, а кроме этого -- это удобно, поскольку в дополнение к экономии -- по такому значению очень легко проверить, имеет ли посетитель заданную *комбинацию доступов*!
-
-Для этого посмотрим, как в 2-ной системе представляется каждый доступ в отдельности.
-
-<ul>
-<li>Доступ, соответствующий только управлению правами: `00001 (=1)` (все нули кроме `1` на позиции, соответствующей этому доступу).</li>
-<li>Доступ, соответствующий только изменению товаров: `00010 (=2)`.</li>
-<li>Доступ, соответствующий только просмотру товаров: `00100 (=4)`.</li>
-<li>Доступ, соответствующий только изменению статей: `01000 (=8)`.</li>
-<li>Доступ, соответствующий только просмотру статей: `10000 (=16)`.</li>
-</ul>
-
-Доступ одновременно на просмотр и изменение статей -- это двоичное число с `1` на соответствующих позициях, то есть `access = 11000`.
-
-Как правило, доступы задаются в виде констант:
-
-```js
-//+ no-beautify
-var ACCESS_ADMIN = 1;          // 00001
-var ACCESS_GOODS_EDIT = 2;   // 00010
-var ACCESS_GOODS_VIEW = 4;     // 00100
-var ACCESS_ARTICLE_EDIT = 8; // 01000
-var ACCESS_ARTICLE_VIEW = 16;  // 10000
-```
-
-Из этих констант получить нужную комбинацию доступов можно при помощи операции `|`.
-
-```js
-var guest = ACCESS_ARTICLE_VIEW | ACCESS_GOODS_VIEW; // 10100
-var editor = guest | ACCESS_ARTICLE_EDIT | ACCESS_GOODS_EDIT; // 11110
-var admin = editor | ACCESS_ADMIN; // 11111
-```
-
-Теперь, чтобы понять, есть ли в доступе `editor` нужный доступ, например управление правами -- достаточно применить к нему побитовый оператор И (`&`) с соответствующей константой.
-
-Ненулевой результат будет означать, что доступ есть:
-
-```
-alert(editor & ACCESS_ADMIN); // 0, доступа нет
-alert(editor & ACCESS_ARTICLE_EDIT); // 8, доступ есть
-```
-
-Такая проверка работает, потому что оператор И ставит `1` на те позиции результата, на которых в обоих операндах стоит `1`. 
-
-**Можно проверить один из нескольких доступов.**
-
-Например, проверим, есть ли права на просмотр ИЛИ изменение товаров. Соответствующие права задаются битом `1` на втором и третьем месте с конца, что даёт число `00110` (=`6` в 10-ной системе).
-
-```js
-var check = ACCESS_GOODS_VIEW | ACCESS_GOODS_EDIT; // 6, 00110
-
-alert( admin & check ); // не 0, значит есть доступ к просмотру ИЛИ изменению
-```
-
-*Битовой маской* называют как раз комбинацию двоичных значений (`check` в примере выше), которая используется для проверки и выборки единиц на нужных позициях.
-
-Маски могут быть весьма удобны.
-
-В частности, их используют в функциях, чтобы одним параметром передать несколько "флагов", т.е. однобитных значений.
-
-Пример вызова функции с маской:
-```js
-// найти пользователей с правами на изменение товаров или администраторов
-findUsers(ACCESS_GOODS_EDIT | ACCESS_ADMIN);
-```
-
-Это довольно-таки коротко и элегантно, но, вместе с тем, применение масок налагает определённые ограничения. В частности, побитовые операторы в JavaScript работают только с 32-битными числами, а значит, к примеру, 33 доступа уже в число не упакуешь. Да и работа с двоичной системой счисления -- как ни крути, менее удобна, чем с десятичной или с обычными логическими значениями `true/false`.
-
-Поэтому основная сфера применения масок -- это быстрые вычисления, экономия памяти, низкоуровневые операции, связанные с рисованием из JavaScript (3d-графика), интеграция с некоторыми функциями ОС (для серверного JavaScript), и другие ситуации, когда уже существуют функции, требующие битовую маску.
-
-### Округление
-
-Так как битовые операции отбрасывают десятичную часть, то их можно использовать для округления. Достаточно взять любую операцию, которая не меняет значение числа.
-
-Например, двойное НЕ (`~`):
-
-```js
-//+ run
-alert( ~~12.345 ); // 12
-```
-
-Подойдёт и Исключающее ИЛИ (`^`) с нулём:
-
-```js
-//+ run
-alert( 12.345 ^ 0 ); // 12
-```
-
-Последнее даже более удобно, поскольку отлично читается:
-
-```js
-//+ run
-alert(12.3 * 14.5 ^ 0); // (=178) "12.3 умножить на 14.5 *!*и округлить*/!*"
-```
-
-У побитовых операторов достаточно низкий приоритет, он меньше чем у остальной арифметики:
-
-```js
-//+ run
-alert( 1.1 + 1.2 ^ 0 ); // 2, сложение выполнится раньше округления
-```
-
-### Проверка на -1
-
-[Внутренний формат](#signed-format) 32-битных чисел устроен так, что для смены знака нужно все биты заменить на противоположные ("обратить") и прибавить `1`. 
-
-Обращение битов -- это побитовое НЕ (`~`). То есть, при таком формате представления числа `-n = ~n + 1`. Или, если перенести единицу: `~n = -(n+1)`.
-
-Как видно из последнего равенства, `~n == 0` только если `n == -1`. Поэтому можно легко проверить равенство `n == -1`:
-
-```js
-//+ run
-var n = 5;
-
-if (~n) { // сработает, т.к. ~n = -(5+1) = -6
-  alert( "n не -1" ); // выведет!
-}
-```
-
-
-
-```js
-//+ run
-var n = -1;
-
-if (~n) { // не сработает, т.к. ~n = -(-1+1) = 0
-  alert( "...ничего не выведет..." );
-}
-```
-
-Проверка на `-1` пригождается, например, при поиске символа в строке. Вызов `str.indexOf("подстрока")` возвращает позицию подстроки в `str`, или `-1` если не нашёл.
-
-```js
-//+ run
-var str = "Проверка";
-
-if (~str.indexOf("верка")) { // Сочетание "if (~...indexOf)" читается как "если найдено"
-  alert( 'найдено!' );
-}
-```
-
-### Умножение и деление на степени 2
-
-Оператор `a << b`, сдвигая биты, по сути умножает `a` на `2` в степени `b`.
-
-Например:
-
-```js
-//+ run
-alert( 1 << 2 ); // 1*(2*2) = 4
-alert( 1 << 3 ); // 1*(2*2*2) = 8
-alert( 3 << 3 ); // 3*(2*2*2) = 24
-```
-
-При этом следует иметь в виду, что максимальный верхний порог такого умножения меньше, чем обычно, так как побитовый оператор оперирует 32-битными целыми, в то время как обычные операторы оперируют числами длиной 64 бита.
-
-Оператор сдвига в другую сторону `a >> b`, производит обратную операцию -- целочисленное деление `a` на <code>2<sup>b</sup></code>.
-
-```js
-//+ run
-alert( 8 >> 2 ); // 2 = 8/4, убрали 2 нуля в двоичном представлении
-alert( 11 >> 2 ); // 2, целочисленное деление (менее значимые биты просто отброшены)
-```
-
-## Итого
-
-<ul>
-<li>Бинарные побитовые операторы: `& | ^ << >> >>>`.</li>
-<li>Унарный побитовый оператор один: `~`.</li>
-</ul>
-
-Как правило, битовое представление числа используется для:
-<ul>
-<li>Округления числа: `(12.34^0) = 12`.</li>
-<li>Проверки на равенство `-1`: `if (~n) { n не -1 }`.</li>
-<li>Упаковки нескольких битововых значений ("флагов") в одно значение. Это экономит память и позволяет проверять наличие комбинации флагов одним оператором `&`.</li>
-<li>Других ситуаций, когда нужны битовые маски.</li>
-</ul>
-[head]
-<script>
-
-var ACCESS_ADMIN = 1;          // 00001
-var ACCESS_GOODS_EDIT = 2;   // 00010
-var ACCESS_GOODS_VIEW = 4;     // 00100
-var ACCESS_ARTICLE_EDIT = 8; // 01000
-var ACCESS_ARTICLE_VIEW = 16;  // 10000
-</script>
-[/head]
\ No newline at end of file
diff --git a/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md b/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md
deleted file mode 100644
index a70b07e0..00000000
--- a/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-JS-код:
-
-```js
-//+ demo run
-var name = prompt("Ваше имя?", "");
-alert( name );
-```
-
-Полная страница:
-
-```html
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    var name = prompt("Ваше имя?", "");
-    alert( name );
-  </script>
-
-</body>
-
-</html>
-```
-
diff --git a/1-js/2-first-steps/11-uibasic/1-simple-page/task.md b/1-js/2-first-steps/11-uibasic/1-simple-page/task.md
deleted file mode 100644
index 6d2ca2e1..00000000
--- a/1-js/2-first-steps/11-uibasic/1-simple-page/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Простая страница
-
-[importance 4]
-
-Создайте страницу, которая спрашивает имя и выводит его.
-
-[demo /]
-
diff --git a/1-js/2-first-steps/11-uibasic/article.md b/1-js/2-first-steps/11-uibasic/article.md
deleted file mode 100644
index e5c745ce..00000000
--- a/1-js/2-first-steps/11-uibasic/article.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# Взаимодействие с пользователем: alert, prompt, confirm
-
-
-В этом разделе мы рассмотрим базовые UI операции: `alert`, `prompt` и `confirm`, которые позволяют работать с данными, полученными от пользователя.
-[cut]
-## alert   
-
-Синтаксис:
-
-```js
-alert(сообщение)
-```
-
-`alert` выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт "ОК".
-
-```js
-//+ run
-alert( "Привет" );
-```
-
-Окно сообщения, которое выводится, является *модальным окном*. Слово "модальное" означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае - пока не нажмёт на "OK".
-
-## prompt   
-
-Функция prompt принимает два аргумента:
-
-```js
-//+ no-beautify
-result = prompt(title, default);
-```
-
-Она выводит модальное окно с заголовком `title`, полем для ввода текста, заполненным строкой по умолчанию `default` и кнопками OK/CANCEL. 
-
-Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием [key Esc] на клавиатуре.
-
-**Вызов `prompt` возвращает то, что ввёл посетитель -- строку или специальное значение `null`, если ввод отменён.**
-
-[warn header="Safari 5.1+ не возвращает `null`"]
-Единственный браузер, который не возвращает `null` при отмене ввода -- это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
-
-Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и `null`, т.е. считать отменой ввода.
-[/warn]
-
-Как и в случае с `alert`, окно `prompt` модальное.
-
-```js
-//+ run
-var years = prompt('Сколько вам лет?', 100);
-
-alert('Вам ' + years + ' лет!')
-```
-
-[warn header="Всегда указывайте `default`"]
-Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию `"undefined"`.
-
-Запустите этот код <u>в IE</u>, чтобы понять о чём речь:
-
-```js
-//+ run
-var test = prompt("Тест");
-```
-
-Поэтому рекомендуется *всегда* указывать второй аргумент:
-
-```js
-//+ run
-var test = prompt("Тест", ''); // <-- так лучше
-```
-
-[/warn]
-
-
-## confirm   
-
-Синтаксис:
-
-```js
-result = confirm(question);
-```
-
-`confirm` выводит окно с вопросом `question` с двумя кнопками: OK и CANCEL. 
-
-**Результатом будет `true` при нажатии OK и `false` - при CANCEL([key Esc]).**
-
-Например:
-
-```js
-//+ run
-var isAdmin = confirm("Вы - администратор?");
-
-alert( isAdmin );
-```
-
-## Особенности встроенных функций
-
-Конкретное место, где выводится модальное окно с вопросом -- обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
-
-С одной стороны -- это недостаток, так как нельзя вывести окно в своем, особо красивом, дизайне. 
-
-С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем -- как раз в том, что они очень просты.
-
-Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие "красивости" особой роли не играют.
-
-
-## Резюме
-
-<ul>
-<li>`alert` выводит сообщение.</li>
-<li>`prompt` выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или `null`, если ввод отменён (CANCEL/[key Esc]).</li>
-<li>`confirm` выводит сообщение и ждёт, пока пользователь нажмёт "OK" или "CANCEL" и возвращает `true/false`.</li>
-</ul>
diff --git a/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md b/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md
deleted file mode 100644
index 92098c3e..00000000
--- a/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-**Да, выведется,** т.к. внутри `if` стоит строка `"0"`. 
-
-Любая строка, кроме пустой (а здесь она не пустая), в логическом контексте является `true`.
-
-Можно запустить и проверить:
-
-```js
-//+ run
-if ("0") {
-  alert( 'Привет' );
-}
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md b/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md
deleted file mode 100644
index 27ce5aee..00000000
--- a/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# if (строка с нулём)
-
-[importance 5]
-
-Выведется ли `alert`?
-
-```js
-if ("0") {
-  alert( 'Привет' );
-}
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png
deleted file mode 100644
index a0925072..00000000
Binary files a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png and /dev/null differ
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html
deleted file mode 100644
index 392ead19..00000000
--- a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script>
-    var value = prompt('Каково "официальное" название JavaScript?', '');
-
-    if (value == 'EcmaScript') {
-      alert('Верно!');
-    } else {
-      alert('Не знаете? "EcmaScript"!');
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md b/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md
deleted file mode 100644
index aacb5966..00000000
--- a/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-```html
-<!--+ run src="ifelse_task2/index.html" -->
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/task.md b/1-js/2-first-steps/12-ifelse/2-check-standard/task.md
deleted file mode 100644
index f5aa5eb6..00000000
--- a/1-js/2-first-steps/12-ifelse/2-check-standard/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Проверка стандарта
-
-[importance 2]
-
-Используя конструкцию `if..else`, напишите код, который будет спрашивать: "Каково "официальное" название JavaScript?".
-
-Если посетитель вводит "EcmaScript", то выводить "Верно!", если что-то другое -- выводить "Не знаете? "EcmaScript"!".
-
-Блок-схема:
-
-<img src="ifelse_task2.png">
-
-[demo src="ifelse_task2"]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html b/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html
deleted file mode 100644
index 392ead19..00000000
--- a/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script>
-    var value = prompt('Каково "официальное" название JavaScript?', '');
-
-    if (value == 'EcmaScript') {
-      alert('Верно!');
-    } else {
-      alert('Не знаете? "EcmaScript"!');
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html b/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
deleted file mode 100644
index 31d37ebc..00000000
--- a/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    var value = prompt('Введите число', 0);
-
-    if (value > 0) {
-      alert(1);
-    } else if (value < 0) {
-      alert(-1);
-    } else {
-      alert(0);
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/solution.md b/1-js/2-first-steps/12-ifelse/3-sign/solution.md
deleted file mode 100644
index df54e347..00000000
--- a/1-js/2-first-steps/12-ifelse/3-sign/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```js
-//+ run
-var value = prompt('Введите число', 0);
-
-if (value > 0) {
-  alert( 1 );
-} else if (value < 0) {
-  alert( -1 );
-} else {
-  alert( 0 );
-}
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/task.md b/1-js/2-first-steps/12-ifelse/3-sign/task.md
deleted file mode 100644
index 9d24ede9..00000000
--- a/1-js/2-first-steps/12-ifelse/3-sign/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Получить знак числа
-
-[importance 2]
-
-Используя конструкцию `if..else`, напишите код, который получает значение `prompt`, а затем выводит `alert`:
-<ul>
-<li>`1`, если значение больше нуля,</li>
-<li>`-1`, если значение меньше нуля,</li>
-<li>`0`, если значение равно нулю.</li>
-</ul>
-
-[demo src="if_sign"]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png b/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png
deleted file mode 100644
index 56ed3c7c..00000000
Binary files a/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png and /dev/null differ
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/solution.md b/1-js/2-first-steps/12-ifelse/4-check-login/solution.md
deleted file mode 100644
index edcdbb50..00000000
--- a/1-js/2-first-steps/12-ifelse/4-check-login/solution.md
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-```js
-//+ run demo
-var userName = prompt('Кто пришёл?', '');
-
-if (userName == 'Админ') {
-
-  var pass = prompt('Пароль?', '');
-
-  if (pass == 'Чёрный Властелин') {
-    alert( 'Добро пожаловать!' );
-  } else if (pass == null) { // (*)
-    alert( 'Вход отменён' );
-  } else {
-    alert( 'Пароль неверен' );
-  }
-
-} else if (userName == null) { // (**)
-  alert( 'Вход отменён' );
-
-} else {
-
-  alert( 'Я вас не знаю' );
-
-}
-```
-
-Обратите внимание на проверку `if` в строках `(*)` и `(**)`. Везде, кроме Safari, нажатие "Отмена" возвращает `null`, а вот Safari возвращает при отмене пустую строку, поэтому в браузере Safari можно было бы добавить дополнительную проверку на неё.
-
-Впрочем, такое поведение Safari является некорректным, надеемся, что скоро его исправят.
-
-Кроме того, обратите внимание на дополнительные вертикальные отступы внутри `if`. Они не обязательны, но полезны для лучшей читаемости кода.
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/task.md b/1-js/2-first-steps/12-ifelse/4-check-login/task.md
deleted file mode 100644
index a158cb4b..00000000
--- a/1-js/2-first-steps/12-ifelse/4-check-login/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Проверка логина
-
-[importance 3]
-
-Напишите код, который будет спрашивать логин (`prompt`).
-
-Если посетитель вводит "Админ", то спрашивать пароль, если нажал отмена (escape) -- выводить "Вход отменён", если вводит что-то другое -- "Я вас не знаю".
-
-Пароль проверять так. Если введён пароль "Чёрный Властелин", то выводить "Добро пожаловать!", иначе -- "Пароль неверен", при отмене -- "Вход отменён".
-
-Блок-схема:
-
-<img src="ifelse_task.png">
-
-Для решения используйте вложенные блоки `if`. Обращайте внимание на стиль и читаемость кода.
-
-[demo /]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md
deleted file mode 100644
index 1799c70b..00000000
--- a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-```js
-result = (a + b < 4) ? 'Мало' : 'Много';
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md
deleted file mode 100644
index dc75b1fb..00000000
--- a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Перепишите 'if' в '?'
-
-[importance 5]
-
-Перепишите `if` с использованием оператора `'?'`:
-
-```js
-if (a + b < 4) {
-  result = 'Мало';
-} else {
-  result = 'Много';
-}
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md
deleted file mode 100644
index 42b7b628..00000000
--- a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-```js
-var message = (login == 'Вася') ? 'Привет' :
-  (login == 'Директор') ? 'Здравствуйте' :
-  (login == '') ? 'Нет логина' :
-  '';
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md
deleted file mode 100644
index b3babf08..00000000
--- a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Перепишите 'if..else' в '?'
-
-[importance 5]
-
-Перепишите `if..else` с использованием нескольких операторов `'?'`. 
-
-Для читаемости -- оформляйте код в несколько строк.
-
-```js
-var message;
-
-if (login == 'Вася') {
-  message = 'Привет';
-} else if (login == 'Директор') {
-  message = 'Здравствуйте';
-} else if (login == '') {
-  message = 'Нет логина';
-} else {
-  message = '';
-}
-```
-
diff --git a/1-js/2-first-steps/12-ifelse/article.md b/1-js/2-first-steps/12-ifelse/article.md
deleted file mode 100644
index 4b33eb99..00000000
--- a/1-js/2-first-steps/12-ifelse/article.md
+++ /dev/null
@@ -1,233 +0,0 @@
-# Условные операторы: if, '?'
-
-Иногда, в зависимости от условия, нужно выполнить различные действия. Для этого используется оператор `if`.
-[cut]
-Например:
-
-```js
-//+ run
-var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
-
-if (year != 2011) alert( 'А вот и неправильно!' );
-```
-
-## Оператор if
-
-Оператор `if` ("если") получает условие, в примере выше это `year != 2011`. Он вычисляет его, и если результат -- `true`, то выполняет команду.
-
-Если нужно выполнить более одной команды -- они оформляются блоком кода в фигурных скобках:
-
-```js
-if (year != 2011) {
-  alert( 'А вот..' );
-  alert( '..и неправильно!' );
-}
-```
-
-**Рекомендуется использовать фигурные скобки всегда, даже когда команда одна.** 
-
-Это улучшает читаемость кода.
-
-
-## Преобразование к логическому типу
-
-Оператор `if (...)` вычисляет и преобразует выражение в скобках к логическому типу. 
-
-В логическом контексте:
-<ul>
-<li>Число `0`, пустая строка `""`, `null` и `undefined`, а также `NaN` являются `false`,</li>
-<li>Остальные значения -- `true`.</li>
-</ul>
-
-Например, такое условие никогда не выполнится:
-
-```js
-if (0) { // 0 преобразуется к false
-  ...
-}
-```
-
-...А такое -- выполнится всегда:
-
-```js
-if (1) { // 1 преобразуется к true
-  ...
-}
-```
-
-Можно и просто передать уже готовое логическое значение, к примеру, заранее вычисленное в переменной:
-
-```js
-var cond = (year != 2011); // true/false
-
-if (cond) {
-  ...
-}
-```
-
-## Неверное условие, else
-
-Необязательный блок `else` ("иначе") выполняется, если условие неверно:
-
-```js
-//+ run
-var year = prompt('Введите год появления стандарта ECMA-262 5.1', '');
-
-if (year == 2011) {
-  alert( 'Да вы знаток!' );
-} else {
-  alert( 'А вот и неправильно!' ); // любое значение, кроме 2011
-}
-```
-
-## Несколько условий, else if
-
-Бывает нужно проверить несколько вариантов условия. Для этого используется блок `else if ...`. Например:
-
-```js
-//+ run
-var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
-
-if (year < 2011) {
-  alert( 'Это слишком рано..' );
-} else if (year > 2011) {
-  alert( 'Это поздновато..' );
-} else {
-  alert( 'Да, точно в этом году!' );
-}
-```
-
-В примере выше JavaScript сначала проверит первое условие, если оно ложно -- перейдет ко второму -- и так далее, до последнего `else`.
-
-
-## Оператор вопросительный знак '?'
-Иногда нужно в зависимости от условия присвоить переменную. Например:
-
-```js
-//+ run no-beautify
-var access;
-var age = prompt('Сколько вам лет?', '');
-
-*!*
-if (age > 14) {
-  access = true;
-} else {
-  access = false;
-}
-*/!*
-
-alert(access);
-```
-
-Оператор вопросительный знак `'?'` позволяет делать это короче и проще.
-
-Он состоит из трех частей:
-
-```js
-условие ? значение1 : значение2
-```
-
-Проверяется условие, затем если оно верно -- возвращается `значение1`, если неверно -- `значение2`, например:
-
-```js
-access = (age > 14) ? true : false;
-```
-
-Оператор `'?'` выполняется позже большинства других, в частности -- позже сравнений, поэтому скобки можно не ставить:
-
-```js
-access = age > 14 ? true : false;
-```
-
-...Но когда скобки есть -- код лучше читается. Так что рекомендуется их писать.
-
-[smart]
-В данном случае можно было бы обойтись и без оператора `'?'`, т.к. сравнение само по себе уже возвращает `true/false`:
-
-```js
-access = age > 14;
-```
-[/smart]
-
-[smart header="\"Тернарный оператор\""]
-Вопросительный знак -- единственный оператор, у которого есть аж три аргумента, в то время как у обычных операторов их один-два. 
-Поэтому его называют *"тернарный оператор"*.
-[/smart]
-
-
-## Несколько операторов '?'
-
-Последовательность операторов  `'?'` позволяет вернуть значение в зависимости не от одного условия, а от нескольких.
-
-Например:
-```js
-//+ run
-var age = prompt('возраст?', 18);
-
-var message = (age < 3) ? 'Здравствуй, малыш!' :
-  (age < 18) ? 'Привет!' :
-  (age < 100) ? 'Здравствуйте!' :
-  'Какой необычный возраст!';
-
-alert( message );
-```
-
-Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!
-
-Вопросительный знак проверяет сначала `age < 3`, если верно -- возвращает `'Здравствуй, малыш!'`, если нет -- идет за двоеточие и проверяет `age < 18`. Если это верно -- возвращает `'Привет!'`, иначе проверка `age < 100` и `'Здравствуйте!'`... И наконец, если ничего из этого не верно, то `'Какой необычный возраст!'`.
-
-То же самое через `if..else`:
-
-```js
-if (age < 3) {
-  message = 'Здравствуй, малыш!';
-} else if (a < 18) {
-  message = 'Привет!';
-} else if (age < 100) {
-  message = 'Здравствуйте!';
-} else {
-  message = 'Какой необычный возраст!';
-}
-```
-
-## Нетрадиционное использование '?'
-
-Иногда оператор вопросительный знак `'?'` используют как замену `if`:
-
-```js
-//+ run no-beautify
-var company = prompt('Какая компания создала JavaScript?', '');
-
-*!*
-(company == 'Netscape') ?
-   alert('Да, верно') : alert('Неправильно');
-*/!*
-```
-
-Работает это так: в зависимости от условия, будет выполнена либо первая, либо вторая часть после `'?'`. 
-
-Результат выполнения не присваивается в переменную, так что пропадёт (впрочем, `alert` ничего не возвращает).
-
-**Рекомендуется не использовать вопросительный знак таким образом.**
-
-Несмотря на то, что с виду такая запись короче `if`, она является существенно менее читаемой. 
-
-Вот, для сравнения, то же самое с `if`:
-
-```js
-//+ run no-beautify
-var company = prompt('Какая компания создала JavaScript?', '');
-
-*!*
-if (company == 'Netscape') {
-  alert('Да, верно');
-} else {
-  alert('Неправильно');
-}
-*/!*
-```
-
-При чтении кода глаз идёт вертикально и конструкции, занимающие несколько строк, с понятной вложенностью, воспринимаются гораздо легче. Возможно, вы и сами почувствуете, пробежавшись глазами, что синтаксис с `if` более прост и очевиден чем с оператором `'?'`.
-
-Смысл оператора `'?'` -- вернуть то или иное значение, в зависимости от условия. Пожалуйста, используйте его по назначению, а для выполнения разных веток кода есть `if`.
-
diff --git a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md
deleted file mode 100644
index 4756a6ce..00000000
--- a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Ответ: `2`, это первое значение, которое в логическом контексте даст `true`.
-
-```js
-//+ run
-alert( null || 2 || undefined );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md
deleted file mode 100644
index f6e93650..00000000
--- a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Что выведет alert (ИЛИ)?
-
-[importance 5]
-
-Что выведет код ниже?
-
-```js
-alert( null || 2 || undefined );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md b/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md
deleted file mode 100644
index 30fce045..00000000
--- a/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Ответ: сначала `1`, затем `2`.
-
-```js
-//+ run
-alert( alert(1) || 2 || alert(3) );
-```
-
-Вызов `alert` не возвращает значения, или, иначе говоря, возвращает `undefined`.
-
-<ol>
-<li>Первый оператор ИЛИ `||` выполнит первый `alert(1)`, получит `undefined` и пойдёт дальше, ко второму операнду.</li>
-<li>Так как второй операнд `2` является истинным, то вычисления завершатся, результатом `undefined || 2` будет `2`, которое будет выведено внешним `alert( .... )`.</li>
-</ol>
-
-Второй оператор `||` не будет выполнен, выполнение до `alert(3)` не дойдёт, поэтому `3` выведено не будет.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md b/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md
deleted file mode 100644
index 1d4ed593..00000000
--- a/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Что выведет alert (ИЛИ)?
-
-[importance 3]
-
-Что выведет код ниже?
-
-```js
-alert( alert(1) || 2 || alert(3) );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md
deleted file mode 100644
index c91e674a..00000000
--- a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Ответ: `null`, это первое ложное значение из списка.
-
-```js
-//+ run
-alert( 1 && null && 2 );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md
deleted file mode 100644
index 38fee457..00000000
--- a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Что выведет alert (И)?
-
-[importance 5]
-
-Что выведет код ниже?
-
-```js
-alert( 1 && null && 2 );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md b/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md
deleted file mode 100644
index 83a88c73..00000000
--- a/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-Ответ: `1`, а затем `undefined`.
-
-```js
-//+ run
-alert( alert(1) && alert(2) );
-```
-
-Вызов `alert` не возвращает значения, или, иначе говоря, возвращает `undefined`.
-
-Поэтому до правого `alert` дело не дойдёт, вычисления закончатся на левом.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md b/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md
deleted file mode 100644
index 2d1594d9..00000000
--- a/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Что выведет alert (И)?
-
-[importance 3]
-
-Что выведет код ниже?
-
-```js
-alert( alert(1) && alert(2) );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/5-alert-and-or/solution.md b/1-js/2-first-steps/13-logical-ops/5-alert-and-or/solution.md
deleted file mode 100644
index e02d8e49..00000000
--- a/1-js/2-first-steps/13-logical-ops/5-alert-and-or/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Ответ: `3`.
-
-```js
-//+ run
-alert( null || 2 && 3 || 4 );
-```
-
-Приоритет оператора  `&&` выше, чем `||`, поэтому он выполнится первым.
-
-Последовательность вычислений:
-```
-null || 2 && 3 || 4
-null || 3 || 4
-3
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/5-alert-and-or/task.md b/1-js/2-first-steps/13-logical-ops/5-alert-and-or/task.md
deleted file mode 100644
index 9e367c3b..00000000
--- a/1-js/2-first-steps/13-logical-ops/5-alert-and-or/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Что выведет этот код?
-
-[importance 5]
-
-Что выведет код ниже?
-
-```js
-alert( null || 2 && 3 || 4 );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/6-check-if-in-range/task.md b/1-js/2-first-steps/13-logical-ops/6-check-if-in-range/task.md
deleted file mode 100644
index df16ad99..00000000
--- a/1-js/2-first-steps/13-logical-ops/6-check-if-in-range/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Проверка if внутри диапазона
-
-[importance 3]
-
-Напишите условие `if` для проверки того факта, что переменная `age` находится между `14` и `90` включительно.
-
-"Включительно" означает, что концы промежутка включены, то есть `age` может быть равна `14` или `90`. 
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/solution.md b/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/solution.md
deleted file mode 100644
index 3d2eab1a..00000000
--- a/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Первый вариант:
-
-```js
-if (!(age >= 14 && age <= 90))
-```
-
-Второй вариант:
-
-```js
-if (age < 14 || age > 90)
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/task.md b/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/task.md
deleted file mode 100644
index 1d833664..00000000
--- a/1-js/2-first-steps/13-logical-ops/7-check-if-out-range/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Проверка if вне диапазона
-
-[importance 3]
-
-Напишите условие `if` для проверки того факта, что `age` НЕ находится между 14 и 90 включительно.
-
-Сделайте два варианта условия: первый с использованием оператора НЕ `!`, второй - без этого оператора.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/8-if-question/solution.md b/1-js/2-first-steps/13-logical-ops/8-if-question/solution.md
deleted file mode 100644
index f1b83dab..00000000
--- a/1-js/2-first-steps/13-logical-ops/8-if-question/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Ответ: первое и третье выполнятся. 
-
-Детали:
-
-```js
-//+ run
-// Выполнится
-// Результат -1 || 0 = -1, в логическом контексте true
-if (-1 || 0) alert( 'первое' );
-
-// Не выполнится
-// -1 && 0 = 0,  в логическом контексте false
-if (-1 && 0) alert( 'второе' );
-
-// Выполнится
-// оператор && имеет больший приоритет, чем ||
-// так что -1 && 1 выполнится раньше
-// вычисления: null || -1 && 1 -> null || 1 -> 1
-if (null || -1 && 1) alert( 'третье' );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/8-if-question/task.md b/1-js/2-first-steps/13-logical-ops/8-if-question/task.md
deleted file mode 100644
index ee7018b6..00000000
--- a/1-js/2-first-steps/13-logical-ops/8-if-question/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Вопрос про "if"
-
-[importance 5]
-
-Какие из этих `if` верны, т.е. выполнятся? 
-
-Какие конкретно значения будут результатами выражений в условиях `if(...)`?
-
-```js
-if (-1 || 0) alert( 'первое' );
-if (-1 && 0) alert( 'второе' );
-if (null || -1 && 1) alert( 'третье' );
-```
-
diff --git a/1-js/2-first-steps/13-logical-ops/article.md b/1-js/2-first-steps/13-logical-ops/article.md
deleted file mode 100644
index c81990db..00000000
--- a/1-js/2-first-steps/13-logical-ops/article.md
+++ /dev/null
@@ -1,282 +0,0 @@
-# Логические операторы
-
-Для операций над логическими значениями в JavaScript есть `||` (ИЛИ), `&&` (И) и `!` (НЕ). 
-
-Хоть они и называются *"логическими"*, но в JavaScript могут применяться к значениям любого типа и возвращают также значения любого типа.
-[cut]
-
-## || (ИЛИ)
-
-Оператор ИЛИ выглядит как двойной символ вертикальной черты:
-
-```js
-result = a || b;
-```
-
-Логическое ИЛИ в классическом программировании работает следующим образом: "если *хотя бы один* из аргументов `true`, то возвращает `true`, иначе -- `false`". В JavaScript, как мы увидим далее, это не совсем так, но для начала рассмотрим только логические значения.
-
-Получается следующая "таблица результатов":
-
-```js
-//+ run
-alert( true || true ); // true
-alert( false || true ); // true
-alert( true || false ); // true
-alert( false || false ); // false
-```
-
-Если значение не логического типа -- то оно к нему приводится в целях вычислений. Например, число `1` будет воспринято как `true`, а `0` -- как `false`:
-
-```js
-//+ run
-if (1 || 0) { // сработает как if( true || false )
-  alert( 'верно' );
-}
-```
-
-Обычно оператор ИЛИ используется в `if`, чтобы проверить, выполняется ли хотя бы одно из условий, например:
-
-```js
-//+ run
-var hour = 9;
-
-*!*
-if (hour < 10 || hour > 18) {
-*/!*
-  alert( 'Офис до 10 или после 18 закрыт' );
-}
-```
-
-Можно передать и больше условий:
-
-```js
-//+ run
-var hour = 12,
-  isWeekend = true;
-
-if (hour < 10 || hour > 18 || isWeekend) {
-  alert( 'Офис до 10 или после 18 или в выходной закрыт' );
-}
-```
-
-## Короткий цикл вычислений
-
-
-JavaScript вычисляет несколько ИЛИ слева направо. При этом, чтобы экономить ресурсы, используется так называемый *"короткий цикл вычисления"*. 
-
-Допустим, вычисляются несколько ИЛИ подряд: `a || b || c || ...`. Если первый аргумент -- `true`, то результат заведомо будет `true` (хотя бы одно из значений -- `true`), и остальные значения игнорируются.
-
-Это особенно заметно, когда выражение, переданное в качестве второго аргумента, имеет *сторонний эффект* -- например, присваивает переменную. 
-
-При запуске примера ниже присвоение `x` не произойдёт:
-
-```js
-//+ run no-beautify
-var x;
-
-*!*true*/!* || (x = 1);  
-
-alert(x); // undefined, x не присвоен
-```
-
-...А в примере ниже первый аргумент -- `false`, так что ИЛИ попытается вычислить второй, запустив тем самым присваивание:
-
-```js
-//+ run no-beautify
-var x;
-
-*!*false*/!* || (x = 1);
-
-alert(x); // 1
-```
-
-## Значение ИЛИ
-
-[quote author="Илья Канатов, участник курса JavaScript"]
-`||` запинается на "правде",<br>
-`&&` запинается на "лжи".
-[/quote]
-
-Итак, как мы видим, оператор ИЛИ вычисляет ровно столько значений, сколько необходимо -- до первого `true`.
-
-При этом оператор ИЛИ возвращает то значение, на котором остановились вычисления. Причём, не преобразованное к логическому типу.
-
-Например:
-
-```js
-//+ run
-alert( 1 || 0 ); // 1 
-alert( true || 'неважно что' ); // true
-
-alert( null || 1 ); // 1
-alert( undefined || 0 ); // 0
-```
-
-Это используют, в частности, чтобы выбрать первое "истинное" значение из списка:
-
-```js
-//+ run
-var undef; // переменная не присвоена, т.е. равна undefined
-var zero = 0;
-var emptyStr = "";
-var msg = "Привет!";
-
-*!*
-var result = undef || zero || emptyStr || msg || 0;
-*/!*
-
-alert( result ); // выведет "Привет!" - первое значение, которое является true
-```
-
-Если все значения "ложные", то `||` возвратит последнее из них:
-
-```js
-//+ run
-alert( undefined || '' || false || 0 ); // 0
-```
-
-Итак, оператор `||` вычисляет операнды слева направо до первого "истинного" и возвращает его, а если все ложные -- то последнее значение.
-
-Иначе можно сказать, что "`||` запинается на правде".
-
-## && (И)
-
-
-Оператор И пишется как два амперсанда `&&`:
-
-```js
-result = a && b;
-```
-
-В классическом программировании И возвращает `true`, если оба аргумента истинны, а иначе -- `false`:
-
-```js
-//+ run
-alert( true && true ); // true
-alert( false && true ); // false
-alert( true && false ); // false
-alert( false && false ); // false
-```
-
-Пример c `if`:
-
-```js
-//+ run
-var hour = 12,
-  minute = 30;
-
-if (hour == 12 && minute == 30) {
-  alert( 'Время 12:30' );
-}
-```
-
-Как и в ИЛИ, в И допустимы любые значения:
-
-```js
-//+ run
-if (1 && 0) { // вычислится как true && false
-  alert( 'не сработает, т.к. условие ложно' );
-}
-```
-
-К И применим тот же принцип "короткого цикла вычислений", но немного по-другому, чем к ИЛИ.
-
-Если левый аргумент -- `false`, оператор И возвращает его и заканчивает вычисления. Иначе -- вычисляет и возвращает правый аргумент.
-
-Например:
-
-```js
-//+ run
-// Первый аргумент - true, 
-// Поэтому возвращается второй аргумент
-alert( 1 && 0 ); // 0
-alert( 1 && 5 ); // 5
-
-// Первый аргумент - false,
-// Он и возвращается, а второй аргумент игнорируется
-alert( null && 5 ); // null
-alert( 0 && "не важно" ); // 0
-```
-
-Можно передать и несколько значений подряд, при этом возвратится первое "ложное" (на котором остановились вычисления), а если его нет -- то последнее:
-
-```js
-//+ run
-alert( 1 && 2 && null && 3 ); // null
-
-alert( 1 && 2 && 3 ); // 3
-```
-
-Итак, оператор `&&` вычисляет операнды слева направо до первого "ложного" и возвращает его, а если все истинные -- то последнее значение.
-
-Иначе можно сказать, что "`&&` запинается на лжи".
-
-[smart header="Приоритет у `&&` больше, чем у `||`"]
-Приоритет оператора И `&&` больше, чем ИЛИ `||`, так что он выполняется раньше.
-
-Поэтому в следующем коде сначала будет вычислено правое И: `1 && 0 = 0`, а уже потом -- ИЛИ.
-
-```js
-//+ run
-alert( 5 || 1 && 0 ); // 5
-```
-[/smart]
-
-[warn header="Не используйте `&&` вместо `if`"]
-
-Оператор `&&` в простых случаях можно использовать вместо `if`, например:
-
-```js
-//+ run
-var x = 1;
-
-(x > 0) && alert( 'Больше' );
-```
-
-Действие в правой части `&&` выполнится только в том случае, если до него дойдут вычисления. То есть, `alert` сработает, если в левой части будет `true`.
-
-Получился аналог:
-
-```js
-//+ run
-var x = 1;
-
-if (x > 0) {
-  alert( 'Больше' );
-}
-```
-
-Однако, как правило, вариант с `if` лучше читается и воспринимается. Он более очевиден, поэтому лучше использовать его. Это, впрочем, относится и к другим неочевидным применениям возможностей языка.
-[/warn]
-
-## ! (НЕ)
-
-Оператор НЕ -- самый простой. Он получает один аргумент. Синтаксис:
-
-```js
-var result = !value;
-```
-
-Действия `!`:
-
-<ol>
-<li>Сначала приводит аргумент к логическому типу `true/false`.</li>
-<li>Затем возвращает противоположное значение.</li>
-</ol>
-
-Например:
-
-```js
-//+ run
-alert( !true ); // false
-alert( !0 ); // true
-```
-
-**В частности, двойное НЕ используют для преобразования значений к логическому типу:**
-
-```js
-//+ run
-alert( !!"строка" ); // true
-alert( !!null ); // false
-```
-
diff --git a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md
deleted file mode 100644
index 7a0cbf25..00000000
--- a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-```js
-//+ no-beautify
-"" + 1 + 0 = "10" // (1)
-"" - 1 + 0 = -1 // (2)
-true + false = 1
-6 / "3" = 2 
-"2" * "3" = 6
-4 + 5 + "px" = "9px"
-"$" + 4 + 5
 = "$45"
-"4" - 2
 = 2 
-"4px" - 2
 = NaN
-7 / 0
 = Infinity 
-" -9\n" + 5 = " -9\n5"
-" -9\n" - 5 = -14
-5 && 2
 = 2
-2 && 5
 = 5
-5 || 0
 = 5
-0 || 5 = 5
-null + 1 = 1 // (3)
-undefined + 1 = NaN // (4)
-null == "\n0\n" = false // (5)
-+null == +"\n0\n" = true // (6)
-```
-
-<ol>
-<li>Оператор `"+"` в данном случае прибавляет `1` как строку, и затем `0`.</li>
-<li>Оператор `"-"` работает только с числами, так что он сразу приводит `""` к `0`.</li>
-<li>`null` при численном преобразовании становится `0`</li>
-<li>`undefined` при численном преобразовании становится `NaN`</li>
-<li>При сравнении `==` с `null` преобразования не происходит, есть жёсткое правило: `null == undefined` и только.</li>
-<li>И левая и правая часть `==` преобразуются к числу `0`.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md
deleted file mode 100644
index 1c2c953f..00000000
--- a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Вопросник по преобразованиям, для примитивов
-
-[importance 5]
-
-Подумайте, какой результат будет у выражений ниже. Тут не только преобразования типов. Когда закончите -- сверьтесь с решением.
-
-```js
-//+ no-beautify
-"" + 1 + 0 
-"" - 1 + 0
-true + false
-6 / "3"
-"2" * "3"
-4 + 5 + "px"
-"$" + 4 + 5
 
-"4" - 2
 
-"4px" - 2

-7 / 0
 
-"  -9\n" + 5 
-"  -9\n" - 5
-5 && 2

-2 && 5

-5 || 0

-0 || 5
-null + 1
-undefined + 1
-null == "\n0\n" 
-+null == +"\n0\n" 
-```
-
diff --git a/1-js/2-first-steps/14-types-conversion/article.md b/1-js/2-first-steps/14-types-conversion/article.md
deleted file mode 100644
index 3c7d44ab..00000000
--- a/1-js/2-first-steps/14-types-conversion/article.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Преобразование типов для примитивов
-
-Система преобразования типов в JavaScript очень проста, но отличается от других языков. Поэтому она часто служит "камнем преткновения" для приходящих из других языков программистов.
-[cut]
-Всего есть три преобразования:
-<ol>
-<li>Cтроковое преобразование.</li>
-<li>Числовое преобразование.</li>
-<li>Преобразование к логическому значению.</li>
-</ol>
-
-**Эта глава описывает преобразование только примитивных значений, объекты разбираются далее.**
-
-
-## Строковое преобразование   
-
-Строковое преобразование происходит, когда требуется представление чего-либо в виде строки. Например, его производит функция `alert`.
-
-```js
-//+ run
-var a = true;
-
-alert( a ); // "true"
-```
-
-Можно также осуществить преобразование явным вызовом `String(val)`:
-
-```js
-//+ run
-alert( String(null) === "null" ); // true
-```
-
-Как видно из примеров выше, преобразование происходит наиболее очевидным способом, "как есть": `false` становится `"false"`, `null` -- `"null"`, `undefined` -- `"undefined"` и т.п.
-
-Также для явного преобразования применяется оператор `"+"`, у которого один из аргументов строка. В этом случае он приводит к строке и другой аргумент, например:
-
-```js
-//+ run
-alert( true + "test" ); // "truetest"
-alert( "123" + undefined ); // "123undefined"
-```
-
-## Численное преобразование   
-
-Численное преобразование происходит в математических функциях и выражениях, а также при сравнении данных различных типов (кроме сравнений `===`, `!==`).
-
-Для преобразования к числу в явном виде можно вызвать `Number(val)`, либо, что короче, поставить перед выражением унарный плюс `"+"`:
-
-```js
-var a = +"123"; // 123
-var a = Number("123"); // 123, тот же эффект
-```
-
-<table>
-<thead>
-<tr><th>Значение</th><th>Преобразуется в...</th></tr>
-</thead>
-<tbody>
-<tr><td>`undefined`</td><td>`NaN`</td></tr>
-<tr><td>`null`</td><td>`0`</td></tr>
-<tr><td>`true / false`</td><td>`1 / 0`</td></tr>
-<tr><td>Строка</td><td>Пробельные символы по краям обрезаются.<br>Далее, если остаётся пустая строка, то `0`, иначе из непустой строки "считывается" число, при ошибке результат `NaN`.</td></tr>
-</tbody>
-</table>
-
-Например:
-
-```js
-//+ run
-// после обрезания пробельных символов останется "123"
-alert( +"   \n  123   \n  \n" ); // 123
-```
-
-Ещё примеры:
-<ul>
-<li>Логические значения:
-
-```js
-//+ run
-alert( +true ); // 1
-alert( +false ); // 0
-```
-
-</li>
-<li>Сравнение разных типов -- значит численное преобразование:
-
-```js
-//+ run
-alert( "\n0 " == 0 ); // true
-```
-
-При этом строка `"\n0"` преобразуется к числу, как указано выше: начальные и конечные пробелы обрезаются, получается  строка `"0"`, которая равна `0`.</li>
-</li>
-<li>С логическими значениями:
-
-```js
-//+ run
-alert( "\n" == false );
-alert( "1" == true );
-```
-
-Здесь сравнение `"=="` снова приводит обе части к числу. В первой строке слева и справа получается `0`, во второй `1`.
-</li>
-</ul>
-
-### Специальные значения
-
-Посмотрим на поведение специальных значений более внимательно.
-
-**Интуитивно, значения `null/undefined` ассоциируются с нулём, но при преобразованиях ведут себя иначе.**
-
-Специальные значения преобразуются к числу так:
-<table class="bordered">
-<tr><th>Значение</th><th>Преобразуется в...</th></tr>
-<tr><td>`undefined`</td><td>`NaN`</td></tr>
-<tr><td>`null`</td><td>`0`</td></tr>
-</table>
-
-Это преобразование осуществляется при арифметических операциях и сравнениях `> >= < <=`, но не при проверке равенства `==`. Алгоритм проверки равенства для этих значений в спецификации прописан отдельно (пункт [11.9.3](http://es5.github.com/x11.html#x11.9.3)). В нём считается, что `null` и `undefined` равны `"=="` между собой, но эти значения не равны никакому другому значению.
-
-Это ведёт к забавным последствиям. 
-
-Например, `null` не подчиняется законам математики -- он "больше либо равен нулю": `null>=0`, но не больше и не равен:
-
-```js
-//+ run
-alert( null >= 0 ); // true, т.к. null преобразуется к 0
-alert( null > 0 ); // false (не больше), т.к. null преобразуется к 0
-alert( null == 0 ); // false (и не равен!), т.к. == рассматривает null особо.
-```
-
-Значение `undefined` вообще "несравнимо":
-
-```js
-//+ run
-alert( undefined > 0 ); // false, т.к. undefined -> NaN
-alert( undefined == 0 ); // false, т.к. это undefined (без преобразования)
-alert( undefined < 0 ); // false, т.к. undefined -> NaN
-```
-
-**Для более очевидной работы кода и во избежание ошибок лучше не давать специальным значениям участвовать в сравнениях `> >= < <=`.** 
-
-Используйте в таких случаях переменные-числа или приводите к числу явно.
- 
-## Логическое преобразование
-
-Преобразование к `true/false` происходит в логическом контексте, таком как `if(value)`, и при применении логических операторов.
-
-Все значения, которые интуитивно "пусты", становятся `false`. Их несколько: `0`, пустая строка, `null`, `undefined` и `NaN`. 
-
-Остальное, в том числе и любые объекты -- `true`.
-
-Полная таблица преобразований:
-
-<table class="bordered">
-<tr><th>Значение</th><th>Преобразуется в...</th></tr>
-<tr><td>`undefined`, `null`</td><td>`false`</td></tr>
-<tr><td>Числа</td><td>Все `true`, кроме `0`, `NaN` -- `false`.</td></tr>
-<tr><td>Строки</td><td>Все `true`, кроме пустой строки `""` -- `false`</td></tr>
-<tr><td>Объекты</td><td>Всегда `true`</td></tr>
-</table>
-
-**Для явного преобразования используется двойное логическое отрицание `!!value` или вызов `Boolean(value)`.**
-
-[warn header="Обратите внимание: строка `\"0\"` становится `true`"]
-В отличие от многих языков программирования (например PHP), `"0"` в JavaScript является `true`, как и строка из пробелов:
-
-```js
-//+ run
-alert( !!"0" ); // true
-alert( !!" " ); // любые непустые строки, даже из пробелов - true!
-```
-
-[/warn]
-
-
-Логическое преобразование интересно тем, как оно сочетается с численным.
-
-**Два значения могут быть равны, но одно из них в логическом контексте `true`, другое -- `false`**.
-
-Например, равенство в следующем примере верно, так как происходит численное преобразование:
-
-```js
-//+ run
-alert( 0 == "\n0\n" ); // true
-```
-
-...А в логическом контексте левая часть даст `false`, правая -- `true`:
-
-```js
-//+ run
-if ("\n0\n") {
-  alert( "true, совсем не как 0!" );
-}
-```
-
-С точки зрения преобразования типов в JavaScript это совершенно нормально. При равенстве -- численное преобразование, а в `if` -- логическое, только и всего.
-
-## Итого
-
-В JavaScript есть три преобразования:
-
-<ol>
-<li>Строковое: `String(value)` -- в строковом контексте или при сложении со строкой. Работает очевидным образом.</li>
-<li>Численное: `Number(value)` -- в численном контексте, включая унарный плюс `+value`. Происходит при сравнении разных типов, кроме строгого равенства.</li>
-<li>Логическое: `Boolean(value)` -- в логическом контексте, можно также сделать двойным НЕ: `!!value`.</li>
-</ol>
-
-Точные таблицы преобразований даны выше в этой главе.
-
-Особым случаем является проверка равенства с `null` и `undefined`. Они равны друг другу, но не равны чему бы то ни было ещё, этот случай прописан особо в спецификации. 
-
diff --git a/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md b/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md
deleted file mode 100644
index 15c634c9..00000000
--- a/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Ответ: `1`.
-
-```js
-//+ run
-var i = 3;
-
-while (i) {
-  alert( i-- );
-}
-```
-
-Каждое выполнение цикла уменьшает `i`. Проверка `while(i)` даст сигнал "стоп" при `i = 0`. 
-
-Соответственно, шаги цикла:
-
-```js
-var i = 3
-alert( i-- ); // выведет 3, затем уменьшит i до 2
-
-alert(i--) // выведет 2, затем уменьшит i до 1
-
-alert(i--) // выведет 1, затем уменьшит i до 0
-
-// все, проверка while(i) не даст выполняться циклу дальше
-```
-
diff --git a/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md b/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md
deleted file mode 100644
index 25359633..00000000
--- a/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Последнее значение цикла
-
-[importance 3]
-
-Какое последнее значение выведет этот код? Почему?
-
-```js
-var i = 3;
-
-while (i) {
-  alert( i-- );
-}
-```
-
diff --git a/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md b/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md
deleted file mode 100644
index f7e77582..00000000
--- a/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md
+++ /dev/null
@@ -1,31 +0,0 @@
-<ol>
-<li>**От 1 до 4**
-
-```js
-//+ run
-var i = 0;
-while (++i < 5) alert( i );
-```
-
-Первое значение: `i=1`, так как операция `++i` сначала увеличит `i`, а потом уже произойдёт сравнение и выполнение `alert`.
-
-Далее `2,3,4..` Значения выводятся одно за другим. Для каждого значения сначала происходит увеличение, а потом -- сравнение, так как `++` стоит перед переменной. 
-
-При `i=4` произойдет увеличение `i` до `5`, а потом сравнение `while(5 < 5)` -- это неверно. Поэтому на этом цикл остановится, и значение `5` выведено не будет.
-</li>
-<li>**От 1 до 5**
-
-```js
-//+ run
-var i = 0;
-while (i++ < 5) alert( i );
-```
-
-Первое значение: `i=1`. Остановимся на нём подробнее. Оператор `i++` увеличивает `i`, возвращая старое значение, так что в сравнении `i++ < 5` будет участвовать старое `i=0`.
-
-Но последующий вызов `alert` уже не относится к этому выражению, так что получит новый `i=1`.
-
-Далее `2,3,4..` Для каждого значения сначала происходит сравнение, а потом -- увеличение, и затем срабатывание `alert`.
-
-Окончание цикла: при `i=4` произойдет сравнение `while(4 < 5)` -- верно, после этого сработает `i++`, увеличив  `i` до `5`, так что значение `5` будет выведено. Оно станет последним.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/2-which-value-while/task.md b/1-js/2-first-steps/15-while-for/2-which-value-while/task.md
deleted file mode 100644
index 674f005b..00000000
--- a/1-js/2-first-steps/15-while-for/2-which-value-while/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Какие значения i выведет цикл while?
-
-[importance 4]
-
-Для каждого цикла запишите, какие значения он выведет. Потом сравните с ответом.
-<ol>
-<li>Префиксный вариант
-
-```js
-var i = 0;
-while (++i < 5) alert( i );
-```
-
-</li>
-<li>Постфиксный вариант
-
-```js
-var i = 0;
-while (i++ < 5) alert( i );
-```
-
-</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md b/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md
deleted file mode 100644
index 941a07be..00000000
--- a/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md
+++ /dev/null
@@ -1,17 +0,0 @@
-**Ответ: от 0 до 4 в обоих случаях.**
-
-```js
-//+ run
-for (var i = 0; i < 5; ++i) alert( i );
-
-for (var i = 0; i < 5; i++) alert( i );
-```
-
-Такой результат обусловлен алгоритмом работы `for`:
-<ol>
-<li>Выполнить присвоение `i=0`</li>
-<li>Проверить `i<5`</li>
-<li>Если верно - выполнить тело цикла `alert(i)`, затем выполнить `i++`</li>
-</ol>
-
-Увеличение `i++` выполняется отдельно от проверки условия (2), значение `i` при этом не используется, поэтому нет никакой разницы между `i++` и `++i`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/3-which-value-for/task.md b/1-js/2-first-steps/15-while-for/3-which-value-for/task.md
deleted file mode 100644
index e918c89c..00000000
--- a/1-js/2-first-steps/15-while-for/3-which-value-for/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Какие значения i выведет цикл for?
-
-[importance 4]
-
-Для каждого цикла запишите, какие значения он выведет. Потом сравните с ответом.
-<ol>
-<li>Постфиксная форма:
-
-```js
-for (var i = 0; i < 5; i++) alert( i );
-```
-
-</li>
-<li>Префиксная форма:
-
-```js
-for (var i = 0; i < 5; ++i) alert( i );
-```
-
-</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/4-for-even/solution.md b/1-js/2-first-steps/15-while-for/4-for-even/solution.md
deleted file mode 100644
index 62ca05c7..00000000
--- a/1-js/2-first-steps/15-while-for/4-for-even/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-```js
-//+ run demo
-for (var i = 2; i <= 10; i++) {
-  if (i % 2 == 0) {
-    alert( i );
-  }
-}
-```
-
-Чётность проверяется по остатку при делении на `2`, используя оператор "деление с остатком" `%`: `i % 2`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/4-for-even/task.md b/1-js/2-first-steps/15-while-for/4-for-even/task.md
deleted file mode 100644
index d20029d0..00000000
--- a/1-js/2-first-steps/15-while-for/4-for-even/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Выведите чётные числа
-
-[importance 5]
-
-При помощи цикла `for` выведите чётные числа от `2` до `10`.
-
-[demo /]
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md b/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md
deleted file mode 100644
index 84915ab4..00000000
--- a/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-```js
-//+ run
-var i = 0;
-while (i < 3) {
-  alert( "номер " + i + "!" );
-  i++;
-}
-```
-
diff --git a/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md b/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md
deleted file mode 100644
index 2da6d6f2..00000000
--- a/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Замените for на while
-
-[importance 5]
-
-Перепишите код, заменив цикл `for` на `while`, без изменения поведения цикла.
-
-```js
-//+ run
-for (var i = 0; i < 3; i++) {
-  alert( "номер " + i + "!" );
-}
-```
-
diff --git a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md
deleted file mode 100644
index 49d5396e..00000000
--- a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-```js
-//+ run demo
-var num;
-
-do {
-  num = prompt("Введите число больше 100?", 0);
-} while (num <= 100 && num != null);
-```
-
-Цикл `do..while` повторяется, пока верны две проверки:
-<ol>
-<li>Проверка `num <= 100` -- то есть, введённое число всё еще меньше `100`.</li>
-<li>Проверка `num != null` -- значение `null` означает, что посетитель нажал "Отмена", в этом случае цикл тоже нужно прекратить.</li>
-</ol>
-
-Кстати, сравнение `num <= 100` при вводе `null` даст `true`, так что вторая проверка необходима.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md
deleted file mode 100644
index 4c2fbedc..00000000
--- a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Повторять цикл, пока ввод неверен
-
-[importance 5]
-
-Напишите цикл, который предлагает `prompt` ввести число, большее `100`. Если посетитель ввёл другое число -- попросить ввести ещё раз, и так далее. 
-
-Цикл должен спрашивать число пока либо посетитель не введёт число, большее `100`, либо не нажмёт кнопку Cancel (ESC).
-
-Предполагается, что посетитель вводит только числа. Предусматривать обработку нечисловых строк в этой задаче необязательно.
-
-[demo /]
diff --git a/1-js/2-first-steps/15-while-for/7-list-primes/solution.md b/1-js/2-first-steps/15-while-for/7-list-primes/solution.md
deleted file mode 100644
index eead33a3..00000000
--- a/1-js/2-first-steps/15-while-for/7-list-primes/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Схема решения
-
-```js
-Для всех i от 1 до 10 {
-  проверить, делится ли число i на какое - либо из чисел до него
-  если делится, то это i не подходит, берем следующее
-  если не делится, то i - простое число
-}
-```
-
-# Решение
-
-Решение с использованием метки:
-
-```js
-//+ run
-nextPrime:
-  for (var i = 2; i < 10; i++) {
-
-    for (var j = 2; j < i; j++) {
-      if (i % j == 0) continue nextPrime;
-    }
-
-    alert( i ); // простое
-  }
-```
-
-Конечно же, его можно оптимизировать с точки зрения производительности. Например, проверять все `j` не от `2` до `i`, а от `2` до квадратного корня из `i`. А для очень больших чисел -- существуют более эффективные специализированные алгоритмы проверки простоты числа, например [квадратичное решето](http://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%BE%D0%B4_%D0%BA%D0%B2%D0%B0%D0%B4%D1%80%D0%B0%D1%82%D0%B8%D1%87%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B5%D1%88%D0%B5%D1%82%D0%B0) и [решето числового поля](http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%89%D0%B8%D0%B9_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4_%D1%80%D0%B5%D1%88%D0%B5%D1%82%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D0%BE%D0%BB%D1%8F).
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/7-list-primes/task.md b/1-js/2-first-steps/15-while-for/7-list-primes/task.md
deleted file mode 100644
index 51f8c29f..00000000
--- a/1-js/2-first-steps/15-while-for/7-list-primes/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Вывести простые числа
-
-[importance 3]
-
-Натуральное число, большее 1, называется *простым*, если оно ни на что не делится, кроме себя и `1`.
-
-Другими словами, <code>n&gt;1</code> - простое, если при делении на любое число от `2` до `n-1` есть остаток.
-
-**Создайте код, который выводит все простые числа из интервала от `2` до `10`.** Результат должен быть: `2,3,5,7`.
-
-P.S. Код также должен легко модифицироваться для любых других интервалов.
-
diff --git a/1-js/2-first-steps/15-while-for/article.md b/1-js/2-first-steps/15-while-for/article.md
deleted file mode 100644
index 71991707..00000000
--- a/1-js/2-first-steps/15-while-for/article.md
+++ /dev/null
@@ -1,349 +0,0 @@
-# Циклы while, for
-
-При написании скриптов зачастую встает задача сделать однотипное действие много раз.
-
-Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код. 
-
-Для многократного повторения одного участка кода - предусмотрены *циклы*.
-[cut]
-## Цикл while
-
-Цикл `while` имеет вид:
-
-```js
-while (условие) {
-  // код, тело цикла
-}
-```
-
-Пока `условие` верно -- выполняется код из тела цикла.
-
-Например, цикл ниже выводит `i` пока `i < 3`:
-
-```js
-//+ run
-var i = 0;
-while (i < 3) {
-  alert( i );
-  i++;
-}
-```
-
-**Повторение цикла по-научному называется *"итерация"*. Цикл в примере выше совершает три итерации.**
-
-Если бы `i++` в коде выше не было, то цикл выполнялся бы (в теории) вечно. На практике, браузер выведет сообщение о "зависшем" скрипте и посетитель его остановит.
-
-**Бесконечный цикл** можно сделать и проще:
-
-```js
-while (true) {
-  // ...
-}
-```
-
-**Условие в скобках интерпретируется как логическое значение, поэтому вместо `while (i!=0)` обычно пишут `while (i)`**:
-
-```js
-//+ run
-var i = 3;
-*!*
-while (i) { // при i, равном 0, значение в скобках будет false и цикл остановится
-*/!*
-  alert( i );
-  i--;
-}
-```
-
-## Цикл do..while 
-
-Проверку условия можно поставить *под* телом цикла, используя специальный синтаксис `do..while`:
-
-```js
-do {
-  // тело цикла
-} while (условие);
-```
-
-Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
-
-Например:
-
-```js
-//+ run
-var i = 0;
-do {
-  alert( i );
-  i++;
-} while (i < 3);
-```
-
-Синтаксис `do..while` редко используется, т.к. обычный `while` нагляднее -- в нём не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.
-
-
-## Цикл for 
-
-Чаще всего применяется цикл `for`. Выглядит он так:
-
-```js
-for (начало; условие; шаг) {
-  // ... тело цикла ...
-}
-```
-
-Пример цикла, который выполняет `alert(i)` для `i` от `0` до `2` включительно (до `3`):
-
-```js
-//+ run
-var i;
-
-for (i = 0; i < 3; i++) {
-  alert( i );
-}
-```
-
-Здесь:
-<ul>
-<li>**Начало:** `i=0`.</li>
-<li>**Условие:** `i<3`.</li>
-<li>**Шаг:** `i++`.</li>
-<li>**Тело:** `alert(i)`, т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)</li>
-</ul>
-
-Цикл выполняется так:
-
-<ol>
-<li>Начало: `i=0` выполняется один-единственный раз, при заходе в цикл.</li>
-<li>Условие: `i<3` проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.</li>
-<li>Тело: `alert(i)`.</li>
-<li>Шаг: `i++` выполняется после *тела* на каждой итерации, но перед проверкой условия.</li>
-<li>Идти на шаг 2.</li>
-</ol>
-
-Иными словами, поток выполнения: `начало` -> (если `условие` -> `тело` -> `шаг`) -> (если `условие` -> `тело` -> `шаг`) -> ... и так далее, пока верно `условие`.
-
-[smart]
-В цикле также можно определить переменную:
-
-```js
-//+ run no-beautify
-for (*!*var*/!* i = 0; i < 3; i++) {
-  alert(i); // 0, 1, 2
-}
-```
-
-Эта переменная будет видна и за границами цикла, в частности, после окончания цикла `i` станет равно `3`.
-[/smart]
-
-## Пропуск частей for
-
-Любая часть `for` может быть пропущена.
-
-Например, можно убрать `начало`. Цикл в примере ниже полностью идентичен приведённому выше:
-
-```js
-//+ run
-var i = 0;
-
-for (; i < 3; i++) {
-  alert( i ); // 0, 1, 2
-}
-```
-
-Можно убрать и `шаг`:
-
-```js
-//+ run
-var i = 0;
-
-for (; i < 3;) {
-  alert( i );
-  // цикл превратился в аналог while (i<3)
-}
-```
-
-А можно и вообще убрать всё, получив бесконечный цикл:
-
-```js
-for (;;) {
-  // будет выполняться вечно 
-}
-```
-
-При этом сами точки с запятой `;` обязательно должны присутствовать, иначе будет ошибка синтаксиса.
-
-[smart header="`for..in`"]
-Существует также специальная конструкция `for..in` для перебора свойств объекта. 
-
-Мы познакомимся с ней позже, когда будем [говорить об объектах](#for..in).
-[/smart]
-
-
-## Прерывание цикла: break
-
-Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент. Эту возможность обеспечивает директива `break`.
-
-Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем -- выдаёт:
-
-```js
-var sum = 0;
-
-while (true) {
-
-  var value = +prompt("Введите число", '');
-
-*!*
-  if (!value) break; // (*)
-*/!*
-
-  sum += value;
-
-}
-alert( 'Сумма: ' + sum );
-```
-
-Директива `break` в строке `(*)`, если посетитель ничего не ввёл, полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на `alert`.
-
-Вообще, сочетание "бесконечный цикл + break" -- отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале-конце цикла, а посередине.
-
-## Следующая итерация: continue [#continue]
-
-Директива `continue` прекращает выполнение *текущей итерации* цикла.
-
-Она -- в некотором роде "младшая сестра" директивы `break`: прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось.
-
-Её используют, если понятно, что на текущем повторе цикла делать больше нечего.
-
-Например, цикл ниже использует `continue`, чтобы не выводить чётные значения:
-
-```js
-//+ run no-beautify
-for (var i = 0; i < 10; i++) {
-  
-  *!*if (i % 2 == 0) continue;*/!*
-
-  alert(i);
-}
-```
-
-Для чётных `i` срабатывает `continue`, выполнение тела прекращается и управление передаётся на следующий проход `for`.
-
-[smart header="Директива `continue` позволяет обойтись без скобок"]
-
-Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так:
-
-```js
-for (var i = 0; i < 10; i++) {
-
-  if (i % 2) {
-    alert( i );
-  }
-
-}
-```
-
-С технической точки зрения он полностью идентичен. Действительно, вместо `continue` можно просто завернуть действия в блок `if`. Однако, мы получили дополнительный уровень вложенности фигурных скобок. Если код внутри `if` более длинный, то это ухудшает читаемость, в отличие от варианта с `continue`.
-[/smart]
-
-[warn header="Нельзя использовать break/continue справа от оператора '?'"]
-Обычно мы можем заменить `if` на оператор вопросительный знак `'?'`.
-
-То есть, запись:
-
-```js
-if (условие) {
-  a();
-} else {
-  b();
-}
-```
-
-...Аналогична записи:
-
-```js
-условие ? a() : b();
-```
-
-В обоих случаях в зависимости от условия выполняется либо `a()` либо `b()`.
-
-Но разница состоит в том, что оператор вопросительный знак `'?'`, использованный во второй записи, возвращает значение. 
-
-**Синтаксические конструкции, которые не возвращают значений, нельзя использовать в операторе `'?'`.** 
-
-К таким относятся большинство конструкций и, в частности, `break/continue`.
-
-Поэтому такой код приведёт к ошибке:
-
-```js
-//+ no-beautify
-(i > 5) ? alert(i) : *!*continue*/!*;
-```
-
-Впрочем, как уже говорилось ранее, оператор вопросительный знак `'?'` не стоит использовать таким образом. Это -- всего лишь ещё одна причина, почему для проверки условия предпочтителен `if`.
-[/warn]
-
-## Метки для break/continue
-
-Бывает нужно выйти одновременно из нескольких уровней цикла.
-
-Например, внутри цикла по `i` находится цикл по `j`, и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:
-
-```js
-//+ run no-beautify
-*!*outer:*/!* for (var i = 0; i < 3; i++) {
-
-  for (var j = 0; j < 3; j++) {
-    
-    var input = prompt('Значение в координатах '+i+','+j, '');
-
-    // если отмена ввода или пустая строка - 
-    // завершить оба цикла
-    if (!input) *!*break outer*/!*; // (*)
-
-  }
-}
-alert('Готово!');
-```
-
-В коде выше для этого использована *метка*.
-
-Метка имеет вид `"имя:"`, имя должно быть уникальным. Она ставится перед циклом, вот так:
-
-```js
-//+ no-beautify
-outer: for (var i = 0; i < 3; i++) { ... }
-```
-
-Можно также выносить её на отдельную строку:
-
-```js
-//+ no-beautify
-outer: 
-for (var i = 0; i < 3; i++) { ... }
-```
-
-Вызов `break outer` ищет ближайший внешний цикл с такой меткой и переходит в его конец.
-
-В примере выше это означает, что будет разорван самый внешний цикл и управление перейдёт на `alert`.
-
-Директива `continue` также может быть использована с меткой, в этом случае управление перепрыгнет на следующую итерацию цикла с меткой. 
-
-## Итого
-
-JavaScript поддерживает три вида циклов:
-<ul>
-<li>`while` -- проверка условия перед каждым выполнением.</li>
-<li>`do..while` -- проверка условия после каждого выполнения.</li>
-<li>`for` -- проверка условия перед каждым выполнением, а также дополнительные настройки.</li>
-</ul>
-
-Чтобы организовать бесконечный цикл, используют конструкцию `while(true)`. При этом он, как и любой другой цикл, может быть прерван директивой `break`.
-
-Если на данной итерации цикла делать больше ничего не надо, но полностью прекращать цикл не следует -- используют директиву `continue`.
-
-Обе этих директивы поддерживают "метки", которые ставятся перед циклом. Метки -- единственный способ для `break/continue` повлиять на выполнение внешнего цикла. 
-
-Заметим, что метки не позволяют прыгнуть в произвольное место кода, в JavaScript нет такой возможности. 
-
-
-
-
diff --git a/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/solution.md b/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/solution.md
deleted file mode 100644
index 1605333f..00000000
--- a/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Если совсем точно следовать условию, то сравнение должно быть строгим `'==='`. 
-
-В реальном случае, скорее всего, подойдёт обычное сравнение `'=='`.
-
-```js
-//+ no-beautify
-if(browser == 'IE') {
-  alert('О, да у вас IE!');
-} else if (browser == 'Chrome'
- || browser == 'Firefox'
- || browser == 'Safari' 
- || browser == 'Opera') {
-  alert('Да, и эти браузеры мы поддерживаем');
-} else {
-  alert('Мы надеемся, что и в вашем браузере все ок!');
-}
-```
-
-Обратите внимание: конструкция `browser == 'Chrome' || browser == 'Firefox' ...` разбита на несколько строк для лучшей читаемости.
-
-Но всё равно запись через `switch` нагляднее.
\ No newline at end of file
diff --git a/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/task.md b/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/task.md
deleted file mode 100644
index 15bf197e..00000000
--- a/1-js/2-first-steps/16-switch/1-rewrite-switch-if-else/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Напишите "if", аналогичный "switch"
-
-[importance 5]
-
-Напишите `if..else`, соответствующий следующему `switch`:
-
-```js
-switch (browser) {
-  case 'IE':
-    alert( 'О, да у вас IE!' );
-    break;
-
-  case 'Chrome':
-  case 'Firefox':
-  case 'Safari':
-  case 'Opera':
-    alert( 'Да, и эти браузеры мы поддерживаем' );
-    break;
-
-  default:
-    alert( 'Мы надеемся, что и в вашем браузере все ок!' );
-}
-```
-
diff --git a/1-js/2-first-steps/16-switch/2-rewrite-if-switch/solution.md b/1-js/2-first-steps/16-switch/2-rewrite-if-switch/solution.md
deleted file mode 100644
index ab738f53..00000000
--- a/1-js/2-first-steps/16-switch/2-rewrite-if-switch/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Первые две проверки -- обычный `case`, третья разделена на два `case`:
-
-```js
-//+ run
-var a = +prompt('a?', '');
-
-switch (a) {
-  case 0:
-    alert( 0 );
-    break;
-
-  case 1:
-    alert( 1 );
-    break;
-
-  case 2:
-  case 3:
-    alert( '2,3' );
-*!*
-    break;
-*/!*
-}
-```
-
-Обратите внимание: `break` внизу не обязателен, но ставится по "правилам хорошего тона".
-
-Допустим, он не стоит. Есть шанс, что в будущем нам понадобится добавить в конец ещё один `case`, например `case 4`, и мы, вполне вероятно, забудем этот `break` поставить. В результате выполнение `case 2`/`case 3` продолжится на `case 4` и будет ошибка.
diff --git a/1-js/2-first-steps/16-switch/2-rewrite-if-switch/task.md b/1-js/2-first-steps/16-switch/2-rewrite-if-switch/task.md
deleted file mode 100644
index a542c993..00000000
--- a/1-js/2-first-steps/16-switch/2-rewrite-if-switch/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Переписать if'ы в switch
-
-[importance 4]
-
-Перепишите код с использованием одной конструкции `switch`:
-
-```js
-//+ run
-var a = +prompt('a?', '');
-
-if (a == 0) {
-  alert( 0 );
-}
-if (a == 1) {
-  alert( 1 );
-}
-
-if (a == 2 || a == 3) {
-  alert( '2,3' );
-}
-```
-
diff --git a/1-js/2-first-steps/16-switch/article.md b/1-js/2-first-steps/16-switch/article.md
deleted file mode 100644
index 9a1f8fff..00000000
--- a/1-js/2-first-steps/16-switch/article.md
+++ /dev/null
@@ -1,186 +0,0 @@
-# Конструкция switch
-
-Конструкция `switch` заменяет собой сразу несколько `if`.
-
-Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
-[cut]
-## Синтаксис
-
-Выглядит она так:
-
-```js
-//+ no-beautify
-switch(x) {
-  case 'value1':  // if (x === 'value1')
-    ...
-    [break]
-
-  case 'value2':  // if (x === 'value2')
-    ...
-    [break]
-
-  default:
-    ...
-    [break]
-}
-```
-
-<ul>
-<li>
-Переменная `x` проверяется на строгое равенство первому значению `value1`, затем второму `value2` и так далее. 
-</li>
-<li>
-Если соответствие установлено -- switch начинает выполняться от соответствующей директивы `case` и далее, *до ближайшего `break`* (или до конца `switch`).
-</li>
-<li>
-Если ни один `case` не совпал -- выполняетcя (если есть) вариант `default`.
-</li>
-</ul>
-
-При этом `case` называют *вариантами `switch`*. 
-
-## Пример работы   
-
-Пример использования `switch` (сработавший код выделен):
-
-```js
-//+ run
-var a = 2 + 2;
-
-switch (a) {
-  case 3:
-    alert( 'Маловато' );
-    break;
-*!*
-  case 4:
-    alert( 'В точку!' );
-    break;
-*/!*
-  case 5:
-    alert( 'Перебор' );
-    break;
-  default:
-    alert( 'Я таких значений не знаю' );
-}
-```
-
-Здесь оператор `switch` последовательно сравнит `a` со всеми вариантами из `case`.
-
-Сначала `3`, затем -- так как нет совпадения -- `4`. Совпадение найдено, будет выполнен этот вариант, со строки `alert('В точку!')` и далее, до ближайшего `break`, который прервёт выполнение.
-
-**Если `break` нет, то выполнение пойдёт ниже по следующим `case`, при этом остальные проверки игнорируются.**
-
-Пример без `break`:
-
-```js
-//+ run
-var a = 2 + 2;
-
-switch (a) {
-  case 3:
-    alert( 'Маловато' );
-*!*
-  case 4:
-    alert( 'В точку!' );
-  case 5:
-    alert( 'Перебор' );
-  default:
-    alert( 'Я таких значений не знаю' );
-*/!*
-}
-```
-
-В примере выше  последовательно выполнятся три `alert`:
-
-```js
-alert( 'В точку!' );
-alert( 'Перебор' );
-alert( 'Я таких значений не знаю' );
-```
-
-В `case` могут быть любые выражения, в том числе включающие в себя переменные и функции.
-
-Например:
-
-```js
-//+ run
-var a = 1;
-var b = 0;
-
-switch (a) {
-*!*
-  case b + 1:
-    alert( 1 );
-    break;
-*/!*
-
-  default:
-    alert('нет-нет, выполнится вариант выше')
-}
-```
-
-## Группировка case
-
-Несколько значений case можно группировать.
-
-В примере ниже `case 3` и `case 5`  выполняют один и тот же код:
-
-```js
-//+ run no-beautify
-var a = 2+2;
-
-switch (a) {
-  case 4:
-    alert('Верно!');
-    break;
-
-*!*
-  case 3:                    // (*)
-  case 5:                    // (**)
-    alert('Неверно!');
-    alert('Немного ошиблись, бывает.');
-    break;
-*/!*
-
-  default:
-    alert('Странный результат, очень странный');
-}
-```
-
-При `case 3` выполнение идёт со строки `(*)`, при `case 5` -- со строки `(**)`.
-
-## Тип имеет значение   
-
-Следующий пример принимает значение от посетителя.
-
-```js
-//+ run
-var arg = prompt("Введите arg?")
-switch (arg) {
-  case '0':
-  case '1':
-    alert( 'Один или ноль' );
-
-  case '2':
-    alert( 'Два' );
-    break;
-
-  case 3:
-    alert( 'Никогда не выполнится' );
-
-  default:
-    alert('Неизвестное значение: ' + arg)
-}
-```
-
-Что оно выведет при вводе числа 0? Числа 1? 2? 3? 
-
-Подумайте, выпишите свои ответы, исходя из текущего понимания работы `switch` и *потом* читайте дальше...
-
-<ul>
-<li>При вводе `0` выполнится первый `alert`, далее выполнение продолжится вниз до первого `break` и выведет второй `alert('Два')`. Итого, два вывода `alert`.</li>
-<li>При вводе `1` произойдёт то же самое.</li>
-<li>При вводе `2`, `switch` перейдет к `case '2'`, и сработает единственный `alert('Два')`.</li>
-<li>**При вводе `3`, `switch` перейдет на `default`.** Это потому, что `prompt` возвращает строку `'3'`, а не число. Типы разные. Оператор `switch` предполагает строгое равенство `===`, так что совпадения не будет.</li>
-</ul>
-
diff --git a/1-js/2-first-steps/17-function-basics/1-if-else-required/solution.md b/1-js/2-first-steps/17-function-basics/1-if-else-required/solution.md
deleted file mode 100644
index be1daacc..00000000
--- a/1-js/2-first-steps/17-function-basics/1-if-else-required/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Оба варианта функции работают одинаково, отличий нет.
\ No newline at end of file
diff --git a/1-js/2-first-steps/17-function-basics/1-if-else-required/task.md b/1-js/2-first-steps/17-function-basics/1-if-else-required/task.md
deleted file mode 100644
index f97c3b92..00000000
--- a/1-js/2-first-steps/17-function-basics/1-if-else-required/task.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Обязателен ли "else"?
-
-[importance 4]
-
-Следующая функция возвращает `true`, если параметр `age` больше `18`.
-В ином случае она задаёт вопрос посредством вызова `confirm` и возвращает его результат.
-
-```js
-function checkAge(age) {
-  if (age > 18) {
-    return true;
-*!*
-  } else {
-    // ...
-    return confirm('Родители разрешили?');
-  }
-*/!*
-}
-```
-
-Будет ли эта функция работать как-то иначе, если убрать `else`?
-
-```js
-function checkAge(age) {
-  if (age > 18) {
-    return true;
-  }
-*!*
-  // ...
-  return confirm('Родители разрешили?');
-*/!*
-}
-```
-
-Есть ли хоть одно отличие в поведении этого варианта?
diff --git a/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/solution.md b/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/solution.md
deleted file mode 100644
index f021c7e4..00000000
--- a/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Используя оператор `'?'`:
-
-```js
-function checkAge(age) {
-  return (age > 18) ? true : confirm('Родители разрешили?');
-}
-```
-
-Используя оператор `||` (самый короткий вариант):
-
-```js
-function checkAge(age) {
-  return (age > 18) || confirm('Родители разрешили?');
-}
-```
-
diff --git a/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/task.md b/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/task.md
deleted file mode 100644
index 5d30718a..00000000
--- a/1-js/2-first-steps/17-function-basics/2-rewrite-function-question-or/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Перепишите функцию, используя оператор '?' или '||'
-
-[importance 4]
-
-Следующая функция возвращает `true`, если параметр `age` больше `18`.
-В ином случае она задаёт вопрос `confirm` и возвращает его результат.
-
-```js
-function checkAge(age) {
-  if (age > 18) {
-    return true;
-  } else {
-    return confirm('Родители разрешили?');
-  }
-}
-```
-
-Перепишите функцию, чтобы она делала то же самое, но без `if`, в одну строку. 
-Сделайте два варианта функции `checkAge`:
-<ol>
-<li>Используя оператор `'?'`</li>
-<li>Используя оператор `||`</li>
-</ol>
diff --git a/1-js/2-first-steps/17-function-basics/3-min/solution.md b/1-js/2-first-steps/17-function-basics/3-min/solution.md
deleted file mode 100644
index 91809daa..00000000
--- a/1-js/2-first-steps/17-function-basics/3-min/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Вариант решения с использованием `if`:
-
-```js
-function min(a, b) {
-  if (a < b) {
-    return a;
-  } else {
-    return b;
-  }
-}
-```
-
-Вариант решения с оператором `'?'`:
-
-```js
-function min(a, b) {
-  return a < b ? a : b;
-}
-```
-
-P.S. Случай равенства `a == b` здесь отдельно не рассматривается, так как при этом неважно, что возвращать.
\ No newline at end of file
diff --git a/1-js/2-first-steps/17-function-basics/3-min/task.md b/1-js/2-first-steps/17-function-basics/3-min/task.md
deleted file mode 100644
index 8d042382..00000000
--- a/1-js/2-first-steps/17-function-basics/3-min/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Функция min
-
-[importance 1]
-
-Задача "Hello World" для функций :)
-
-Напишите функцию `min(a,b)`, которая возвращает меньшее из чисел `a,b`.
-
-Пример вызовов:
-
-```js
-min(2, 5) == 2
-min(3, -1) == -1
-min(1, 1) == 1
-```
-
diff --git a/1-js/2-first-steps/17-function-basics/4-pow/solution.md b/1-js/2-first-steps/17-function-basics/4-pow/solution.md
deleted file mode 100644
index 30ec3ce4..00000000
--- a/1-js/2-first-steps/17-function-basics/4-pow/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-```js
-//+ run demo
-/**
- * Возводит x в степень n (комментарий JSDoc)
- *
- * @param {number} x число, которое возводится в степень
- * @param {number} n степень, должна быть целым числом больше 1
- *
- * @return {number} x в степени n
- */
-function pow(x, n) {
-  var result = x;
-
-  for (var i = 1; i < n; i++) {
-    result *= x;
-  }
-
-  return result;
-}
-
-var x = prompt("x?", '');
-var n = prompt("n?", '');
-
-if (n <= 1) {
-  alert('Степень ' + n +
-    'не поддерживается, введите целую степень, большую 1'
-  );
-} else {
-  alert( pow(x, n) );
-}
-```
-
diff --git a/1-js/2-first-steps/17-function-basics/4-pow/task.md b/1-js/2-first-steps/17-function-basics/4-pow/task.md
deleted file mode 100644
index 0160bfcf..00000000
--- a/1-js/2-first-steps/17-function-basics/4-pow/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Функция pow(x,n)
-
-[importance 4]
-
-Напишите функцию `pow(x,n)`, которая возвращает `x` в степени `n`. Иначе говоря, умножает `x` на себя `n` раз и возвращает результат.
-
-```js
-pow(3, 2) = 3 * 3 = 9
-pow(3, 3) = 3 * 3 * 3 = 27
-pow(1, 100) = 1 * 1 * ...*1 = 1
-```
-
-Создайте страницу, которая запрашивает `x` и `n`, а затем выводит результат  `pow(x,n)`.
-
-[demo /]
-
-P.S. В этой задаче функция обязана поддерживать только натуральные значения `n`, т.е. целые от `1` и выше.
\ No newline at end of file
diff --git a/1-js/2-first-steps/17-function-basics/article.md b/1-js/2-first-steps/17-function-basics/article.md
deleted file mode 100644
index a9fa6f16..00000000
--- a/1-js/2-first-steps/17-function-basics/article.md
+++ /dev/null
@@ -1,435 +0,0 @@
-# Функции
-
-Зачастую нам надо повторять одно и то же действие во многих частях программы. 
-
-Например, красиво вывести сообщение необходимо при приветствии посетителя, при выходе посетителя с сайта, ещё где-нибудь.
-
-Чтобы не повторять один и тот же код во многих местах, придуманы функции. Функции являются основными "строительными блоками" программы.
-[cut]
-Примеры встроенных функций вы уже видели -- это `alert(message)`, `prompt(message, default)` и `confirm(question)`. Но можно создавать и свои.
-
-## Объявление
-
-Пример объявления функции:
-
-```js
-function showMessage() {
-  alert( 'Привет всем присутствующим!' );
-}
-```
-
-Вначале идет ключевое слово `function`, после него *имя функции*, затем *список параметров* в скобках (в примере выше он пустой) и *тело функции* -- код, который выполняется при её вызове. 
-
-Объявленная функция доступна по имени, например:
-
-```js
-//+ run
-function showMessage() {
-  alert( 'Привет всем присутствующим!' );
-}
-
-*!*
-showMessage();
-showMessage();
-*/!*
-```
-
-Этот код выведет сообщение два раза. Уже здесь видна **главная цель создания функций: избавление от дублирования кода**. 
-
-Если понадобится поменять сообщение или способ его вывода -- достаточно изменить его в одном месте: в функции, которая его выводит. 
-
-## Локальные переменные   
-
-Функция может содержать *локальные* переменные, объявленные через `var`. Такие переменные видны только внутри функции:
-
-```js
-//+ run
-function showMessage() {
-*!*
-  var message = 'Привет, я - Вася!'; // локальная переменная
-*/!*
-
-  alert( message );
-}
-
-showMessage(); // 'Привет, я - Вася!'
-
-alert( message ); // <-- будет ошибка, т.к. переменная видна только внутри
-```
-
-**Блоки `if/else`, `switch`, `for`, `while`, `do..while` не влияют на область видимости переменных.**
-
-При объявлении переменной в таких блоках, она всё равно будет видна во всей функции.
-
-Например:
-
-```js
-//+ no-beautify
-function count() {
-  // переменные i,j не будут уничтожены по окончании цикла
-  for (*!*var*/!* i = 0; i < 3; i++) {
-    *!*var*/!* j = i * 2;
-  }
-
-*!*
-  alert( i ); // i=3, последнее значение i, при нём цикл перестал работать
-  alert( j ); // j=4, последнее значение j, которое вычислил цикл
-*/!*
-}
-```
-
-**Неважно, где именно в функции и сколько раз объявляется переменная. Любое объявление срабатывает один раз и распространяется на всю функцию.**
-
-Объявления переменных в примере выше можно передвинуть вверх, это ни на что не повлияет:
-
-```js
-function count() {
-*!*
-  var i, j; // передвинули объявления var в начало
-*/!*
-  for (i = 0; i < 3; i++) {
-    j = i * 2;
-  }
-
-  alert( i ); // i=3
-  alert( j ); // j=4
-}
-```
-
-## Внешние переменные 
-
-Функция может обратиться ко внешней переменной, например:
-
-```js
-//+ run no-beautify
-var *!*userName*/!* = 'Вася';
-
-function showMessage() {
-  var message = 'Привет, я ' + *!*userName*/!*;
-  alert(message);
-}
-
-showMessage(); // Привет, я Вася
-```
-
-Доступ возможен не только на чтение, но и на запись. При этом, так как переменная внешняя, то изменения будут видны и снаружи функции:
-
-```js
-//+ run
-var userName = 'Вася';
-
-function showMessage() {
-  userName = 'Петя'; // (1) присвоение во внешнюю переменную
-
-  var message = 'Привет, я ' + userName;
-  alert( message );
-}
-
-showMessage();
-
-*!*
-alert( userName ); // Петя, значение внешней переменной изменено функцией
-*/!*
-```
-
-Конечно, если бы внутри функции, в строке `(1)`, была бы объявлена своя локальная переменная `var userName`, то все обращения использовали бы её, и внешняя переменная осталась бы неизменной.
-
-**Переменные, объявленные на уровне всего скрипта, называют *"глобальными переменными"*.**
-
-В примере выше переменная `userName` -- глобальная.
-
-Делайте глобальными только те переменные, которые действительно имеют общее значение для вашего проекта, а нужные для решения конкретной задачи -- пусть будут локальными в соответствующей функции.
-
-
-[warn header="Внимание: неявное объявление глобальных переменных!"]
-
-В старом стандарте JavaScript существовала возможность неявного объявления переменных присвоением значения.
-
-Например:
-
-```js
-//+ run
-function showMessage() {
-  message = 'Привет'; // без var!
-}
-
-showMessage();
-
-alert( message ); // Привет
-```
-
-В коде выше переменная `message` нигде не объявлена, а сразу присваивается. Скорее всего, программист просто забыл поставить `var`.
-
-При `use strict` такой код привёл бы к ошибке, но без него переменная будет создана автоматически, причём в примере выше она создаётся не в функции, а на уровне всего скрипта.
-
-Избегайте этого.
-
-Здесь опасность даже не в автоматическом создании переменной, а в том, что глобальные переменные должны использоваться тогда, когда действительно нужны "общескриптовые" параметры.
-
-Забыли `var` в одном месте, потом в другом -- в результате одна функция неожиданно поменяла глобальную переменную, которую использует другая. И поди разберись, кто и когда её поменял, не самая приятная ошибка для отладки.
-[/warn]
-
-В будущем, когда мы лучше познакомимся с основами JavaScript, в главе [](/closures), мы более детально рассмотрим внутренние механизмы работы переменных и функций.
-
-## Параметры 
-
-При вызове функции ей можно передать данные, которые та использует по своему усмотрению.
-
-Например, этот код выводит два сообщения:
-
-```js
-//+ run no-beautify
-function showMessage(*!*from, text*/!*) { // параметры from, text
-  
-  from = "** " + from + " **"; // здесь может быть сложный код оформления
-
-  alert(from + ': ' + text);
-}
-
-*!*
-showMessage('Маша', 'Привет!');
-showMessage('Маша', 'Как дела?');
-*/!*
-```
-
-**Параметры копируются в локальные переменные функции**.
-
-Например, в коде ниже есть внешняя переменная `from`, значение которой при запуске функции копируется в параметр функции с тем же именем. Далее функция работает уже с параметром:
-
-```js
-//+ run
-function showMessage(from, text) {
-*!*
-  from = '**' + from + '**'; // меняем локальную переменную from 
-*/!*
-  alert( from + ': ' + text );
-}
-
-var from = "Маша";
-
-showMessage(from, "Привет");
-
-alert( from ); // старое значение from без изменений, в функции была изменена копия
-```
-
-## Аргументы по умолчанию
-
-Функцию можно вызвать с любым количеством аргументов.
-
-Если параметр не передан при вызове -- он считается равным `undefined`.
-
-Например, функцию показа сообщения `showMessage(from, text)` можно вызвать с одним аргументом:
-
-```js
-showMessage("Маша");
-```
-
-При этом можно проверить, и если параметр не передан -- присвоить ему значение "по умолчанию":
-
-```js
-//+ run
-function showMessage(from, text) {
-*!*
-  if (text === undefined) {
-    text = 'текст не передан';
-  }
-*/!*
-
-  alert( from + ": " + text );
-}
-
-showMessage("Маша", "Привет!"); // Маша: Привет!
-*!*
-showMessage("Маша"); // Маша: текст не передан
-*/!*
-```
-
-**При объявлении функции необязательные аргументы, как правило, располагают в конце списка.**
-
-Для указания значения "по умолчанию", то есть, такого, которое используется, если аргумент не указан, используется два способа:
-
-<ol>
-<li>Можно проверить, равен ли аргумент `undefined`, и если да -- то записать в него значение по умолчанию. Этот способ продемонстрирован в примере выше.</li>
-<li>Использовать оператор `||`:
-
-```js
-//+ run
-function showMessage(from, text) {
-  text = text || 'текст не передан';
-
-  ...
-}
-```
-
-Второй способ считает, что аргумент отсутствует, если передана пустая строка, `0`, или вообще любое значение, которое в логическом контексте является `false`. 
-</li>
-</ol>
-
-Если аргументов передано больше, чем надо, например `showMessage("Маша", "привет", 1, 2, 3)`, то ошибки не будет. Но, чтобы получить такие "лишние" аргументы, нужно будет прочитать их из специального объекта `arguments`, который мы рассмотрим в главе [](/arguments-pseudoarray).
-
-## Возврат значения 
-
-Функция может возвратить результат, который будет передан в вызвавший её код.
-
-Например, создадим функцию `calcD`, которая будет возвращать дискриминант квадратного уравнения по формуле <code>b<sup>2</sup> - 4ac</code>:
-
-```js
-//+ run no-beautify
-function calcD(a, b, c) {
-   *!*return*/!* b*b - 4*a*c;
-}
-
-var test = calcD(-4, 2, 1);
-alert(test); // 20
-```
-
-**Для возврата значения используется директива `return`.** 
-
-Она может находиться в любом месте функции. Как только до неё доходит управление -- функция  завершается и значение передается обратно.
-
-Вызовов `return` может быть и несколько, например:
-
-```js
-//+ run
-function checkAge(age) {
-  if (age > 18) {
-    return true;
-  } else {
-    return confirm('Родители разрешили?');
-  }
-}
-
-var age = prompt('Ваш возраст?');
-
-if (checkAge(age)) {
-  alert( 'Доступ разрешен' );
-} else {
-  alert( 'В доступе отказано' );
-}
-```
-
-Директива `return` может также использоваться без значения, чтобы прекратить выполнение и выйти из функции.
-
-Например:
-
-```js
-function showMovie(age) {
-  if (!checkAge(age)) {
-*!*
-    return;
-*/!*
-  }
-
-  alert( "Фильм не для всех" ); // (*)  
-  // ...
-}
-```
-
-В коде выше, если сработал `if`, то строка `(*)` и весь код под ней никогда не выполнится, так как `return` завершает выполнение функции. 
-
-[smart header="Значение функции без `return` и с пустым `return`"]
-В случае, когда функция не вернула значение или `return` был без аргументов, считается что она вернула `undefined`:
-
-```js
-//+ run
-function doNothing() { /* пусто */ }
-
-alert( doNothing() ); // undefined
-```
-
-Обратите внимание, никакой ошибки нет. Просто возвращается `undefined`.
-
-Ещё пример, на этот раз с `return` без аргумента:
-
-```js
-//+ run
-function doNothing() {
-  return;
-}
-
-alert( doNothing() === undefined ); // true
-```
-
-[/smart]
-
-## Выбор имени функции [#function-naming]
-
-Имя функции следует тем же правилам, что и имя переменной. Основное отличие -- оно должно быть глаголом, т.к. функция -- это действие.
-
-Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение.
-
-Функции, которые начинаются с `"show"` -- что-то показывают:
-
-```js
-//+ no-beautify
-showMessage(..)     // префикс show, "показать" сообщение
-```
-
-Функции, начинающиеся с `"get"` -- получают, и т.п.:
-
-```js
-//+ no-beautify
-getAge(..)          // get, "получает" возраст
-calcD(..)           // calc, "вычисляет" дискриминант
-createForm(..)      // create, "создает" форму
-checkPermission(..) // check, "проверяет" разрешение, возвращает true/false
-```
-
-Это очень удобно, поскольку взглянув на функцию -- мы уже примерно представляем, что она делает, даже если функцию написал совсем другой человек, а в отдельных случаях -- и какого вида значение она возвращает. 
-
-[smart header="Одна функция -- одно действие"]
-
-Функция должна делать только то, что явно подразумевается её названием. И это должно быть одно действие. 
-
-Если оно сложное и подразумевает поддействия -- может быть имеет смысл выделить их в отдельные функции? Зачастую это имеет смысл, чтобы лучше структурировать код.
-
-**...Но самое главное -- в функции не должно быть ничего, кроме самого действия и поддействий, неразрывно связанных с ним.**
-
-Например, функция проверки данных (скажем, `"validate"`) не должна показывать сообщение об ошибке. Её действие -- проверить.
-[/smart]
-
-
-[smart header="Сверхкороткие имена функций"]
-Имена функций, которые используются *очень часто*, иногда делают сверхкороткими. 
-
-Например, во фреймворке [jQuery](http://jquery.com) есть функция `$`, во фреймворке [Prototype](http://prototypejs.com) -- функция `$$`, а в библиотеке [LoDash](http://lodash.com/) очень активно используется функция с названием из одного символа подчеркивания `_`.
-[/smart]
-
-## Итого
-
-Объявление функции имеет вид:
-
-```js
-function имя(параметры, через, запятую) {
-  код функции
-}
-```
-
-<ul>
-<li>Передаваемые значения копируются в параметры функции и становятся локальными переменными.</li>
-<li>Параметры функции копируются в её локальные переменные.</li>
-<li>Можно объявить новые локальные переменые при помощи `var`.</li>
-<li>Значение возвращается оператором `return ...`.</li>
-<li>Вызов `return` тут же прекращает функцию.</li>
-<li>Если `return;` вызван без значения, или функция завершилась без `return`, то её результат равен `undefined`.</li>
-</ul>
-
-При обращении к необъявленной переменной функция будет искать внешнюю переменную с таким именем, но лучше, если функция использует только локальные переменные:
-
-<ul>
-<li>Это делает очевидным общий поток выполнения -- что передаётся в функцию и какой получаем результат.</li>
-<li>Это предотвращает возможные конфликты доступа, когда две функции, возможно написанные в разное время или разными людьми, неожиданно друг для друга меняют одну и ту же внешнюю переменную.</li> 
-</ul>
-</li>
-</ul>
-
-Именование функций:
-
-<ul>
-<li>Имя функции должно понятно и чётко отражать, что она делает. Увидев её вызов в коде, вы должны тут же понимать, что она делает.</li>
-<li>Функция -- это действие, поэтому для имён функций, как правило, используются глаголы.</li>
-</ul>
-
-Функции являются основными строительными блоками скриптов. Мы будем неоднократно возвращаться к ним и изучать все более и более глубоко.
-
-
diff --git a/1-js/2-first-steps/18-function-declaration-expression/article.md b/1-js/2-first-steps/18-function-declaration-expression/article.md
deleted file mode 100644
index 6449b93a..00000000
--- a/1-js/2-first-steps/18-function-declaration-expression/article.md
+++ /dev/null
@@ -1,366 +0,0 @@
-# Функциональные выражения
-
-В JavaScript функция является значением, таким же как строка или число. 
-
-Как и любое значение, объявленную функцию можно вывести, вот так:
-
-```js
-//+ run
-function sayHi() {
-  alert( "Привет" );
-}
-
-*!*
-alert( sayHi ); // выведет код функции
-*/!*
-```
-
-Обратим внимание на то, что в последней строке после `sayHi` нет скобок. То есть, функция не вызывается, а просто выводится на экран.
-
-**Функцию можно скопировать в другую переменную:**
-
-```js
-//+ run no-beautify
-function sayHi() {   // (1)
-  alert( "Привет" ); 
-}
-
-var func = sayHi;    // (2)
-func(); // Привет    // (3)
-
-sayHi = null;
-sayHi();             // ошибка (4)
-```
-
-<ol>
-<li>Объявление `(1)` как бы говорит интерпретатору "создай функцию и помести её в переменную `sayHi`</li>
-<li>В строке `(2)` мы копируем функцию в новую переменную `func`. Ещё раз обратите внимание: после `sayHi` нет скобок. Если бы они были, то вызов `var func = sayHi()` записал бы в `func` *результат* работы `sayHi()` (кстати, чему он равен? правильно, `undefined`, ведь внутри `sayHi` нет `return`).</li>
-<li>На момент `(3)` функцию можно вызывать и как `sayHi()` и как `func()`</li>
-<li>...Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов `(4)` выдаст ошибку.</li>
-</ol>
-
-Обычные значения, такие как числа или строки, представляют собой *данные*. А функцию можно воспринимать как *действие*. 
-
-Это действие можно запустить через скобки `()`, а можно и скопировать в другую переменную, как было продемонстрировано выше.
-
-
-## Объявление Function Expression [#function-expression]
-
-Существует альтернативный синтаксис для объявления функции, который ещё более наглядно показывает, что функция -- это всего лишь разновидность значения переменной.
-
-Он называется "Function Expression" (функциональное выражение) и выглядит так:
-
-```js
-//+ run
-var f = function(параметры) {
-  // тело функции
-};
-```
-
-Например:
-
-```js
-//+ run
-var sayHi = function(person) {
-  alert( "Привет, " + person );
-};
-
-sayHi('Вася');
-```
-
-## Сравнение с Function Declaration
-
-"Классическое" объявление функции, о котором мы говорили до этого, вида `function имя(параметры) {...}`, называется в спецификации языка "Function Declaration". 
-
-<ul>
-<li>*Function Declaration* -- функция, объявленная в основном потоке кода.</li>
-<li>*Function Expression* -- объявление функции в контексте какого-либо выражения, например присваивания.</li>
-</ul>
-
-Несмотря на немного разный вид, по сути две эти записи делают одно и то же:
-
-```js
-// Function Declaration
-function sum(a, b) {
-  return a + b;
-}
-
-// Function Expression
-var sum = function(a, b) {
-  return a + b;
-}
-```
-
-Оба этих объявления говорят интерпретатору: "объяви переменную `sum`, создай функцию с указанными параметрами и кодом и сохрани её в `sum`".
-
-**Основное отличие между ними: функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода.**
-
-Поэтому их можно вызвать *до* объявления, например:
-
-```js
-//+ run refresh untrusted
-*!*
-sayHi("Вася"); // Привет, Вася
-*/!*
-
-function sayHi(name) {
-  alert( "Привет, " + name );
-}
-```
-
-А если бы это было объявление Function Expression, то такой вызов бы не сработал:
-
-```js
-//+ run refresh untrusted
-*!*
-sayHi("Вася"); // ошибка!
-*/!*
-
-var sayHi = function(name) {
-  alert( "Привет, " + name );
-}
-```
-
-Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (их легко найти: они не являются частью выражений и начинаются со слова `function`) и обрабатывает их. 
-
-А Function Expression создаются в процессе выполнении выражения, в котором созданы, в данном случае -- функция будет создана при операции присваивания `sayHi = function...`
-
-Как правило, возможность Function Declaration вызвать функцию до объявления -- это удобно, так как даёт больше свободы в том, как  организовать свой код.
-
-Можно расположить функции внизу, а их вызов -- сверху или наоборот.
-
-### Условное объявление функции [#bad-conditional-declaration]
-
-В некоторых случаях "дополнительное удобство" Function Declaration может сослужить плохую службу.
-
-Например, попробуем, в зависимости от условия, объявить функцию `sayHi` по-разному:
-
-```js
-//+ run
-var age = +prompt("Сколько вам лет?", 20);
-
-if (age >= 18) {
-  function sayHi() {
-    alert( 'Прошу вас!' );
-  }
-} else {
-  function sayHi() {
-    alert( 'До 18 нельзя' );
-  }
-}
-
-sayHi();
-```
-
-При вводе `20` в примере выше в любом браузере, кроме Firefox, мы увидим, что условное объявление не работает.  Срабатывает `"До 18 нельзя"`, несмотря на то, что `age = 20`. 
-
-В чём дело? Чтобы ответить на этот вопрос -- вспомним, как работают функции. 
-
-<ol>
-<li>Function Declaration обрабатываются перед запуском кода. Интерпретатор сканирует код и создает из таких объявлений функции. При этом второе объявление перезапишет первое. 
-</li> 
-<li>Дальше, во время выполнения, объявления Function Declaration игнорируются (они уже были обработаны). Это как если бы код был таким:
-
-```js
-function sayHi() {
-  alert( 'Прошу вас!' );
-}
-
-function sayHi() {
-  alert( 'До 18 нельзя' );
-}
-
-var age = 20;
-
-if (age >= 18) {
-  /* объявление было обработано ранее */
-} else {
-  /* объявление было обработано ранее */
-}
-
-*!*
-sayHi(); // "До 18 нельзя", сработает всегда вторая функция
-*/!*
-```
-
-...То есть, от `if` здесь уже ничего не зависит. По-разному объявить функцию, в зависимости от условия, не получилось.
-</li>
-</ol>
-
-Такое поведение соответствует современному стандарту. На момент написания этого раздела ему следуют все браузеры, кроме, как ни странно, Firefox. 
-
-**Вывод: для условного объявления функций Function Declaration не годится.**
-
-А что, если использовать Function Expression?
-
-```js
-//+ run
-var age = prompt('Сколько вам лет?');
-
-var sayHi;
-
-if (age >= 18) {
-  sayHi = function() {
-    alert( 'Прошу Вас!' );
-  }
-} else {
-  sayHi = function() {
-    alert( 'До 18 нельзя' );
-  }
-}
-
-sayHi();
-```
-
-Или даже так:
-
-```js
-//+ run no-beautify
-var age = prompt('Сколько вам лет?');
-
-var sayHi = (age >= 18) ?
-  function() { alert('Прошу Вас!');  } : 
-  function() { alert('До 18 нельзя'); };
-
-sayHi();
-```
-
-Оба этих варианта работают правильно, поскольку, в зависимости от условия, создаётся именно та функция, которая нужна.
-
-### Анонимные функции
-
-Взглянем ещё на один пример.
-
-Функция `ask(question, yes, no)` предназначена для выбора действия в зависимости от результата `f`.
-
-Она выводит вопрос на подтверждение `question` и, в зависимости от согласия пользователя, вызывает `yes` или `no`:
-
-```js
-//+ run
-*!*
-function ask(question, yes, no) {
-    if (confirm(question)) yes()
-    else no();
-  }
-*/!*
-
-function showOk() {
-  alert( "Вы согласились." );
-}
-
-function showCancel() {
-  alert( "Вы отменили выполнение." );
-}
-
-// использование
-ask("Вы согласны?", showOk, showCancel);
-```
-
-Какой-то очень простой код, не правда ли? Зачем, вообще, может понадобиться такая `ask`? 
-
-...Но при работе со страницей такие функции как раз очень востребованы, только вот спрашивают они не простым `confirm`, а выводят более красивое окно с вопросом и могут интеллектуально обработать ввод посетителя. Но это всё в своё время.
-
-Здесь обратим внимание на то, что то же самое можно написать более коротко:
-
-```js
-//+ run no-beautify
-function ask(question, yes, no) {
-  if (confirm(question)) yes()
-  else no();
-}
-
-*!*
-ask(
-  "Вы согласны?", 
-  function() { alert("Вы согласились."); },
-  function() { alert("Вы отменили выполнение."); }
-);
-*/!*
-```
-
-Здесь функции объявлены прямо внутри вызова `ask(...)`, даже без присвоения им имени. 
-
-**Функциональное выражение, которое не записывается в переменную, называют [анонимной функцией](http://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%BE%D0%BD%D0%B8%D0%BC%D0%BD%D0%B0%D1%8F_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F).**
-
-Действительно, зачем нам записывать функцию в переменную, если мы не собираемся вызывать её ещё раз? Можно просто объявить непосредственно там, где функция нужна.
-
-Такого рода код возникает естественно, он соответствует "духу" JavaScript.
-
-## new Function
-
-Существует ещё один способ создания функции, который используется очень редко, но упомянем и его для полноты картины.
-
-Он позволяет создавать функцию полностью "на лету" из строки, вот так:
-
-```js
-//+ run
-var sum = new Function('a,b', ' return a+b; ');
-
-var result = sum(1, 2);
-alert( result ); // 3
-```
-
-То есть, функция создаётся вызовом `new Function(params, code)`:
-<dl>
-<dt>`params`</dt>
-<dd>Параметры функции через запятую в виде строки.</dd>
-<dt>`code`</dt>
-<dd>Код функции в виде строки.</dd>
-</dl>
-
-Таким образом можно конструировать функцию, код которой неизвестен на момент написания программы, но строка с ним генерируется или подгружается динамически во время её выполнения. 
-
-Пример использования -- динамическая компиляция шаблонов на JavaScript, мы встретимся с ней позже, при работе с интерфейсами.
-
-## Итого
-
-Функции в JavaScript являются значениями. Их можно присваивать, передавать, создавать в любом месте кода.
-
-<ul>
-<li>Если функция объявлена в *основном потоке кода*, то это Function Declaration.</li>
-<li>Если функция создана как *часть выражения*, то это Function Expression.</li>
-</ul>
-
-Между этими двумя основными способами создания функций есть следующие различия:
-
-<table class="table-bordered">
-<tr>
-<th></th>
-<th>Function Declaration</th>
-<th>Function Expression</th>
-</tr>
-<tr>
-<td>Время создания</td>
-<td>До выполнения первой строчки кода.</td>
-<td>Когда управление достигает строки с функцией.</td>
-</tr>
-<tr>
-<td>Можно вызвать до объявления </td>
-<td>`Да` (т.к. создаётся заранее)</td>
-<td>`Нет`</td>
-</tr>
-<tr>
-<td>Условное объявление в `if`</td>
-<td>`Не работает`</td>
-<td>`Работает`</td>
-</tr>
-</table>
-
-Иногда в коде начинающих разработчиков можно увидеть много Function Expression. Почему-то, видимо, не очень понимая происходящее, функции решают создавать как `var func = function()`, но в большинстве случаев обычное объявление функции -- лучше.
-
-**Если нет явной причины использовать Function Expression -- предпочитайте Function Declaration.**
-
-Сравните по читаемости:
-
-```js
-//+ no-beautify
-// Function Expression 
-var f = function() { ... }
-
-// Function Declaration 
-function f() { ... }
-```
-
-Function Declaration короче и лучше читается. Дополнительный бонус -- такие функции можно вызывать до того, как они объявлены.
-
-Используйте Function Expression только там, где это действительно нужно и удобно. 
diff --git a/1-js/2-first-steps/19-recursion/1-sum-to/solution.md b/1-js/2-first-steps/19-recursion/1-sum-to/solution.md
deleted file mode 100644
index 791c4b3d..00000000
--- a/1-js/2-first-steps/19-recursion/1-sum-to/solution.md
+++ /dev/null
@@ -1,45 +0,0 @@
-Решение **с использованием цикла**:
-
-```js
-//+ run
-function sumTo(n) {
-  var sum = 0;
-  for (var i = 1; i <= n; i++) {
-    sum += i;
-  }
-  return sum;
-}
-
-alert( sumTo(100) );
-```
-
-Решение через **рекурсию**:
-
-```js
-//+ run
-function sumTo(n) {
-  if (n == 1) return 1;
-  return n + sumTo(n - 1);
-}
-
-alert( sumTo(100) );
-```
-
-Решение **по формуле**: `sumTo(n) = n*(n+1)/2`:
-
-```js
-//+ run
-function sumTo(n) {
-  return n * (n + 1) / 2;
-}
-
-alert( sumTo(100) );
-```
-
-P.S. Надо ли говорить, что решение по формуле работает быстрее всех? Это очевидно. Оно использует всего три операции для любого `n`, а цикл и рекурсия требуют как минимум `n` операций сложения.
-
-Вариант с циклом -- второй по скорости. Он быстрее рекурсии, так как операций сложения столько же, но нет дополнительных вычислительных затрат на организацию вложенных вызовов.
-
-Рекурсия в данном случае работает медленнее всех.
-
-P.P.S. Существует ограничение глубины вложенных вызовов, поэтому рекурсивный вызов `sumTo(100000)` выдаст ошибку.
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/1-sum-to/task.md b/1-js/2-first-steps/19-recursion/1-sum-to/task.md
deleted file mode 100644
index 9e7e8e8f..00000000
--- a/1-js/2-first-steps/19-recursion/1-sum-to/task.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Вычислить сумму чисел до данного
-
-[importance 5]
-
-Напишите функцию `sumTo(n)`, которая для данного `n` вычисляет сумму чисел от 1 до `n`, например:
-
-```js
-//+ no-beautify
-sumTo(1) = 1
-sumTo(2) = 2 + 1 = 3
-sumTo(3) = 3 + 2 + 1 = 6
-sumTo(4) = 4 + 3 + 2 + 1 = 10
-...
-sumTo(100) = 100 + 99 + ... + 2 + 1 = 5050
-```
-
-Сделайте три варианта решения:
-<ol>
-<li>С использованием цикла.</li>
-<li>Через рекурсию, т.к. `sumTo(n) = n + sumTo(n-1)` для `n > 1`.</li>
-<li>С использованием формулы для суммы [арифметической прогрессии](http://ru.wikipedia.org/wiki/%D0%90%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81%D0%B8%D1%8F).</li>
-</ol>
-
-Пример работы вашей функции:
-
-```js
-function sumTo(n) { /*... ваш код ... */ }
-
-alert( sumTo(100) ); // 5050
-```
-
-**Какой вариант решения самый быстрый? Самый медленный? Почему?**
-
-**Можно ли при помощи рекурсии посчитать `sumTo(100000)`? Если нет, то почему?**
diff --git a/1-js/2-first-steps/19-recursion/2-factorial/solution.md b/1-js/2-first-steps/19-recursion/2-factorial/solution.md
deleted file mode 100644
index f3811e2c..00000000
--- a/1-js/2-first-steps/19-recursion/2-factorial/solution.md
+++ /dev/null
@@ -1,25 +0,0 @@
-По свойствам факториала, как описано в условии, `n!` можно записать как `n * (n-1)!`.
-
-То есть, результат функции для `n` можно получить как `n`, умноженное на результат функции для `n-1`, и так далее до `1!`:
-
-```js
-//+ run
-function factorial(n) {
-  return (n != 1) ? n * factorial(n - 1) : 1;
-}
-
-alert( factorial(5) ); // 120
-```
-
-Базисом рекурсии является значение `1`. А можно было бы сделать базисом и `0`. Тогда код станет чуть короче:
-
-```js
-//+ run
-function factorial(n) {
-  return n ? n * factorial(n - 1) : 1;
-}
-
-alert( factorial(5) ); // 120
-```
-
-В этом случае вызов `factorial(1)` сведётся к `1*factorial(0)`, будет дополнительный шаг рекурсии.
diff --git a/1-js/2-first-steps/19-recursion/2-factorial/task.md b/1-js/2-first-steps/19-recursion/2-factorial/task.md
deleted file mode 100644
index 59579043..00000000
--- a/1-js/2-first-steps/19-recursion/2-factorial/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Вычислить факториал
-
-[importance 4]
-
-*Факториа́л числа* -- это число, умноженное на "себя минус один", затем на "себя минус два" и так далее, до единицы. Обозначается `n!`
-
-Определение факториала можно записать как:
-
-```js
-n! = n * (n - 1) * (n - 2) * ...*1
-```
-
-Примеры значений для разных `n`:
-
-```js
-1! = 1
-2! = 2 * 1 = 2
-3! = 3 * 2 * 1 = 6
-4! = 4 * 3 * 2 * 1 = 24
-5! = 5 * 4 * 3 * 2 * 1 = 120
-```
-
-Задача -- написать функцию `factorial(n)`, которая возвращает факториал числа `n!`, используя рекурсивный вызов.
-
-```js
-alert( factorial(5) ); // 120
-```
-
-Подсказка: обратите внимание, что `n!` можно записать как `n * (n-1)!`. Например: `3! = 3*2! = 3*2*1! = 6`
diff --git a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md
deleted file mode 100644
index 5c5fbfab..00000000
--- a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Вычисление рекурсией (медленное)
-
-Решение по формуле, используя рекурсию:
-
-```js
-//+ run
-function fib(n) {
-  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
-}
-
-alert( fib(3) ); // 2
-alert( fib(7) ); // 13
-// fib(77); // не запускаем, подвесит браузер
-```
-
-При больших значениях `n` оно будет работать очень медленно. Например, `fib(77)` уже будет вычисляться очень долго.
-
-Это потому, что функция порождает обширное дерево вложенных вызовов. При этом ряд значений вычисляется много раз. Например, посмотрим на отрывок вычислений:
-
-```js
-//+ no-beautify
-...
-fib(5) = fib(4) + fib(3)
-fib(4) = fib(3) + fib(2)
-...
-```
-
-Здесь видно, что значение `fib(3)` нужно одновременно и для `fib(5)` и для `fib(4)`. В коде оно будет вычислено два раза, совершенно независимо.
-
-Можно это оптимизировать, запоминая уже вычисленные значения, получится гораздо быстрее. Альтернативный вариант -- вообще отказаться от рекурсии, а вместо этого в цикле начать с первых значений `1`, `2`, затем из них получить `fib(3)`, далее `fib(4)`, затем `fib(5)` и так далее, до нужного значения.
-
-Это решение будет наиболее эффективным. Попробуйте его написать.
-
-# Алгоритм вычисления в цикле
-
-Будем идти по формуле слева-направо:
-
-```js
-//+ no-beautify
-var a = 1, b = 1; // начальные значения
-var c = a + b; // 2
-
-/* переменные на начальном шаге:
-a  b  c
-1, 1, 2
-*/
-```
-
-Теперь следующий шаг, присвоим `a` и `b` текущие 2 числа и получим новое следующее в `c`:
-
-```js
-//+ no-beautify
-a = b, b = c; 
-c = a + b;
-
-/* стало так (ещё число):
-   a  b  c
-1, 1, 2, 3
-*/
-```
-
-Следующий шаг даст нам ещё одно число последовательности:
-
-```js
-//+ no-beautify
-a = b, b = c; 
-c = a + b;
-
-/* стало так (ещё число):
-      a  b  c
-1, 1, 2, 3, 5
-*/
-```
-
-Повторять в цикле до тех пор, пока не получим нужное значение. Это гораздо быстрее, чем рекурсия, хотя бы потому что ни одно из чисел не вычисляется дважды.
-
-P.S. Этот подход к вычислению называется [динамическое программирование снизу-вверх](http://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%BD%D0%B0%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5).
-
-# Код для вычисления в цикле
-
-```js
-//+ run
-function fib(n) {
-  var a = 1,
-    b = 1;
-  for (var i = 3; i <= n; i++) {
-    var c = a + b;
-    a = b;
-    b = c;
-  }
-  return b;
-}
-
-alert( fib(3) ); // 2
-alert( fib(7) ); // 13
-alert( fib(77) ); // 5527939700884757
-```
-
-Цикл здесь начинается с `i=3`, так как первое и второе числа Фибоначчи заранее записаны в переменные `a=1`, `b=1`.
diff --git a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md
deleted file mode 100644
index b05734a0..00000000
--- a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Числа Фибоначчи
-
-[importance 5]
-
-Последовательность [чисел Фибоначчи](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8) имеет формулу <code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>. То есть, следующее число получается как сумма двух предыдущих.
-
-Первые два числа равны `1`, затем `2(1+1)`, затем `3(1+2)`, `5(2+3)` и так далее: `1, 1, 2, 3, 5, 8, 13, 21...`.
-
-Числа Фибоначчи тесно связаны с [золотым сечением](http://ru.wikipedia.org/wiki/%D0%97%D0%BE%D0%BB%D0%BE%D1%82%D0%BE%D0%B5_%D1%81%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5) и множеством природных явлений вокруг нас.
-
-Напишите функцию `fib(n)`, которая возвращает `n-е` число Фибоначчи. Пример работы:
-
-```js
-//+ no-beautify
-function fib(n) { /* ваш код */ }
-
-alert( fib(3) ); // 2
-alert( fib(7) ); // 13
-alert( fib(77)); // 5527939700884757
-```
-
-**Все запуски функций из примера выше должны срабатывать быстро.**
-
- 
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/article.md b/1-js/2-first-steps/19-recursion/article.md
deleted file mode 100644
index 144e1cad..00000000
--- a/1-js/2-first-steps/19-recursion/article.md
+++ /dev/null
@@ -1,243 +0,0 @@
-# Рекурсия, стек
-
-В коде функции могут вызывать другие функции для выполнения подзадач. 
-
-Частный случай подвызова -- когда функция вызывает сама себя. Это называется *рекурсией*.
-
-Рекурсия используется для ситуаций, когда выполнение одной сложной задачи можно представить как некое действие в совокупности с решением той же задачи в более простом варианте.
-
-Сейчас мы посмотрим примеры.
-
-Рекурсия -- общая тема программирования, не относящаяся напрямую к JavaScript. Если вы разрабатывали на других языках или изучали программирование раньше в ВУЗе, то наверняка уже знаете, что это такое.
-
-Эта глава предназначена для читателей, которые пока с этой темой незнакомы и хотят лучше разобраться в том, как работают функции.
-
-[cut]
-
-
-## Степень pow(x, n) через рекурсию
-
-В качестве первого примера использования рекурсивных вызовов -- рассмотрим задачу возведения числа `x` в натуральную степень `n`.
-
-Её можно представить как совокупность более простого действия и более простой задачи того же типа вот так: 
-
-```js
-pow(x, n) = x * pow(x, n - 1)
-```
-
-То есть, <code>x<sup>n</sup> = x * x<sup>n-1</sup></code>.
-
-Например, вычислим `pow(2, 4)`, последовательно переходя к более простой задаче:
-
-<ol>
-<li>`pow(2, 4) = 2 * pow(2, 3)`</li>
-<li>`pow(2, 3) = 2 * pow(2, 2)`</li>
-<li>`pow(2, 2) = 2 * pow(2, 1)`</li>
-<li>`pow(2, 1) = 2`</li>
-</ol>
-
-На шаге 1 нам нужно вычислить `pow(2,3)`, поэтому мы делаем шаг 2, дальше нам нужно `pow(2,2)`, мы делаем шаг 3, затем шаг 4, и на нём уже можно остановиться, ведь очевидно, что результат возведения числа в степень 1 -- равен самому числу.
-
-Далее, имея результат на шаге 4, он подставляется обратно в шаг 3, затем имеем `pow(2,2)` -- подставляем в шаг 2 и на шаге 1 уже получаем результат.
-
-Этот алгоритм на JavaScript:
-
-```js
-//+ run
-function pow(x, n) {
-  if (n != 1) { // пока n != 1, сводить вычисление pow(x,n) к pow(x,n-1)
-    return x * pow(x, n - 1);
-  } else {
-    return x;
-  }
-}
-
-alert( pow(2, 3) ); // 8
-```
-
-Говорят, что "функция `pow` *рекурсивно вызывает сама себя*" до `n == 1`. 
-
-Значение, на котором рекурсия заканчивается называют *базисом рекурсии*. В примере выше базисом является `1`.
-
-Общее количество вложенных вызовов называют *глубиной рекурсии*. В случае со степенью, всего будет `n` вызовов. 
-
-Максимальная глубина рекурсии в браузерах ограничена, точно можно рассчитывать на `10000` вложенных вызовов, но некоторые интерпретаторы допускают и больше.
-
-Итак, рекурсию используют, когда вычисление функции можно свести к её более простому вызову, а его -- ещё к более простому, и так далее, пока значение не станет очевидно.
-
-## Контекст выполнения, стек
-
-Теперь мы посмотрим, как работают рекурсивные вызовы. Для этого мы рассмотрим, как вообще работают функции, что происходит при вызове.
-
-**У каждого вызова функции есть свой "контекст выполнения" (execution context).** 
-
-Контекст выполнения -- это служебная информация, которая соответствует текущему запуску функции. Она включает в себя локальные переменные функции и конкретное место в коде, на котором находится интерпретатор.
-
-Например, для вызова `pow(2, 3)` из примера выше будет создан контекст выполнения, который будет хранить переменные `x = 2, n = 3`. Мы схематично обозначим его так:
-
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 1 }</li>
-</ul>
-
-Далее функция `pow` начинает выполняться. Вычисляется выражение `n != 1` -- оно равно `true`, ведь в текущем контексте `n=3`. Поэтому задействуется первая ветвь `if` :
-
-```js
-function pow(x, n) {
-  if (n != 1) { // пока n != 1 сводить вычисление pow(x,n) к pow(x,n-1)
-*!*
-    return x * pow(x, n - 1);
-*/!*
-  } else {
-    return x;
-  }
-}
-```
-
-Чтобы вычислить выражение `x * pow(x, n-1)`, требуется произвести запуск `pow` с новыми аргументами.
-
-**При любом вложенном вызове JavaScript запоминает текущий контекст выполнения в специальной внутренней структуре данных -- "стеке контекстов".**
-
-Затем интерпретатор приступает к выполнению вложенного вызова.
-
-В данном случае вызывается та же `pow`, однако это абсолютно неважно. Для любых функций процесс одинаков.
-
-Для нового вызова создаётся свой контекст выполнения, и управление переходит в него, а когда он завершён -- старый контекст достаётся из стека и выполнение внешней функции возобновляется.
-
-Разберём происходящее с контекстами более подробно, начиная с вызова `(*)`:
-
-```js
-//+ run
-function pow(x, n) {
-  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
-    return x * pow(x, n - 1);
-  } else {
-    return x;
-  }
-}
-
-*!*
-alert( pow(2, 3) ); // (*)
-*/!*
-```
-
-<dl>
-<dt>`pow(2, 3)`</dt>
-<dd>Запускается функция `pow`, с аргументами `x=2`, `n=3`. Эти переменные хранятся в контексте выполнения, схематично изображённом ниже:
-
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 1 }</li>
-</ul>
-Выполнение в этом контексте продолжается, пока не встретит вложенный вызов в строке 3.
-</dd>
-<dt>`pow(2, 2)`</dt>
-<dd>В строке `3` происходит вложенный вызов `pow` с аргументами `x=2`, `n=2`. Текущий контекст сохраняется в стеке, а для вложеннного вызова создаётся новый контекст (выделен жирным ниже):
-
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
-  <li>Контекст: { x: 2, n: 2, строка 1 }</li>
-</ul>
-Обратим внимание, что контекст включает в себя не только переменные, но и место в коде, так что когда вложенный вызов завершится -- можно будет легко вернуться назад.
-
-Слово "строка" здесь условно, на самом деле, конечно, запомнено более точное место в цепочке команд.
-</dd>
-<dt>`pow(2, 1)`</dt>
-<dd>Опять вложенный вызов в строке `3`, на этот раз -- с аргументами `x=2`, `n=1`. Создаётся новый текущий контекст, предыдущий добавляется в стек:
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
-  <li>Контекст: { x: 2, n: 2, строка 3 }</li>
-  <li>Контекст: { x: 2, n: 1, строка 1 }</li>
-</ul>
-На текущий момент в стеке уже два старых контекста.
-</dd>
-<dt>Выход из `pow(2, 1)`.</dt>
-<dd>При выполнении `pow(2, 1)`, в отличие от предыдущих запусков, выражение `n != 1` будет равно `false`, поэтому  сработает вторая ветка `if..else`:
-
-```js
-function pow(x, n) {
-  if (n != 1) {
-    return x * pow(x, n - 1);
-  } else {
-*!*
-    return x; // первая степень числа равна самому числу
-*/!*
-  }
-}
-```
-
-Здесь вложенных вызовов нет, так что функция заканчивает свою работу, возвращая `2`. Текущий контекст больше не нужен и удаляется из памяти, из стека восстанавливается предыдущий:
-
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
-  <li>Контекст: { x: 2, n: 2, строка 3 }</li>
-</ul>
-Возобновляется обработка внешнего вызова `pow(2, 2)`.
-</dd>
-<dt>Выход из `pow(2, 2)`.</dt>
-<dd>...И теперь уже `pow(2, 2)` может закончить свою работу, вернув `4`. Восстанавливается контекст предыдущего вызова:
-<ul class="function-execution-context">
-  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
-</ul>
-Возобновляется обработка внешнего вызова `pow(2, 3)`.
-</dd>
-<dt>Выход из `pow(2, 3)`.</dt>
-<dd>Самый внешний вызов заканчивает свою работу, его результат: `pow(2, 3) = 8`.</dd>
-</dl>
-
-Глубина рекурсии в данном случае составила: **3**.
-
-Как видно из иллюстраций выше, глубина рекурсии равна максимальному числу контекстов, одновременно хранимых в стеке.
-
-Обратим внимание на требования к памяти. Рекурсия приводит к хранению всех данных для неоконченных внешних вызовов в стеке, в данном случае это приводит к тому, что возведение в степень `n` хранит в памяти `n` различных контекстов.
-
-Реализация возведения в степень через цикл гораздо более экономна:
-
-```js
-function pow(x, n) {
-  var result = x;
-  for (var i = 1; i < n; i++) {
-    result *= x;
-  }
-  return result;
-}
-```
-
-У такой функции `pow` будет один контекст, в котором будут последовательно меняться значения `i` и `result`.
-
-**Любая рекурсия может быть переделана в цикл. Как правило, вариант с циклом будет эффективнее.**
-
-Но переделка рекурсии в цикл может быть нетривиальной, особенно когда в функции, в зависимости от условий, используются различные рекурсивные подвызовы, когда ветвление более сложное.
-
-## Итого
-
-Рекурсия -- это когда функция вызывает сама себя, как правило, с другими аргументами.
-
-Существуют много областей применения рекурсивных вызовов. Здесь мы посмотрели на один из них -- решение задачи путём сведения её к более простой (с меньшими аргументами), но также рекурсия используется для работы с "естественно рекурсивными" структурами данных, такими как HTML-документы, для "глубокого" копирования сложных объектов. 
-
-Есть и другие применения, с которыми мы встретимся по мере изучения JavaScript.
-
-Здесь мы постарались рассмотреть происходящее достаточно подробно, однако, если пожелаете, допустимо временно забежать вперёд и открыть главу [](/debugging-chrome), с тем чтобы при помощи отладчика построчно пробежаться по коду и посмотреть стек на каждом шаге. Отладчик даёт к нему доступ.
-
-
-
-[head]
-<style>
-.function-execution-context {
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-}
-
-.function-execution-context li {
-  float: left;
-  clear: both;
-  border: 1px solid black;
-  font-family: "Consolas", monospace;
-  padding: 3px 5px;
-}
-
-
-.function-execution-context li:last-child {
-  font-weight: bold;
-}
-</style>
-[/head]
diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/alert.js b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/alert.js
deleted file mode 100644
index 2c4f96f5..00000000
--- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/alert.js
+++ /dev/null
@@ -1 +0,0 @@
-alert('Я - JavaScript!');
\ No newline at end of file
diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/index.html b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/index.html
deleted file mode 100644
index b00b9f8a..00000000
--- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="alert.js"></script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md
deleted file mode 100644
index bef2fc5b..00000000
--- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Код для HTML-файла:
-
-```html
-<!--+ src="index.html" -->
-```
-
-Для файла `alert.js` из той же директории:
-
-```js
-//+ src="alert.js"
-```
-
diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md
deleted file mode 100644
index 93cf1b4e..00000000
--- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Вывести alert внешним скриптом
-
-[importance 5]
-
-Возьмите решение предыдущей задачи [](/task/hello-alert) и вынесите скрипт во внешний файл `alert.js`, который расположите в той же директории.
-
-Откройте страницу и проверьте, что вывод сообщения всё ещё работает.
\ No newline at end of file
diff --git a/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md b/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md
deleted file mode 100644
index 089a87e0..00000000
--- a/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-Ответы:
-<ol>
-<li>Первым выполнится `big.js`, это нормальная последовательность выполнения подряд идущих скриптов.</li>
-<li>Первым выполнится `small.js`, так как скрипты из-за `async` ведут себя совершенно независимо друг от друга, страница тоже от них не зависит.</li>
-<li>Первым выполнится `big.js`, так как скрипты, подключённые через `defer`, сохраняют порядок выполнения относительно друг друга.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/2-external-script/2-async-defer-first/task.md b/1-js/2-first-steps/2-external-script/2-async-defer-first/task.md
deleted file mode 100644
index 72405f9a..00000000
--- a/1-js/2-first-steps/2-external-script/2-async-defer-first/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Какой скрипт выполнится первым?
-
-[importance 4]
-
-В примере ниже подключены два скрипта `small.js` и `big.js`.
-
-Если предположить, что `small.js` загружается гораздо быстрее, чем `big.js` --  какой выполнится первым?
-
-```html
-<script src="big.js"></script>
-<script src="small.js"></script>
-```
-
-А вот так?
-
-```html
-<script async src="big.js"></script>
-<script async src="small.js"></script>
-```
-
-А так?
-
-```html
-<script defer src="big.js"></script>
-<script defer src="small.js"></script>
-```
-
diff --git a/1-js/2-first-steps/2-external-script/article.md b/1-js/2-first-steps/2-external-script/article.md
deleted file mode 100644
index 41a9a3b7..00000000
--- a/1-js/2-first-steps/2-external-script/article.md
+++ /dev/null
@@ -1,251 +0,0 @@
-# Внешние скрипты, порядок исполнения
-
-Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML:
-
-```html
-<script src="/path/to/script.js"></script>
-```
-
-Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта). 
-
-Браузер сам скачает скрипт и выполнит.
-
-Можно указать и полный URL, например:
-
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-```
-
-Вы также можете использовать путь относительно текущей страницы. Например, `src="lodash.js"` обозначает файл из текущей директории.
-
-Чтобы подключить несколько скриптов, используйте несколько тегов:
-
-```html
-<script src="/js/script1.js"></script>
-<script src="/js/script2.js"></script>
-...
-```
-
-[smart]
-Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
-
-Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
-
-Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.  
-[/smart]
-
-
-[warn header="Если указан атрибут `src`, то содержимое тега игнорируется."]
-
-В одном теге `SCRIPT` нельзя одновременно подключить внешний скрипт и указать код. 
-
-Вот так не cработает:
-
-```html
-<script *!*src*/!*="file.js">
-  alert(1); // так как указан src, то внутренняя часть тега игнорируется
-</script>
-```
-
-Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так:
-
-```html
-<script src="file.js"></script>
-<script>
-  alert( 1 );
-</script>
-```
-
-[/warn]
-
-## Асинхронные скрипты: defer/async
-
-Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
-
-Если браузер видит тег `<script>`, то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
-
-Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
-
-```html
-<!--+ run height=100 -->
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p>Начинаем считать:</p>
-
-*!*
-  <script>
-    alert( 'Первый кролик!' );
-    alert( 'Второй кролик!' );
-    alert( 'Третий кролик!' );
-  </script>
-*/!*
-
-  <p>Кролики посчитаны!</p>
-
-</body>
-
-</html>
-```
-
-Такое поведение называют "синхронным". Как правило, оно вполне нормально, но есть важное следствие.
-
-**Если скрипт -- внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.**
-
-То есть, в таком документе, пока не загрузится и не выполнится `big.js`, содержимое `<body>` будет скрыто:
-
-```html
-<html>
-<head>
-*!*
-  <script src="big.js"></script>
-*/!*
-</head>
-<body>
-  Этот текст не будет показан, пока браузер не выполнит big.js.
-</body>
-</html>
-```
-
-И здесь вопрос -- действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта? 
-
-Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
-
-Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал.
-
-А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
-
-Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
-
-```html
-<!--+ run height=100 -->
-<p>Важная информация не покажется, пока не загрузится скрипт.</p>
-
-<script src="https://js.cx/hello/ads.js?speed=0"></script>
-
-<p>...Важная информация!</p>
-```
-
-Что делать?
-
-Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит -- получается, другие два его будут ждать -- тоже нехорошо.
-
-Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.
-
-Поэтому "расположить скрипты внизу" -- не лучший выход.
-
-Кардинально решить эту проблему помогут атрибуты `async` или `defer`:
-<dl>
-<dt>Атрибут `async`</dt>
-<dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
-<dt>Атрибут `defer`</dt>
-<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от `async`.
-
-Первое -- браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён. 
-
-То есть, в таком коде (с `async`) первым сработает тот скрипт, который раньше загрузится:
-
-```html
-<script src="1.js" async></script>
-<script src="2.js" async></script>
-```
-
-А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать.
-
-```html
-<script src="1.js" defer></script>
-<script src="2.js" defer></script>
-```
-
-Поэтому атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
-
-Второе отличие -- скрипт с `defer` сработает, когда весь HTML-документ будет обработан браузером. 
-
-Например, если документ достаточно большой...
-```html
-<script src="async.js" async></script>
-<script src="defer.js" defer></script>
-
-Много много много букв
-```
-
-...То скрипт `async.js` выполнится, как только загрузится -- возможно, до того, как весь документ готов. А `defer.js` подождёт готовности всего документа.
-
-Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.
-</dd>
-</dl>
-
-[smart header="`async` вместе с `defer`"]
-При одновременном указании `async` и `defer` в современных браузерах будет использован только `async`, в IE9- -- только `defer` (не понимает `async`).
-[/smart]
-
-[warn header="Атрибуты `async/defer` -- только для внешних скриптов"]
-Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`. 
-
-При попытке назначить их на обычные скрипты <code>&lt;script&gt;...&lt;/script&gt;</code>, они будут проигнороированы.
-[/warn]
-
-Тот же пример с `async`:
-
-```html
-<!--+ run height=100 -->
-<p>Важная информация теперь не ждёт, пока загрузится скрипт...</p>
-
-<script *!*async*/!* src="https://js.cx/hello/ads.js?speed=0"></script>
-
-<p>...Важная информация!</p>
-```
-
-При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт. 
-
-[smart header="Эти атрибуты давно \"в ходу\""]
-Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их.
-
-Перед вставкой внешнего тега `<script>` понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.
-[/smart]
-
-[smart header="Забегая вперёд"]
-Для продвинутого читателя, который знает, что теги `<script>` можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как `async`. То есть, выполняются как только загрузятся, без сохранения относительного порядка.
-
-Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство `script.async = false`.
-
-
-Выглядит это примерно так:
-```js
-function addScript(src);
-  var script = document.createElement('script');
-  script.src = src;
-*!*
-  script.async = false; // чтобы гарантировать порядок 
-*/!*
-  document.head.appendChild(script);
-}
-
-addScript('1.js'); // загружаться эти скрипты начнут сразу
-addScript('2.js'); // выполнятся, как только загрузятся
-addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3
-```
-
-Более подробно работу со страницей мы разберём во второй части учебника.
-[/smart]
-
-
-## Итого
-
-<ul>
-<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
-<li>Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт -- браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.</li>
-<li>Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет. Кроме того, `defer` всегда ждёт, пока весь HTML-документ будет готов, а `async` -- нет.</li>
-</ul>
-
-Очень важно не только читать учебник, но делать что-то самостоятельно.
-
-Решите задачки, чтобы удостовериться, что вы всё правильно поняли.
-
-
diff --git a/1-js/2-first-steps/20-named-function-expression/1-nfe-check/solution.md b/1-js/2-first-steps/20-named-function-expression/1-nfe-check/solution.md
deleted file mode 100644
index 5875fae8..00000000
--- a/1-js/2-first-steps/20-named-function-expression/1-nfe-check/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-**Первый код выведет `function ...`, второй -- ошибку во всех браузерах, кроме IE8-.**
-
-```js
-//+ run untrusted no-beautify
-// обычное объявление функции (Function Declaration)
-function g() { return 1; }; 
-
-alert(g); // функция
-```
-
-Во втором коде скобки есть, значит функция внутри является не `Function Declaration`, а частью выражения, то есть `Named Function Expression`. Его имя видно только внутри, снаружи переменная `g` не определена.
-
-```js
-//+ run untrusted no-beautify
-// Named Function Expression!
-(function g() { return 1; }); 
-
-alert(g);  // Ошибка!
-```
-
-Все браузеры, кроме IE8-, поддерживают это ограничение видимости и выведут ошибку, `"undefined variable"`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/20-named-function-expression/1-nfe-check/task.md b/1-js/2-first-steps/20-named-function-expression/1-nfe-check/task.md
deleted file mode 100644
index 0510ff4d..00000000
--- a/1-js/2-first-steps/20-named-function-expression/1-nfe-check/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Проверка на NFE
-
-[importance 5]
-
-Каков будет результат выполнения кода?
-
-```js
-//+ no-beautify
-function g() { return 1; }
-
-alert(g);
-```
-
-А такого? Будет ли разница, если да -- почему?
-
-```js
-//+ no-beautify
-(function g() { return 1; });
-
-alert(g);
-```
-
diff --git a/1-js/2-first-steps/20-named-function-expression/article.md b/1-js/2-first-steps/20-named-function-expression/article.md
deleted file mode 100644
index c51478a3..00000000
--- a/1-js/2-first-steps/20-named-function-expression/article.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# Именованные функциональные выражения
-
-Специально для работы с рекурсией в JavaScript существует особое расширение функциональных выражений, которое называется "Named Function Expression" (сокращённо NFE) или, по-русски, *"именованное функциональное выражение"*.
-
-[cut]
-
-
-## Named Function Expression [#functions-nfe]
-
-Обычное функциональное выражение:
-```js
-var f = function(...) { /* тело функции */ };
-```
-
-Именованное с именем `sayHi`:
-
-```js
-//+ no-beautify
-var f = function *!*sayHi*/!*(...) { /* тело функции */ };
-```
-
-Что же это за имя, которое идёт в дополнение к `f`, и зачем оно?
-
-Имя функционального выражения (`sayHi`) имеет особый смысл. Оно доступно только изнутри самой функции.
-
-Это ограничение видимости входит в стандарт JavaScript и поддерживается всеми браузерами, кроме IE8-.
-
-Например:
-
-```js
-//+ run
-var f = function sayHi(name) {
-  alert( sayHi ); // изнутри функции - видно (выведет код функции) 
-};
-
-alert( sayHi ); // снаружи - не видно (ошибка: undefined variable 'sayHi')
-```
-
-Кроме того, имя NFE нельзя перезаписать:
-
-```js
-//+ run
-var test = function sayHi(name) {
-*!*
-  sayHi = "тест"; // попытка перезаписи
-*/!*
-  alert( sayHi ); // function... (перезапись не удалась)
-};
-
-test();
-```
-
-В режиме `use strict` код выше выдал бы ошибку.
-
-Как правило, имя NFE используется для единственной цели -- позволить изнутри функции вызвать саму себя.
-
-## Пример использования 
-
-NFE используется в первую очередь в тех ситуациях, когда функцию нужно передавать в другое место кода или перемещать из одной переменной в другую. 
-
-**Внутреннее имя позволяет функции надёжно обращаться к самой себе, где бы она ни находилась.**
-
-Вспомним, к примеру, функцию-факториал из задачи [](/task/factorial):
-
-```js
-//+ run
-function f(n) {
-  return n ? n * f(n - 1) : 1;
-};
-
-alert( f(5) ); // 120
-```
-
-Попробуем перенести её в другую переменную `g`:
-
-```js
-//+ run
-function f(n) {
-  return n ? n * f(n - 1) : 1;
-};
-
-*!*
-var g = f;
-f = null;
-*/!*
-
-alert( g(5) ); // запуск функции с новым именем - ошибка при выполнении!
-```
-
-Ошибка возникла потому что функция из своего кода обращается к своему старому имени `f`. А этой функции уже нет, `f = null`.
-
-Для того, чтобы функция всегда надёжно работала, объявим её как Named Function Expression:
-
-```js
-//+ run no-beautify
-var f = function *!*factorial*/!*(n) { 
-  return n ? n**!*factorial*/!*(n-1) : 1;
-};
- 
-var g = f;  // скопировали ссылку на функцию-факториал в g
-f = null;
-
-*!*
-alert( g(5) ); // 120, работает!
-*/!*
-```
-
-[warn header="В браузере IE8- создаются две функции"]
-
-Как мы говорили выше, в браузере IE до 9 версии имя NFE видно везде, что является ошибкой с точки зрения стандарта.
-
-...Но на самом деле ситуация ещё забавнее. Старый IE создаёт в таких случаях целых две функции: одна записывается в переменную `f`, а вторая -- в переменную `factorial`.
-
-Например:
-
-```js
-//+ run
-var f = function factorial(n) { /*...*/ };
-
-// в IE8- false
-// в остальных браузерах ошибка, т.к. имя factorial не видно
-alert( f === factorial );
-```
-
-Все остальные браузеры полностью поддерживают именованные функциональные выражения.
-[/warn]
-
-
-[smart header="Устаревшее специальное значение `arguments.callee`"]
-Если вы давно работаете с JavaScript, то, возможно, знаете, что раньше для этой цели также служило специальное значение `arguments.callee`. 
-
-Если это название вам ни о чём не говорит -- всё в порядке, читайте дальше, мы обязательно обсудим его [в отдельной главе](#arguments-callee).
-
-Если же вы в курсе, то стоит иметь в виду, что оно официально исключено из современного стандарта. А NFE -- это наше настоящее. 
-[/smart]
-
-
-## Итого
-
-Если функция задана как Function Expression, ей можно дать имя. 
-
-Оно будет доступно только внутри функции (кроме IE8-).
-
-Это имя предназначено для надёжного рекурсивного вызова функции, даже если она записана в другую переменную.
-
-Обратим внимание, что с Function Declaration так поступить нельзя. Такое "специальное" внутреннее имя функции задаётся только в синтаксисе Function Expression.
-
diff --git a/1-js/2-first-steps/21-javascript-specials/article.md b/1-js/2-first-steps/21-javascript-specials/article.md
deleted file mode 100644
index 3dad3c2e..00000000
--- a/1-js/2-first-steps/21-javascript-specials/article.md
+++ /dev/null
@@ -1,400 +0,0 @@
-# Всё вместе: особенности JavaScript
-
-В этой главе приводятся основные особенности JavaScript, на уровне базовых конструкций, типов, синтаксиса.
-
-Она будет особенно полезна, если ранее вы программировали на другом языке, ну или как повторение важных моментов раздела.
-
-Всё очень компактно, со ссылками на развёрнутые описания.
-
-[cut]
-
-## Структура кода
-
-Операторы разделяются точкой с запятой:
-
-```js
-//+ run no-beautify
-alert('Привет'); alert('Мир');
-```
-
-Как правило, перевод строки тоже подразумевает точку с запятой. Так тоже будет работать:
-
-```js
-//+ run no-beautify
-alert('Привет') 
-alert('Мир')
-```
-
-...Однако, иногда JavaScript не вставляет точку с запятой. Например:
-
-```js
-//+ run no-beautify
-var a = 2
-+3
-
-alert(a); // 5
-```
-
-Бывают случаи, когда это ведёт к ошибкам, которые достаточно трудно найти и исправить, например:
-
-```js
-//+ run
-alert("После этого сообщения будет ошибка")
-
-[1, 2].forEach(alert)
-```
-
-Детали того, как работает код выше (массивы `[...]` и `forEach`) мы скоро изучим, здесь важно то, что при установке точки с запятой после `alert` он будет работать корректно.
-
-**Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, общепринятый стандарт.**
-
-Поддерживаются однострочные комментарии `// ...` и многострочные `/* ... */`:
-
-Подробнее: [](/structure).
-
-## Переменные и типы
-
-<ul>
-<li>Объявляются директивой `var`. Могут хранить любое значение:
-
-```js
-var x = 5;
-x = "Петя";
-```
-
-</li>
-<li>Есть 5 "примитивных" типов и объекты:
-
-```js
-//+ no-beautify
-x = 1;             // число
-x = "Тест";        // строка, кавычки могут быть одинарные или двойные
-x = true;          // булево значение true/false
-x = null;          // спец. значение (само себе тип)
-x = undefined;     // спец. значение (само себе тип)
-```
-
-Также есть специальные числовые значения `Infinity` (бесконечность) и `NaN`.
-
-Значение `NaN` обозначает ошибку и является результатом числовой операции, если она некорректна.
-</li>
-<li>**Значение `null` не является "ссылкой на нулевой адрес/объект" или чем-то подобным. Это просто специальное значение.** 
-
-Оно присваивается, если мы хотим указать, что значение переменной неизвестно. 
-
-Например:
-
-```js
-var age = null; // возраст неизвестен
-```
-
-</li>
-<li>**Значение `undefined` означает "переменная не присвоена".**
-
-Например:
-
-```js
-var x;
-alert( x ); // undefined
-```
-
-Можно присвоить его и явным образом: `x = undefined`, но так делать не рекомендуется.
-
-Про объекты мы поговорим в главе [](/object), они в JavaScript сильно отличаются от большинства других языков.
-</li>
-<li>В имени переменной могут быть использованы любые буквы или цифры, но цифра не может быть первой. Символы доллар `$` и подчёркивание `_` допускаются наравне с буквами.</li>
-</ul>
-
-Подробнее: [](/variables), [](/types-intro).
-
-## Строгий режим
-
-Для того, чтобы интерпретатор работал в режиме максимального соответствия современному стандарту, нужно начинать скрипт директивой `'use strict';`
-
-```js
-'use strict';
-
-...
-```
-
-Эта директива может также указываться в начале функций. При этом функция будет выполняться в режиме соответствия, а на внешний код такая директива не повлияет.
-
-Одно из важных изменений в современном стандарте -- все переменные нужно объявлять через `var`. Есть и другие, которые мы изучим позже, вместе с соответствующими возможностями языка.
-
-
-
-## Взаимодействие с посетителем
-
-Простейшие функции для взаимодействия с посетителем в браузере:
-
-<dl>
-<dt>["prompt(вопрос[, по_умолчанию])"](https://developer.mozilla.org/en/DOM/window.prompt)</dt>
-<dd>Задать `вопрос` и возвратить введённую строку, либо `null`, если посетитель нажал "Отмена".</dd>
-<dt>["confirm(вопрос)"](https://developer.mozilla.org/en/DOM/window.confirm)</dt>
-<dd>Задать `вопрос` и предложить кнопки "Ок", "Отмена". Возвращает, соответственно,  `true/false`.</dd>
-<dt>["alert(сообщение)"](https://developer.mozilla.org/en/DOM/window.alert)</dt>
-<dd>Вывести сообщение на экран.</dd>
-</dl>
-
-Все эти функции являются *модальными*, т.е. не позволяют посетителю взаимодействовать со страницей до ответа.
-
-Например:
-
-```js
-//+ run
-var userName = prompt("Введите имя?", "Василий");
-var isTeaWanted = confirm("Вы хотите чаю?");
-
-alert( "Посетитель: " + userName );
-alert( "Чай: " + isTeaWanted );
-```
-
-Подробнее: [](/uibasic).
-
-## Особенности операторов
-
-<ul>
-<li>**Для сложения строк используется оператор `+`.**
-
-Если хоть один аргумент -- строка, то другой тоже приводится к строке:
-
-```js
-//+ run
-alert( 1 + 2 ); // 3, число
-alert( '1' + 2 ); // '12', строка
-alert( 1 + '2' ); // '12', строка
-```
-
-</li>
-<li>**Сравнение `===` проверяет точное равенство, включая одинаковый тип.** Это самый очевидный и надёжный способ сравнения.
-
-**Остальные сравнения `== < <= > >=` осуществляют числовое приведение типа:**
-
-```js
-//+ run
-alert( 0 == false ); // true
-alert( true > 0 ); // true
-```
-
-Исключение -- сравнение двух строк (см. далее).
-
-**Исключение: значения `null` и `undefined` ведут себя в сравнениях не как ноль.** 
-<ul>
-<li>Они равны `null == undefined` друг другу и не равны ничему ещё. В частности, не равны нулю.</li>
-<li>В других сравнениях (кроме `===`) значение `null` преобразуется к нулю, а `undefined` -- становится `NaN` ("ошибка").</li>
-</ul>
-
-Такое поведение может привести к неочевидным результатам, поэтому лучше всего использовать для сравнения с ними `===`. Оператор `==` тоже можно, если не хотите отличать `null` от `undefined`.
-
-Например, забавное следствие этих правил для `null`:
-
-```js
-//+ run no-beautify
-alert( null > 0 );  // false, т.к. null преобразовано к 0
-alert( null >= 0 ); // true, т.к. null преобразовано к 0
-alert( null == 0 ); // false, в стандарте явно указано, что null равен лишь undefined
-```
-
-С точки зрения здравого смысла такое невозможно. Значение `null` не равно нулю и не больше, но при этом `null >= 0` возвращает `true`!
-</li>
-</ol>
-
-
-<li>**Сравнение строк -- лексикографическое, символы сравниваются по своим unicode-кодам.** 
-
-Поэтому получается, что строчные буквы всегда больше, чем прописные:
-
-```js
-//+ run
-alert( 'а' > 'Я' ); // true
-```
-
-</li>
-</ul>
-
-Подробнее: [](/operators), [](/comparison).
-
-## Логические операторы
-
-В JavaScript есть логические операторы: И (обозначается `&&`), ИЛИ (обозначается `||`) и НЕ (обозначается `!`). Они интерпретируют любое значение как логическое.
-
-Не стоит путать их с [побитовыми операторами](/bitwise-operators) И, ИЛИ, НЕ, которые тоже есть в JavaScript и работают с числами на уровне битов.
-
-Как и в большинстве других языков, в логических операторах используется "короткий цикл" вычислений. Например, вычисление выражения `1 && 0 && 2` остановится после первого И `&&`, т.к. понятно что результат будет ложным (ноль интерпретируется как `false`).
-
-**Результатом логического оператора служит последнее значение в коротком цикле вычислений.**
-
-Можно сказать и по-другому: значения хоть и интерпретируются как логические, но то, которое в итоге определяет результат, возвращается без преобразования.
-
-Например:
-
-```js
-//+ run
-alert( 0 && 1 ); // 0
-alert( 1 && 2 && 3 ); // 3
-alert( null || 1 || 2 ); // 1
-```
-
-Подробнее: [](/logical-ops).
-
-## Циклы 
-
-<ul>
-<li>Поддерживаются три вида циклов:
-
-```js
-// 1
-while (условие) {
-  ...
-}
-
-// 2
-do {
-  ...
-} while (условие);
-
-// 3
-for (var i = 0; i < 10; i++) {
-  ...
-}
-```
-
-</li>
-<li>Переменную можно объявлять прямо в цикле, но видна она будет и за его пределами.</li>
-<li>Поддерживаются директивы `break/continue` для выхода из цикла/перехода на следующую итерацию.
-
-Для выхода одновременно из нескольких уровней цикла можно задать метку.
-
-Синтаксис: "`имя_метки:`", ставится она только перед циклами и блоками, например:
-
-```js
-*!*outer:*/!*
-for(;;) {
-    ...
-  for(;;) {
-    ...
-    *!*break outer;*/!*
-  }
-}
-```
-
-Переход на метку возможен только изнутри цикла, и только на внешний блок по отношению к данному циклу. В произвольное место программы перейти нельзя.
-</li>
-</ul>
-
-Подробнее: [](/while-for).
-
-## Конструкция switch
-
-При сравнениях в конструкции `switch` используется оператор `===`.
-
-Например:
-
-```js
-//+ run
-var age = prompt('Ваш возраст', 18);
-
-switch (age) {
-  case 18:
-    alert( 'Никогда не сработает' ); // результат prompt - строка, а не число
-
-  case "18": // вот так - сработает!
-    alert( 'Вам 18 лет!' );
-    break;
-
-  default:
-    alert( 'Любое значение, не совпавшее с case' );
-}
-```
-
-Подробнее: [](/switch).
-
-## Функции
-
-Синтаксис функций в JavaScript:
-
-```js
-//+ run
-// function имя(список параметров) { тело }
-function sum(a, b) {
-  var result = a + b;
-
-  return result;
-}
-
-// использование:
-alert( sum(1, 2) ); // 3
-```
-
-<ul>
-<li>`sum` -- имя функции, ограничения на имя функции -- те же, что и на имя переменной.</li>
-<li>Переменные, объявленные через `var` внутри функции, видны везде внутри этой функции, блоки `if`, `for` и т.п. на видимость не влияют.</li>
-<li>Параметры копируются в локальные переменные `a`, `b`.
-</li>
-<li>Функция без `return` считается возвращающей `undefined`. Вызов  `return` без значения также возвращает `undefined`:
-
-```js
-//+ run no-beautify
-function f() { } 
-alert( f() ); // undefined
-```
-
-</li>
-</ul>
-
-Подробнее: [](/function-basics).
-
-## Function Declaration и Expression
-
-Функция в JavaScript является обычным значением. 
-
-Её можно создать в любом месте кода и присвоить в переменную, вот так:
-
-```js
-//+ run
-var sum = function(a, b) {
-  var result = a + b;
-
-  return result;
-}
-
-alert( sum(1, 2) ); // 3
-```
-
-Такой синтаксис, при котором функция объявляется в контексте выражения (в данном случае, выражения присваивания), называется Function Expression, а обычный синтаксис, при котором функция объявляется в основном потоке кода -- Function Declaration.
-
-Функции, объявленные через Function Declaration, отличаются от Function Expression тем, что интерпретатор создаёт их при входе в область видимости (в начале выполнения скрипта), так что они работают до объявления.
-
-Обычно это удобно, но может быть проблемой, если нужно объявить функцию в зависимости от условия. В этом случае, а также в других ситуациях, когда хочется создать функцию "здесь и сейчас", используют Function Expression.
-
-Детали: [](/function-declaration-expression).
-
-## Named Function Expression
-
-Если объявление функции является частью какого-либо выражения, например `var f = function...` или любого другого, то это Function Expression.
-
-В этом случае функции можно присвоить "внутреннее" имя, указав его после `function`. Оно будет видно только внутри этой функции и позволяет обратиться к функции изнутри себя. Обычно это используется для рекурсивных вызовов.
-
-Например, создадим функцию для вычисления факториала как Function Expression и дадим ей имя `me`:
-
-```js
-//+ run
-var factorial = function me(n) {
-  return (n == 1) ? n : n * me(n - 1);
-}
-
-alert( factorial(5) ); // 120
-*!*
-alert( me ); // ошибка, нет такой переменной
-*/!*
-```
-
-Ограничение видимости для имени не работает в IE8-, но вызов с его помощью работает во всех браузерах.
- 
-Более развёрнуто: [](/named-function-expression).
-
-## Итого
-
-В этой главе мы повторили основные особенности JavaScript, знание которых необходимо для обхода большинства "граблей", да и просто для написания хорошего кода.
-
-Это, конечно, лишь основы. Дальше вы узнаете много других особенностей и приёмов программирования на этом языке.
diff --git a/1-js/2-first-steps/3-structure/article.md b/1-js/2-first-steps/3-structure/article.md
deleted file mode 100644
index ec28445d..00000000
--- a/1-js/2-first-steps/3-structure/article.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# Структура кода
-
-В этой главе мы рассмотрим общую структуру кода, команды и их разделение.
-[cut]
-## Команды
-
-Раньше мы уже видели пример команды: `alert('Привет, мир!')` выводит сообщение.
-
-Для того, чтобы добавить в код ещё одну команду -- можно поставить её после точки с запятой.
-
-Например, вместо одного вызова `alert` сделаем два:
-
-```js
-//+ run no-beautify
-alert('Привет'); alert('Мир');
-```
-
-Как правило, каждая команда пишется на отдельной строке -- так код лучше читается:
-
-```js
-//+ run no-beautify
-alert('Привет'); 
-alert('Мир');
-```
-
-## Точка с запятой [#semicolon]
-
-Точку с запятой *во многих случаях* можно не ставить, если есть переход на новую строку. 
-
-Так тоже будет работать:
-
-```js
-//+ run no-beautify
-alert('Привет') 
-alert('Мир')
-```
-
-В этом случае JavaScript интерпретирует переход на новую строчку как разделитель команд и автоматически вставляет "виртуальную" точку с запятой между ними. 
-
-**Однако, важно то, что "во многих случаях" не означает "всегда"!**
-
-Например, запустите этот код:
-
-```js
-//+ run no-beautify
-alert(3 +
-1
-+ 2);
-```
-
-Выведет 6.
-
-То есть, точка с запятой не ставится. Почему? Интуитивно понятно, что здесь дело в "незавершённом выражении", конца которого JavaScript ждёт с первой строки и поэтому не ставит точку с запятой. И здесь это, пожалуй, хорошо и приятно.
-
-**Но в некоторых важных ситуациях JavaScript "забывает" вставить точку с запятой там, где она нужна.**
-
-Таких ситуаций не так много, но ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять. 
-
-Чтобы не быть голословным, вот небольшой пример.
-
-Такой код работает:
-```js
-//+ run
-[1, 2].forEach(alert)
-```
-
-Он выводит по очереди `1`, `2`. Почему он работает -- сейчас не важно, позже разберёмся.
-
-Важно, что вот такой код уже работать не будет:
-
-```js
-//+ run no-beautify
-alert("Сейчас будет ошибка")
-[1, 2].forEach(alert)
-```
-
-Выведется только первый `alert`, а дальше -- ошибка. Потому что перед квадратной скобкой JavaScript точку с запятой не ставит, а как раз здесь она нужна (упс!).
-
-Если её поставить, то всё будет в порядке:
-```js
-//+ run
-alert( "Сейчас будет ошибка" );
-[1, 2].forEach(alert)
-```
-
-**Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт, которому следуют все большие проекты.**
-
-## Комментарии
-
-Со временем программа становится большой и сложной. Появляется необходимость добавить *комментарии*, которые объясняют, что происходит и почему.
-
-Комментарии могут находиться в любом месте программы и никак не влияют на её выполнение. Интерпретатор JavaScript попросту игнорирует их.
-
-*Однострочные комментарии* начинаются с двойного слэша `//`. Текст считается комментарием до конца строки:
-
-```js
-//+ run
-// Команда ниже говорит "Привет" 
-alert( 'Привет' );
-
-alert( 'Мир' ); // Второе сообщение выводим отдельно
-```
-
-*Многострочные комментарии* начинаются слешем-звездочкой <code>"/&#42;"</code> и заканчиваются звездочкой-слэшем <code>"&#42;/"</code>, вот так:
-
-```js
-//+ run
-/* Пример с двумя сообщениями.
-Это - многострочный комментарий.
-*/
-alert( 'Привет' );
-alert( 'Мир' );
-```
-
-Всё содержимое комментария игнорируется. Если поместить код внутрь <code>/&#42; ... &#42;/</code> или после `//` -- он не выполнится.
-
-```js
-//+ run
-/* Закомментировали код
-alert( 'Привет' );
-*/
-alert( 'Мир' );
-```
-
-[smart header="Используйте горячие клавиши!"]
-В большинстве редакторов комментарий можно поставить горячей клавишей, обычно это [key Ctrl+/] для однострочных и что-то вроде [key Ctrl+Shift+/] -- для многострочных комментариев (нужно выделить блок и нажать сочетание клавиш). Детали смотрите в руководстве по редактору.
-[/smart]
- 
-[warn header="Вложенные комментарии не поддерживаются!"]
-В этом коде будет ошибка:
-
-```js
-//+ run no-beautify
-/* 
-  /* вложенный комментарий ?!? */
-*/
-alert('Мир');
-```
-
-[/warn]
-
-
-Не бойтесь комментариев. Чем больше кода в проекте -- тем они важнее. Что же касается увеличения размера кода -- это не страшно, т.к. существуют инструменты сжатия JavaScript, которые при публикации кода легко их удалят.
-
-На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript.
-
diff --git a/1-js/2-first-steps/4-strict-mode/article.md b/1-js/2-first-steps/4-strict-mode/article.md
deleted file mode 100644
index 02670f7b..00000000
--- a/1-js/2-first-steps/4-strict-mode/article.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Современный стандарт, "use strict"
-
-Очень долго язык JavaScript развивался без потери совместимости. Новые возможности добавлялись в язык, но старые -- никогда не менялись, чтобы не "сломать" уже существующие HTML/JS-страницы с их использованием.
-
-Однако, это привело к тому, что любая ошибка в дизайне языка становилась "вмороженной" в него навсегда. 
-
-Так было до появления стандарта EcmaScript 5 (ES5), который одновременно добавил новые возможности и внёс в язык ряд исправлений, которые могут привести к тому, что старый код, который был написан до его появления, перестанет работать.
-
-Чтобы этого не случилось, решили, что по умолчанию эти опасные изменения будут выключены, и код будет работать по-старому. А для того, чтобы перевести код в режим полного соответствия современному стандарту, нужно указать специальную директиву `use strict`. 
-
-Эта директива не поддерживается IE9-.
-
-[cut]
-
-## Директива use strict
-
-Директива выглядит как строка `"use strict";` или `'use strict';` и ставится в начале скрипта.
-
-Например:
-
-```js
-"use strict";
-
-// этот код будет работать по современному стандарту ES5
-...
-```
-
-[warn header="Отменить действие `use strict` никак нельзя"]
-Не существует директивы `no use strict` или подобной, которая возвращает в старый режим. 
-
-Если уж вошли в современный режим, то это дорога в один конец.
-[/warn]
-
-[smart header="`use strict` для функций"]
-Через некоторое время мы будем проходить [функции](/function-basics). На будущее заметим, что `use strict` также можно указывать в начале функций, тогда строгий режим будет действовать только внутри функции.
-[/smart]
-
-В следующих главах мы будем подробно останавливаться на отличиях в работе языка при `use strict` и без него.
-
-## Нужен ли мне "use strict"?
-
-Если говорить абстрактно, то -- да, нужен. В строгом режиме исправлены некоторые ошибки в дизайне языка, и вообще, современный стандарт -- это хорошо.
-
-Однако, есть и две проблемы.
-
-<dl>
-<dt>Поддержка браузеров IE9-, которые игнорируют `"use strict"`.</dt>
-<dd>Предположим, что мы, используя `"use strict"`, разработали код и протестировали его в браузере Chrome. Всё работает... Однако, вероятность ошибок при этом в IE9- выросла! Он-то всегда работает по старому стандарту, а значит, иногда по-другому. Возникающие ошибки придётся отлаживать уже в IE9-, и это намного менее приятно, нежели в Chrome. 
-
-Впрочем, проблема не так страшна. Несовместимостей мало. И если их знать (а в учебнике мы будем останавливаться на них) и писать правильный код, то всё будет в порядке и `"use strict"` станет нашим верным помощником. 
-</dd>
-<dt>Библиотеки, написанные без учёта `"use strict"`.</dt>
-<dd>Некоторые библиотеки, которые написаны без `"use strict"`, не всегда корректно работают, если вызывающий код содержит `"use strict"`.
-
-В первую очередь имеются в виду сторонние библиотеки, которые писали не мы, и которые не хотелось бы переписывать или править.
-
-Таких библиотек мало, но при переводе давно существующих проектов на `"use strict"` эта проблема возникает с завидной регулярностью.
-</dd>
-</dl>
-
-Вывод? 
-
-**Писать код с `use strict` следует лишь в том случае, если вы уверены, что описанных выше проблем не будет.**
-
-Конечно же, весь код, который находится в этом учебнике, корректно работает в режиме `"use strict"`.
-
-## ES5-shim [#es5-shim]
-
-Браузер IE8 поддерживает только совсем старую версию стандарта JavaScript, а именно ES3. 
-
-К счастью, многие возможности современного стандарта можно добавить в этот браузер, подключив библиотеку [ES5 shim](https://github.com/es-shims/es5-shim), а именно -- скрипты `es5-shim.js` и `es5-sham.js` из неё.
-
-## Итого
-
-В этой главе мы познакомились с понятием "строгий режим".
-
-Далее мы будем предполагать, что разработка ведётся либо в современном браузере, либо в IE8- с подключённым [ES5 shim](https://github.com/es-shims/es5-shim). Это позволит нам использовать большинство возможностей современного JavaScript во всех браузерах.
-
-Очень скоро, буквально в следующей главе, мы увидим особенности строгого режима на конкретных примерах.
-
diff --git a/1-js/2-first-steps/5-variables/1-hello-variables/solution.md b/1-js/2-first-steps/5-variables/1-hello-variables/solution.md
deleted file mode 100644
index e81aff84..00000000
--- a/1-js/2-first-steps/5-variables/1-hello-variables/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Каждая строчка решения соответствует одному шагу задачи:
-
-```js
-//+ run
-var admin, name; // две переменных через запятую
-
-name = "Василий";
-
-admin = name;
-
-alert( admin ); // "Василий"
-```
-
diff --git a/1-js/2-first-steps/5-variables/1-hello-variables/task.md b/1-js/2-first-steps/5-variables/1-hello-variables/task.md
deleted file mode 100644
index 42438a4b..00000000
--- a/1-js/2-first-steps/5-variables/1-hello-variables/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Работа с переменными
-
-[importance 2]
-
-<ol>
-<li>Объявите две переменные: `admin` и `name`. </li>
-<li>Запишите в `name` строку `"Василий"`. </li>
-<li>Скопируйте значение из `name` в `admin`.</li>
-<li>Выведите `admin` (должно вывести "Василий").</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/5-variables/article.md b/1-js/2-first-steps/5-variables/article.md
deleted file mode 100644
index 57ce5eff..00000000
--- a/1-js/2-first-steps/5-variables/article.md
+++ /dev/null
@@ -1,259 +0,0 @@
-# Переменные
-
-В зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.
-
-Если это электронный магазин -- то это товары, корзина. Если чат -- посетители, сообщения и так далее.
-
-Чтобы хранить информацию, используются *переменные*.
-[cut]
-## Переменная
-
-*Переменная* состоит из имени и выделенной области памяти, которая ему соответствует.
-
-Для *объявления* или, другими словами, *создания переменной* используется ключевое слово `var`:
-
-```js
-var message;
-```
-
-После объявления, можно записать в переменную данные:
-
-```js
-var message;
-message = 'Hello'; // сохраним в переменной строку
-```
-
-Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
-
-```js
-//+ run
-var message;
-message = 'Hello!';
-
-alert( message ); // выведет содержимое переменной
-```
-
-Для краткости можно совместить объявление переменной и запись данных:
-
-```js
-var message = 'Hello!';
-```
-
-Можно даже объявить несколько переменных сразу:
-
-```js
-//+ no-beautify
-var user = 'John', age = 25, message = 'Hello';
-```
-
-### Аналогия из жизни
-
-Проще всего понять переменную, если представить её как "коробку" для данных, с уникальным именем. 
-
-Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`:
-
-<img src="variable.png"> 
-
-В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
-
-```js
-//+ run
-var message;
-
-message = 'Hello!';
-
-message = 'World!'; // заменили значение
-
-alert( message );
-```
-
-При изменении значения старое содержимое переменной удаляется.
-
-<img src="variable-change.png">
-
-Можно объявить две переменные и копировать данные из одной в другую:
-
-```js
-//+ run
-var hello = 'Hello world!';
-
-var message;
-
-*!*
-// скопировали значение
-message = hello;
-*/!*
-
-alert( hello ); // Hello world!
-alert( message ); // Hello world!
-```
-
-[smart]
-Существуют [функциональные](http://ru.wikipedia.org/wiki/%D0%AF%D0%B7%D1%8B%D0%BA_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) языки программирования, в которых значение переменной менять нельзя. Например, [Scala](http://www.scala-lang.org/) или [Erlang](http://www.erlang.org/).
-
-В таких языках положил один раз значение в коробку -- и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить -- изволь создать новую коробку (объявить новую переменную), повторное использование невозможно.
-
-С виду -- не очень удобно, но, как ни странно, и на таких языках вполне можно  успешно программировать. Более того, оказывается, что в ряде областей, например в распараллеливании вычислений, они имеют преимущества. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора.
-[/smart]
-
-## Имена переменных [#variable-naming]
-
-На имя переменной в JavaScript наложены всего два ограничения. 
-<ol>
-<li>Имя может состоять из: букв, цифр, символов `$` и `_`</li>
-<li>Первый символ не должен быть цифрой.</li>
-</ol>
-
-Например:
-
-```js
-var myName;
-var test123;
-```
-
-**Что особенно интересно -- доллар `'$'` и знак подчеркивания `'_'` являются такими же обычными символами, как буквы:**
-
-```js
-//+ run untrusted
-var $ = 1; // объявили переменную с именем '$'
-var _ = 2; // переменная с именем '_'
-
-alert( $ + _ ); // 3
-```
-
-А такие переменные были бы неправильными:
-
-```js
-//+ no-beautify
-var 1a; // начало не может быть цифрой
-
-var my-name; // дефис '-' не является разрешенным символом
-```
-
-[smart header="Регистр букв имеет значение"]
-Переменные `apple` и `AppLE` -- две разные переменные. 
-[/smart]
-
-[smart header="Русские буквы допустимы, но не рекомендуются"]
-
-В названии переменных можно использовать и русские буквы, например:
-
-```js
-//+ run
-var имя = "Вася";
-alert( имя ); // "Вася"
-```
-
-Технически, ошибки здесь нет, но на практике сложилась традиция использовать в именах только английские буквы.
-[/smart]
-
-[warn header="Зарезервированные имена"]
-
-Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др.
-
-Например, такой пример выдаст синтаксическую ошибку:
-
-```js
-//+ run no-beautify
-var return = 5; // ошибка
-alert(return);
-```
-
-[/warn]
-
-
-## Важность директивы var
-
-В старом стандарте JavaScript разрешалось создавать переменную и без `var`, просто присвоив ей значение:
-
-```js
-num = 5; // переменная num будет создана, если ее не было
-```
-
-В режиме `"use strict"` так делать уже нельзя.
-
-Следующий код выдаст ошибку:
-
-```js
-//+ run
-"use strict";
-
-*!*
-num = 5; // error: num is not defined
-*/!*
-```
-
-Обратим внимание, директиву `use strict` нужно ставить до кода, иначе она не сработает:
-
-```js
-//+ run
-var something;
-
-"use strict"; // слишком поздно
-
-*!*
-num = 5; // ошибки не будет, так как строгий режим не активирован
-*/!*
-```
-
-[warn header="Ошибка в IE8- без `var`"]
-Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`. 
-
-Следущий документ в IE8- ничего не выведет, будет ошибка:
-
-```html
-<div id="test"></div>
-<script>
-*!*
-  test = 5; // здесь будет ошибка!
-*/!*
-  alert( test ); // не сработает
-</script>
-```
-
-Это потому, что переменная `test` не объявлена через `var` и совпадает с `id` элемента `<div>`. Даже не спрашивайте почему -- это ошибка в браузере IE до версии 9.
-
-Самое "забавное" то, что такая ошибка присвоения значений будет только в IE8- и только если на странице присутствует элемент с совпадающим с именем `id`. 
-
-Такие ошибки особенно "весело" исправлять и отлаживать.
-
-Вывод простой -- всегда объявляем переменные через `var`, и сюрпризов не будет. Даже в старых IE.
-[/warn]
-
-## Константы
-
-*Константа* -- это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:
-
-```js
-//+ run
-var COLOR_RED = "#F00";
-var COLOR_GREEN = "#0F0";
-var COLOR_BLUE = "#00F";
-var COLOR_ORANGE = "#FF7F00";
-
-var color = COLOR_ORANGE;
-alert( color ); // #FF7F00
-```
-
-Технически, константа является обычной переменной, то есть её *можно* изменить. Но мы *договариваемся* этого не делать.
-
-Зачем нужны константы? Почему бы просто не писать `var color = "#FF7F00"`?
-
-<ol>
-<li>Во-первых, константа `COLOR_ORANGE` -- это понятное имя. По присвоению `var color="#FF7F00"` непонятно, что цвет -- оранжевый. Иными словами, константа `COLOR_ORANGE` является "понятным псевдонимом" для значения `#FF7F00`.</li>
-<li>Во-вторых, опечатка в строке, особенно такой сложной как `#FF7F00`, может быть не замечена, а в имени константы её допустить куда сложнее.</li>
-</ol>
-
-**Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.**
-
-## Итого
-
-<ul>
-<li>В JavaScript можно объявлять переменные для хранения данных. Это делается при помощи `var`.</li>
-<li>Технически, можно просто записать значение и без объявления переменной, однако по ряду причин это не рекомендуется.</li>
-<li>Вместе с объявлением можно сразу присвоить значение: `var x = 10`.</li>
-<li>Переменные, которые названы `БОЛЬШИМИ_БУКВАМИ`, являются константами, то есть никогда не меняются. Как правило, они используются для удобства, чтобы было меньше ошибок.</li>
-</ul>
-
-
-
diff --git a/1-js/2-first-steps/5-variables/variable-change.png b/1-js/2-first-steps/5-variables/variable-change.png
deleted file mode 100644
index 19fa6fbf..00000000
Binary files a/1-js/2-first-steps/5-variables/variable-change.png and /dev/null differ
diff --git a/1-js/2-first-steps/5-variables/variable-change@2x.png b/1-js/2-first-steps/5-variables/variable-change@2x.png
deleted file mode 100644
index d00fbe15..00000000
Binary files a/1-js/2-first-steps/5-variables/variable-change@2x.png and /dev/null differ
diff --git a/1-js/2-first-steps/5-variables/variable.png b/1-js/2-first-steps/5-variables/variable.png
deleted file mode 100644
index aecd47ad..00000000
Binary files a/1-js/2-first-steps/5-variables/variable.png and /dev/null differ
diff --git a/1-js/2-first-steps/5-variables/variable@2x.png b/1-js/2-first-steps/5-variables/variable@2x.png
deleted file mode 100644
index 97d2b79d..00000000
Binary files a/1-js/2-first-steps/5-variables/variable@2x.png and /dev/null differ
diff --git a/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md b/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md
deleted file mode 100644
index 692a5bc7..00000000
--- a/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Каждая строчка решения соответствует одному шагу задачи:
-
-```js
-//+ run
-var ourPlanetName = "Земля"; // буквально "название нашей планеты"
-
-var userName = "Петя"; // "имя посетителя"
-```
-
-Названия переменных можно бы сократить, например, до `planet` и `name`, но тогда станет менее понятно, о чем речь. 
-
-Насколько допустимы такие сокращения -- зависит от скрипта, его размера и сложности, от того, есть ли другие планеты и пользователи. В общем, лучше не жалеть букв и называть переменные так, чтобы по имени можно было легко понять, что в ней находится, и нельзя было перепутать переменные.
- 
\ No newline at end of file
diff --git a/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md b/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md
deleted file mode 100644
index 1f0ef92f..00000000
--- a/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Объявление переменных
-
-[importance 3]
-
-<ol>
-<li>Создайте переменную для названия нашей планеты и присвойте ей значение `"Земля"`. *Правильное* имя выберите сами.</li>
-<li>Создайте переменную для имени посетителя со значением `"Петя"`. Имя также на ваш вкус.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/6-variable-names/article.md b/1-js/2-first-steps/6-variable-names/article.md
deleted file mode 100644
index 202a4f03..00000000
--- a/1-js/2-first-steps/6-variable-names/article.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# Правильный выбор имени переменной
-
-Правильный выбор имени переменной -- одна из самых важных и сложных вещей в программировании, которая отличает начинающего от гуру. 
-
-[cut]
-
-Дело в том, что большинство времени мы тратим не на изначальное написание кода, а на его развитие.
-
-Возможно, эти слова не очевидны, если вы пока что ничего большого не писали или пишете код "только для чтения" (написал 5 строк, отдал заказчику и забыл). Но чем более серьёзные проекты вы будете делать, тем более актуальны они будут для вас.
-
-Что такое это "развитие"? Это когда я вчера написал код, а сегодня (или спустя неделю) прихожу и хочу его поменять. Например, вывести сообщение не так, а эдак... Обработать товары по-другому, добавить функционал.. А где у меня там сообщение хранится? А где товар?...
-
-Гораздо проще найти нужные данные, если они правильно помечены, то есть когда переменная названа *правильно*.
-
-## Правила именования
-
-<ul>
-<li>**Правило 1.** 
-
-**Никакого транслита. Только английский.**
-
-Неприемлемы:
-
-```js
-var moiTovari;
-var cena;
-var ssilka;
-```
-
-Подойдут:
-
-```js
-var myGoods;
-var price;
-var link;
-```
-
-Чем плох транслит? 
-
-Во-первых, среди разработчиков всего мира принято использовать английский язык для имён переменных. И если ваш код потом попадёт к кому-то другому, например вы будете в команде больше чем из одного человека, то велик шанс, что транслит ему не понравится. 
-
-Во-вторых, русский транслит хуже читается и длиннее, чем названия на английском.
-
-В-третьих, в проектах вы наверняка будете применять библиотеки, написанные другими людьми. Многое уже готово, в распоряжении современного разработчика есть масса инструментов, все они используют названия переменных и функций на английском языке, и вы, конечно, будете их использовать. А от кода, где транслит перемешан с английским -- волосы могут встать дыбом, и не только на голове.
-
-Если вы вдруг не знаете английский -- самое время выучить. 
-</li>
-<li>**Правило 2.** 
-
-**Использовать короткие имена только для переменных "местного значения".**
-
-Называть переменные именами, не несущими смысловой нагрузки, например  `a`, `e`, `p`, `mg` -- можно только в том случае, если они используются в небольшом фрагменте кода и их применение очевидно.
-
-Вообще же, название переменной должно быть понятным. Иногда для этого нужно использовать несколько слов.
-</li>
-<li>**Правило 3.** 
-
-**Переменные из нескольких слов пишутся `вместеВотТак`.**
-
-Например:
-
-```js
-var borderLeftWidth;
-```
-
-Этот способ записи называется "верблюжьей нотацией" или, по-английски, "camelCase".
-
-Существует альтернативный стандарт, когда несколько слов пишутся через знак подчеркивания `'_'`:
-
-```js
-var border_left_width;
-```
-
-Преимущественно в JavaScript используется вариант `borderLeftWidth`, в частности во встроенных языковых и браузерных функциях. Поэтому целесообразно остановиться на нём.
-
-Ещё одна причина выбрать "верблюжью нотацию" -- запись в ней немного короче, чем c подчеркиванием, т.к. не нужно вставлять `'_'`. 
-</li>
-<li>**Правило последнее, главное.** 
-
-**Имя переменной должно максимально чётко соответствовать хранимым в ней данным.**
-
-Придумывание таких имен -- одновременно коротких и точных, при которых всегда понятно, что где лежит, приходит с опытом, но только если сознательно стремиться к этому.
-</li>
-</ul>
-
-Позвольте поделиться одним небольшим секретом, который очень прост, но позволит улучшить названия переменных и сэкономит время.
-
-Бывает так, что, написав код, мы через некоторое время к нему возвращаемся, надо что-то поправить. И мы примерно помним, что переменная, в которой хранится нужное вам значение, называется... Ну, скажем,  `borderLeftWidth`. Мы ищем в её в коде, не находим, но, разобравшись, обнаруживаем, что на самом деле переменная называлась вот так: `leftBorderWidth`. 
-
-**Если мы ищем переменную с одним именем, а находим  -- с другим, то зачастую самый лучший ход -- это *переименовать* переменную, чтобы имя было тем, которое вы искали.**
-
-То есть, в коде `leftBorderWidth`, а мы её переименуем на ту, которую искали: `borderLeftWidth`.
-
-Зачем? Дело в том, что в следующий раз, когда вы захотите что-то поправить, то вы будете искать по тому же самому имени. Соответственно, это сэкономит вам время. 
-
-Есть причина и поважнее. Поскольку именно это имя переменной пришло в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое было мы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
-
-Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editor), тогда этот процесс будет очень простым и быстрым.
-
-[smart header="Если коротко..."]
-Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. 
-
-**Не нужно бояться переименовывать переменные, если вы придумали имя получше.** 
-
-Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время.
-[/smart]
-
-
-[warn header="Храните в переменной то, что следует"]
-Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую. 
-
-В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает... Нужно подойти, проверить. 
-
-Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода. 
-
-**"Лишняя" переменная -- добро, а не зло.**
-[/warn]
-
-
-
diff --git a/1-js/2-first-steps/7-types-intro/article.md b/1-js/2-first-steps/7-types-intro/article.md
deleted file mode 100644
index 11a98f86..00000000
--- a/1-js/2-first-steps/7-types-intro/article.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# Шесть типов данных, typeof
-
-В JavaScript существует несколько основных типов данных.
-
-В этой главе мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности.
-
-[cut]
-
-## Число "number"
-
-```js
-var n = 123;
-n = 12.345;
-```
-
-Единый тип *число* используется как для целых, так и для дробных чисел.
-
-Существуют специальные числовые значения `Infinity` (бесконечность) и `NaN` (ошибка вычислений).
-
-Например, бесконечность `Infinity` получается при делении на ноль:
-
-```js
-//+ run
-alert( 1 / 0 ); // Infinity
-```
-
-Ошибка вычислений `NaN` будет результатом некорректной математической операции, например:
-
-```js
-//+ run
-alert( "нечисло" * 2 ); // NaN, ошибка
-```
-
-Эти значения формально принадлежат типу "число", хотя, конечно, числами в их обычном понимании не являются.
-
-Особенности работы с числами в JavaScript разобраны в главе [](/number).
-
-## Строка "string"
-
-```js
-var str = "Мама мыла раму";
-str = 'Одинарные кавычки тоже подойдут';
-```
-
-**В JavaScript одинарные и двойные кавычки равноправны.** Можно использовать или те или другие. 
-
-[smart header="Тип *символ* не существует, есть только *строка*."]
-В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это `char`. В JavaScript есть только тип "строка" `string`. Что, надо сказать, вполне удобно.
-[/smart]
-
-Более подробно со строками мы познакомимся в главе [](/string).
-
-## Булевый (логический) тип "boolean" 
-
-У него всего два значения: `true` (истина) и `false` (ложь). 
-
-Как правило, такой тип используется для хранения значения типа да/нет, например:
-
-```js
-//+ no-beautify
-var checked = true; // поле формы помечено галочкой
-checked = false;    // поле формы не содержит галочки
-```
-
-О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы.
-
-## Специальное значение "null"
-
-Значение `null` не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения `null`:
-
-```js
-var age = null;
-```
-
-В JavaScript `null` не является "ссылкой на несуществующий объект" или "нулевым указателем", как в некоторых других языках. Это просто специальное значение, которое имеет смысл "ничего" или "значение неизвестно".
-
-В частности, код выше говорит о том, что возраст `age` неизвестен.
-
-## Специальное значение "undefined"
-
-Значение `undefined`, как и `null`, образует свой собственный тип, состоящий из одного этого значения. Оно имеет смысл "значение не присвоено".
-
-Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть `undefined`:
-
-```js
-//+ run
-var x;
-alert( x ); // выведет "undefined"
-```
-
-Можно присвоить `undefined` и в явном виде, хотя это делается редко:
-
-```js
-//+ run
-var x = 123;
-x = undefined;
-
-alert( x ); // "undefined"
-```
-
-В явном виде `undefined` обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную "пустого" или "неизвестного" значения используется `null`. 
-
-## Объекты "object"
-
-Первые 5 типов называют *"примитивными"*. 
-
-Особняком стоит шестой тип: *"объекты"*.
-
-Он используется для коллекций данных и для объявления более сложных сущностей. 
-
-Объявляются объекты при помощи фигурных скобок `{...}`, например:
-
-```js
-var user = { name: "Вася" };
-```
-
-Мы подробно разберём способы объявления объектов и, вообще, работу с объектами, позже, в главе [](/object).
-
-## Оператор typeof [#type-typeof]
-
-Оператор `typeof` возвращает тип аргумента. 
-
-У него есть два синтаксиса: со скобками и без:
-<ol>
-<li>Синтаксис оператора: `typeof x`.</li>
-<li>Синтаксис функции: `typeof(x)`.</li>
-</ol>
-
-Работают они одинаково, но первый синтаксис короче.
-
-**Результатом `typeof` является строка, содержащая тип:**
-
-```js
-typeof undefined // "undefined" 
-
-typeof 0 // "number" 
-
-typeof true // "boolean" 
-
-typeof "foo" // "string" 
-
-typeof {} // "object" 
-
-*!*
-typeof null // "object"  (1)
-*/!*
-
-*!*
-typeof function(){} // "function"  (2)
-*/!*
-```
-
-Последние две строки помечены, потому что `typeof` ведет себя в них по-особому.
-
-<ol>
-<li>Результат `typeof null == "object"` -- это официально признанная ошибка в языке, которая сохраняется для совместимости. На самом деле `null` -- это не объект, а отдельный тип данных.</li>
-<li>Функции мы пройдём чуть позже. Пока лишь заметим, что функции не являются отдельным базовым типом в JavaScript, а подвидом объектов. Но `typeof` выделяет функции отдельно, возвращая для них `"function"`. На практике это весьма удобно, так как позволяет легко определить функцию.</li>
-</ol>
-
-К работе с типами мы также вернёмся более подробно в будущем, после изучения основных структур данных.
-
-## Итого
-
-Есть 5 "примитивных" типов: `number`, `string`, `boolean`, `null`, `undefined` и 6-й тип -- объекты `object`. 
-
-Очень скоро мы изучим их во всех деталях.
-
-Оператор `typeof x` позволяет выяснить, какой тип находится в `x`, возвращая его в виде строки.
diff --git a/1-js/2-first-steps/8-operators/1-increment-order/solution.md b/1-js/2-first-steps/8-operators/1-increment-order/solution.md
deleted file mode 100644
index 053e8d8d..00000000
--- a/1-js/2-first-steps/8-operators/1-increment-order/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Разъяснения
-
-```js
-//+ run no-beautify
-var a = 1, b = 1, c, d; 
-
-// префиксная форма сначала увеличивает a до 2, а потом возвращает 
-c = ++a; alert(c); // 2
-
-// постфиксная форма увеличивает, но возвращает старое значение
-d = b++; alert(d); // 1
-
-// сначала увеличили a до 3, потом использовали в арифметике
-c = (2+ ++a); alert(c); // 5
-
-// увеличили b до 3, но в этом выражении оставили старое значение
-d = (2+ b++); alert(d); // 4
-
-// каждую переменную увеличили по 2 раза
-alert(a); // 3
-alert(b); // 3
-```
-
diff --git a/1-js/2-first-steps/8-operators/1-increment-order/task.md b/1-js/2-first-steps/8-operators/1-increment-order/task.md
deleted file mode 100644
index 180d28eb..00000000
--- a/1-js/2-first-steps/8-operators/1-increment-order/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Инкремент, порядок срабатывания
-
-[importance 5]
-
-Посмотрите, понятно ли вам, почему код ниже работает именно так?
-
-```js
-//+ run no-beautify
-var a = 1, b = 1, c, d; 
-
-c = ++a; alert(c); // 2
-d = b++; alert(d); // 1
-
-c = (2+ ++a); alert(c); // 5
-d = (2+ b++); alert(d); // 4
-
-alert(a); // 3
-alert(b); // 3
-```
-
diff --git a/1-js/2-first-steps/8-operators/2-assignment-result/solution.md b/1-js/2-first-steps/8-operators/2-assignment-result/solution.md
deleted file mode 100644
index c0e69ce4..00000000
--- a/1-js/2-first-steps/8-operators/2-assignment-result/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Ответ: `x = 5`.
-
-Оператор присваивания возвращает значение, которое будет записано в переменную, например:
-
-```js
-//+ run
-var a = 2;
-alert( a *= 2 ); // 4
-```
-
-Отсюда `x = 1 + 4 = 5`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/8-operators/2-assignment-result/task.md b/1-js/2-first-steps/8-operators/2-assignment-result/task.md
deleted file mode 100644
index a3c166af..00000000
--- a/1-js/2-first-steps/8-operators/2-assignment-result/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Результат присваивания
-
-[importance 3]
-
-Чему будет равен `x` в примере ниже?
-
-```js
-var a = 2;
-
-var x = 1 + (a *= 2);
-```
-
diff --git a/1-js/2-first-steps/8-operators/article.md b/1-js/2-first-steps/8-operators/article.md
deleted file mode 100644
index b8b28f3c..00000000
--- a/1-js/2-first-steps/8-operators/article.md
+++ /dev/null
@@ -1,428 +0,0 @@
-# Основные операторы
-
-Для работы с переменными, со значениями, JavaScript поддерживает все стандартные операторы, большинство которых есть и в других языках программирования.
-
-Несколько операторов мы знаем со школы -- это обычные сложение `+`, умножение `*`, вычитание и так далее.
-
-В этой главе мы сконцентрируемся на операторах, которые в курсе математики не проходят, и на их особенностях в JavaScript.
-[cut]
-
-## Термины: "унарный", "бинарный", "операнд"
-
-У операторов есть своя терминология, которая используется во всех языках программирования.
-
-Прежде, чем мы двинемся дальше -- несколько терминов, чтобы понимать, о чём речь.
-
-<ul>
-<li>*Операнд* -- то, к чему применяется оператор. Например: `5 * 2` -- оператор умножения с левым и правым операндами. Другое название: "аргумент оператора".</li>
-<li>*Унарным* называется оператор, который применяется к одному выражению. Например, оператор унарный минус `"-"` меняет знак числа на противоположный:
-
-```js
-//+ run
-var x = 1;
-
-*!*
-x = -x;
-*/!*
-alert( x ); // -1, применили унарный минус
-```
-
-</li>
-<li>*Бинарным* называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
-
-```js
-//+ run no-beautify
-var x = 1, y = 3;
-alert( y - x ); // 2, бинарный минус
-```
-</li>
-</ul>
-
-
-## Сложение строк, бинарный +
-
-Обычно при помощи плюса `'+'` складывают числа.
-
-Но если бинарный оператор `'+'` применить к строкам, то он их объединяет в одну:
-
-```js
-var a = "моя" + "строка";
-alert( a ); // моястрока
-```
-
-Иначе говорят, что "плюс производит конкатенацию (сложение) строк".
-
-**Если хотя бы один аргумент является строкой, то второй будет также преобразован к строке!**
-
-Причем не важно, справа или слева находится операнд-строка, в любом случае нестроковый аргумент будет преобразован. Например:
-
-```js
-//+ run
-alert( '1' + 2 ); // "12"
-alert( 2 + '1' ); // "21"
-```
-
-**Это приведение к строке -- особенность исключительно бинарного оператора `"+"`.**
-
-Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.
-
-Например:
-
-```js
-//+ run
-alert( 2 - '1' ); // 1
-alert( 6 / '2' ); // 3
-```
-
-
-
-### Преобразование к числу, унарный плюс +
-
-Унарный, то есть применённый к одному значению, плюс ничего не делает с числами:
-
-```js
-//+ run
-alert( +1 ); // 1
-alert( +(1 - 2) ); // -1
-```
-
-Как видно, плюс ничего не изменил в выражениях. Результат -- такой же, как и без него. 
-
-Тем не менее, он широко применяется, так как его "побочный эффект" -- преобразование значения в число.
-
-Например, когда мы получаем значения из HTML-полей или от пользователя, то они обычно в форме строк.
-
-А что, если их нужно, к примеру, сложить? Бинарный плюс сложит их как строки:
-
-```js
-//+ run
-var apples = "2";
-var oranges = "3";
-
-alert( apples + oranges ); // "23", так как бинарный плюс складывает строки
-```
-
-Поэтому используем унарный плюс, чтобы преобразовать к числу:
-
-```js
-//+ run
-var apples = "2";
-var oranges = "3";
-
-alert( +apples + +oranges ); // 5, число, оба операнда предварительно преобразованы в числа
-```
-
-С точки зрения математики такое изобилие плюсов может показаться странным. С точки зрения программирования -- никаких разночтений: сначала выполнятся унарные плюсы, приведут строки к числам, а затем -- бинарный `'+'` их сложит.
-
-Почему унарные плюсы выполнились до бинарного сложения? Как мы сейчас увидим, дело в их приоритете.
-
-## Приоритет
-
-
-В том случае, если в выражении есть несколько операторов -- порядок их выполнения определяется *приоритетом*.
-
-Из школы мы знаем, что умножение в выражении `2 * 2 + 1` выполнится раньше сложения, т.к. его *приоритет* выше, а скобки явно задают порядок выполнения. Но в JavaScript -- гораздо больше операторов, поэтому существует целая [таблица приоритетов](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence). 
-
-Она содержит как уже пройденные операторы, так и те, которые мы еще не проходили. В ней каждому оператору задан числовой приоритет. Тот, у кого число больше -- выполнится раньше. Если приоритет одинаковый, то порядок выполнения -- слева направо.
-
-Отрывок из таблицы:
-
-<table>
-<tr><td>...</td><td>...</td><td>...</td></tr>
-<tr><td>15</td><td>унарный плюс</td><td>`+`</td></tr>
-<tr><td>15</td><td>унарный минус</td><td>`-`</td></tr>
-<tr><td>14</td><td>умножение</td><td>`*`</td></tr>
-<tr><td>14</td><td>деление</td><td>`/`</td></tr>
-<tr><td>13</td><td>сложение</td><td>`+`</td></tr>
-<tr><td>13</td><td>вычитание</td><td>`-`</td></tr>
-<tr><td>...</td><td>...</td><td>...</td></tr>
-<tr><td>3</td><td>присвоение</td><td>`=`</td></tr>
-<tr><td>...</td><td>...</td><td>...</td></tr>
-</table>
-
-Так как "унарный плюс" имеет приоритет `15`, выше, чем `13` у обычного "сложения", то в выражении `+apples + +oranges` сначала сработали плюсы у `apples` и `oranges`, а затем уже обычное сложение.
-
-## Присваивание
-
-Обратим внимание, в таблице приоритетов также есть оператор присваивания `=`.
-
-У него -- один из самых низких приоритетов: `3`.
-
-Именно поэтому, когда переменную чему-либо присваивают, например, `x = 2 * 2 + 1` сначала выполнится арифметика, а уже затем -- произойдёт присвоение `=`. 
-
-```js
-var x = 2 * 2 + 1;
-
-alert( x ); // 5
-```
-
-**Возможно присваивание по цепочке:**
-
-```js
-//+ run
-var a, b, c;
-
-*!*
-a = b = c = 2 + 2;
-*/!*
-
-alert( a ); // 4
-alert( b ); // 4
-alert( c ); // 4
-```
-
-Такое присваивание работает справа-налево, то есть сначала вычислятся самое правое выражение `2+2`, присвоится в `c`, затем выполнится `b = c` и, наконец, `a = b`.
-
-[smart header="Оператор `\"=\"` возвращает значение"]
-Все операторы возвращают значение. Вызов `x = выражение` не является исключением.
-
-Он записывает выражение в `x`, а затем возвращает его. Благодаря этому присваивание можно использовать как часть более сложного выражения:
-
-```js
-//+ run
-var a = 1;
-var b = 2;
-
-*!*
-var c = 3 - (a = b + 1);
-*/!*
-
-alert( a ); // 3
-alert( c ); // 0
-```
-
-В примере выше результатом `(a = b + 1)` является значение, которое записывается в `a` (т.е. `3`). Оно используется для вычисления `c`.
-
-Забавное применение присваивания, не так ли? 
-
-Знать, как это работает -- стоит обязательно, а вот писать самому -- только если вы уверены, что это сделает код более читаемым и понятным.
-[/smart]
-
-
-## Взятие остатка %
-
-Оператор взятия остатка `%` интересен тем, что, несмотря на обозначение, никакого отношения к процентам не имеет. 
-
-Его результат `a % b` -- это остаток от деления `a` на `b`.
-
-Например:
-
-```js
-//+ run
-alert( 5 % 2 ); // 1, остаток от деления 5 на 2 
-alert( 8 % 3 ); // 2, остаток от деления 8 на 3
-alert( 6 % 3 ); // 0, остаток от деления 6 на 3
-```
-
-
-## Инкремент/декремент: ++, --   
-
-Одной из наиболее частых операций в JavaScript, как и во многих других языках программирования, является увеличение или уменьшение переменной на единицу.
-
-Для этого существуют даже специальные операторы:
-<ul>
-<li>**Инкремент** `++` увеличивает на 1:
-
-```js
-//+ run no-beautify
-var i = 2;
-i++;      // более короткая запись для i = i + 1.
-alert(i); // 3
-```
-
-</li>
-<li>**Декремент** `--` уменьшает на 1:
-
-```js
-//+ run no-beautify
-var i = 2;
-i--;      // более короткая запись для i = i - 1.
-alert(i); // 1
-```
-
-</li>
-</ul>
-
-[warn]
-Инкремент/декремент можно применить только к переменной. 
-Код `5++` даст ошибку.
-[/warn]
-
-Вызывать эти операторы можно не только после, но и перед переменной: `i++` (называется "постфиксная форма") или `++i` ("префиксная форма"). 
-
-Обе эти формы записи делают одно и то же: увеличивают на `1`. 
-
-Тем не менее, между ними существует разница. Она видна только в том случае, когда мы хотим не только увеличить/уменьшить переменную, но и использовать результат в том же выражении.
-
-Например:
-
-```js
-//+ run
-var i = 1;
-var a = ++i; // (*)
-
-alert(a); // *!*2*/!*
-```
-
-В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. Так что в `a` попадёт значение `i` *после* увеличения.
-
-**Постфиксная форма `i++` отличается от префиксной `++i` тем, что возвращает старое значение, бывшее до увеличения.** 
-
-В примере ниже в `a` попадёт старое значение `i`, равное `1`:
-
-```js
-//+ run
-var i = 1;
-var a = i++; // (*)
-
-alert(a); // *!*1*/!*
-```
-
-<ul>
-<li>Если результат оператора не используется, а нужно только увеличить/уменьшить переменную -- без разницы, какую форму использовать:
-
-```js
-//+ run
-var i = 0;
-i++;
-++i;
-alert( i ); // 2
-```
-
-</li>
-<li>Если хочется тут же использовать результат, то нужна префиксная форма:
-
-```js
-//+ run
-var i = 0;
-alert( ++i ); // 1
-```
-
-</li>
-<li>Если нужно увеличить, но нужно значение переменной *до увеличения* -- постфиксная форма:
-
-```js
-//+ run
-var i = 0;
-alert( i++ ); // 0
-```
-
-</li>
-</ul>
-
-[smart header="Инкремент/декремент можно использовать в любых выражениях"]
-
-При этом он имеет более высокий приоритет и выполняется раньше, чем арифметические операции:
-
-```js
-//+ run
-var i = 1;
-alert( 2 * ++i ); // 4
-```
-
-
-
-```js
-//+ run
-var i = 1;
-alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое
-```
-
-При этом, нужно с осторожностью использовать такую запись, потому что в более длинной строке при быстром "вертикальном" чтении кода легко пропустить такой `i++`, и будет неочевидно, что переменая увеличивается. 
-
-Три строки, по одному действию в каждой -- длиннее, зато нагляднее:
-
-```js
-//+ run
-var i = 1;
-alert( 2 * i );
-i++;
-```
-[/smart]
-
-## Побитовые операторы
-
-Побитовые операторы рассматривают аргументы как 32-разрядные целые числа и работают на уровне их внутреннего двоичного представления.
-
-Эти операторы не являются чем-то специфичным для JavaScript, они поддерживаются в большинстве языков программирования. 
-
-Поддерживаются следующие побитовые операторы:
-<ul>
-<li>AND(и) ( `&` )</li>
-<li>OR(или) ( `|` )</li>
-<li>XOR(побитовое исключающее или) ( `^` )</li>
-<li>NOT(не) ( `~` )</li>
-<li>LEFT SHIFT(левый сдвиг) ( `<<` )</li>
-<li>RIGHT SHIFT(правый сдвиг) ( `>>` )</li>
-<li>ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( `>>>` )</li>
-</ul>
-
-Они используются редко, поэтому вынесены в отдельную главу [](/bitwise-operators).
-
-
-
-## Сокращённая арифметика с присваиванием
-
-Часто нужно применить оператор к переменной и сохранить результат в ней же, например:
-
-```js
-var n = 2;
-n = n + 5;
-n = n * 2;
-```
-
-Эту запись можно укоротить при помощи совмещённых операторов, вот так:
-
-```js
-//+ run
-var n = 2;
-n += 5; // теперь n=7 (работает как n = n + 5)
-n *= 2; // теперь n=14 (работает как n = n * 2)
-
-alert( n ); // 14
-```
-
-Так можно сделать для операторов `+,-,*,/` и бинарных `<<,>>,>>>,&,|,^`.
-
-Вызов с присваиванием имеет в точности такой же приоритет, как обычное присваивание, то есть выполнится после большинства других операций:
-
-```js
-//+ run
-var n = 2;
-n *= 3 + 5;
-
-alert( n ); // 16  (n = 2 * 8)
-```
-
-
-## Оператор запятая
-
-Один из самых необычных операторов -- запятая `','`.
-
-Его можно вызвать явным образом, например:
-
-```js
-//+ run
-*!*
-a = (5, 6);
-*/!*
-
-alert( a );
-```
-
-Запятая позволяет перечислять выражения, разделяя их запятой `','`. Каждое из них -- вычисляется и отбрасывается, за исключением последнего, которое возвращается. 
-
-Запятая -- единственный оператор, приоритет которого ниже присваивания. В выражении `a = (5,6)` для явного задания приоритета использованы скобки, иначе оператор `'='` выполнился бы до запятой `','`, получилось бы `(a=5), 6`.
-
-Зачем же нужен такой странный оператор, который отбрасывает значения всех перечисленных выражений, кроме последнего?
-
-Обычно он используется в составе более сложных конструкций, чтобы сделать несколько действий в одной строке. Например:
-
-```js
-// три операции в одной строке
-for (*!*a = 1, b = 3, c = a*b*/!*; a < 10; a++) {
- ...
-}
-```
-
-Такие трюки используются во многих JavaScript-фреймворках для укорачивания кода.
diff --git a/1-js/2-first-steps/9-comparison/article.md b/1-js/2-first-steps/9-comparison/article.md
deleted file mode 100644
index 2440ef6c..00000000
--- a/1-js/2-first-steps/9-comparison/article.md
+++ /dev/null
@@ -1,248 +0,0 @@
-# Операторы сравнения и логические значения
-
-В этом разделе мы познакомимся с операторами сравнения и с логическими значениями, которые такие операторы возвращают.
-
-[cut]
-
-Многие операторы сравнения знакомы нам из математики:
-
-<ul>
-<li>Больше/меньше: <code>a &gt; b</code>, <code>a &lt; b</code>.</li>
-<li>Больше/меньше или равно: <code>a &gt;= b</code>, <code>a &lt;= b</code>.</li>
-<li>Равно `a == b`. 
-Для сравнения используется два символа равенства `'='`. Один символ `a = b` означал бы присваивание.</li>
-<li>"Не равно". В математике он пишется как <code>&ne;</code>, в JavaScript -- знак равенства с восклицательным знаком перед ним <code>!=</code>.</li>
-</ul>
-
-## Логические значения
-
-Как и другие операторы, сравнение возвращает значение. Это значение имеет *логический* тип. 
-
-Существует всего два логических значения:
-<ul>
-<li>`true` -- имеет смысл "да", "верно", "истина".</li>
-<li>`false` -- означает "нет", "неверно", "ложь".</li>
-</ul>
-
-Например:
-
-```js
-//+ run
-alert( 2 > 1 ); // true, верно
-alert( 2 == 1 ); // false, неверно
-alert( 2 != 1 ); // true
-```
-
-Логические значения можно использовать и напрямую, присваивать переменным, работать с ними как с любыми другими:
-
-```js
-//+ run
-var a = true; // присваивать явно
-
-var b = 3 > 4; // или как результат сравнения
-alert( b ); // false
-
-alert( a == b ); // (true == false) неверно, выведет false
-```
-
-## Сравнение строк
-
-Строки сравниваются побуквенно:
-
-```js
-//+ run
-alert( 'Б' > 'А' ); // true
-```
-
-[warn header="Осторожно, Unicode!"]
-Аналогом "алфавита" во внутреннем представлении строк служит кодировка, у каждого символа -- свой номер (код). JavaScript использует кодировку [Unicode](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4). 
-
-При этом сравниваются *численные коды символов*. В частности, код у символа `Б` больше, чем у `А`, поэтому и результат сравнения такой.
-
-**В кодировке Unicode обычно код у строчной буквы больше, чем у прописной.**
-
-Поэтому регистр имеет значение:
-
-```js
-//+ run
-alert( 'а' > 'Я' ); // true, строчные буквы больше прописных
-```
-
-Для корректного сравнения символы должны быть в одинаковом регистре. 
-[/warn]
-
-Если строка состоит из нескольких букв, то сравнение осуществляется как в телефонной книжке или в словаре. Сначала сравниваются первые буквы, потом вторые, и так далее, пока одна не будет больше другой.
-
-Иными словами, больше -- та строка, которая в телефонной книге была бы на большей странице. 
-
-Например:
-<ul>
-<li>Если первая буква первой строки больше -- значит первая строка больше, независимо от остальных символов:
-
-```js
-//+ run
-alert( 'Банан' > 'Аят' );
-```
-
-</li>
-<li>Если одинаковы -- сравнение идёт дальше. Здесь оно дойдёт до третьей буквы:
-
-```js
-//+ run
-alert( 'Вася' > 'Ваня' ); // true, т.к. 'с' > 'н'
-```
-
-</li>
-<li>При этом любая буква больше отсутствия буквы:
-
-```js
-//+ run
-alert( 'Привет' > 'Прив' ); // true, так как 'е' больше чем "ничего".
-```
-
-</li>
-</ul>
-Такое сравнение называется *лексикографическим*. 
-
-
-[warn]
-Обычно мы получаем значения от посетителя в виде строк. Например, `prompt` возвращает *строку*, которую ввел посетитель. 
-
-Числа, полученные таким образом, в виде строк сравнивать нельзя, результат будет неверен. Например:
-
-```js
-//+ run
-alert( "2" > "14" ); // true, неверно, ведь 2 не больше 14
-```
-
-В примере выше `2` оказалось больше `14`, потому что строки сравниваются посимвольно, а первый символ `'2'` больше `'1'`. 
-
-Правильно было бы преобразовать их к числу явным образом. Например, поставив перед ними `+`:
-
-```js
-//+ run
-alert( +"2" > +"14" ); // false, теперь правильно
-```
-
-[/warn]
-
-## Сравнение разных типов
-
-При сравнении значений разных типов, используется числовое преобразование. Оно применяется к обоим значениям.
-
-Например:
-
-```js
-//+ run
-alert( '2' > 1 ); // true, сравнивается как 2 > 1
-alert( '01' == 1 ); // true, сравнивается как 1 == 1
-alert( false == 0 ); // true, false становится числом 0
-alert( true == 1 ); // true, так как true становится числом 1.
-```
-
-Тема преобразований типов будет продолжена далее, в главе [](/types-conversion). 
-
-## Строгое равенство
-
-В обычном операторе `==` есть "проблема"" -- он не может отличить `0` от `false`:
-
-```js
-//+ run
-alert( 0 == false ); // true
-```
-
-Та же ситуация с пустой строкой:
-
-
-```js
-//+ run
-alert( '' == false ); // true
-```
-
-Это естественное следствие того, что операнды разных типов преобразовались к числу. Пустая строка, как и `false`, при преобразовании к числу дают `0`.
-
-Что же делать, если всё же нужно отличить `0` от `false`? 
-
-**Для проверки равенства без преобразования типов используются операторы строгого равенства `===` (тройное равно) и `!==`.**
-
-Если тип разный, то они всегда возвращают `false`:
-
-```js
-//+ run
-alert( 0 === false ); // false, т.к. типы различны
-```
-
-Строгое сравнение предпочтительно, если мы хотим быть уверены, что "сюрпризов" не будет.
-
-## Сравнение с null и undefined
-
-Проблемы со специальными значениями возможны, когда к переменной применяется операция сравнения `> < <= >=`, а у неё может быть как численное значение, так и `null/undefined`. 
-
-**Интуитивно кажется, что `null/undefined` эквивалентны нулю, но это не так.**
-
-Они ведут себя по-другому.
- 
-<ol>
-<li>Значения `null` и `undefined` равны `==` друг другу и не равны чему бы то ни было ещё. 
-Это жёсткое правило буквально прописано в спецификации языка.</li>
-<li>При преобразовании в число `null` становится `0`, а `undefined` становится `NaN`.</li>
-</ol>
-
-Посмотрим забавные следствия.
-
-### Некорректный результат сравнения null с 0
-Сравним `null` с нулём:
-
-```js
-//+ run
-alert( null > 0 ); // false
-alert( null == 0 ); // false
-```
-
-Итак, мы получили, что `null` не больше и не равен нулю. А теперь...
-
-```js
-//+ run
-alert(null >= 0); // *!*true*/!*
-```
-
-Как такое возможно? Если нечто *"больше или равно нулю"*, то резонно полагать, что оно либо *больше*, либо *равно*. Но здесь это не так.
-
-Дело в том, что алгоритмы проверки равенства `==` и сравнения `>= > < <=` работают по-разному.
-
-Сравнение честно приводит к числу, получается ноль. А при проверке равенства значения `null` и `undefined` обрабатываются особым образом: они равны друг другу, но не равны чему-то ещё. 
-
-В результате получается странная с точки зрения здравого смысла ситуация, которую мы видели в примере выше. 
-
-### Несравнимый undefined
-
-Значение `undefined` вообще нельзя сравнивать:
-
-```js
-//+ run
-alert( undefined > 0 ); // false (1)
-alert( undefined < 0 ); // false (2)
-alert( undefined == 0 ); // false (3)
-```
-
-<ul>
-<li>Сравнения `(1)` и `(2)` дают `false` потому, что `undefined` при преобразовании к числу даёт `NaN`. А значение `NaN` по стандарту устроено так, что сравнения `==`, `<`, `>`, `<=`, `>=` и даже `===` с ним возвращают `false`.</li>
-<li>Проверка равенства `(3)` даёт `false`, потому что в стандарте явно прописано, что `undefined` равно лишь `null` и ничему другому.</li>
-</ul>
-
-
-**Вывод: любые сравнения с `undefined/null`, кроме точного `===`, следует делать с осторожностью.**
-
-Желательно не использовать сравнения `>= > < <=` с ними, во избежание ошибок в коде.
-
-
-## Итого
-
-<ul>
-<li>В JavaScript есть логические значения `true` (истина) и `false` (ложь). Операторы сравнения возвращают их.</li>
-<li>Строки сравниваются побуквенно.</li>
-<li>Значения разных типов приводятся к числу при сравнении, за исключением строгого равенства `===` (`!==`).</li>
-<li>Значения `null` и `undefined` равны `==` друг другу и не равны ничему другому. В других сравнениях (с участием `>`,`<`) их лучше не использовать, так как они ведут себя не как `0`.</li>
-</ul>
-
-Мы ещё вернёмся к теме сравнения позже, когда лучше изучим различные типы данных в JavaScript.
diff --git a/1-js/2-first-steps/index.md b/1-js/2-first-steps/index.md
deleted file mode 100644
index eee61f1c..00000000
--- a/1-js/2-first-steps/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Основы JavaScript
-
-Основные кирпичики из которых состоят скрипты.
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/article.md b/1-js/3-writing-js/1-debugging-chrome/article.md
deleted file mode 100644
index cce3064d..00000000
--- a/1-js/3-writing-js/1-debugging-chrome/article.md
+++ /dev/null
@@ -1,259 +0,0 @@
-# Отладка в браузере Chrome
-
-Перед тем, как двигаться дальше, поговорим об отладке скриптов. 
-
-Все современные браузеры поддерживают для этого "инструменты разработчика". Исправление ошибок с их помощью намного проще и быстрее.
-
-На текущий момент самые многофункциональные инструменты -- в браузере Chrome. Также очень хорош Firebug (для Firefox).
-
-[cut]
-
-## Общий вид панели Sources
-
-В вашей версии Chrome панель может выглядеть несколько по-иному, но что где находится, должно быть понятно.
-
-Зайдите на [страницу с примером](debugging/index.html) браузером Chrome.
-
-Откройте инструменты разработчика: [key F12] или в меню `Инструменты > Инструменты Разработчика`.
-
-Выберите сверху `Sources`.
-
-<img src="chrome_sources.png">
-
-Вы видите три зоны:
-
-<ol>
-<li>**Зона исходных файлов.** В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите `pow.js`, если он не выбран.</li>
-<li>**Зона текста.** В ней находится текст файлов.</li>
-<li>**Зона информации и контроля.** Мы поговорим о ней позже.</li>
-</ol>
-
-Обычно зона исходных файлов при отладке не нужна. Скройте её кнопкой <span class="devtools" style="background-position:-200px -76px"></span>.
-
-## Общие кнопки управления
-
-<img src="chrome_sources_buttons.png">
-
-Три наиболее часто используемые кнопки управления:
-<dl>
-<dt>Формат <span class="devtools" style="background-position:-264px 94px"></span></dt>
-<dd>Нажатие форматирует текст текущего файла, расставляет отступы. Нужна, если вы хотите разобраться в чужом коде, плохо отформатированном или сжатом.</dd>
-<dt>Консоль <span class="devtools" style="background-position:-70px 94px"></span></dt>
-<dd>Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускайть функции. Её нажатие можно заменить на клавишу <code class="key">Esc</code>.</dd>
-<dt>Окно <span class="devtools" style="background-position:-6px 70px"></span></dt>
-<dd>Если код очень большой, то можно вынести инструменты разработки вбок или в отдельное окно, зажав эту кнопку и выбрав соответствующий вариант из списка.</dd>
-</dl>
-
-## Точки остановки
-
-Открыли файл `pow.js` во вкладке Sources? Кликните на 6й строке файла `pow.js`, прямо на цифре 6.
-
-Поздравляю! Вы поставили "точку остановки" или, как чаще говорят, "брейкпойнт".
-
-Выглядет это должно примерно так:
-
-<img src="chrome_sources_breakpoint.png">
-
-Слово *Брейкпойнт* (breakpoint) -- часто используемый английский жаргонизм. Это то место в коде, где отладчик будет *автоматически* останавливать выполнение JavaScript, как только оно до него дойдёт.
-
-
-**В остановленном коде можно посмотреть текущие значения переменных, выполнять команды и т.п., в общем -- отлаживать его.**
-
-Вы можете видеть, что информация о точке остановки появилась справа, в подвкладке Breakpoints. 
-
-Вкладка Breakpoints очень удобна, когда код большой, она позволяет:
-
-<ul>
-<li>Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.</li>
-<li>Временно выключить брейкпойнт кликом на чекбокс.</li>
-<li>Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.</li>
-</ul>
-
-[smart header="Дополнительные возможности"]
-<ul>
-<li>Остановку можно инициировать и напрямую из кода скрипта, командой `debugger`:
-
-```js
-function pow(x, n) {
-  ...
-  debugger; // <-- отладчик остановится тут
-  ...
-}
-```
-
-</li>
-<li>*Правый клик* на номер строки `pow.js` позволит создать условную точку остановки (conditional breakpoint), т.е. задать условие, при котором точка остановки сработает.
-
-Это удобно, если остановка нужна только при определённом значении переменной или параметра функции.
-</li>
-</ul>
-[/smart]
-
-## Остановиться и осмотреться
-
-Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать отладчик JavaScript -- перезагрузить её. Итак, нажимаем [key F5] (Windows, Linux) или [key Cmd+R] (Mac).
-
-Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6й строке.
-
-<img src="chrome_sources_break.png">
-
-Обратите внимание на информационные вкладки справа (отмечены стрелками). 
-
-В них мы можем посмотреть текущее состояние:
-<ol>
-<li>**`Watch Expressions` -- показывает текущие значения любых выражений.**
-
-Можно раскрыть эту вкладку, нажать мышью `+` на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.</li>
-<li>**`Call Stack` -- стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.** 
-
-На текущий момент видно, отладчик находится в функции `pow` (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).</li>
-<li>**`Scope Variables` -- переменные.**
-
-На текущий момент строка 6 ещё не выполнилась, поэтому `result` равен `undefined`.
-
-В `Local` показываются переменные функции: объявленные через `var` и параметры. Вы также можете там видеть ключевое слово `this`, если вы не знаете, что это такое -- ничего страшного, мы это обсудим позже, в следующих главах учебника.
-
-В `Global` -- глобальные переменные и функции.
-</li>
-</ol>
-
-## Управление выполнением
-
-Пришло время, как говорят, "погонять" скрипт и "оттрейсить" (от англ. trace -- отслеживать) его работу.
-
-Обратим внимание на панель управления справа-сверху, в ней есть 6 кнопок:
-
-<dl>
-<dt><img style="vertical-align:middle" src="manage1.png"> -- продолжить выполнение, горячая клавиша [key F8].</dt>
-<dd>Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек остановки, то в отладчик управление больше не вернётся.
-
-Нажмите на эту кнопку. 
-
-Скрипт продолжится, далее, в 6й строке находится рекурсивный вызов функции `pow`, т.е. управление перейдёт в неё опять (с другими аргументами) и сработает точка остановки, вновь включая отладчик.
-
-При этом вы увидите, что выполнение стоит на той же строке, но в `Call Stack` появился новый вызов.
-
-Походите по стеку вверх-вниз -- вы увидите, что действительно аргументы разные.
-</dd>
-<dt><img style="vertical-align:middle" src="manage2.png"> -- сделать шаг, не заходя внутрь функции, горячая клавиша [key F10].</dt>
-<dd>Выполняет одну команду скрипта. Если в ней есть вызов функции -- то отладчик обходит его стороной, т.е. не переходит на код внутри.
-
-Эта кнопка очень удобна, если в текущей строке вызывается функция JS-фреймворка или какая-то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.
-
-Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова `pow`, так как внутри `pow` находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда. 
-</dd>
-<dt><img style="vertical-align:middle" src="manage3.png"> -- сделать шаг, горячая клавиша [key F11].</dt>
-<dd>Выполняет одну команду скрипта и переходит к следующей. Если есть вложенный вызов, то заходит внутрь функции.
-
-Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.
-</dd>
-<dt><img style="vertical-align:middle" src="manage4.png"> -- выполнять до выхода из текущей функции, горячая клавиша [key Shift+F11].</dt>
-<dd>Выполняет команды до завершения текущей функции.
-
-Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен -- чтобы быстро из него выйти.
-</dd>
-<dt><img style="vertical-align:middle" src="manage5.png"> -- отключить/включить все точки остановки.</dt>
-<dd>Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.
-</dd>
-<dt><img style="vertical-align:middle" src="manage6.png"> -- включить/отключить автоматическую остановку при ошибке.</dt>
-<dd>Эта кнопка -- одна из самых важных. 
-
-Нажмите её несколько раз. В старых версиях Chrome у неё три режима  -- нужен фиолетовый, в новых -- два, тогда достаточно синего.
-
-Когда она включена, то при ошибке в коде он автоматически остановится и мы сможем посмотреть в отладчике текущие значения переменных, при желании выполнить команды и выяснить, как так получилось.
-</dd>
-</dl>
-
-**Процесс отладки заключается в том, что мы останавливаем скрипт, смотрим, что с переменными, переходим дальше и ищем, где поведение отклоняется от правильного.**
-
-[smart header="Continue to here"]
-Правый клик на номер строки открывает контекстное меню, в котором можно запустить выполнение кода до неё (Continue to here). Это удобно, когда хочется сразу прыгнуть вперёд и breakpoint неохота ставить.
-[/smart]
-
-
-
-## Консоль
-
-При отладке, кроме просмотра переменных и передвижения по скрипту, бывает полезно запускать команды JavaScript. Для этого нужна консоль.
-
-В неё можно перейти, нажав кнопку "Console" вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку <span class="devtools" style="background-position:-72px -28px"></span> или клавишей [key ESC].
-
-**Самая любимая команда разработчиков: `console.log(...)`.**
-
-Она пишет переданные ей аргументы в консоль, например:
-
-```js
-//+ run
-// результат будет виден в консоли
-for (var i = 0; i < 5; i++) {
-  console.log("значение", i);
-}
-```
-
-Полную информацию по специальным командам консоли вы можете получить на странице [Chrome Console API](https://developer.chrome.com/devtools/docs/console-api) и [Chrome CommandLine API](https://developer.chrome.com/devtools/docs/commandline-api). Почти все команды также действуют в Firebug (отладчик для браузера Firefox).
-
-Консоль поддерживают все браузеры, и, хотя IE10- поддерживает далеко не все функции, но `console.log` работает везде. Используйте его для вывода отладочной информации по ходу работы скрипта.
-
-## Ошибки
-
-Ошибки JavaScript выводятся в консоли.
-
-Например, прервите отладку -- для этого достаточно закрыть инструменты разрабтчика -- и откройте [страницу с ошибкой](error/index.html). 
-
-Перейдите во вкладку Console инструментов разработчика ([key Ctrl+Shift+J] / [key Cmd+Shift+J]).
-
-В консоли вы увидите что-то подобное:
-<img src="console_error.png">
-
-Красная строка -- это сообщение об ошибке.
-
-Если кликнуть на ссылке `pow.js` в консоли, справа в строке с ошибкой, то мы перейдём непосредственно к месту в скрипте, где возникла ошибка.
-
-Однако почему она возникла?
-
-Более подробно прояснить произошедшее нам поможет отладчик. Он может "заморозить" выполнение скрипта на момент ошибки и дать нам возможность посмотреть значения переменных и стека на тот момент.
-
-Для этого:
-<ol>
-<li>Перейдите на вкладку Sources.</li>
-<li>Включите остановку при ошибке, кликнув на кнопку <img style="vertical-align:middle" src="manage6.png"></li>
-<li>Перезагрузите страницу.</li>
-</ol>
-
-После перезагрузки страницы JavaScript-код запустится снова и отладчик остановит выполнение на строке с ошибкой:
-
-<img src="chrome_break_error.png">
-
-Можно посмотреть значения переменных. Открыть консоль и попробовать запустить что-то в ней. Поставить брейкпойнты раньше по коду и посмотреть, что привело к такой печальной картине, и так далее.
-
-
-## Итого
-
-Отладчик позволяет:
-<ul>
-<li>Останавливаться на отмеченном месте (breakpoint) или по команде `debugger`.</li>
-<li>Выполнять код -- по одной строке или до определённого места.</li>
-<li>Смотреть переменные, выполнять команды в консоли и т.п.</li>
-</ul>
-
-В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом. 
-
-Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements -- позволяет работать со страницей (понадобится позже), Timeline -- смотреть, что именно делает браузер и сколько это у него занимает и т.п. 
-
-Осваивать можно двумя путями:
-<ol>
-<li>[Официальная документация](https://developer.chrome.com/devtools) (на англ.)</li>
-<li>Кликать в разных местах и смотреть, что получается. Не забывать о клике правой кнопкой мыши.</li>
-</ol>
-
-Мы ещё вернёмся к отладчику позже, когда будем работать с HTML.
-[head]
-<style>
-span.devtools {
-  display: inline-block;
-  background-image: url(/article/debugging-chrome/statusbarButtonGlyphs.svg);
-  height:16px;
-  width:16px;
-}
-</style>
-[/head]
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/debugging.view/index.html b/1-js/3-writing-js/1-debugging-chrome/debugging.view/index.html
deleted file mode 100755
index 246dd753..00000000
--- a/1-js/3-writing-js/1-debugging-chrome/debugging.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script src="pow.js"></script>
-
-  Пример для отладчика.
-
-  <script>
-    var fiveInCube = pow(5, 3);
-
-    alert(fiveInCube);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/debugging.view/pow.js b/1-js/3-writing-js/1-debugging-chrome/debugging.view/pow.js
deleted file mode 100755
index 8a9e30db..00000000
--- a/1-js/3-writing-js/1-debugging-chrome/debugging.view/pow.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function pow(x, n) {
-  if (n == 1) {
-    return x;
-  }
-
-  var result = x * pow(x, n - 1);
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/error.view/index.html b/1-js/3-writing-js/1-debugging-chrome/error.view/index.html
deleted file mode 100755
index 246dd753..00000000
--- a/1-js/3-writing-js/1-debugging-chrome/error.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script src="pow.js"></script>
-
-  Пример для отладчика.
-
-  <script>
-    var fiveInCube = pow(5, 3);
-
-    alert(fiveInCube);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/error.view/pow.js b/1-js/3-writing-js/1-debugging-chrome/error.view/pow.js
deleted file mode 100755
index 5939b71b..00000000
--- a/1-js/3-writing-js/1-debugging-chrome/error.view/pow.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function pow(x, n) {
-  if (n == 1) {
-    return y;
-  }
-
-  var result = x * pow(x, n - 1);
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md b/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md
deleted file mode 100644
index e2473aa4..00000000
--- a/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Ответ
-
-Вы могли заметить следующие недостатки, сверху-вниз:
-
-```js
-//+ no-beautify
-function pow(x,n)  // <- отсутствует пробел между аргументами
-{  // <- фигурная скобка на отдельной строке
-  var result=1;   // <- нет пробелов вокруг знака =
-  for(var i=0;i<n;i++) {result*=x;}   // <- нет пробелов
-  // содержимое скобок { ... } лучше вынести на отдельную строку
-  return result;
-}
-
-x=prompt("x?",'')  // <- не объявлена переменная, нет пробелов, ;
-n=prompt("n?",'')
-if (n<0)  // <- нет пробелов, стоит добавить вертикальную отбивку
-{   // <- фигурная скобка на отдельной строке
-  // ниже - слишком длинная строка, нет пробелов
-  alert('Степень '+n+'не поддерживается, введите целую степень, большую 0');
-} 
-else // <- можно на одной строке } else { 
-{
-  alert(pow(x,n))  // нет точки с запятой
-}
-```
-
-Исправленный вариант:
-
-```js
-function pow(x, n) {
-  var result = 1;
-
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-
-  return result;
-}
-
-var x = prompt("x?", "");
-var n = prompt("n?", "");
-
-if (n < 0) {
-  alert('Степень ' + n +
-    'не поддерживается, введите целую степень, большую 0');
-} else {
-  alert( pow(x, n) );
-}
-```
-
diff --git a/1-js/3-writing-js/2-coding-style/1-style-errors/task.md b/1-js/3-writing-js/2-coding-style/1-style-errors/task.md
deleted file mode 100644
index 815fe914..00000000
--- a/1-js/3-writing-js/2-coding-style/1-style-errors/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Ошибки в стиле
-
-[importance 4]
-
-Какие недостатки вы видите в стиле этого примера?
-
-```js
-//+ no-beautify
-function pow(x,n) 
-{
-  var result=1;  
-  for(var i=0;i<n;i++) {result*=x;}       
-  return result;
-}
-
-x=prompt("x?",'')
-n=prompt("n?",'')
-if (n<=0) 
-{
-  alert('Степень '+n+'не поддерживается, введите целую степень, большую 0');
-} 
-else 
-{
-  alert(pow(x,n))
-}
-```
-
diff --git a/1-js/3-writing-js/2-coding-style/article.md b/1-js/3-writing-js/2-coding-style/article.md
deleted file mode 100644
index 571b4510..00000000
--- a/1-js/3-writing-js/2-coding-style/article.md
+++ /dev/null
@@ -1,435 +0,0 @@
-# Советы по стилю кода 
-
-Код должен быть максимально читаемым и понятным. Для этого нужен *хороший стиль* написания кода. В этой главе мы рассмотрим компоненты такого стиля.
-
-[cut]
-## Синтаксис
-
-Шпаргалка с правилами синтаксиса (детально их варианты разобраны далее):
-
-<img src="code-style.png">
-
-<!--
-```js
-function pow(x, n) {
-  var result = 1;
-
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-
-  return result;
-}
-
-var x = prompt("x?", "");
-var n = prompt("n?", "");
-
-if (n < 0) {
-  alert('Степень ' + n +
-    'не поддерживается, введите целую степень, большую 0');
-} else {
-  alert( pow(x, n) );
-}
-```
--->
-
-Не всё здесь однозначно, так что разберём эти правила подробнее.
-
-### Фигурные скобки
-
-Пишутся на той же строке, так называемый "египетский" стиль. Перед скобкой -- пробел.
-
-<!--
-```js
-//+ no-beautify
-if (n < 0) {alert('Степень ' + n + ' не поддерживается');}
-
-
-
-if (n < 0) alert('Степень ' + n + ' не поддерживается');
-
-
-
-if (n < 0) {
-  alert('Степень ' + n + ' не поддерживается');
-}
-
-```
--->
-
-<img src="figure-bracket-style.png">
-
-Если у вас уже есть опыт в разработке, и вы привыкли делать скобку на отдельной строке -- это тоже вариант. В конце концов, решать вам. Но в большинстве JavaScript-фреймворков стиль именно такой.
-
-Если условие и код достаточно короткие, например `if (cond) return null`, то запись в одну строку вполне читаема... Но, как правило, отдельная строка всё равно воспринимается лучше.
-
-### Длина строки
-
-Максимальную длину строки согласовывают в команде. Как правило, это либо `80`, либо `120` символов, в зависимости от того, какие мониторы у разработчиков. 
-
-Более длинные строки необходимо разбивать для улучшения читаемости.
-
-### Отступы 
-
-Отступы нужны двух типов:
-
-<ul>
-<li>**Горизонтальный отступ, при вложенности -- два(или четыре) пробела.** 
-
-Как правило, используются именно пробелы, т.к. они позволяют сделать более гибкие "конфигурации отступов", чем символ "Tab".
-
-Например, выровнять аргументы относительно открывающей скобки:
-```js
-//+ no-beautify
-show("Строки" + 
-     " выровнены" +
-     " строго" +
-     " одна под другой");
-```
-</li>
-<li>**Вертикальный отступ, для лучшей разбивки кода -- перевод строки.** 
-
-Используется, чтобы разделить логические блоки внутри одной функции. В примере разделены инициализация переменных, главный цикл и возвращение результата:
-
-```js
-function pow(x, n) {
-  var result = 1;
-  //              <--       
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-  //              <--
-  return result;
-}
-```
-
-Вставляйте дополнительный перевод строки туда, где это сделает код более читаемым. Не должно быть более 9 строк кода подряд без вертикального отступа.
-</li>
-</ul>
-
-### Точка с запятой
-
-Точки с запятой нужно ставить, даже если их, казалось бы, можно пропустить. 
-
-Есть языки, в которых точка с запятой не обязательна, и её там никто не ставит. В JavaScript перевод строки её заменяет, но лишь частично, поэтому лучше её ставить, как обсуждалось [ранее](#semicolon).
-
-## Именование
-
-Общее правило:
-<ul>
-<li>Имя переменной -- существительное.</li>
-<li>Имя функции -- глагол или начинается с глагола. Бывает, что имена для краткости делают существительными, но глаголы понятнее.</li>
-</ul>
-
-Для имён используется английский язык (не транслит) и верблюжья нотация.
-
-Более подробно -- читайте про [имена функций](#function-naming) и [имена переменных](#variable-naming).
-
-## Уровни вложенности
-
-Уровней вложенности должно быть немного.
-
-Например, [проверки в циклах можно делать через "continue"](#continue), чтобы не было дополнительного уровня `if(..) { ... }`:
-
-Вместо:
-
-```js
-for (var i = 0; i < 10; i++) {
-  if (i подходит) {
-    ... // <- уровень вложенности 2
-  }
-}
-```
-
-Используйте:
-
-```js
-for (var i = 0; i < 10; i++) {
-  if (i *!*не*/!* подходит) *!*continue*/!*;
-  ...  // <- уровень вложенности 1
-}
-```
-
-Аналогичная ситуация -- с `if/else` и `return`. Следующие две конструкции идентичны.
-
-Первая:
-
-```js
-function isEven(n) { // проверка чётности
-  if (n % 2 == 0) {
-    return true;
-*!*
-  } else {
-    return false;
-  }
-*/!*
-}
-```
-
-Вторая:
-
-```js
-function isEven(n) { // проверка чётности
-  if (n % 2 == 0) {
-    return true;
-  }
-
-*!*
-  return false;
-*/!*
-}
-```
-
-Если в блоке `if` идёт `return`, то `else` за ним не нужен. 
-
-**Лучше быстро обработать простые случаи, вернуть результат, а дальше разбираться со сложным, без дополнительного уровня вложенности.**
-
-В случае с функцией `isEven` можно было бы поступить и проще:
-
-```js
-function isEven(n) { // проверка чётности
-  return !(n % 2);
-}
-```
-
-...Однако, если код `!(n % 2)` для вас менее очевиден чем предыдущий вариант, то стоит использовать предыдущий. 
-
-Главное для нас -- не краткость кода, а его простота и читаемость. Совсем не всегда более короткий код проще для понимания, чем более развёрнутый.
-
-## Функции = Комментарии
-
-Функции должны быть небольшими. Если функция большая -- желательно разбить её на несколько.
-
-Этому правилу бывает сложно следовать, но оно стоит того. При чем же здесь комментарии? 
-
-Вызов отдельной небольшой функции не только легче отлаживать и тестировать -- сам факт его наличия является *отличным комментарием*.
-
-Сравните, например, две функции `showPrimes(n)` для вывода простых чисел до `n`.
-
-Первый вариант использует метку:
-
-```js
-function showPrimes(n) {
-  nextPrime: for (var i = 2; i < n; i++) {
-
-    for (var j = 2; j < i; j++) {
-      if (i % j == 0) continue nextPrime;
-    }
-
-    alert( i ); // простое
-  }
-}
-```
-
-Второй вариант -- дополнительную функцию `isPrime(n)` для проверки на простоту:
-
-```js
-function showPrimes(n) {
-  
-  for (var i = 2; i < n; i++) {
-    *!*if (!isPrime(i)) continue;*/!*
-     
-    alert(i);  // простое         
-  }
-}
-
-function isPrime(n) {
-  for (var i = 2; i < n; i++) {
-    if ( n % i == 0) return false;
-  }
-  return true;
-}
-```
-
-Второй вариант проще и понятнее, не правда ли? Вместо участка кода мы видим описание действия, которое там совершается (проверка `isPrime`).
- 
-## Функции -- под кодом
-
-Есть два способа расположить функции, необходимые для выполнения кода.
-
-<ol>
-<li>Функции над кодом, который их использует:
-
-```js
-// *!*объявить функции*/!*
-function createElement() {
-  ...
-}
-
-function setHandler(elem) {
-  ...
-}
-
-function walkAround() {
-  ...
-}
-
-// *!*код, использующий функции*/!*
-var elem = createElement();
-setHandler(elem);
-walkAround();
-```
-
-</li>
-<li>Сначала код, а функции внизу:
-
-```js
-// *!*код, использующий функции*/!*
-var elem = createElement();
-setHandler(elem);
-walkAround();
-
-// --- *!*функции*/!* ---
-
-function createElement() {
-  ...
-}
-
-function setHandler(elem) {
-  ...
-}
-
-function walkAround() {
-  ...
-}
-```
-
-</li>
-</ol>
-
-...На самом деле существует еще третий "стиль", при котором функции хаотично разбросаны по коду, но это ведь не наш метод, да? 
-
-**Как правило, лучше располагать функции под кодом, который их использует.** 
-
-То есть, предпочтителен 2й способ. 
-
-Дело в том, что при чтении такого кода мы хотим знать в первую очередь, *что он делает*, а уже затем *какие функции ему помогают.* Если первым идёт код, то это как раз дает необходимую информацию. Что же касается функций, то вполне возможно нам и не понадобится их читать, особенно если они названы адекватно и то, что они делают, понятно из названия.
-
-## Плохие комментарии
-
-В коде нужны комментарии. 
-
-Сразу начну с того, каких комментариев быть почти не должно. 
-
-**Должен быть минимум комментариев, которые отвечают на вопрос "что происходит в коде?"**
-
-Что интересно, в коде начинающих разработчиков обычно комментариев либо нет, либо они как раз такого типа: "что делается в этих строках". 
-
-Серьёзно, хороший код и так понятен.
-
-Об этом замечательно выразился Р.Мартин в книге ["Чистый код"](http://www.ozon.ru/context/detail/id/21916535/): "Если вам кажется, что нужно добавить комментарий для улучшения понимания, это значит, что ваш код недостаточно прост, и, может, стоит переписать его".
-
-Если у вас образовалась длинная "простыня", то, возможно, стоит разбить её на отдельные функции, и тогда из их названий будет понятно, что делает тот или иной фрагмент.
-
-Да, конечно, бывают сложные алгоритмы, хитрые решения для оптимизации, поэтому нельзя такие комментарии просто запретить. Но перед тем, как писать подобное -- подумайте: "Нельзя ли сделать код понятным и без них?"
-
-## Хорошие комментарии
-
-
-А какие комментарии полезны и приветствуются?
-
-<ul>
-<li>**Архитектурный комментарий -- "как оно, вообще, устроено".** 
-
-Какие компоненты есть, какие технологии использованы, поток взаимодействия. О чём и зачем этот скрипт. Взгляд с высоты птичьего полёта. Эти комментарии особенно нужны, если вы не один, а проект большой.
-
-Для описания архитектуры, кстати, создан специальный язык [UML](http://ru.wikipedia.org/wiki/Unified_Modeling_Language), красивые диаграммы, но можно и без этого. Главное -- чтобы понятно.
-</li>
-<li>**Справочный комментарий перед функцией -- о том, что именно она делает, какие параметры принимает и что возвращает.** 
-
-Для таких комментариев существует синтаксис [JSDoc](http://en.wikipedia.org/wiki/JSDoc).
-
-```js
-/**
- * Возвращает x в степени n, только для натуральных n
- *
- * @param {number} x Число для возведения в степень.
- * @param {number} n Показатель степени, натуральное число.
- * @return {number} x в степени n.
- */
-function pow(x, n) {
-  ...
-}
-```
-
-Такие комментарии позволяют сразу понять, что принимает и что делает функция, не вникая в код.
-
-Кстати, они автоматически обрабатываются многими редакторами, например [Aptana](http://aptana.com) и редакторами от [JetBrains](http://www.jetbrains.com/), которые  учитывают их при автодополнении, а также выводят их в автоподсказках при наборе кода.
-
-Кроме того, есть инструменты, например [JSDoc 3](https://github.com/jsdoc3/jsdoc), которые умеют  генерировать по таким комментариям документацию в формате HTML. Более подробную информацию об этом можно также найти на сайте [](http://usejsdoc.org/).
-</li>
-</ul>
-
-**...Но куда более важными могут быть комментарии, которые объясняют не *что*, а *почему* в коде происходит именно это!**
-
-Как правило, из кода можно понять, что он делает. Бывает, конечно, всякое, но, в конце концов, вы этот код *видите*. Однако гораздо важнее может быть то, чего вы *не видите*!
-
-*Почему* это сделано именно так? На это сам код ответа не даёт.
-
-Например:
-
-<dl>
-<dt>Есть несколько способов решения задачи. Почему выбран именно этот?</dt>
-<dd>
-Например, пробовали решить задачу по-другому, но не получилось -- напишите об этом. Почему вы выбрали именно этот способ решения? Особенно это важно в тех случаях, когда используется не первый приходящий в голову способ, а какой-то другой.
-
-Без этого возможна, например, такая ситуация:
-<ul>
-<li>Вы открываете код, который был написан какое-то время назад, и видите, что он "неоптимален".</li>
-<li>Думаете: "Какой я был дурак", и переписываете под "более очевидный и правильный" вариант.</li>
-<li>...Порыв, конечно, хороший, да только этот вариант вы уже обдумали раньше. И отказались, а почему -- забыли. В процессе переписывания вспомнили, конечно (к счастью), но результат - потеря времени на повторное обдумывание.</li>
-</ul>
-
-Комментарии, которые объясняют выбор решения, очень важны. Они помогают понять происходящее и предпринять правильные шаги при развитии кода.
-</dd>
-<dt>Какие неочевидные возможности обеспечивает этот код? Где ещё они используются?</dt>
-<dd>
-В хорошем коде должно быть минимум неочевидного. Но там, где это есть -- пожалуйста, комментируйте.
-</dd>
-</dl>
-
-
-[smart header="Комментарии -- это важно"]
-Один из показателей хорошего разработчика -- качество комментариев, которые позволяют эффективно поддерживать код, возвращаться к нему после любой паузы и легко вносить изменения.
-[/smart]
-
-## Руководства по стилю
-
-Когда написанием проекта занимается целая команда, то должен существовать один стандарт кода, описывающий где и когда ставить пробелы, запятые, переносы строк и т.п. 
-
-Сейчас, когда есть столько готовых проектов, нет смысла придумывать целиком своё руководство по стилю. Можно взять уже готовое, и которому, по желанию, всегда можно что-то добавить.
-
-Большинство есть на английском, сообщите мне, если найдёте хороший перевод:
-
-<ul>
-<li>[Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)</li>
-<li>[JQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)</li>
-<li>[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)</li>
-<li>[Idiomatic.JS](https://github.com/rwldrn/idiomatic.js) (есть [перевод](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ru_RU))</li>
-<li>[Dojo Style Guide](http://dojotoolkit.org/community/styleGuide)</li>
-</ul>
-
-Для того, чтобы начать разработку, вполне хватит элементов стилей, обозначенных в этой главе. В дальнейшем, посмотрев эти руководства, вы можете выработать и свой стиль, но лучше не делать его особенно "уникальным и неповторимым", себе дороже потом будет с людьми сотрудничать.
-
-## Автоматизированные средства проверки
-
-Существуют средства, проверяющие стиль кода.
-
-Самые известные -- это:
-
-<ul>
-<li>[JSLint](http://www.jslint.com/) -- проверяет код на соответствие [стилю JSLint](http://www.jslint.com/lint.html), в онлайн-интерфейсе вверху можно ввести код, а внизу различные настройки проверки, чтобы сделать её более мягкой. </li>
-<li>[JSHint](http://www.jshint.com/) -- вариант JSLint с большим количеством настроек.</li>
-<li>[Closure Linter](https://developers.google.com/closure/utilities/) -- проверка на соответствие [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml).</li>
-</ul>
-
-В частности, JSLint и JSHint интегрированы с большинством редакторов, они гибко настраиваются под нужный стиль и совершенно незаметно улучшают разработку, подсказывая, где и что поправить.
-
-Побочный эффект -- они видят некоторые ошибки, например необъявленные переменные. У меня это обычно результат опечатки, которые таким образом сразу отлавливаются. Очень рекомендую поставить что-то из этого. Я использую [JSHint](http://www.jshint.com/).
-
-## Итого
-
-Описанные принципы оформления кода уместны в большинстве проектов. Есть и другие полезные соглашения.
-
-Следуя (или не следуя) им, необходимо помнить, что любые советы по стилю хороши лишь тогда, когда делают код читаемее, понятнее, проще в поддержке.
-
diff --git a/1-js/3-writing-js/2-coding-style/code-style.png b/1-js/3-writing-js/2-coding-style/code-style.png
deleted file mode 100644
index d41a9883..00000000
Binary files a/1-js/3-writing-js/2-coding-style/code-style.png and /dev/null differ
diff --git a/1-js/3-writing-js/2-coding-style/code-style@2x.png b/1-js/3-writing-js/2-coding-style/code-style@2x.png
deleted file mode 100644
index acb8ac1b..00000000
Binary files a/1-js/3-writing-js/2-coding-style/code-style@2x.png and /dev/null differ
diff --git a/1-js/3-writing-js/2-coding-style/figure-bracket-style.png b/1-js/3-writing-js/2-coding-style/figure-bracket-style.png
deleted file mode 100644
index 992d126e..00000000
Binary files a/1-js/3-writing-js/2-coding-style/figure-bracket-style.png and /dev/null differ
diff --git a/1-js/3-writing-js/2-coding-style/figure-bracket-style@2x.png b/1-js/3-writing-js/2-coding-style/figure-bracket-style@2x.png
deleted file mode 100644
index 7b937e88..00000000
Binary files a/1-js/3-writing-js/2-coding-style/figure-bracket-style@2x.png and /dev/null differ
diff --git a/1-js/3-writing-js/3-write-unmain-code/article.md b/1-js/3-writing-js/3-write-unmain-code/article.md
deleted file mode 100644
index dd15be50..00000000
--- a/1-js/3-writing-js/3-write-unmain-code/article.md
+++ /dev/null
@@ -1,301 +0,0 @@
-# Как писать неподдерживаемый код?
-
-[warn header="Познай свой код"]
-Эта статья представляет собой мой вольный перевод [How To Write Unmaintainable Code](http://mindprod.com/jgloss/unmain.html) ("как писать неподдерживаемый код") с дополнениями, актуальными для JavaScript.
-
-Возможно, в каких-то из этих советов вам даже удастся узнать "этого парня в зеркале".
-[/warn]
-
-
-Предлагаю вашему вниманию советы мастеров древности, следование которым создаст дополнительные рабочие места для JavaScript-разработчиков.
-	
-Если вы будете им следовать, то ваш код будет так сложен в поддержке, что у JavaScript'еров, которые придут после вас, даже простейшее изменение займет годы *оплачиваемого* труда! А сложные задачи оплачиваются хорошо, так что они, определённо, скажут вам "Спасибо".
-	
-Более того, *внимательно* следуя этим правилам, вы сохраните и своё рабочее место, так как все будут бояться вашего кода и бежать от него...
-	
-...Впрочем, всему своя мера. При написании такого кода он не должен *выглядеть* сложным в поддержке, код должен *быть* таковым. 
-
-Явно кривой код может написать любой дурак. Это заметят, и вас уволят, а код будет переписан с нуля. Вы не можете такого допустить.  Эти советы учитывают такую возможность. Да здравствует дзен.
- 	 	
- 	 	
-[cut]
-
-## Соглашения -- по настроению
-
-[quote author="Сериал \"Симпсоны\", серия Helter Shelter"]
-Рабочий-чистильщик осматривает дом:<br>
-"...Вот только жук у вас необычный...<br>
-И чтобы с ним справиться, я должен жить как жук, стать жуком, думать как жук."<br>
-(грызёт стол Симпсонов)
-[/quote]
-
-Чтобы помешать другому программисту исправить ваш код, вы должны понять путь его мыслей. 
-
-Представьте, перед ним -- ваш большой скрипт. И ему нужно поправить его. У него нет ни времени ни желания, чтобы читать его целиком, а тем более -- досконально разбирать. Он хотел бы по-быстрому найти нужное место, сделать изменение и убраться восвояси без появления побочных эффектов.
-
-Он рассматривает ваш код как бы через трубочку из туалетной бумаги. Это не даёт ему общей картины, он ищет тот небольшой фрагмент, который ему необходимо изменить. По крайней мере, он надеется, что этот фрагмент будет небольшим.
-
-**На что он попытается опереться в этом поиске -- так это на соглашения, принятые в программировании, об именах переменных, названиях функций и методов...**
-
-Как затруднить задачу? Можно везде нарушать соглашения -- это помешает ему, но такое могут заметить, и код будет переписан. Как поступил бы ниндзя на вашем месте?
-
-**...Правильно! Следуйте соглашениям "в общем", но иногда -- нарушайте их.** 
-
-Тщательно разбросанные по коду нарушения соглашений с одной стороны не делают код явно плохим при первом взгляде, а с другой -- имеют в точности тот же, и даже лучший эффект, чем явное неследование им! 
-
-### Пример из jQuery
-
-[warn header="jQuery / DOM"]
-Этот пример требует знаний jQuery/DOM, если пока их у вас нет -- пропустите его, ничего страшного, но обязательно вернитесь к нему позже. Подобное стоит многих часов отладки.
-[/warn]
-Во фреймворке jQuery есть метод [wrap](http://api.jquery.com/wrap/), который обёртывает один элемент вокруг другого:
-
-```js
-var img = $('<img/>'); // создали новые элементы (jQuery-синтаксис)
-var div = $('<div/>'); // и поместили в переменную
-
-img.wrap(div); // обернуть img в div
-div.append('<span/>');
-```
-
-Результат кода после операции `wrap` -- два элемента, один вложен в другой:
-
-```html
-<div>
-  <img/>
-</div>
-```
-
-А что же после `append`?
-
-Можно предположить, что `<span/>` добавится в конец `div`, сразу после `img`... Но ничего подобного!
-
-Искусный ниндзя уже нанёс свой удар и поведение кода стало неправильным, хотя разработчик об этом даже не подозревает.
-
-Как правило, методы jQuery работают с теми элементами, которые им переданы. Но не здесь!
-
-Внутри вызова `img.wrap(div)` происходит клонирование `div` и вокруг `img` оборачивается не сам `div`, а его клон. При этом исходная переменная `div` не меняется, в ней как был пустой `div`, так и остался. 
-
-В итоге, после вызова получается два независимых `div'а`:  первый содержит `img` (этот неявный клон никуда не присвоен), а второй -- наш `span`.
-
-Объяснения не очень понятны? Написано что-то странное? Это просто разум, привыкший, что соглашения уважаются, не допускает мысли, что вызов `wrap` -- неявно клонирует элемент. Ведь другие jQuery-методы, кроме `clone` этого не делают. 
-
-Как говорил [Учитель](https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%84%D1%83%D1%86%D0%B8%D0%B9): "В древности люди учились для того, чтобы совершенствовать себя. Нынче учатся для того, чтобы удивить других".
-
-## Краткость -- сестра таланта!
-
-Пишите "как короче", а не как понятнее. "Меньше букв" -- уважительная причина для нарушения любых соглашений.
-
-Ваш верный помощник -- возможности языка, использованные неочевидным образом.
-
-Обратите внимание на оператор вопросительный знак `'?'`, например:
-
-```js
-// код из jQuery
-i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
-```
-
-Разработчик, встретивший эту строку и попытавшийся понять, чему же всё-таки равно `i`, скорее всего придёт к вам за разъяснениями. Смело скажите ему, что короче -- это всегда лучше. Посвятите и его в пути ниндзя. Не забудьте вручить [Дао дэ цзин](http://lib.ru/POECHIN/lao1.txt).
-
-## Именование
-
-Существенную часть науки о создании неподдерживаемого кода занимает искусство выбора имён. 
-
-### Однобуквенные переменные
-
-Называйте переменные коротко: `a`, `b` или `c`.
-
-В этом случае никто не сможет найти её, используя фунцию "Поиск" текстового редактора. 
-
-Более того, даже найдя -- никто не сможет "расшифровать" её и догадаться, что она означает.
-
-### Не используйте i для цикла
-
-В тех местах, где однобуквенные переменные общеприняты, например, в счетчике цикла -- ни в коем случае не используйте стандартные названия `i`, `j`, `k`. Где угодно, только не здесь!
-
-Остановите свой взыскательный взгляд на чём-нибудь более экзотическом. Например, `x` или `y`. 
-
-Эффективность этого подхода особенно заметна, если тело цикла занимает одну-две страницы (чем длиннее -- тем лучше). 
-
-В этом случае заметить, что переменная -- счетчик цикла, без пролистывания вверх, невозможно. 
-
-### Русские слова и сокращения
-
-Если вам *приходится* использовать длинные, понятные имена переменных -- что поделать.. Но и здесь есть простор для творчества!
-
-**Назовите переменные "калькой" с русского языка или как-то "улучшите" английское слово.** 
-
-В одном месте напишите `var ssilka`, в другом `var ssylka`, в третьем `var link`, в четвёртом -- `var lnk`... Это действительно великолепно работает и очень креативно! 
-
-Количество ошибок при поддержке такого кода увеличивается во много раз.
-
-### Будьте абстрактны при выборе имени
-
-[quote author="Лао-цзы"]Лучший кувшин лепят всю жизнь.<br>
-Высокая музыка неподвластна слуху.<br>
-Великий образ не имеет формы.[/quote]
-
-При выборе имени старайтесь применить максимально абстрактное слово, например `obj`, `data`, `value`, `item`, `elem` и т.п. 
-
-<ul>
-<li>**Идеальное имя для переменной: `data`.** Используйте это имя везде, где можно. В конце концов, каждая переменная содержит *данные*, не правда ли?
-
-Но что делать, если имя `data` уже занято? Попробуйте `value`, оно не менее универсально. Ведь каждая переменная содержит *значение*.
-
-Занято и это? Есть и другой вариант.
-</li>
-<li>**Называйте переменную по типу данных, которые она хранит: `obj`, `num`, `arr`...**
-
-Насколько это усложнит разработку? Как ни странно, намного!
-
-Казалось бы, название переменной содержит информацию, говорит о том, что в переменной -- число, объект или массив... С другой стороны, **когда непосвящённый будет разбирать этот код -- он с удивлением обнаружит, что информации нет!**
-
-Ведь как раз тип легко понять, запустив отладчик и посмотрев, что внутри. Но в чём смысл этой переменной? Что за массив/объект/число в ней хранится? Без долгой медитации над кодом тут не обойтись!
-</li>
-<li>**Что делать, если и эти имена кончились? Просто добавьте цифру:** `item1, item2, elem5, data1`...</li>
-</ul>
-
-### Похожие имена
-
-Только истинно внимательный программист достоин понять ваш код. Но как проверить, достоин ли читающий? 
-
-**Один из способов -- использовать похожие имена переменных, например `data` и `date`.** Бегло прочитать такой код почти невозможно. А уж заметить опечатку и поправить её... Ммммм... Мы здесь надолго, время попить чайку.
-
-### А.К.Р.О.Н.И.М
-
-Используйте сокращения, чтобы сделать код короче. 
-
-Например `ie` (Inner Element), `mc` (Money Counter) и другие. Если вы обнаружите, что путаетесь в них сами -- героически страдайте, но не переписывайте код. Вы знали, на что шли.
-
-### Хитрые синонимы
-
-[quote author="Конфуций"]Очень трудно найти чёрную кошку в тёмной комнате, особенно когда её там нет.[/quote]
-
-**Чтобы было не скучно -- используйте *похожие названия* для обозначения *одинаковых действий*.** 
-
-Например, если метод показывает что-то на экране -- начните его название с `display..` (скажем, `displayElement`), а в другом месте объявите аналогичный метод как `show..` (`showFrame`). 
-
-**Как бы намекните этим, что существует тонкое различие между способами показа в этих методах, хотя на самом деле его нет.** 
-
-По возможности, договоритесь с членами своей команды. Если Вася в своих классах использует `display..`, то Валера -- обязательно `render..`, а Петя -- `paint..`. 
-
-**...И напротив, если есть две функции с важными отличиями -- используйте одно и то же слово для их описания!** Например, с `print...` можно начать метод печати на принтере `printPage`, а также -- метод добавления текста на страницу `printText`. 
-
-А теперь, пусть читающий код думает: "Куда же выводит сообщение `printMessage`?". Особый шик -- добавить элемент неожиданности. Пусть `printMessage` выводит не туда, куда все, а в новое окно!
-
-### Словарь терминов -- это еда!
-
-Ни в коем случае не поддавайтесь требованиям написать словарь терминов для проекта. Если же он уже есть -- не следуйте ему, а лучше проглотите и скажите, что так и былО!
-
-Пусть читающий ваш код программист напрасно ищет различия в `helloUser` и `welcomeVisitor` и пытается понять, когда что использовать. Вы-то знаете, что на самом деле различий нет, но искать их можно о-очень долго. 
-
-**Для обозначения посетителя в одном месте используйте `user`, а в другом `visitor`, в третьем -- просто `u`. Выбирайте одно имя или другое, в зависимости от функции и настроения.**
-
-Это воплотит сразу два ключевых принципа ниндзя-дизайна -- *сокрытие информации* и *подмена понятий*! 
-
-### Повторно используйте имена
-
-По возможности, повторно используйте имена переменных, функций и свойств. Просто записывайте в них новые значения. 
-
-Добавляйте новое имя только если это абсолютно необходимо.
-
-В функции старайтесь обойтись только теми переменными, которые были переданы как параметры.
-
-Это не только затруднит идентификацию того, что *сейчас* находится в переменной, но и сделает почти невозможным поиск места, в котором конкретное значение было присвоено.
-
-Цель -- максимально усложнить отладку и заставить читающего код программиста построчно анализировать код и конспектировать изменения переменных для каждой ветки исполнения.
-
-**Продвинутый вариант этого подхода -- незаметно (!) подменить переменную на нечто похожее, например:**
-
-```js
-function ninjaFunction(elem) {
-  // 20 строк кода, работающего с elem
-
-  elem = elem.cloneNode(true);
-
-  // еще 20 строк кода, работающего с elem
-}
-```
-
-Программист, пожелавший добавить действия с `elem` во вторую часть функции, будет удивлён. Лишь во время отладки, посмотрев весь код, он с удивлением обнаружит, что оказывается имел дело с клоном! 
-
-Регулярные встречи с этим приемом на практике говорят: защититься невозможно. Эффективно даже против опытного ниндзи.
-
-### Добавляйте подчеркивания
-
-Добавляйте подчеркивания `_` и `__` к именам переменных. Желательно, чтобы их смысл был известен только вам, а лучше -- вообще без явной причины.
-
-Этим вы достигните двух целей. Во-первых, код станет длиннее и менее читаемым, а во-вторых, другой программист будет долго искать смысл в подчёркиваниях. Особенно хорошо сработает и внесет сумятицу в его мысли, если в некоторых частях проекта подчеркивания будут, а в некоторых -- нет.
-
-В процессе развития кода вы, скорее всего, будете путаться и смешивать стили: добавлять имена с подчеркиваниями там, где обычно подчеркиваний нет, и наоборот. Это нормально и полностью соответствует третьей цели -- увеличить количество ошибок при внесении исправлений.
-
-### Покажите вашу любовь к разработке
-
-Пусть все видят, какими замечательными сущностями вы оперируете! Имена `superElement`, `megaFrame` и `niceItem` при благоприятном положении звёзд могут привести к просветлению читающего. 
-
-Действительно, с одной стороны, кое-что написано: `super..`, `mega..`, `nice..` С другой -- это не несёт никакой конкретики. Читающий может решить поискать в этом глубинный смысл и замедитировать на часок-другой оплаченного рабочего времени.
-
-### Перекрывайте внешние переменные
-
-[quote author="Гуань Инь-цзы"]
-Находясь на свету, нельзя ничего увидеть в темноте.<br>
-Пребывая же в темноте, увидишь все, что находится на свету.
-[/quote]
-
-Почему бы не использовать одинаковые переменные внутри и снаружи функции? Это просто и не требует придумывать новых имён.
-
-```js
-var *!*user*/!* = authenticateUser();
-
-function render() {
-  var *!*user*/!* = anotherValue();
-  ...
-  ...многобукв...
-  ...
-  ... // <-- программист захочет внести исправления сюда, и..
-  ...
-}
-```
-
-Зашедший в середину метода `render` программист, скорее всего, не заметит, что переменная `user` локально перекрыта и попытается работать с ней, полагая, что это результат `authenticateUser()`... Ловушка захлопнулась! Здравствуй, отладчик.
-
-## Мощные функции!
-
-Не ограничивайте действия функции тем, что написано в её названии. Будьте шире. 
-
-Например, функция `validateEmail(email)` может, кроме проверки e-mail на правильность, выводить сообщение об ошибке и просить заново ввести e-mail.
-
-**Выберите хотя бы пару дополнительных действий, кроме основного назначения функции.** 
-
-Главное -- они должны быть неочевидны из названия функции. Истинный ниндзя-девелопер сделает так, что они будут неочевидны и из кода тоже.</li>
-
-**Объединение нескольких смежных действий в одну функцию защитит ваш код от повторного использования.**
-
-Представьте, что другому разработчику нужно только проверить адрес, а сообщение -- не выводить. Ваша функция `validateEmail(email)`, которая делает и то и другое, ему не подойдёт. Работодатель будет вынужден оплатить создание новой.
-
-
-## Внимание.. Сюр-при-из!
-
-Есть функции, название которых говорит о том, что они ничего не меняют. Например, `isReady`, `checkPermission`, `findTags`... Предполагается, что при вызове они произведут некие вычисления, или найдут и возвратят полезные данные, но при этом их не изменят. В трактатах это называется "отсутствие сторонних эффектов".  
-
-**По-настоящему красивый приём -- делать в таких функциях что-нибудь полезное, заодно с процессом проверки. Что именно -- совершенно неважно.** 
-
-Удивление и ошеломление, которое возникнет у вашего коллеги, когда он увидит, что функция с названием на `is..`, `check..` или `find...` что-то меняет -- несомненно, расширит его границы разумного!
-
-**Ещё одна вариация такого подхода -- возвращать нестандартное значение.**
-
-Ведь общеизвестно, что `is..` и `check..` обычно возвращают `true/false`. Продемонстрируйте оригинальное мышление. Пусть вызов `checkPermission` возвращает не результат `true/false`, а объект с результатами проверки! А чего, полезно.
-
-Те же разработчики, кто попытается написать проверку `if (checkPermission(..))`, будут весьма удивлены результатом. Ответьте им: "надо читать документацию!". И перешлите эту статью.
-
-## Заключение
-
-Все советы выше пришли из реального кода... И в том числе от разработчиков с большим опытом. 
-
-Возможно, даже больше вашего, так что не судите опрометчиво ;)
-
-<ul>
-<li>Следуйте нескольким из них -- и ваш код станет полон сюрпризов.</li>
-<li>Следуйте многим -- и ваш код станет истинно вашим, никто не захочет изменять его.</li>
-<li>Следуйте всем -- и ваш код станет ценным уроком для молодых разработчиков, ищущих просветления.</li>
-</ul>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js
deleted file mode 100644
index 7a67dac5..00000000
--- a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function pow(x, n) {
-  if (n < 0) return NaN;
-  if (Math.round(n) != n) return NaN;
-
-  var result = 1;
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js
deleted file mode 100644
index 1450a38d..00000000
--- a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* исправьте этот код */
-function pow(x, n) {
-  var result = 1;
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js
deleted file mode 100644
index 61453678..00000000
--- a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md b/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md
deleted file mode 100644
index 2586dfa3..00000000
--- a/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-```js
-function pow(x, n) {
-*!*
-  if (n < 0) return NaN;
-  if (Math.round(n) != n) return NaN;
-*/!*
-
-  var result = 1;
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-  return result;
-}
-```
-
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md b/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md
deleted file mode 100644
index ea90d617..00000000
--- a/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Сделать pow по спецификации
-
-[importance 5]
-
-Исправьте код функции `pow`, чтобы тесты проходили.
-
-Для этого ниже в задаче вы найдёте ссылку на песочницу.
-
-Она содержит HTML с тестами. Обратите внимание, что HTML-страница в ней короче той, что обсуждалась в статье [](/testing). Это потому что библиотеки Chai, Mocha и Sinon объединены в один файл:
-
-```html
-<script src="https://js.cx/test/libs.js"></script>
-```
-
-Этот файл содержит код библиотек, стили, настройки для них и запуск `mocha.run` по окончании загрузки страницы. Если нет элемента с `id="mocha"`, то результаты выводятся в `<body>`.
-
-Сборка сделана исключительно для более компактного представления задач, без рекомендаций использовать именно её в проектах.
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md
deleted file mode 100644
index 39eae1e7..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md
+++ /dev/null
@@ -1,39 +0,0 @@
-Новый тест может быть, к примеру, таким:
-
-```js
-it("любое число в степени 0 равно 1", function() {
-  assert.equal(pow(123, 0), 1);
-});
-```
-
-Конечно, желательно проверить на нескольких числах. 
-
-Поэтому лучше будет создать блок `describe`, аналогичный тому, что мы делали для произвольных чисел:
-
-```js
-describe("любое число, кроме нуля, в степени 0 равно 1", function() {
-
-  function makeTest(x) {
-    it("при возведении " + x + " в степень 0 результат: 1", function() {
-      assert.equal(pow(x, 0), 1);
-    });
-  }
-
-  for (var x = -5; x <= 5; x += 2) {
-    makeTest(x);
-  }
-
-});
-```
-
-И не забудем добавить отдельный тест для нуля:
-
-```js
-//+ no-beautify
-...
-it("ноль в нулевой степени даёт NaN", function() {
-  assert( isNaN(pow(0, 0)), "0 в степени 0 не NaN");
-});
-...
-```
-
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html
deleted file mode 100644
index eb1aedbf..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <script src="https://js.cx/test/libs.js"></script>
-  <script src="test.js"></script>
-</head>
-<body>
-
-  <script>
-
-    function pow(x, n) {
-      if (n < 0) return NaN;
-      if (Math.round(n) != n) return NaN;
-      if (n == 0 && x == 0) return NaN;
-    
-      var result = 1;
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-      return result;
-    }
-
-  </script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js
deleted file mode 100644
index d2b9a771..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
-  });
-
-  describe("любое число, кроме нуля, в степени 0 равно 1", function() {
-
-    function makeTest(x) {
-      it("при возведении " + x + " в степень 0 результат: 1", function() {
-        assert.equal(pow(x, 0), 1);
-      });
-    }
-
-    for (var x = -5; x <= 5; x += 2) {
-      makeTest(x);
-    }
-
-  });
-
-  it("ноль в нулевой степени даёт NaN", function() {
-    assert(isNaN(pow(0, 0)), "0 в степени 0 не NaN");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html
deleted file mode 100644
index 7cc184b0..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <script src="https://js.cx/test/libs.js"></script>
-  <script src="test.js"></script>
-</head>
-<body>
-
-  <script>
-
-    function pow(x, n) {
-      if (n < 0) return NaN;
-      if (Math.round(n) != n) return NaN;
-    
-      var result = 1;
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-      return result;
-    }
-
-  </script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js
deleted file mode 100644
index 61453678..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/task.md b/1-js/3-writing-js/4-testing/2-pow-test-0/task.md
deleted file mode 100644
index 28291a3a..00000000
--- a/1-js/3-writing-js/4-testing/2-pow-test-0/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Добавьте тест к задаче
-
-[importance 5]
-
-Добавьте к [предыдущей задаче](/task/pow-nan-spec) тесты, которые будут проверять, что любое число, кроме нуля, в нулевой степени равно `1`, а ноль в нулевой степени даёт `NaN` (это математически корректно, результат 0<sup>0</sup> не определён).
-
-При необходимости, исправьте реализацию, чтобы тесты проходили без ошибок.
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md b/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md
deleted file mode 100644
index 97b66bbc..00000000
--- a/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Этот тест демонстрирует один из соблазнов, которые ожидают начинающего автора тестов.
-
-Вместо того, чтобы написать три различных теста, он изложил их в виде одного потока вычислений, с несколькими `assert`. 
-
-Иногда так написать легче и проще, однако при ошибке в тесте гораздо менее очевидно, что же пошло не так.
-
-Если в сложном тесте произошла ошибка где-то посередине потока вычислений, то придётся выяснять, какие конкретно были входные и выходные данные на этот момент, то есть по сути -- отлаживать код самого теста.
-
-Гораздо лучше будет разбить тест на несколько блоков `it`, с чётко прописанными входными и выходными данными.
-
-```js
-describe("Возводит x в степень n", function() {
-  it("5 в степени 1 равно 5", function() {
-    assert.equal(pow(5, 1), 5);
-  });
-
-  it("5 в степени 2 равно 25", function() {
-    assert.equal(pow(5, 2), 25);
-  });
-
-  it("5 в степени 3 равно 125", function() {
-    assert.equal(pow(5, 3), 125);
-  });
-});
-```
-
-Можно использовать цикл для генерации блоков `it`, в этом случае важно, чтобы сам код такого цикла был достаточно простым. Иногда проще записать несколько блоков `it` вручную, как сделано выше, чем "городить огород" из синтаксических конструкций.
diff --git a/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md b/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md
deleted file mode 100644
index 4d656c2f..00000000
--- a/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Что не так в тесте? 
-
-[importance 5]
-
-Что не так в этом тесте функции `pow`?
-
-```js
-it("Возводит x в степень n", function() {
-  var x = 5;
-
-  var result = x;
-  assert.equal(pow(x, 1), result);
-
-  var result *= x;
-  assert.equal(pow(x, 2), result);
-
-  var result *= x;
-  assert.equal(pow(x, 3), result);
-});
-```
-
-P.S. Синтаксически он верен и работает, но спроектирован неправильно.
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/article.md b/1-js/3-writing-js/4-testing/article.md
deleted file mode 100644
index 6c04f26a..00000000
--- a/1-js/3-writing-js/4-testing/article.md
+++ /dev/null
@@ -1,452 +0,0 @@
-# Автоматические тесты при помощи chai и mocha
-
-В этой главе мы разберём основы автоматического тестирования. Оно будет применяться далее в задачах, и вообще, входит в "образовательный минимум" программиста.
-
-[cut]
-
-## Зачем нужны тесты?
-
-При написании функции мы обычно представляем, что она должна делать, какое значение -- на каких аргументах выдавать.
-
-В процессе разработки мы, время от времени, проверяем, правильно ли работает функция. Самый простой способ проверить -- это запустить её, например, в консоли, и посмотреть результат. 
-
-Если что-то не так -- поправить, опять запустить -- посмотреть результат... И так -- "до победного конца". 
-
-Но такие ручные запуски -- очень несовершенное средство проверки.
-
-**Когда проверяешь работу кода вручную -- легко его "недотестировать".**
-
-Например, пишем функцию `f`. Написали, тестируем с разными аргументами. Вызов функции `f(a)` -- работает, а вот `f(b)` -- не работает. Поправили код -- стало работать `f(b)`, вроде закончили. Но при этом забыли заново протестировать `f(a)` -- упс, вот и возможная ошибка в коде.
-
-**Автоматизированное тестирование -- это когда тесты написаны отдельно от кода, и можно в любой момент запустить их и проверить все важные случаи использования.**
-
-## BDD -- поведенческие тесты кода
-
-Мы рассмотрим методику тестирования, которая входит в [BDD](http://en.wikipedia.org/wiki/Behavior-driven_development) -- Behavior Driven Development. Подход BDD давно и с успехом используется во многих проектах. 
-
-BDD -- это не просто тесты. Это гораздо больше. 
-
-**Тесты BDD -- это три в одном: И тесты И документация И примеры использования одновременно.**
-
-Впрочем, хватит слов. Рассмотрим примеры.
-
-## Разработка pow: спецификация 
-
-Допустим, мы хотим разработать функцию `pow(x, n)`, которая возводит `x` в целую степень `n`, для простоты `n≥0`.
-
-
-Ещё до разработки мы можем представить себе, что эта функция будет делать и описать это по методике BDD.
-
-Это описание называется *спецификация* (или, как говорят в обиходе, "спека") и выглядит так:
-
-```js
-describe("pow", function() {
-
-  it("возводит в n-ю степень", function() {
-    assert.equal(pow(2, 3), 8);
-  });
-
-});
-```
-
-У спецификации есть три основных строительных блока, которые вы видите в примере выше:
-<dl>
-<dt>`describe(название, function() { ... })`</dt>
-<dd>Задаёт, что именно мы описываем, используется для группировки "рабочих лошадок" -- блоков `it`. В данном случае мы описываем функцию `pow`.</dd>
-<dt>`it(название, function() { ... })`</dt>
-<dd>В названии блока `it` *человеческим языком* описывается, что должна делать функция, далее следует *тест*, который проверяет это.</dd>
-<dt>`assert.equal(value1, value2)`</dt>
-<dd>Код внутри `it`, если реализация верна, должен выполняться без ошибок. 
-
-Различные функции вида `assert.*` используются, чтобы проверить, делает ли `pow` то, что задумано. Пока что нас интересует только одна из них -- `assert.equal`, она сравнивает свой первый аргумент со вторым и выдаёт ошибку в случае, когда они не равны. В данном случае она проверяет, что результат `pow(2, 3)` равен `8`.
-
-
-Есть и другие виды сравнений и проверок, которые мы увидим далее.</dd>
-</dl>
-
-
-## Поток разработки
-
-Как правило, поток разработки таков:
-<ol>
-<li>Пишется спецификация, которая описывает самый базовый функционал.</li>
-<li>Делается начальная реализация.</li>
-<li>Для проверки соответствия спецификации мы задействуем одновременно фреймворк, в нашем случае [Mocha](http://mochajs.org/) вместе со спецификацией и реализацией. Фреймворк запускает все тесты `it` и выводит ошибки, если они возникнут. При ошибках вносятся исправления.</li>
-<li>Спецификация расширяется, в неё добавляются возможности, которые пока, возможно, не поддерживаются реализацией.</li>
-<li>Идём на пункт 3, делаем реализацию, и так далее, до победного конца.</li>
-</ol>
-
-Разработка ведётся *итеративно*, один проход за другим, пока спецификация и реализация не будут завершены.
-
-В нашем случае первый шаг уже завершён, начальная спецификация готова, хорошо бы приступить к реализации. Но перед этим проведём "нулевой" запуск спецификации, просто чтобы увидеть, что уже в таком виде, даже без реализации -- тесты работают.
-
-## Пример в действии
-
-Для запуска тестов нужны соответствующие JavaScript-библиотеки. 
-
-Мы будем использовать:
-<ul>
-<li>[Mocha](http://mochajs.org/) -- эта библиотека содержит общие функции для тестирования, включая `describe` и `it`.</li>
-<li>[Chai](http://chaijs.com) -- библиотека поддерживает разнообразные функции для проверок. Есть разные "стили" проверки результатов, с которыми мы познакомимся позже, на текущий момент мы будем использовать лишь `assert.equal`.</li>
-<li>[Sinon](http://sinonjs.org/) -- для эмуляции и хитрой подмены функций "заглушками", понадобится позднее.</li>
-</ul>
-
-Эти библиотеки позволяют тестировать JS не только в браузере, но и на сервере Node.JS. Здесь мы рассмотрим браузерный вариант, серверный использует те же функции.
-
-Пример HTML-страницы для тестов:
-
-```html
-<!--+ src="index.html" -->
-```
-
-Эту страницу можно условно разделить на четыре части:
-<ol>
-<li>Блок `<head>` -- в нём мы подключаем библиотеки и стили для тестирования, нашего кода там нет.</li>
-<li>Блок `<script>` с реализацией спецификации, в нашем случае -- с кодом для `pow`.</li>
-<li>Далее подключаются тесты, файл `test.js` содержит `describe("pow", ...)`, который был описан выше. Методы `describe` и `it` принадлежат библиотеке Mocha, так что важно, что она была подключена выше.</li>
-<li>Элемент `<div id="mocha">` будет использоваться библиотекой Mocha для вывода результатов. Запуск тестов инициируется командой `mocha.run()`.</li>
-</ol>
-
-Результат срабатывания:
-
-[iframe height=250 src="pow-1" border=1 edit] 
-
-Пока что тесты не проходят, но это логично -- вместо функции стоит "заглушка", пустой код.
-
-Пока что у нас одна функция и одна спецификация, но на будущее заметим, что если различных функций и тестов много --  это не проблема, можно их все подключить на одной странице. Конфликта не будет, так как каждый функционал имеет свой блок `describe("что тестируем"...)`. Сами же тесты обычно пишутся так, чтобы не влиять друг на друга, не делать лишних глобальных переменных.
-
-## Начальная реализация
-
-Пока что, как видно, тесты не проходят, ошибка сразу же. Давайте сделаем минимальную реализацию `pow`, которая бы работала нормально:
-
-```js
-function pow() {
-  return 8; // :) мы - мошенники!
-}
-```
-
-О, вот теперь работает:
-
-[iframe height=250 src="pow-min" border=1 edit] 
-
-## Исправление спецификации
-
-Функция, конечно, ещё не готова, но тесты проходят. Это ненадолго :) 
-
-Здесь мы видим ситуацию, которая (и не обязательно при ленивом программисте!)  бывает на практике -- да, есть тесты, они проходят, но увы, функция работает неправильно.
-
-**С точки зрения BDD, ошибка при проходящих тестах --  вина спецификации.**
-
-В первую очередь не реализация исправляется, а уточняется спецификация, пишется (падающий) тест.
-
-Сейчас мы расширим спецификацию, добавив проверку на `pow(3, 4) = 81`. 
-
-Здесь есть два варианта организации кода:
-
-<ol>
-<li>Первый вариант -- добавить `assert` в тот же `it`:
-
-```js
-describe("pow", function() {
-
-  it("возводит в n-ю степень", function() {
-    assert.equal(pow(2, 3), 8);
-*!*
-    assert.equal(pow(3, 4), 81);
-*/!*
-  });
-
-});
-```
-
-</li>
-<li>Второй вариант -- сделать два теста:
-
-```js
-describe("pow", function() {
-
-  it("при возведении 2 в 3ю степень результат 8", function() {
-    assert.equal(pow(2, 3), 8);
-  });
-
-  it("при возведении 3 в 4ю степень равен 81", function() {
-    assert.equal(pow(3, 4), 81);
-  });
-
-});
-```
-
-</li>
-</ol>
-
-Их принципиальное различие в том, что если `assert` обнаруживает ошибку, то он тут же прекращает выполнение блоки `it`. Поэтому в первом варианте, если вдруг первый `assert` "провалился", то про результат второго мы никогда не узнаем.
-
-**Таким образом, разделить эти тесты может быть полезно, чтобы мы получили больше информации о происходящем.**
-
-Кроме того, есть ещё одно правило, которое желательно соблюдать.
-
-**Один тест тестирует ровно одну вещь.**
-
-Если мы явно видим, что тест включает в себя совершенно независимые проверки -- лучше разбить его на два более простых и наглядных. 
-
-По этим причинам второй вариант здесь предпочтительнее. 
-
-Результат:
-[iframe height=250 src="pow-2" edit border="1"]
-
-Как и следовало ожидать, второй тест не проходит. Ещё бы, ведь функция всё время возвращает `8`.
-
-## Уточнение реализации
-
-Придётся написать нечто более реальное, чтобы тесты проходили:
-
-```js
-function pow(x, n) {
-  var result = 1;
-
-  for (var i = 0; i < n; i++) {
-    result *= x;
-  }
-
-  return result;
-}
-```
-
-Чтобы быть уверенными, что функция работает верно, желательно протестировать её на большем количестве значений. Вместо того, чтобы писать блоки `it` вручную, мы можем сгенерировать тесты в цикле `for`:
-
-```js
-describe("pow", function() {
-
-  function makeTest(x) {
-    var expected = x * x * x;
-    it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-      assert.equal(pow(x, 3), expected);
-    });
-  }
-
-  for (var x = 1; x <= 5; x++) {
-    makeTest(x);
-  }
-
-});
-```
-
-Результат:
-[iframe height=250 src="pow-3" edit border="1"]
-
-
-## Вложенный describe
-
-Функция `makeTest` и цикл `for`, очевидно, нужны друг другу, но не нужны для других тестов, которые мы добавим в дальнейшем. Они образуют единую группу, задача которой -- проверить возведение в `n`-ю степень.
-
-Будет правильно выделить их, при помощи вложенного блока `describe`:
-
-```js
-describe("pow", function() {
-
-*!*
-  describe("возводит x в степень n", function() {
-*/!*
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-*!*
-  });
-*/!*
-
-  // ... дальнейшие тесты it и подблоки describe ...
-});
-```
-
-Вложенный `describe` объявит новую "подгруппу" тестов, блоки `it` которой запускаются так же, как и обычно, но выводятся с подзаголовком, вот так:
-
-[iframe height=300 src="pow-4" edit border="1"]
-
-В будущем мы сможем в добавить другие тесты `it` и блоки `describe` со своими вспомогательными функциями.
-
-[smart header="before/after и beforeEach/afterEach"]
-В каждом блоке `describe` можно также задать функции `before/after`, которые будут выполнены до/после запуска тестов, а также `beforeEach/afterEach`, которые выполняются до/после каждого `it`. 
-
-Например:
-
-```js
-//+ no-beautify
-describe("Тест", function() {
-
-  before(function() { alert("Начало тестов"); });
-  after(function() { alert("Конец тестов"); });
-
-  beforeEach(function() { alert("Вход в тест"); });
-  afterEach(function() { alert("Выход из теста"); });
-
-  it('тест 1', function() { alert('1'); });
-  it('тест 2', function() { alert('2'); });
-  
-});
-```
-
-Последовательность будет такой:
-
-```
-Начало тестов
-Вход в тест
-1
-Выход из теста 
-Вход в тест
-2 
-Выход из теста
-Конец тестов
-```
-
-[edit src="beforeafter"]Открыть пример с тестами в песочнице[/edit]
-
-Как правило, `beforeEach/afterEach` (`before/each`) используют, если необходимо произвести инициализацию, обнулить счётчики или сделать что-то ещё в таком духе между тестами (или их группами). 
-[/smart]
-
-## Расширение спецификации
-
-Базовый функционал `pow` описан и реализован, первая итерация разработки завершена. Теперь расширим и уточним его.
-
-Как говорилось ранее, функция `pow(x, n)` предназначена для работы с целыми неотрицательными `n`.
-
-В JavaScript для ошибки вычислений служит специальное значение `NaN`, которое функция будет возвращать при некорректных `n`.
-
-Добавим это поведение в спецификацию:
-
-```js
-describe("pow", function() {
-
-  // ...
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-*!*
-    assert(isNaN(pow(2, -1)));
-*/!*
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-*!*
-    assert(isNaN(pow(2, 1.5)));
-*/!*
-  });
-
-});
-```
-
-Результат с новыми тестами:
-[iframe height=450 src="pow-nan" edit border="1"]
-
-Конечно, новые тесты не проходят, так как наша реализация ещё не поддерживает их. Так и задумано: сначала написали заведомо не работающие тесты, а затем пишем реализацию под них.
-
-## Другие assert
-
-Обратим внимание, в спецификации выше использована проверка не `assert.equal`, как раньше, а `assert(выражение)`. Такая проверка выдаёт ошибку, если значение выражения при приведении к логическому типу не `true`.
-
-Она потребовалась, потому что сравнивать с `NaN` обычным способом нельзя: `NaN` не равно никакому значению, даже самому себе, поэтому `assert.equal(NaN, x)` не подойдёт.
-
-Кстати, мы и ранее могли бы использовать `assert(value1 == value2)` вместо `assert.equal(value1, value2)`. Оба этих `assert` проверяют одно и тоже. 
-
-Однако, между этими вызовами есть отличие в деталях сообщения об ошибке. 
-
-При "упавшем" `assert` в примере выше мы видим `"Unspecified AssertionError"`, то есть просто "что-то пошло не так", а при `assert.equal(value1, value2)` -- будут дополнительные подробности: `expected 8 to equal 81`.
-
-**Поэтому рекомендуется использовать именно ту проверку, которая максимально соответствует задаче.**
-
-Вот самые востребованные `assert`-проверки, встроенные в Chai:
-
-<ul>
-<li>`assert(value)` -- проверяет что `value` является `true` в логическом контексте.</li>
-<li>`assert.equal(value1, value2)` -- проверяет равенство  `value1 == value2`.</li>
-<li>`assert.strictEqual(value1, value2)` -- проверяет строгое равенство `value1 === value2`.</li>
-<li>`assert.notEqual`, `assert.notStrictEqual` -- проверки, обратные двум предыдущим.</li>
-<li>`assert.isTrue(value)` -- проверяет, что `value === true`</li>
-<li>`assert.isFalse(value)` -- проверяет, что `value === false`</li>
-<li>...более полный список -- в [документации](http://chaijs.com/api/assert/)</li>
-</ul>
-
-В нашем случае хорошо бы иметь проверку `assert.isNaN`, но, увы, такого метода нет, поэтому приходится использовать самый общий `assert(...)`. В этом случае для того, чтобы сделать сообщение об ошибке понятнее, желательно добавить к `assert` описание.
-
-**Все вызовы `assert` позволяют дополнительным последним аргументом указать строку с описанием ошибки, которое выводится, если `assert` не проходит.**
-
-Добавим описание ошибки в конец наших `assert'ов`:
-
-```js
-describe("pow", function() {
-
-  // ...
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-*!*
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-*/!*
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-*!*
-    assert(isNaN(pow(2, 1.5)), "pow(2, 1.5) не NaN");
-*/!*
-  });
-
-});
-```
-
-Теперь результат теста гораздо яснее говорит о том, что не так:
-
-[iframe height=450 src="pow-nan-assert" edit border="1"]
-
-В коде тестов выше можно было бы добавить описание и к `assert.equal`, указав в конце: `assert.equal(value1, value2, "описание")`, но с равенством обычно и так всё понятно, поэтому мы так делать не будем.
-
-
-## Итого
-
-Итак, разработка завершена, мы получили полноценную спецификацию и код, который её реализует.
-
-Задачи выше позволяют дополнить её, и в результате может получиться что-то в таком духе:
-
-```js
-//+ src="pow-full/test.js"
-```
-
-[edit src="pow-full"]Открыть полный пример с реализацией в песочнице[/edit]
-
-Эту спецификацию можно использовать как:
-<ol>
-<li>**Тесты**, которые гарантируют правильность работы кода.</li>
-<li>**Документацию** по функции, что она конкретно делает.</li>
-<li>**Примеры** использования функции, которые демонстрируют её работу внутри `it`.</li>
-</ol>
-
-Имея спецификацию, мы можем улучшать, менять, переписывать функцию и легко контролировать её работу, просматривая тесты.
-
-Особенно важно это в больших проектах. 
-
-Бывает так, что изменение в одной части кода может повлечь за собой "падение" другой части, которая её использует. Так как всё-всё в большом проекте руками не перепроверишь, то такие ошибки имеют большой шанс остаться в продукте и вылезти позже, когда проект увидит посетитель или заказчик.
-
-Чтобы избежать таких проблем, бывает, что вообще стараются не трогать код, от которого много что зависит, даже если его ну очень нужно переписать. Жизнь пробивается тонкими росточками там, где должен цвести и пахнуть новый функционал.
-
-**Код, покрытый автотестами, являет собой полную противоположность этому!**
-
-Даже если какое-то изменение потенциально может порушить всё -- его совершенно не страшно сделать. Ведь есть масса тестов, которые быстро и в автоматическом режиме проверят работу кода и, если что-то падает -- это можно будет легко локализовать и поправить.
-
-**Кроме того, код, покрытый тестами, имеет лучшую архитектуру.**
-
-Конечно, это естественное следствие того, что его легче менять и улучшать. Но не только.
-
-Чтобы написать тесты, нужно разбить код на функции так, чтобы для каждой функции было чётко понятно, что она получает на вход, что делает с этим и что возвращает. Это означает ясную и понятную структуру с самого начала.
-
-Конечно, в реальной жизни всё не так просто. Зачастую написать тест сложно. Или сложно поддерживать тесты, поскольку код активно меняется. Сами тесты тоже пишутся по-разному, при помощи разных инструментов.
-
-## Что дальше?
-
-В дальнейшем условия ряда задач будут уже содержать в себе тесты. На них вы познакомитесь с дополнительными примерами. 
-
-Как правило, они будут вполне понятны, даже если немного выходят за пределы этой главы.
diff --git a/1-js/3-writing-js/4-testing/beforeafter.view/index.html b/1-js/3-writing-js/4-testing/beforeafter.view/index.html
deleted file mode 100755
index 6f09e269..00000000
--- a/1-js/3-writing-js/4-testing/beforeafter.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <script>
-    mocha.setup('bdd');
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/beforeafter.view/test.js b/1-js/3-writing-js/4-testing/beforeafter.view/test.js
deleted file mode 100755
index e9637032..00000000
--- a/1-js/3-writing-js/4-testing/beforeafter.view/test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-describe("Тест", function() {
-
-  before(function() {
-    alert("Начало всех тестов");
-  });
-  after(function() {
-    alert("Окончание всех тестов");
-  });
-
-  beforeEach(function() {
-    alert("Вход в тест");
-  });
-  afterEach(function() {
-    alert("Выход из теста");
-  });
-
-  it('тест 1', function() {
-    alert('1');
-  });
-  it('тест 2', function() {
-    alert('2');
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/index.html b/1-js/3-writing-js/4-testing/index.html
deleted file mode 100755
index dac2c912..00000000
--- a/1-js/3-writing-js/4-testing/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      /* код функции, пока что пусто */
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-1.view/index.html b/1-js/3-writing-js/4-testing/pow-1.view/index.html
deleted file mode 100755
index dac2c912..00000000
--- a/1-js/3-writing-js/4-testing/pow-1.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      /* код функции, пока что пусто */
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-1.view/test.js b/1-js/3-writing-js/4-testing/pow-1.view/test.js
deleted file mode 100755
index 582287f9..00000000
--- a/1-js/3-writing-js/4-testing/pow-1.view/test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-describe("pow", function() {
-
-  it("возводит в n-ю степень", function() {
-    assert.equal(pow(2, 3), 8);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-2.view/index.html b/1-js/3-writing-js/4-testing/pow-2.view/index.html
deleted file mode 100755
index 57aebaf7..00000000
--- a/1-js/3-writing-js/4-testing/pow-2.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      return 8;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-2.view/test.js b/1-js/3-writing-js/4-testing/pow-2.view/test.js
deleted file mode 100755
index a14e3afa..00000000
--- a/1-js/3-writing-js/4-testing/pow-2.view/test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-describe("pow", function() {
-
-  it("при возведении 2 в 3ю степень результат 8", function() {
-    assert.equal(pow(2, 3), 8);
-  });
-
-  it("при возведении 3 в 4ю степень равен 81", function() {
-    assert.equal(pow(3, 4), 81);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-3.view/index.html b/1-js/3-writing-js/4-testing/pow-3.view/index.html
deleted file mode 100755
index 68d14a3f..00000000
--- a/1-js/3-writing-js/4-testing/pow-3.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      var result = 1;
-
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-
-      return result;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-3.view/test.js b/1-js/3-writing-js/4-testing/pow-3.view/test.js
deleted file mode 100755
index 43457d87..00000000
--- a/1-js/3-writing-js/4-testing/pow-3.view/test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-describe("pow", function() {
-
-  function makeTest(x) {
-    var expected = x * x * x;
-    it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-      assert.equal(pow(x, 3), expected);
-    });
-  }
-
-  for (var x = 1; x <= 5; x++) {
-    makeTest(x);
-  }
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-4.view/index.html b/1-js/3-writing-js/4-testing/pow-4.view/index.html
deleted file mode 100755
index 68d14a3f..00000000
--- a/1-js/3-writing-js/4-testing/pow-4.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      var result = 1;
-
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-
-      return result;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-4.view/test.js b/1-js/3-writing-js/4-testing/pow-4.view/test.js
deleted file mode 100755
index 0e03f0fe..00000000
--- a/1-js/3-writing-js/4-testing/pow-4.view/test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  // ...
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-full.view/index.html b/1-js/3-writing-js/4-testing/pow-full.view/index.html
deleted file mode 100755
index a0f4faaf..00000000
--- a/1-js/3-writing-js/4-testing/pow-full.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      if (n < 0) return NaN;
-      if (Math.round(n) != n) return NaN;
-      if (n == 0 && x == 0) return NaN;
-
-      var result = 1;
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-      return result;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-full.view/test.js b/1-js/3-writing-js/4-testing/pow-full.view/test.js
deleted file mode 100755
index d2b9a771..00000000
--- a/1-js/3-writing-js/4-testing/pow-full.view/test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
-  });
-
-  describe("любое число, кроме нуля, в степени 0 равно 1", function() {
-
-    function makeTest(x) {
-      it("при возведении " + x + " в степень 0 результат: 1", function() {
-        assert.equal(pow(x, 0), 1);
-      });
-    }
-
-    for (var x = -5; x <= 5; x += 2) {
-      makeTest(x);
-    }
-
-  });
-
-  it("ноль в нулевой степени даёт NaN", function() {
-    assert(isNaN(pow(0, 0)), "0 в степени 0 не NaN");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-min.view/index.html b/1-js/3-writing-js/4-testing/pow-min.view/index.html
deleted file mode 100755
index 57aebaf7..00000000
--- a/1-js/3-writing-js/4-testing/pow-min.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      return 8;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-min.view/test.js b/1-js/3-writing-js/4-testing/pow-min.view/test.js
deleted file mode 100755
index 582287f9..00000000
--- a/1-js/3-writing-js/4-testing/pow-min.view/test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-describe("pow", function() {
-
-  it("возводит в n-ю степень", function() {
-    assert.equal(pow(2, 3), 8);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html b/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html
deleted file mode 100755
index 5c0dd157..00000000
--- a/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      var result = 1;
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-      return result;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js b/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js
deleted file mode 100755
index 61453678..00000000
--- a/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan.view/index.html b/1-js/3-writing-js/4-testing/pow-nan.view/index.html
deleted file mode 100755
index 5c0dd157..00000000
--- a/1-js/3-writing-js/4-testing/pow-nan.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <!-- подключаем стили Mocha, для отображения результатов -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
-  <!-- подключаем библиотеку Mocha -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
-  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
-  <script>
-    mocha.setup('bdd');
-  </script>
-
-  <!-- подключаем chai -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
-  <!-- в chai есть много всего, выносим assert в глобальную область -->
-  <script>
-    var assert = chai.assert;
-  </script>
-</head>
-
-<body>
-
-  <script>
-    function pow(x, n) {
-      var result = 1;
-      for (var i = 0; i < n; i++) {
-        result *= x;
-      }
-      return result;
-    }
-  </script>
-
-  <!-- в этом скрипте находятся спеки -->
-  <script src="test.js"></script>
-
-  <!-- в элементе с id="mocha" будут результаты тестов -->
-  <div id="mocha"></div>
-
-  <!-- запустить тесты! -->
-  <script>
-    mocha.run();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan.view/test.js b/1-js/3-writing-js/4-testing/pow-nan.view/test.js
deleted file mode 100755
index a0c37e0b..00000000
--- a/1-js/3-writing-js/4-testing/pow-nan.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe("pow", function() {
-
-  describe("возводит x в степень n", function() {
-
-    function makeTest(x) {
-      var expected = x * x * x;
-      it("при возведении " + x + " в степень 3 результат: " + expected, function() {
-        assert.equal(pow(x, 3), expected);
-      });
-    }
-
-    for (var x = 1; x <= 5; x++) {
-      makeTest(x);
-    }
-
-  });
-
-  it("при возведении в отрицательную степень результат NaN", function() {
-    assert(isNaN(pow(2, -1)));
-  });
-
-  it("при возведении в дробную степень результат NaN", function() {
-    assert(isNaN(pow(2, 1.5)));
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/3-writing-js/index.md b/1-js/3-writing-js/index.md
deleted file mode 100644
index 96320c44..00000000
--- a/1-js/3-writing-js/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Качество кода
-
-Для того, чтобы код был качественным, необходимы как минимум:
-<ol>
-<li>Умение отладить код и поправить ошибки.</li>
-<li>Хороший стиль кода.</li>
-<li>Тестировать код, желательно -- в автоматическом режиме.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-properties-and-methods/article.md b/1-js/4-data-structures/1-properties-and-methods/article.md
deleted file mode 100644
index 2deef52d..00000000
--- a/1-js/4-data-structures/1-properties-and-methods/article.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Введение в методы и свойства
-
-Все значения в JavaScript, за исключением `null` и `undefined`, содержат набор вспомогательных функций и значений, доступных "через точку".
-
-Такие функции называют "методами", а значения -- "свойствами". Здесь мы рассмотрим основы использования свойств и методов.
-
-[cut]
-
-## Свойство str.length
-
-У строки есть *свойство* `length`, содержащее длину:
-
-```js
-//+ run
-alert( "Привет, мир!".length ); // 12
-```
-
-Можно и записать строку в переменную, а потом запросить её свойство:
-
-```js
-//+ run
-var str = "Привет, мир!";
-alert( str.length ); // 12
-```
-
-## Метод str.toUpperCase()
-
-Также у строк есть *метод* `toUpperCase()`, который возвращает строку в верхнем регистре:
-
-```js
-//+ run
-var hello = "Привет, мир!";
-
-*!*
-alert( hello.toUpperCase() ); // "ПРИВЕТ, МИР!"
-*/!*
-```
-
-[warn header="Вызов метода -- через круглые скобки!"]
-
-Обратите внимание, для вызова метода обязательно нужны круглые скобки.
-
-Посмотрите, например, результат обращения к `toUpperCase` без скобок:
-
-```js
-//+ run
-var hello = "Привет";
-
-*!*
-alert( hello.toUpperCase ); // function...
-*/!*
-```
-
-Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. При обращении без скобок мы получим саму эту функцию. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`.
-
-А чтобы получить результат -- нужно произвести её вызов, добавив скобки:
-
-```js
-//+ run
-var hello = "Привет";
-
-*!*
-alert( hello.toUpperCase() ); // ПРИВЕТ
-*/!*
-```
-
-[/warn]
-
-Более подробно с различными свойствами и методами строк мы познакомимся в главе [](/string).
-
-## Метод num.toFixed(n)
-
-Есть методы и у чисел, например `num.toFixed(n)`. Он округляет число `num` до `n` знаков после запятой, при необходимости добивает нулями до данной длины и возвращает в виде строки (удобно для форматированного вывода):
-
-```js
-//+ run
-var n = 12.345;
-
-alert( n.toFixed(2) ); // "12.35"
-alert( n.toFixed(0) ); // "12"
-alert( n.toFixed(5) ); // "12.34500"
-```
-
-Детали работы `toFixed` разобраны в главе [](/number).
-
-[warn header="Обращение к методам чисел"]
-К методу числа можно обратиться и напрямую:
-
-```js
-//+ run
-alert( 12.34.toFixed(1) ); // 12.3
-```
-
-...Но если число целое, то будет проблема:
-
-```js
-//+ run no-beautify
-alert(12.toFixed(1)); // ошибка!
-```
-
-Ошибка произойдёт потому, что JavaScript ожидает десятичную дробь после точки.
-
-Это -- особенность синтаксиса JavaScript. Вот так -- будет работать:
-
-```js
-//+ run
-alert( 12..toFixed(1) ); // 12.0
-```
-
-[/warn]
-
-## Итого
-
-В этой главе мы познакомились с методами и свойствами.
-
-Почти все значения в JavaScript, кроме разве что `null` и `undefined` имеют их и предоставляют через них разный функционал.
-
-Далее мы подробно разберём основные свойства и методы структур данных в JavaScript.
diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md b/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md
deleted file mode 100644
index 492f3c7a..00000000
--- a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Узнать количество реально переданных аргументов можно по значению `arguments.length`:
-
-```js
-//+ run
-function f(x) {
-  alert( arguments.length ? 1 : 0 );
-}
-
-f(undefined);
-f();
-```
-
diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md b/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md
deleted file mode 100644
index bc3afc77..00000000
--- a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Проверка на аргумент-undefined
-
-[importance 5]
-
-Как в функции отличить отсутствующий аргумент от `undefined`?
-
-```js
-function f(x) {
-  // ..ваш код..
-  // выведите 1, если первый аргумент есть, и 0 - если нет
-}
-
-f(undefined); // 1
-f(); // 0
-```
-
diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md b/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md
deleted file mode 100644
index 1cc6573b..00000000
--- a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-```js
-//+ run
-function sum() {
-  var result = 0;
-
-  for (var i = 0; i < arguments.length; i++) {
-    result += arguments[i];
-  }
-
-  return result;
-}
-
-alert( sum() ); // 0
-alert( sum(1) ); // 1
-alert( sum(1, 2) ); // 3
-alert( sum(1, 2, 3) ); // 6
-alert( sum(1, 2, 3, 4) ); // 10
-```
-
diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md b/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md
deleted file mode 100644
index 771e3d76..00000000
--- a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Сумма аргументов
-
-[importance 5]
-
-Напишите функцию `sum(...)`, которая возвращает сумму всех своих аргументов:
-
-```js
-sum() = 0
-sum(1) = 1
-sum(1, 2) = 3
-sum(1, 2, 3) = 6
-sum(1, 2, 3, 4) = 10
-```
-
diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/article.md b/1-js/4-data-structures/10-arguments-pseudoarray/article.md
deleted file mode 100644
index 12bf784e..00000000
--- a/1-js/4-data-structures/10-arguments-pseudoarray/article.md
+++ /dev/null
@@ -1,428 +0,0 @@
-# Псевдомассив аргументов "arguments"
-
-В JavaScript любая функция может быть вызвана с произвольным количеством аргументов. 
-
-[cut]
-Например:
-
-```js
-//+ run no-beautify
-function go(a,b) {
-  alert("a="+a+", b="+b);
-}
-
-go(1);     // a=1, b=undefined
-go(1,2);   // a=1, b=2
-go(1,2,3); // a=1, b=2, третий аргумент не вызовет ошибку
-```
-
-[smart header="В JavaScript нет \"перегрузки\" функций"]
-
-В некоторых языках программист может создать две функции с одинаковым именем, но разным набором аргументов, а при вызове интерпретатор сам выберет нужную:
-
-```js
-function log(a) {
-  ...
-}
-
-function log(a, b, c) {
-  ...
-}
-
-*!*
-log(a); // вызовется первая функция
-log(a, b, c); // вызовется вторая функция
-*/!*
-```
-
-Это называется "полиморфизмом функций" или "перегрузкой функций". В JavaScript ничего подобного нет.
-
-**Может быть только одна функция с именем `log`, которая вызывается с любыми аргументами.** 
-
-А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.
-
-В примере выше второе объявление `log` просто переопределит первое.
-[/smart]
-
-## Доступ к "лишним" аргументам  
-
-Как получить значения аргументов, которых нет в списке параметров?
-
-Доступ к ним осуществляется через "псевдо-массив" <a href="https://developer.mozilla.org/en/JavaScript/Reference/functions_and_function_scope/arguments">arguments</a>. 
-
-Он содержит список аргументов по номерам: `arguments[0]`, `arguments[1]`..., а также свойство `length`.
-
-Например, выведем список всех аргументов:
-
-```js
-//+ run
-function sayHi() {
-  for (var i = 0; i < arguments.length; i++) {
-    alert( "Привет, " + arguments[i] );
-  }
-}
-
-sayHi("Винни", "Пятачок"); // 'Привет, Винни', 'Привет, Пятачок'
-```
-
-Все параметры находятся в `arguments`, даже если они есть в списке. Код выше сработал бы также, будь функция объявлена `sayHi(a,b,c)`. 
-
-
-[warn header="Связь между `arguments` и параметрами"]
-
-**В старом стандарте JavaScript псевдо-массив `arguments` и переменные-параметры ссылаются на одни и те же значения.**
-
-В результате изменения `arguments` влияют на параметры и наоборот. 
-
-Например:
-
-```js
-//+ run
-function f(x) {
-  arguments[0] = 5; // меняет переменную x
-  alert( x ); // 5
-}
-
-f(1);
-```
-
-Наоборот:
-
-```js
-//+ run
-function f(x) {
-  x = 5;
-  alert( arguments[0] ); // 5, обновленный x 
-}
-
-f(1);
-```
-
-В современной редакции стандарта это поведение изменено. Аргументы отделены от локальных переменных:
-
-```js
-//+ run
-function f(x) {
-  "use strict"; // для браузеров с поддержкой строгого режима
-
-  arguments[0] = 5;
-  alert( x ); // не 5, а 1! Переменная "отвязана" от arguments
-}
-
-f(1);
-```
-
-**Если вы не используете строгий режим, то чтобы переменные не менялись "неожиданно", рекомендуется никогда не изменять `arguments`.** 
-[/warn]
-
-### arguments -- это не массив
-
-Частая ошибка новичков -- попытка применить методы `Array` к `arguments`. Это невозможно:
-
-```js
-//+ run
-function sayHi() {
-  var a = arguments.shift(); // ошибка! нет такого метода!
-}
-
-sayHi(1);
-```
-
-Дело в том, что `arguments` -- это не массив `Array`. 
-
-В действительности, это обычный объект, просто ключи числовые и есть `length`. На этом сходство заканчивается. Никаких особых методов у него нет, и методы массивов он тоже не поддерживает.  
-
-Впрочем, никто не мешает сделать обычный массив из `arguments`, например так:
-
-```js
-//+ run
-var args = [];
-for (var i = 0; i < arguments.length; i++) {
-  args[i] = arguments[i];
-}
-```
-
-Такие объекты иногда называют *"коллекциями"* или *"псевдомассивами"*.
-
-## Пример: копирование свойств copy(dst, src1, src2...) [#copy]
-
-Иногда встаёт задача -- скопировать в существующий объект свойства из одного или нескольких других. 
-
-Напишем для этого функцию `copy`. Она будет работать с любым числом аргументов, благодаря использованию `arguments`.
-
-Синтаксис:
-<dl>
-<dt>copy(dst, src1, src2...)</dt>
-<dd>Копирует свойства из объектов `src1, src2,...` в объект `dst`. Возвращает получившийся объект.</dd>
-</dl>
-
-Использование:
-
-<ul>
-<li>Для объединения нескольких объектов в один:
-
-```js
-//+ run
-var vasya = {
-  age: 21,
-  name: 'Вася',
-  surname: 'Петров'
-};
-
-var user = {
-  isAdmin: false,
-  isEmailConfirmed: true
-};
-
-var student = {
-  university: 'My university'
-};
-
-// добавить к vasya свойства из user и student
-*!*
-copy(vasya, user, student);
-*/!*
-
-alert( vasya.isAdmin ); // false
-alert( vasya.university ); // My university
-```
-
-</li>
-<li>Для создания копии объекта `user`:
-
-```js
-// скопирует все свойства в пустой объект
-var userClone = copy({}, user);
-```
-
-Такой "клон" объекта может пригодиться там, где мы хотим изменять его свойства, при этом не трогая исходный объект `user`.
-
-В нашей реализации мы будем копировать только свойства первого уровня, то есть вложенные объекты как-то особым образом не обрабатываются. Впрочем, её можно расширить.</li>
-</ul>
-
-А вот и реализация:
-
-```js
-//+ autorun
-function copy() {
-  var dst = arguments[0];
-
-  for (var i = 1; i < arguments.length; i++) {
-    var arg = arguments[i];
-    for (var key in arg) {
-      dst[key] = arg[key];
-    }
-  }
-
-  return dst;
-}
-```
-
-Здесь первый аргумент `copy` -- это объект, в который нужно копировать, он назван `dst`. Для упрощения доступа к нему можно указать его прямо в объявлении функции:
-
-```js
-*!*
-function copy(dst) {
-*/!*
-  // остальные аргументы остаются безымянными
-  for (var i = 1; i < arguments.length; i++) {
-    var arg = arguments[i];
-    for (var key in arg) {
-      dst[key] = arg[key];
-    }
-  }
-
-  return dst;
-}
-```
-
-### Аргументы по умолчанию через ||
-
-Если функция вызвана с меньшим количеством аргументов, чем указано, то отсутствующие аргументы считаются равными `undefined`.
-
-Зачастую в случае отсутствия аргумента мы хотим присвоить ему некоторое "стандартное" значение или, иначе говоря,  значение "по умолчанию". Это можно удобно сделать при помощи оператора логическое ИЛИ `||`.
-
-Например, функция `showWarning`, описанная ниже, должна показывать предупреждение. Для этого она принимает ширину `width`, высоту `height`, заголовок `title` и содержимое `contents`, но большая часть этих аргументов необязательна:
-
-```js
-function showWarning(width, height, title, contents) {
-  width = width || 200; // если не указана width, то width = 200
-  height = height || 100; // если нет height, то height = 100
-  title = title || "Предупреждение";
-
-  //...
-}
-```
-
-Это отлично работает в тех ситуациях, когда "нормальное" значение параметра в логическом контексте отлично от `false`. В коде выше, при передаче `width = 0` или `width = null`, оператор ИЛИ заменит его на значение по умолчанию.
-
-А что, если мы хотим использовать значение по умолчанию только если `width === undefined`? В этом случае оператор ИЛИ уже не подойдёт, нужно поставить явную проверку:
-
-```js
-function showWarning(width, height, title, contents) {
-  if (width === undefined) width = 200;
-  if (height === undefined) height = 100;
-  if (title === undefined) title = "Предупреждение";
-
-  //...
-}
-```
-
-## Устаревшее свойство arguments.callee [#arguments-callee]
-
-[warn header="Используйте NFE вместо `arguments.callee`"]
-Это свойство устарело, при `use strict` оно не работает.
-
-Единственная причина, по которой оно тут -- это то, что его можно встретить в старом коде, поэтому о нём желательно знать.
-
-Современная спецификация рекомендует использовать ["именованные функциональные выражения (NFE)"](#functions-nfe). 
-
-[/warn]
-
-В старом стандарте JavaScript объект `arguments` не только хранил список аргументов, но и содержал в свойстве `arguments.callee` ссылку на функцию, которая выполняется в данный момент. 
-
-Например:
-
-```js
-//+ run
-function f() {
-  alert( arguments.callee === f ); // true
-}
-
-f();
-```
-
-Эти два примера будут работать одинаково:
-
-```js
-// подвызов через NFE
-var factorial = function f(n) {  
-  return n==1 ? 1 : n**!*f(n-1)*/!*;
-};
-
-// подвызов через arguments.callee
-var factorial = function(n) {  
-  return n==1 ? 1 : n**!*arguments.callee(n-1)*/!*;
-};
-```
-
-В учебнике мы его использовать не будем, оно приведено для общего ознакомления.
-
-### arguments.callee.caller   
-
-Устаревшее свойство `arguments.callee.caller` хранит ссылку на *функцию, которая вызвала данную*.
-
-[warn header="Это свойство тоже устарело"]
-Это свойство было в старом стандарте, при `use strict` оно не работает, как и `arguments.callee`. 
-
-Также ранее существовало более короткое свойство `arguments.caller`. Но это уже раритет, оно даже не кросс-браузерное. А вот свойство `arguments.callee.caller` поддерживается везде, если не использован `use strict`, поэтому в старом коде оно встречается.
-[/warn]
- 
-Пример работы:
-
-```js
-//+ run
-f1();
-
-function f1() {
-  alert( arguments.callee.caller ); // null, меня вызвали из глобального кода
-  f2();
-}
-
-function f2() {
-  alert( arguments.callee.caller ); // f1, функция, из которой меня вызвали
-  f3();
-}
-
-function f3() {
-  alert( arguments.callee.caller ); // f2, функция, из которой меня вызвали
-}
-```
-
-В учебнике мы это свойство также не будем использовать.
-
-
-## "Именованные аргументы"
-
-*Именованные аргументы* -- альтернативная техника работы с аргументами, которая вообще не использует `arguments`.
-
-Некоторые языки программирования позволяют передать параметры как-то так: `f(width=100, height=200)`, то есть по именам, а что не передано, тех аргументов нет. Это очень удобно в тех случаях, когда аргументов много, сложно запомнить их порядок и большинство вообще не надо передавать, по умолчанию подойдёт. 
-
-Такая ситуация часто встречается в компонентах интерфейса. Например, у "меню" может быть масса настроек отображения, которые можно "подкрутить" но обычно нужно передать всего один-два главных параметра, а остальные возьмутся по умолчанию.
- 
-В JavaScript для этих целей используется передача аргументов в виде объекта, а в его свойствах мы передаём параметры.
-
-Получается так:
-
-```js
-function showWarning(options) {
-  var width = options.width || 200; // по умолчанию
-  var height = options.height || 100;
-
-  var title = options.title || "Предупреждение";
-
-  // ...
-}
-
-showWarning({
-```
-
-Вызвать такую функцию очень легко. Достаточно передать объект аргументов, указав в нем только нужные:
-
-```js
-showWarning({
-  contents: "Вы вызвали функцию" // и всё понятно!
-});
-```
-
-Сравним это с передачей аргументов через список:
-
-```js
-showWarning(null, null, "Предупреждение!");
-// мысль программиста "а что это за null, null в начале? ох, надо глядеть описание функции"
-```
-
-Не правда ли, объект -- гораздо проще и понятнее?
-
-Еще один бонус кроме красивой записи -- возможность повторного использования объекта аргументов:
-
-```js
-var opts = {
-  width: 400,
-  height: 200,
-  contents: "Текст"
-};
-
-showWarning(opts);
-
-opts.contents = "Другой текст";
-
-*!*
-showWarning(opts); // вызвать с новым текстом, без копирования других аргументов
-*/!*
-```
-
-Именованные аргументы применяются во многих JavaScript-фреймворках.
-
-
-
-
-## Итого 
-
-<ul>
-<li>Полный список аргументов, с которыми вызвана функция, доступен через `arguments`.</li>
-<li>Это псевдомассив, то есть объект, который похож на массив, в нём есть нумерованные свойства и `length`, но методов массива у него нет.</li>
-<li>В старом стандарте было свойство `arguments.callee` со ссылкой на текущую функцию, а также свойство `arguments.callee.caller`, содержащее ссылку на функцию, которая вызвала данную. Эти свойства устарели, при `use strict` обращение к ним приведёт к ошибке.</li>
-<li>Для указания аргументов по умолчанию, в тех случаях, когда они заведомо не `false`, удобен оператор `||`.</li>
-</ul>
-
-В тех случаях, когда возможных аргументов много и, в особенности, когда большинство их имеют значения по умолчанию, вместо работы с `arguments` организуют передачу данных через объект, который как правило называют `options`.
-
-Возможен и гибридный подход, при котором первый аргумент обязателен, а второй -- `options`, который содержит всевозможные дополнительные параметры:
-
-```js
-function showMessage(text, options) {
-  // показать сообщение text, настройки показа указаны в options
-}
-```
-
diff --git a/1-js/4-data-structures/11-datetime/1-new-date/solution.md b/1-js/4-data-structures/11-datetime/1-new-date/solution.md
deleted file mode 100644
index 6ae34f4f..00000000
--- a/1-js/4-data-structures/11-datetime/1-new-date/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-Дата в местной временной зоне создается при помощи `new Date`.
-
-Месяцы начинаются с нуля, так что февраль имеет номер 1. Параметры можно указывать с точностью до минут:
-
-```js
-//+ run
-var d = new Date(2012, 1, 20, 3, 12);
-alert( d );
-```
-
diff --git a/1-js/4-data-structures/11-datetime/1-new-date/task.md b/1-js/4-data-structures/11-datetime/1-new-date/task.md
deleted file mode 100644
index c96882ac..00000000
--- a/1-js/4-data-structures/11-datetime/1-new-date/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Создайте дату
-
-[importance 5]
-
-Создайте объект `Date` для даты: 20 февраля 2012 года, 3 часа 12 минут. 
-
-Временная зона -- местная. Выведите его на экран.
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js b/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js
deleted file mode 100644
index b007feda..00000000
--- a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function getWeekDay(date) {
-  var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
-
-  return days[date.getDay()];
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js b/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js
deleted file mode 100644
index 5b57b663..00000000
--- a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-describe("getWeekDay", function() {
-  it("3 января 2014 - пятница", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 3)), 'пт');
-  });
-
-  it("4 января 2014 - суббота", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 4)), 'сб');
-  });
-
-  it("5 января 2014 - воскресенье", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 5)), 'вс');
-  });
-
-  it("6 января 2014 - понедельник", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 6)), 'пн');
-  });
-
-  it("7 января 2014 - вторник", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 7)), 'вт');
-  });
-
-  it("8 января 2014 - среда", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 8)), 'ср');
-  });
-
-  it("9 января 2014 - четверг", function() {
-    assert.equal(getWeekDay(new Date(2014, 0, 9)), 'чт');
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/solution.md b/1-js/4-data-structures/11-datetime/2-get-week-day/solution.md
deleted file mode 100644
index 29c3e37a..00000000
--- a/1-js/4-data-structures/11-datetime/2-get-week-day/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-Метод `getDay()` позволяет получить номер дня недели, начиная с воскресенья. 
-
-Запишем имена дней недели в массив, чтобы можно было их достать по номеру:
-
-```js
-//+ run
-function getWeekDay(date) {
-  var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
-
-  return days[date.getDay()];
-}
-
-var date = new Date(2014, 0, 3); // 3 января 2014
-alert( getWeekDay(date) ); // 'пт'
-```
-
-В современных браузерах можно использовать и `toLocaleString`:
-```js
-//+ run
-var date = new Date(2014, 0, 3); // 3 января 2014
-alert( date.toLocaleString('ru', {weekday: 'short'}) ); // 'Пт'
-```
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/task.md b/1-js/4-data-structures/11-datetime/2-get-week-day/task.md
deleted file mode 100644
index 1918fdbc..00000000
--- a/1-js/4-data-structures/11-datetime/2-get-week-day/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Имя дня недели
-
-[importance 5]
-
-Создайте функцию `getWeekDay(date)`, которая выводит текущий день недели в коротком формате 'пн', 'вт',  ... 'вс'.
-
-Например:
-
-```js
-//+ no-beautify
-var date = new Date(2012,0,3);  // 3 января 2012 
-alert( getWeekDay(date) );      // Должно вывести 'вт'
-```
-
diff --git a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js b/1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js
deleted file mode 100644
index 429ce1e9..00000000
--- a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function getLocalDay(date) {
-
-  var day = date.getDay();
-
-  if (day == 0) { // день 0 становится 7
-    day = 7;
-  }
-
-  return day;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js b/1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js
deleted file mode 100644
index 940be025..00000000
--- a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-describe("getLocalDay возвращает день недели", function() {
-  it("3 января 2014 - пятница", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 3)), 5);
-  });
-
-  it("4 января 2014 - суббота", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 4)), 6);
-  });
-
-  it("5 января 2014 - воскресенье", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 5)), 7);
-  });
-
-  it("6 января 2014 - понедельник", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 6)), 1);
-  });
-
-  it("7 января 2014 - вторник", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 7)), 2);
-  });
-
-  it("8 января 2014 - среда", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 8)), 3);
-  });
-
-  it("9 января 2014 - четверг", function() {
-    assert.equal(getLocalDay(new Date(2014, 0, 9)), 4);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/3-weekday/solution.md b/1-js/4-data-structures/11-datetime/3-weekday/solution.md
deleted file mode 100644
index 80508b2b..00000000
--- a/1-js/4-data-structures/11-datetime/3-weekday/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Решение - в использовании встроенной функции `getDay`. Она полностью подходит нашим целям, но для воскресенья возвращает 0 вместо 7:
-
-```js
-//+ run
-function getLocalDay(date) {
-
-  var day = date.getDay();
-
-  if (day == 0) { // день 0 становится 7
-    day = 7;
-  }
-
-  return day;
-}
-
-alert( getLocalDay(new Date(2012, 0, 3)) ); // 2
-```
-
-Если удобнее, чтобы день недели начинался с нуля, то можно возвращать в функции `day - 1`, тогда дни будут от 0 (пн) до 6(вс).
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/3-weekday/task.md b/1-js/4-data-structures/11-datetime/3-weekday/task.md
deleted file mode 100644
index 9f2d264e..00000000
--- a/1-js/4-data-structures/11-datetime/3-weekday/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# День недели в европейской нумерации
-
-[importance 5]
-
-Напишите функцию, `getLocalDay(date)` которая возвращает день недели для даты `date`.
-
-День нужно возвратить в европейской нумерации, т.е. понедельник имеет номер 1, вторник номер 2, ..., воскресенье - номер 7.
-
-```js
-//+ no-beautify
-var date = new Date(2012, 0, 3);  // 3 янв 2012 
-alert( getLocalDay(date) );       // вторник, выведет 2
-```
-
diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js b/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js
deleted file mode 100644
index f63438c6..00000000
--- a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function getDateAgo(date, days) {
-  var dateCopy = new Date(date);
-
-  dateCopy.setDate(date.getDate() - days);
-  return dateCopy.getDate();
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js b/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js
deleted file mode 100644
index b8d25bf5..00000000
--- a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-describe("getDateAgo", function() {
-
-  it("1 день до 02.01.2015 -> число 1", function() {
-    assert.equal(getDateAgo(new Date(2015, 0, 2), 1), 1);
-  });
-
-
-  it("2 день до 02.01.2015 -> число 31", function() {
-    assert.equal(getDateAgo(new Date(2015, 0, 2), 2), 31);
-  });
-
-  it("100 дней от 02.01.2015 -> число 24", function() {
-    assert.equal(getDateAgo(new Date(2015, 0, 2), 100), 24);
-  });
-
-  it("365 дней от 02.01.2015 -> число 2", function() {
-    assert.equal(getDateAgo(new Date(2015, 0, 2), 365), 2);
-  });
-
-  it("не меняет переданный объект Date", function() {
-    var date = new Date(2015, 0, 2);
-    var dateCopy = new Date(date);
-    getDateAgo(dateCopy, 100);
-    assert.equal(date.getTime(), dateCopy.getTime());
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md b/1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md
deleted file mode 100644
index aa1bcb0b..00000000
--- a/1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Из даты `date` нужно вычесть указанное количество дней.  Это просто:
-
-```js
-function getDateAgo(date, days) {
-  date.setDate(date.getDate() - days);
-  return date.getDate();
-}
-```
-
-Ситуацию осложняет то, что исходный объект даты не должен меняться. Это разумное требование, оно позволит избежать сюрпризов.
-
-Для того чтобы ему соответствовать, создадим копию объекта даты:
-
-```js
-//+ run
-function getDateAgo(date, days) {
-  var dateCopy = new Date(date);
-
-  dateCopy.setDate(date.getDate() - days);
-  return dateCopy.getDate();
-}
-
-var date = new Date(2015, 0, 2);
-
-alert( getDateAgo(date, 1) ); // 1, (1 января 2015)
-alert( getDateAgo(date, 2) ); // 31, (31 декабря 2014)
-alert( getDateAgo(date, 365) ); // 2, (2 января 2014)
-```
-
diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/task.md b/1-js/4-data-structures/11-datetime/4-get-date-ago/task.md
deleted file mode 100644
index 0db7847b..00000000
--- a/1-js/4-data-structures/11-datetime/4-get-date-ago/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# День указанное количество дней назад
-
-[importance 4]
-
-Создайте функцию `getDateAgo(date, days)`, которая возвращает число, которое было `days` дней назад от даты `date`.
-
-Например, для 2 января 2015:
-
-```js
-var date = new Date(2015, 0, 2);
-
-alert( getDateAgo(date, 1) ); // 1, (1 января 2015)
-alert( getDateAgo(date, 2) ); // 31, (31 декабря 2014)
-alert( getDateAgo(date, 365) ); // 2, (2 января 2014)
-```
-
-P.S. Важная деталь: в процессе вычислений функция не должна менять переданный ей объект `date`. 
diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js b/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js
deleted file mode 100644
index 4463d1d7..00000000
--- a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js
+++ /dev/null
@@ -1,4 +0,0 @@
-function getLastDayOfMonth(year, month) {
-  var date = new Date(year, month + 1, 0);
-  return date.getDate();
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js b/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js
deleted file mode 100644
index f345d490..00000000
--- a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-describe("getLastDayOfMonth", function() {
-  it("последний день 01.01.2012 - 31", function() {
-    assert.equal(getLastDayOfMonth(2012, 0), 31);
-  });
-
-  it("последний день 01.02.2012 - 29 (високосный год)", function() {
-    assert.equal(getLastDayOfMonth(2012, 1), 29);
-  });
-
-  it("последний день 01.02.2013 - 28", function() {
-    assert.equal(getLastDayOfMonth(2013, 1), 28);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md b/1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md
deleted file mode 100644
index 3bbca8c5..00000000
--- a/1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Создадим дату из следующего месяца, но день не первый, а "нулевой" (т.е. предыдущий):
-
-```js
-//+ run
-function getLastDayOfMonth(year, month) {
-  var date = new Date(year, month + 1, 0);
-  return date.getDate();
-}
-
-alert( getLastDayOfMonth(2012, 0) ); // 31
-alert( getLastDayOfMonth(2012, 1) ); // 29
-alert( getLastDayOfMonth(2013, 1) ); // 28
-```
-
diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md b/1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md
deleted file mode 100644
index 8f88e971..00000000
--- a/1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Последний день месяца?
-
-[importance 5]
-
-Напишите функцию `getLastDayOfMonth(year, month)`, которая возвращает последний день месяца.
-
-Параметры:
-<ul>
-<li>`year` -- 4-значный год, например 2012.</li>
-<li>`month` -- месяц от 0 до 11.</li>
-</ul>
-
-Например, `getLastDayOfMonth(2012, 1) = 29` (високосный год, февраль).
diff --git a/1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md b/1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md
deleted file mode 100644
index 1ecd8219..00000000
--- a/1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Для вывода достаточно сгенерировать объект `Date`, соответствующий началу дня, т.е. "сегодня" 00 часов 00 минут 00 секунд, и вычесть его из текущей даты.
-
-Полученная разница -- это как раз количество миллисекунд от начала дня, которое достаточно поделить на `1000`, чтобы получить секунды:
-
-```js
-//+ run
-function getSecondsToday() {
-  var now = new Date();
-
-  // создать объект из текущей даты, без часов-минут-секунд
-  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-
-  var diff = now - today; // разница в миллисекундах
-  return Math.round(diff / 1000); // перевести в секунды
-}
-
-alert( getSecondsToday() );
-```
-
-Альтернативное решение -- получить часы/минуты/секунды и преобразовать их все в секунды:
-
-```js
-//+ run
-function getSecondsToday() {
-  var d = new Date();
-  return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
-};
-```
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md b/1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md
deleted file mode 100644
index 0b8cde4a..00000000
--- a/1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Сколько секунд уже прошло сегодня?
-
-[importance 5]
-
-Напишите функцию `getSecondsToday()` которая возвращает, сколько секунд прошло с начала сегодняшнего дня.
-
-Например, если сейчас `10:00` и не было перехода на зимнее/летнее время, то:
-
-```js
-getSecondsToday() == 36000 // (3600 * 10)
-```
-
-Функция должна работать в любой день, т.е. в ней не должно быть конкретного значения сегодняшней даты.
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md b/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md
deleted file mode 100644
index 8aade9c9..00000000
--- a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Для получения оставшихся до конца дня миллисекунд нужно из "завтра 00ч 00мин 00сек" вычесть текущее время. 
-
-Чтобы сгенерировать "завтра" -- увеличим текущую дату на 1 день:
-
-```js
-//+ run
-function getSecondsToTomorrow() {
-  var now = new Date();
-
-  // создать объект из завтрашней даты, без часов-минут-секунд
-  var tomorrow = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*);
-
-  var diff = tomorrow - now; // разница в миллисекундах
-  return Math.round(diff / 1000); // перевести в секунды
-}
-```
diff --git a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md b/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md
deleted file mode 100644
index 93980a4f..00000000
--- a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Сколько секунд - до завтра?
-
-[importance 5]
-
-Напишите функцию `getSecondsToTomorrow()` которая возвращает, сколько секунд осталось до завтра.
-
-Например, если сейчас `23:00`, то:
-
-```js
-getSecondsToTomorrow() == 3600
-```
-
-P.S. Функция должна работать в любой день, т.е. в ней не должно быть конкретного значения сегодняшней даты.
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js b/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js
deleted file mode 100644
index e9498c8f..00000000
--- a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function formatDate(date) {
-
-  var dd = date.getDate();
-  if (dd < 10) dd = '0' + dd;
-
-  var mm = date.getMonth() + 1;
-  if (mm < 10) mm = '0' + mm;
-
-  var yy = date.getFullYear() % 100;
-  if (yy < 10) yy = '0' + yy;
-
-  return dd + '.' + mm + '.' + yy;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js b/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js
deleted file mode 100644
index 79c28e36..00000000
--- a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-describe("formatDate", function() {
-  it("правильно форматирует дату 30.01.14", function() {
-    assert.equal(formatDate(new Date(2014, 0, 30)), '30.01.14');
-  });
-
-  it("правильно форматирует дату 01.01.01", function() {
-    assert.equal(formatDate(new Date(2001, 0, 1)), '01.01.01');
-  });
-
-  it("правильно форматирует дату 01.01.00", function() {
-    assert.equal(formatDate(new Date(2000, 0, 1)), '01.01.00');
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md b/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md
deleted file mode 100644
index 7f752c89..00000000
--- a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md
+++ /dev/null
@@ -1,51 +0,0 @@
-Получим компоненты один за другим.
-<ol>
-<li>День можно получить как `date.getDate()`. При необходимости добавим ведущий ноль:
-
-```js
-var dd = date.getDate();
-if (dd < 10) dd = '0' + dd;
-```
-
-</li>
-<li>`date.getMonth()` возвратит месяц, начиная с нуля. Увеличим его на 1:
-
-```js
-var mm = date.getMonth() + 1; // месяц 1-12
-if (mm < 10) mm = '0' + mm;
-```
-
-</li>
-<li>`date.getFullYear()` вернет год в 4-значном формате. Чтобы сделать его двузначным - воспользуемся оператором взятия остатка `'%'`:
-
-```js
-var yy = date.getFullYear() % 100;
-if (yy < 10) yy = '0' + yy;
-```
-
-Заметим, что год, как и другие компоненты, может понадобиться дополнить нулем слева, причем возможно что `yy == 0` (например, 2000 год). При сложении со строкой `0+'0' == '00'`, так что будет все в порядке.
-</li>
-</ol>
-
-Полный код:
-
-```js
-//+ run
-function formatDate(date) {
-
-  var dd = date.getDate();
-  if (dd < 10) dd = '0' + dd;
-
-  var mm = date.getMonth() + 1;
-  if (mm < 10) mm = '0' + mm;
-
-  var yy = date.getFullYear() % 100;
-  if (yy < 10) yy = '0' + yy;
-
-  return dd + '.' + mm + '.' + yy;
-}
-
-var d = new Date(2014, 0, 30); // 30 Янв 2014
-alert( formatDate(d) ); // '30.01.14'
-```
-
diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md b/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md
deleted file mode 100644
index 820b0a4b..00000000
--- a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Вывести дату в формате дд.мм.гг
-
-[importance 3]
-
-Напишите функцию `formatDate(date)`, которая выводит дату `date` в формате `дд.мм.гг`:
-
-Например:
-
-```js
-var d = new Date(2014, 0, 30); // 30 января 2014
-alert( formatDate(d) ); // '30.01.14'
-```
-
-P.S. Обратите внимание, ведущие нули должны присутствовать, то есть 1 января 2001 должно быть 01.01.01, а не 1.1.1.
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js b/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js
deleted file mode 100644
index dd68b99a..00000000
--- a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js
+++ /dev/null
@@ -1,34 +0,0 @@
-function formatDate(date) {
-  var diff = new Date() - date; // разница в миллисекундах
-
-  if (diff < 1000) { // прошло менее 1 секунды
-    return 'только что';
-  }
-
-  var sec = Math.floor(diff / 1000); // округлить diff до секунд
-
-  if (sec < 60) {
-    return sec + ' сек. назад';
-  }
-
-  var min = Math.floor(diff / 60000); // округлить diff до минут
-  if (min < 60) {
-    return min + ' мин. назад';
-  }
-
-  // форматировать дату, с учетом того, что месяцы начинаются с 0
-  var d = date;
-  d = [
-    '0' + d.getDate(),
-    '0' + (d.getMonth() + 1),
-    '' + d.getFullYear(),
-    '0' + d.getHours(),
-    '0' + d.getMinutes()
-  ];
-
-  for (var i = 0; i < d.length; i++) {
-    d[i] = d[i].slice(-2);
-  }
-
-  return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js b/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js
deleted file mode 100644
index f3efc135..00000000
--- a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-describe("formatDate", function() {
-  it("выводит дату 1мс назад как \"только что\"", function() {
-    assert.equal(formatDate(new Date(new Date - 1)), 'только что');
-  });
-
-  it('выводит дату "30 сек назад"', function() {
-    assert.equal(formatDate(new Date(new Date - 30 * 1000)), "30 сек. назад");
-  });
-
-  it('выводит дату "5 мин назад"', function() {
-    assert.equal(formatDate(new Date(new Date - 5 * 60 * 1000)), "5 мин. назад");
-  });
-
-  it("выводит старую дату в формате дд.мм.гг чч:мм", function() {
-    assert.equal(formatDate(new Date(2014, 2, 1, 11, 22, 33)), "01.03.14 11:22");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md b/1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md
deleted file mode 100644
index fb842d36..00000000
--- a/1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md
+++ /dev/null
@@ -1,48 +0,0 @@
-Для того, чтобы узнать время от `date` до текущего момента - используем вычитание дат.
-
-```js
-//+ run
-function formatDate(date) {
-  var diff = new Date() - date; // разница в миллисекундах
-
-  if (diff < 1000) { // прошло менее 1 секунды
-    return 'только что';
-  }
-
-  var sec = Math.floor(diff / 1000); // округлить diff до секунд
-
-  if (sec < 60) {
-    return sec + ' сек. назад';
-  }
-
-  var min = Math.floor(diff / 60000); // округлить diff до минут
-  if (min < 60) {
-    return min + ' мин. назад';
-  }
-
-  // форматировать дату, с учетом того, что месяцы начинаются с 0
-  var d = date;
-  d = [
-    '0' + d.getDate(),
-    '0' + (d.getMonth() + 1),
-    '' + d.getFullYear(),
-    '0' + d.getHours(),
-    '0' + d.getMinutes()
-  ];
-
-  for (var i = 0; i < d.length; i++) {
-    d[i] = d[i].slice(-2);
-  }
-
-  return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');
-}
-
-alert( formatDate(new Date(new Date - 1)) ); // только что 
-
-alert( formatDate(new Date(new Date - 30 * 1000)) ); // 30 сек. назад
-
-alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // 5 мин. назад
-
-alert( formatDate(new Date(new Date - 86400 * 1000)) ); // вчерашняя дата в формате "дд.мм.гг чч:мм"
-```
-
diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/task.md b/1-js/4-data-structures/11-datetime/9-format-date-relative/task.md
deleted file mode 100644
index 1e13df91..00000000
--- a/1-js/4-data-structures/11-datetime/9-format-date-relative/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Относительное форматирование даты
-
-[importance 4]
-
-Напишите функцию `formatDate(date)`, которая форматирует дату `date` так:
-<ul>
-<li>Если со времени `date` прошло менее секунды, то возвращает `"только что"`.</li>
-<li>Иначе если со времени `date` прошло менее минуты, то `"n сек. назад"`.</li>
-<li>Иначе если прошло меньше часа, то `"m мин. назад"`.</li>
-<li>Иначе полная дата в формате `"дд.мм.гг чч:мм"`.</li>
-</ul>
-
-Например:
-
-```js
-function formatDate(date) { /* ваш код */ }
-
-alert( formatDate(new Date(new Date - 1)) ); // "только что"
-
-alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 сек. назад"
-
-alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 мин. назад"
-
-alert( formatDate(new Date(new Date - 86400 * 1000)) ); // вчерашняя дата в формате "дд.мм.гг чч:мм"
-```
-
diff --git a/1-js/4-data-structures/11-datetime/article.md b/1-js/4-data-structures/11-datetime/article.md
deleted file mode 100644
index b1066817..00000000
--- a/1-js/4-data-structures/11-datetime/article.md
+++ /dev/null
@@ -1,519 +0,0 @@
-# Дата и Время
-
-Для работы с датой и временем в JavaScript используются объекты [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/).
-
-[cut]
-## Создание
-
-Для создания нового объекта типа `Date` используется один из синтаксисов:
-<dl>
-<dt>`new Date()`</dt>
-<dd>Создает объект `Date` с текущей датой и временем:
-
-```js
-//+ run
-var now = new Date();
-alert( now );
-```
-
-</dd>
-<dt>`new Date(milliseconds)`</dt>
-<dd>Создает объект `Date`, значение которого равно количеству миллисекунд (1/1000 секунды), прошедших с 1 января 1970 года GMT+0.
-
-```js
-//+ run
-// 24 часа после 01.01.1970 GMT+0
-var Jan02_1970 = new Date(3600 * 24 * 1000);
-alert( Jan02_1970 );
-```
-
-</dd>
-<dt>`new Date(datestring)`</dt>
-<dd>Если единственный аргумент - строка, используется вызов `Date.parse` (см. далее) для чтения даты из неё.</dd>
-<dt>`new Date(year, month, date, hours, minutes, seconds, ms)`</dt>
-<dd>Дату можно создать, используя компоненты в местной временной зоне. Для этого формата обязательны только первые два аргумента. Отсутствующие параметры, начиная с `hours` считаются равными нулю, а `date` -- единице.
-
-Заметим:
-<ul>
-<li>Год `year` должен быть из 4 цифр.</li>
-<li>Отсчет месяцев `month` начинается с нуля 0.</li>
-</ul>
-
-Например:
-
-```js
-new Date(2011, 0, 1, 0, 0, 0, 0); // // 1 января 2011, 00:00:00
-new Date(2011, 0, 1); // то же самое, часы/секунды по умолчанию равны 0
-```
-
-Дата задана с точностью до миллисекунд:
-
-```js
-//+ run
-var date = new Date(2011, 0, 1, 2, 3, 4, 567);
-alert( date ); // 1.01.2011, 02:03:04.567
-```
-
-</dd>
-</dl>
-
-
-## Получение компонентов даты 
-
-Для доступа к компонентам даты-времени объекта `Date` используются следующие методы:
-<dl>
-<dt>`getFullYear()`</dt>
-<dd>Получить год(из 4 цифр)</dd>
-<dt>`getMonth()`</dt>
-<dd>Получить месяц, **от 0 до 11**.</dd>
-<dt>`getDate()`</dt>
-<dd>Получить число месяца, от 1 до 31.</dd>
-<dt>`getHours(), getMinutes(), getSeconds(), getMilliseconds()`</dt>
-<dd>Получить соответствующие компоненты.</dd>
-</dl>
-
-[warn header="Не `getYear()`, а `getFullYear()`"]
-Некоторые браузеры реализуют нестандартный метод `getYear()`. Где-то он возвращает только две цифры из года, где-то четыре. Так или иначе, этот метод отсутствует в стандарте JavaScript. Не используйте его. Для получения года есть `getFullYear()`.
-[/warn]
-
-Дополнительно можно получить день недели:
-<dl>
-<dt>`getDay()`</dt>
-<dd>Получить номер дня в неделе. Неделя в JavaScript начинается с воскресенья, так что результат будет числом **от 0(воскресенье) до 6(суббота)**.</dd>
-</dl>
-
-**Все методы, указанные выше, возвращают результат для местной временной зоны.**
-
-Существуют также UTC-варианты этих методов, возвращающие день, месяц, год и т.п. для зоны GMT+0 (UTC): `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. То есть, сразу после `"get"` вставляется `"UTC"`.
-
-Если ваше локальное время сдвинуто относительно UTC, то следующий код покажет разные часы:
-
-```js
-//+ run
-// текущая дата
-var date = new Date();
-
-// час в текущей временной зоне
-alert( date.getHours() );
-
-// сколько сейчас времени в Лондоне?
-// час в зоне GMT+0 
-alert( date.getUTCHours() );
-```
-
-Кроме описанных выше, существуют два специальных метода без UTC-варианта:
-
-<dl>
-<dt>`getTime()`</dt>
-<dd>Возвращает число миллисекунд, прошедших с 1 января 1970 года GMT+0, то есть того же вида, который используется в конструкторе `new Date(milliseconds)`.</dd>
-<dt>`getTimezoneOffset()`</dt>
-<dd>Возвращает разницу между местным и UTC-временем, в минутах.
-
-```js
-//+ run
-alert( new Date().getTimezoneOffset() ); // Для GMT-1 выведет 60
-```
-
-</dd>
-</dl>
-
-
-
-## Установка компонентов даты   
-
-Следующие методы позволяют устанавливать компоненты даты и времени:
-<ul>
-<li>`setFullYear(year [, month, date])`</li>
-<li>`setMonth(month [, date])`</li>
-<li>`setDate(date)`</li>
-<li>`setHours(hour [, min, sec, ms])`</li>
-<li>`setMinutes(min [, sec, ms])`</li>
-<li>`setSeconds(sec [, ms])`</li>
-<li>`setMilliseconds(ms)`</li>
-<li>`setTime(milliseconds)` (устанавливает всю дату по миллисекундам с 01.01.1970 UTC)</li>
-</ul>
-
-Все они, кроме `setTime()`, обладают также UTC-вариантом, например: `setUTCHours()`.
-
-Как видно, некоторые методы могут устанавливать несколько компонентов даты одновременно, в частности, `setHours`. При этом если какая-то компонента не указана, она не меняется. Например:
-
-```js
-//+ run
-var today = new Date;
-
-today.setHours(0);
-alert( today ); // сегодня, но час изменён на 0
-
-today.setHours(0, 0, 0, 0);
-alert( today ); // сегодня, ровно 00:00:00.
-```
-
-### Автоисправление даты   
-
-*Автоисправление* -- очень удобное свойство объектов `Date`. Оно заключается в том, что можно устанавливать заведомо некорректные компоненты (например 32 января), а объект сам себя поправит.
-
-```js
-//+ run
-var d = new Date(2013, 0, *!*32*/!*); // 32 января 2013 ?!?
-alert(d); // ... это 1 февраля 2013!
-```
-
-**Неправильные компоненты даты автоматически распределяются по остальным.** 
-
-Например, нужно увеличить на 2 дня дату "28 февраля 2011". Может быть так, что это будет 2 марта, а может быть и 1 марта, если год високосный. Но нам обо всем этом думать не нужно. Просто прибавляем два дня. Остальное сделает `Date`:
-
-```js
-//+ run
-var d = new Date(2011, 1, 28);
-*!*
-d.setDate(d.getDate() + 2);
-*/!*
-
-alert( d ); // 2 марта, 2011
-```
-
-Также это используют для получения даты, отдаленной от имеющейся на нужный промежуток времени. Например, получим дату на 70 секунд большую текущей:
-
-```js
-//+ run
-var d = new Date();
-d.setSeconds(d.getSeconds() + 70);
-
-alert( d ); // выведет корректную дату
-```
-
-Можно установить и нулевые, и даже отрицательные компоненты. Например:
-
-```js
-//+ run
-var d = new Date;
-
-d.setDate(1); // поставить первое число месяца
-alert( d );
-
-d.setDate(0); // нулевого числа нет, будет последнее число предыдущего месяца
-alert( d );
-```
-
-
-
-```js
-//+ run
-var d = new Date;
-
-d.setDate(-1); // предпоследнее число предыдущего месяца
-alert( d );
-```
-
-### Преобразование к числу, разность дат   
-
-Когда объект `Date` используется в числовом контексте, он преобразуется в количество миллисекунд:
-
-```js
-//+ run
-alert(+new Date) // +date то же самое, что: +date.valueOf()
-```
-
-**Важный побочный эффект: даты можно вычитать, результат вычитания объектов `Date` -- их временная разница, в миллисекундах**.
-
-Это используют для измерения времени:
-
-```js
-//+ run
-var start = new Date; // засекли время
-
-// что-то сделать
-for (var i = 0; i < 100000; i++) {
-  var doSomething = i * i * i;
-}
-
-var end = new Date; // конец измерения
-
-alert( "Цикл занял " + (end - start) + " ms" );
-```
-
-### Бенчмаркинг
-
-Допустим, у нас есть несколько вариантов решения задачи, каждый описан функцией. 
-
-Как узнать, какой быстрее?
-
-Для примера возьмем две функции, которые бегают по массиву:
-
-```js
-function walkIn(arr) {
-  for (var key in arr) arr[i]++
-}
-
-function walkLength(arr) {
-  for (var i = 0; i < arr.length; i++) arr[i]++;
-}
-```
-
-Чтобы померять, какая из них быстрее, нельзя запустить один раз `walkIn`, один раз `walkLength` и замерить разницу. Одноразовый запуск ненадежен, любая мини-помеха исказит результат.
-
-Для правильного бенчмаркинга функция запускается много раз, чтобы сам тест занял существенное время. Это сведет влияние помех к минимуму. Сложную функцию можно запускать 100 раз, простую -- 1000 раз... 
-
-Померяем, какая из функций быстрее:
-
-```js
-//+ run
-var arr = [];
-for (var i = 0; i < 1000; i++) arr[i] = 0;
-
-function walkIn(arr) {
-  for (var key in arr) arr[i]++;
-}
-
-function walkLength(arr) {
-  for (var i = 0; i < arr.length; i++) arr[i]++;
-}
-
-function bench(f) {
-  var date = new Date();
-  for (var i = 0; i < 10000; i++) f(arr);
-  return new Date() - date;
-}
-
-alert( 'Время walkIn: ' + bench(walkIn) + 'мс' );
-alert( 'Время walkLength: ' + bench(walkLength) + 'мс' );
-```
-
-Теперь представим себе, что во время первого бенчмаркинга `bench(walkIn)` компьютер что-то делал параллельно важное (вдруг) и это занимало ресурсы, а во время второго -- перестал. Реальная ситуация? Конечно реальна, особенно на современных ОС, где много процессов одновременно.
-
-**Гораздо более надёжные результаты можно получить, если весь пакет тестов прогнать много раз.**
-
-```js
-//+ run
-var arr = [];
-for (var i = 0; i < 1000; i++) arr[i] = 0;
-
-function walkIn(arr) {
-  for (var key in arr) arr[i]++;
-}
-
-function walkLength(arr) {
-  for (var i = 0; i < arr.length; i++) arr[i]++;
-}
-
-function bench(f) {
-  var date = new Date();
-  for (var i = 0; i < 1000; i++) f(arr);
-  return new Date() - date;
-}
-
-*!*
-// bench для каждого теста запустим много раз, чередуя
-var timeIn = 0,
-  timeLength = 0;
-for (var i = 0; i < 100; i++) {
-  timeIn += bench(walkIn);
-  timeLength += bench(walkLength);
-}
-*/!*
-
-alert( 'Время walkIn: ' + timeIn + 'мс' );
-alert( 'Время walkLength: ' + timeLength + 'мс' );
-```
-
-[smart header="Более точное время с `performance.now()`"]
-В современных браузерах (кроме IE9-) вызов [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/performance.now) возвращает количество миллисекунд, прошедшее с начала загрузки страницы. Причём именно с самого начала, до того, как загрузился HTML-файл, если точнее -- с момента выгрузки предыдущей страницы из памяти. 
-
-Так что это время включает в себя всё, включая начальное обращение к серверу. 
-
-Его можно посмотреть в любом месте страницы, даже в `<head>`, чтобы узнать, сколько времени потребовалось браузеру, чтобы до него добраться, включая загрузку HTML. 
-
-Возвращаемое значение измеряется в миллисекундах, но дополнительно имеет точность 3 знака после запятой (до миллионных долей секунды!), поэтому можно использовать его и для более точного бенчмаркинга в том числе.
-[/smart]
-
-[smart header="`console.time(метка)` и `console.timeEnd(метка)`"]
-Для измерения с одновременным выводом результатов в консоли есть методы:
-<ul>
-<li>`console.time(метка)` -- включить внутренний хронометр браузера с меткой.</li>
-<li>`console.timeEnd(метка)` -- выключить внутренний хронометр браузера с меткой и вывести результат.</li>
-</ul>
-Параметр `"метка"` используется для идентификации таймера, чтобы можно было делать много замеров одновременно и даже вкладывать измерения друг в друга. 
-
-В коде ниже таймеры `walkIn`, `walkLength` -- конкретные тесты, а таймер "All Benchmarks" -- время "на всё про всё":
-
-```js
-//+ run
-var arr = [];
-for (var i = 0; i < 1000; i++) arr[i] = 0;
-
-function walkIn(arr) {
-  for (var key in arr) arr[i]++;
-}
-
-function walkLength(arr) {
-  for (var i = 0; i < arr.length; i++) arr[i]++;
-}
-
-function bench(f) {
-  for (var i = 0; i < 10000; i++) f(arr);
-}
-
-console.time("All Benchmarks");
-
-console.time("walkIn");
-bench(walkIn);
-console.timeEnd("walkIn");
-
-
-console.time("walkLength");
-bench(walkLength);
-console.timeEnd("walkLength");
-
-console.timeEnd("All Benchmarks");
-```
-
-**При запуске этого примера нужно открыть консоль, иначе вы ничего не увидите.**
-[/smart]
-
-[warn header="Внимание, оптимизатор!"]
-Современные интерпретаторы JavaScript делают массу оптимизаций, например:
-<ol>
-<li>Автоматически выносят инвариант, то есть постоянное в цикле значение типа `arr.length`, за пределы цикла.</li>
-<li>Стараются понять, значения какого типа хранит данная переменная или массив, какую структуру имеет объект и, исходя из этого, оптимизировать внутренние алгоритмы.</li>
-<li>Выполняют простейшие операции, например сложение явно заданных чисел и строк, на этапе компиляции.</li>
-<li>Могут обнаружить, что некий код, например присваивание к неиспользуемой локальной переменной, ни на что не влияет и вообще исключить его из выполнения, хотя делают это редко.</li>
-</ol>
-Эти оптимизации могут влиять на результаты тестов, поэтому измерять скорость базовых операций JavaScript ("проводить микробенчмаркинг") до того, как вы изучите внутренности JavaScript-интерпретаторов и поймёте, что они реально делают на таком коде, не рекомендуется. 
-[/warn]
-
-
-## Форматирование и вывод дат
-
-Во всех браузерах, кроме IE10-, поддерживается новый стандарт [Ecma 402](http://www.ecma-international.org/publications/standards/Ecma-402.htm), который добавляет специальные методы для форматирования дат.
-
-Это делается вызовом `date.toLocaleString(локаль, опции)`, в котором можно задать много настроек. Он позволяет указать, какие параметры даты нужно вывести, и ряд настроек вывода, после чего интерпретатор сам сформирует строку.
-
-Пример с почти всеми параметрами даты и русским, затем английским (США) форматированием:
-
-```js
-//+ run
-var date = new Date(2014, 11, 31, 12, 30, 0);
-
-var options = {
-  era: 'long',
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  weekday: 'long',
-  timezone: 'UTC',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-};
-
-alert( date.toLocaleString("ru", options) ); // среда, 31 декабря 2014 г. н.э. 12:30:00
-alert( date.toLocaleString("en-US", options) ); // Wednesday, December 31, 2014 Anno Domini 12:30:00 PM
-```
-
-Вы сможете подробно узнать о них в статье [](/intl), которая посвящена этому стандарту. 
-
-
-**Методы вывода без локализации:**
-
-<dl>
-<dt>`toString()`, `toDateString()`, `toTimeString()`</dt>
-<dd>Возвращают стандартное строчное представление, не заданное жёстко в стандарте, а зависящее от браузера. Единственное требование к нему -- читаемость человеком. Метод `toString` возвращает дату целиком, `toDateString()` и `toTimeString()` -- только дату и время соответственно.
-
-```js
-//+ run
-var d = new Date();
-
-alert( d.toString() ); // вывод, похожий на 'Wed Jan 26 2011 16:40:50 GMT+0300'
-```
-
-<dt>`toUTCString()`</dt>
-<dd>То же самое, что `toString()`, но дата в зоне UTC.</dd>
-</dl>
-<dt>`toISOString()`</dt>
-<dd>Возвращает дату в формате ISO Детали формата будут далее. Поддерживается современными браузерами, не поддерживается IE8-.
-
-```js
-//+ run
-var d = new Date();
-
-alert( d.toISOString() ); // вывод, похожий на '2011-01-26T13:51:50.417Z'
-```
-
-</dd></dl>
-
-Если хочется иметь большую гибкость и кросс-браузерность, то также можно воспользоваться специальной библиотекой, например [Moment.JS](http://momentjs.com/) или написать свою функцию форматирования.
-
-
-
-## Разбор строки, Date.parse   
-
-Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
-
-Этот формат выглядит так: `YYYY-MM-DDTHH:mm:ss.sssZ`, где:
-
-<ul>
-<li>`YYYY-MM-DD` -- дата в формате год-месяц-день.</li>
-<li>Обычный символ `T` используется как разделитель.</li>
-<li>`HH:mm:ss.sss` -- время: часы-минуты-секунды-миллисекунды.</li>
-<li>Часть `'Z'` обозначает временную зону -- в формате `+-hh:mm`, либо символ `Z`, обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.</li>
-</ul>
-
-Также возможны укороченные варианты, например `YYYY-MM-DD` или `YYYY-MM` или даже только `YYYY`.
-
-Метод `Date.parse(str)` разбирает строку `str` в таком формате и возвращает соответствующее ей количество миллисекунд. Если это невозможно, `Date.parse` возвращает `NaN`.
-
-Например:
-
-```js
-//+ run
-var msUTC = Date.parse('2012-01-26T13:51:50.417Z'); // зона UTC
-
-alert( msUTC ); // 1327571510417 (число миллисекунд)
-```
-
-С таймзоной `-07:00 GMT`:
-
-```js
-//+ run
-var ms = Date.parse('2012-01-26T13:51:50.417-07:00');
-
-alert( ms ); // 1327611110417 (число миллисекунд)
-```
-
-
-[smart header="Формат дат для IE8-"]
-До появления спецификации EcmaScript 5 формат не был стандартизован, и браузеры, включая IE8-, имели свои собственные форматы дат. Частично, эти форматы пересекаются.
-
-Например, код ниже работает везде, включая старые IE:
-
-```js
-//+ run
-var ms = Date.parse("January 26, 2011 13:51:50");
-
-alert( ms );
-```
-
-Вы также можете почитать о старых форматах IE в документации к методу  <a href="http://msdn.microsoft.com/en-us/library/k4w173wk%28v=vs.85%29.aspx">MSDN Date.parse</a>. 
-
-Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка IE8-, то метод `Date.parse`, как и ряд других современных методов, добавляется библиотекой [es5-shim](https://github.com/kriskowal/es5-shim).
-[/smart]
-
-## Метод Date.now()
-
-Метод `Date.now()` возвращает дату сразу в виде миллисекунд.
-
-Технически, он аналогичен вызову `+new Date()`, но в отличие от него не создаёт промежуточный объект даты, а поэтому -- во много раз быстрее. 
-
-Его использование особенно рекомендуется там, где производительность при работе с датами критична. Обычно это не на веб-страницах, а, к примеру, в разработке игр на JavaScript.
-
-## Итого
-
-<ul>
-<li>Дата и время представлены в JavaScript одним объектом: [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/). Создать "только время" при этом нельзя, оно должно быть с датой. Список методов `Date` вы можете найти в справочнике [Date](http://javascript.ru/Date) или выше.</li>
-<li>Отсчёт месяцев начинается с нуля.</li>
-<li>Отсчёт дней недели (для `getDay()`) тоже начинается с нуля (и это воскресенье).</li>
-<li>Объект `Date` удобен тем, что автокорректируется. Благодаря этому легко сдвигать даты.</li>
-<li>При преобразовании к числу объект `Date` даёт количество миллисекунд, прошедших с 1 января 1970 UTC. Побочное следствие -- даты можно вычитать, результатом будет разница в миллисекундах.</li>
-<li>Для получения текущей даты в миллисекундах лучше использовать `Date.now()`, чтобы не создавать лишний объект `Date` (кроме IE8-)</li>
-<li>Для бенчмаркинга лучше использовать `performance.now()` (кроме IE9-), он в 1000 раз точнее.</li>
-</ul>
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/1-sum-interface/solution.md b/1-js/4-data-structures/2-number/1-sum-interface/solution.md
deleted file mode 100644
index d42523ce..00000000
--- a/1-js/4-data-structures/2-number/1-sum-interface/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-```js
-//+ run demo
-var a = +prompt("Введите первое число", "");
-var b = +prompt("Введите второе число", "");
-
-alert( a + b );
-```
-
-Обратите внимание на оператор `+` перед `prompt`, он сразу приводит вводимое значение к числу. Если бы его не было, то `a` и `b` были бы строками и складывались бы как строки, то есть `"1" + "2" = "12"`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/1-sum-interface/task.md b/1-js/4-data-structures/2-number/1-sum-interface/task.md
deleted file mode 100644
index 2aac44a6..00000000
--- a/1-js/4-data-structures/2-number/1-sum-interface/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Интерфейс суммы 
-
-[importance 5]
-
-Создайте страницу, которая предлагает ввести два числа и выводит их сумму.
-
-[demo /]
-
-P.S. Есть "подводный камень" при работе с типами.
diff --git a/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md b/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md
deleted file mode 100644
index 574bf957..00000000
--- a/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-Во внутреннем двоичном представлении `6.35` является бесконечной двоичной дробью. Хранится она с потерей точности.. А впрочем, посмотрим сами:
-
-```js
-//+ run
-alert( 6.35.toFixed(20) ); // 6.34999999999999964473
-```
-
-Интерпретатор видит число как `6.34...`, поэтому и округляет вниз.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/2-why-rounded-down/task.md b/1-js/4-data-structures/2-number/2-why-rounded-down/task.md
deleted file mode 100644
index 203280c6..00000000
--- a/1-js/4-data-structures/2-number/2-why-rounded-down/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Почему 6.35.toFixed(1) == 6.3?
-
-[importance 4]
-
-В математике принято, что `5` округляется вверх, например:
-
-```js
-//+ run
-alert( 1.5.toFixed(0) ); // 2
-alert( 1.35.toFixed(1) ); // 1.4
-```
-
-Но почему в примере ниже `6.35` округляется до `6.3`?
-
-```js
-//+ run
-alert( 6.35.toFixed(1) ); // 6.3
-```
-
diff --git a/1-js/4-data-structures/2-number/3-sum-prices/solution.md b/1-js/4-data-structures/2-number/3-sum-prices/solution.md
deleted file mode 100644
index 242dcdde..00000000
--- a/1-js/4-data-structures/2-number/3-sum-prices/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Есть два основных подхода.
-<ol>
-<li>Можно хранить сами цены в "копейках" (центах и т.п.). Тогда они всегда будут целые и проблема исчезнет. Но при показе и при обмене данными нужно будет это учитывать и не забывать делить на 100.</li>
-<li>При операциях, когда необходимо получить окончательный результат -- округлять до 2го знака после запятой. Все, что дальше -- ошибка округления:
-
-```js
-//+ run no-beautify
-var price1 = 0.1, price2 = 0.2;
-alert( +(price1 + price2).toFixed(2) );
-```
-
-</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/3-sum-prices/task.md b/1-js/4-data-structures/2-number/3-sum-prices/task.md
deleted file mode 100644
index 02118152..00000000
--- a/1-js/4-data-structures/2-number/3-sum-prices/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Сложение цен
-
-[importance 5]
-
-Представьте себе электронный магазин. Цены даны с точностью до копейки(цента, евроцента и т.п.). 
-
-Вы пишете интерфейс для него. Основная работа происходит на сервере, но и на клиенте все должно быть хорошо. Сложение цен на купленные товары и умножение их на количество является обычной операцией.
-
-Получится глупо, если при заказе двух товаров с ценами `0.10$` и `0.20$` человек получит общую стоимость `0.30000000000000004$`:
-
-```js
-//+ run
-alert( 0.1 + 0.2 + '$' );
-```
-
-Что можно сделать, чтобы избежать проблем с ошибками округления? 
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md b/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md
deleted file mode 100644
index 86855efd..00000000
--- a/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Потому что `i` никогда не станет равным `10`.
-
-Запустите, чтобы увидеть *реальные* значения `i`:
-
-```js
-//+ run
-var i = 0;
-while (i < 11) {
-  i += 0.2;
-  if (i > 9.8 && i < 10.2) alert( i );
-}
-```
-
-Ни одно из них в точности не равно `10`. 
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/4-endless-loop-error/task.md b/1-js/4-data-structures/2-number/4-endless-loop-error/task.md
deleted file mode 100644
index e3ef1874..00000000
--- a/1-js/4-data-structures/2-number/4-endless-loop-error/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Бесконечный цикл по ошибке
-
-[importance 4]
-
-Этот цикл - бесконечный. Почему?
-
-```js
-var i = 0;
-while (i != 10) {
-  i += 0.2;
-}
-```
-
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js
deleted file mode 100644
index 7ff8569c..00000000
--- a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js
+++ /dev/null
@@ -1,7 +0,0 @@
-function getDecimal(num) {
-  var str = "" + num;
-  var zeroPos = str.indexOf(".");
-  if (zeroPos == -1) return 0;
-  str = str.slice(zeroPos);
-  return +str;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js
deleted file mode 100644
index 8f79eec9..00000000
--- a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-describe("getDecimal", function() {
-  it("возвращает дробную часть 1.2 как 0.2", function() {
-    assert.equal(getDecimal(1.2), 0.2);
-  });
-
-  it("возвращает дробную часть 1.3 как 0.3", function() {
-    assert.equal(getDecimal(1.3), 0.3);
-  });
-
-  it("возвращает дробную часть 12.345 как 0.345", function() {
-    assert.equal(getDecimal(12.345), 0.345);
-  });
-
-  it("возвращает дробную часть -1.2 как 0.2", function() {
-    assert.equal(getDecimal(-1.2), 0.2);
-  });
-
-  it("возвращает дробную часть 5 как 0", function() {
-    assert.equal(getDecimal(5), 0);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/solution.md b/1-js/4-data-structures/2-number/5-get-decimal/solution.md
deleted file mode 100644
index 9bd45ee5..00000000
--- a/1-js/4-data-structures/2-number/5-get-decimal/solution.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Функция
-
-Первая идея может быть такой:
-
-```js
-//+ run
-function getDecimal(num) {
-  return num - Math.floor(num);
-}
-
-alert( getDecimal(12.5) ); // 0.5
-*!*
-alert( getDecimal(-1.2) ); // 0.8, неверно!
-*/!*
-```
-
-Как видно из примера выше, для отрицательных чисел она не работает. 
-
-Это потому, что округление `Math.floor` происходит всегда к ближайшему меньшему целому, то есть `Math.floor(-1.2) = -2`, а нам бы хотелось убрать целую часть, т.е. получить `-1`.
-
-Можно попытаться решить проблему так:
-
-```js
-//+ run
-function getDecimal(num) {
-  return num > 0 ? num - Math.floor(num) : Math.ceil(num) - num;
-}
-
-alert( getDecimal(12.5) ); // 0.5
-*!*
-alert( getDecimal(-1.2) ); // 0.19999999999999996, неверно!
-alert( getDecimal(1.2) ); // 0.19999999999999996
-*/!*
-```
-
-Проблема с отрицательными числами решена, но результат, увы, не совсем тот.
-
-Внутреннее неточное представление чисел приводит к ошибке в вычислениях, которая проявляется при работе и с положительными и с отрицательными числами.
-
-Давайте попробуем ещё вариант -- получим остаток при делении на `1`. При таком делении от любого числа в остатке окажется именно дробная часть:
-
-```js
-//+ run
-function getDecimal(num) {
-  return num > 0 ? (num % 1) : (-num % 1);
-}
-
-alert( getDecimal(12.5) ); // 0.5
-*!*
-alert( getDecimal(1.2) ); // 0.19999999999999996, неверно!
-*/!*
-```
-
-В общем-то, работает, функция стала короче, но, увы, ошибка сохранилась.
-
-Что делать?
-
-Увы, операции с десятичными дробями подразумевают некоторую потерю точности. 
-
-Зависит от ситуации. 
-<ul>
-<li>Если внешний вид числа неважен и ошибка в вычислениях допустима -- она ведь очень мала, то можно оставить как есть.</li>
-<li>Перейти на промежуточные целочисленные вычисления там, где это возможно.</li>
-<li>Если мы знаем, что десятичная часть жёстко ограничена, к примеру, может содержать не более 2 знаков то можно округлить число, то есть вернуть `+num.toFixed(2)`.</li>
-</ul>
-
-Если эти варианты не подходят, то можно работать с числом как со строкой:
-
-```js
-//+ run
-function getDecimal(num) {
-  var str = "" + num;
-  var zeroPos = str.indexOf(".");
-  if (zeroPos == -1) return 0;
-  str = str.slice(zeroPos);
-  return +str;
-}
-
-alert( getDecimal(12.5) ); // 0.5
-alert( getDecimal(1.2) ); // 0.2
-```
-
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/task.md b/1-js/4-data-structures/2-number/5-get-decimal/task.md
deleted file mode 100644
index ec77059b..00000000
--- a/1-js/4-data-structures/2-number/5-get-decimal/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Как получить дробную часть числа? 
-
-[importance 4]
-
-Напишите функцию `getDecimal(num)`, которая возвращает десятичную часть числа:
-
-```js
-alert( getDecimal(12.345) ); // 0.345
-alert( getDecimal(1.2) ); // 0.2
-alert( getDecimal(-1.2) ); // 0.2
-```
-
diff --git a/1-js/4-data-structures/2-number/6-formula-binet/solution.md b/1-js/4-data-structures/2-number/6-formula-binet/solution.md
deleted file mode 100644
index 4d3abf0b..00000000
--- a/1-js/4-data-structures/2-number/6-formula-binet/solution.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-```js
-//+ run
-function fibBinet(n) {
-  var phi = (1 + Math.sqrt(5)) / 2;
-  // используем Math.round для округления до ближайшего целого
-  return Math.round(Math.pow(phi, n) / Math.sqrt(5));
-}
-
-function fib(n) {
-  var a = 1,
-    b = 0,
-    x;
-  for (i = 0; i < n; i++) {
-    x = a + b;
-    a = b
-    b = x;
-  }
-  return b;
-}
-
-alert( fibBinet(2) ); // 1, равно fib(2) 
-alert( fibBinet(8) ); // 21, равно fib(8)
-*!*
-alert( fibBinet(77) ); // 5527939700884755
-alert( fib(77) ); // 5527939700884757, не совпадает!
-*/!*
-```
-
-**Результат вычисления <code>F<sub>77</sub></code> получился неверным!** 
-
-Причина -- в ошибках округления, ведь √5 -- бесконечная дробь. 
-
-Ошибки округления при вычислениях множатся и, в итоге, дают расхождение.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/6-formula-binet/task.md b/1-js/4-data-structures/2-number/6-formula-binet/task.md
deleted file mode 100644
index 706bdf19..00000000
--- a/1-js/4-data-structures/2-number/6-formula-binet/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Формула Бине
-
-[importance 4]
-
-Последовательность [чисел Фибоначчи](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8) имеет формулу <code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>. То есть, следующее число получается как сумма двух предыдущих.
-
-Первые два числа равны `1`, затем `2(1+1)`, затем `3(1+2)`, `5(2+3)` и так далее: `1, 1, 2, 3, 5, 8, 13, 21...`.
-
-Код для их вычисления (из задачи [](/task/fibonacci-numbers)):
-
-```js
-function fib(n) {
-  var a = 1,
-    b = 0,
-    x;
-  for (i = 0; i < n; i++) {
-    x = a + b;
-    a = b
-    b = x;
-  }
-  return b;
-}
-```
-
-Существует [формула Бине](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8#.D0.A4.D0.BE.D1.80.D0.BC.D1.83.D0.BB.D0.B0_.D0.91.D0.B8.D0.BD.D0.B5), согласно которой <code>F<sub>n</sub></code> равно ближайшему целому для  <code>ϕ<sup>n</sup>/√5</code>, где <code>ϕ=(1+√5)/2</code> -- золотое сечение.
-
-Напишите функцию `fibBinet(n)`, которая будет вычислять <code>F<sub>n</sub></code>, используя эту формулу. Проверьте её для значения <code>F<sub>77</sub></code> (должно получиться  `fibBinet(77) = 5527939700884757`).
-
-**Одинаковы ли результаты, полученные при помощи кода `fib(n)` выше и по формуле Бине? Если нет, то почему и какой из них верный?**
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/7-random-0-max/solution.md b/1-js/4-data-structures/2-number/7-random-0-max/solution.md
deleted file mode 100644
index 985dd191..00000000
--- a/1-js/4-data-structures/2-number/7-random-0-max/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Сгенерируем значение в диапазоне `0..1` и умножим на `max`:
-
-```js
-//+ run
-var max = 10;
-
-alert( Math.random() * max );
-```
-
diff --git a/1-js/4-data-structures/2-number/7-random-0-max/task.md b/1-js/4-data-structures/2-number/7-random-0-max/task.md
deleted file mode 100644
index a7175b55..00000000
--- a/1-js/4-data-structures/2-number/7-random-0-max/task.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Случайное из интервала (0, max)
-
-[importance 2]
-
-Напишите код для генерации случайного значения в диапазоне от `0` до `max`, не включая `max`.
diff --git a/1-js/4-data-structures/2-number/8-random-min-max/solution.md b/1-js/4-data-structures/2-number/8-random-min-max/solution.md
deleted file mode 100644
index 5954a2e0..00000000
--- a/1-js/4-data-structures/2-number/8-random-min-max/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-Сгенерируем значение из интервала `0..max-min`, а затем сдвинем на `min`:
-
-```js
-//+ run
-var min = 5,
-  max = 10;
-
-alert( min + Math.random() * (max - min) );
-```
-
diff --git a/1-js/4-data-structures/2-number/8-random-min-max/task.md b/1-js/4-data-structures/2-number/8-random-min-max/task.md
deleted file mode 100644
index e5e8bf18..00000000
--- a/1-js/4-data-structures/2-number/8-random-min-max/task.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Случайное из интервала (min, max)
-
-[importance 2]
-
-Напишите код для генерации случайного числа от  `min` до `max`, не включая `max`.
diff --git a/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md b/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md
deleted file mode 100644
index 749c9175..00000000
--- a/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Очевидное неверное решение (round)
-
-Самый простой, но неверный способ -- это сгенерировать значение в интервале `min..max` и округлить его `Math.round`, вот так:
-
-```js
-//+ run
-function randomInteger(min, max) {
-  var rand = min + Math.random() * (max - min)
-  rand = Math.round(rand);
-  return rand;
-}
-
-alert( randomInteger(1, 3) );
-```
-
-Эта функция работает. Но при этом она некорректна: вероятность получить крайние значения `min` и `max` будет в два раза меньше, чем любые другие. 
-
-При многократном запуске этого кода вы легко заметите, что `2` выпадает чаще всех.
-
-Это происходит из-за того, что `Math.round()`  получает разнообразные случайные числа из интервала от `1` до `3`, но при округлении до ближайшего целого получится, что:
-
-```js
-//+ no-beautify
-значения из диапазона 1   ... 1.49999..  станут 1
-значения из диапазона 1.5 ... 2.49999..  станут 2 
-значения из диапазона 2.5 ... 2.99999..  станут 3
-```
-
-Отсюда явно видно, что в `1` (как и `3`) попадает диапазон значений в два раза меньший, чем в `2`. Из-за этого такой перекос.
-
-# Верное решение с round
-
-Правильный способ: `Math.round(случайное от min-0.5 до max+0.5)`
-
-```js
-//+ run
-*!*
-function randomInteger(min, max) {
-    var rand = min - 0.5 + Math.random() * (max - min + 1)
-    rand = Math.round(rand);
-    return rand;
-  }
-*/!*
-
-alert( randomInteger(5, 10) );
-```
-
-В этом случае диапазон будет тот же (`max-min+1`), но учтена механика округления `round`.
-
-# Решение с floor
-
-Альтернативный путь - применить округление `Math.floor()` к случайному числу от `min` до `max+1`. 
-
-Например, для генерации целого числа от `1` до `3`, создадим вспомогательное случайное значение от `1` до `4` (не включая `4`).
-
-Тогда `Math.floor()` округлит их так:
-
-```js
-//+ no-beautify
-1 ... 1.999+ станет 1
-2 ... 2.999+ станет 2
-3 ... 3.999+ станет 3
-```
-
-Все диапазоны одинаковы.
-Итак, код:
-
-```js
-//+ run
-*!*
-function randomInteger(min, max) {
-    var rand = min + Math.random() * (max + 1 - min);
-    rand = Math.floor(rand);
-    return rand;
-  }
-*/!*
-
-alert( randomInteger(5, 10) );
-```
-
diff --git a/1-js/4-data-structures/2-number/9-random-int-min-max/task.md b/1-js/4-data-structures/2-number/9-random-int-min-max/task.md
deleted file mode 100644
index 7f747a25..00000000
--- a/1-js/4-data-structures/2-number/9-random-int-min-max/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Случайное целое от min до max
-
-[importance 2]
-
-Напишите функцию `randomInteger(min, max)` для генерации случайного **целого** числа между `min` и `max`, включая `min,max` как возможные значения.
-
-Любое число из интервала `min..max` должно иметь одинаковую вероятность. 
diff --git a/1-js/4-data-structures/2-number/article.md b/1-js/4-data-structures/2-number/article.md
deleted file mode 100644
index b25a936b..00000000
--- a/1-js/4-data-structures/2-number/article.md
+++ /dev/null
@@ -1,612 +0,0 @@
-# Числа
-
-Все числа в JavaScript, как целые так и дробные, имеют тип `Number` и хранятся в 64-битном формате [IEEE-754](http://en.wikipedia.org/wiki/IEEE_754-1985), также известном как  "double precision". 
-
-Здесь мы рассмотрим различные тонкости, связанные с работой с числами в JavaScript.
-
-## Способы записи
-
-В JavaScript можно записывать числа не только в десятичной, но и в шестнадцатеричной (начинается с `0x`), а также восьмеричной (начинается с `0`) системах счисления:
-
-```js
-//+ run
-alert( 0xFF ); // 255 в шестнадцатиричной системе
-alert( 010 ); // 8 в восьмеричной системе
-```
-
-Также доступна запись в *"научном формате"* (ещё говорят "запись с плавающей точкой"), который выглядит как `<число>e<кол-во нулей>`.
-
-Например, `1e3` -- это `1` с `3` нулями, то есть `1000`.
-
-```js
-//+ run
-// еще пример научной формы: 3 с 5 нулями
-alert( 3e5 ); // 300000
-```
-
-Если количество нулей отрицательно, то число сдвигается вправо за десятичную точку, так что получается десятичная дробь:
-
-```js
-//+ run
-// здесь 3 сдвинуто 5 раз вправо, за десятичную точку.
-alert( 3e-5 ); // 0.00003  <-- 5 нулей, включая начальный ноль
-```
-
-## Деление на ноль, Infinity   
-
-Представьте, что вы собираетесь создать новый язык... Люди будут называть его "JavaScript" (или LiveScript... неважно).
-
-Что должно происходить при попытке деления на ноль?
-
-Как правило, ошибка в программе... Во всяком случае, в большинстве языков программирования это именно так.
-
-Но создатель JavaScript решил пойти математически правильным путем. Ведь чем меньше делитель, тем больше результат. При делении на очень-очень маленькое число должно получиться очень большое. В математическом анализе это описывается через [пределы](http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B5%D0%B4%D0%B5%D0%BB_(%D0%BC%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B0&#041;), и если подразумевать предел, то в качестве результата деления на `0` мы получаем "бесконечность", которая обозначается символом `∞` или, в JavaScript: `"Infinity"`.
-
-```js
-//+ run
-alert( 1 / 0 ); // Infinity
-alert( 12345 / 0 ); // Infinity
-```
-
-**`Infinity` -- особенное численное значение, которое ведет себя в точности как математическая бесконечность `∞`.**
-<ul>
-<li>`Infinity` больше любого числа.</li>
-<li>Добавление к бесконечности не меняет её.</li>
-</ul>
-
-```js
-//+ run
-alert( Infinity > 1234567890 ); // true
-alert( Infinity + 5 == Infinity ); // true
-```
-
-**Бесконечность можно присвоить и в явном виде: `var x = Infinity`.**
-
-Бывает и минус бесконечность `-Infinity`:
-
-```js
-//+ run
-alert( -1 / 0 ); // -Infinity
-```
-
-Бесконечность можно получить также, если сделать ну очень большое число, для которого количество разрядов в двоичном представлении не помещается в соответствующую часть стандартного 64-битного формата, например:
-
-```js
-//+ run
-alert( 1e500 ); // Infinity
-```
-
-## NaN   
-
-Если математическая операция не может быть совершена, то возвращается специальное значение `NaN` (Not-A-Number).
-
-Например, деление `0/0` в математическом смысле неопределено, поэтому его результат `NaN`:
-
-```js
-//+ run
-alert( 0 / 0 ); // NaN
-```
-
-Значение `NaN` используется для обозначения математической ошибки и обладает следующими свойствами:
-
-<ul>
-<li>Значение `NaN` -- единственное, в своем роде, которое *не равно ничему, включая себя*.
-
-Следующий код ничего не выведет:
-
-```js
-//+ run
-if (NaN == NaN) alert( "==" ); // Ни один вызов
-if (NaN === NaN) alert( "===" ); // не сработает
-```
-
-</li>
-<li>Значение `NaN` можно проверить специальной функцией `isNaN(n)`, которая преобразует аргумент к числу и возвращает `true`, если получилось `NaN`, и `false` -- для любого другого значения.
-
-```js
-//+ run
-var n = 0 / 0;
-
-alert( isNaN(n) ); // true
-alert( isNaN("12") ); // false, строка преобразовалась к обычному числу 12
-```
-
-[smart header="Забавный способ проверки на `NaN`"]
-Отсюда вытекает забавный способ проверки значения на `NaN`: можно проверить значение на равенство самому себе, если не равно -- то `NaN`:
-
-```js
-//+ run
-var n = 0 / 0;
-
-if (n !== n) alert( 'n = NaN!' );
-```
-
-Это работает, но для наглядности лучше использовать `isNaN(n)`. 
-[/smart]
-
-</li>
-<li>Значение `NaN` "прилипчиво". Любая операция с `NaN` возвращает `NaN`.
-
-```js
-//+ run
-alert( NaN + 1 ); // NaN
-```
-
-</li>
-</ul>
-
-Если аргумент `isNaN` -- не число, то он автоматически преобразуется к числу.
-
-
-[smart header="Математические операции в JS безопасны"]
-Никакие математические операции в JavaScript не могут привести к ошибке или "обрушить" программу. 
-
-В худшем случае, результат будет `NaN`.
-[/smart]
-
-## isFinite(n)
-
-Итак, в JavaScript есть обычные числа и три специальных числовых значения: `NaN`, `Infinity` и `-Infinity`.
-
-Тот факт, что они, хоть и особые, но -- числа, демонстрируется работой оператора `+`:
-
-```js
-//+ run
-var value = prompt("Введите Infinity", 'Infinity');
-
-*!*
-var number = +value;
-*/!*
-
-alert( number ); // Infinity, плюс преобразовал строку "Infinity" к такому "числу"
-```
-
-Обычно если мы хотим от посетителя получить число, то `Infinity` или `NaN` нам не подходят. Для того, чтобы отличить "обычные" числа от таких специальных значений, существует функция `isFinite`.
-
-**Функция `isFinite(n)` преобразует аргумент к числу и возвращает `true`, если это не `NaN/Infinity/-Infinity`:**
-
-```js
-//+ run
-alert( isFinite(1) ); // true
-alert( isFinite(Infinity) ); // false
-alert( isFinite(NaN) ); // false
-```
-
-## Преобразование к числу 
-
-Большинство арифметических операций и математических функций преобразуют значение в число автоматически.
-
-Для того, чтобы сделать это явно, обычно перед значением ставят унарный плюс `'+'`:
-
-```js
-//+ run
-var s = "12.34";
-alert( +s ); // 12.34
-```
-
-При этом, если строка не является в точности числом, то результат будет `NaN`:
-
-```js
-//+ run
-alert( +"12test" ); // NaN
-```
-
-Единственное исключение -- пробельные символы в начале и в конце строки, которые игнорируются:
-
-```js
-//+ run
-alert( +"  -12" ); // -12
-alert( +" \n34  \n" ); // 34, перевод строки \n является пробельным символом
-alert( +"" ); // 0, пустая строка становится нулем
-alert( +"1 2" ); // NaN, пробел посередине числа - ошибка
-```
-
-Аналогичным образом происходит преобразование и в других математических операторах и функциях:
-
-```js
-//+ run
-alert( '12.34' / "-2" ); // -6.17
-```
-
-## Мягкое преобразование: parseInt и parseFloat   
-
-В мире HTML/CSS многие значения не являются в точности числами. Например, метрики CSS: `10pt` или `-12px`.
-
-Оператор `'+'` для таких значений возвратит `NaN`:
-
-```js
-//+ run
-alert(+"12px") // NaN
-```
-
-Для удобного чтения таких значений существует функция `parseInt`:
-
-```js
-//+ run
-alert( parseInt('12px') ); // 12
-```
-
-**Функция `parseInt` и ее аналог `parseFloat` преобразуют строку символ за символом, пока это возможно.** 
-
-При возникновении ошибки возвращается число, которое получилось. Функция `parseInt` читает из строки целое число, а `parseFloat` -- дробное.
-
-```js
-//+ run
-alert(parseInt('12px')) // 12, ошибка на символе 'p' 
-alert(parseFloat('12.3.4')) // 12.3, ошибка на второй точке
-```
-
-Конечно, существуют ситуации, когда `parseInt/parseFloat` возвращают `NaN`. Это происходит при ошибке на первом же символе:
-
-```js
-//+ run
-alert( parseInt('a123') ); // NaN
-```
-
-
-## Проверка на число 
-
-Для проверки строки на число можно использовать функцию `isNaN(str)`.
-
-Она преобразует строку в число аналогично `+`, а затем вернёт `true`, если это `NaN`, т.е. если преобразование не удалось:
-
-```js
-//+ run
-var x = prompt("Введите значение", "-11.5");
-
-if (isNaN(x)) {
-  alert( "Строка преобразовалась в NaN. Не число" );
-} else {
-  alert( "Число" );
-}
-```
-
-Однако, у такой проверки есть две особенности:
-
-<ol><li>Пустая строка и строка из пробельных символов преобразуются к `0`, поэтому считаются числами.</li>
-<li>Если применить такую проверку не к строке, то могут быть сюрпризы, в частности `isNaN` посчитает числами значения `false, true, null`, так как они хотя и не числа, но преобразуются к ним.</li>
-</ol>
-
-```js
-//+ run
-alert( isNaN(null) ); //  false - не NaN, т.е. "число"
-alert( isNaN("\n  \n") ); //  false - не NaN, т.е. "число"
-```
-
-Если такое поведение допустимо, то `isNaN` -- приемлемый вариант.
-
-Если же нужна действительно точная проверка на число, которая не считает числом строку из пробелов, логические и специальные значения, а также отсекает `Infinity` -- используйте следующую функцию `isNumeric`:
-
-```js
-function isNumeric(n) {
-  return !isNaN(parseFloat(n)) && isFinite(n);
-}
-```
-
-Разберёмся, как она работает. Начнём справа.
-
-<ul>
-<li>Функция `isFinite(n)` преобразует аргумент к числу и возвращает `true`, если это не `Infinity/-Infinity/NaN`. 
-
-Таким образом, правая часть отсеет заведомо не-числа, но оставит такие значения как `true/false/null` и пустую строку `''`, т.к. они корректно преобразуются в числа.
-</li>
-<li>Для их проверки нужна левая часть. Вызов `parseFloat(true/false/null/'')` вернёт `NaN` для этих значений.
-
-Так устроена функция `parseFloat`: она преобразует аргумент к строке, т.е. `true/false/null` становятся `"true"/"false"/"null"`, а затем считывает из неё число, при этом пустая строка даёт `NaN`.</li>
-</ul>
-
-В результате отсеивается всё, кроме строк-чисел и обычных чисел.
-
-## toString(система счисления)
-
-Как показано выше, числа можно записывать не только в 10-чной, но и в 16-ричной системе. Но бывает и противоположная задача: получить 16-ричное представление числа. Для этого используется метод `toString(основание системы)`, например:
-
-```js
-//+ run
-var n = 255;
-
-alert( n.toString(16) ); // ff
-```
-
-В частности, это используют для работы с цветовыми значениями в браузере, вида `#AABBCC`.
-
-Основание может быть любым от `2` до `36`. 
-
-<ul>
-<li>Основание `2` бывает полезно для отладки побитовых операций:
-
-```js
-//+ run
-var n = 4;
-alert( n.toString(2) ); // 100
-```
-
-</li>
-<li>Основание `36` (по количеству букв в английском алфавите -- 26, вместе с цифрами, которых 10) используется для того, чтобы "кодировать" число в виде буквенно-цифровой строки. В этой системе счисления сначала используются цифры, а затем буквы от `a` до `z`:
-
-```js
-//+ run
-var n = 1234567890;
-alert( n.toString(36) ); // kf12oi
-```
-
-При помощи такого кодирования можно "укоротить" длинный цифровой идентификатор, например чтобы выдать его в качестве URL.
-</li>
-</ul>
-
-
-
-
-## Округление
-
-Одна из самых частых операций с числом -- округление. В JavaScript существуют целых 3 функции для этого.
-
-<dl>
-<dt>`Math.floor`</dt>
-<dd>Округляет вниз</dd>
-<dt>`Math.ceil`</dt>
-<dd>Округляет вверх</dd>
-<dt>`Math.round`</dt>
-<dd>Округляет до ближайшего целого</dd>
-</dl>
-
-```js
-//+ run no-beautify
-alert( Math.floor(3.1) );  // 3
-alert( Math.ceil(3.1) );   // 4
-alert( Math.round(3.1) );  // 3
-```
-
-[smart header="Округление битовыми операторами"]
-[Битовые операторы](/bitwise-operators) делают любое число 32-битным целым, обрезая десятичную часть.
-
-В результате побитовая операция, которая не изменяет число, например, двойное битовое НЕ -- округляет его:
-
-```js
-//+ run
-alert( ~~12.3 ); // 12
-```
-
-Любая побитовая операция такого рода подойдет, например XOR (исключающее ИЛИ, `"^"`) с нулем:
-
-```js
-//+ run
-alert( 12.3 ^ 0 ); // 12
-alert( 1.2 + 1.3 ^ 0 ); // 2, приоритет ^ меньше, чем +
-```
-
-Это удобно в первую очередь тем, что легко читается и не заставляет ставить дополнительные скобки как `Math.floor(...)`:
-
-```js
-var x = a * b / c ^ 0; // читается как "a * b / c и округлить"
-```
-
-[/smart]
-
-### Округление до заданной точности
-   
-Для округления до нужной цифры после запятой можно умножить и поделить на 10 с нужным количеством нулей. Например, округлим `3.456` до 2го знака после запятой:
-
-```js
-//+ run
-var n = 3.456;
-alert( Math.round(n * 100) / 100 ); // 3.456 -> 345.6 -> 346 -> 3.46
-```
-
-Таким образом можно округлять число и вверх и вниз.
-
-### num.toFixed(precision)   
-
-Существует также специальный метод `num.toFixed(precision)`, который округляет число `num` до точности `precision` и возвращает результат *в виде строки*:
-
-```js
-//+ run
-var n = 12.34;
-alert( n.toFixed(1) ); // "12.3"
-```
-
-Округление идёт до ближайшего значения, аналогично `Math.round`:
-
-```js
-//+ run
-var n = 12.36;
-alert( n.toFixed(1) ); // "12.4"
-```
-
-Итоговая строка, при необходимости, дополняется нулями до нужной точности:
-
-```js
-//+ run
-var n = 12.34;
-alert( n.toFixed(5) ); // "12.34000", добавлены нули до 5 знаков после запятой
-```
-
-Если нам нужно именно число, то мы можем получить его, применив `'+'` к результату `n.toFixed(..)`:
-
-```js
-//+ run
-var n = 12.34;
-alert( +n.toFixed(5) ); // 12.34
-```
-
-[warn header="Метод `toFixed` не эквивалентен `Math.round`!"]
-Например, произведём округление до одного знака после запятой с использованием двух способов: `toFixed` и `Math.round` с умножением и делением:
-
-```js
-//+ run
-var price = 6.35;
-
-alert( price.toFixed(1) ); // 6.3
-alert( Math.round(price * 10) / 10 ); // 6.4
-```
-
-Как видно, результат разный! Вариант округления через `Math.round` получился более корректным, так как по общепринятым правилам `5` округляется вверх. А `toFixed` может округлить его как вверх, так и вниз. Почему? Скоро узнаем!
-[/warn]
-
-
-## Неточные вычисления 
-
-Запустите этот пример:
-
-```js
-//+ run
-alert( 0.1 + 0.2 == 0.3 );
-```
-
-Запустили? Если нет -- все же сделайте это.
-
-Ок, вы запустили его. Он вывел `false`. Результат несколько странный, не так ли? Возможно, ошибка в браузере? Поменяйте браузер, запустите еще раз.
-
-Хорошо, теперь мы можем быть уверены: `0.1 + 0.2` это не `0.3`. Но тогда что же это?
-
-```js
-//+ run
-alert( 0.1 + 0.2 ); // 0.30000000000000004
-```
-
-Как видите, произошла небольшая вычислительная ошибка, результат сложения `0.1 + 0.2` немного больше, чем `0.3`.
-
-```js
-//+ run
-alert( 0.1 + 0.2 > 0.3 ); // true
-```
-
-Всё дело в том, что в стандарте IEEE 754 на число выделяется ровно 8 байт(=64 бита), не больше и не меньше. 
-
-Число `0.1 (одна десятая)` записывается просто в десятичном формате, а в двоичной системе счисления это бесконечная дробь ([перевод десятичной дроби в двоичную систему](http://www.klgtu.ru/students/literature/inf_asu/1760.html)). Также бесконечной дробью является `0.2 (=2/10)`.
-
-Двоичное значение бесконечных дробей хранится только до определенного знака, поэтому возникает неточность. Её даже можно увидеть:
-
-```js
-//+ run
-alert( 0.1.toFixed(20) ); // 0.10000000000000000555
-```
-
-Когда мы складываем `0.1` и `0.2`, то две неточности складываются, получаем незначительную, но всё же ошибку в вычислениях.
-
-Конечно, это не означает, что точные вычисления для таких чисел невозможны. Они возможны. И даже необходимы.
-
-Например, есть два способа сложить `0.1` и `0.2`:
-<ol>
-<li>Сделать их целыми, сложить, а потом поделить:
-
-```js
-//+ run
-alert( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3
-```
-
-Это работает, т.к. числа `0.1*10 = 1` и `0.2*10 = 2` могут быть точно представлены в двоичной системе.
-</li>
-<li>Сложить, а затем округлить до разумного знака после запятой. Округления до 10-го знака обычно бывает достаточно, чтобы отсечь ошибку вычислений:
-
-```js
-//+ run
-var result = 0.1 + 0.2;
-alert( +result.toFixed(10) ); // 0.3
-```
-
-</li>
-</ol>
-
-
-
-[smart header="Забавный пример"]
-Привет! Я -- число, растущее само по себе!
-
-```js
-//+ run
-alert( 9999999999999999 ); // выведет 10000000000000000
-```
-
-Причина та же -- потеря точности. 
-
-Из `64` бит, отведённых на число, сами цифры числа занимают до `52` бит, остальные `11` бит хранят позицию десятичной точки и один бит -- знак. Так что если `52` бит не хватает на цифры, то при записи пропадут младшие разряды.
-
-Интерпретатор не выдаст ошибку, но в результате получится "не совсем то число", что мы и видим в примере выше. Как говорится: "как смог, так записал".
-
-[/smart]
-
-Ради справедливости заметим, что в точности то же самое происходит в любом другом языке, где используется формат IEEE 754, включая Java, C, PHP, Ruby, Perl. 
-
-## Другие математические методы 
-
-JavaScript предоставляет базовые тригонометрические и некоторые другие функции для работы с числами.
-
-### Тригонометрия 
-
-Встроенные функции для тригонометрических вычислений:
-
-<dl>
-<dt>`Math.acos(x)`</dt>
-<dd>Возвращает арккосинус `x` (в радианах)</dd>
-<dt>`Math.asin(x)`</dt>
-<dd>Возвращает арксинус `x` (в радианах)</dd>
-<dt>`Math.atan(x)`</dt>
-<dd>Возвращает арктангенс `x` (в радианах)</dd>
-<dt>`Math.atan2(y, x)`</dt>
-<dd>Возвращает угол до точки `(y, x)`. Описание функции: [Atan2](http://en.wikipedia.org/wiki/Atan2).</dd>
-<dt>`Math.sin(x)`</dt>
-<dd>Вычисляет синус `x` (в радианах)</dd>
-<dt>`Math.cos(x)`</dt>
-<dd>Вычисляет косинус `x` (в радианах)</dd>
-<dt>`Math.tan(x)`</dt>
-<dd>Возвращает тангенс `x` (в радианах)</dd>
-</dl>
-
-### Функции общего назначения
-
-Разные полезные функции:
-<dl>
-<dt>`Math.sqrt(x)`</dt>
-<dd>Возвращает квадратный корень из `x`.</dd>
-<dt>`Math.log(x)`</dt>
-<dd>Возвращает натуральный (по основанию <code>e</code>) логарифм `x`.</dd>
-<dt>`Math.pow(x, exp)`</dt>
-<dd>Возводит число в степень, возвращает <code>x<sup>exp</sup></code>, например `Math.pow(2,3) = 8`. Работает в том числе с дробными и отрицательными степенями, например: `Math.pow(4, -1/2) = 0.5`.</dd>
-<dt>`Math.abs(x)`</dt>
-<dd>Возвращает абсолютное значение числа</dd>
-<dt>`Math.exp(x)`</dt>
-<dd>Возвращает <code>e<sup>x</sup></code>, где <code>e</code> -- основание натуральных логарифмов.</dd>
-<dt>`Math.max(a, b, c...)`</dt>
-<dd>Возвращает наибольший из списка аргументов</dd>
-<dt>`Math.min(a, b, c...)`</dt>
-<dd>Возвращает наименьший из списка аргументов</dd>
-<dt>`Math.random()`</dt>
-<dd>Возвращает псевдо-случайное число в интервале [0,1) - то есть между 0(включительно) и 1(не включая). Генератор случайных чисел инициализуется текущим временем.</dd>
-</dl>
-
-### Форматирование
-
-Для красивого вывода чисел в стандарте [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf) есть метод `toLocaleString()`:
-
-```js
-//+ run
-var number = 123456789;
-
-alert( number.toLocaleString() ); // 123 456 789
-```
-
-Его поддерживают все современные браузеры, кроме IE10- (для которых нужно подключить библиотеку [Intl.JS](https://github.com/andyearnshaw/Intl.js/)). Он также умеет форматировать валюту и проценты. Более подробно про устройство этого метода можно будет узнать в статье [](/intl), когда это вам понадобится.
-
-## Итого
-
-<ul>
-<li>Числа могут быть записаны в шестнадцатиричной, восьмеричной системе, а также "научным" способом.</li>
-<li>В JavaScript существует числовое значение бесконечность `Infinity`.</li>
-<li>Ошибка вычислений дает `NaN`.</li>
-<li>Арифметические и математические функции преобразуют строку в точности в число, игнорируя начальные и конечные пробелы.</li>
-<li>Функции `parseInt/parseFloat` делают числа из строк, которые начинаются с числа.</li>
-<li>Есть четыре способа округления: `Math.floor`, `Math.round`, `Math.ceil` и битовый оператор. Для округления до нужного знака используйте `+n.toFixed(p)` или трюк с умножением и делением на <code>10<sup>p</sup></code>.</li>
-<li>Дробные числа дают ошибку вычислений. При необходимости ее можно отсечь округлением до нужного знака.</li>
-<li>Случайные числа от `0` до `1` генерируются с помощью `Math.random()`, остальные -- преобразованием из них.</li>
-</ul>
-
-Существуют и другие математические функции. Вы можете ознакомиться с ними в справочнике в разделах <a href="http://javascript.ru/Number">Number</a> и <a href="http://javascript.ru/Math">Math</a>.
-
-
-
-
-
-
-
-
diff --git a/1-js/4-data-structures/3-string/1-ucfirst/_js.view/test.js b/1-js/4-data-structures/3-string/1-ucfirst/_js.view/test.js
deleted file mode 100644
index b935f642..00000000
--- a/1-js/4-data-structures/3-string/1-ucfirst/_js.view/test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-describe("ucFirst", function() {
-  it('делает первый символ заглавным', function() {
-    assert.strictEqual(ucFirst("вася"), "Вася");
-  });
-
-  it('для пустой строки возвращает пустую строку', function() {
-    assert.strictEqual(ucFirst(""), "");
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/1-ucfirst/solution.md b/1-js/4-data-structures/3-string/1-ucfirst/solution.md
deleted file mode 100644
index e97aa8ec..00000000
--- a/1-js/4-data-structures/3-string/1-ucfirst/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Мы не можем просто заменить первый символ, т.к. строки в JavaScript неизменяемы.
-
-Но можно пересоздать строку на основе существующей, с заглавным первым символом:
-
-```js
-var newStr = str[0].toUpperCase() + str.slice(1);
-```
-
-Однако, есть небольшая проблемка -- в случае, когда строка пуста, будет ошибка.
-
-Ведь `str[0] == undefined`, а у `undefined` нет метода `toUpperCase()`.
-
-Выхода два. Первый -- использовать `str.charAt(0)`, он всегда возвращает строку, для пустой строки -- пустую, но не `undefined`. Второй -- отдельно проверить на пустую строку, вот так:
-
-```js
-//+ run
-function ucFirst(str) {
-  // только пустая строка в логическом контексте даст false
-  if (!str) return str;
-
-  return str[0].toUpperCase() + str.slice(1);
-}
-
-alert( ucFirst("вася") );
-```
-
-P.S. Возможны и более короткие решения, использующие методы для работы со строками, которые мы пройдём далее.
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/1-ucfirst/task.md b/1-js/4-data-structures/3-string/1-ucfirst/task.md
deleted file mode 100644
index 3c7e9965..00000000
--- a/1-js/4-data-structures/3-string/1-ucfirst/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Сделать первый символ заглавным
-
-[importance 5]
-
-Напишите функцию `ucFirst(str)`, которая возвращает строку `str` с заглавным первым символом, например:
-
-```js
-ucFirst("вася") == "Вася";
-ucFirst("") == ""; // нет ошибок при пустой строке
-```
-
-P.S. В JavaScript нет встроенного метода для этого. Создайте функцию, используя  `toUpperCase()` и `charAt()`.
diff --git a/1-js/4-data-structures/3-string/2-check-spam/_js.view/solution.js b/1-js/4-data-structures/3-string/2-check-spam/_js.view/solution.js
deleted file mode 100644
index abe6e87c..00000000
--- a/1-js/4-data-structures/3-string/2-check-spam/_js.view/solution.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function checkSpam(str) {
-  var lowerStr = str.toLowerCase();
-
-  return !!(~lowerStr.indexOf('viagra') || ~lowerStr.indexOf('xxx'));
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/2-check-spam/_js.view/test.js b/1-js/4-data-structures/3-string/2-check-spam/_js.view/test.js
deleted file mode 100644
index 1564a6b3..00000000
--- a/1-js/4-data-structures/3-string/2-check-spam/_js.view/test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-describe("checkSpam", function() {
-  it('считает спамом "buy ViAgRA now"', function() {
-    assert.isTrue(checkSpam('buy ViAgRA now'));
-  });
-
-  it('считает спамом "free xxxxx"', function() {
-    assert.isTrue(checkSpam('free xxxxx'));
-  });
-
-  it('не считает спамом "innocent rabbit"', function() {
-    assert.isFalse(checkSpam('innocent rabbit'));
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/2-check-spam/solution.md b/1-js/4-data-structures/3-string/2-check-spam/solution.md
deleted file mode 100644
index 9eecade3..00000000
--- a/1-js/4-data-structures/3-string/2-check-spam/solution.md
+++ /dev/null
@@ -1,17 +0,0 @@
-Метод `indexOf` ищет совпадение с учетом регистра. То есть, в строке `'xXx'` он не найдет `'XXX'`.
-
-Для проверки приведем к нижнему регистру и строку `str` а затем уже будем искать.
-
-```js
-//+ run
-function checkSpam(str) {
-  var lowerStr = str.toLowerCase();
-
-  return !!(~lowerStr.indexOf('viagra') || ~lowerStr.indexOf('xxx'));
-}
-
-alert( checkSpam('buy ViAgRA now') );
-alert( checkSpam('free xxxxx') );
-alert( checkSpam("innocent rabbit") );
-```
-
diff --git a/1-js/4-data-structures/3-string/2-check-spam/task.md b/1-js/4-data-structures/3-string/2-check-spam/task.md
deleted file mode 100644
index 566a2d1e..00000000
--- a/1-js/4-data-structures/3-string/2-check-spam/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Проверьте спам
-
-[importance 5]
-
-Напишите функцию `checkSpam(str)`, которая возвращает `true`, если строка `str` содержит 'viagra' or 'XXX', а иначе `false`.
-
-Функция должна быть нечувствительна к регистру:
-
-```js
-checkSpam('buy ViAgRA now') == true
-checkSpam('free xxxxx') == true
-checkSpam("innocent rabbit") == false
-```
-
diff --git a/1-js/4-data-structures/3-string/3-truncate/_js.view/solution.js b/1-js/4-data-structures/3-string/3-truncate/_js.view/solution.js
deleted file mode 100644
index e37f1a3b..00000000
--- a/1-js/4-data-structures/3-string/3-truncate/_js.view/solution.js
+++ /dev/null
@@ -1,4 +0,0 @@
-function truncate(str, maxlength) {
-  return (str.length > maxlength) ?
-    str.slice(0, maxlength - 3) + '...' : str;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/3-truncate/_js.view/test.js b/1-js/4-data-structures/3-string/3-truncate/_js.view/test.js
deleted file mode 100644
index c14666d6..00000000
--- a/1-js/4-data-structures/3-string/3-truncate/_js.view/test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-describe("truncate", function() {
-  it("обрезает строку до указанной длины (включая троеточие)", function() {
-    assert.equal(
-      truncate("Вот, что мне хотелось бы сказать на эту тему:", 20),
-      "Вот, что мне хоте..."
-    );
-  });
-
-  it("не меняет короткие строки", function() {
-    assert.equal(
-      truncate("Всем привет!", 20),
-      "Всем привет!"
-    );
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/3-truncate/solution.md b/1-js/4-data-structures/3-string/3-truncate/solution.md
deleted file mode 100644
index 113e68a2..00000000
--- a/1-js/4-data-structures/3-string/3-truncate/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Так как окончательная длина строки должна быть `maxlength`, то нужно её обрезать немного короче, чтобы дать место для троеточия.
-
-```js
-//+ run
-function truncate(str, maxlength) {
-  if (str.length > maxlength) {
-    return str.slice(0, maxlength - 3) + '...';
-    // итоговая длина равна maxlength
-  }
-
-  return str;
-}
-
-alert( truncate("Вот, что мне хотелось бы сказать на эту тему:", 20) );
-alert( truncate("Всем привет!", 20) );
-```
-
-Можно было бы написать этот код ещё короче:
-
-```js
-//+ run
-function truncate(str, maxlength) {
-  return (str.length > maxlength) ?
-    str.slice(0, maxlength - 3) + '...' : str;
-}
-```
-
-P.S. Кстати, в кодироке Unicode существует специальный символ "троеточие": `…` (HTML: `&hellip;`), который можно использовать вместо трёх точек. Если его использовать, то можно отрезать только один символ.
diff --git a/1-js/4-data-structures/3-string/3-truncate/task.md b/1-js/4-data-structures/3-string/3-truncate/task.md
deleted file mode 100644
index 4904d5f8..00000000
--- a/1-js/4-data-structures/3-string/3-truncate/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Усечение строки
-
-[importance 5]
-
-Создайте функцию `truncate(str, maxlength)`, которая проверяет длину строки  `str`, и если она превосходит `maxlength` -- заменяет конец `str` на `"..."`, так чтобы ее длина стала равна `maxlength`.
-
-Результатом функции должна быть (при необходимости) усечённая строка.
-
-Например:
-
-```js
-truncate("Вот, что мне хотелось бы сказать на эту тему:", 20) = "Вот, что мне хоте..."
-
-truncate("Всем привет!", 20) = "Всем привет!"
-```
-
-Эта функция имеет применение в жизни. Она используется, чтобы усекать слишком длинные темы сообщений.
diff --git a/1-js/4-data-structures/3-string/4-extract-currency/_js.view/test.js b/1-js/4-data-structures/3-string/4-extract-currency/_js.view/test.js
deleted file mode 100644
index 45e0eb8c..00000000
--- a/1-js/4-data-structures/3-string/4-extract-currency/_js.view/test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-describe("extractCurrencyValue", function() {
-
-  it("выделяет из строки $120 число 120", function() {
-    assert.strictEqual(extractCurrencyValue('$120'), 120);
-  });
-
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/4-extract-currency/solution.md b/1-js/4-data-structures/3-string/4-extract-currency/solution.md
deleted file mode 100644
index d2c8c1a0..00000000
--- a/1-js/4-data-structures/3-string/4-extract-currency/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Возьмём часть строки после первого символа и приведём к числу: `+str.slice(1)`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/3-string/4-extract-currency/task.md b/1-js/4-data-structures/3-string/4-extract-currency/task.md
deleted file mode 100644
index ee4691d1..00000000
--- a/1-js/4-data-structures/3-string/4-extract-currency/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Выделить число
-
-[importance 4]
-
-Есть стоимость в виде строки: `"$120"`. То есть, первым идёт знак валюты, а затем -- число.
-
-Создайте функцию `extractCurrencyValue(str)`, которая будет из такой строки выделять число-значение, в данном случае 120.
-
diff --git a/1-js/4-data-structures/3-string/article.md b/1-js/4-data-structures/3-string/article.md
deleted file mode 100644
index 5205e8fb..00000000
--- a/1-js/4-data-structures/3-string/article.md
+++ /dev/null
@@ -1,534 +0,0 @@
-# Строки
-
-В JavaScript любые текстовые данные являются строками. Не существует отдельного типа "символ", который есть в ряде других языков.
-
-Внутренним форматом строк, вне зависимости от кодировки страницы, является [Юникод (Unicode)](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4).
-[cut]
-## Создание строк 
-
-Строки создаются при помощи двойных или одинарных кавычек:
-
-```js
-var text = "моя строка";
-
-var anotherText = 'еще строка';
-
-var str = "012345";
-```
-
-В JavaScript нет разницы между двойными и одинарными кавычками. 
-
-### Специальные символы
-
-Строки могут содержать специальные символы. Самый часто используемый из таких символов -- это "перевод строки".
-
-Он обозначается как `\n`, например:
-
-```js
-//+ run
-alert( 'Привет\nМир' ); // выведет "Мир" на новой строке
-```
-
-Есть и более редкие символы, вот их список:
-
-<table>
-<CAPTION>Специальные символы</CAPTION>
-<thead>
-<tr><th>Символ</th><th>Описание</th></tr>
-</thead>
-<tbody>
-<tr><td>\b</td><td>Backspace</td></tr>
-<tr><td>\f</td><td>Form feed</td></tr>
-<tr><td>\n</td><td>New line</td></tr>
-<tr><td>\r</td><td>Carriage return</td></tr>
-<tr><td>\t</td><td>Tab</td></tr>
-<tr><td>\uNNNN</td><td>Символ в кодировке Юникод с шестнадцатеричным кодом `NNNN`. Например, `\u00A9` -- юникодное представление символа копирайт &#xA9;
-</td></tr>
-</tbody>
-</table>
-
-### Экранирование специальных символов
-
-Если строка в одинарных кавычках, то внутренние одинарные кавычки внутри должны быть *экранированы*, то есть снабжены обратным слешем `\'`, вот так:
-
-```js
-var str = '*!*I\'m*/!* a JavaScript programmer';
-```
-
-В двойных кавычках -- экранируются внутренние двойные:
-
-```js
-//+ run
-var str = "I'm a JavaScript \"programmer\" ";
-alert( str ); // I'm a JavaScript "programmer"
-```
-
-Экранирование служит исключительно для правильного восприятия строки JavaScript. В памяти строка будет содержать сам символ без `'\'`. Вы можете увидеть это, запустив пример выше.
-
-Сам символ обратного слэша `'\'` является служебным, поэтому всегда экранируется, т.е пишется как `\\`:
-
-```js
-//+ run
-var str = ' символ \\ ';
-
-alert( str ); // символ \
-```
-
-Заэкранировать можно любой символ. Если он не специальный, то ничего не произойдёт:
-
-```js
-//+ run
-alert( "\a" ); // a
-// идентично alert(  "a"  );
-```
-
-## Методы и свойства 
-
-Здесь мы рассмотрим методы и свойства строк, с некоторыми из которых мы знакомились ранее, в главе [](/properties-and-methods).
-
-
-### Длина length
-
-Одно из самых частых действий со строкой -- это получение ее длины:
-
-```js
-//+ run
-var str = "My\n"; // 3 символа. Третий - перевод строки
-
-alert( str.length ); // 3
-```
-
-### Доступ к символам   
-
-Чтобы получить символ, используйте вызов `charAt(позиция)`. Первый символ имеет позицию `0`:
-
-```js
-//+ run
-var str = "jQuery";
-alert( str.charAt(0) ); // "j"
-```
-
-В JavaScript **нет отдельного типа "символ"**, так что `charAt` возвращает строку, состоящую из выбранного символа.
-
-Также для доступа к символу можно также использовать квадратные скобки:
-
-```js
-//+ run
-var str = "Я - современный браузер!";
-alert( str[0] ); // "Я"
-```
-
-Разница между этим способом и `charAt` заключается в том, что если символа нет -- `charAt` выдает пустую строку, а скобки -- `undefined`:
-
-```js
-//+ run
-alert( "".charAt(0) ); // пустая строка
-alert( "" [0] ); // undefined
-```
-
-Вообще же метод `charAt` существует по историческим причинам, ведь квадратные скобки -- проще и короче.
-
-[warn header="Вызов метода -- всегда со скобками"]
-
-Обратите внимание, `str.length` -- это *свойство* строки, а `str.charAt(pos)` -- *метод*, т.е. функция.
-
-Обращение к методу всегда идет со скобками, а к свойству -- без скобок. 
-
-[/warn]
-
-
-### Изменения строк   
-
-Содержимое строки в JavaScript нельзя изменять. Нельзя взять символ посередине и заменить его. Как только строка создана -- она такая навсегда.
-
-Можно лишь создать целиком новую строку и присвоить в переменную вместо старой, например:
-
-```js
-//+ run
-var str = "строка";
-
-str = str[3] + str[4] + str[5];
-
-alert( str ); // ока
-```
-
-### Смена регистра   
-
-Методы `toLowerCase()` и `toUpperCase()` меняют регистр строки на нижний/верхний:
-
-```js
-//+ run
-alert( "Интерфейс".toUpperCase() ); // ИНТЕРФЕЙС
-```
-
-Пример ниже получает первый символ и приводит его к нижнему регистру:
-
-```js
-alert( "Интерфейс" [0].toLowerCase() ); // 'и'
-```
-
-### Поиск подстроки
-
-Для поиска подстроки есть метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf">indexOf(подстрока[, начальная_позиция])</a>. 
-
-Он возвращает позицию, на которой находится `подстрока` или `-1`, если ничего не найдено. Например:
-
-```js
-//+ run
-var str = "Widget with id";
-
-alert( str.indexOf("Widget") ); // 0, т.к. "Widget" найден прямо в начале str
-alert( str.indexOf("id") ); // 1, т.к. "id" найден, начиная с позиции 1
-alert( str.indexOf("widget") ); // -1, не найдено, так как поиск учитывает регистр
-```
-
-Необязательный второй аргумент позволяет искать, начиная с указанной позиции. Например, первый раз `"id"` появляется на позиции `1`. Чтобы найти его следующее появление -- запустим поиск с позиции `2`:
-
-```js
-//+ run
-var str = "Widget with id";
-
-alert(str.indexOf("id", 2)) // 12, поиск начат с позиции 2
-```
-
-Также существует аналогичный метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a>, который ищет не с начала, а с конца строки.
-
-[smart]
-Для красивого вызова `indexOf` применяется побитовый оператор НЕ `'~'`. 
-
-Дело в том, что вызов `~n` эквивалентен выражению `-(n+1)`, например:
-
-```js
-//+ run
-alert( ~2 ); // -(2+1) = -3
-alert( ~1 ); // -(1+1) = -2
-alert( ~0 ); // -(0+1) = -1
-*!*
-alert( ~-1 ); // -(-1+1) = 0
-*/!*
-```
-
-Как видно, `~n` -- ноль только в случае, когда `n == -1`. 
- 
-То есть, проверка `if ( ~str.indexOf(...) )` означает, что результат `indexOf` отличен от `-1`, т.е. совпадение есть.
-
-Вот так:
-
-```js
-//+ run
-var str = "Widget";
-
-if (~str.indexOf("get")) {
-  alert( 'совпадение есть!' );
-}
-```
-
-Вообще, использовать возможности языка неочевидным образом не рекомендуется, поскольку ухудшает читаемость кода. 
-
-Однако, в данном случае, все в порядке. Просто запомните: `'~'` читается как "не минус один", а `"if ~str.indexOf"` читается как `"если найдено"`.
-
-[/smart]
-
-
-### Поиск всех вхождений
-
-Чтобы найти все вхождения подстроки, нужно запустить `indexOf` в цикле. Как только получаем очередную позицию -- начинаем следующий поиск со следующей.
-
-Пример такого цикла:
-
-```js
-//+ run
-var str = "Ослик Иа-Иа посмотрел на виадук"; // ищем в этой строке 
-var target = "Иа"; // цель поиска
-
-var pos = 0;
-while (true) {
-  var foundPos = str.indexOf(target, pos);
-  if (foundPos == -1) break;
-
-  alert( foundPos ); // нашли на этой позиции
-  pos = foundPos + 1; // продолжить поиск со следующей
-}
-```
-
-Такой цикл начинает поиск с позиции `0`, затем найдя подстроку на позиции `foundPos`, следующий поиск продолжит с позиции `pos = foundPos+1`, и так далее, пока что-то находит.
-
-Впрочем, тот же алгоритм можно записать и короче:
-
-```js
-//+ run
-var str = "Ослик Иа-Иа посмотрел на виадук"; // ищем в этой строке 
-var target = "Иа"; // цель поиска
-
-*!*
-var pos = -1;
-while ((pos = str.indexOf(target, pos + 1)) != -1) {
-  alert( pos );
-}
-*/!*
-```
-
-### Взятие подстроки: substr, substring, slice.   
-
-В JavaScript существуют целых 3 (!) метода для взятия подстроки, с небольшими отличиями между ними.
-
-<dl>
-<dt>`substring(start [, end])`
-<dd>
-Метод `substring(start, end)` возвращает подстроку с позиции `start` до, но не включая `end`.
-
-```js
-//+ run
-var str = "*!*s*/!*tringify";
-alert(str.substring(0,1)); // "s", символы с позиции 0 по 1 не включая 1.
-```
-
-Если аргумент `end` отсутствует, то идет до конца строки:
-
-```js
-//+ run
-var str = "st*!*ringify*/!*";
-alert(str.substring(2)); // ringify, символы с позиции 2 до конца
-```
-
-</dd>
-<dt>`substr(start [, length])`</dt>
-<dd>Первый аргумент имеет такой же смысл, как и в `substring`, а второй содержит не конечную позицию, а количество символов.
-
-```js
-//+ run
-var str = "st*!*ring*/!*ify";
-str = str.substr(2,4); // ring, со 2й позиции 4 символа 
-alert(str)
-```
-
-Если второго аргумента нет -- подразумевается "до конца строки".</dd>
-<dt>`slice(start [, end])`</dt>
-<dd>Возвращает часть строки от позиции `start` до, но не включая, позиции `end`. Смысл параметров -- такой же как в `substring`.</dd>
-</dl>
-
-### Отрицательные аргументы
-
-Различие между `substring` и `slice` -- в том, как они работают с отрицательными и выходящими за границу строки аргументами:
-
-<dl>
-<dt>`substring(start, end)`</dt>
-<dd>Отрицательные аргументы интерпретируются как равные нулю. Слишком большие значения усекаются до длины строки:
-
-```js
-//+ run
-alert( "testme".substring(-2) ); // "testme", -2 становится 0
-```
-
-Кроме того, если <code>start &gt; end</code>, то аргументы меняются местами, т.е. возвращается участок строки *между* `start` и `end`:
-
-```js
-//+ run
-alert( "testme".substring(4, -1) ); // "test"
-// -1 становится 0 -> получили substring(4, 0) 
-// 4 > 0, так что аргументы меняются местами -> substring(0, 4) = "test"
-```
-
-</dd>
-<dt>`slice`</dt>
-<dd>Отрицательные значения отсчитываются от конца строки:
-
-```js
-//+ run
-alert( "testme".slice(-2) ); // "me", от 2 позиции с конца
-```
-
-
-
-```js
-//+ run
-alert( "testme".slice(1, -1) ); // "estm", от 1 позиции до первой с конца.
-```
-
-Это гораздо более удобно, чем странная логика `substring`.
-</dd>
-</dl>
-
-Отрицательное значение первого параметра поддерживается в `substr` во всех браузерах, кроме IE8-.
-
-Если выбирать из этих трёх методов один, для использования в большинстве ситуаций -- то это будет `slice`: он и отрицательные аргументы поддерживает и работает наиболее очевидно. 
-
-## Кодировка Юникод
-
-Как мы знаем, символы сравниваются в алфавитном порядке `'А' < 'Б' < 'В' < ... < 'Я'`. 
-
-Но есть несколько странностей..
-
-<ol>
-<li>Почему буква `'а'` маленькая больше буквы `'Я'` большой?
-
-```js
-//+ run
-alert( 'а' > 'Я' ); // true
-```
-
-</li><li>
-Буква `'ё'` находится в алфавите между `е` и `ж`: <code>абвгде**ё**жз..</code>. Но почему тогда `'ё'` больше `'я'`?
-
-```js
-//+ run
-alert( 'ё' > 'я' ); // true
-```
-
-</li>
-</ol>
-
-Чтобы разобраться с этим, обратимся к внутреннему представлению строк в JavaScript.
-
-**Все строки имеют внутреннюю кодировку [Юникод](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4).**
-
-Неважно, на каком языке написана страница, находится ли она в windows-1251 или utf-8. Внутри JavaScript-интерпретатора все строки приводятся к единому "юникодному" виду. Каждому символу соответствует свой код.
-
-Есть метод для получения символа по его коду:
-<dl>
-<dt>String.fromCharCode(code)</dt>
-<dd>Возвращает символ по коду `code`:
-
-```js
-//+ run
-alert( String.fromCharCode(1072) ); // 'а'
-```
-
-</dd>
-</dl>
-
-...И метод для получения цифрового кода из символа:
-
-<dl>
-<dt>str.charCodeAt(pos)</dt>
-<dd>Возвращает код символа на позиции `pos`. Отсчет позиции начинается с нуля.
-
-```js
-//+ run
-alert( "абрикос".charCodeAt(0) ); // 1072, код 'а'
-```
-
-</dd>
-</dl>
-
-Теперь вернемся к примерам выше. Почему сравнения `'ё' > 'я'` и `'а' > 'Я'` дают такой странный результат?
-
-Дело в том, что **символы сравниваются не по алфавиту, а по коду**. У кого код больше -- тот и больше. В юникоде есть много разных символов. Кириллическим буквам соответствует только небольшая часть из них, подробнее -- [Кириллица в Юникоде](http://ru.wikipedia.org/wiki/%D0%9A%D0%B8%D1%80%D0%B8%D0%BB%D0%BB%D0%B8%D1%86%D0%B0_%D0%B2_%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4%D0%B5).
-
-Выведем отрезок символов юникода с кодами от `1034` до `1113`:
-
-```js
-//+ run
-var str = '';
-for (var i = 1034; i <= 1113; i++) {
-  str += String.fromCharCode(i);
-}
-alert( str );
-```
-
-Результат:
-<div style="overflow: auto">
-<code>ЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљ</code>
-</div>
-
-Мы можем увидеть из этого отрезка две важных вещи:
-
-<ol>
-<li>**Строчные буквы идут после заглавных, поэтому они всегда больше.**
-
-В частности, `'а'(код 1072) > 'Я'(код 1071)`.
-
-То же самое происходит и в английском алфавите, там `'a' > 'Z'`.
-</li>
-<li>**Ряд букв, например `ё`, находятся вне основного алфавита.**
-
-В частности, маленькая буква `ё` имеет код, больший чем `я`, поэтому **`'ё'(код 1105) > 'я'(код 1103)`**. 
-
-Кстати, большая буква `Ё` располагается в Unicode до `А`, поэтому **`'Ё'`(код 1025) < `'А'`(код 1040)**. Удивительно: есть буква меньше чем `А` :)
-</li>
-</ol>
-
-**Буква `ё` не уникальна, точки над буквой используются и в других языках, приводя к тому же результату.**
-
-Например, при работе с немецкими названиями:
-
-```js
-//+ run
-alert( "ö" > "z" ); // true
-```
-
-[smart header="Юникод в HTML"]
-Кстати, если мы знаем код символа в кодировке юникод, то можем добавить его в HTML, используя "числовую ссылку" (numeric character reference). 
-
-Для этого нужно написать сначала `&#`, затем код, и завершить точкой с запятой `';'`. Например, символ `'а'` в виде числовой ссылки: `&#1072;`.
-
-Если код хотят дать в 16-ричной системе счисления, то начинают с `&#x`.
-
-В юникоде есть много забавных и полезных символов, например, символ ножниц: &#x2702; (`&#x2702;`), дроби: &#xBD; (`&#xBD;`) &#xBE; (`&#xBE;`) и другие. Их можно использовать вместо картинок в дизайне.
-[/smart]
-
-
-## Посимвольное сравнение
-
-Сравнение строк работает *лексикографически*, иначе говоря, посимвольно. 
-
-Сравнение строк `s1` и `s2` обрабатывается по следующему алгоритму:
-
-<ol><li>Сравниваются первые символы: `s1[0]` и `s2[0]`. Если они разные, то сравниваем их и, в зависимости от результата их сравнения, возвратить `true` или `false`. Если же они одинаковые, то...</li>
-<li>Сравниваются вторые символы `s1[1]` и `s2[1]`</li>
-<li>Затем третьи `s1[2]` и `s2[2]` и так далее, пока символы не будут наконец разными, и тогда какой символ больше -- та строка и больше. Если же в какой-либо строке закончились символы, то считаем, что она меньше, а если закончились в обеих -- они равны.</li>
-</ol>
-
-Спецификация языка определяет этот алгоритм более детально. Если же говорить простыми словами, смысл алгоритма в точности соответствует порядку, по которому имена заносятся в орфографический словарь.
-
-```js
-"Вася" > "Ваня" // true, т.к. начальные символы совпадают, а потом 'с' > 'н'
-"Дома" > "До" // true, т.к. начало совпадает, но в 1й строке больше символов
-```
-
-[warn header="Числа в виде строк сравниваются как строки"]  
-
-Бывает, что числа приходят в скрипт в виде строк, например как результат `prompt`. В этом случае результат их сравнения будет неверным:
-
-```js
-//+ run
-alert( "2" > "14" ); // true, так как это строки, и для первых символов верно "2" > "1"
-```
-
-Если хотя бы один аргумент -- не строка, то другой будет преобразован к числу:
-
-```js
-//+ run
-alert( 2 > "14" ); // false
-```
-
-[/warn]
-
-## Правильное сравнение
-
-Все современные браузеры, кроме IE10- (для которых нужно подключить библиотеку [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) поддерживают стандарт [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), поддерживающий сравнение строк на разных языках, с учётом их правил.
-
-Способ использования:
-
-```js
-//+ run
-var str = "Ёлки";
-
-alert( str.localeCompare("Яблони") ); // -1
-```
-
-Метод `str1.localeCompare(str2)` возвращает `-1`, если `str1 < str2`, `1`, если `str1 > str2` и `0`, если они равны.
-
-Более подробно про устройство этого метода можно будет узнать в статье [](/intl), когда это вам понадобится.
-
-## Итого
-
-<ul>
-<li>Строки в JavaScript имеют внутреннюю кодировку Юникод. При написании строки можно использовать специальные символы, например `\n` и вставлять юникодные символы по коду.</li>
-<li>Мы познакомились со свойством `length` и методами `charAt`, `toLowerCase/toUpperCase`, `substring/substr/slice` (предпочтителен `slice`). Есть и другие методы, например [trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) обрезает пробелы с начала и конца строки.</li>
-<li>Строки сравниваются побуквенно. Поэтому если число получено в виде строки, то такие числа могут сравниваться некорректно, нужно преобразовать его к типу *number*.</li>
-<li>При сравнении строк следует иметь в виду, что буквы сравниваются по их кодам. Поэтому большая буква меньше маленькой, а буква `ё` вообще вне основного алфавита.</li>
-<li>Для правильного сравнения существует целый стандарт ECMA 402. Это не такое простое дело, много языков и много правил. Он поддерживается во всех современных браузерах, кроме IE10-, в которых нужна библиотека [](https://github.com/andyearnshaw/Intl.js/). Такое сравнение работает через вызов `str1.localeCompare(str2)`.</li>
-</ul>
-
-Больше информации о методах для строк можно получить в справочнике: [http://javascript.ru/String]().
\ No newline at end of file
diff --git a/1-js/4-data-structures/4-object/1-hello-object/solution.md b/1-js/4-data-structures/4-object/1-hello-object/solution.md
deleted file mode 100644
index 465bf1ad..00000000
--- a/1-js/4-data-structures/4-object/1-hello-object/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-```js
-var user = {};
-user.name = "Вася";
-user.surname = "Петров";
-user.name = "Сергей";
-delete user.name;
-```
-
diff --git a/1-js/4-data-structures/4-object/1-hello-object/task.md b/1-js/4-data-structures/4-object/1-hello-object/task.md
deleted file mode 100644
index b0dfdaa3..00000000
--- a/1-js/4-data-structures/4-object/1-hello-object/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Первый объект
-
-[importance 3]
-
-Мини-задача на синтаксис объектов. Напишите код, по строке на каждое действие.
-<ol>
-<li>Создайте пустой объект `user`.</li>
-<li>Добавьте свойство `name` со значением `Вася`.</li>
-<li>Добавьте свойство `surname` со значением `Петров`.</li>
-<li>Поменяйте значение `name` на `Сергей`.</li>
-<li>Удалите свойство `name` из объекта.</li>
-</ol>
-
diff --git a/1-js/4-data-structures/4-object/article.md b/1-js/4-data-structures/4-object/article.md
deleted file mode 100644
index 862ebc46..00000000
--- a/1-js/4-data-structures/4-object/article.md
+++ /dev/null
@@ -1,339 +0,0 @@
-# Объекты как ассоциативные массивы
-
-Объекты в JavaScript сочетают в себе два важных функционала.
-
-Первый -- это  ассоциативный массив: структура, пригодная для хранения любых данных. В этой главе мы рассмотрим использование объектов именно как массивов. 
-
-Второй -- языковые возможности для объектно-ориентированного программирования. Эти возможности мы изучим в последующих разделах учебника.
-
-[cut]
-## Ассоциативные массивы
-
-[Ассоциативный массив](http://ru.wikipedia.org/wiki/%D0%90%D1%81%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2) -- структура данных, в которой можно хранить любые данные в формате ключ-значение. 
-
-Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
-
-<img src="object.png">
-
-В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
-
-Кстати, в других языках программирования такую структуру данных также называют *"словарь"* и *"хэш"*.  
-
-## Создание объектов
-
-Пустой объект ("пустой шкаф") может быть создан одним из двух синтаксисов:
-
-```js
-1. o = new Object();
-2. o = {}; // пустые фигурные скобки
-```
-
-Обычно все пользуются синтаксисом `(2)`, т.к. он короче.
-
-## Операции с объектом
-
-Объект может содержать в себе любые значения, которые называются *свойствами объекта*.  Доступ к свойствам осуществляется по *имени свойства* (иногда говорят *"по ключу"*).
-
-Например, создадим объект `person` для хранения информации о человеке:
-
-```js
-var person = {}; // пока пустой
-```
-
-<img src="object-person-empty.png">
-
-
-Основные операции с объектами -- это создание, получение и удаление свойств.
-
-Для обращения к свойствам используется запись "через точку", вида `объект.свойство`, например:
-
-```js
-// при присвоении свойства в объекте автоматически создаётся "ящик" 
-// с именем "name" и в него записывается содержимое 'Вася'
-person.name = 'Вася';
-
-person.age = 25; // запишем ещё одно свойство: с именем 'age' и значением 25
-```
-
-<img src="object-person-1.png">
-
-Значения хранятся "внутри" ящиков. Обратим внимание -- любые значения, любых типов: число, строка -- не важно.
-
-Чтобы прочитать их -- также обратимся через точку:
-```js
-alert( person.name + ': ' + person.age ); // "Вася: 25"
-```
-
-Удаление осуществляется оператором `delete`:
-
-```js
-delete person.age;
-```
-
-Осталось только свойство `name`:
-
-<img src="object-person-2.png">
-
-Следующая операция:
-<ol start="4">
-<li>**Проверка существования свойства с определенным ключом.**</li>
-</ol>
-
-Для проверки существования свойства в объекте есть оператор `in`. 
-
-Его синтаксис: `"prop" in obj`, причем имя свойства -- в виде строки, например:
-
-```js
-if ("name" in person) {
-  alert( "Свойство name существует!" );
-}
-```
-
-Впрочем, чаще используется другой способ -- сравнение значения с `undefined`.
-
-Дело в том, что **в JavaScript можно обратиться к любому свойству объекта, даже если его нет**. Ошибки не будет.
-
-Но если свойство не существует, то вернется специальное значение `undefined`:
-
-```js
-//+ run
-var person = {};
-
-alert( person.lalala ); // undefined, нет свойства с ключом lalala
-```
-
-Таким образом **мы можем легко проверить существование свойства -- получив его и сравнив с `undefined`**:
-
-```js
-//+ run
-var person = {
-  name: "Василий"
-};
-
-alert( person.lalala === undefined ); // true, свойства нет
-alert( person.name === undefined ); // false, свойство есть.
-```
-
-[smart header="Разница между проверками `in` и `=== undefined`"]
-
-Есть два средства для проверки наличия свойства в объекте: первое -- оператор `in`, второе -- получить его и сравнить его с `undefined`.
-
-Они почти идентичны, но есть одна небольшая разница.
-
-Дело в том, что технически возможно, что *свойство есть и равно `undefined`*:
-
-```js
-//+ untrusted refresh run
-var obj = {};
-obj.test = undefined; // добавили свойство со значением undefined
-
-*!*
-// проверим наличие свойств test и заведомо отсутствующего blabla
-alert( obj.test === undefined ); // true
-alert( obj.blabla === undefined ); // true
-*/!*
-```
-
-...При этом, как видно из кода, при простом сравнении наличие такого свойства будет неотличимо от его отсутствия.
-
-Но оператор `in` гарантирует правильный результат:
-
-```js
-//+ untrusted refresh run
-var obj = {};
-obj.test = undefined;
-
-*!*
-alert( "test" in obj ); // true 
-alert( "blabla" in obj ); // false
-*/!*
-```
-
-Как правило, в коде мы не будем присваивать `undefined`, чтобы корректно работали обе проверки. А в качестве значения, обозначающего неизвестность и неопределенность, будем использовать `null`.
-[/smart]
- 
-### Доступ через квадратные скобки
-
-Существует альтернативный синтаксис работы со свойствами, использующий квадратные скобки `объект['свойство']`:
-
-```js
-//+ run
-var person = {};
-
-person['name'] = 'Вася'; // то же что и person.name = 'Вася'
-```
-
-Записи `person['name']` и `person.name` идентичны, но квадратные скобки позволяют использовать в качестве имени свойства любую строку:
-
-```js
-//+ run
-var person = {};
-
-person['любимый стиль музыки'] = 'Джаз'; // то же что и person.name = 'Вася'
-```
-
-Такое присвоение было бы невозможно "через точку", так интерпретатор после первого пробела подумает, что свойство закончилось, и далее выдаст ошибку:
-
-```js
-//+ run
-person.любимый стиль музыки = 'Джаз'; // ??? ошибка
-```
-
-В обоих случаях, **имя свойства обязано быть строкой**. Если использовано значение другого типа -- JavaScript приведет его к строке автоматически.
-
-### Доступ к свойству через переменную
-
-Квадратные скобки также позволяют обратиться к свойству, имя которого хранится в переменной:
-
-```js
-//+ run
-var person = {
-  age: 25
-};
-var key = 'age';
-
-alert( person[key] ); // выведет person['age']
-```
-
-Вообще, если имя свойства хранится в переменной (`var key = "age"`), то единственный способ к нему обратиться -- это квадратные скобки `person[key]`.
-
-Доступ через точку используется, если мы на этапе написания программы уже знаем название свойства. А если оно будет определено по ходу выполнения, например, введено посетителем и записано в переменную, то единственный выбор -- квадратные скобки.
-
-### Объявление со свойствами  
-
-Объект можно заполнить значениями при создании, указав их в фигурных скобках: `{ ключ1: значение1, ключ2: значение2, ... }`.
-
-Такой синтаксис называется *литеральным* (англ. literal).
-
-Следующие два фрагмента кода создают одинаковый объект:
-
-```js
-var menuSetup = {
-  width: 300,
-  height: 200,
-  title: "Menu"
-};
-
-// то же самое, что:
-
-var menuSetup = {};
-menuSetup.width = 300;
-menuSetup.height = 200;
-menuSetup.title = 'Menu';
-```
-
-Названия свойств можно перечислять как в кавычках, так и без, если они удовлетворяют ограничениям для имён переменных.
-
-Например:
-
-```js
-var menuSetup = {
-  width: 300,
-  'height': 200,
-  "мама мыла раму": true
-};
-```
-
-В качестве значения можно тут же указать и другой объект:
-
-```js
-var user = {
-  name: "Таня",
-  age: 25,
-*!*
-  size: {
-    top: 90,
-    middle: 60,
-    bottom: 90
-  }
-*/!*
-}
-
-alert(user.name) // "Таня"
-
-alert(user.size.top) // 90
-```
-
-Здесь значением свойства `size` является объект `{top: 90, middle: 60, bottom: 90 }`. 
-## Компактное представление объектов
-
-[warn header="Hardcore coders only"]
-Эта секция относится ко внутреннему устройству структуры данных. Она не обязательна к прочтению.
-[/warn]
-
-Браузер использует специальное "компактное" представление объектов, чтобы сэкономить память в том случае, когда однотипных объектов много.
-
-Например, посмотрим на такой объект:
-
-```js
-var user = {
-  name: "Vasya",
-  age: 25
-};
-```
-
-Здесь содержится информация о свойстве `name` и его строковом значении, а также о свойстве `age` и его численном значении. Представим, что таких объектов много. 
-
-Получится, что информация об именах свойств `name` и `age` дублируется в каждом объекте. Чтобы этого избежать, браузер применяет оптимизацию.
-
-**При создании множества объектов одного и того же вида (с одинаковыми полями) интерпретатор выносит описание полей в отдельную структуру. А сам объект остаётся в виде непрерывной области памяти с данными.**
-
-Например, есть много объектов с полями `name` и `age`:
-
-```js
-//+ no-beautify
-{name: "Вася", age: 25}
-{name: "Петя", age: 22}
-{name: "Маша", age: 19}
-...
-```
-
-Для их эффективного хранения будет создана структура, которая описывает данный вид объектов. Выглядеть она будет примерно так: `<string name, number age>`. А сами объекты будут представлены в памяти только данными:
-
-```js
-//+ no-beautify
-<структура: string name, number age>
-Вася 25
-Петя 22
-Маша 19
-```
-
-При добавлении нового объекта такой структуры достаточно хранить значения полей, но не их имена. Экономия памяти -- налицо.
-
-А что происходит, если к объекту добавляется новое свойство? Например, к одному из них добавили свойство `isAdmin`:
-
-```js
-user.isAdmin = true;
-```
-
-В этом случае браузер смотрит, есть ли уже структура, под которую подходит такой объект. Если нет -- она создаётся и объект привязывается к ней. 
- 
-**Эта оптимизация является примером того, что далеко не всё то, что мы пишем, один-в-один переносится в память.**
-
-Современные интерпретаторы очень стараются оптимизировать как код, так и структуры данных. Детали применения и реализации этого способа хранения варьируются от браузера к браузеру. О том, как это сделано в Chrome можно узнать, например, из презентации [Know Your Engines](http://www.slideshare.net/newmovie/know-yourengines-velocity2011). Она была некоторое время назад, но с тех пор мало что изменилось.
-
-
-## Итого
-
-Объекты -- это ассоциативные массивы с дополнительными возможностями:
-
-<ul>
-<li>Доступ к элементам осуществляется:
-<ul>
-<li>Напрямую по ключу `obj.prop = 5`</li>
-<li>Через переменную, в которой хранится ключ:
-
-```js
-var key = "prop";
-obj[key] = 5
-```
-
-</li>
-</ul>
-<li>Удаление ключей: `delete obj.name`.</li>
-<li>Существование свойства может проверять оператор `in`: `if ("prop" in obj)`, как правило, работает и просто сравнение `if (obj.prop !== undefined)`.</li>
-</ul>
-
-
-
-
diff --git a/1-js/4-data-structures/4-object/object-person-1.png b/1-js/4-data-structures/4-object/object-person-1.png
deleted file mode 100644
index 532330e0..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-1.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object-person-1@2x.png b/1-js/4-data-structures/4-object/object-person-1@2x.png
deleted file mode 100644
index 7904d95c..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-1@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object-person-2.png b/1-js/4-data-structures/4-object/object-person-2.png
deleted file mode 100644
index 4630054b..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-2.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object-person-2@2x.png b/1-js/4-data-structures/4-object/object-person-2@2x.png
deleted file mode 100644
index 73ab98e8..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-2@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object-person-empty.png b/1-js/4-data-structures/4-object/object-person-empty.png
deleted file mode 100644
index 668f13bf..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-empty.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object-person-empty@2x.png b/1-js/4-data-structures/4-object/object-person-empty@2x.png
deleted file mode 100644
index da71618c..00000000
Binary files a/1-js/4-data-structures/4-object/object-person-empty@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object.png b/1-js/4-data-structures/4-object/object.png
deleted file mode 100644
index abda01bb..00000000
Binary files a/1-js/4-data-structures/4-object/object.png and /dev/null differ
diff --git a/1-js/4-data-structures/4-object/object@2x.png b/1-js/4-data-structures/4-object/object@2x.png
deleted file mode 100644
index bd2590bb..00000000
Binary files a/1-js/4-data-structures/4-object/object@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/solution.js b/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/solution.js
deleted file mode 100644
index 7ce59096..00000000
--- a/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/solution.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function isEmpty(obj) {
-  for (var key in obj) {
-    return false;
-  }
-  return true;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/test.js b/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/test.js
deleted file mode 100644
index ca9ec19a..00000000
--- a/1-js/4-data-structures/5-object-for-in/1-is-empty/_js.view/test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-describe("isEmpty", function() {
-  it("если объект пустой - возвращает true", function() {
-    assert.isTrue(isEmpty({}));
-  });
-
-  it("если у объекта есть любое свойство, не важно какое - возвращает false", function() {
-    assert.isFalse(isEmpty({
-      anything: false
-    }));
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/1-is-empty/solution.md b/1-js/4-data-structures/5-object-for-in/1-is-empty/solution.md
deleted file mode 100644
index 324b761e..00000000
--- a/1-js/4-data-structures/5-object-for-in/1-is-empty/solution.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-```js
-//+ run
-function isEmpty(obj) {
-  for (var key in obj) {
-    return false;
-  }
-  return true;
-}
-
-var schedule = {};
-
-alert( isEmpty(schedule) ); // true
-
-schedule["8:30"] = "подъём";
-
-alert( isEmpty(schedule) ); // false
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/1-is-empty/task.md b/1-js/4-data-structures/5-object-for-in/1-is-empty/task.md
deleted file mode 100644
index 6a5a6760..00000000
--- a/1-js/4-data-structures/5-object-for-in/1-is-empty/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Определите, пуст ли объект
-
-[importance 5]
-
-Создайте функцию `isEmpty(obj)`, которая возвращает `true`, если в объекте нет свойств и `false` -- если хоть одно свойство есть.
-
-Работать должно так:
-
-```js
-function isEmpty(obj) {
-  /* ваш код */
-}
-
-var schedule = {};
-
-alert( isEmpty(schedule) ); // true
-
-schedule["8:30"] = "подъём";
-
-alert( isEmpty(schedule) ); // false
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/2-sum-salaries/solution.md b/1-js/4-data-structures/5-object-for-in/2-sum-salaries/solution.md
deleted file mode 100644
index 4c07e961..00000000
--- a/1-js/4-data-structures/5-object-for-in/2-sum-salaries/solution.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-```js
-//+ run
-"use strict";
-
-var salaries = {
-  "Вася": 100,
-  "Петя": 300,
-  "Даша": 250
-};
-
-var sum = 0;
-for (var name in salaries) {
-  sum += salaries[name];
-}
-
-alert( sum );
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/2-sum-salaries/task.md b/1-js/4-data-structures/5-object-for-in/2-sum-salaries/task.md
deleted file mode 100644
index 9a321fad..00000000
--- a/1-js/4-data-structures/5-object-for-in/2-sum-salaries/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Сумма свойств
-
-[importance 5]
-
-Есть объект `salaries` с зарплатами. Напишите код, который выведет сумму всех зарплат.
-
-Если объект пустой, то результат должен быть `0`.
-
-Например:
-
-```js
-"use strict";
-
-var salaries = {
-  "Вася": 100,
-  "Петя": 300,
-  "Даша": 250
-};
-
-//... ваш код выведет 650
-```
-
-P.S. Сверху стоит `use strict`, чтобы не забыть объявить переменные.
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/3-max-salary/solution.md b/1-js/4-data-structures/5-object-for-in/3-max-salary/solution.md
deleted file mode 100644
index 24d7f1df..00000000
--- a/1-js/4-data-structures/5-object-for-in/3-max-salary/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-```js
-//+ run
-"use strict";
-
-var salaries = {
-  "Вася": 100,
-  "Петя": 300,
-  "Даша": 250
-};
-
-var max = 0;
-var maxName = "";
-for (var name in salaries) {
-  if (max < salaries[name]) {
-    max = salaries[name];
-    maxName = name;
-  }
-}
-
-alert( maxName || "нет сотрудников" );
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/3-max-salary/task.md b/1-js/4-data-structures/5-object-for-in/3-max-salary/task.md
deleted file mode 100644
index 86264eb0..00000000
--- a/1-js/4-data-structures/5-object-for-in/3-max-salary/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Свойство с наибольшим значением
-
-[importance 5]
-
-Есть объект `salaries` с зарплатами. Напишите код, который выведет имя сотрудника, у которого самая большая зарплата.
-
-Если объект пустой, то пусть он выводит "нет сотрудников".
-
-Например:
-
-```js
-"use strict";
-
-var salaries = {
-  "Вася": 100,
-  "Петя": 300,
-  "Даша": 250
-};
-
-// ... ваш код выведет "Петя"
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/solution.js b/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/solution.js
deleted file mode 100644
index 799afaef..00000000
--- a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function isNumeric(n) {
-  return !isNaN(parseFloat(n)) && isFinite(n)
-}
-
-function multiplyNumeric(obj) {
-  for (var key in obj) {
-    if (isNumeric(obj[key])) {
-      obj[key] *= 2;
-    }
-  }
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/source.js b/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/source.js
deleted file mode 100644
index 7caae25d..00000000
--- a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/source.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function isNumeric(n) {
-  return !isNaN(parseFloat(n)) && isFinite(n)
-}
-
-// ... ваш код ...
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/test.js b/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/test.js
deleted file mode 100644
index 73a1c465..00000000
--- a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/_js.view/test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-describe("multiplyNumeric", function() {
-  it("умножает численные свойства на 2", function() {
-    var menu = {
-      width: 200,
-      height: "300",
-      title: "Моё меню"
-    };
-    multiplyNumeric(menu);
-    assert.equal(menu.width, 400);
-    assert.equal(menu.height, 600);
-    assert.equal(menu.title, "Моё меню");
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/solution.md b/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/solution.md
deleted file mode 100644
index e42d8c9d..00000000
--- a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-```js
-//+ run
-var menu = {
-  width: 200,
-  height: 300,
-  title: "My menu"
-};
-
-function isNumeric(n) {
-  return !isNaN(parseFloat(n)) && isFinite(n);
-}
-
-function multiplyNumeric(obj) {
-  for (var key in obj) {
-    if (isNumeric(obj[key])) {
-      obj[key] *= 2;
-    }
-  }
-}
-
-multiplyNumeric(menu);
-
-alert( "menu width=" + menu.width + " height=" + menu.height + " title=" + menu.title );
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/task.md b/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/task.md
deleted file mode 100644
index 48ee5c2a..00000000
--- a/1-js/4-data-structures/5-object-for-in/4-multiply-numeric/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Умножьте численные свойства на 2
-
-[importance 3]
-
-Создайте функцию `multiplyNumeric`, которая получает объект и умножает все численные свойства на 2. Например:
-
-```js
-// до вызова
-var menu = {
-  width: 200,
-  height: 300,
-  title: "My menu"
-};
-
-multiplyNumeric(menu);
-
-// после вызова
-menu = {
-  width: 400,
-  height: 600,
-  title: "My menu"
-};
-```
-
-P.S. Для проверки на число используйте функцию:
-
-```js
-function isNumeric(n) {
-  return !isNaN(parseFloat(n)) && isFinite(n)
-}
-```
-
diff --git a/1-js/4-data-structures/5-object-for-in/article.md b/1-js/4-data-structures/5-object-for-in/article.md
deleted file mode 100644
index 8418af31..00000000
--- a/1-js/4-data-structures/5-object-for-in/article.md
+++ /dev/null
@@ -1,171 +0,0 @@
-# Объекты: перебор свойств 
-
-Для перебора всех свойств из объекта используется цикл по свойствам `for..in`. Эта синтаксическая конструкция отличается от рассмотренного ранее цикла `for(;;)`.
-
-[cut]
-
-## for..in [#for..in]
-
-Синтаксис:
-
-```js
-for (key in obj) {
-  /* ... делать что-то с obj[key] ... */
-}
-```
-
-При этом `for..in` последовательно переберёт свойства объекта `obj`, имя каждого свойства будет записано в  `key` и вызвано тело цикла.
-
-[smart header="Объявление переменной в цикле `for (var key in obj)`"]
-Вспомогательную переменную `key` можно объявить прямо в цикле:
-
-```js
-for (*!*var key*/!* in menu) { 
-  // ...
-}
-```
-
-Так иногда пишут для краткости кода. Можно использовать и любое другое название, кроме `key`, например `for(var propName in menu)`.
-[/smart]
-
-Пример итерации по свойствам:
-
-```js
-//+ run
-var menu = {
-  width: 300,
-  height: 200,
-  title: "Menu"
-};
-
-for (var key in menu) {
-  // этот код будет вызван для каждого свойства объекта    
-  // ..и выведет имя свойства и его значение
-
-*!*
-  alert( "Ключ: " + key + " значение:" + menu[key] );
-*/!*
-}
-```
-
-Обратите внимание, мы использовали квадратные скобки `menu[key]`. Как уже говорилось, если имя свойства хранится в переменной, то обратиться к нему можно только так, не через точку.
-
-## Количество свойств в объекте
-
-Как узнать, сколько свойств хранит объект?
-
-Готового метода для этого нет. 
-
-Самый кросс-браузерный способ -- это сделать цикл по свойствам и посчитать, вот так:
-
-```js
-//+ run
-var menu = {
-  width: 300,
-  height: 200,
-  title: "Menu"
-};
-
-*!*
-var counter = 0;
-
-for (var key in menu) {
-  counter++;
-}
-*/!*
-
-alert( "Всего свойств: " + counter );
-```
-
-В следующих главах мы пройдём массивы и познакомимся с другим, более коротким, вызовом: `Object.keys(menu).length`.
-
-## В каком порядке перебираются свойства?
-
-Для примера, рассмотрим объект, который задаёт список опций для выбора страны:
-
-```js
-var codes = {
-  // телефонные коды в формате "код страны": "название"
-  "7": "Россия",
-  "38": "Украина",
-  // ..,
-  "1": "США"
-};
-```
-
-Здесь мы предполагаем, что большинство посетителей из России, и поэтому начинаем с `7`, это зависит от проекта.
-
-При выборе телефонного кода мы хотели бы предлагать варианты, начиная с первого. Обычно на основе списка генерируется `select`, но здесь нам важно не это, а важно другое.
-
-**Правда ли, что при переборе `for(key in codes)` ключи `key` будут перечислены именно в том порядке, в котором заданы?**
-
-**По стандарту -- нет. Но некоторое соглашение об этом, всё же, есть.**
-
-Соглашение говорит, что если имя свойства -- нечисловая строка, то такие ключи всегда перебираются в том же порядке. Так получилось по историческим причинам и изменить это сложно: поломается много готового кода.
-
-С другой стороны, если имя свойства -- число, то все современные браузеры сортируют такие свойства в целях внутренней оптимизации.
-
-К примеру, рассмотрим объект с заведомо нечисловыми свойствами:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  surname: "Петров"
-};
-user.age = 25;
-
-*!*
-// порядок перебора соответствует порядку присвоения свойства
-*/!*
-for (var prop in user) {
-  alert( prop ); // name, surname, age
-}
-```
-
-А теперь -- что будет, если перебрать объект с кодами?
-
-```js
-//+ run
-var codes = {
-  // телефонные коды в формате "код страны": "название"
-  "7": "Россия",
-  "38": "Украина",
-  "1": "США"
-};
-
-for (var code in codes) alert( code ); // 1, 7, 38
-```
-
-При запуске этого кода в современном браузере мы увидим, что на первое место попал код США! 
-
-Нарушение порядка возникло, потому что ключи численные. Интерпретатор JavaScript видит, что строка на самом деле является числом и преобразует ключ в немного другой внутренний формат. Дополнительным эффектом внутренних оптимизаций является сортировка.
-
-**А что, если мы хотим, чтобы порядок был именно таким, какой мы задали?**
- 
-Это возможно. Можно применить небольшой хак, который заключается в том, чтобы сделать все ключи нечисловыми, например, добавим в начало дополнительный символ `'+'`:
-
-```js
-//+ run
-var codes = {
-  "+7": "Россия",
-  "+38": "Украина",
-  "+1": "США"
-};
-
-for (var code in codes) {
-  var value = codes[code];
-  code = +code; // ..если нам нужно именно число, преобразуем: "+7" -> 7
-
-  alert( code + ": " + value ); // 7, 38, 1 во всех браузерах
-}
-```
-
-## Итого
-
-<ul>
-<li>Цикл по ключам: `for (key in obj)`.</li>
-<li>Порядок перебора соответствует порядку объявления для нечисловых ключей, а числовые -- сортируются (в современных браузерах).</li>
-<li>Если нужно, чтобы порядок перебора числовых ключей соответствовал их объявлению в объекте, то используют трюк: числовые ключи заменяют на похожие, но содержащие не только цифры. Например, добавляют в начало `+`, как описано в примере выше, а потом, в процессе обработки, преобразуют такие ключи в числа.</li>
-</ul>
-
diff --git a/1-js/4-data-structures/6-object-reference/article.md b/1-js/4-data-structures/6-object-reference/article.md
deleted file mode 100644
index 76d9b028..00000000
--- a/1-js/4-data-structures/6-object-reference/article.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# Объекты: передача по ссылке
-
-Фундаментальным отличием объектов от примитивов, является их хранение и копирование "по ссылке".
-
-[cut]
-
-## Копирование по значению
-
-Обычные значения: строки, числа, булевы значения, `null/undefined` при присваивании переменных копируются целиком или, как говорят, *"по значению"*.
-
-```js
-var message = "Привет";
-var phrase = message;
-```
-
-В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
-
-<img src="variable-copy-value.png">
-
-## Копирование по ссылке
-
-С объектами -- всё не так.
-
-**В переменной, которой присвоен объект, хранится не сам объект, а "адрес его места в памяти", иными словами -- "ссылка" на него.**
-
-Вот как выглядит переменная, которой присвоен объект:
-
-```js
-var user = {
-  name: "Вася"
-};
-```
-
-<img src="variable-contains-reference.png">
-
-Внимание: объект -- вне переменной. В переменной -- лишь "адрес" (ссылка) для него.
-
-**При копировании переменной с объектом -- копируется эта ссылка, а объект по-прежнему остается в единственном экземпляре.** 
-
-Например:
-
-```js
-//+ no-beautify
-var user = { name: "Вася" }; // в переменной - ссылка 
-
-var admin = user; // скопировали ссылку
-```
-
-Получили две переменные, в которых находятся ссылки на один и тот же объект:
-
-<img src="variable-copy-reference.png">
-
-**Так как объект всего один, то изменения через любую переменную видны в других переменных:**
-
-```js
-//+ run
-var user = { name: 'Вася' };
-
-var admin = user;
-
-*!*admin.name*/!* = 'Петя'; // поменяли данные через admin
-
-alert(*!*user.name*/!*); // 'Петя', изменения видны в user
-```
-
-[smart header="Переменная с объектом как \"ключ\" к сейфу с данными"]
-Ещё одна аналогия: переменная, в которую присвоен объект, на самом деле хранит не сами данные, а ключ к сейфу, где они хранятся.
-
-При копировании её, получается что мы сделали копию ключа, но сейф по-прежнему один.
-[/smart]
-
-## Клонирование объектов
-
-Иногда, на практике -- очень редко, нужно скопировать объект целиком, создать именно полную независимую копию, "клон" объекта.
-
-Что ж, можно сделать и это. Для этого нужно пройти по объекту, достать данные и скопировать на уровне примитивов.
-
-Примерно так:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  age: 30
-};
-
-*!*
-var clone = {}; // новый пустой объект
-
-// скопируем в него все свойства user
-for (var key in user) {
-  clone[key] = user[key];
-}
-*/!*
-
-// теперь clone - полностью независимая копия
-clone.name = "Петя"; // поменяли данные в clone
-
-alert( user.name ); // по-прежнем "Вася"
-```
-
-В этом коде каждое свойство объекта `user` копируется в `clone`. Если предположить, что они примитивны, то каждое скопируется по значению и мы как раз получим полный клон.
-
-Если же свойства объектов, в свою очередь, могут хранить ссылки на другие объекты, то нужно обойти такие подобъекты и тоже склонировать их. Это называют "глубоким" клонированием.
-
-## Вывод в консоли
-
-Откройте консоль браузера (обычно [key F12]) и запустите следующий код:
-
-```js
-//+ run
-var time = {
-  year: 2345,
-  month: 11,
-  day: 10,
-  hour: 11,
-  minute: 12,
-  second: 13,
-  microsecond: 123456
-}
-
-console.log(time); // (*)
-time.microsecond++; // (**)
-
-console.log(time);
-time.microsecond++;
-
-console.log(time);
-time.microsecond++;
-```
-
-Как видно, в нём некий объект выводится строкой `(*)`, затем он меняется в строке `(**)` и снова выводится, и так несколько раз. Пока ничего необычного, типичная ситуация -- скрипт делает какую-то работу с объектом и выводит в консоли то, как она продвигается.
-
-Необычное -- в другом!
-
-При раскрытии каждый объект будет выглядеть примерно так (скриншот из Chrome):
-
-<img src="object-reference-console.png">
-
-**Судя по выводу, свойство `microsecond` всегда было равно `123459`... Или нет?**
-
-Если посмотреть на код выше то, очевидно, нет! Это свойство меняется, а консоль нас просто дурит. 
-
-**При "раскрытии" свойств объекта в консоли -- браузер всегда выводит их текущие (на момент раскрытия) значения.**
-
-Так происходит именно потому, что вывод не делает "копию" текущего содержимого, а сохраняет лишь ссылку на объект. Запомните эту особенность консоли, в будущем, при отладке скриптов у вас не раз возникнет подобная ситуация.
-
-
-## Итого
-
-<ul>
-<li>Объект присваивается и копируется "по ссылке". То есть, в переменной хранится не сам объект а, условно говоря, адрес в памяти, где он находится.</li>
-<li>Если переменная-объект скопирована или передана в функцию, то копируется именно эта ссылка, а объект остаётся один в памяти.</li>
-</ul>
-
-Это -- одно из ключевых отличий объекта от примитива (числа, строки...), который при присвоении как раз копируется "по значению", то есть полностью.
-
diff --git a/1-js/4-data-structures/6-object-reference/object-reference-console.png b/1-js/4-data-structures/6-object-reference/object-reference-console.png
deleted file mode 100644
index 9944a2df..00000000
Binary files a/1-js/4-data-structures/6-object-reference/object-reference-console.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/object-reference-console@2x.png b/1-js/4-data-structures/6-object-reference/object-reference-console@2x.png
deleted file mode 100644
index bfb0a3cf..00000000
Binary files a/1-js/4-data-structures/6-object-reference/object-reference-console@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-contains-reference.png b/1-js/4-data-structures/6-object-reference/variable-contains-reference.png
deleted file mode 100644
index 53d18fed..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-contains-reference.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-contains-reference@2x.png b/1-js/4-data-structures/6-object-reference/variable-contains-reference@2x.png
deleted file mode 100644
index 9a152357..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-contains-reference@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-reference.png b/1-js/4-data-structures/6-object-reference/variable-copy-reference.png
deleted file mode 100644
index b6a502c3..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-copy-reference.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-reference@2x.png b/1-js/4-data-structures/6-object-reference/variable-copy-reference@2x.png
deleted file mode 100644
index 8e27b051..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-copy-reference@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-value.png b/1-js/4-data-structures/6-object-reference/variable-copy-value.png
deleted file mode 100644
index 33578c15..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-copy-value.png and /dev/null differ
diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-value@2x.png b/1-js/4-data-structures/6-object-reference/variable-copy-value@2x.png
deleted file mode 100644
index 588762f5..00000000
Binary files a/1-js/4-data-structures/6-object-reference/variable-copy-value@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md b/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md
deleted file mode 100644
index 729b5d48..00000000
--- a/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Последний элемент имеет индекс на `1` меньший, чем длина массива.
-
-Например:
-
-```js
-var fruits = ["Яблоко", "Груша", "Слива"];
-```
-
-Длина массива этого массива `fruits.length` равна `3`. Здесь "Яблоко" имеет индекс `0`, "Груша" -- индекс `1`, "Слива" -- индекс `2`. 
-
-То есть, для массива длины `goods`:
-
-```js
-var lastItem = goods[goods.length - 1]; // получить последний элемент
-```
-
diff --git a/1-js/4-data-structures/7-array/1-get-last-in-array/task.md b/1-js/4-data-structures/7-array/1-get-last-in-array/task.md
deleted file mode 100644
index b33ea3d9..00000000
--- a/1-js/4-data-structures/7-array/1-get-last-in-array/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Получить последний элемент массива
-
-[importance 5]
-
-Как получить последний элемент из произвольного массива?
-
-У нас есть массив `goods`. Сколько в нем элементов -- не знаем, но можем прочитать из `goods.length`. 
-
-Напишите код для получения последнего элемента `goods`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js
deleted file mode 100644
index 5835fb09..00000000
--- a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function getMaxSubSum(arr) {
-  var maxSum = 0,
-    partialSum = 0;
-  for (var i = 0; i < arr.length; i++) {
-    partialSum += arr[i];
-    maxSum = Math.max(maxSum, partialSum);
-    if (partialSum < 0) partialSum = 0;
-  }
-  return maxSum;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js
deleted file mode 100644
index 4fc8605e..00000000
--- a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-describe("getMaxSubSum", function() {
-  it("максимальная подсумма [1, 2, 3] равна 6", function() {
-    assert.equal(getMaxSubSum([1, 2, 3]), 6);
-  });
-
-  it("максимальная подсумма [-1, 2, 3, -9] равна 5", function() {
-    assert.equal(getMaxSubSum([-1, 2, 3, -9]), 5);
-  });
-
-  it("максимальная подсумма [-1, 2, 3, -9, 11] равна 11", function() {
-    assert.equal(getMaxSubSum([-1, 2, 3, -9, 11]), 11);
-  });
-
-  it("максимальная подсумма [-2, -1, 1, 2] равна 3", function() {
-    assert.equal(getMaxSubSum([-2, -1, 1, 2]), 3);
-  });
-
-  it("максимальная подсумма [100, -9, 2, -3, 5] равна 100", function() {
-    assert.equal(getMaxSubSum([100, -9, 2, -3, 5]), 100);
-  });
-
-  it("максимальная подсумма [] равна 0", function() {
-    assert.equal(getMaxSubSum([]), 0);
-  });
-
-  it("максимальная подсумма [-1] равна 0", function() {
-    assert.equal(getMaxSubSum([-1]), 0);
-  });
-
-  it("максимальная подсумма [-1, -2] равна 0", function() {
-    assert.equal(getMaxSubSum([-1, -2]), 0);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md b/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md
deleted file mode 100644
index 355b5d0c..00000000
--- a/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md
+++ /dev/null
@@ -1,101 +0,0 @@
-# Подсказка (медленное решение)
-Можно просто посчитать для каждого элемента массива все суммы, которые с него начинаются.
-
-Например, для `[-1, 2, 3, -9, 11]`:
-
-```js
-//+ no-beautify
-// Начиная с -1:
--1
--1 + 2
--1 + 2 + 3
--1 + 2 + 3 + (-9)
--1 + 2 + 3 + (-9) + 11
-
-// Начиная с 2:
-2
-2 + 3
-2 + 3 + (-9)
-2 + 3 + (-9) + 11
-
-// Начиная с 3:
-3
-3 + (-9)
-3 + (-9) + 11
-
-// Начиная с -9
--9
--9 + 11
-
-// Начиная с -11
--11
-```
-
-Сделайте вложенный цикл, который на внешнем уровне бегает по элементам массива, а на внутреннем -- формирует все суммы элементов, которые начинаются с текущей позиции.
-
-# Медленное решение
-
-Решение через вложенный цикл:
-
-```js
-//+ run
-function getMaxSubSum(arr) {
-  var maxSum = 0; // если совсем не брать элементов, то сумма 0
-
-  for (var i = 0; i < arr.length; i++) {
-    var sumFixedStart = 0;
-    for (var j = i; j < arr.length; j++) {
-      sumFixedStart += arr[j];
-      maxSum = Math.max(maxSum, sumFixedStart);
-    }
-  }
-
-  return maxSum;
-}
-
-alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
-alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
-alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
-alert( getMaxSubSum([1, 2, 3]) ); // 6
-alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
-```
-
-Такое решение имеет [оценку сложности](http://ru.wikipedia.org/wiki/%C2%ABO%C2%BB_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B5_%D0%B8_%C2%ABo%C2%BB_%D0%BC%D0%B0%D0%BB%D0%BE%D0%B5) O(n<sup>2</sup>), то есть при увеличении массива в 2 раза алгоритм требует в 4 раза больше времени. На больших массивах (1000, 10000 и более элементов) такие алгоритмы могут приводить к серьёзным "тормозам".
-
-# Подсказка (быстрое решение)
-
-Будем идти по массиву и накапливать в некоторой переменной `s` текущую частичную сумму. Если в какой-то момент s окажется отрицательной, то мы просто присвоим `s=0`. Утверждается, что максимум из всех значений переменной s, случившихся за время работы, и будет ответом на задачу.
-
-**Докажем этот алгоритм.**
-
-В самом деле, рассмотрим первый момент времени, когда сумма `s` стала отрицательной. Это означает, что, стартовав с нулевой частичной суммы, мы в итоге пришли к отрицательной частичной сумме -- значит, и весь этот префикс массива, равно как и любой его суффикс имеют отрицательную сумму.
-
-Следовательно, от всего этого префикса массива в дальнейшем не может быть никакой пользы: он может дать только отрицательную прибавку к ответу.
-
-# Быстрое решение
-
-```js
-//+ run
-function getMaxSubSum(arr) {
-  var maxSum = 0,
-    partialSum = 0;
-  for (var i = 0; i < arr.length; i++) {
-    partialSum += arr[i];
-    maxSum = Math.max(maxSum, partialSum);
-    if (partialSum < 0) partialSum = 0;
-  }
-  return maxSum;
-}
-
-
-alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
-alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
-alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
-alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
-alert( getMaxSubSum([1, 2, 3]) ); // 6
-alert( getMaxSubSum([-1, -2, -3]) ); // 0
-```
-
-Информацию об алгоритме вы также можете прочитать здесь: [](http://e-maxx.ru/algo/maximum_average_segment) и здесь: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem).
-
-Этот алгоритм требует ровно одного прохода по массиву, его сложность имеет оценку `O(n)`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/task.md b/1-js/4-data-structures/7-array/10-maximal-subarray/task.md
deleted file mode 100644
index 2381c0f6..00000000
--- a/1-js/4-data-structures/7-array/10-maximal-subarray/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Подмассив наибольшей суммы
-
-[importance 2]
-
-На входе массив чисел, например: `arr = [1, -2, 3, 4, -9, 6]`.
-
-Задача -- найти непрерывный подмассив `arr`, сумма элементов которого максимальна. 
-
-Ваша функция должна возвращать только эту сумму.
-
-Например:
-
-```js
-getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (сумма выделенных)
-getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6
-getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11 
-getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3
-getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100
-getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (неотрицательные - берем всех)
-```
-
-Если все элементы отрицательные, то не берём ни одного элемента и считаем сумму равной нулю:
-
-```js
-getMaxSubSum([-1, -2, -3]) = 0
-```
-
-Постарайтесь придумать решение, которое работает за O(n<sup>2</sup>), а лучше за O(n) операций.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md b/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md
deleted file mode 100644
index 9f72e68b..00000000
--- a/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-Текущий последний элемент имеет индекс `goods.length-1`. Значит, индексом нового элемента будет `goods.length`:
-
-```js
-goods[goods.length] = 'Компьютер'
-```
-
diff --git a/1-js/4-data-structures/7-array/2-add-item-to-array/task.md b/1-js/4-data-structures/7-array/2-add-item-to-array/task.md
deleted file mode 100644
index 6f0e6d16..00000000
--- a/1-js/4-data-structures/7-array/2-add-item-to-array/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Добавить новый элемент в массив
-
-[importance 5]
-
-Как добавить элемент в конец произвольного массива?
-
-У нас есть массив `goods`. Напишите код для добавления в его конец значения "Компьютер".
diff --git a/1-js/4-data-structures/7-array/3-create-array/solution.md b/1-js/4-data-structures/7-array/3-create-array/solution.md
deleted file mode 100644
index 7b518dbf..00000000
--- a/1-js/4-data-structures/7-array/3-create-array/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-```js
-//+ run
-var styles = ["Джаз", "Блюз"];
-styles.push("Рок-н-Ролл");
-styles[styles.length - 2] = "Классика";
-alert( styles.shift() );
-styles.unshift("Рэп", "Регги ");
-```
-
diff --git a/1-js/4-data-structures/7-array/3-create-array/task.md b/1-js/4-data-structures/7-array/3-create-array/task.md
deleted file mode 100644
index 0426c89c..00000000
--- a/1-js/4-data-structures/7-array/3-create-array/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Создание массива
-
-[importance 5]
-
-Задача из 5 шагов-строк:
-<ol>
-<li>Создайте массив `styles` с элементами "Джаз", "Блюз".</li>
-<li>Добавьте в конец значение "Рок-н-Ролл"</li>
-<li>Замените предпоследнее значение с конца на "Классика". Код замены предпоследнего значения должен работать для массивов любой длины.</li>
-<li>Удалите первое значение массива и выведите его `alert`.</li>
-<li>Добавьте в начало значения "Рэп" и "Регги".</li>
-</ol>
-
-Массив в результате каждого шага:
-
-```js
-//+ no-beautify
-Джаз, Блюз
-Джаз, Блюз, Рок-н-Ролл
-Джаз, Классика, Рок-н-Ролл
-Классика, Рок-н-Ролл
-Рэп, Регги, Классика, Рок-н-Ролл
-```
-
diff --git a/1-js/4-data-structures/7-array/4-random-from-array/solution.md b/1-js/4-data-structures/7-array/4-random-from-array/solution.md
deleted file mode 100644
index a121e5ab..00000000
--- a/1-js/4-data-structures/7-array/4-random-from-array/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Для вывода нужен случайный номер от `0` до `arr.length-1` включительно.
-
-```js
-//+ run
-var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
-
-var rand = Math.floor(Math.random() * arr.length);
-
-alert( arr[rand] );
-```
-
diff --git a/1-js/4-data-structures/7-array/4-random-from-array/task.md b/1-js/4-data-structures/7-array/4-random-from-array/task.md
deleted file mode 100644
index 6a74b033..00000000
--- a/1-js/4-data-structures/7-array/4-random-from-array/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Получить случайное значение из массива
-
-[importance 3]
-
-Напишите код для вывода `alert` случайного значения из массива:
-
-```js
-var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
-```
-
-P.S. Код для генерации случайного целого от `min` to `max` включительно:
-
-```js
-var rand = min + Math.floor(Math.random() * (max + 1 - min));
-```
-
diff --git a/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md b/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md
deleted file mode 100644
index 70176c1d..00000000
--- a/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-В решение ниже обратите внимание: мы не приводим `value` к числу сразу после `prompt`, так как если сделать `value = +value`, то после этого отличить пустую строку от нуля уже никак нельзя. А нам здесь нужно при пустой строке прекращать ввод, а при нуле -- продолжать.
-
-```js
-//+ run demo
-var numbers = [];
-
-while (true) {
-
-  var value = prompt("Введите число", 0);
-
-  if (value === "" || value === null || isNaN(value)) break;
-
-  numbers.push(+value);
-}
-
-var sum = 0;
-for (var i = 0; i < numbers.length; i++) {
-  sum += numbers[i];
-}
-
-alert( sum );
-```
-
diff --git a/1-js/4-data-structures/7-array/5-calculator-for-input/task.md b/1-js/4-data-structures/7-array/5-calculator-for-input/task.md
deleted file mode 100644
index 6c3cfab5..00000000
--- a/1-js/4-data-structures/7-array/5-calculator-for-input/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Создайте калькулятор для введённых значений 
-
-[importance 4]
-
-Напишите код, который: 
-<ul>
-<li>Запрашивает по очереди значения при помощи `prompt` и сохраняет их в массиве.</li>
-<li>Заканчивает ввод, как только посетитель введёт пустую строку, не число или нажмёт "Отмена".</li>
-<li>При этом ноль `0` не должен заканчивать ввод, это разрешённое число.</li>
-<li>Выводит сумму всех значений массива</li>
-</ul>
-
-[demo /]
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/6-item-value/solution.md b/1-js/4-data-structures/7-array/6-item-value/solution.md
deleted file mode 100644
index 8d3c2ac1..00000000
--- a/1-js/4-data-structures/7-array/6-item-value/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-```js
-//+ run
-var arr = [1, 2, 3];
-
-var arr2 = arr; // (*)
-arr2[0] = 5;
-
-alert( arr[0] );
-alert( arr2[0] );
-```
-
-Код выведет `5` в обоих случаях, так как массив является объектом. В строке `(*)` в переменную `arr2` копируется ссылка на него, а сам объект в памяти по-прежнему один, в нём отражаются изменения, внесенные через `arr2` или `arr`.
-
-В частности, сравнение `arr2 == arr` даст `true`.
-
-Если нужно именно скопировать массив, то это можно сделать, например, так:
-
-```js
-var arr2 = [];
-for (var i = 0; i < arr.length; i++) arr2[i] = arr[i];
-```
-
diff --git a/1-js/4-data-structures/7-array/6-item-value/task.md b/1-js/4-data-structures/7-array/6-item-value/task.md
deleted file mode 100644
index e9a080b9..00000000
--- a/1-js/4-data-structures/7-array/6-item-value/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Чему равен элемент массива?
-
-[importance 3]
-
-Что выведет этот код?
-
-```js
-var arr = [1, 2, 3];
-
-var arr2 = arr;
-arr2[0] = 5;
-
-*!*
-alert( arr[0] );
-alert( arr2[0] );
-*/!*
-```
-
diff --git a/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js b/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js
deleted file mode 100644
index c172ef0a..00000000
--- a/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function find(array, value) {
-  if (array.indexOf) { // если метод существует
-    return array.indexOf(value);
-  }
-
-  for (var i = 0; i < array.length; i++) {
-    if (array[i] === value) return i;
-  }
-
-  return -1;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js b/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js
deleted file mode 100644
index 86b958ba..00000000
--- a/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe("find", function() {
-
-  describe("возвращает позицию, на которой найден элемент", function() {
-    it("в массиве [1,2,3] находит 1 на позиции 0", function() {
-      assert.equal(find([1, 2, 3], 1), 0);
-    });
-    it("в массиве [1,2,3] находит 2 на позиции 1", function() {
-      assert.equal(find([1, 2, 3], 2), 1);
-    });
-    it("в массиве [1,2,3] находит 3 на позиции 2", function() {
-      assert.equal(find([1, 2, 3], 3), 2);
-    });
-  });
-
-  it("если элемент не найден, возвращает -1", function() {
-    assert.equal(find([1, 2, 3], 0), -1);
-  });
-
-  it("отличает false или null от 0", function() {
-    assert.equal(find([false, true, null], 0), -1);
-  });
-
-  it("отличает 1 от true", function() {
-    assert.equal(find([1, 2, 3], true), -1);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/7-array-find/solution.md b/1-js/4-data-structures/7-array/7-array-find/solution.md
deleted file mode 100644
index 3c83019b..00000000
--- a/1-js/4-data-structures/7-array/7-array-find/solution.md
+++ /dev/null
@@ -1,61 +0,0 @@
-Возможное решение:
-
-```js
-function find(array, value) {
-
-  for (var i = 0; i < array.length; i++) {
-    if (array[i] == value) return i;
-  }
-
-  return -1;
-}
-```
-
-Однако, в нем ошибка, т.к. сравнение `==` не различает `0` и `false`. 
-
-Поэтому лучше использовать `===`. Кроме того, в современном стандарте JavaScript существует встроенная функция <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf">Array#indexOf</a>, которая работает именно таким образом. Имеет смысл ей воспользоваться, если браузер ее поддерживает.
-
-```js
-//+ run
-function find(array, value) {
-  if (array.indexOf) { // если метод существует
-    return array.indexOf(value);
-  }
-
-  for (var i = 0; i < array.length; i++) {
-    if (array[i] === value) return i;
-  }
-
-  return -1;
-}
-
-var arr = ["a", -1, 2, "b"];
-
-var index = find(arr, 2);
-
-alert( index );
-```
-
-... Но еще лучшим вариантом было бы определить `find` по-разному в зависимости от поддержки браузером метода `indexOf`:
-
-```js
-// создаем пустой массив и проверяем поддерживается ли indexOf
-if ([].indexOf) {
-
-  var find = function(array, value) {
-    return array.indexOf(value);
-  }
-
-} else {
-  var find = function(array, value) {
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] === value) return i;
-    }
-
-    return -1;
-  }
-
-}
-```
-
-Этот способ - лучше всего, т.к. не требует при каждом запуске `find` проверять поддержку `indexOf`.
diff --git a/1-js/4-data-structures/7-array/7-array-find/task.md b/1-js/4-data-structures/7-array/7-array-find/task.md
deleted file mode 100644
index f32038e4..00000000
--- a/1-js/4-data-structures/7-array/7-array-find/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Поиск в массиве
-
-[importance 3]
-
-Создайте функцию `find(arr, value)`, которая ищет в массиве `arr` значение `value` и возвращает его номер, если найдено, или `-1`, если не найдено.
-
-Например:
-
-```js
-arr = ["test", 2, 1.5, false];
-
-find(arr, "test"); // 0
-find(arr, 2); // 1
-find(arr, 1.5); // 2
-
-find(arr, 0); // -1
-```
-
diff --git a/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js b/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js
deleted file mode 100644
index 58002f54..00000000
--- a/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function filterRange(arr, a, b) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    if (arr[i] >= a && arr[i] <= b) {
-      result.push(arr[i]);
-    }
-  }
-
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js b/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js
deleted file mode 100644
index 4cb4cbf6..00000000
--- a/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe("filterRange", function() {
-  it("не меняет исходный массив", function() {
-    var arr = [5, 4, 3, 8, 0];
-
-    filterRange(arr, 0, 10);
-    assert.deepEqual(arr, [5, 4, 3, 8, 0]);
-  });
-
-  it("оставляет только значения указанного интервала", function() {
-    var arr = [5, 4, 3, 8, 0];
-
-    var result = filterRange(arr, 3, 5);
-    assert.deepEqual(result, [5, 4, 3]);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array/8-filter-range/solution.md b/1-js/4-data-structures/7-array/8-filter-range/solution.md
deleted file mode 100644
index 37421191..00000000
--- a/1-js/4-data-structures/7-array/8-filter-range/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Алгоритм решения
-<ol>
-<li>Создайте временный пустой массив `var results = []`. </li>
-<li>Пройдите по элементам `arr` в цикле и заполните его.</li>
-<li>Возвратите `results`.</li>
-</ol>
-
-# Решение
-
-```js
-//+ run
-function filterRange(arr, a, b) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    if (arr[i] >= a && arr[i] <= b) {
-      result.push(arr[i]);
-    }
-  }
-
-  return result;
-}
-
-var arr = [5, 4, 3, 8, 0];
-
-var filtered = filterRange(arr, 3, 5);
-alert( filtered );
-```
-
diff --git a/1-js/4-data-structures/7-array/8-filter-range/task.md b/1-js/4-data-structures/7-array/8-filter-range/task.md
deleted file mode 100644
index 428d1a60..00000000
--- a/1-js/4-data-structures/7-array/8-filter-range/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Фильтр диапазона
-
-[importance 3]
-
-Создайте функцию `filterRange(arr, a, b)`, которая принимает массив чисел `arr` и возвращает новый массив, который содержит только числа из `arr` из диапазона от `a` до `b`. То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. 
-Функция не должна менять `arr`.
-
-Пример работы:
-
-```js
-var arr = [5, 4, 3, 8, 0];
-
-var filtered = filterRange(arr, 3, 5);
-// теперь filtered = [5, 4, 3]
-// arr не изменился
-```
-
diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif
deleted file mode 100644
index d1960cef..00000000
Binary files a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md
deleted file mode 100644
index 8d334a36..00000000
--- a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md
+++ /dev/null
@@ -1,40 +0,0 @@
-Их сумма равна `1060`.
-
-```js
-//+ run
-// шаг 1
-var arr = [];
-
-for (var i = 2; i < 100; i++) {
-  arr[i] = true
-}
-
-// шаг 2
-var p = 2;
-
-do {
-  // шаг 3
-  for (i = 2 * p; i < 100; i += p) {
-    arr[i] = false;
-  }
-
-  // шаг 4
-  for (i = p + 1; i < 100; i++) {
-    if (arr[i]) break;
-  }
-
-  p = i;
-} while (p * p < 100); // шаг 5
-
-// шаг 6 (готово)
-// посчитать сумму
-var sum = 0;
-for (i = 0; i < arr.length; i++) {
-  if (arr[i]) {
-    sum += i;
-  }
-}
-
-alert( sum );
-```
-
diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md
deleted file mode 100644
index fd68c82b..00000000
--- a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Решето Эратосфена
-
-[importance 3]
-
-Целое число, большее `1`, называется *простым*, если оно не делится нацело ни на какое другое, кроме себя и `1`.
-
-Древний алгоритм "Решето Эратосфена" для поиска всех простых чисел до `n` выглядит так:
-
-<ol>
-<li>Создать список последовательных чисел от `2` до `n`: `2, 3, 4, ..., n`.</li>
-<li>Пусть `p=2`, это первое простое число.</li>
-<li>Зачеркнуть все последующие числа в списке с разницей в `p`, т.е. `2*p, 3*p, 4*p` и т.д. В случае `p=2` это будут `4,6,8...`.</li>
-<li>Поменять значение `p` на первое не зачеркнутое число после `p`.</li>
-<li>Повторить шаги 3-4 пока <code>p<sup>2</sup> &lt; n</code>.</li>
-<li>Все оставшиеся не зачеркнутыми числа -- простые.</li>
-</ol>
-
-Посмотрите также [анимацию алгоритма](sieve.gif).
-
-Реализуйте "Решето Эратосфена" в JavaScript, используя массив.
-
-Найдите все простые числа до `100` и выведите их сумму.
-
-
-
diff --git a/1-js/4-data-structures/7-array/array-pop.png b/1-js/4-data-structures/7-array/array-pop.png
deleted file mode 100644
index 6583cbe7..00000000
Binary files a/1-js/4-data-structures/7-array/array-pop.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/array-pop@2x.png b/1-js/4-data-structures/7-array/array-pop@2x.png
deleted file mode 100644
index 00c3a1fa..00000000
Binary files a/1-js/4-data-structures/7-array/array-pop@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/array-shift.png b/1-js/4-data-structures/7-array/array-shift.png
deleted file mode 100644
index a0234446..00000000
Binary files a/1-js/4-data-structures/7-array/array-shift.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/array-shift@2x.png b/1-js/4-data-structures/7-array/array-shift@2x.png
deleted file mode 100644
index 8798c0dc..00000000
Binary files a/1-js/4-data-structures/7-array/array-shift@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/array-speed.png b/1-js/4-data-structures/7-array/array-speed.png
deleted file mode 100644
index 521b25bb..00000000
Binary files a/1-js/4-data-structures/7-array/array-speed.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/array-speed@2x.png b/1-js/4-data-structures/7-array/array-speed@2x.png
deleted file mode 100644
index 05f5c483..00000000
Binary files a/1-js/4-data-structures/7-array/array-speed@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/article.md b/1-js/4-data-structures/7-array/article.md
deleted file mode 100644
index b7d4063a..00000000
--- a/1-js/4-data-structures/7-array/article.md
+++ /dev/null
@@ -1,462 +0,0 @@
-# Массивы c числовыми индексами
-
-*Массив* -- разновидность объекта, которая предназначена для хранения пронумерованных значений и предлагает дополнительные методы для удобного манипулирования такой коллекцией.
-
-Они обычно используются для хранения упорядоченных коллекций данных, например -- списка товаров на странице, студентов в группе и т.п.
-
-[cut]
-
-## Объявление
-
-Синтаксис для создания нового массива -- квадратные скобки со списком элементов внутри. 
-
-Пустой массив:
-
-```js
-var arr = [];
-```
-
-Массив `fruits` с тремя элементами:
-
-```js
-var fruits = ["Яблоко", "Апельсин", "Слива"];
-```
-
-**Элементы нумеруются, начиная с нуля.** 
-
-Чтобы получить нужный элемент из массива -- указывается его номер в квадратных скобках:
-
-```js
-//+ run
-var fruits = ["Яблоко", "Апельсин", "Слива"];
-
-alert( fruits[0] ); // Яблоко
-alert( fruits[1] ); // Апельсин
-alert( fruits[2] ); // Слива
-```
-
-Элемент можно всегда заменить:
-
-```js
-fruits[2] = 'Груша'; // теперь ["Яблоко", "Апельсин", "Груша"]
-```
-
-...Или добавить:
-
-```js
-fruits[3] = 'Лимон'; // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]
-```
-
-Общее число элементов, хранимых в массиве, содержится в его свойстве `length`:
-
-```js
-//+ run
-var fruits = ["Яблоко", "Апельсин", "Груша"];
-
-alert( fruits.length ); // 3
-```
-
-**Через `alert` можно вывести и массив целиком.** 
-
-При этом его элементы будут перечислены через запятую:
-
-```js
-//+ run
-var fruits = ["Яблоко", "Апельсин", "Груша"];
-
-alert( fruits ); // Яблоко,Апельсин,Груша
-```
-
-**В массиве может храниться любое число элементов любого типа.** 
-
-В том числе, строки, числа, объекты, вот например:
-
-```js
-//+ run no-beautify
-// микс значений
-var arr = [ 1, 'Имя', { name: 'Петя' }, true ];
-
-// получить объект из массива и тут же -- его свойство
-alert( arr[2].name ); // Петя
-```
-
-## Методы pop/push, shift/unshift  
-
-Одно из применений массива -- это [очередь](http://ru.wikipedia.org/wiki/%D0%9E%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала. 
-
-<img src="queue.png">
-
-В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране.
-
-Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца. 
-
-<img src="stack.png">
-
-Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху.
-
-Для того, чтобы реализовывать эти структуры данных, и просто для более удобной работы с началом и концом массива существуют специальные методы.
-
-### Конец массива
-
-<dl>
-<dt>`pop`</dt>
-<dd>Удаляет *последний* элемент из массива и возвращает его:
-
-```js
-//+ run
-var fruits = ["Яблоко", "Апельсин", "Груша"];
-
-alert( fruits.pop() ); // удалили "Груша"
-
-alert( fruits ); // Яблоко, Апельсин
-```
-
-</dd>
-<dt>`push`</dt>
-<dd>Добавляет элемент *в конец* массива:
-
-```js
-//+ run
-var fruits = ["Яблоко", "Апельсин"];
-
-fruits.push("Груша");
-
-alert( fruits ); // Яблоко, Апельсин, Груша
-```
-
-Вызов `fruits.push(...)` равнозначен `fruits[fruits.length] = ...`.
-</dd>
-</dl>
-
-### Начало массива
-
-<dl>
-<dt>`shift`</dt>
-<dd>Удаляет из массива *первый* элемент и возвращает его:
-
-```js
-var fruits = ["Яблоко", "Апельсин", "Груша"];
-
-alert( fruits.shift() ); // удалили Яблоко
-
-alert( fruits ); // Апельсин, Груша
-```
-
-</dd>
-<dt>`unshift`</dt>
-<dd>Добавляет элемент *в начало* массива:
-
-```js
-var fruits = ["Апельсин", "Груша"];
-
-fruits.unshift('Яблоко');
-
-alert( fruits ); // Яблоко, Апельсин, Груша
-```
-
-</dd>
-</dl>
-
-Методы `push` и `unshift` могут добавлять сразу по несколько элементов:
-
-```js
-//+ run
-var fruits = ["Яблоко"];
-
-fruits.push("Апельсин", "Персик");
-fruits.unshift("Ананас", "Лимон");
-
-// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"]
-alert( fruits );
-```
-
-## Внутреннее устройство массива
-
-Массив -- это объект, где в качестве ключей выбраны цифры, с дополнительными методами и свойством `length`.
-
-Так как это объект, то в функцию он передаётся по ссылке:
-
-```js
-//+ run
-function eat(arr) {
-  arr.pop();
-}
-
-var arr = ["нам", "не", "страшен", "серый", "волк"]
-
-alert( arr.length ); // 5
-eat(arr);
-eat(arr);
-alert( arr.length ); // 3, в функцию массив не скопирован, а передана ссылка
-```
-
-**Ещё одно следствие -- можно присваивать в массив любые свойства.**
-
-Например:
-
-```js
-var fruits = []; // создать массив
-
-fruits[99999] = 5; // присвоить свойство с любым номером
-
-fruits.age = 25; // назначить свойство со строковым именем
-```
-
-.. Но массивы для того и придуманы в JavaScript, чтобы удобно работать именно *с упорядоченными, нумерованными данными*. Для этого в них существуют специальные методы и свойство `length`. 
-
-Как правило, нет причин использовать массив как обычный объект, хотя технически это и возможно.
-
-[warn header="Вывод массива с \"дырами\""]
-Если в массиве есть пропущенные индексы, то при выводе в большинстве браузеров появляются "лишние" запятые, например:
-
-```js
-//+ run
-var a = [];
-a[0] = 0;
-a[5] = 5;
-
-alert( a ); // 0,,,,,5
-```
-
-Эти запятые появляются потому, что алгоритм вывода массива идёт от `0` до `arr.length` и выводит всё через запятую. Отсутствие значений даёт несколько запятых подряд.
-[/warn]
-
-### Влияние на быстродействие
-
-Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно.
-
-<img src="array-speed.png">
-
-
-Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции:
-
-```js
-fruits.shift(); // убрать 1 элемент с начала
-```
-
-При этом, так как все элементы находятся в своих ячейках, просто удалить элемент с номером `0` недостаточно. Нужно еще и переместить остальные элементы на их новые индексы.
-
-Операция `shift` должна выполнить целых три действия:
-<ol>
-<li>Удалить нулевой элемент.</li>
-<li>Переместить все свойства влево, с индекса `1` на `0`, с `2` на `1` и так далее.</li>
-<li>Обновить свойство `length`.</li>
-</ol>
-
-<img src="array-shift.png">
-
-**Чем больше элементов в массиве, тем дольше их перемещать, это много операций с памятью.**
-
-Аналогично работает `unshift`: чтобы добавить элемент в начало массива, нужно сначала перенести вправо, в увеличенные индексы, все существующие.
-
-А что же с `push/pop`? Им как раз перемещать ничего не надо. Для того, чтобы удалить элемент, метод `pop` очищает ячейку и укорачивает `length`.
-
-Действия при операции:
-
-```js
-fruits.pop(); // убрать 1 элемент с конца
-```
-
-<img src="array-pop.png">
-
-**Перемещать при `pop` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.**
-
-Аналогично работает `push`.
-
-
-## Перебор элементов
-
-Для перебора элементов обычно используется цикл:
-
-```js
-//+ run
-var arr = ["Яблоко", "Апельсин", "Груша"];
-
-*!*
-for (var i = 0; i < arr.length; i++) {
-  alert( arr[i] );
-}
-*/!*
-```
-
-[warn header="Не используйте `for..in` для массивов"]
-Так как массив является объектом, то возможен и вариант `for..in`:
-
-```js
-//+ run
-var arr = ["Яблоко", "Апельсин", "Груша"];
-
-*!*
-for (var key in arr) {
-*/!*
-  alert( arr[key] ); // Яблоко, Апельсин, Груша
-}
-```
-
-Недостатки этого способа:
-
-<ol>
-<li>Цикл `for..in` выведет *все свойства* объекта, а не только цифровые. 
-
-В браузере, при работе с объектами страницы, встречаются коллекции элементов, которые по виду как массивы, но имеют дополнительные нецифровые свойства. При переборе таких "похожих на массив" коллекций через `for..in` эти свойства будут выведены, а они как раз не нужны.
-
-Бывают и библиотеки, которые предоставляют такие коллекции. Классический `for` надёжно выведет только цифровые свойства, что обычно и требуется.
-</li>
-<li>Цикл `for (var i=0; i<arr.length; i++)` в современных браузерах выполняется в 10-100 раз быстрее. Казалось бы, по виду он сложнее, но браузер особым образом оптимизирует такие циклы.</li>
-</ol>
-
-Если коротко: цикл `for(var i=0; i<arr.length...)` надёжнее и быстрее.
-[/warn]
-
-
-## Особенности работы length
-
-Встроенные методы для работы с массивом автоматически обновляют его длину `length`.
-
-**Длина `length` -- не количество элементов массива, а `последний индекс + 1`**. 
-
-Так уж оно устроено.
-
-Это легко увидеть на следующем примере:
-
-```js
-//+ run
-var arr = [];
-arr[1000] = true;
-
-alert(arr.length); // *!*1001*/!*
-```
-
-Кстати, если у вас элементы массива нумеруются случайно или с большими пропусками, то стоит подумать о том, чтобы использовать обычный объект. Массивы предназначены именно для работы с непрерывной упорядоченной коллекцией элементов.
-
-### Используем length для укорачивания массива
-
-Обычно нам не нужно самостоятельно менять `length`... Но есть один фокус, который можно провернуть. 
-
-**При уменьшении `length` массив укорачивается.** 
-
-Причем этот процесс необратимый, т.е. даже если потом вернуть `length` обратно -- значения не восстановятся:
-
-```js
-//+ run
-var arr = [1, 2, 3, 4, 5];
-
-arr.length = 2; // укоротить до 2 элементов
-alert( arr ); // [1, 2]
-
-arr.length = 5; // вернуть length обратно, как было
-alert( arr[3] ); // undefined: значения не вернулись
-```
-
-Самый простой способ очистить массив -- это `arr.length=0`.
-   
-## Создание вызовом new Array [#new-array]
-   
-### new Array() 
-Существует еще один синтаксис для создания массива:
-
-```js
-var arr = *!*new Array*/!*("Яблоко", "Груша", "и т.п.");
-```
-
-Он редко используется, т.к. квадратные скобки `[]` короче.
-
-Кроме того, у него есть одна особенность. Обычно `new Array(элементы, ...)` создаёт массив из данных элементов, но если у него один аргумент-число `new Array(число)`, то он создает массив *без элементов, но с заданной длиной*.
-
-Проверим это:
-
-```js
-//+ run
-var arr = new Array(2, 3);
-alert( arr[0] ); // 2, создан массив [2, 3], всё ок
-
-*!*
-arr = new Array(2); // создаст массив [2] ?
-alert( arr[0] ); // undefined! у нас массив без элементов, длины 2
-*/!*
-```
-
-Что же такое этот "массив без элементов, но с длиной"? Как такое возможно?
-
-Оказывается, очень даже возможно и соответствует объекту `{length: 2}`. Получившийся массив ведёт себя так, как будто его элементы равны `undefined`.
-
-Это может быть неожиданным сюрпризом, поэтому обычно используют квадратные скобки.
-
-### Многомерные массивы   
-
-Массивы в JavaScript могут содержать в качестве элементов другие массивы. Это можно использовать для создания многомерных массивов, например матриц:
-
-```js
-//+ run
-var matrix = [
-  [1, 2, 3],
-  [4, 5, 6],
-  [7, 8, 9]
-];
-
-alert( matrix[1][1] ); // центральный элемент
-```
-
-## Внутреннее представление массивов
-
-[warn header="Hardcore coders only"]
-Эта секция относится ко внутреннему устройству структуры данных и требует специальных знаний. Она не обязательна к прочтению.
-[/warn]
-
-Числовые массивы, согласно спецификации, являются объектами, в которые добавили ряд свойств, методов и автоматическую длину `length`. Но внутри они, как правило, устроены по-другому.
-
-**Современные интерпретаторы стараются оптимизировать их и хранить в памяти не в виде хэш-таблицы, а в виде непрерывной области памяти, по которой легко пробежаться от начала до конца.** 
-
-Операции с массивами также оптимизируются, особенно если массив хранит только один тип данных, например только числа. Порождаемый набор инструкций для процессора получается очень эффективным.
-
-Чтобы у интерпретатора получались эти оптимизации, программист не должен мешать. 
-
-В частности:
-<ul>
-<li>Не ставить массиву произвольные свойства, такие как `arr.test = 5`. То есть, работать именно как с массивом, а не как с объектом.</li>
-<li>Заполнять массив непрерывно и по возрастающей. Как только браузер встречает необычное поведение массива, например устанавливается значение `arr[0]`, а потом сразу `arr[1000]`, то он начинает работать с ним, как с обычным объектом. Как правило, это влечёт преобразование его в хэш-таблицу.</li>
-</ul>
-
-
-Если следовать этим принципам, то массивы будут занимать меньше памяти и быстрее работать.
-
-## Итого
-
-Массивы существуют для работы с упорядоченным набором элементов. 
-
-**Объявление:**
-
-```js
-// предпочтительное
-var arr = [элемент1, элемент2...];
-
-// new Array
-var arr = new Array(элемент1, элемент2...);
-```
-
-При этом `new Array(число)` создаёт массив заданной длины, *без элементов*. Чтобы избежать ошибок, предпочтителен первый синтаксис.
-
-**Свойство `length`** -- длина массива. Если точнее, то последний индекс массива плюс `1`. Если её уменьшить вручную, то массив укоротится. Если `length` больше реального количества элементов, то отсутствующие элементы равны `undefined`.
-
-
-Массив можно использовать как очередь или стек.
-
-**Операции с концом массива:**
-<ul>
-<li>`arr.push(элемент1, элемент2...)` добавляет элементы в конец.</li>
-<li>`var elem = arr.pop()` удаляет и возвращает последний элемент.</li>
-</ul>
-
-**Операции с началом массива:**
-<ul>
-<li>`arr.unshift(элемент1, элемент2...)` добавляет элементы в начало.</li>
-<li>`var elem = arr.shift()` удаляет и возвращает первый элемент.</li>
-</ul>
-
-Эти операции перенумеровывают все элементы, поэтому работают медленно.
-
-В следующей главе мы рассмотрим другие методы для работы с массивами.
-
-
-
-
diff --git a/1-js/4-data-structures/7-array/queue.png b/1-js/4-data-structures/7-array/queue.png
deleted file mode 100644
index 8a90ef30..00000000
Binary files a/1-js/4-data-structures/7-array/queue.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/queue@2x.png b/1-js/4-data-structures/7-array/queue@2x.png
deleted file mode 100644
index 2a1281d0..00000000
Binary files a/1-js/4-data-structures/7-array/queue@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/stack.png b/1-js/4-data-structures/7-array/stack.png
deleted file mode 100644
index 566da719..00000000
Binary files a/1-js/4-data-structures/7-array/stack.png and /dev/null differ
diff --git a/1-js/4-data-structures/7-array/stack@2x.png b/1-js/4-data-structures/7-array/stack@2x.png
deleted file mode 100644
index 9301457d..00000000
Binary files a/1-js/4-data-structures/7-array/stack@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/solution.js
deleted file mode 100644
index ee254d29..00000000
--- a/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function addClass(obj, cls) {
-  var classes = obj.className ? obj.className.split(' ') : [];
-
-  for (var i = 0; i < classes.length; i++) {
-    if (classes[i] == cls) return; // класс уже есть
-  }
-
-  classes.push(cls); // добавить
-
-  obj.className = classes.join(' '); // и обновить свойство
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/test.js b/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/test.js
deleted file mode 100644
index 9ad36939..00000000
--- a/1-js/4-data-structures/8-array-methods/1-add-class/_js.view/test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-describe("addClass", function() {
-
-  it("добавляет класс, которого нет", function() {
-    var obj = {
-      className: 'open menu'
-    };
-    addClass(obj, 'new');
-    assert.deepEqual(obj, {
-      className: 'open menu new'
-    });
-  });
-
-  it("не добавляет класс, который уже есть", function() {
-    var obj = {
-      className: 'open menu'
-    };
-    addClass(obj, 'open');
-    assert.deepEqual(obj, {
-      className: 'open menu'
-    });
-  });
-
-  it("не добавляет лишних пробелов, который уже есть", function() {
-    var obj = {
-      className: ''
-    };
-    addClass(obj, 'open');
-    assert.deepEqual(obj, {
-      className: 'open'
-    });
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/1-add-class/solution.md b/1-js/4-data-structures/8-array-methods/1-add-class/solution.md
deleted file mode 100644
index 4cea0432..00000000
--- a/1-js/4-data-structures/8-array-methods/1-add-class/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-Решение заключается в превращении `obj.className` в массив при помощи `split`. 
-После этого в нем можно проверить наличие класса, и если нет - добавить.
-
-```js
-//+ run
-function addClass(obj, cls) {
-  var classes = obj.className ? obj.className.split(' ') : [];
-
-  for (var i = 0; i < classes.length; i++) {
-    if (classes[i] == cls) return; // класс уже есть
-  }
-
-  classes.push(cls); // добавить
-
-  obj.className = classes.join(' '); // и обновить свойство
-}
-
-var obj = {
-  className: 'open menu'
-};
-
-addClass(obj, 'new');
-addClass(obj, 'open');
-addClass(obj, 'me');
-alert(obj.className) // open menu new me
-```
-
-P.S. "Альтернативный" подход к проверке наличия класса вызовом `obj.className.indexOf(cls)` был бы неверным. В частности, он найдёт `cls = "menu"` в строке классов `obj.className = "open mymenu"`. 
-
-P.P.S. Проверьте, нет ли в вашем решении присвоения `obj.className += " " + cls`. Не добавляет ли оно лишний пробел в случае, если изначально `obj.className = ""`?
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/1-add-class/task.md b/1-js/4-data-structures/8-array-methods/1-add-class/task.md
deleted file mode 100644
index 0fdca02c..00000000
--- a/1-js/4-data-structures/8-array-methods/1-add-class/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Добавить класс в строку
-
-[importance 5]
-
-В объекте есть свойство `className`, которое содержит список "классов" - слов, разделенных пробелом:
-
-```js
-var obj = {
-  className: 'open menu'
-}
-```
-
-Создайте функцию `addClass(obj, cls)`, которая добавляет в список класс `cls`, но только если его там еще нет:
-
-```js
-addClass(obj, 'new'); // obj.className='open menu new'
-addClass(obj, 'open'); // без изменений (класс уже существует)
-addClass(obj, 'me'); // obj.className='open menu new me'
-
-alert( obj.className ); // "open menu new me"
-```
-
-P.S. Ваша функция не должна добавлять лишних пробелов.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/solution.js
deleted file mode 100644
index 857b8f23..00000000
--- a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/solution.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function aclean(arr) {
-  var obj = {};
-
-  for (var i = 0; i < arr.length; i++) {
-    var sorted = arr[i].toLowerCase().split("").sort().join("");
-    obj[sorted] = arr[i];
-  }
-
-  var result = [];
-
-  for (var key in obj) {
-    result.push(obj[key]);
-  }
-
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/test.js b/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/test.js
deleted file mode 100644
index c92521c3..00000000
--- a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function intersection(arr1, arr2) {
-  return arr1.filter(function(item) {
-    return arr2.indexOf(item) != -1;
-  });
-}
-
-describe("aclean", function() {
-
-  it("содержит ровно по 1 слову из каждого набора анаграмм", function() {
-    var arr = ["воз", "киборг", "корсет", "зов", "гробик", "костер", "сектор"];
-
-    var result = aclean(arr);
-    assert.equal(result.length, 3);
-
-    assert.equal(intersection(result, ["гробик", "киборг"]).length, 1);
-    assert.equal(intersection(result, ["воз", "зов"]).length, 1);
-    assert.equal(intersection(result, ["корсет", "сектор", "костер"]).length, 1);
-
-  });
-
-  it("не различает регистр символов", function() {
-    var arr = ["воз", "ЗОВ"];
-    assert.equal(aclean(arr).length, 1);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/solution.md b/1-js/4-data-structures/8-array-methods/10-filter-anagrams/solution.md
deleted file mode 100644
index 60ec5487..00000000
--- a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/solution.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Решение 
-
-Чтобы обнаружить анаграммы, разобьём каждое слово на буквы и отсортируем их. В отсортированном по буквам виде все анаграммы одинаковы.
-
-Например:
-
-```
-воз, зов -> взо
-киборг, гробик -> бгикор
-...
-```
-
-По такой последовательности будем делать массив уникальным. 
-
-Для этого воспользуемся вспомогательным объектом, в который будем записывать слова по отсортированному ключу:
-
-```js
-//+ run
-function aclean(arr) {
-  // этот объект будем использовать для уникальности
-  var obj = {};
-
-  for (var i = 0; i < arr.length; i++) {
-    // разбить строку на буквы, отсортировать и слить обратно
-*!*
-    var sorted = arr[i].toLowerCase().split('').sort().join(''); // (*)
-*/!*
-
-    obj[sorted] = arr[i]; // сохраняет только одно значение с таким ключом
-  }
-
-  var result = [];
-
-  // теперь в obj находится для каждого ключа ровно одно значение
-  for (var key in obj) result.push(obj[key]);
-
-  return result;
-}
-
-var arr = ["воз", "киборг", "корсет", "ЗОВ", "гробик", "костер", "сектор"];
-
-alert( aclean(arr) );
-```
-
-Приведение слова к  сортированному по буквам виду осуществляется цепочкой вызовов в строке `(*)`.
-
-Для удобства комментирования разобьём её на несколько строк (JavaScript это позволяет):
-
-```js
-var sorted = arr[i] // ЗОВ
-  .toLowerCase() // зов
-  .split('') // ['з','о','в']  
-  .sort() // ['в','з','о']
-  .join(''); // взо
-```
-
-Получится, что два разных слова `'ЗОВ'` и `'воз'` получат одинаковую отсортированную форму `'взо'`. 
-
-Следующая строка:
-
-```js
-obj[sorted] = arr[i];
-```
-
-В объект `obj` будет записано сначала первое из слов `obj['взо'] = "воз"`, а затем `obj['взо'] = 'ЗОВ'`. 
-
-Обратите внимание, ключ -- отсортирован, а само слово -- в исходной форме, чтобы можно было потом получить его из объекта.
-
-Вторая запись по тому же ключу перезапишет первую, то есть в объекте останется ровно одно слово с таким набором букв.
-
diff --git a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/task.md b/1-js/4-data-structures/8-array-methods/10-filter-anagrams/task.md
deleted file mode 100644
index 9654d440..00000000
--- a/1-js/4-data-structures/8-array-methods/10-filter-anagrams/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Отфильтровать анаграммы
-
-[importance 3]
-
-*Анаграммы* -- слова, состоящие из одинакового количества одинаковых букв, но в разном порядке.
-Например:
-
-```
-воз - зов
-киборг - гробик
-корсет - костер - сектор
-```
-
-Напишите функцию `aclean(arr)`, которая возвращает массив слов, очищенный от анаграмм. 
-
-Например:
-
-```js
-var arr = ["воз", "киборг", "корсет", "ЗОВ", "гробик", "костер", "сектор"];
-
-alert( aclean(arr) ); // "воз,киборг,корсет" или "ЗОВ,гробик,сектор"
-```
-
-Из каждой группы анаграмм должно остаться только одно слово, не важно какое.
-
-
-
diff --git a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js
deleted file mode 100644
index b1b50cc5..00000000
--- a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function unique(arr) {
-  var obj = {};
-
-  for (var i = 0; i < arr.length; i++) {
-    var str = arr[i];
-    obj[str] = true; // запомнить строку в виде свойства объекта
-  }
-
-  return Object.keys(obj); // или собрать ключи перебором для IE8-
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/test.js b/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/test.js
deleted file mode 100644
index 771317bf..00000000
--- a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe("unique", function() {
-  it("убирает неуникальные элементы из массива", function() {
-    var strings = ["кришна", "кришна", "харе", "харе",
-      "харе", "харе", "кришна", "кришна", "8-()"
-    ];
-
-    assert.deepEqual(unique(strings), ["кришна", "харе", "8-()"]);
-  });
-
-  it("не изменяет исходный массив", function() {
-    var strings = ["кришна", "кришна", "харе", "харе"];
-    unique(strings);
-    assert.deepEqual(strings, ["кришна", "кришна", "харе", "харе"]);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/11-array-unique/solution.md b/1-js/4-data-structures/8-array-methods/11-array-unique/solution.md
deleted file mode 100644
index e49f17b2..00000000
--- a/1-js/4-data-structures/8-array-methods/11-array-unique/solution.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Решение перебором (медленное)
-
-Пройдём по массиву вложенным циклом. 
-
-Для каждого элемента мы будем искать, был ли такой уже. Если был -- игнорировать:
-
-```js
-//+ run
-function unique(arr) {
-  var result = [];
-
-  nextInput:
-    for (var i = 0; i < arr.length; i++) {
-      var str = arr[i]; // для каждого элемента
-      for (var j = 0; j < result.length; j++) { // ищем, был ли он уже?
-        if (result[j] == str) continue nextInput; // если да, то следующий
-      }
-      result.push(str);
-    }
-
-  return result;
-}
-
-var strings = ["кришна", "кришна", "харе", "харе",
-  "харе", "харе", "кришна", "кришна", "8-()"
-];
-
-alert( unique(strings) ); // кришна, харе, 8-()
-```
-
-Давайте посмотрим, насколько быстро он будет работать.
-
-Предположим, в массиве `100` элементов. Если все они одинаковые, то `result` будет состоять из одного элемента и вложенный цикл будет выполняться сразу. В этом случае всё хорошо.
-
-А если все, или почти все элементы разные?
-
-В этом случае для каждого элемента понадобится обойти весь текущий массив результатов, после чего -- добавить в этот массив.
-
-<ol>
-<li>Для первого элемента -- это обойдётся в `0` операций доступа к элементам `result` (он пока пустой).</li>
-<li>Для второго элемента -- это обойдётся в `1` операцию доступа к элементам `result`.</li>
-<li>Для третьего элемента -- это обойдётся в `2` операции доступа к элементам `result`.</li>
-<li>...Для n-го элемента -- это обойдётся в `n-1` операций доступа к элементам `result`.</li>
-</ol>
-
-Всего <code>0 + 1 + 2 + ... + n-1 = (n-1)*n/2 = n<sup>2</sup>/2 - n/2</code> (как сумма арифметической прогрессии), то есть количество операций растёт примерно как квадрат от `n`.
-
-Это очень быстрый рост. Для `100` элементов -- `4950` операций, для `1000` -- `499500` (по формуле выше).
-
-Поэтому такое решение подойдёт только для небольших массивов. Вместо вложенного `for` можно использовать и `arr.indexOf`, ситуация от этого не поменяется, так как `indexOf` тоже ищет перебором.
-
-# Решение с объектом (быстрое)
-
-Наилучшая техника для выбора уникальных строк -- использование вспомогательного объекта `obj`. Ведь название свойства в объекте, с одной стороны -- строка, а с другой -- всегда уникально. Повторная запись в свойство с тем же именем перезапишет его.
-
-Например, если `"харе"` попало в объект один раз (`obj["харе"] = true`), то второе такое же присваивание ничего не изменит. 
-
-Решение ниже создаёт объект `obj = {}` и записывает в него все строки как имена свойств. А затем собирает свойства из объекта в массив через `for..in`. Дубликатов уже не будет.
-
-```js
-//+ run
-function unique(arr) {
-  var obj = {};
-
-  for (var i = 0; i < arr.length; i++) {
-    var str = arr[i];
-*!*
-    obj[str] = true; // запомнить строку в виде свойства объекта
-*/!*
-  }
-
-  return Object.keys(obj); // или собрать ключи перебором для IE8-
-}
-
-var strings = ["кришна", "кришна", "харе", "харе",
-  "харе", "харе", "кришна", "кришна", "8-()"
-];
-
-alert( unique(strings) ); // кришна, харе, 8-()
-```
-
-Так что можно положить все значения как ключи в объект, а потом достать.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/11-array-unique/task.md b/1-js/4-data-structures/8-array-methods/11-array-unique/task.md
deleted file mode 100644
index 15a5e3af..00000000
--- a/1-js/4-data-structures/8-array-methods/11-array-unique/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Оставить уникальные элементы массива
-
-[importance 3]
-
-Пусть `arr` -- массив строк.
-
-Напишите функцию `unique(arr)`, которая возвращает массив, содержащий только уникальные элементы `arr`.
-
-Например:
-
-```js
-function unique(arr) {
-  /* ваш код */
-}
-
-var strings = ["кришна", "кришна", "харе", "харе",
-  "харе", "харе", "кришна", "кришна", "8-()"
-];
-
-alert( unique(strings) ); // кришна, харе, 8-()
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js
deleted file mode 100644
index 6a150668..00000000
--- a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function camelize(str) {
-  var arr = str.split('-');
-
-  for (var i = 1; i < arr.length; i++) {
-    // преобразовать: первый символ с большой буквы
-    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
-  }
-
-  return arr.join('');
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js b/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js
deleted file mode 100644
index 0546d816..00000000
--- a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-describe("camelize", function() {
-
-  it("оставляет пустую строку \"как есть\"", function() {
-    assert.equal(camelize(""), "");
-  });
-
-  describe("делает заглавным первый символ после дефиса", function() {
-
-    it("превращает background-color в backgroundColor", function() {
-      assert.equal(camelize("background-color"), "backgroundColor");
-    });
-
-    it("превращает list-style-image в listStyleImage", function() {
-      assert.equal(camelize("list-style-image"), "listStyleImage");
-    });
-
-    it("превращает -webkit-transition в WebkitTransition", function() {
-      assert.equal(camelize("-webkit-transition"), "WebkitTransition");
-    });
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md b/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md
deleted file mode 100644
index 4f97bbc5..00000000
--- a/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Идея
-
-Задача может быть решена несколькими способами. Один из них -- разбить строку по дефису `str.split('-')`, затем последовательно сконструировать новую.
-
-# Решение
-
-Разобьем строку в массив, а затем преобразуем его элементы и сольём обратно:
-
-```js
-//+ run
-function camelize(str) {
-  var arr = str.split('-');
-
-  for (var i = 1; i < arr.length; i++) {
-    // преобразовать: первый символ с большой буквы
-    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
-  }
-
-  return arr.join('');
-}
-
-alert( camelize("background-color") ); // backgroundColor
-alert( camelize("list-style-image") ); // listStyleImage
-alert( camelize("-webkit-transition") ); // WebkitTransition
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/task.md b/1-js/4-data-structures/8-array-methods/2-camelcase/task.md
deleted file mode 100644
index dd2446d4..00000000
--- a/1-js/4-data-structures/8-array-methods/2-camelcase/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Перевести текст вида border-left-width в borderLeftWidth
-
-[importance 3]
-
-Напишите функцию `camelize(str)`, которая преобразует строки вида "my-short-string" в "myShortString".
-
-То есть, дефисы удаляются, а все слова после них получают заглавную букву.
-
-Например:
-
-```js
-camelize("background-color") == 'backgroundColor';
-camelize("list-style-image") == 'listStyleImage';
-camelize("-webkit-transition") == 'WebkitTransition';
-```
-
-Такая функция полезна при работе с CSS. 
-
-P.S. Вам пригодятся методы строк `charAt`, `split` и `toUpperCase`.
-
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js
deleted file mode 100644
index f5c9ab64..00000000
--- a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function removeClass(obj, cls) {
-  var classes = obj.className.split(' ');
-
-  for (i = 0; i < classes.length; i++) {
-    if (classes[i] == cls) {
-      classes.splice(i, 1); // удалить класс  
-      i--;
-    }
-  }
-  obj.className = classes.join(' ');
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js b/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js
deleted file mode 100644
index 809009a9..00000000
--- a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-describe("removeClass", function() {
-
-  it("ничего не делает, если класса нет", function() {
-    var obj = {
-      className: 'open menu'
-    };
-    removeClass(obj, 'new');
-    assert.deepEqual(obj, {
-      className: 'open menu'
-    });
-  });
-
-  it("не меняет пустое свойство", function() {
-    var obj = {
-      className: ''
-    };
-    removeClass(obj, 'new');
-    assert.deepEqual(obj, {
-      className: ""
-    });
-  });
-
-  it("удаляет класс, не оставляя лишних пробелов", function() {
-    var obj = {
-      className: 'open menu'
-    };
-    removeClass(obj, 'open');
-    assert.deepEqual(obj, {
-      className: "menu"
-    });
-  });
-
-  it("если класс один и он удалён, то результат - пустая строка", function() {
-    var obj = {
-      className: "menu"
-    };
-    removeClass(obj, 'menu');
-    assert.deepEqual(obj, {
-      className: ""
-    });
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md b/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md
deleted file mode 100644
index acade80b..00000000
--- a/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md
+++ /dev/null
@@ -1,33 +0,0 @@
-Решение заключается в том, чтобы разбить `className` в массив классов, а затем пройтись по нему циклом. Если класс есть - удаляем его `splice`, заново объединяем массив в строку и присваиваем объекту.
-
-```js
-//+ run
-function removeClass(obj, cls) {
-  var classes = obj.className.split(' ');
-
-  for (i = 0; i < classes.length; i++) {
-    if (classes[i] == cls) {
-      classes.splice(i, 1); // удалить класс  
-*!*
-      i--; // (*)
-*/!*
-    }
-  }
-  obj.className = classes.join(' ');
-
-}
-
-var obj = {
-  className: 'open menu menu'
-}
-
-removeClass(obj, 'blabla');
-removeClass(obj, 'menu')
-alert(obj.className) // open
-```
-
-В примере выше есть тонкий момент. Элементы массива проверяются один за другим. При вызове `splice` удаляется текущий, `i-й` элемент, и те элементы, которые идут дальше, сдвигаются на его место.
-
-Таким образом, **на месте `i` оказывается новый, непроверенный элемент**. 
-
-Чтобы это учесть, строчка `(*)` уменьшает `i`, чтобы следующая итерация цикла заново проверила  элемент с номером `i`. Без нее функция будет работать с ошибками.
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/task.md b/1-js/4-data-structures/8-array-methods/3-remove-class/task.md
deleted file mode 100644
index 8643ca06..00000000
--- a/1-js/4-data-structures/8-array-methods/3-remove-class/task.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Функция removeClass
-
-[importance 5]
-
-У объекта есть свойство `className`, которое хранит список "классов" - слов, разделенных пробелами:
-
-```js
-var obj = {
-  className: 'open menu'
-};
-```
-
-Напишите функцию `removeClass(obj, cls)`, которая удаляет класс `cls`, если он есть:
-
-```js
-removeClass(obj, 'open'); // obj.className='menu'
-removeClass(obj, 'blabla'); // без изменений (нет такого класса)
-```
-
-P.S. Дополнительное усложнение. Функция должна корректно обрабатывать дублирование класса в строке:
-
-```js
-obj = {
-  className: 'my menu menu'
-};
-removeClass(obj, 'menu');
-alert( obj.className ); // 'my'
-```
-
-Лишних пробелов после функции образовываться не должно.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js
deleted file mode 100644
index 541e1e0c..00000000
--- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function filterRangeInPlace(arr, a, b) {
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (val < a || val > b) {
-      arr.splice(i--, 1);
-    }
-  }
-
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js b/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js
deleted file mode 100644
index f8374db2..00000000
--- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-describe("filterRangeInPlace", function() {
-
-  it("меняет массив, оставляя только значения из диапазона", function() {
-    var arr = [5, 3, 8, 1];
-    filterRangeInPlace(arr, 1, 4);
-    assert.deepEqual(arr, [3, 1]);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md b/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md
deleted file mode 100644
index 1815310b..00000000
--- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-```js
-//+ run
-function filterRangeInPlace(arr, a, b) {
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (val < a || val > b) {
-      arr.splice(i--, 1);
-    }
-  }
-
-}
-
-var arr = [5, 3, 8, 1];
-
-filterRangeInPlace(arr, 1, 4);
-alert( arr ); // [3, 1]
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md b/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md
deleted file mode 100644
index bd826837..00000000
--- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Фильтрация массива "на месте"
-
-[importance 4]
-
-Создайте функцию `filterRangeInPlace(arr, a, b)`, которая получает массив с числами `arr` и удаляет из него все числа вне диапазона `a..b`. 
-То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. Функция должна менять сам массив и ничего не возвращать.
-
-Например:
-
-```js
-arr = [5, 3, 8, 1];
-
-filterRangeInPlace(arr, 1, 4); // удалены числа вне диапазона 1..4
-
-alert( arr ); // массив изменился: остались [3, 1]
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md b/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md
deleted file mode 100644
index 62f68429..00000000
--- a/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```js
-//+ run
-var arr = [5, 2, 1, -10, 8];
-
-function compareReversed(a, b) {
-  return b - a;
-}
-
-arr.sort(compareReversed);
-
-alert( arr );
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/5-sort-back/task.md b/1-js/4-data-structures/8-array-methods/5-sort-back/task.md
deleted file mode 100644
index e2976326..00000000
--- a/1-js/4-data-structures/8-array-methods/5-sort-back/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Сортировать в обратном порядке
-
-[importance 5]
-
-Как отсортировать массив чисел в обратном порядке?
-
-```js
-var arr = [5, 2, 1, -10, 8];
-
-// отсортируйте?
-
-alert( arr ); // 8, 5, 2, 1, -10
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md b/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md
deleted file mode 100644
index 4d1d8586..00000000
--- a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Для копирования массива используем `slice()`, и тут же -- сортировку:
-
-```js
-//+ run
-var arr = ["HTML", "JavaScript", "CSS"];
-
-*!*
-var arrSorted = arr.slice().sort();
-*/!*
-
-alert( arrSorted );
-alert( arr );
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md b/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md
deleted file mode 100644
index 374bbf5c..00000000
--- a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Скопировать и отсортировать массив
-
-[importance 5]
-
-Есть массив строк `arr`. Создайте массив `arrSorted` -- из тех же элементов, но отсортированный.
-
-Исходный массив не должен меняться.
-
-```js
-var arr = ["HTML", "JavaScript", "CSS"];
-
-// ... ваш код ...
-
-alert( arrSorted ); // CSS, HTML, JavaScript
-alert( arr ); // HTML, JavaScript, CSS (без изменений)
-```
-
-Постарайтесь сделать код как можно короче.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md b/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md
deleted file mode 100644
index 559a0cd6..00000000
--- a/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Подсказка
-
-Функция сортировки должна возвращать случайный результат сравнения. Используйте для этого [Math.random](http://javascript.ru/Math.random).
-
-# Решение
-
-Обычно `Math.random()` возвращает результат от `0` до `1`. Вычтем `0.5`, чтобы область значений стала `[-0.5 ... 0.5)`.
-
-```js
-//+ run
-var arr = [1, 2, 3, 4, 5];
-
-*!*
-function compareRandom(a, b) {
-  return Math.random() - 0.5;
-}
-
-arr.sort(compareRandom);
-*/!*
-
-alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4]
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md b/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md
deleted file mode 100644
index 1dd4e46b..00000000
--- a/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Случайный порядок в массиве
-
-[importance 3]
-
-Используйте функцию `sort` для того, чтобы "перетрясти" элементы массива в случайном порядке.
-
-```js
-var arr = [1, 2, 3, 4, 5];
-
-arr.sort(ваша функция);
-
-alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4]
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md b/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md
deleted file mode 100644
index 21bf6d13..00000000
--- a/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Для сортировки объявим и передадим в `sort` анонимную функцию, которая сравнивает объекты по полю `age`:
-
-```js
-//+ run no-beautify
-*!*
-// Наша функция сравнения
-function compareAge(personA, personB) {
-  return personA.age - personB.age;
-}
-*/!*
-
-// проверка
-var vasya = { name: "Вася", age: 23 };
-var masha = { name: "Маша", age: 18 };
-var vovochka = { name: "Вовочка", age: 6 };
-
-var people = [ vasya , masha , vovochka ];
-
-people.sort(compareAge);
-
-// вывести
-for(var i = 0; i < people.length; i++) {
-  alert(people[i].name); // Вовочка Маша Вася
-}
-```
-
diff --git a/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md b/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md
deleted file mode 100644
index 5a3ae3ec..00000000
--- a/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Сортировка объектов
-
-[importance 5]
-
-Напишите код, который отсортирует массив объектов `people` по полю `age`.
-
-Например:
-
-```js
-//+ no-beautify
-var vasya = { name: "Вася", age: 23 };
-var masha = { name: "Маша", age: 18 };
-var vovochka = { name: "Вовочка", age: 6 };
-
-var people = [ vasya , masha , vovochka ];
-
-... ваш код ...
-
-// теперь people: [vovochka, masha, vasya]
-alert(people[0].age) // 6
-```
-
-Выведите список имён в массиве после сортировки.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png
deleted file mode 100644
index 5c1c8842..00000000
Binary files a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png and /dev/null differ
diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png
deleted file mode 100644
index 84def76b..00000000
Binary files a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md
deleted file mode 100644
index 5182f748..00000000
--- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md
+++ /dev/null
@@ -1,158 +0,0 @@
-# Вывод списка в цикле
-
-```js
-//+ run
-var list = {
-  value: 1,
-  next: {
-    value: 2,
-    next: {
-      value: 3,
-      next: {
-        value: 4,
-        next: null
-      }
-    }
-  }
-};
-
-function printList(list) {
-  var tmp = list;
-
-  while (tmp) {
-    alert( tmp.value );
-    tmp = tmp.next;
-  }
-
-}
-
-printList(list);
-```
-
-Обратите внимание, что для прохода по списку используется временная переменная `tmp`, а не `list`. Можно было бы и бегать по списку, используя входной параметр функции:
-
-```js
-function printList(list) {
-
-  while(*!*list*/!*) {
-    alert( list.value );
-    list = list.next;
-  }
-
-}
-```
-
-...Но при этом мы в будущем не сможем расширить функцию и сделать со списком что-то ещё, ведь после окончания цикла начало списка уже нигде не хранится.
-
-Поэтому и используется временная переменная -- чтобы сделать код расширяемым, и, кстати, более понятным, ведь роль `tmp` -- исключительно обход списка, как `i` в цикле `for`.
-
-# Вывод списка с рекурсией
-
-Рекурсивный вариант `printList(list)` следует простой логике: вывести текущее значение `(1)`, а затем пропустить через себя следующее  `(2)`:
-
-```js
-//+ run
-var list = {
-  value: 1,
-  next: {
-    value: 2,
-    next: {
-      value: 3,
-      next: {
-        value: 4,
-        next: null
-      }
-    }
-  }
-};
-
-function printList(list) {
-
-  alert( list.value ); // (1)
-
-  if (list.next) {
-    printList(list.next); // (2)
-  }
-
-}
-
-printList(list);
-```
-
-# Обратный вывод с рекурсией
-
-Обратный вывод -- почти то же самое, что прямой, просто сначала мы обрабатываем следующее значение, а потом -- текущее:
-
-```js
-//+ run
-var list = {
-  value: 1,
-  next: {
-    value: 2,
-    next: {
-      value: 3,
-      next: {
-        value: 4,
-        next: null
-      }
-    }
-  }
-};
-
-function printReverseList(list) {
-
-  if (list.next) {
-    printReverseList(list.next);
-  }
-
-  alert( list.value );
-}
-
-printReverseList(list);
-```
-
-# Обратный вывод без рекурсии
-
-```js
-//+ run
-var list = {
-  value: 1,
-  next: {
-    value: 2,
-    next: {
-      value: 3,
-      next: {
-        value: 4,
-        next: null
-      }
-    }
-  }
-};
-
-
-function printReverseList(list) {
-  var arr = [];
-  var tmp = list;
-
-  while (tmp) {
-    arr.push(tmp.value);
-    tmp = tmp.next;
-  }
-
-  for (var i = arr.length - 1; i >= 0; i--) {
-    alert( arr[i] );
-  }
-}
-
-printReverseList(list);
-```
-
-**Обратный вывод без рекурсии быстрее.**
-
-По сути, рекурсивный вариант и нерекурсивный работают одинаково: они проходят список и запоминают его элементы, а потом выводят в обратном порядке.
-
-В случае с массивом это очевидно, а для рекурсии запоминание происходит в стеке (внутренней специальной структуре данных): когда вызывается вложенная функция, то интерпретатор сохраняет в стек текущие параметры. Вложенные вызовы заполняют стек, а потом он выводится в обратном порядке.
-
-При этом, при рекурсии в стеке сохраняется не только элемент списка, а другая вспомогательная информация, необходимая для возвращения из вложенного вызова. Поэтому тратится больше памяти. Все эти расходы отсутствуют во варианте без рекурсии, так как в массиве хранится именно то, что нужно.
-
-Преимущество рекурсии, с другой стороны -- более короткий и, зачастую, более простой код.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md
deleted file mode 100644
index bfb1523f..00000000
--- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Вывести односвязный список
-
-[importance 5]
-
-[Односвязный список](http://ru.wikipedia.org/wiki/Связный_список) -- это структура данных, которая состоит из *элементов*, каждый из которых хранит ссылку на следующий. Последний элемент может не иметь ссылки, либо она равна `null`.
-
-Например, объект ниже задаёт односвязный список, в `next` хранится ссылка на следующий элемент:
-
-```js
-var list = {
-  value: 1,
-  next: {
-    value: 2,
-    next: {
-      value: 3,
-      next: {
-        value: 4,
-        next: null
-      }
-    }
-  }
-};
-```
-
-Графическое представление этого списка:
-<img src="linked-list.png">
-
-Альтернативный способ создания:
-
-```js
-//+ no-beautify
-var list = { value: 1 };
-list.next = { value: 2 };
-list.next.next = { value: 3 };
-list.next.next.next = { value: 4 };
-```
-
-Такая структура данных интересна тем, что можно очень быстро разбить список на части, объединить списки, удалить или добавить элемент в любое место, включая начало. При использовании массива такие действия требуют обширных перенумерований.
-
-Задачи:
-
-<ol>
-<li>Напишите функцию `printList(list)`, которая выводит элементы списка по очереди, при помощи цикла.</li>
-<li>Напишите функцию `printList(list)` при помощи рекурсии.</li>
-<li>Напишите функцию `printReverseList(list)`, которая выводит элементы списка в обратном порядке, при помощи рекурсии. 
-Для списка выше она должна выводить `4`,`3`,`2`,`1`</li>
-<li>Сделайте вариант `printReverseList(list)`, использующий не рекурсию, а цикл.</li>
-</ol>
-
-Как лучше -- с рекурсией или без?
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-methods/article.md b/1-js/4-data-structures/8-array-methods/article.md
deleted file mode 100644
index 331738e6..00000000
--- a/1-js/4-data-structures/8-array-methods/article.md
+++ /dev/null
@@ -1,441 +0,0 @@
-# Массивы: методы
-
-В этой главе мы рассмотрим встроенные методы массивов JavaScript.
-[cut]
-
-## Метод split   
-
-Ситуация из реальной жизни. Мы пишем сервис отсылки сообщений и посетитель вводит имена тех, кому его отправить: `Маша, Петя, Марина, Василий...`. Но нам-то гораздо удобнее работать с массивом имен, чем с одной строкой. 
-
-К счастью, есть метод `split(s)`, который позволяет превратить строку в массив, разбив ее по разделителю `s`. В примере ниже таким разделителем является строка из запятой и пробела.
-
-```js
-//+ run
-var names = 'Маша, Петя, Марина, Василий';
-
-var arr = names.split(', ');
-
-for (var i = 0; i < arr.length; i++) {
-  alert( 'Вам сообщение ' + arr[i] );
-}
-```
-
-[smart header="Второй аргумент `split`"]
-У метода `split` есть необязательный второй аргумент -- ограничение на количество элементов в массиве. Если их больше, чем указано -- остаток массива будет отброшен:
-
-```js
-//+ run
-alert( "a,b,c,d".split(',', *!*2*/!*) ); // a,b
-```
-
-[/smart]
-
-[smart header="Разбивка по буквам"]
-Вызов `split` с пустой строкой разобьёт по буквам:
-
-```js
-//+ run
-var str = "тест";
-
-alert( str.split('') ); // т,е,с,т
-```
-
-[/smart]
-
-## Метод join 
-
-Вызов `arr.join(str)` делает в точности противоположное `split`. Он берет массив и склеивает его в строку, используя `str` как разделитель.
-
-Например:
-
-```js
-//+ run
-var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
-
-var str = arr.join(';');
-
-alert( str ); // Маша;Петя;Марина;Василий
-```
-
-[smart header="new Array + join = Повторение строки"]
-Код для повторения строки `3` раза:
-
-```js
-//+ run
-alert( new Array(4).join("ля") ); // ляляля
-```
-
-Как видно, `new Array(4)` делает массив без элементов длины 4, который `join` объединяет в строку, вставляя *между его элементами* строку `"ля"`. 
-
-В результате, так как элементы пусты, получается повторение строки. Такой вот небольшой трюк.
-[/smart]
-
-
-## Удаление из массива
-
-Так как массивы являются объектами, то для удаления ключа можно воспользоваться обычным `delete`:
-
-```js
-//+ run
-var arr = ["Я", "иду", "домой"];
-
-delete arr[1]; // значение с индексом 1 удалено
-
-// теперь arr = ["Я", undefined, "домой"];
-alert( arr[1] ); // undefined
-```
-
-Да, элемент удален из массива, но не так, как нам этого хочется. Образовалась "дырка".
-
-Это потому, что оператор `delete` удаляет пару "ключ-значение". Это -- все, что он делает. Обычно же при удалении из массива мы хотим, чтобы оставшиеся элементы сдвинулись и заполнили образовавшийся промежуток.
-
-Поэтому для удаления используются специальные методы: из начала -- `shift`, с конца -- `pop`, а из середины -- `splice`, с которым мы сейчас познакомимся.
-
-## Метод splice   
-
-Метод `splice` -- это универсальный раскладной нож для работы с массивами. Умеет все: удалять элементы, вставлять элементы, заменять элементы -- по очереди и одновременно.
-
-Его синтаксис:
-
-<dl>
-<dt>`arr.splice(index[, deleteCount, elem1, ..., elemN])`</dt>
-<dd>Удалить `deleteCount` элементов, начиная с номера `index`, а затем вставить `elem1, ..., elemN` на их место. Возвращает массив из удалённых элементов.</dd>
-</dl>
-
-Этот метод проще всего понять, рассмотрев примеры.
-
-Начнём с удаления:
-
-```js
-//+ run
-var arr = ["Я", "изучаю", "JavaScript"];
-
-*!*
-arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
-*/!*
-
-alert( arr ); //  осталось ["Я", "JavaScript"]
-```
-
-В следующем примере мы удалим 3 элемента и вставим другие на их место:
-
-```js
-//+ run
-var arr = [*!*"Я", "сейчас", "изучаю",*/!* "JavaScript"];
-
-// удалить 3 первых элемента и добавить другие вместо них
-arr.splice(0, 3, "Мы", "изучаем") 
-
-alert( arr ) // теперь [*!*"Мы", "изучаем"*/!*, "JavaScript"]
-```
-
-Здесь видно, что `splice` возвращает массив из удаленных элементов:
-
-```js
-//+ run
-var arr = [*!*"Я", "сейчас",*/!* "изучаю", "JavaScript"];
-
-// удалить 2 первых элемента 
-var removed = arr.splice(0, 2); 
-
-alert( removed ); // "Я", "сейчас" <-- array of removed elements
-```
-
-Метод `splice` также может вставлять элементы без удаления, для этого достаточно установить `deleteCount` в `0`:
-
-```js
-//+ run
-var arr = ["Я", "изучаю", "JavaScript"];
-
-// с позиции 2 
-// удалить 0 
-// вставить "сложный", "язык"
-arr.splice(2, 0, "сложный", "язык");
-
-alert( arr ); // "Я", "изучаю", "сложный", "язык", "JavaScript"
-```
-
-Допускается использование отрицательного номера позиции, которая в этом случае отсчитывается с конца:
-
-```js
-//+ run
-var arr = [1, 2, 5]
-
-// начиная с позиции индексом -1 (предпоследний элемент)
-// удалить 0 элементов, 
-// затем вставить числа 3 и 4
-arr.splice(-1, 0, 3, 4);
-
-alert( arr ); // результат: 1,2,3,4,5
-```
-
-## Метод slice   
-
-Метод `slice(begin, end)` копирует участок массива от `begin` до `end`, не включая `end`. Исходный массив при этом не меняется.
-
-Например:
-
-```js
-//+ run
-var arr = ["Почему", "надо", "учить", "JavaScript"];
-
-var arr2 = arr.slice(1, 3); // элементы 1, 2 (не включая 3)
-
-alert( arr2 ); // надо, учить
-```
-
-Аргументы ведут себя так же, как и в строковом `slice`:
-<ul>
-<li>Если не указать `end` -- копирование будет до конца массива:
-
-```js
-//+ run
-var arr = ["Почему", "надо", "учить", "JavaScript"];
-
-alert( arr.slice(1) ); // взять все элементы, начиная с номера 1
-```
-
-</li>
-<li>Можно использовать отрицательные индексы, они отсчитываются с конца:
-
-```js
-var arr2 = arr.slice(-2); // копировать от 2го элемента с конца и дальше
-```
-
-</li>
-<li>Если вообще не указать аргументов -- скопируется весь массив:
-
-```js
-var fullCopy = arr.slice();
-```
-
-</li>
-</ul>
-
-[smart header="Совсем как в строках"]
-Синтаксис метода `slice` одинаков для строк и для массивов. Тем проще его запомнить.
-[/smart]
-
-## Сортировка, метод sort(fn)   
-
-Метод `sort()` сортирует массив *на месте*. Например:
-
-```js
-//+ run
-var arr = [ 1, 2, 15 ];
-
-arr.sort();
-
-alert( arr );  // *!*1, 15, 2*/!*
-```
-
-Не заметили ничего странного в этом примере? 
-
-Порядок стал `1, 15, 2`, это точно не сортировка чисел. Почему? 
-
-**Это произошло потому, что по умолчанию `sort` сортирует, преобразуя элементы к строке.**
-
-Поэтому и порядок у них строковый, ведь `"2" > "15"`.
-
-### Свой порядок сортировки
-
-Для указания своего порядка сортировки в метод `arr.sort(fn)` нужно передать функцию `fn` от двух элементов, которая умеет сравнивать их.
-
-Внутренний алгоритм функции сортировки умеет сортировать любые массивы -- апельсинов, яблок, пользователей, и тех и других и третьих -- чего угодно. Но для этого ему нужно знать, как их сравнивать. Эту роль и выполняет `fn`.
-
-Если эту функцию не указать, то элементы сортируются как строки.
-
-Например, укажем эту функцию явно, отсортируем элементы массива как числа:
-
-```js
-//+ run
-function compareNumeric(a, b) {
-  if (a > b) return 1;
-  if (a < b) return -1;
-}
-
-var arr = [ 1, 2, 15 ];
-
-*!*
-arr.sort(compareNumeric);
-*/!*
-
-alert(arr);  // *!*1, 2, 15*/!*
-```
-
-Обратите внимание, мы передаём в `sort()` именно саму функцию `compareNumeric`, без вызова через скобки. Был бы ошибкой следующий код:
-
-```js
-arr.sort( compareNumeric*!*()*/!* );  // не сработает
-```
-
-Как видно из примера выше, функция, передаваемая `sort`, должна иметь два аргумента.
-
-Алгоритм сортировки, встроенный в JavaScript, будет передавать ей для сравнения элементы массива. Она должна возвращать:
-
-<ul>
-<li>Положительное значение, если `a > b`,</li>
-<li>Отрицательное значение, если `a < b`,</li>
-<li>Если равны -- можно `0`, но вообще -- не важно, что возвращать, их взаимный порядок не имеет значения.</li>
-</ul>
-
-
-[smart header="Алгоритм сортировки"]
-В методе `sort`, внутри самого интерпретатора JavaScript, реализован универсальный алгоритм сортировки. Как правило, это ["\"быстрая сортировка\""](http://algolist.manual.ru/sort/quick_sort.php), дополнительно оптимизированная для небольших массивов.
-
-Он решает, какие пары элементов и когда сравнивать, чтобы отсортировать побыстрее. Мы даём ему функцию -- способ сравнения, дальше он вызывает её сам.
-
-Кстати, те значения, с которыми `sort` вызывает функцию сравнения, можно увидеть, если вставить в неё `alert`:
-
-```js
-//+ run
-[1, -2, 15, 2, 0, 8].sort(function(a, b) {
-  alert( a + " <> " + b );
-});
-```
-
-[/smart]
-
-[smart header="Сравнение `compareNumeric` в одну строку"]
-Функцию `compareNumeric` для сравнения элементов-чисел можно упростить до одной строчки.
-
-```js
-function compareNumeric(a, b) {
-  return a - b;
-}
-```
-
-Эта функция вполне подходит для `sort`, так как возвращает положительное число, если `a > b`, отрицательное, если наоборот, и `0`, если числа равны. 
-[/smart]
-
-
-## reverse
-
-Метод [arr.reverse()](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reverse) меняет порядок элементов в массиве на обратный.
-
-```js
-//+ run
-var arr = [1, 2, 3];
-arr.reverse();
-
-alert( arr ); // 3,2,1
-```
-
-## concat
-
-Метод [arr.concat(value1, value2, ... valueN)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat) создаёт новый массив, в который копируются элементы из `arr`, а также `value1, value2, ... valueN`.
-
-Например:
-
-```js
-//+ run
-var arr = [1, 2];
-*!*
-var newArr = arr.concat(3, 4);
-*/!*
-
-alert( newArr ); // 1,2,3,4
-```
-
-У `concat` есть одна забавная особенность.
-
-Если аргумент `concat` -- массив, то `concat` добавляет элементы из него.
-
-Например:
-
-```js
-//+ run
-var arr = [1, 2];
-
-*!*
-var newArr = arr.concat([3, 4], 5); // то же самое, что arr.concat(3,4,5)
-*/!*
-
-alert( newArr ); // 1,2,3,4,5
-```
-
-## indexOf/lastIndexOf
-
-Эти методы не поддерживаются в IE8-. Для их поддержки подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim).
-
-
-Метод ["arr.indexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf) возвращает номер элемента `searchElement` в массиве `arr` или `-1`, если его нет. 
-
-Поиск начинается с номера `fromIndex`, если он указан. Если нет -- с начала массива.
-
-**Для поиска используется строгое сравнение `===`.** 
-
-Например:
-
-```js
-//+ run
-var arr = [1, 0, false];
-
-alert( arr.indexOf(0) ); // 1
-alert( arr.indexOf(false) ); // 2
-alert( arr.indexOf(null) ); // -1
-```
-
-Как вы могли заметить, по синтаксису он полностью аналогичен методу [indexOf для строк](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf).
-
-Метод ["arr.lastIndexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf) ищет справа-налево: с конца массива или с номера `fromIndex`, если он указан. 
-
-[warn header="Методы `indexOf/lastIndexOf` осуществляют поиск перебором"]
-Если нужно проверить, существует ли значение в массиве -- его нужно перебрать. Только так. Внутренняя реализация `indexOf/lastIndexOf` осуществляет полный перебор, аналогичный циклу `for` по массиву. Чем длиннее массив, тем дольше он будет работать.
-[/warn]
-
-[smart header="Коллекция уникальных элементов"]
-Рассмотрим задачу -- есть коллекция строк, и нужно быстро проверять: есть ли в ней какой-то элемент. Массив для этого не подходит из-за медленного `indexOf`. Но подходит объект! Доступ к свойству объекта осуществляется очень быстро, так что можно сделать все элементы ключами объекта и проверять, есть ли уже такой ключ.
-
-Например, организуем такую проверку для коллекции строк `"div"`, `"a"` и `"form"`:
-
-```js
-var store = {}; // объект для коллекции
-
-var items = ["div", "a", "form"];
-
-for (var i = 0; i < items.length; i++) {
-  var key = items[i]; // для каждого элемента создаём свойство
-  store[key] = true; // значение здесь не важно
-}
-```
-
-Теперь для проверки, есть ли ключ `key`, достаточно выполнить `if (store[key])`. Если есть -- можно использовать значение, если нет -- добавить. 
-
-Такое решение работает только со строками, но применимо к любым элементам, для которых можно вычислить строковый  "уникальный ключ".
-[/smart]
-
-
-
-
-## Object.keys(obj)
-
-Ранее мы говорили о том, что свойства объекта можно перебрать в цикле `for..in`.
-
-Если мы хотим работать с ними в виде массива, то к нашим услугам -- замечательный метод [Object.keys(obj)](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys). Он поддерживается везде, кроме IE8-:
-
-```js
-//+ run
-var user = {
-  name: "Петя",
-  age: 30
-}
-
-var keys = Object.keys(user);
-
-alert( keys ); // name, age
-```
-
-## Итого
-
-Методы:
-<ul>
-<li>`push/pop`, `shift/unshift`, `splice` -- для добавления и удаления элементов.</li>
-<li>`join/split` -- для преобразования строки в массив и обратно.</li>
-<li>`sort` -- для сортировки массива. Если не передать функцию сравнения -- сортирует элементы как строки.</li>
-<li>`reverse` -- меняет порядок элементов на обратный.</li>
-<li>`concat` -- объединяет массивы.</li>
-<li>`indexOf/lastIndexOf` -- возвращают позицию элемента в массиве (не поддерживается в IE8-).</li>
-</ul>
- 
-Изученных нами методов достаточно в 95% случаях, но существуют и другие. Для знакомства с ними рекомендуется заглянуть в справочник <a href="http://javascript.ru/Array">Array</a> и [Array в Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array).
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md b/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md
deleted file mode 100644
index 3b1d135e..00000000
--- a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```js
-//+ run
-var arr = ["Есть", "жизнь", "на", "Марсе"];
-
-*!*
-var arrLength = arr.map(function(item) {
-  return item.length;
-});
-*/!*
-
-alert( arrLength ); // 4,5,2,5
-```
-
diff --git a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md b/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md
deleted file mode 100644
index db58c32f..00000000
--- a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Перепишите цикл через map
-
-[importance 5]
-
-Код ниже получает из массива строк новый массив, содержащий их длины:
-
-```js
-//+ run
-var arr = ["Есть", "жизнь", "на", "Марсе"];
-
-*!*
-var arrLength = [];
-for (var i = 0; i < arr.length; i++) {
-  arrLength[i] = arr[i].length;
-}
-*/!*
-
-alert( arrLength ); // 4,5,2,5
-```
-
-Перепишите выделенный участок: уберите цикл, используйте вместо него метод `map`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js
deleted file mode 100644
index c79d8e9e..00000000
--- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js
+++ /dev/null
@@ -1,12 +0,0 @@
-function getSums(arr) {
-  var result = [];
-  if (!arr.length) return result;
-
-  var totalSum = arr.reduce(function(sum, item) {
-    result.push(sum);
-    return sum + item;
-  });
-  result.push(totalSum);
-
-  return result;
-}
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js
deleted file mode 100644
index 74a170a6..00000000
--- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-describe("getSums", function() {
-
-  it("частичные суммы [1,2,3,4,5] равны [1,3,6,10,15]", function() {
-    assert.deepEqual(getSums([1, 2, 3, 4, 5]), [1, 3, 6, 10, 15]);
-  });
-
-  it("частичные суммы [-2,-1,0,1] равны [-2,-3,-3,-2]", function() {
-    assert.deepEqual(getSums([-2, -1, 0, 1]), [-2, -3, -3, -2]);
-  });
-
-  it("частичные суммы [] равны []", function() {
-    assert.deepEqual(getSums([]), []);
-  });
-
-  it("частичные суммы [1] равны [1]", function() {
-    assert.deepEqual(getSums([1]), [1]);
-  });
-});
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md
deleted file mode 100644
index 33a25c84..00000000
--- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md
+++ /dev/null
@@ -1,47 +0,0 @@
-Метод `arr.reduce` подходит здесь идеально. Достаточно пройтись по массиву слева-направа, накапливая текущую сумму в переменной и, кроме того, добавляя её в результирующий массив.
-
-Неправильный вариант может выглядеть так:
-
-```js
-//+ run
-function getSums(arr) {
-  var result = [];
-  if (!arr.length) return result;
-
-  arr.reduce(function(sum, item) {
-    result.push(sum);
-    return sum + item;
-  });
-    
-  return result;
-}
-
-alert(getSums([1,2,3,4,5])); // результат: *!*1,3,6,10*/!*
-```
-
-Перед тем, как читать дальше, посмотрите на него внимательно. Заметили, в чём ошибка?
-
-Если вы его запустите, то обнаружите, что результат не совсем тот. В получившемся массиве всего четыре элемента, отсутствует последняя сумма.
-
-Это из-за того, что последняя сумма является результатом метода `reduce`, он на ней заканчивает проход и далее функцию не вызывает, поэтому она оказывается не добавленной в `result`.
-
-Исправим это:
-
-```js
-//+ run
-function getSums(arr) {
-  var result = [];
-
-  *!*var totalSum*/!* = arr.reduce(function(sum, item) {
-    result.push(sum);
-    return sum + item;
-  });
-  *!*result.push(totalSum);*/!*  
-
-  return result;
-}
-
-alert(getSums([1,2,3,4,5])); // *!*1,3,6,10,15*/!*
-alert(getSums([-2,-1,0,1])); // *!*-2,-3,-3,-2*/!*
-```
-
diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md
deleted file mode 100644
index a5dffc9e..00000000
--- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Массив частичных сумм
-
-[importance 2]
-
-На входе массив чисел, например: `arr = [1,2,3,4,5]`.
-
-Напишите функцию `getSums(arr)`, которая возвращает массив его частичных сумм.
-
-Иначе говоря, вызов `getSums(arr)` должен возвращать новый массив из такого же числа элементов, в котором на каждой позиции должна быть сумма элементов `arr` до этой позиции включительно.
-
-То есть:
-
-```js
-//+ no-beautify
-для arr = [ 1, 2, 3, 4, 5 ]
-getSums( arr ) = [ 1, 1+2, 1+2+3, 1+2+3+4, 1+2+3+4+5 ] = [ 1, 3, 6, 10, 15 ]
-```
-
-Еще пример: `getSums([-2,-1,0,1]) = [-2,-3,-3,-2]`. 
-
-<ul>
-<li>Функция не должна модифицировать входной массив.</li>
-<li>В решении используйте метод `arr.reduce`.</li>
-</ul>
diff --git a/1-js/4-data-structures/9-array-iteration/article.md b/1-js/4-data-structures/9-array-iteration/article.md
deleted file mode 100644
index 52de853d..00000000
--- a/1-js/4-data-structures/9-array-iteration/article.md
+++ /dev/null
@@ -1,235 +0,0 @@
-# Массив: перебирающие методы
-
-Современный стандарт JavaScript предоставляет много методов для "умного" перебора массивов, которые есть в современных браузерах...
-
-...Ну а для их поддержки в IE8- просто подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim).
-[cut]
-## forEach
-
-Метод ["arr.forEach(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) используется для перебора массива.
-
-Он для каждого элемента массива вызывает функцию `callback`. 
-
-Этой функции он передаёт три параметра `callback(item, i, arr)`:
-
-<ul>
-<li>`item` -- очередной элемент массива.</li>
-<li>`i` -- его номер.</li>
-<li>`arr` -- массив, который перебирается.</li>
-</ul>
-
-Например:
-
-```js
-//+ run
-var arr = ["Яблоко", "Апельсин", "Груша"];
-
-arr.forEach(function(item, i, arr) {
-  alert( i + ": " + item + " (массив:" + arr + ")" );
-});
-```
-
-Второй, необязательный аргумент `forEach` позволяет указать контекст `this` для `callback`. Мы обсудим его в деталях чуть позже, сейчас он нам не важен.
-
-Метод `forEach` ничего не возвращает, его используют только для перебора, как более "элегантный" вариант, чем обычный цикл `for`.
-
-## filter
-
-Метод ["arr.filter(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter) используется для *фильтрации* массива через функцию.
-
-Он создаёт новый массив, в который войдут только те элементы `arr`, для которых вызов `callback(item, i, arr)` возвратит `true`.
-
-Например:
-
-```js
-//+ run
-var arr = [1, -1, 2, -2, 3];
-
-*!*
-var positiveArr = arr.filter(function(number) {
-  return number > 0;
-});
-*/!*
-
-alert( positiveArr ); // 1,2,3
-```
-
-## map
-
-Метод ["arr.map(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map) используется для *трансформации* массива.
-
-Он создаёт новый массив, который будет состоять из результатов вызова `callback(item, i, arr)` для каждого элемента `arr`.
-
-Например:
-
-```js
-//+ run
-var names = ['HTML', 'CSS', 'JavaScript'];
-
-*!*
-var nameLengths = names.map(function(name) {
-  return name.length;
-});
-*/!*
-
-// получили массив с длинами
-alert( nameLengths ); // 4,3,10
-```
-
-## every/some
-
-Эти методы используется для проверки массива.
-
-<ul>
-<li>Метод ["arr.every(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every) возвращает `true`, если вызов `callback` вернёт `true` для *каждого* элемента `arr`.</li>
-<li>Метод ["arr.some(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some) возвращает `true`, если вызов `callback` вернёт `true` для *какого-нибудь* элемента `arr`.</li>
-</ul>
-
-```js
-//+ run
-var arr = [1, -1, 2, -2, 3];
-
-function isPositive(number) {
-  return number > 0;
-}
-
-*!*
-alert( arr.every(isPositive) ); // false, не все положительные
-alert( arr.some(isPositive) ); // true, есть хоть одно положительное
-*/!*
-```
-
-## reduce/reduceRight
-
-Метод ["arr.reduce(callback[, initialValue])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce) используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.
-
-Это один из самых сложных методов для работы с массивами. Но его стоит освоить, потому что временами с его помощью можно в несколько строк решить задачу, которая иначе потребовала бы в разы больше места и времени.
-
-Метод `reduce` используется для вычисления на основе массива какого-либо единого значения, иначе говорят "для свёртки массива". Чуть далее мы разберём пример для вычисления суммы.
-
-Он применяет функцию `callback` по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат.
-
-Аргументы функции `callback(previousValue, currentItem, index, arr)`:
-
-<ul>
-<li>`previousValue` -- последний результат вызова функции, он же "промежуточный результат".</li>
-<li>`currentItem` -- текущий элемент массива, элементы перебираются по очереди слева-направо. </li>
-<li>`index` -- номер текущего элемента.</li>
-<li>`arr` -- обрабатываемый массив.</li>
-</ul>
-
-Кроме `callback`, методу можно передать "начальное значение" -- аргумент `initialValue`. Если он есть, то на первом вызове значение `previousValue` будет равно `initialValue`, а если у `reduce` нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.
-
-Проще всего понять работу метода `reduce` на примере. 
-
-Например, в качестве "свёртки" мы хотим получить сумму всех элементов массива. 
-
-Вот решение в одну строку:
-
-```js
-//+ run
-var arr = [1, 2, 3, 4, 5]
-
-// для каждого элемента массива запустить функцию, 
-// промежуточный результат передавать первым аргументом далее
-var result = arr.reduce(function(sum, current) {
-  return sum + current;
-}, 0);
-
-alert( result ); // 15
-```
-
-Разберём, что в нём происходит.
-
-При первом запуске `sum` -- исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент `reduce`).
-
-Сначала анонимная функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее.
-
-Поток вычислений получается такой
-
-<img src="reduce.png">
-
-В виде таблицы  где каждая строка -- вызов функции на очередном элементе массива:
-
-<table>
- <thead>
-  <tr>
-   <th></th>
-   <th>`sum`</th>
-   <th>`current`</th>
-   <th>результат</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>первый вызов</th>
-   <td>`0`</td>
-   <td>`1`</td>
-   <td>`1`</td>
-  </tr>
-  <tr>
-   <th>второй вызов</th>
-   <td>`1`</td>
-   <td>`2`</td>
-   <td>`3`</td>
-  </tr>
-  <tr>
-   <th>третий вызов</th>
-   <td>`3`</td>
-   <td>`3`</td>
-   <td>`6`</td>
-  </tr>
-  <tr>
-   <th>четвёртый вызов</th>
-   <td>`6`</td>
-   <td>`4`</td>
-   <td>`10`</td>
-  </tr>
-  <tr>
-   <th>пятый вызов</th>
-   <td>`10`</td>
-   <td>`5`</td>
-   <td>`15`</td>
-  </tr>
- </tbody>
-</table>
-
-Как видно, результат предыдущего вызова передаётся в первый аргумент следующего.
-
-Кстати, полный набор аргументов функции для `reduce` включает в себя `function(sum, current, i, array)`, то есть номер текущего вызова `i` и весь массив `arr`, но здесь в них нет нужды.
-
-Посмотрим, что будет, если не указать `initialValue` в вызове `arr.reduce`:
-
-```js
-//+ run
-var arr = [1, 2, 3, 4, 5]
-
-// убрали 0 в конце
-var result = arr.reduce(function(sum, current) {
-  return sum + current
-});
-
-alert( result ); // 15
-```
-
-Результат -- точно такой же! Это потому, что при отсутствии `initialValue` в качестве первого значения берётся первый элемент массива, а перебор стартует со второго. 
-
-Таблица вычислений будет такая же, за вычетом первой строки.
-
-**Метод [arr.reduceRight](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduceRight) работает аналогично, но идёт по массиву справа-налево:**
-
-
-
-## Итого
-
-Мы рассмотрели методы:
-<ul>
-<li>`forEach` -- для *перебора* массива.</li>
-<li>`filter` -- для *фильтрации* массива.</li>
-<li>`every/some` -- для *проверки* массива.</li>
-<li>`map` -- для *трансформации* массива в массив.</li>
-<li>`reduce/reduceRight` -- для *прохода по массиву с вычислением значения*.</li>
-</ul>
-
-Во многих ситуациях их использование позволяет написать код короче и понятнее, чем обычный перебор через `for`.
- 
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-array-iteration/reduce.png b/1-js/4-data-structures/9-array-iteration/reduce.png
deleted file mode 100644
index ddc8d140..00000000
Binary files a/1-js/4-data-structures/9-array-iteration/reduce.png and /dev/null differ
diff --git a/1-js/4-data-structures/9-array-iteration/reduce@2x.png b/1-js/4-data-structures/9-array-iteration/reduce@2x.png
deleted file mode 100644
index d74a0295..00000000
Binary files a/1-js/4-data-structures/9-array-iteration/reduce@2x.png and /dev/null differ
diff --git a/1-js/4-data-structures/index.md b/1-js/4-data-structures/index.md
deleted file mode 100644
index 774dee46..00000000
--- a/1-js/4-data-structures/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Структуры данных
-
-Изучаем JavaScript: расширенное знакомство со встроенными типами данных, их особенностями.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md b/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md
deleted file mode 100644
index 4c3693d0..00000000
--- a/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Ответ: `1`.
-
-```js
-//+ run  untrusted refresh
-if ("a" in window) {
-  var a = 1;
-}
-alert( a );
-```
-
-Посмотрим, почему.
-
-На стадии подготовки к выполнению, из `var a` создается `window.a`:
-
-```js
-// window = {a:undefined}
-
-if ("a" in window) { // в if видно что window.a уже есть
-  var a = 1; // поэтому эта строка сработает
-}
-alert( a );
-```
-
-В результате `a` становится `1`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md b/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md
deleted file mode 100644
index d477b705..00000000
--- a/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Window и переменная
-
-[importance 5]
-
-Каков будет результат кода?
-
-```js
-if ("a" in window) {
-  var a = 1;
-}
-alert( a );
-```
-
diff --git a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md
deleted file mode 100644
index d21c6d8d..00000000
--- a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Ответ: **ошибка**.
-
-Переменной `a` нет, так что условие `"a" in window` не выполнится. В результате на последней строчке - обращение к неопределенной переменной.
-
-```js
-//+ run untrusted refresh
-if ("a" in window) {
-  a = 1;
-}
-alert( a ); // <-- error!
-```
-
diff --git a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md
deleted file mode 100644
index 70eb2813..00000000
--- a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Window и переменная 2
-
-[importance 5]
-
-Каков будет результат (перед `a` нет `var`)?
-
-```js
-if ("a" in window) {
-  a = 1;
-}
-alert( a );
-```
-
diff --git a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md
deleted file mode 100644
index 69bbd29b..00000000
--- a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Ответ: `1`.
-
-Переменная `a` создается до начала выполнения кода, так что условие `"a" in window` выполнится и сработает `a = 1`.
-
-```js
-//+ run  untrusted refresh
-if ("a" in window) {
-  a = 1;
-}
-var a;
-
-alert( a ); // 1
-```
-
diff --git a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md
deleted file mode 100644
index 42eabb2e..00000000
--- a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Window и переменная 3
-
-[importance 5]
-
-Каков будет результат (перед `a` нет `var`, а ниже есть)?
-
-```js
-if ("a" in window) {
-  a = 1;
-}
-var a;
-
-alert( a );
-```
-
diff --git a/1-js/5-functions-closures/1-global-object/article.md b/1-js/5-functions-closures/1-global-object/article.md
deleted file mode 100644
index b31d40dc..00000000
--- a/1-js/5-functions-closures/1-global-object/article.md
+++ /dev/null
@@ -1,233 +0,0 @@
-# Глобальный объект
-
-Механизм работы функций и переменных в JavaScript очень отличается от большинства языков.
-
-Чтобы его понять, мы в этой главе рассмотрим переменные и функции в глобальной области. А в следующей -- пойдём дальше.
-
-[cut]
-
-## Глобальный объект
-
-*Глобальными* называют переменные и функции, которые не находятся внутри какой-то функции. То есть, иными словами, если переменная или функция не находятся внутри конструкции `function`, то они -- "глобальные".
-
-**В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется *"глобальный объект"* (`global object`).**
-
-В браузере этот объект явно доступен под именем `window`. Объект `window` одновременно является глобальным объектом и содержит ряд свойств и методов для работы с окном браузера, но нас здесь интересует только его роль как глобального объекта.
-
-В других окружениях, например Node.JS, глобальный объект может быть недоступен в явном виде, но суть происходящего от этого не изменяется, поэтому далее для обозначения глобального объекта мы будем использовать `"window"`.
-
-**Присваивая или читая глобальную переменную, мы, фактически, работаем со свойствами `window`.** 
-
-Например:
-
-```js
-//+ run untrusted refresh
-var a = 5; // объявление var создаёт свойство window.a
-alert( window.a ); // 5
-```
-
-Создать переменную можно и явным присваиванием в `window`:
-
-```js
-//+ run untrusted refresh
-window.a = 5;
-alert( a ); // 5
-```
-
-## Порядок инициализации
-
-Выполнение скрипта происходит в две фазы:
-<ol>
-<li>На первой фазе происходит инициализация, подготовка к запуску.
-
-Во время инициализации скрипт сканируется на предмет объявления функций вида [Function Declaration](/function-declaration-expression), а затем -- на предмет объявления переменных `var`. Каждое такое объявление добавляется в `window`. 
-
-**Функции, объявленные как Function Declaration, создаются сразу работающими, а переменные -- равными `undefined`.**
-</li>
-<li>На второй фазе -- собственно, выполнение.
-
-Присваивание (`=`) значений переменных происходит, когда поток выполнения доходит до соответствующей строчки кода, до этого они `undefined`.
-</li>
-</ol>
-
-В коде ниже указано содержание глобального объекта на момент инициализации и далее последовательно по коду:
-
-```js
-// На момент инициализации, до выполнения кода:
-// window = { f: function, a: undefined, g: undefined }
-
-var a = 5; 
-// window = { f: function, *!*a: 5*/!*, g: undefined }
-
-function f(arg) { /*...*/ }  
-// window = { f: function, a: 5, g: undefined } без изменений, f обработана ранее
-
-var g = function(arg) { /*...*/ }; 
-// window = { f: function, a: 5, g: *!*function*/!* } 
-```
-
-Кстати, тот факт, что к началу выполнения кода переменные и функции *уже* содержатся в `window`, можно легко проверить, выведя их:
-
-```js
-//+ run untrusted refresh
- 
-alert("a" in window); // *!*true*/!*,  т.к. есть свойство window.a 
-alert(a); // равно *!*undefined*/!*,  присваивание будет выполнено далее
-alert(f); // *!*function ...*/!*,  готовая к выполнению функция
-alert(g); // *!*undefined*/!*, т.к. это переменная, а не Function Declaration
-
-var a = 5;  
-function f() { /*...*/ } 
-var g = function() { /*...*/ };
-```
-
-[smart header="Присвоение переменной без объявления"]
-В старом стандарте JavaScript переменную можно было создать и без объявления `var`:
-
-```js
-//+ run
-a = 5;
-
-alert( a ); // 5
-```
-
-Такое присвоение, как и `var a = 5`, создает свойство `window.a = 5`. Отличие от `var a = 5` -- в том, что переменная будет создана не на этапе входа в область видимости, а в момент присвоения.
-
-Сравните два кода ниже. 
-
-Первый выведет `undefined`, так как переменная была добавлена в `window` на фазе инициализации:
-
-```js
-//+ run untrusted refresh
-*!*
-alert( a ); // undefined
-*/!*
-
-var a = 5;
-```
-
-Второй код выведет ошибку, так как переменной ещё не существует:
-
-```js
-//+ run untrusted refresh
-*!*
-alert( a ); // error, a is not defined
-*/!*
-
-a = 5;
-```
-Это, конечно, для общего понимания, мы всегда объявляем переменные через `var`.
-[/smart]
-
-[smart header="Конструкции `for, if...` не влияют на видимость переменных"]
-Фигурные скобки, которые используются в `for, while, if`, в отличие от объявлений функции, имеют "декоративный" характер.
-
-В JavaScript нет разницы между объявлением вне блока:
-
-```js
-*!*var*/!* i;
-{
-  i = 5;
-}
-```
-
-...И внутри него:
-
-```js
-i = 5;
-{
-  *!*var*/!* i;
-}
-```
-
-**Также нет разницы между объявлением в цикле и вне его:**
-
-```js
-//+ run untrusted refresh
-for (*!*var*/!* i = 0; i < 5; i++) { }
-```
-
-Идентичный по функциональности код:
-
-```js
-//+ run untrusted refresh
-*!*var i;*/!*
-for (i = 0; i < 5; i++) { }
-```
-
-В обоих случаях переменная будет создана до выполнения цикла, на стадии инициализации, и ее значение будет сохранено после окончания цикла.
-
-[/smart]
-
-[smart header="Не важно, где и сколько раз объявлена переменная"]
-
-Объявлений `var` может быть сколько угодно:
-
-```js
-var i = 10;
-
-for (var i = 0; i < 20; i++) {
-  ...
-}
-
-var i = 5;
-```
-
-**Все `var` будут обработаны один раз, на фазе инициализации.**
-
-На фазе исполнения объявления `var` будут проигнорированы: они уже были обработаны. Зато будут выполнены присваивания.
-[/smart]
-
-
-[warn header="Ошибки при работе с `window` в IE8-"]
-
-В старых IE есть две забавные ошибки при работе с переменными в `window`:
-
-<ol>
-<li>Переопределение переменной, у которой такое же имя, как и `id` элемента, приведет к ошибке:
-
-```html
-<!--+ run -->
-<div id="a">...</div>
-<script>
-  a = 5; // ошибка в IE8-! Правильно будет "var a = 5"
-  alert( a ); // никогда не сработает
-</script>
-```
-
-А если сделать через `var`, то всё будет хорошо. 
-
-Это была реклама того, что надо везде ставить `var`.
-
-</li>
-<li>Ошибка при рекурсии через функцию-свойство `window`. Следующий код "умрет" в IE8-:
-
-```html
-<!--+ run height=0 -->
-<script>
-  // рекурсия через функцию, явно записанную в window
-  window.recurse = function(times) {
-    if (times !== 0) recurse(times - 1);
-  }
-
-  recurse(13);
-</script>
-```
-
-Проблема здесь возникает из-за того, что функция напрямую присвоена в `window.recurse = ...`. Ее не будет при обычном объявлении функции.
-
-**Этот пример выдаст ошибку только в настоящем IE8!** Не IE9 в режиме эмуляции. Вообще, режим эмуляции позволяет отлавливать где-то 95% несовместимостей и проблем, а для оставшихся 5% вам нужен будет настоящий IE8 в виртуальной машине.
-</li>
-</ol>
-[/warn]
-
-
-## Итого
-
-В результате инициализации, к началу выполнения кода:
-<ol>
-<li>Функции, объявленные как `Function Declaration`, создаются полностью и готовы к использованию.</li>
-<li>Переменные объявлены, но равны `undefined`. Присваивания выполнятся позже, когда выполнение дойдет до них.</li>
-</ol>
-
-
diff --git a/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md b/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md
deleted file mode 100644
index ab6567e4..00000000
--- a/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Ошибки не будет, выведет `"Вася, undefined"`.
-
-```js
-//+ run
-*!*
-say('Вася'); // Что выведет? Не будет ли ошибки?
-*/!*
-
-var phrase = 'Привет';
-
-function say(name) {
-  alert( name + ", " + phrase );
-}
-```
-
-Переменная как таковая существует, вот только на момент запуска функции она равна `undefined`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md b/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md
deleted file mode 100644
index fe548c0c..00000000
--- a/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Что выведет say в начале кода?
-
-[importance 5]
-
-Что будет, если вызов `sayHi('Вася');` стоит в самом-самом начале, в первой строке кода?
-
-```js
-*!*
-say('Вася'); // Что выведет? Не будет ли ошибки?
-*/!*
-
-var phrase = 'Привет';
-
-function say(name) {
-  alert( name + ", " + phrase );
-}
-```
-
diff --git a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md
deleted file mode 100644
index eed571f3..00000000
--- a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-**Результатом будет `true`**, т.к. `var` обработается и переменная будет создана до выполнения кода.
-
-Соответственно, присвоение `value=true` сработает на локальной переменной, и `alert` выведет `true`.
-
-**Внешняя переменная не изменится.**
-
-P.S. Если `var` нет, то в функции переменная не будет найдена. Интерпретатор обратится за ней в `window` и изменит её там. 
-
-**Так что без `var` результат будет также `true`, но внешняя переменная изменится.**
diff --git a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md
deleted file mode 100644
index b9f72a30..00000000
--- a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# В какую переменную будет присвоено значение?
-
-[importance 5]
-
-Каков будет результат выполнения этого кода?
-
-```js
-var value = 0;
-
-function f() {
-  if (1) {
-    value = true;
-  } else {
-    var value = false;
-  }
-
-  alert( value );
-}
-
-f();
-```
-
-Изменится ли внешняя переменная `value` ?
-
-P.S. Какими будут ответы, если из строки `var value = false` убрать `var`?
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/3-var-window/solution.md b/1-js/5-functions-closures/2-closures/3-var-window/solution.md
deleted file mode 100644
index e1609417..00000000
--- a/1-js/5-functions-closures/2-closures/3-var-window/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Результатом будет `undefined`, затем `5`.
-
-```js
-//+ run
-function test() {
-
-  alert( window );
-
-  var window = 5;
-
-  alert( window );
-}
-
-test();
-```
-
-Такой результат получился потому, что `window` -- это глобальная переменная, но ничто не мешает объявить такую же локальную.
-
-Директива `var window` обработается до начала выполнения кода функции и будет создана локальная переменная, т.е. свойство `LexicalEnvironment.window`:
-
-```js
-LexicalEnvironment = {
-  window: undefined
-}
-```
-
-Когда выполнение кода начнется и сработает `alert`, он выведет уже локальную переменную, которая на тот момент равна `undefined`.
-
-Затем сработает присваивание, и второй `alert` выведет уже `5`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/3-var-window/task.md b/1-js/5-functions-closures/2-closures/3-var-window/task.md
deleted file mode 100644
index 8c0e1c7d..00000000
--- a/1-js/5-functions-closures/2-closures/3-var-window/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# var window
-
-[importance 5]
-
-Каков будет результат выполнения этого кода? Почему?
-
-```js
-function test() {
-
-  alert( window );
-
-  var window = 5;
-
-  alert( window );
-}
-
-test();
-```
-
diff --git a/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md b/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md
deleted file mode 100644
index 4f08292e..00000000
--- a/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md
+++ /dev/null
@@ -1,37 +0,0 @@
-Результат - **ошибка**. Попробуйте:
-
-```js
-//+ run no-beautify
-var a = 5
-
-(function() {
-  alert(a)
-})()
-```
-
-Дело в том, что после `var a = 5` нет точки с запятой. 
-
-JavaScript воспринимает этот код как если бы перевода строки не было:
-
-```js
-//+ run no-beautify
-var a = 5(function() {
-  alert(a)
-})()
-```
-
-То есть, он пытается вызвать *функцию* `5`, что и приводит к ошибке.
-
-Если точку с запятой поставить, все будет хорошо:
-
-```js
-//+ run no-beautify
-var a = 5;
-
-(function() {
-  alert(a)
-})()
-```
-
-Это один из наиболее частых и опасных подводных камней, приводящих к ошибкам тех, кто *не* ставит точки с запятой.
-
diff --git a/1-js/5-functions-closures/2-closures/4-call-inplace/task.md b/1-js/5-functions-closures/2-closures/4-call-inplace/task.md
deleted file mode 100644
index aa4c1b4a..00000000
--- a/1-js/5-functions-closures/2-closures/4-call-inplace/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Вызов "на месте"
-
-[importance 4]
-
-Каков будет результат выполнения кода? Почему?
-
-```js
-//+ no-beautify
-var a = 5
-
-(function() {
-  alert(a)
-})()
-```
-
-P.S. *Подумайте хорошо! Здесь все ошибаются!*
-P.P.S. *Внимание, здесь подводный камень! Ок, вы предупреждены.*
diff --git a/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md b/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md
deleted file mode 100644
index 4e0a619e..00000000
--- a/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md
+++ /dev/null
@@ -1,3 +0,0 @@
-Нет, нельзя.
-
-Локальная переменная полностью перекрывает внешнюю. 
diff --git a/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md b/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md
deleted file mode 100644
index 13e61904..00000000
--- a/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Перекрытие переменной
-
-[importance 4]
-
-Если во внутренней функции есть своя переменная с именем `currentCount` -- можно ли в ней получить `currentCount` из внешней функции?
-
-```js
-function makeCounter() {
-  var currentCount = 1;
-
-  return function() {
-    var currentCount;
-    // можно ли здесь вывести currentCount из внешней функции (равный 1)?
-  };
-}
-```
-
diff --git a/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md b/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md
deleted file mode 100644
index b9b3771c..00000000
--- a/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-Выведут **1,2,3,4.**
-
-Здесь внутренняя функция будет искать -- и находить `currentCount` каждый раз в самом внешнем объекте переменных: глобальном объекте `window`.
-
-В результате все счётчики будут разделять единое, глобальное текущее значение.
-
-```js
-//+ run
-var currentCount = 1;
-
-function makeCounter() {
-  return function() {
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter();
-var counter2 = makeCounter();
-
-*!*
-alert( counter() ); // ?
-alert( counter() ); // ?
-*/!*
-
-*!*
-alert( counter2() ); // ?
-alert( counter2() ); // ?
-*/!*
-```
-
diff --git a/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md b/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md
deleted file mode 100644
index 48068df9..00000000
--- a/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Глобальный счётчик
-
-[importance 5]
-
-Что выведут эти вызовы, если переменная `currentCount` находится вне `makeCounter`?
-
-```js
-var currentCount = 1;
-
-function makeCounter() {
-  return function() {
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter();
-var counter2 = makeCounter();
-
-*!*
-alert( counter() ); // ?
-alert( counter() ); // ?
-*/!*
-
-*!*
-alert( counter2() ); // ?
-alert( counter2() ); // ?
-*/!*
-```
-
diff --git a/1-js/5-functions-closures/2-closures/6@2x.png b/1-js/5-functions-closures/2-closures/6@2x.png
deleted file mode 100755
index 7a276a33..00000000
Binary files a/1-js/5-functions-closures/2-closures/6@2x.png and /dev/null differ
diff --git a/1-js/5-functions-closures/2-closures/article.md b/1-js/5-functions-closures/2-closures/article.md
deleted file mode 100644
index d4301d75..00000000
--- a/1-js/5-functions-closures/2-closures/article.md
+++ /dev/null
@@ -1,411 +0,0 @@
-# Замыкания, функции изнутри
-
-В этой главе мы продолжим рассматривать, как работают переменные, и, как следствие, познакомимся с замыканиями. От глобального объекта мы переходим к работе внутри функций.
-[cut]
-## Лексическое окружение
-
-Все переменные внутри функции -- это свойства специального внутреннего объекта `LexicalEnvironment`, который создаётся при её запуске.
-
-Мы будем называть этот объект "лексическое окружение" или просто "объект переменных".
-
-При запуске функция создает объект `LexicalEnvironment`, записывает туда аргументы, функции и переменные. Процесс инициализации выполняется в том же порядке, что и для глобального объекта, который, вообще говоря, является частным случаем лексического окружения.
-
-В отличие от `window`, объект `LexicalEnvironment` является внутренним, он скрыт от прямого доступа.
-
-### Пример
-
-Посмотрим пример, чтобы лучше понимать, как это работает:
-
-```js
-function sayHi(name) {
-  var phrase = "Привет, " + name;
-  alert( phrase );
-}
-
-sayHi('Вася');
-```
-
-При вызове функции:
-<ol>
-<li>До выполнения первой строчки её кода, на стадии инициализации, интерпретатор создает пустой объект `LexicalEnvironment` и заполняет его.
-
-В данном случае туда попадает аргумент `name` и единственная переменная `phrase`:
-
-```js
-function sayHi(name) {
-*!*
-  // LexicalEnvironment = { name: 'Вася', phrase: undefined }
-*/!*
-  var phrase = "Привет, " + name;
-  alert( phrase );
-}
-
-sayHi('Вася');
-```
-
-</li>
-<li>Функция выполняется. 
-
-Во время выполнения происходит присвоение локальной переменной `phrase`, то есть, другими словами, присвоение свойству `LexicalEnvironment.phrase` нового значения:
-
-```js
-function sayHi(name) {
-  // LexicalEnvironment = { name: 'Вася', phrase: undefined }
-  var phrase = "Привет, " + name;
-
-*!*
-  // LexicalEnvironment = { name: 'Вася', phrase: 'Привет, Вася'}
-*/!*
-  alert( phrase );
-}
-
-sayHi('Вася');
-```
-
-</li>
-<li>В конце выполнения функции объект с переменными обычно выбрасывается и память очищается. В примерах выше так и происходит. Через некоторое время мы рассмотрим более сложные ситуации, при которых объект с переменными сохраняется и после завершения функции.</li>
-</ol>
-
-[smart header="Тонкости спецификации"]
-Если почитать спецификацию ECMA-262, то мы увидим, что речь идёт о двух объектах: `VariableEnvironment` и `LexicalEnvironment`. 
-
-Но там же замечено, что в реализациях эти два объекта могут быть объединены. Так что мы избегаем лишних деталей и используем везде термин `LexicalEnvironment`, это достаточно точно позволяет описать происходящее.
-
-Более формальное описание находится в спецификации ECMA-262, секции 10.2-10.5 и 13.
-[/smart]
-
-
-## Доступ ко внешним переменным   
-
-Из функции мы можем обратиться не только к локальной переменной, но и к внешней:
-
-```js
-var userName = "Вася";
-
-function sayHi() {
-  alert( userName ); // "Вася"
-}
-```
-
-**Интерпретатор, при доступе к переменной, сначала пытается найти переменную в текущем `LexicalEnvironment`, а затем, если её нет -- ищет во внешнем объекте переменных. В данном случае им является `window`.**
-
-Такой порядок поиска возможен благодаря тому, что ссылка на внешний объект переменных хранится в специальном внутреннем свойстве функции, которое называется `[[Scope]]`. Это свойство закрыто от прямого доступа, но знание о нём очень важно для понимания того, как работает JavaScript.
-
-**При создании функция получает скрытое свойство `[[Scope]]`, которое ссылается на лексическое окружение, в котором она была создана.**
-
-В примере выше таким окружением является `window`, так что создаётся свойство:
-```js
-//+ no-beautify
-sayHi.[[Scope]] = window
-```
-
-Это свойство никогда не меняется. Оно всюду следует за функцией, привязывая её, таким образом, к месту своего рождения.
-
-При запуске функции её объект переменных `LexicalEnvironment` получает ссылку на "внешнее лексическое окружение" со значением из `[[Scope]]`. 
-
-Если переменная не найдена в функции -- она будет искаться снаружи.
-
-Именно благодаря этой механике в примере выше `alert(userName)` выводит внешнюю переменную. На уровне кода это выглядит как поиск во внешней области видимости, вне функции.
-
-Если обобщить:
-<ul>
-<li>Каждая функция при создании получает ссылку `[[Scope]]` на объект с переменными, в контексте которого была создана.</li>
-<li>При запуске функции создаётся новый объект с переменными `LexicalEnvironment`. Он получает ссылку на внешний объект переменных из `[[Scope]]`.</li>
-<li>При поиске переменных он осуществляется сначала в текущем объекте переменных, а потом -- по этой ссылке.</li>
-</ul>
-
-Выглядит настолько просто, что непонятно -- зачем вообще говорить об этом `[[Scope]]`, об объектах переменных. Сказали бы: "Функция читает переменные снаружи" -- и всё. Но знание этих деталей позволит нам легко объяснить и понять более сложные ситуации, с которыми мы столкнёмся далее.
-
-## Всегда текущее значение
-
-Значение переменной из внешней области берётся всегда текущее. Оно может быть уже не то, что было на момент создания функции.
-
-Например, в коде ниже функция `sayHi` берёт `phrase` из внешней области:
-
-```js
-//+ run no-beautify
- 
-var phrase = 'Привет';
-
-function say(name) {
-  alert(phrase + ', ' + name);
-}
-
-*!*
-say('Вася');  // Привет, Вася (*)
-*/!*
-
-phrase = 'Пока';
-
-*!*
-say('Вася'); // Пока, Вася (**)
-*/!*
-```
-
-На момент первого запуска `(*)`, переменная `phrase` имела значение `'Привет'`, а ко второму `(**)` изменила его на `'Пока'`.
-
-Это естественно, ведь для доступа к внешней переменной функция по ссылке `[[Scope]]` обращается во внешний объект переменных и берёт то значение, которое там есть на момент обращения.
-
-## Вложенные функции
-
-Внутри функции можно объявлять не только локальные переменные, но и другие функции. 
-
-К примеру, вложенная функция может помочь лучше организовать код:
-
-```js
-//+ run
-function sayHiBye(firstName, lastName) {
-
-  alert( "Привет, " + getFullName() );
-  alert( "Пока, " + getFullName() );
-
-*!*
-  function getFullName() {
-      return firstName + " " + lastName;
-    }
-*/!*
-
-}
-
-sayHiBye("Вася", "Пупкин"); // Привет, Вася Пупкин ; Пока, Вася Пупкин
-```
-
-Здесь, для удобства, создана вспомогательная функция `getFullName()`.
-
-Вложенные функции получают `[[Scope]]` так же, как и глобальные. В нашем случае:
-
-```js
-//+ no-beautify
-getFullName.[[Scope]] = объект переменных текущего запуска sayHiBye
-```
-
-Благодаря этому `getFullName()` получает снаружи `firstName` и `lastName`.
-
-Заметим, что если переменная не найдена во внешнем объекте переменных, то она ищется в ещё более внешнем (через `[[Scope]]` внешней функции), то есть, такой пример тоже будет работать:
-
-```js
-//+ run
-var phrase = 'Привет';
-
-function say() {
-
-  function go() {
-    alert( phrase ); // найдёт переменную снаружи
-  }
-
-  go();
-}
-```
-
-## Возврат функции
-
-Рассмотрим более "продвинутый" вариант, при котором внутри одной функции создаётся другая и возвращается в качестве результата.
-
-В разработке интерфейсов это совершенно стандартный приём, функция затем может назначаться как обработчик действий посетителя.
-
-Здесь мы будем создавать функцию-счётчик, которая считает свои вызовы и возвращает их текущее число.
-
-В примере ниже `makeCounter` создает такую функцию:
-
-```js
-//+ run
-function makeCounter() {
-*!*
-  var currentCount = 1;
-*/!*
-
-  return function() { // (**)
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter(); // (*)
-
-// каждый вызов увеличивает счётчик и возвращает результат
-alert( counter() ); // 1 
-alert( counter() ); // 2
-alert( counter() ); // 3
-
-// создать другой счётчик, он будет независим от первого
-var counter2 = makeCounter();
-alert( counter2() ); // 1
-```
-
-Как видно, мы получили два независимых счётчика `counter` и `counter2`, каждый из которых незаметным снаружи образом сохраняет текущее количество вызовов.
-
-Где? Конечно, во внешней переменной `currentCount`, которая у каждого счётчика своя.
-
-Если подробнее описать происходящее:
-
-<ol>
-<li>В строке `(*)` запускается `makeCounter()`. При этом создаётся `LexicalEnvironment` для переменных текущего вызова. В функции есть одна переменная `var currentCount`, которая станет свойством этого объекта. Она изначально инициализуется в `undefined`, затем, в процессе  выполнения, получит значение `1`:
-
-```js
-function makeCounter() {
-*!*
-  // LexicalEnvironment = { currentCount: undefined } 
-*/!*
-
-  var currentCount = 1;
-
-*!*
-  // LexicalEnvironment = { currentCount: 1 } 
-*/!*
-
-  return function() { // [[Scope]] -> LexicalEnvironment (**)
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter(); // (*)
-```
-
-</li>
-<li>В процессе выполнения `makeCounter()` создаёт функцию в строке `(**)`. При создании эта функция получает внутреннее свойство `[[Scope]]` со ссылкой на текущий `LexicalEnvironment`.</li>
-<li>Далее вызов `makeCounter()` завершается и функция `(**)` возвращается и сохраняется во внешней переменной `counter` `(*)`.</li>
-</ol>
-
-На этом создание "счётчика" завершено. 
-
-Итоговым значением, записанным в переменную `counter`, является функция:
-
-```js
-function() { // [[Scope]] -> {currentCount: 1} 
-  return currentCount++;
-};
-```
-
-Возвращённая из `makeCounter()` функция `counter` помнит (через `[[Scope]]`) о том, в каком окружении была создана.
-
-Это и используется для хранения текущего значения счётчика.
-
-Далее, когда-нибудь, функция `counter` будет вызвана. Мы не знаем, когда это произойдёт. Может быть, прямо  сейчас, но, вообще говоря, совсем не факт. 
-
-Эта функция состоит из одной строки: `return currentCount++`, ни переменных ни параметров в ней нет, поэтому её собственный объект переменных, для краткости назовём его `LE` --  будет пуст.
-
-Однако, у неё есть свойство `[[Scope]]`, которое указывает на внешнее окружение. Чтобы увеличить и вернуть `currentCount`, интерпретатор ищет в текущем объекте переменных `LE`, не находит, затем идёт во внешний объект, там находит, изменяет и возвращает новое значение:
-
-```js
-//+ run
-function makeCounter() {
-  var currentCount = 1;
-
-  return function() {
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter(); // [[Scope]] -> {currentCount: 1} 
-
-alert( counter() ); // 1, [[Scope]] -> {currentCount: 1}
-alert( counter() ); // 2, [[Scope]] -> {currentCount: 2}
-alert( counter() ); // 3, [[Scope]] -> {currentCount: 3}
-```
-
-**Переменную во внешней области видимости можно не только читать, но и изменять.**
-
-
-В примере выше было создано несколько счётчиков. Все они взаимно независимы:
-
-```js
-var counter = makeCounter();
-
-var counter2 = makeCounter();
-
-alert( counter() ); // 1
-alert( counter() ); // 2
-alert( counter() ); // 3
-
-alert( counter2() ); // 1, *!*счётчики независимы*/!*
-```
-
-Они независимы, потому что при каждом запуске `makeCounter` создаётся свой объект переменных `LexicalEnvironment`, со своим свойством `currentCount`, на который новый счётчик получит ссылку `[[Scope]]`.
-
-
-## Свойства функции
-
-Функция в JavaScript является объектом, поэтому можно присваивать свойства прямо к ней, вот так:
-
-```js
-//+ run
-function f() {}
-
-f.test = 5;
-alert( f.test );
-```
-
-Свойства функции не стоит путать с переменными и параметрами. Они совершенно никак не связаны. Переменные доступны только внутри функции, они создаются в процессе её выполнения. Это -- использование функции "как функции".
-
-А свойство у функции -- доступно отовсюду и всегда. Это -- использование функции "как объекта".
-
-Если хочется привязать значение к функции, то можно им воспользоваться вместо внешних переменных.
-
-В качестве демонстрации, перепишем пример со счётчиком:
-
-```js
-//+ run
-function makeCounter() {
-*!*
-  function counter() {
-    return counter.currentCount++;
-  };
-  counter.currentCount = 1;
-*/!*
-
-  return counter;
-}
-
-var counter = makeCounter();
-alert( counter() ); // 1
-alert( counter() ); // 2
-```
-
-При запуске пример работает также. 
-
-Принципиальная разница -- во внутренней механике и в том, что свойство функции, в отличие от переменной из замыкания -- общедоступно, к нему имеет доступ любой, у кого есть объект функции.
-
-Например, можно взять и поменять счётчик из внешнего кода:
-
-```js
-var counter = makeCounter();
-alert( counter() ); // 1
-
-*!*
-counter.currentCount = 5;
-*/!*
-
-alert( counter() ); // 5
-```
-
-[smart header="Статические переменные"]
-Иногда свойства, привязанные к функции, называют "статическими переменными".
-
-В некоторых языках программирования можно объявлять переменную, которая сохраняет значение между вызовами функции. В JavaScript ближайший аналог -- такое вот свойство функции.
-[/smart]
-
-
-## Итого: замыкания
-
-[Замыкание](http://en.wikipedia.org/wiki/Closure_(computer_science&#041;) -- это функция вместе со всеми внешними переменными, которые ей доступны. 
-
-Таково стандартное определение, которое есть в Wikipedia и большинстве серьёзных источников по программированию. То есть, замыкание -- это функция + внешние переменные.
-
-Тем не менее, в JavaScript есть небольшая терминологическая особенность. 
-
-**Обычно, говоря "замыкание функции", подразумевают не саму эту функцию, а именно внешние переменные.**
-
-Иногда говорят "переменная берётся из замыкания". Это означает -- из внешнего объекта переменных.
-
-
-[smart header="Что это такое -- \"понимать замыкания?\""]
-Иногда говорят "Вася молодец, понимает замыкания!". Что это такое -- "понимать замыкания", какой смысл обычно вкладывают в эти слова?
-
-"Понимать замыкания" в JavaScript означает понимать следующие вещи:
-<ol>
-<li>Все переменные и параметры функций являются свойствами объекта переменных `LexicalEnvironment`. Каждый запуск функции создает новый такой объект. На верхнем уровне им является "глобальный объект", в браузере -- `window`.</li>
-<li>При создании функция получает системное свойство `[[Scope]]`, которое ссылается на `LexicalEnvironment`, в котором она была создана.</li>
-<li>При вызове функции, куда бы её ни передали в коде -- она будет искать переменные сначала у себя, а затем во внешних `LexicalEnvironment` с места своего "рождения".</li>
-</ol>
-
-В следующих главах мы углубим это понимание дополнительными примерами, а также рассмотрим, что происходит с памятью.
-[/smart]
diff --git a/1-js/5-functions-closures/3-scope-new-function/article.md b/1-js/5-functions-closures/3-scope-new-function/article.md
deleted file mode 100644
index 51cebe40..00000000
--- a/1-js/5-functions-closures/3-scope-new-function/article.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# [[Scope]] для new Function
-
-
-## Присвоение [[Scope]] для new Function [#scope-Function] 
-
-Есть одно исключение из общего правила присвоения `[[Scope]]`, которое мы рассматривали в предыдущей главе. 
-
-При создании функции с использованием  `new Function`, её свойство `[[Scope]]` ссылается не на текущий `LexicalEnvironment`, а на `window`.
-
-## Пример 
-
-Следующий пример демонстрирует как функция, созданная `new Function`, игнорирует внешнюю переменную `a` и выводит глобальную вместо неё:
-
-```js
-//+ run untrusted refresh
-var a = 1;
-
-function getFunc() {
-  var a = 2;
- 
-*!*
-  var func = new Function('', 'alert(a)');  
-*/!*
-
-  return func;
-}
-
-getFunc()(); // *!*1*/!*, из window
-```
-
-Сравним с обычным поведением:
-
-```js
-//+ run untrusted refresh
-var a = 1;
-
-function getFunc() {
-  var a = 2;
- 
-*!*
-  var func = function() { alert(a); };
-*/!*
-
-  return func; 
-}
-
-getFunc()(); // *!*2*/!*, из LexicalEnvironment функции getFunc
-```
-
-
-## Почему так сделано?
-
-[warn header="Продвинутые знания"]
-Содержимое этой секции содержит продвинутую информацию теоретического характера, которая прямо сейчас не обязательна для дальнейшего изучения JavaScript.
-[/warn]
-
-Эта особенность `new Function`, хоть и выглядит странно, на самом деле весьма полезна.
-
-Представьте себе, что нам действительно нужно создать функцию из строки кода. Текст кода этой функции неизвестен на момент написания скрипта (иначе зачем `new Function`), но станет известен позже, например получен с сервера или из других источников данных.
-
-Предположим, что этому коду надо будет взаимодействовать с внешними переменными основного скрипта.
-
-Но проблема в том, что JavaScript при выкладывании на "боевой сервер" предварительно сжимается минификатором -- специальной программой, которая уменьшает размер кода, убирая из него лишние комментарии, пробелы, что очень важно -- переименовывает локальные переменные на более короткие. 
-
-То есть, если внутри функции есть `var userName`, то минификатор заменит её на `var a` (или другую букву, чтобы не было конфликта), предполагая, что так как переменная видна только внутри функции, то этого всё равно никто не заметит, а код станет короче. И обычно проблем нет. 
-
-...Но если бы `new Function` могла обращаться к внешним переменным, то при попытке доступа к `userName` в сжатом коде была бы ошибка, так как минификатор переименовал её. 
-
-**Получается, что даже если бы мы захотели использовать локальные переменные в `new Function`, то после сжатия были бы проблемы, так как минификатор переименовывает локальные переменные.**
-
-Описанная особенность `new Function` просто-таки спасает нас от ошибок. 
-
-Ну а если внутри функции, создаваемой через `new Function`, всё же нужно использовать какие-то данные -- без проблем, нужно всего лишь предусмотреть соответствующие параметры и передавать их явным образом, например так:
-
-```js
-//+ run untrusted refresh no-beautify
-*!*
-var sum = new Function('a, b', ' return a + b; ');
-*/!*
-
-var a = 1, b = 2;
-
-*!*
-alert( sum(a, b) ); // 3
-*/!*
-```
-
-## Итого
-
-<ul>
-<li>Функции, создаваемые через `new Function`, имеют значением `[[Scope]]` не внешний объект переменных, а `window`.</li>
-<li>Следствие -- такие функции не могут использовать замыкание. Но это хорошо, так как бережёт от ошибок проектирования, да и при сжатии JavaScript проблем не будет. Если же внешние переменные реально нужны -- их можно передать в качестве параметров.</li>
-</ul>
diff --git a/1-js/5-functions-closures/4-closures-usage/1-closure-sum/solution.md b/1-js/5-functions-closures/4-closures-usage/1-closure-sum/solution.md
deleted file mode 100644
index 2e28ae36..00000000
--- a/1-js/5-functions-closures/4-closures-usage/1-closure-sum/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Чтобы вторые скобки в вызове работали - первые должны возвращать функцию. 
-
-Эта функция должна знать про `a` и уметь прибавлять `a` к `b`. Вот так:
-
-```js
-//+ run
-function sum(a) {
-
-  return function(b) {
-    return a + b; // возьмет a из внешнего LexicalEnvironment
-  };
-
-}
-
-alert( sum(1)(2) );
-alert( sum(5)(-1) );
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/1-closure-sum/task.md b/1-js/5-functions-closures/4-closures-usage/1-closure-sum/task.md
deleted file mode 100644
index 5de93f5e..00000000
--- a/1-js/5-functions-closures/4-closures-usage/1-closure-sum/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Сумма через замыкание
-
-[importance 4]
-
-Напишите функцию `sum`, которая работает так: `sum(a)(b) = a+b`.
-
-Да, именно так, через двойные скобки (это не опечатка). Например:
-
-```js
-sum(1)(2) = 3
-sum(5)(-1) = 4
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/solution.js b/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/solution.js
deleted file mode 100644
index bda57778..00000000
--- a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/solution.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function makeBuffer() {
-  var text = '';
-
-  return function(piece) {
-    if (arguments.length == 0) { // вызов без аргументов
-      return text;
-    }
-    text += piece;
-  };
-};
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/test.js b/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/test.js
deleted file mode 100644
index df3c04f9..00000000
--- a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/_js.view/test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var buffer;
-beforeEach(function() {
-  buffer = makeBuffer();
-});
-
-it("возвращает пустую строку по умолчанию", function() {
-  assert.strictEqual(buffer(), "");
-});
-
-it("добавляет аргументы в буффер", function() {
-  buffer('Замыкания');
-  buffer(' Использовать');
-  buffer(' Нужно!');
-  assert.equal(buffer(), 'Замыкания Использовать Нужно!');
-});
-
-it("приводит всё к строке", function() {
-  buffer(null);
-  buffer(false);
-  assert.equal(buffer(), "nullfalse");
-});
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/solution.md b/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/solution.md
deleted file mode 100644
index 5f946bfb..00000000
--- a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/solution.md
+++ /dev/null
@@ -1,32 +0,0 @@
-Текущее значение текста удобно хранить в замыкании, в локальной переменной `makeBuffer`:
-
-```js
-//+ run
-function makeBuffer() {
-  var text = '';
-
-  return function(piece) {
-    if (arguments.length == 0) { // вызов без аргументов
-      return text;
-    }
-    text += piece;
-  };
-};
-
-var buffer = makeBuffer();
-
-// добавить значения к буферу
-buffer('Замыкания');
-buffer(' Использовать');
-buffer(' Нужно!');
-alert( buffer() ); // 'Замыкания Использовать Нужно!'
-
-var buffer2 = makeBuffer();
-buffer2(0);
-buffer2(1);
-buffer2(0);
-
-alert( buffer2() ); // '010'
-```
-
-Начальное значение `text = ''` -- пустая строка. Поэтому операция `text += piece` прибавляет `piece` к строке, автоматически преобразуя его к строковому типу, как и требовалось в условии.
diff --git a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/task.md b/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/task.md
deleted file mode 100644
index 9f28b7cd..00000000
--- a/1-js/5-functions-closures/4-closures-usage/2-stringbuffer/task.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Функция - строковый буфер
-
-[importance 5]
-
-В некоторых языках программирования существует объект "строковый буфер", который аккумулирует внутри себя значения. Его функционал состоит из двух возможностей:
-<ol>
-<li>Добавить значение в буфер.</li>
-<li>Получить текущее содержимое.</li>
-</ol>
-
-**Задача -- реализовать строковый буфер на функциях в JavaScript, со следующим синтаксисом:**
-
-<ul>
-<li>Создание объекта: `var buffer = makeBuffer();`.</li>
-<li>Вызов `makeBuffer` должен возвращать такую функцию `buffer`, которая при вызове `buffer(value)` добавляет значение в некоторое внутреннее хранилище, а при вызове без аргументов `buffer()` -- возвращает его.</li>
-</ul>
-
-Вот пример работы:
-
-```js
-function makeBuffer() { /* ваш код */ }
-
-var buffer = makeBuffer();
-
-// добавить значения к буферу
-buffer('Замыкания');
-buffer(' Использовать');
-buffer(' Нужно!');
-
-// получить текущее значение
-alert( buffer() ); // Замыкания Использовать Нужно!
-```
-
-Буфер должен преобразовывать все данные к строковому типу:
-
-```js
-var buffer = makeBuffer();
-buffer(0);
-buffer(1);
-buffer(0);
-
-alert( buffer() ); // '010'
-```
-
-Решение не должно использовать глобальные переменные.
diff --git a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js b/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js
deleted file mode 100644
index b7fbc6f6..00000000
--- a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function makeBuffer() {
-  var text = '';
-
-  function buffer(piece) {
-    if (arguments.length == 0) { // вызов без аргументов
-      return text;
-    }
-    text += piece;
-  };
-
-  buffer.clear = function() {
-    text = "";
-  }
-
-  return buffer;
-};
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/test.js b/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/test.js
deleted file mode 100644
index 0543cc90..00000000
--- a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/_js.view/test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var buffer;
-
-beforeEach(function() {
-  buffer = makeBuffer();
-});
-
-it("возвращает пустую строку по умолчанию", function() {
-  assert.strictEqual(buffer(), "");
-});
-
-it("добавляет аргументы в буффер", function() {
-  buffer('Замыкания');
-  buffer(' Использовать');
-  buffer(' Нужно!');
-  assert.equal(buffer(), 'Замыкания Использовать Нужно!');
-});
-
-it("приводит всё к строке", function() {
-  buffer(null);
-  buffer(false);
-  assert.equal(buffer(), "nullfalse");
-});
-
-it("очищает буфер вызовом clear", function() {
-  buffer("test");
-  buffer.clear();
-  buffer("первый");
-  buffer("второй");
-  assert.equal(buffer(), "первыйвторой");
-});
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/solution.md b/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/solution.md
deleted file mode 100644
index c4c45809..00000000
--- a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-```js
-//+ run
-function makeBuffer() {
-  var text = '';
-
-  function buffer(piece) {
-    if (arguments.length == 0) { // вызов без аргументов
-      return text;
-    }
-    text += piece;
-  };
-
-  buffer.clear = function() {
-    text = "";
-  }
-
-  return buffer;
-};
-
-var buffer = makeBuffer();
-
-buffer("Тест");
-buffer(" тебя не съест ");
-alert( buffer() ); // Тест тебя не съест
-
-*!*
-buffer.clear();
-*/!*
-
-alert( buffer() ); // ""
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/task.md b/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/task.md
deleted file mode 100644
index 319af876..00000000
--- a/1-js/5-functions-closures/4-closures-usage/3-stringbuffer-with-clear/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Строковый буфер с очисткой
-
-[importance 5]
-
-Добавьте буферу из решения задачи [](/task/stringbuffer) метод `buffer.clear()`, который будет очищать текущее содержимое буфера:
-
-```js
-function makeBuffer() {
-  ...ваш код...
-}
-
-var buffer = makeBuffer();
-
-buffer("Тест");
-buffer(" тебя не съест ");
-alert( buffer() ); // Тест тебя не съест
-
-*!*
-buffer.clear();
-*/!*
-
-alert( buffer() ); // ""
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/solution.md b/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/solution.md
deleted file mode 100644
index 43ded8f9..00000000
--- a/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/solution.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-```js
-//+ run
-var users = [{
-  name: "Вася",
-  surname: 'Иванов',
-  age: 20
-}, {
-  name: "Петя",
-  surname: 'Чапаев',
-  age: 25
-}, {
-  name: "Маша",
-  surname: 'Медведева',
-  age: 18
-}];
-
-*!*
-function byField(field) {
-    return function(a, b) {
-      return a[field] > b[field] ? 1 : -1;
-    }
-  }
-*/!*
-
-users.sort(byField('name'));
-users.forEach(function(user) {
-  alert( user.name );
-});
-
-users.sort(byField('age'));
-users.forEach(function(user) {
-  alert( user.name );
-});
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/task.md b/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/task.md
deleted file mode 100644
index 36701c23..00000000
--- a/1-js/5-functions-closures/4-closures-usage/4-sort-by-field/task.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Сортировка
-
-[importance 5]
-
-У нас есть массив объектов:
-
-```js
-var users = [{
-  name: "Вася",
-  surname: 'Иванов',
-  age: 20
-}, {
-  name: "Петя",
-  surname: 'Чапаев',
-  age: 25
-}, {
-  name: "Маша",
-  surname: 'Медведева',
-  age: 18
-}];
-```
-
-Обычно сортировка по нужному полю происходит так:
-
-```js
-// по полю name (Вася, Маша, Петя)
-users.sort(function(a, b) {
-  return a.name > b.name ? 1 : -1;
-});
-
-// по полю age  (Маша, Вася, Петя)
-users.sort(function(a, b) {
-  return a.age > b.age ? 1 : -1;
-});
-```
-
-Мы хотели бы упростить синтаксис до одной строки, вот так:
-
-```js
-users.sort(byField('name'));
-users.forEach(function(user) {
-  alert( user.name );
-}); // Вася, Маша, Петя
-
-users.sort(byField('age'));
-users.forEach(function(user) {
-  alert( user.name );
-}); // Маша, Вася, Петя
-```
-
-То есть, вместо того, чтобы каждый раз писать в `sort` `function...` -- будем использовать `byField(...)`
-
-Напишите функцию `byField(field)`, которую можно использовать в `sort` для сравнения объектов по полю `field`, чтобы пример выше заработал.
diff --git a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/solution.js b/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/solution.js
deleted file mode 100644
index 90cf2689..00000000
--- a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/solution.js
+++ /dev/null
@@ -1,24 +0,0 @@
-function filter(arr, func) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (func(val)) {
-      result.push(val);
-    }
-  }
-
-  return result;
-}
-
-function inArray(arr) {
-  return function(x) {
-    return arr.indexOf(x) != -1;
-  };
-}
-
-function inBetween(a, b) {
-  return function(x) {
-    return x >= a && x <= b;
-  };
-}
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/source.js b/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/source.js
deleted file mode 100644
index e512f26c..00000000
--- a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/source.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function filter(arr, fuc) {
-  // ...ваш код...
-}
-
-function inBetween(a, b) {
-  // ...ваш код...
-}
-
-function inArray(arr) {
-  // ...ваш код...
-}
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/test.js b/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/test.js
deleted file mode 100644
index f03fb743..00000000
--- a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/_js.view/test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-var arr;
-
-before(function() {
-  arr = [1, 2, 3, 4, 5, 6, 7];
-});
-
-describe("inArray", function() {
-  var checkInArr;
-
-  before(function() {
-    checkInArr = inArray(arr);
-  });
-
-  it("возвращает фильтр для значений в массиве", function() {
-    assert.isTrue(checkInArr(5));
-    assert.isFalse(checkInArr(0));
-  });
-});
-
-
-describe("inBetween", function() {
-  var checkBetween36;
-
-  before(function() {
-    checkBetween36 = inBetween(3, 6);
-  });
-
-  it("возвращает фильтрa для значений в промежутке", function() {
-    assert.isTrue(checkBetween36(5));
-    assert.isFalse(checkBetween36(0));
-  });
-});
-
-
-describe("filter", function() {
-
-  it("фильтрует через func", function() {
-    assert.deepEqual(filter(arr, function(a) {
-      return a % 2 == 0;
-    }), [2, 4, 6]);
-  });
-
-  it("не модифицирует исходный массив", function() {
-    filter(arr, function(a) {
-      return a % 2 == 0;
-    });
-    assert.deepEqual(arr, [1, 2, 3, 4, 5, 6, 7]);
-  });
-
-  it("поддерживает фильтр inBetween", function() {
-    assert.deepEqual(filter(arr, inBetween(3, 6)), [3, 4, 5, 6]);
-  });
-
-  it("поддерживает фильтр inArray", function() {
-    assert.deepEqual(filter(arr, inArray([1, 2, 3])), [1, 2, 3]);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/solution.md b/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/solution.md
deleted file mode 100644
index 114fdd5f..00000000
--- a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/solution.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Функция фильтрации
-
-```js
-//+ run
-function filter(arr, func) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (func(val)) {
-      result.push(val);
-    }
-  }
-
-  return result;
-}
-
-var arr = [1, 2, 3, 4, 5, 6, 7];
-
-alert(filter(arr, function(a) {
-  return a % 2 == 0;
-})); // 2, 4, 6
-```
-
-# Фильтр inBetween
-
-```js
-//+ run
-function filter(arr, func) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (func(val)) {
-      result.push(val);
-    }
-  }
-
-  return result;
-}
-
-*!*
-function inBetween(a, b) {
-    return function(x) {
-      return x >= a && x <= b;
-    };
-  }
-*/!*
-
-var arr = [1, 2, 3, 4, 5, 6, 7];
-alert( filter(arr, inBetween(3, 6)) ); // 3,4,5,6
-```
-
-# Фильтр inArray
-
-```js
-//+ run
-function filter(arr, func) {
-  var result = [];
-
-  for (var i = 0; i < arr.length; i++) {
-    var val = arr[i];
-    if (func(val)) {
-      result.push(val);
-    }
-  }
-
-  return result;
-}
-
-*!*
-function inArray(arr) {
-    return function(x) {
-      return arr.indexOf(x) != -1;
-    };
-  }
-*/!*
-
-var arr = [1, 2, 3, 4, 5, 6, 7];
-alert( filter(arr, inArray([1, 2, 10])) ); // 1,2
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/task.md b/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/task.md
deleted file mode 100644
index 7ee691b5..00000000
--- a/1-js/5-functions-closures/4-closures-usage/5-filter-through-function/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Фильтрация через функцию
-
-[importance 5]
-
-<ol>
-<li>Создайте функцию `filter(arr, func)`, которая получает массив `arr` и возвращает новый, в который входят только те элементы `arr`, для которых `func` возвращает `true`.</li>
-<li>Создайте набор "готовых фильтров": `inBetween(a,b)` -- "между a,b", `inArray([...])` -- "в массиве `[...]`". 
-Использование должно быть таким: 
-<ul>
-<li>`filter(arr, inBetween(3,6))` -- выберет только числа от 3 до 6,</li>
-<li>`filter(arr, inArray([1,2,3]))` -- выберет только элементы, совпадающие с одним из значений массива.</li>
-</ul>
-</li>
-</ol>
-Пример, как это должно работать:
-
-```js
-/* .. ваш код для filter, inBetween, inArray */
-var arr = [1, 2, 3, 4, 5, 6, 7];
-
-alert(filter(arr, function(a) {
-  return a % 2 == 0
-})); // 2,4,6
-
-alert( filter(arr, inBetween(3, 6)) ); // 3,4,5,6
-
-alert( filter(arr, inArray([1, 2, 10])) ); // 1,2
-```
-
diff --git a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/solution.js b/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/solution.js
deleted file mode 100644
index 2455c301..00000000
--- a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/solution.js
+++ /dev/null
@@ -1,19 +0,0 @@
-function makeArmy() {
-
-  var shooters = [];
-
-  for (var i = 0; i < 10; i++) {
-
-    var shooter = (function(x) {
-
-      return function() {
-        alert(x);
-      };
-
-    })(i);
-
-    shooters.push(shooter);
-  }
-
-  return shooters;
-}
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/source.js b/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/source.js
deleted file mode 100644
index f9058674..00000000
--- a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/source.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function makeArmy() {
-
-  var shooters = [];
-
-  for (var i = 0; i < 10; i++) {
-    var shooter = function() { // функция-стрелок
-      alert(i); // выводит свой номер
-    };
-    shooters.push(shooter);
-  }
-
-  return shooters;
-}
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/test.js b/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/test.js
deleted file mode 100644
index fdfabf66..00000000
--- a/1-js/5-functions-closures/4-closures-usage/6-make-army/_js.view/test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var army;
-before(function() {
-  army = makeArmy();
-  window.alert = sinon.stub(window, "alert");
-});
-
-it("army[0] выводит 0", function() {
-  army[0]();
-  assert(alert.calledWith(0));
-});
-
-
-it("army[5] функция выводит 5", function() {
-  army[5]();
-  assert(alert.calledWith(5));
-});
-
-after(function() {
-  window.alert.restore();
-});
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/6-make-army/solution.md b/1-js/5-functions-closures/4-closures-usage/6-make-army/solution.md
deleted file mode 100644
index 5628e800..00000000
--- a/1-js/5-functions-closures/4-closures-usage/6-make-army/solution.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# Что происходит в этом коде
-
-Функция `makeArmy` делает следующее:
-<ol>
-<li>Создаёт пустой массив `shooter`:
-
-```js
-var shooters = [];
-```
-
-</li>
-<li>В цикле заполняет массив элементами через `shooter.push`. 
-При этом каждый элемент массива -- это функция, так что в итоге после цикла массив будет таким:
-
-```js
-//+ no-beautify
-shooters = [
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); },
-  function () { alert(i); }
-];
-```
-
-Этот массив возвращается из функции.
-</li>
-<li>Вызов `army[5]()` -- это получение элемента массива (им будет функция), и тут же -- её запуск.</li>
-</ol>
-
-# Почему ошибка
-
-Вначале разберемся, почему все стрелки выводят одно и то же значение.
-
-В функциях-стрелках `shooter` отсутствует переменная `i`. Когда такая функция вызывается, то `i` она берет из внешнего `LexicalEnvironment`.
-
-Чему же будет равно это значение `i`?
-
-К моменту вызова `army[0]()`, функция `makeArmy` уже закончила работу. Цикл  завершился, последнее значение было `i=10`.
-
-В результате все функции `shooter` получают из внешнего лексического кружения это, одно и то же, последнее, значение `i=10`.
-
-Попробуйте исправить проблему самостоятельно.
-
-# Исправление (3 варианта)
-
-Есть несколько способов исправить ситуацию.
-
-<ol>
-<li>**Первый способ исправить код - это привязать значение непосредственно к функции-стрелку:**
-
-```js
-//+ run
-function makeArmy() {
-
-  var shooters = [];
-
-  for (var i = 0; i < 10; i++) {
-
-*!*
-    var shooter = function me() {
-      alert( me.i );
-    };
-    shooter.i = i;
-*/!*
-
-    shooters.push(shooter);
-  }
-
-  return shooters;
-}
-
-var army = makeArmy();
-
-army[0](); // 0
-army[1](); // 1
-```
-
-В этом случае каждая функция хранит в себе свой собственный номер.
-
-Кстати, обратите внимание на использование Named Function Expression, вот в этом участке:
-
-```js
-...
-var shooter = function me() {
-  alert( me.i );
-};
-...
-```
-
-Если убрать имя `me` и оставить обращение через `shooter`, то работать не будет:
-
-```js
-for (var i = 0; i < 10; i++) {
-  var shooter = function() {
-*!*
-    alert( shooter.i ); // вывести свой номер (не работает!)
-    // потому что откуда функция возьмёт переменную shooter?
-    // ..правильно, из внешнего объекта, а там она одна на всех
-*/!*
-  };
-  shooter.i = i;
-  shooters.push(shooter);
-}
-```
-
-Вызов `alert(shooter.i)` при вызове будет искать переменную `shooter`, а эта переменная меняет значение по ходу цикла, и к моменту вызову она равна последней функции, созданной в цикле. 
-
-Если использовать Named Function Expression, то имя жёстко привязывается к конкретной функции, и поэтому в коде выше `me.i` возвращает правильный `i`.
-
-</li>
-<li>**Другое, более продвинутое решение -- использовать дополнительную функцию для того, чтобы "поймать" текущее значение `i`**:
-
-```js
-//+ run
-function makeArmy() {
-
-  var shooters = [];
-
-  for (var i = 0; i < 10; i++) {
-
-*!*
-    var shooter = (function(x) {
-
-      return function() {
-        alert( x );
-      };
-
-    })(i);
-*/!*
-
-    shooters.push(shooter);
-  }
-
-  return shooters;
-}
-
-var army = makeArmy();
-
-army[0](); // 0
-army[1](); // 1
-```
-
-Посмотрим выделенный фрагмент более внимательно, чтобы понять, что происходит:
-
-```js
-var shooter = (function(x) {
-  return function() {
-    alert( x );
-  };
-})(i);
-```
-
-Функция `shooter` создана как результат вызова промежуточного функционального выражения `function(x)`, которое объявляется -- и тут же выполняется, получая `x = i`.
-
-Так как `function(x)` тут же завершается, то значение `x` больше не меняется. Оно и будет использовано в возвращаемой функции-стрелке.
-
-Для красоты можно изменить название переменной `x` на `i`, суть происходящего при этом не изменится:
-
-```js
-var shooter = (function(i) {
-  return function() {
-    alert( i );
-  };
-})(i);
-```
-
-**Кстати, обратите внимание -- скобки вокруг `function(i)` не нужны**, можно и так:
-
-```js
-var shooter = function(i) { // *!*без скобок вокруг function(i)*/!*
-  return function() {
-    alert( i ); 
-  };
-}(i);
-```
-
-Скобки добавлены в код для лучшей читаемости, чтобы человек, который просматривает его, не подумал, что `var shooter = function`, а понял что это вызов "на месте", и присваивается его результат.
-</li>
-<li>**Еще один забавный способ - обернуть весь цикл во временную функцию**:
-
-```js
-//+ run
-function makeArmy() {
-
-  var shooters = [];
-
-*!*
-  for (var i = 0; i < 10; i++)(function(i) {
-
-    var shooter = function() {
-      alert( i );
-    };
-
-    shooters.push(shooter);
-
-  })(i);
-*/!*
-
-  return shooters;
-}
-
-var army = makeArmy();
-
-army[0](); // 0
-army[1](); // 1
-```
-
-Вызов `(function(i) { ... })` обернут в скобки, чтобы интерпретатор понял, что это `Function Expression`.
-
-Плюс этого способа - в большей читаемости. Фактически, мы не меняем создание `shooter`, а просто обертываем итерацию в функцию.
-</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-usage/6-make-army/task.md b/1-js/5-functions-closures/4-closures-usage/6-make-army/task.md
deleted file mode 100644
index 15e0d2ae..00000000
--- a/1-js/5-functions-closures/4-closures-usage/6-make-army/task.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Армия функций
-
-[importance 5]
-
-Следующий код создает массив функций-стрелков `shooters`. По замыслу, каждый стрелок должен выводить свой номер:
-
-```js
-//+ run
-function makeArmy() {
-
-  var shooters = [];
-
-  for (var i = 0; i < 10; i++) {
-    var shooter = function() { // функция-стрелок
-      alert( i ); // выводит свой номер
-    };
-    shooters.push(shooter);
-  }
-
-  return shooters;
-}
-
-var army = makeArmy();
-
-army[0](); // стрелок выводит 10, а должен 0
-army[5](); // стрелок выводит 10...
-// .. все стрелки выводят 10 вместо 0,1,2...9
-```
-
-Почему все стрелки́ выводят одно и то же? Поправьте код, чтобы стрелки работали как задумано. Предложите несколько вариантов исправления.
-
diff --git a/1-js/5-functions-closures/4-closures-usage/article.md b/1-js/5-functions-closures/4-closures-usage/article.md
deleted file mode 100644
index 0fa5da2c..00000000
--- a/1-js/5-functions-closures/4-closures-usage/article.md
+++ /dev/null
@@ -1,125 +0,0 @@
-# Локальные переменные для объекта
-
-Замыкания можно использовать сотнями способов. Иногда люди сами не замечают, что использовали замыкания -- настолько это просто и естественно.
-
-В этой главе мы рассмотрим дополнительные примеры использования замыканий и задачи на эту тему.
-
-[cut]
-
-## Счётчик-объект
-
-Ранее мы сделали счётчик. 
-
-Напомню, как он выглядел:
-
-```js
-//+ run
-function makeCounter() {
-  var currentCount = 1;
-
-  return function() {
-    return currentCount++;
-  };
-}
-
-var counter = makeCounter();
-
-// каждый вызов возвращает результат, увеличивая счётчик
-alert( counter() ); // 1 
-alert( counter() ); // 2
-alert( counter() ); // 3
-```
-
-Счётчик получился вполне рабочий, но вот только возможностей ему не хватает. Хорошо бы, чтобы можно было сбрасывать значение счётчика или начинать отсчёт с другого значения вместо `1` или... Да много чего можно захотеть от простого счётчика и, тем более, в более сложных проектах.
-
-**Чтобы добавить счётчику возможностей -- перейдём с функции на полноценный объект:**
-
-```js
-//+ run
-function makeCounter() {
-  var currentCount = 1;
-
-  return { // возвратим объект вместо функции
-    getNext: function() {
-      return currentCount++;
-    },
-
-    set: function(value) {
-      currentCount = value;
-    },
-
-    reset: function() {
-      currentCount = 1;
-    }
-  };
-}
-
-var counter = makeCounter();
-
-alert( counter.getNext() ); // 1
-alert( counter.getNext() ); // 2
-
-counter.set(5);
-alert( counter.getNext() ); // 5
-```
-
-Теперь функция `makeCounter` возвращает не одну функцию, а объект с несколькими методами:
-
-<ul>
-<li>`getNext()` -- получить следующее значение, то, что раньше делал вызов `counter()`.</li>
-<li>`set(value)` -- поставить значение.</li>
-<li>`reset()` -- обнулить счётчик.</li>
-</ul>
-
-Все они получают ссылку `[[Scope]]` на текущий (внешний) объект переменных. Поэтому вызов любого из этих методов будет получать или модифицировать одно и то же внешнее значение `currentCount`.
-
-## Объект счётчика + функция
-
-Изначально, счётчик делался функцией во многом ради красивого вызова: `counter()`, который увеличивал значение и возвращал результат.
-
-К сожалению, при переходе на объект короткий вызов пропал, вместо него теперь `counter.getNext()`. Но он ведь был таким простым и удобным... 
-
-Поэтому давайте вернём его!
-
-```js
-//+ run
-function makeCounter() {
-  var currentCount = 1;
-
-*!*
-  // возвращаемся к функции
-  function counter() {
-      return currentCount++;
-    }
-*/!*
-
-  // ...и добавляем ей методы!
-  counter.set = function(value) {
-    currentCount = value;
-  };
-
-  counter.reset = function() {
-    currentCount = 0;
-  };
-
-  return counter;
-}
-
-var counter = makeCounter();
-
-*!*
-alert( counter() ); // 1
-alert( counter() ); // 2
-
-counter.set(5);
-alert( counter() ); // 5
-*/!*
-```
-
-Красиво, не правда ли? Получился полноценный объект, который можно вдобавок ещё и вызывать.
-
-Этот трюк часто используется при разработке JavaScript-библиотек. Например, популярная библиотека [jQuery](http://jquery.com) предоставляет глобальную переменную с именем [jQuery](http://api.jquery.com/jQuery/) (доступна также под коротким именем `$`), которая с одной стороны является функцией и может вызываться как `jQuery(...)`, а с другой -- у неё есть различные методы, например `jQuery.type(123)` возвращает тип аргумента.
-
-Далее вы найдёте различные задачи на понимание замыканий. Рекомендуется их сделать самостоятельно.
-
-
diff --git a/1-js/5-functions-closures/5-closures-module/article.md b/1-js/5-functions-closures/5-closures-module/article.md
deleted file mode 100644
index 384a86fb..00000000
--- a/1-js/5-functions-closures/5-closures-module/article.md
+++ /dev/null
@@ -1,322 +0,0 @@
-# Модули через замыкания
-
-Приём программирования "модуль" имеет громадное количество вариаций. Он немного похож на счётчик, который мы рассматривали ранее, использует аналогичный приём, но на уровне выше.
-
-Его цель -- скрыть внутренние детали реализации скрипта. В том числе: временные переменные, константы, вспомогательные мини-функции и т.п. 
-
-## Зачем нужен модуль?
-
-Допустим, мы хотим разработать скрипт, который делает что-то полезное на странице.
-
-Умея работать со страницей, мы могли бы сделать много чего, но так как пока этого не было (скоро научимся), то пусть скрипт просто выводит сообщение:
-
-Файл `hello.js`
-
-```js
-//+ run
-// глобальная переменная нашего скрипта
-var message = "Привет";
-
-// функция для вывода этой переменной
-function showMessage() {
-  alert( message );
-}
-
-// выводим сообщение
-showMessage();
-```
-
-У этого скрипта есть свои внутренние переменные и функции.
-
-В данном случае это `message` и `showMessage`.
-
-Предположим, что мы хотели бы распространять этот скрипт в виде библиотеки. Каждый, кто хочет, чтобы посетителям выдавалось "Привет" -- может просто подключить этот скрипт. Достаточно скачать и подключить, например, как внешний файл `hello.js` -- и готово.
-
-**Если подключить подобный скрипт к странице "как есть", то возможен конфликт с переменными, которые она использует.**
-
-То есть, при подключении к такой странице он её "сломает":
-
-```html
-<script>
-  var message = "Пожалуйста, нажмите на кнопку";
-</script>
-<script src="hello.js"></script>
-
-<button>Кнопка</button>
-<script>
-  // ожидается сообщение из переменной выше...
-  alert( message ); // но на самом деле будет введено "Привет"
-</script>
-```
-
-[edit src="hello-conflict"/]
-
-Автор страницы ожидает, что библиотека `"hello.js"` просто отработает, без побочных эффектов. А она вместе с этим переопределила `message` в `"Привет"`.
-
-Если же убрать скрипт `hello.js`, то страница будет выводить правильное сообщение.
-
-Зная внутреннее устройство `hello.js` нам, конечно, понятно, что проблема возникла потому, что переменная `message` из скрипта `hello.js` перезаписала объявленную на странице.
-
-## Приём проектирования "Модуль"
-
-Чтобы проблемы не было, всего-то нужно, чтобы у скрипта была *своя собственная область видимости*, чтобы его переменные не попали на страницу.
-
-Для этого мы завернём всё его содержимое в функцию, которую тут же запустим.
-
-Файл `hello.js`, оформленный как модуль:
-
-```js
-//+ run
-(function() {
-
-  // глобальная переменная нашего скрипта
-  var message = "Привет";
-
-  // функция для вывода этой переменной
-  function showMessage() {
-    alert( message );
-  }
-
-  // выводим сообщение
-  showMessage();
-
-})();
-```
-
-[edit src="hello-module"/]
-
-Этот скрипт при подключении к той же странице будет работать корректно. 
-
-Будет выводиться "Привет", а затем "Пожалуйста, нажмите на кнопку".
-
-
-### Зачем скобки вокруг функции?
-
-В примере выше объявление модуля выглядит так:
-
-```js
-//+ run
-(function() {
-
-  alert( "объявляем локальные переменные, функции, работаем" );
-  // ...
-
-}());
-```
-
-В начале и в конце стоят скобки, так как иначе была бы ошибка.
-
-Вот, для сравнения, неверный вариант:
-
-```js
-//+ run
-function() {
-  // будет ошибка
-}();
-```
-
-Ошибка при его запуске произойдет потому, что браузер, видя ключевое слово `function` в основном потоке кода, попытается прочитать `Function Declaration`, а здесь имени нет.
-
-Впрочем, даже если имя поставить, то работать тоже не будет:
-
-```js
-//+ run
-function work() {
-  // ...
-}(); // syntax error
-```
-
-**Дело в том, что "на месте" разрешено вызывать *только* `Function Expression`.**
-
-Общее правило таково:
-
-<ul>
-<li>Если браузер видит `function` в основном потоке кода -- он считает, что это `Function Declaration`.</li>
-<li>Если же `function` идёт в составе более сложного выражения, то он считает, что это `Function Expression`.</li>
-</ul>
-
-Для этого и нужны скобки -- показать, что у нас `Function Expression`, который по правилам JavaScript можно вызвать "на месте".
-
-Можно показать это другим способом, например поставив перед функцией оператор:
-
-```js
-//+ run no-beautify
-+function() {
-  alert('Вызов на месте');
-}();
-
-!function() {
-  alert('Так тоже будет работать');
-}();
-```
-
-## Экспорт значения
-
-Приём "модуль" используется почти во всех современных библиотеках.
-
-Ведь что такое библиотека? Это полезные функции, ради которых её подключают, плюс временные переменные и вспомогательные функции, которые библиотека использует внутри себя.
-
-Посмотрим, к примеру, на библиотеку [Lodash](http://lodash.com/), хотя могли бы и [jQuery](http://jquery.com/), там почти то же самое.
-
-Если её подключить, то появится специальная переменная `lodash` (короткое имя `_`),  которую можно использовать как функцию, и кроме того в неё записаны различные полезных свойства, например:
-
-<ul>
-<li>`_.defaults(src, dst1, dst2...)` -- копирует в объект `src` те свойства из объектов `dst1`, `dst2` и других, которых там нет.</li>
-<li>`_.cloneDeep(obj)` -- делает глубокое копирование объекта `obj`, создавая полностью независимый клон.</li>
-<li>`_.size(obj)` -- возвращает количество свойств в объекте, полиморфная функция: можно передать массив или даже 1 значение.</li>
-</ul>
-
-
-Есть и много других функций, подробнее описанных в [документации](https://lodash.com/docs).
-
-Пример использования:
-
-```html
-<!--+ run -->
-<p>Подключим библиотеку</p>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-<p>Функция <code>_.defaults()</code> добавляет отсутствующие свойства.</p>
-<script>
-  var user = {
-    name: 'Вася'
-  };
-
-*!*
-  _.defaults(user, {
-    name: 'Не указано',
-    employer: 'Не указан'
-  });
-*/!*
-
-  alert( user.name ); // Вася
-  alert( user.employer ); // Не указан
-  alert( _.size(user) ); // 2
-</script>
-```
-
-
-Здесь нам не важно, какие, нас интересует именно как описана эта библиотека, как в ней применяется приём "модуль".
-
-Вот примерная выдержка из исходного файла:
-
-```js
-//+ run no-beautify
-;(function() {
-
-*!*
-  // lodash - основная функция для библиотеки
-*/!*
-  function lodash(value) {
-    // ...
-  }
-
-*!*
-  // вспомогательная переменная
-*/!*
-  var version = '2.4.1';  
-  // ... другие вспомогательные переменные и функции
-
-*!*
-  // код функции size, пока что доступен только внутри
-*/!*
-  function size(collection) {
-    return Object.keys(collection).length;
-  }
-
-*!*
-  // присвоим в lodash size и другие функции, которые нужно вынести из модуля
-*/!*
-  lodash.size = size
-  // lodash.defaults = ...
-  // lodash.cloneDeep = ...
-
-*!*
-  // "экспортировать" lodash наружу из модуля
-*/!*
-  window._ = lodash; // в оригинальном коде здесь сложнее, но смысл тот же
-
-}());
-```
-
-Внутри внешней функции:
-<ol>
-<li>Происходит что угодно, объявляются свои локальные переменные, функции.</li>
-<li>В `window` выносится то, что нужно снаружи.</li>
-</ol>
-
-Технически, мы могли бы вынести в `window` не только `lodash`, но и вообще все объекты и функции. На практике, как раз наоборот, всё прячут внутри модуля, глобальную область во избежание конфликтов хранят максимально чистой.
-
-[smart header="Зачем точка с запятой в начале?"]
-В начале кода выше находится точка с запятой `;` -- это не опечатка, а особая "защита от дураков".
-
-Если получится, что несколько JS-файлы объединены в один (и, скорее всего, сжаты минификатором, но это не важно), и программист забыл поставить точку с запятой, то будет ошибка.
-
-Например, первый файл `a.js`:
-```js
-var a = 5
-```
-
-Второй файл `lib.js`:
-```js
-//+ no-beautify
-(function() {
-  // без точки с запятой в начале
-})()
-```
-
-После объединения в один файл:
-
-```js
-//+ run no-beautify
-*!*
-var a = 5
-*/!*
-
-// библиотека
-(function() {
-  // ...
-})();
-```
-
-При запуске будет ошибка, потому что интерпретатор перед скобкой сам не вставит точку с запятой. Он просто поймёт код как `var a = 5(function ...)`, то есть пытается вызвать число `5` как функцию. 
-
-Таковы правила языка, и поэтому рекомендуется явно ставить точку с запятой. В данном случае автор lodash ставит `;` перед функцией, чтобы предупредить эту ошибку.
-[/smart]
-
-
-## Экспорт через return
-
-Можно оформить модуль и чуть по-другому, например передать значение через `return`:
-
-```js
-//+ no-beautify
-var lodash = (function() {
-
-  var version;
-  function assignDefaults() { ... }
-
-  return {
-    defaults: function() {  }
-  }
-
-})();
-```
-
-Здесь, кстати, скобки вокруг внешней `function() { ... }` не обязательны, ведь функция и так объявлена внутри выражения присваивания, а значит -- является Function Expression. 
-
-Тем не менее, лучше их ставить, для улучшения читаемости кода, чтобы было сразу видно, что это не простое присвоение функции.
-
-## Итого
-
-Модуль при помощи замыканий -- это оборачивание пакета функционала в единую внешнюю функцию, которая тут же выполняется.
-
-Все функции модуля будут иметь доступ к другим переменным и внутренним функциям этого же модуля через замыкание.
-
-Например, `defaults` из примера выше имеет доступ к `assignDefaults`.
-
-Но снаружи программист, использующий модуль, может обращаться напрямую только к тем, которые экспортированы. Благодаря этому будут скрыты внутренние аспекты реализации, которые нужны только разработчику модуля.
-
-Можно придумать и много других вариаций такого подхода. В конце концов, "модуль" -- это всего лишь функция-обёртка для скрытия переменных.
-
-
diff --git a/1-js/5-functions-closures/5-closures-module/hello-conflict.view/hello.js b/1-js/5-functions-closures/5-closures-module/hello-conflict.view/hello.js
deleted file mode 100755
index 56fa804b..00000000
--- a/1-js/5-functions-closures/5-closures-module/hello-conflict.view/hello.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// глобальная переменная нашего скрипта
-var message = "Привет";
-
-// функция для вывода этой переменной
-function showMessage() {
-  alert(message);
-}
-
-// выводим сообщение
-showMessage();
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-module/hello-conflict.view/index.html b/1-js/5-functions-closures/5-closures-module/hello-conflict.view/index.html
deleted file mode 100755
index ab1ef1e2..00000000
--- a/1-js/5-functions-closures/5-closures-module/hello-conflict.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script>
-    var message = 'Пожалуйста, нажмите на кнопку';
-  </script>
-  <script src="hello.js"></script>
-</head>
-
-<body>
-
-  <button>Кнопка</button>
-
-  <script>
-    alert(message);
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-module/hello-module.view/hello.js b/1-js/5-functions-closures/5-closures-module/hello-module.view/hello.js
deleted file mode 100755
index be40a230..00000000
--- a/1-js/5-functions-closures/5-closures-module/hello-module.view/hello.js
+++ /dev/null
@@ -1,14 +0,0 @@
-(function() {
-
-  // глобальная переменная нашего скрипта
-  var message = "Привет";
-
-  // функция для вывода этой переменной
-  function showMessage() {
-    alert(message);
-  }
-
-  // выводим сообщение
-  showMessage();
-
-})();
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-module/hello-module.view/index.html b/1-js/5-functions-closures/5-closures-module/hello-module.view/index.html
deleted file mode 100755
index ab1ef1e2..00000000
--- a/1-js/5-functions-closures/5-closures-module/hello-module.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script>
-    var message = 'Пожалуйста, нажмите на кнопку';
-  </script>
-  <script src="hello.js"></script>
-</head>
-
-<body>
-
-  <button>Кнопка</button>
-
-  <script>
-    alert(message);
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/6-memory-management/article.md b/1-js/5-functions-closures/6-memory-management/article.md
deleted file mode 100644
index 0a8c2b36..00000000
--- a/1-js/5-functions-closures/6-memory-management/article.md
+++ /dev/null
@@ -1,326 +0,0 @@
-# Управление памятью в JavaScript
-
-Управление памятью в JavaScript обычно происходит незаметно. Мы создаём примитивы, объекты, функции... Всё это занимает память.
-
-Что происходит с объектом, когда он становится "не нужен"? Возможно ли "переполнение" памяти? Для ответа на эти вопросы -- залезем "под капот" интерпретатора.
-
-[cut]
-## Управление памятью в JavaScript
-
-Главной концепцией управления памятью в JavaScript является принцип  *достижимости* (англ. reachability).
-
-<ol>
-<li>Определённое множество значений считается достижимым изначально, в частности:
-<ul>
-<li>Значения, ссылки на которые содержатся в стеке вызова, то есть -- все локальные переменные и параметры функций, которые в настоящий момент выполняются или находятся в ожидании окончания вложенного вызова.</li>
-<li>Все глобальные переменные.</li>
-</ul>
-
-Эти значения гарантированно хранятся в памяти. Мы будем называть их *корнями*.
-</li> 
-<li>**Любое другое значение сохраняется в памяти лишь до тех пор, пока доступно из корня по ссылке или цепочке ссылок.**</li>
-</ol>
-
-Для очистки памяти от недостижимых значений в браузерах используется автоматический <a href="http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">Сборщик мусора</a> (англ. Garbage collection, GC), встроенный в интерпретатор, который наблюдает за объектами и время от времени удаляет недостижимые.
-
-Самая простая ситуация здесь с примитивами. При присвоении они копируются целиком, ссылок на них не создаётся, так что если в переменной была одна строка, а её заменили на другую, то предыдущую можно смело выбросить.
-
-Именно объекты требуют специального "сборщика мусора", который наблюдает за ссылками, так как на один объект может быть много ссылок из разных переменных и, при перезаписи одной из них, объект может быть всё ещё доступен из другой.
-
-Далее мы посмотрим ряд примеров, которые помогут в этом разобраться.
-
-### Достижимость и наличие ссылок
-
-Есть одно упрощение для работы с памятью: "значение остаётся в памяти, пока на него есть ссылка". 
-
-Но такое упрощение будет верным лишь в одну сторону.
-
-<ul>
-<li>**Верно -- в том плане, что если ссылок на значение нет, то память из-под него очищается.**
-
-Например, была создана ссылка в переменной, и эту переменную тут же перезаписали:
-
-```js
-var user = {
-  name: "Вася"
-};
-user = null;
-```
-
-Теперь объект `{ name: "Вася" }` более недоступен. Память будет освобождена. 
-</li>
-<li>**Неверно -- в другую сторону: наличие ссылки не гарантирует, что значение останется в памяти.**
-
-Такая ситуация возникает с объектами, которые ссылаются друг на друга:
-
-```js
-var vasya = {};
-var petya = {};
-vasya.friend = petya;
-petya.friend = vasya;
-
-vasya = petya = null;
-```
-
-Несмотря на то, что на объекты `vasya`, `petya` ссылаются друг на друга через ссылку `friend`, то есть можно сказать, что на каждый из них есть ссылка, последняя строка делает эти объекты в совокупности недостижимыми. 
-
-Поэтому они будут удалены из памяти. 
-
-Здесь как раз и играет роль "достижимость" -- оба этих объекта становятся недостижимы из корней, в первую очередь, из глобальной области, стека.
-
-[Сборщик мусора](http://ru.wikipedia.org/wiki/%D0%A1%D0%B1%D0%BE%D1%80%D0%BA%D0%B0_%D0%BC%D1%83%D1%81%D0%BE%D1%80%D0%B0) отслеживает такие ситуации и очищает память.
-</li>
-</ul>
-
-## Алгоритм сборки мусора
-
-Сборщик мусора идёт от корня по ссылкам и запоминает все найденные объекты. По окончанию -- он смотрит, какие объекты в нём отсутствуют и удаляет их.
-
-Например, рассмотрим пример объекта "семья":
-
-```js
-function marry(man, woman) {
-  woman.husband = man;
-  man.wife = woman;
-
-  return {
-    father: man,
-    mother: woman
-  }
-}
-
-var family = marry({
-  name: "Василий"
-}, {
-  name: "Мария"
-});
-```
-
-Функция `marry` принимает два объекта, даёт им ссылки друг на друга и возвращает третий, содержащий ссылки на оба.
-
-Получившийся объект `family` можно изобразить так:
-
-<img src="family.png">
-
-Здесь стрелочками показаны ссылки, а вот свойство `name` ссылкой не является, там хранится примитив, поэтому оно внутри самого объекта.
-
-Чтобы запустить сборщик мусора, удалим две ссылки:
-
-```
-delete family.father;
-delete family.mother.husband;
-```
-
-Обратим внимание, удаление только одной из этих ссылок ни к чему бы не привело. Пока до объекта можно добраться из корня `window`, объект остаётся жив.
-
-А если две, то получается, что от бывшего `family.father` ссылки выходят, но в него -- ни одна не идёт:
-
-<img src="family-no-father.png">
-
-**Совершенно неважно, что из объекта выходят какие-то ссылки, они не влияют на достижимость этого объекта.**
-
-Бывший `family.father` стал недостижимым и будет удалён вместе со своми данными, которые также более недоступны из программы.
-
-<img src="family-no-father-2.png">
-
-А теперь -- рассмотрим более сложный случай. Что будет, если удалить главную ссылку `family`?
-
-Исходный объект -- тот же, что и в начале, а затем:
-
-```js
-window.family = null;
-```
-
-Результат:
-
-<img src="family-no-family.png">
-
-Как видим, объекты в конструкции всё ещё связаны между собой. Однако, поиск от корня их не находит, они не достижимы, и значит сборщик мусора удалит их из памяти.
-
-[smart header="Оптимизации"]
-Проблема описанного алгоритма -- в больших задержках. Если объектов много, то на поиск всех достижимых  уйдёт довольно много времени. А ведь выполнение скрипта при этом должно быть остановлено, уже просканированные объекты не должны поменяться до окончания процесса. Получатся небольшие, но неприятные паузы-зависания в работе скрипта. 
-
-Поэтому современные интерпретаторы применяют различные оптимизации.
-
-Самая частая -- это деление объектов на два вида "старые" и "новые". Для каждого типа выделяется своя область памяти. Каждый объект создаётся в "новой" области и, если прожил достаточно долго, мигрирует в старую. "Новая" область обычно небольшая. Она очищается часто. "Старая" -- редко.
-
-На практике получается эффективно, обычно большинство объектов создаются и умирают почти сразу, к примеру, служа локальными переменными функции:
-```js
-function showTime() {
-  alert( new Date() ); // этот объект будет создан и умрёт сразу
-}
-```
-
-Если вы знаете низкоуровневые языки программирования, то более подробно об организации сборки мусора в V8 можно почитать, например, в статье [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
-
-[/smart]
-
-## Замыкания
-
-Объекты переменных, о которых шла речь ранее, в главе про замыкания, также подвержены сборке мусора. Они следуют тем же правилам, что и обычные объекты. 
-
-Объект переменных внешней функции существует в памяти до тех пор, пока существует хоть одна внутренняя функция, ссылающаяся на него через свойство `[[Scope]]`.
-
-Например:
-
-<ul>
-<li>Обычно объект переменных удаляется по завершении работы функции. Даже если в нём есть объявление внутренней функции:
-
-```js
-function f() {
-  var value = 123;
-
-  function g() {} // g видна только изнутри
-}
-
-f();
-```
-
-В коде выше `value` и `g` являются свойствами объекта переменных. Во время выполнения `f()` её объект переменных находится в текущем стеке выполнения, поэтому жив. По окончанию, он станет недостижимым и будет убран из памяти вместе с остальными локальными переменными.
-</li>
-<li>...А вот в этом случае лексическое окружение, включая переменную `value`, будет сохранено:
-
-```js
-function f() {
-  var value = 123;
-
-  function g() {}
-
-*!*
-  return g;
-*/!*
-}
-
-var g = f(); // функция g будет жить и сохранит ссылку на объект переменных
-```
-
-В скрытом свойстве `g.[[Scope]]` находится ссылка на объект переменных, в котором была создана `g`. Поэтому этот объект переменных останется в памяти, а в нём -- и `value`.
-</li>
-<li>
-Если `f()` будет вызываться много раз, а полученные функции будут сохраняться, например, складываться в массив, то будут сохраняться и объекты `LexicalEnvironment` с соответствующими значениями  `value`:
-
-```js
-function f() {
-  var value = Math.random();
-
-  return function() {};
-}
-
-// 3 функции, каждая ссылается на свой объект переменных, 
-// каждый со своим значением value
-var arr = [f(), f(), f()];
-```
-
-</li>
-<li>Объект `LexicalEnvironment` живёт ровно до тех пор, пока на него существуют ссылки. В коде ниже после удаления ссылки на `g` умирает:
-
-```js
-function f() {
-  var value = 123;
-
-  function g() {}
-
-  return g;
-}
-
-var g = f(); // функция g жива
-// а значит в памяти остается соответствующий объект переменных f() 
-
-g = null; // ..а вот теперь память будет очищена
-```
-
-</li>
-</ul>
-
-### Оптимизация в V8 и её последствия 
-
-Современные JS-движки делают оптимизации замыканий по памяти. Они анализируют использование переменных и в случае, когда переменная из замыкания абсолютно точно не используется, удаляют её.
-
-В коде выше переменная `value` никак не используется. Поэтому она будет удалена из памяти.
-
-**Важный побочный эффект в V8 (Chrome, Opera) состоит в том, что удалённая переменная станет недоступна и при отладке!**
-
-Попробуйте запустить пример ниже с открытой консолью Chrome. Когда он остановится, в консоли наберите `alert(value)`.
-
-```js
-//+ run
-function f() {
-  var value = Math.random();
-
-  function g() {
-    debugger; // выполните в консоли alert( value ); Нет такой переменной!
-  }
-
-  return g;
-}
-
-var g = f();
-g();
-```
-
-Как вы могли увидеть -- нет такой переменной! Недоступна она изнутри `g`. Интерпретатор решил, что она нам не понадобится и удалил.
-
-Это может привести к забавным казусам при отладке, вплоть до того что вместо этой переменной будет другая, внешняя:
-
-```js
-//+ run
-var value = "Сюрприз";
-
-function f() {
-  var value = "самое близкое значение";
-
-  function g() {
-    debugger; // выполните в консоли alert( value ); Сюрприз!
-  }
-
-  return g;
-}
-
-var g = f();
-g();
-```
-
-[warn header="Ещё увидимся"]
-Об этой особенности важно знать. Если вы отлаживаете под Chrome/Opera, то наверняка рано или поздно с ней встретитесь!
-
-Это не глюк отладчика, а особенность работы V8, которая, возможно, будет когда-нибудь изменена. Вы всегда сможете проверить, не изменилось ли чего, запустив примеры на этой странице.
-[/warn]
-
-## Влияние управления памятью на скорость 
-
-На создание новых объектов и их удаление тратится время. Это важно иметь в виду в случае, когда важна производительность.
-
-В качестве примера рассмотрим рекурсию. При вложенных вызовах каждый раз создаётся новый объект с переменными и помещается в стек. Потом память из-под него нужно очистить. Поэтому рекурсивный код будет всегда медленнее использующего цикл, но насколько?
-
-Пример ниже тестирует сложение чисел до данного через рекурсию по сравнению с обычным циклом:
-
-```js
-//+ run
-function sumTo(n) { // обычный цикл 1+2+...+n
-  var result = 0;
-  for (var i = 1; i <= n; i++) {
-    result += i;
-  }
-  return result;
-}
-
-function sumToRec(n) { // рекурсия sumToRec(n) = n+SumToRec(n-1)
-  return n == 1 ? 1 : n + sumToRec(n - 1);
-}
-
-var timeLoop = performance.now();
-for (var i = 1; i < 1000; i++) sumTo(1000); // цикл
-timeLoop = performance.now() - timeLoop;
-
-var timeRecursion = performance.now();
-for (var i = 1; i < 1000; i++) sumToRec(1000); // рекурсия
-timeRecursion = performance.now() - timeRecursion;
-
-alert( "Разница в " + (timeRecursion / timeLoop) + " раз" );
-```
-
-Различие в скорости на таком примере может составлять, в зависимости от интерпретатора, 2-10 раз. 
-
-Вообще, этот пример -- не показателен. Ещё раз обращаю ваше внимание на то, что такие искусственные "микротесты" часто врут. Правильно их делать -- отдельная наука, которая выходит за рамки этой главы. Но и на практике ускорение в 2-10 раз оптимизацией по количеству объектов (и вообще, любых значений) -- отнюдь не миф, а вполне достижимо.
-
-В реальной жизни в большинстве ситуаций такая оптимизация несущественна, просто потому что "JavaScript и так достаточно быстр". Но она может быть эффективной для "узких мест" кода. 
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-family.png b/1-js/5-functions-closures/6-memory-management/family-no-family.png
deleted file mode 100644
index d2aeecb5..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-family.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-family@2x.png b/1-js/5-functions-closures/6-memory-management/family-no-family@2x.png
deleted file mode 100644
index 004d951d..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-family@2x.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father-2.png b/1-js/5-functions-closures/6-memory-management/family-no-father-2.png
deleted file mode 100644
index 6abcd447..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-father-2.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father-2@2x.png b/1-js/5-functions-closures/6-memory-management/family-no-father-2@2x.png
deleted file mode 100644
index de0506de..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-father-2@2x.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father.png b/1-js/5-functions-closures/6-memory-management/family-no-father.png
deleted file mode 100644
index 59391ec6..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-father.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father@2x.png b/1-js/5-functions-closures/6-memory-management/family-no-father@2x.png
deleted file mode 100644
index 2d10279e..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family-no-father@2x.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family.png b/1-js/5-functions-closures/6-memory-management/family.png
deleted file mode 100644
index eeb5c210..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family.png and /dev/null differ
diff --git a/1-js/5-functions-closures/6-memory-management/family@2x.png b/1-js/5-functions-closures/6-memory-management/family@2x.png
deleted file mode 100644
index 97d73db4..00000000
Binary files a/1-js/5-functions-closures/6-memory-management/family@2x.png and /dev/null differ
diff --git a/1-js/5-functions-closures/7-with/1-with-function/solution.md b/1-js/5-functions-closures/7-with/1-with-function/solution.md
deleted file mode 100644
index d4a5284b..00000000
--- a/1-js/5-functions-closures/7-with/1-with-function/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Вторая (`2`), т.к. при обращении к любой переменной внутри `with` -- она ищется прежде всего в объекте.
-
-Соответственно, будет выведено `2`:
-
-```js
-//+ run
-function f() {
-  alert(1)
-}
-
-var obj = {
-  f: function() {
-    alert(2)
-  }
-};
-
-with(obj) {
-  f();
-}
-```
-
diff --git a/1-js/5-functions-closures/7-with/1-with-function/task.md b/1-js/5-functions-closures/7-with/1-with-function/task.md
deleted file mode 100644
index bdf540ec..00000000
--- a/1-js/5-functions-closures/7-with/1-with-function/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# With + функция
-
-[importance 5]
-
-Какая из функций будет вызвана?
-
-```js
-function f() {
-  alert(1)
-}
-
-var obj = {
-  f: function() {
-    alert(2)
-  }
-};
-
-with(obj) {
-  f();
-}
-```
-
diff --git a/1-js/5-functions-closures/7-with/2-with-variables/solution.md b/1-js/5-functions-closures/7-with/2-with-variables/solution.md
deleted file mode 100644
index 531c8a81..00000000
--- a/1-js/5-functions-closures/7-with/2-with-variables/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-Выведет `3`.
-
-**Конструкция `with` не создаёт области видимости,** её создают только функции. Поэтому объявление `var b` внутри конструкции работает также, как если бы оно было вне её.
-
-Код в задаче эквивалентен такому:
-
-```js
-//+ run
-var a = 1;
-*!*
-var b;
-*/!*
-
-var obj = {
-  b: 2
-}
-
-with(obj) {
-  alert( a + b );
-}
-```
-
diff --git a/1-js/5-functions-closures/7-with/2-with-variables/task.md b/1-js/5-functions-closures/7-with/2-with-variables/task.md
deleted file mode 100644
index 13705a1d..00000000
--- a/1-js/5-functions-closures/7-with/2-with-variables/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# With + переменные
-
-[importance 5]
-
-Что выведет этот код?
-
-```js
-var a = 1;
-
-var obj = {
-  b: 2
-};
-
-with(obj) {
-  var b;
-  alert( a + b );
-}
-```
-
diff --git a/1-js/5-functions-closures/7-with/article.md b/1-js/5-functions-closures/7-with/article.md
deleted file mode 100644
index 9c6434ff..00000000
--- a/1-js/5-functions-closures/7-with/article.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Устаревшая конструкция "with" 
-
-Конструкция `with` позволяет использовать в качестве области видимости для переменных произвольный объект. 
-
-В современном JavaScript от этой конструкции отказались. С `use strict` она не работает, но её ещё можно найти в старом коде, так что стоит познакомиться с ней, чтобы если что -- понимать, о чём речь.
-
-[cut]
-Синтаксис:
-
-```js
-with(obj) {
-  ...код...
-}
-```
-
-Любое обращение к переменной внутри `with` сначала ищет её среди свойств `obj`, а только потом -- вне `with`.
-
-## Пример   
-
-В примере ниже переменная будет взята не из глобальной области, а из `obj`:
-
-```js
-//+ run
-var a = 5;
-
-var obj = {
-  a: 10
-};
-
-*!*
-with(obj) {
-    alert( a ); // 10, из obj
-  }
-*/!*
-```
-
-Попробуем получить переменную, которой в `obj` нет:
-
-```js
-//+ run
-var b = 1;
-
-var obj = {
-  a: 10
-};
-
-*!*
-with(obj) {
-    alert( b ); // 1, из window
-  }
-*/!*
-```
-
-Здесь интерпретатор сначала проверяет наличие `obj.b`, не находит и идет вне `with`.
-
-Особенно забавно выглядит применение вложенных `with`:
-
-```js
-//+ run
-var obj = {
-  weight: 10,
-  size: {
-    width: 5,
-    height: 7
-  }
-};
-
-with(obj) {
-  with(size) { // size будет взят из obj
-*!*
-    alert( width * height / weight ); // width,height из size, weight из obj
-*/!*
-  }
-}
-```
-
-Свойства из разных объектов используются как обычные переменные... Магия! Порядок поиска переменных в выделенном коде: `size => obj => window`.
-
-
-## Изменения переменной
-
-При использовании `with`, как и во вложенных функциях -- переменная изменяется в той области, где была найдена.
-
-Например:
-
-```js
-//+ run
-var obj = {
-  a: 10
-}
-
-*!*
-with(obj) {
-    a = 20;
-  }
-*/!*
-alert( obj.a ); // 20, переменная была изменена в объекте
-```
-
-## Почему отказались от with?   
-
-Есть несколько причин.
-
-<ol>
-<li>В современном стандарте `JavaScript` отказались от `with`, потому что конструкция `with` подвержена ошибкам и непрозрачна.
-
-Проблемы возникают в том случае, когда в `with(obj)` присваивается переменная, которая по замыслу должна быть в свойствах `obj`, но ее там нет.
-
-Например:
-
-```js
-//+ run
-var obj = {
-  weight: 10
-};
-
-with(obj) {
-  weight = 20; // (1)
-  size = 35; // (2)
-}
-
-alert( obj.size );
-alert( window.size );
-```
-
-В строке `(2)` присваивается свойство, отсутствующее в `obj`. В результате интерпретатор, не найдя его, создает новую глобальную переменную `window.size`.
-
-Такие ошибки редки, но очень сложны в отладке, особенно если `size` изменилась не в `window`, а где-нибудь во внешнем `LexicalEnvironment`.
-</li>
-<li>Еще одна причина -- алгоритмы сжатия JavaScript не любят `with`. Перед выкладкой на сервер JavaScript сжимают. Для этого есть много инструментов, например [Closure Compiler](http://code.google.com/intl/ru-RU/closure/compiler/) и [UglifyJS](https://github.com/mishoo/UglifyJS). Обычно они переименовывают локальные переменные в более короткие имена, но не свойства объектов. С конструкцией `with` до запуска кода непонятно -- откуда будет взята переменная. Поэтому выходит, что, на всякий случай (если это свойство), лучше её не переименовывать. Таким образом, качество сжатия кода страдает.</li>
-<li>Ну и, наконец, производительность -- усложнение поиска переменной из-за `with` влечет дополнительные накладные расходы. 
-
-Современные движки применяют много внутренних оптимизаций, ряд которых не могут быть применены к коду, в котором есть `with`.
-
-Вот, к примеру, запустите этот код в современном браузере. Производительность функции `fast` существенно отличается `slow` с пустым(!) `with`. И дело тут именно в `with`, т.к. наличие этой конструкции препятствует оптимизации.
-
-```js
-//+ run
-var i = 0;
-
-function fast() {
-  i++;
-}
-
-function slow() {
-  with(i) {}
-  i++;
-}
-
-
-var time = performance.now();
-while (i < 1000000) fast();
-alert( "Без with: " + (performance.now() - time) );
-
-var time = performance.now();
-i = 0;
-while (i < 1000000) slow();
-alert( "С with: " + (performance.now() - time) );
-```
-
-</li>
-</ol>
-
-### Замена with
-
-Вместо `with` рекомендуется использовать временную переменную, например:
-
-```js
-/* вместо
-with(elem.style) {
-  top = '10px';
-  left = '20px';
-}
-*/
-
-var s = elem.style;
-
-s.top = '10px';
-s.left = '0';
-```
-
-Это не так элегантно, но убирает лишний уровень вложенности и абсолютно точно понятно, что будет происходить и куда присвоятся свойства.
-
-## Итого
-
-<ul>
-<li>Конструкция `with(obj) { ... }` использует `obj` как дополнительную область видимости. Все переменные, к которым идет обращение внутри блока, сначала ищутся в `obj`.</li>
-<li>Конструкция `with` устарела и не рекомендуется по ряду причин. Избегайте её.</li>
-</ul>
-
diff --git a/1-js/5-functions-closures/index.md b/1-js/5-functions-closures/index.md
deleted file mode 100644
index faff5532..00000000
--- a/1-js/5-functions-closures/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Замыкания, область видимости
-
-Понимание "области видимости" и "замыканий" -- ключевое в изучении JavaScript, без них "каши не сваришь". 
-
-В этом разделе мы более глубоко изучаем переменные и функции -- и замыкания в том числе.
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md b/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md
deleted file mode 100644
index dad88eea..00000000
--- a/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Вызов `arr[2]()` -- это обращение к методу объекта `obj[method]()`, в роли `obj` выступает `arr`, а в роли метода: `2`. 
-
-Поэтому, как это бывает при вызове функции как метода, функция `arr[2]` получит `this = arr` и выведет массив:
-
-```js
-//+ run
-var arr = ["a", "b"];
-
-arr.push(function() {
-  alert( this );
-})
-
-arr[2](); // "a","b",function
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md b/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md
deleted file mode 100644
index 6ab74bfc..00000000
--- a/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Вызов в контексте массива
-
-[importance 5]
-
-Каким будет результат? Почему?
-
-```js
-var arr = ["a", "b"];
-
-arr.push(function() {
-  alert( this );
-})
-
-arr[2](); // ?
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md b/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md
deleted file mode 100644
index b030823d..00000000
--- a/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-**Ошибка**! 
-
-Попробуйте:
-
-```js
-//+ run
-var obj = {
-  go: function() {
-    alert(this)
-  }
-}
-
-(obj.go)() // error!
-```
-
-Причем сообщение об ошибке в большинстве браузеров не даёт понять, что на самом деле не так.
-
-**Ошибка возникла из-за того, что после объявления `obj` пропущена точка с запятой.**
-
-JavaScript игнорирует перевод строки перед скобкой `(obj.go)()`  и читает этот код как:
-
-```js
-//+ no-beautify
-var obj = { go:... }(obj.go)()
-```
-
-Интерпретатор попытается вычислить это выражение, которое обозначает вызов объекта `{ go: ... }` как функции с аргументом `(obj.go)`. При этом, естественно, возникнет ошибка.
diff --git a/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md b/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md
deleted file mode 100644
index 44a93141..00000000
--- a/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Проверка синтаксиса
-
-[importance 2]
-
-Каков будет результат этого кода?
-
-```js
-//+ no-beautify
-var obj = {
-  go: function() { alert(this) }
-}
-
-(obj.go)()
-```
-
-P.S. Есть подвох :)
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/3-why-this/solution.md b/1-js/6-objects-more/1-object-methods/3-why-this/solution.md
deleted file mode 100644
index 693d3944..00000000
--- a/1-js/6-objects-more/1-object-methods/3-why-this/solution.md
+++ /dev/null
@@ -1,32 +0,0 @@
-<ol>
-<li>Обычный вызов функции в контексте объекта.</li>
-<li>То же самое, скобки ни на что не влияют.</li>
-<li>Здесь не просто вызов `obj.method()`, а более сложный вызов вида `(выражение).method()`. Такой вызов работает, как если бы он был разбит на две строки:
-
-```js
-//+ no-beautify
-f = obj.go; // сначала вычислить выражение
-f();             // потом вызвать то, что получилось
-```
-
-При этом `f()` выполняется как обычная функция, без передачи `this`. 
-</li>
-<li>Здесь также слева от точки находится выражение, вызов аналогичен двум строкам.</li>
-</ol>
-
-В спецификации это объясняется при помощи специального внутреннего типа [Reference Type](http://es5.github.com/x8.html#x8.7).
-
-Если подробнее -- то `obj.go()` состоит из двух операций:
-<ol>
-<li>Сначала получить свойство `obj.go`.</li>
-<li>Потом вызвать его как функцию.</li>
-</ol>
-
-Но откуда на шаге 2 получить `this`? Как раз для этого операция получения свойства `obj.go` возвращает значение особого типа `Reference Type`, который в дополнение к свойству `go` содержит информацию об `obj`. Далее, на втором шаге, вызов его при помощи скобок `()` правильно устанавливает `this`.
-
-**Любые другие операции, кроме вызова, превращают `Reference Type` в обычный тип, в данном случае -- функцию `go` (так уж этот тип устроен).** 
-
-Поэтому получается, что `(method = obj.go)` присваивает в переменную `method` функцию `go`, уже без всякой информации об объекте `obj`.
-
-Аналогичная ситуация и в случае `(4)`: оператор ИЛИ `||` делает из `Reference Type` обычную функцию.
-
diff --git a/1-js/6-objects-more/1-object-methods/3-why-this/task.md b/1-js/6-objects-more/1-object-methods/3-why-this/task.md
deleted file mode 100644
index 486c3eb7..00000000
--- a/1-js/6-objects-more/1-object-methods/3-why-this/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Почему this присваивается именно так?
-
-[importance 3]
-
-Вызовы `(1)` и `(2)` в примере ниже работают не так, как `(3)` и `(4)`:
-
-```js
-//+ run no-beautify
-"use strict"
-
-var obj, f;
-
-obj = {
-  go: function() { alert(this); }
-};
-
-obj.go();            // (1) object
-
-(obj.go)();          // (2) object
-
-(method = obj.go)();      // (3) undefined
-
-(obj.go || obj.stop)(); // (4) undefined
-```
-
-В чём дело? Объясните логику работы `this`.
diff --git a/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md b/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md
deleted file mode 100644
index 82f562d9..00000000
--- a/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-**Ответ: пустая строка.**
-
-```js
-//+ run
-var name = "";
-
-var user = {
-  name: "Василий",
-
-*!*
-  export: this // (*)
-*/!*
-};
-
-alert( user.export.name );
-```
-
-Объявление объекта само по себе не влияет на `this`. Никаких функций, которые могли бы повлиять на контекст, здесь нет.
-
-Так как код находится вообще вне любых функций, то `this` в нём равен `window` (при `use strict` было бы `undefined`).
-
-Получается, что в строке `(*)` мы имеем `export: window`, так что далее `alert(user.export.name)` выводит свойство `window.name`, то есть глобальную переменную `name`, которая равна пустой строке.
diff --git a/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md b/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md
deleted file mode 100644
index 6b2ec0ac..00000000
--- a/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Значение this в объявлении объекта
-
-[importance 5]
-
-Что выведет `alert` в этом коде? Почему?
-
-```js
-var name = "";
-
-var user = {
-  name: "Василий",
-
-  export: this
-};
-
-alert( user.export.name );
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/5-return-this/solution.md b/1-js/6-objects-more/1-object-methods/5-return-this/solution.md
deleted file mode 100644
index b34977b4..00000000
--- a/1-js/6-objects-more/1-object-methods/5-return-this/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-**Ответ: `Василий`.**
-
-Вызов `user.export()` использует `this`, который равен объекту до точки, то есть внутри `user.export()` строка `return this` возвращает объект `user`. 
-
-В итоге выводится свойство `name` объекта `user`, равное `"Василий"`.
diff --git a/1-js/6-objects-more/1-object-methods/5-return-this/task.md b/1-js/6-objects-more/1-object-methods/5-return-this/task.md
deleted file mode 100644
index 03ebd8cb..00000000
--- a/1-js/6-objects-more/1-object-methods/5-return-this/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Возврат this
-
-[importance 5]
-
-Что выведет `alert` в этом коде? Почему?
-
-```js
-var name = "";
-
-var user = {
-  name: "Василий",
-
-  export: function() {
-    return this;
-  }
-
-};
-
-alert( user.export().name );
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md b/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md
deleted file mode 100644
index 2df08422..00000000
--- a/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-**Ответ: `Василий`.**
-
-Во время выполнения `user.export()` значение `this = user`. 
-
-При создании объекта `{ value: this }`, в свойство `value` копируется ссылка на текущий контекст, то есть на `user`.
-
-Получается что `user.export().value == user`.
-
-
-```js
-//+ run
-var name = "";
-
-var user = {
-  name: "Василий",
-
-  export: function() {
-    return {
-      value: this
-    };
-  }
-
-};
-
-alert( user.export().value == user ); // true
-```
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md b/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md
deleted file mode 100644
index b78e6553..00000000
--- a/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Возврат объекта с this
-
-[importance 5]
-
-Что выведет `alert` в этом коде? Почему?
-
-```js
-var name = "";
-
-var user = {
-  name: "Василий",
-
-  export: function() {
-    return {
-      value: this
-    };
-  }
-
-};
-
-alert( user.export().value.name );
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js
deleted file mode 100644
index 5f276b9c..00000000
--- a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js
+++ /dev/null
@@ -1,14 +0,0 @@
-var calculator = {
-  sum: function() {
-    return this.a + this.b;
-  },
-
-  mul: function() {
-    return this.a * this.b;
-  },
-
-  read: function() {
-    this.a = +prompt('a?', 0);
-    this.b = +prompt('b?', 0);
-  }
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js
deleted file mode 100644
index cd2c9b05..00000000
--- a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-sinon.stub(window, "prompt");
-
-prompt.onCall(0).returns("2");
-prompt.onCall(1).returns("3");
-
-describe("calculator", function() {
-  before(function() {
-    calculator.read();
-  });
-
-  it("при вводе 2 и 3 сумма равна 5", function() {
-    assert.equal(calculator.sum(), 5);
-  });
-
-  it("при вводе 2 и 3 произведение равно 6", function() {
-    assert.equal(calculator.mul(), 6);
-  });
-});
-
-after(function() {
-  prompt.restore();
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/solution.md b/1-js/6-objects-more/1-object-methods/7-calculator/solution.md
deleted file mode 100644
index 1849cc94..00000000
--- a/1-js/6-objects-more/1-object-methods/7-calculator/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-```js
-//+ run demo
-var calculator = {
-  sum: function() {
-    return this.a + this.b;
-  },
-
-  mul: function() {
-    return this.a * this.b;
-  },
-
-  read: function() {
-    this.a = +prompt('a?', 0);
-    this.b = +prompt('b?', 0);
-  }
-}
-
-calculator.read();
-alert( calculator.sum() );
-alert( calculator.mul() );
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/task.md b/1-js/6-objects-more/1-object-methods/7-calculator/task.md
deleted file mode 100644
index 5e5790fc..00000000
--- a/1-js/6-objects-more/1-object-methods/7-calculator/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Создайте калькулятор
-
-[importance 5]
-
-Создайте объект `calculator` с тремя методами: 
-<ul>
-<li>`read()` запрашивает `prompt` два значения и сохраняет их как свойства объекта</li>
-<li>`sum()` возвращает сумму этих двух значений</li>
-<li>`mul()` возвращает произведение этих двух значений</li>
-</ul>
-
-```js
-var calculator = {
-  ...ваш код...
-}
-
-calculator.read();
-alert( calculator.sum() );
-alert( calculator.mul() );
-```
-
-[demo /]
diff --git a/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md b/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md
deleted file mode 100644
index 8d89b88e..00000000
--- a/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-Решение состоит в том, чтобы каждый раз возвращать текущий объект. Это делается добавлением `return this` в конце каждого метода:
-
-```js
-//+ run
-var ladder = {
-  step: 0,
-  up: function() {
-    this.step++;
-    return this;
-  },
-  down: function() {
-    this.step--;
-    return this;
-  },
-  showStep: function() {
-    alert( this.step );
-    return this;
-  }
-}
-
-ladder.up().up().down().up().down().showStep(); // 1
-```
-
diff --git a/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md b/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md
deleted file mode 100644
index 73dc4e8e..00000000
--- a/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Цепочка вызовов
-
-[importance 2]
-
-Есть объект "лестница" ladder:
-
-```js
-var ladder = {
-  step: 0,
-  up: function() { // вверх по лестнице
-    this.step++;
-  },
-  down: function() { // вниз по лестнице
-    this.step--;
-  },
-  showStep: function() { // вывести текущую ступеньку
-    alert( this.step );
-  }
-};
-```
-
-Сейчас, если нужно последовательно вызвать несколько методов объекта, это можно сделать так:
-
-```js
-ladder.up();
-ladder.up();
-ladder.down();
-ladder.showStep(); // 1
-```
-
-Модифицируйте код методов объекта, чтобы вызовы можно было делать цепочкой, вот так:
-
-```js
-ladder.up().up().down().up().down().showStep(); // 1
-```
-
-Как видно, такая запись содержит "меньше букв" и может быть более наглядной.
-
-Такой подход называется "чейнинг" (chaining) и используется, например, во фреймворке jQuery.
-
diff --git a/1-js/6-objects-more/1-object-methods/article.md b/1-js/6-objects-more/1-object-methods/article.md
deleted file mode 100644
index 4a70f595..00000000
--- a/1-js/6-objects-more/1-object-methods/article.md
+++ /dev/null
@@ -1,244 +0,0 @@
-# Методы объектов, this
-
-До этого мы говорили об объекте лишь как о хранилище значений. Теперь пойдём дальше и поговорим об объектах как о сущностях со своими функциями ("методами").
-[cut]
-
-## Методы у объектов
-
-При объявлении объекта можно указать свойство-функцию, например:
-
-```js
-//+ run
-var user = {
-  name: 'Василий',
-
-*!*
-  // метод
-*/!*
-  sayHi: function() {
-    alert( 'Привет!' );
-  }
-
-};
-
-*!*
-// Вызов
-user.sayHi();
-*/!*
-```
-
-Свойства-функции называют "методами" объектов. Их можно добавлять и удалять в любой момент, в том числе и явным присваиванием:
-
-```js
-//+ run
-var user = {
-  name: 'Василий'
-};
-
-*!*
-user.sayHi = function() { // присвоили метод после создания объекта
-  alert('Привет!');
-};
-*/!*
-
-// Вызов метода:
-*!*user.sayHi();*/!*
-```
-
-## Доступ к объекту через this
-
-Для полноценной работы метод должен иметь доступ к данным объекта. В частности, вызов `user.sayHi()` может захотеть вывести имя пользователя.
-
-**Для доступа к текущему объекту из метода используется ключевое слово `this`**. 
-
-Значением `this` является объект перед "точкой", в контексте которого вызван метод, например:
-
-```js
-//+ run
-var user = {
-  name: 'Василий',
-
-  sayHi: function() {
-    alert( *!*this.name*/!* );
-  }
-};
-
-user.sayHi(); // sayHi в контексте user
-```
-
-Здесь при выполнении функции `user.sayHi()` в `this` будет храниться ссылка на текущий объект `user`. 
-
-Вместо `this` внутри `sayHi` можно было бы обратиться к объекту, используя переменную `user`:
-
-```js
-...
-  sayHi: function() {
-    alert( *!*user.name*/!* );
-  }
-...
-```
-
-...Однако, такое решение нестабильно. Если мы решим скопировать объект в другую переменную, например `admin = user`, а в переменную `user` записать что-то другое -- обращение будет совсем не по адресу:
-
-```js
-//+ run
-var user = {
-  name: 'Василий',
-
-  sayHi: function() {
-    alert( *!*user.name*/!* ); // приведёт к ошибке
-  }
-};
-
-var admin = user;
-user = null;
-
-admin.sayHi(); // упс! внутри sayHi обращение по старому имени, ошибка!
-```
-
-Использование `this` гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.
-
-Через `this` метод может не только обратиться к любому свойству объекта, но и передать куда-то ссылку на сам объект целиком:
-
-```js
-//+ run no-beautify
-var user = {
-  name: 'Василий',
-
-*!* 
-  sayHi: function() {
-    showName(this); // передать текущий объект в showName
-  }
-*/!*
-};
-
-function showName(namedObj) {
-  alert( namedObj.name ); 
-}
-
-user.sayHi(); // Василий
-```
-
-## Подробнее про this 
-
-Любая функция может иметь в себе `this`. Совершенно неважно, объявлена ли она в объекте или отдельно от него.
-
-Значение `this` называется *контекстом вызова* и будет определено в момент вызова функции.
-
-Например, такая функция, объявленная без объекта, вполне допустима:
-
-```js
-function sayHi() { 
-  alert( *!*this.firstName*/!* );
-}
-```
-
-Эта функция ещё не знает, каким будет `this`. Это выяснится при выполнении программы.
-
-**Если одну и ту же функцию запускать в контексте разных объектов, она будет получать разный `this`:**
-
-```js
-//+ run no-beautify
-var user = { firstName: "Вася" };
-var admin = { firstName: "Админ" };
-
-function func() { 
-  alert( this.firstName );
-}
-
-user.f = func;  
-admin.g = func; 
-
-*!*
-// this равен объекту перед точкой:
-user.f(); // Вася
-admin.g(); // Админ
-admin['g'](); // Админ (не важно, доступ к объекту через точку или квадратные скобки)
-*/!*
-```
-
-Итак, значение `this` не зависит от того, как функция была создана, оно определяется исключительно в момент вызова.
-
-## Значение this при вызове без контекста
-
-Если функция использует `this` -- это подразумевает работу с объектом. Но и прямой вызов `func()` технически возможен. 
-
-Как правило, такая ситуация возникает при ошибке в разработке.
-
-При этом `this` получает значение `window`, глобального объекта:
-
-```js
-//+ run
-function func() {
-  alert( this ); // выведет [object Window] или [object global]
-}
-
-func();
-```
-
-Таково поведение в старом стандарте.
-
-А в режиме `use strict` вместо глобального объекта `this` будет `undefined`:
-
-```js
-//+ run
-function func() {
-  "use strict";
-  alert( this ); // выведет undefined (кроме IE9-)
-}
-
-func();
-```
-
-Обычно если в функции используется `this`, то она, всё же, служит для вызова в контексте объекта, так что такая ситуация -- скорее исключение.
-
-## Ссылочный тип
-
-Контекст `this` никак не привязан к функции, даже если она создана в объявлении объекта. Чтобы `this` передался, нужно вызвать функцию именно через точку (или квадратные скобки). 
-
-Любой более хитрый вызов приведёт к потере контекста, например:
-
-```js
-//+ run no-beautify
-var user = {
-  name: "Вася",
-  hi: function() { alert(this.name); },
-  bye: function() { alert("Пока"); }
-};
-
-user.hi(); // Вася (простой вызов работает)
-
-*!*
-// а теперь вызовем user.hi или user.bye в зависимости от имени
-(user.name == "Вася" ? user.hi : user.bye)(); // undefined
-*/!*
-```
-
-В последней строке примера метод получен в результате выполнения тернарного оператора и тут же вызван. Но `this` при этом теряется. 
-
-Если хочется понять, почему, то причина кроется в деталях работы вызова `obj.method()`.
-
-Он ведь, на самом деле, состоит из двух независимых операций: точка `.` -- получение свойства и скобки `()` -- его вызов (предполагается, что это функция).
-
-Функция, как мы говорили раньше, сама по себе не запоминает контекст. Чтобы "донести его" до скобок, JavaScript применяет "финт ушами" -- точка возвращает не функцию, а значение специального "ссылочного" типа [Reference Type](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-reference-specification-type).
-
-Этот тип представляет собой связку "base-name-strict", где:
-<ul>
-<li>*base* -- как раз объект,</li>
-<li>*name* -- имя свойства,</li>
-<li>*strict* -- вспомогательный флаг для передачи `use strict`.</li>
-</ul>
-
-То есть, ссылочный тип (Reference Type) -- это своеобразное "три-в-одном". Он существует исключительно для целей спецификации, мы его не видим, поскольку любой оператор тут же от него избавляется:
-
-<ul>
-<li>Скобки `()` получают из `base` значение свойства `name` и вызывают в контексте base.</li>
-<li>Другие операторы получают из `base` значение свойства `name` и используют, а остальные компоненты игнорируют.</li>
-</ul>
-
-Поэтому любая операция над результатом операции получения свойства, кроме вызова, приводит к потере контекста.
-
-Аналогично работает и получение свойства через квадратные скобки `obj[method]`.
-
-
-
diff --git a/1-js/6-objects-more/2-object-conversion/1-array-equals-string/solution.md b/1-js/6-objects-more/2-object-conversion/1-array-equals-string/solution.md
deleted file mode 100644
index b7a70199..00000000
--- a/1-js/6-objects-more/2-object-conversion/1-array-equals-string/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Если с одной стороны -- объект, а с другой -- нет, то сначала приводится объект. 
-
-В данном случае сравнение означает численное приведение. У массивов нет `valueOf`, поэтому вызывается `toString`, который возвращает список элементов через запятую.
-
-В данном случае, элемент только один - он и возвращается. Так что `['x']` становится `'x'`. Получилось `'x' == 'x'`, верно.
-
-P.S.
-По той же причине верны равенства:
-
-```js
-//+ run
-alert( ['x', 'y'] == 'x,y' ); // true
-alert( [] == '' ); // true
-```
-
diff --git a/1-js/6-objects-more/2-object-conversion/1-array-equals-string/task.md b/1-js/6-objects-more/2-object-conversion/1-array-equals-string/task.md
deleted file mode 100644
index 190bbeb4..00000000
--- a/1-js/6-objects-more/2-object-conversion/1-array-equals-string/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ['x'] == 'x'
-
-[importance 5]
-
-Почему результат `true` ?
-
-```js
-//+ run
-alert( ['x'] == 'x' );
-```
-
diff --git a/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/solution.md b/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/solution.md
deleted file mode 100644
index 9b2108d0..00000000
--- a/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Первый alert(foo)
-
-Возвращает строковое представление объекта, используя `toString`, т.е. `"foo"`.
-
-# Второй alert(foo + 1)
-Оператор `'+'` преобразует объект к примитиву, используя `valueOf`, так что результат: `3`.
-
-# Третий alert(foo + '3')
-
-То же самое, что и предыдущий случай, объект превращается в примитив `2`. Затем происходит сложение `2 + '3'`. Оператор `'+'` при сложении чего-либо со строкой приводит и второй операнд к строке, а затем применяет конкатенацию, так что результат -- строка `"23"`.
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/task.md b/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/task.md
deleted file mode 100644
index 86bd17cb..00000000
--- a/1-js/6-objects-more/2-object-conversion/2-tostring-valueof/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Преобразование
-
-[importance 5]
-
-Объявлен объект с `toString` и `valueOf`.
-
-Какими будут результаты `alert`?
-
-```js
-var foo = {
-  toString: function() {
-    return 'foo';
-  },
-  valueOf: function() {
-    return 2;
-  }
-};
-
-alert( foo );
-alert( foo + 1 );
-alert( foo + "3" );
-```
-
-Подумайте, прежде чем ответить.
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/solution.md b/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/solution.md
deleted file mode 100644
index ef69d31c..00000000
--- a/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Ответ по первому равенству
-
-Два объекта равны только тогда, когда это один и тот же объект.
-
-В первом равенстве создаются два массива, это разные объекты, так что они неравны.
-
-# Ответ по второму равенству
-
-<ol>
-<li>Первым делом, обе части сравнения вычисляются. Справа находится `![]`. Логическое НЕ `'!'` преобразует аргумент к логическому типу. Массив является объектом, так что это `true`. Значит, правая часть становится `![] = !true = false`. Так что получили:
-
-```js
-alert( [] == false );
-```
-
-</li>
-<li>Проверка равенства между объектом и примитивом вызывает численное преобразование объекта.
-
-У массива нет `valueOf`, сработает `toString` и преобразует массив в список элементов, то есть - в пустую строку:
-
-```js
-alert( '' == false );
-```
-
-</li>
-<li>Сравнение различных типов вызывает численное преобразование слева и справа:
-
-```js
-alert( 0 == 0 );
-```
-
-Теперь результат очевиден.
-</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/task.md b/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/task.md
deleted file mode 100644
index 6945834b..00000000
--- a/1-js/6-objects-more/2-object-conversion/3-compare-empty-arrays/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Почему [] == [] неверно, а [ ] == ![ ] верно?
-
-[importance 5]
-
-Почему первое равенство -- неверно, а второе -- верно?
-
-```js
-//+ run
-alert( [] == [] ); // false
-alert( [] == ![] ); // true
-```
-
-Какие преобразования происходят при вычислении?
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/solution.md b/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/solution.md
deleted file mode 100644
index 3d7c6689..00000000
--- a/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/solution.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-```js
-//+ no-beautify
-new Date(0) - 0 = 0 // (1)
-new Array(1)[0] + "" = "undefined" // (2)
-({})[0]
 = undefined // (3)
-[1] + 1 = "11" // (4)
-[1,2] + [3,4] = "1,23,4" // (5)
-[] + null + 1 = "null1" // (6)
-[[0]][0][0] = 0 // (7)
-({} + {}) = "[object Object][object Object]" // (8)
-```
-
-<ol>
-<li>`new Date(0)` -- дата, созданная по миллисекундам и соответствующая 0мс от 1 января 1970 года 00:00:00 UTC. Оператор минус `-` преобразует дату обратно в число миллисекунд, то есть в `0`.</li>
-<li>`new Array(num)` при вызове с единственным аргументом-числом создаёт массив данной длины, без элементов. Поэтому его нулевой элемент равен `undefined`, при сложении со строкой получается строка `"undefined"`.</li> 
-<li>Фигурные скобки -- это создание пустого объекта, у него нет свойства `'0'`. Так что значением будет `undefined`.
-Обратите внимание на внешние, круглые скобки. Если их убрать и запустить `{}[0]` в отладочной консоли браузера -- будет `0`, т.к. скобки `{}` будут восприняты как пустой блок кода, после которого идёт массив.</li>
-<li>Массив преобразуется в строку `"1"`. Оператор `"+"` при сложении со строкой приводит второй аргумент к строке -- значит будет `"1" + "1" = "11"`.</li>
-<li>Массивы приводятся к строке и складываются.</li>
-<li>Массив преобразуется в пустую строку `"" + null + 1`, оператор `"+"` видит, что слева строка и преобразует `null` к строке, получается `"null" + 1`, и в итоге `"null1"`.</li>
-<li>`[[0]]` -- это вложенный массив `[0]`  внутри внешнего `[ ]`. Затем мы берём от него нулевой элемент, и потом еще раз.
-
-Если это непонятно, то посмотрите на такой пример:
-
-```js
-//+ no-beautify
-alert( [1,[0],2][1] );
-```
-
-Квадратные скобки после массива/объекта обозначают не другой массив, а взятие элемента.
-</li>
-<li>Каждый объект преобразуется к примитиву. У встроенных объектов `Object` нет подходящего `valueOf`, поэтому используется `toString`, так что складываются в итоге строковые представления объектов.</li>
-</ol>
diff --git a/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/task.md b/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/task.md
deleted file mode 100644
index 85f767a5..00000000
--- a/1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Вопросник по преобразованиям, для объектов
-
-[importance 5]
-
-Подумайте, какой результат будет у выражений ниже. Когда закончите -- сверьтесь с решением.
-
-```js
-//+ no-beautify
-new Date(0) - 0
-new Array(1)[0] + ""
-({})[0]

-[1] + 1
-[1,2] + [3,4]
-[] + null + 1
-[[0]][0][0]
-({} + {})
-```
-
diff --git a/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/solution.md b/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/solution.md
deleted file mode 100644
index 4b36c185..00000000
--- a/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/solution.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Подсказка
-
-Чтобы `sum(1)`, а также `sum(1)(2)` можно было вызвать новыми скобками -- результатом `sum` должна быть функция.
-
-Но эта функция также должна уметь превращаться в число. Для этого нужно дать ей соответствующий `valueOf`. А если мы хотим, чтобы и в строковом контексте она вела себя так же -- то `toString`.
-
-# Решение
-
-Функция, которая возвращается `sum`, должна накапливать значение при каждом вызове.
-
-Удобнее всего хранить его в замыкании, в переменной `currentSum`. Каждый вызов прибавляет к ней очередное значение:
-
-```js
-//+ run
-function sum(a) {
-
-  var currentSum = a;
-
-  function f(b) {
-    currentSum += b;
-    return f;
-  }
-
-  f.toString = function() {
-    return currentSum;
-  };
-
-  return f;
-}
-
-alert( sum(1)(2) ); // 3
-alert( sum(5)(-1)(2) ); // 6
-alert( sum(6)(-1)(-2)(-3) ); // 0
-alert( sum(0)(1)(2)(3)(4)(5) ); // 15
-```
-
-При внимательном взгляде на решение легко заметить, что функция `sum` срабатывает только один раз. Она возвращает функцию `f`.
-
-Затем, при каждом запуске функция `f` добавляет параметр к сумме `currentSum`, хранящейся в замыкании, и возвращает сама себя.
-
-**В последней строчке `f` нет рекурсивного вызова.** 
-
-Вот так была бы рекурсия:
-
-```js
-function f(b) {
-  currentSum += b;
-  return f(); // <-- подвызов
-}
-```
-
-А в нашем случае, мы просто возвращаем саму функцию, ничего не вызывая.
-
-```js
-function f(b) {
-  currentSum += b;
-  return f; // <-- не вызывает сама себя, а возвращает ссылку на себя
-}
-```
-
-Эта `f` используется при следующем вызове, опять возвратит себя, и так сколько нужно раз. Затем, при использовании в строчном или численном контексте -- сработает `toString`, который вернет текущую сумму `currentSum`.
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/task.md b/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/task.md
deleted file mode 100644
index b220c704..00000000
--- a/1-js/6-objects-more/2-object-conversion/5-sum-many-brackets/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Сумма произвольного количества скобок
-
-[importance 2]
-
-Напишите функцию `sum`, которая будет работать так:
-
-```js
-sum(1)(2) == 3; // 1 + 2
-sum(1)(2)(3) == 6; // 1 + 2 + 3
-sum(5)(-1)(2) == 6
-sum(6)(-1)(-2)(-3) == 0
-sum(0)(1)(2)(3)(4)(5) == 15
-```
-
-Количество скобок может быть любым.
-
-Пример такой функции для двух аргументов -- есть в решении задачи [](/task/closure-sum).
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-object-conversion/article.md b/1-js/6-objects-more/2-object-conversion/article.md
deleted file mode 100644
index e473266b..00000000
--- a/1-js/6-objects-more/2-object-conversion/article.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# Преобразование объектов: toString и valueOf
-
-Ранее, в главе [](/types-conversion) мы рассматривали преобразование типов для примитивов. Теперь добавим в нашу картину мира объекты.
-
-Бывают операции, при которых объект должен быть преобразован в примитив.
-[cut]
-Например:
-
-<ul>
-<li>Строковое преобразование -- если объект выводится через `alert(obj)`.</li>
-<li>Численное преобразование -- при арифметических операциях, сравнении с примитивом.</li>
-<li>Логическое преобразование -- при `if(obj)` и других логических операциях.</li>
-</ul>
-
-Рассмотрим эти преобразования по очереди.
-
-## Логическое преобразование
-
-Проще всего -- с логическим преобразованием.
-
-**Любой объект в логическом контексте -- `true`, даже если это пустой массив `[]` или объект `{}`.**
-
-```js
-//+ run
-if ({} && []) {
-  alert( "Все объекты - true!" ); // alert сработает
-}
-```
-
-## Строковое преобразование
-
-Строковое преобразование проще всего увидеть, если вывести объект при помощи `alert`:
-
-```js
-//+ run
-var user = {
-  firstName: 'Василий'
-};
-
-alert( user ); // [object Object]
-```
-
-Как видно, содержимое объекта не вывелось. Это потому, что стандартным строковым представлением пользовательского объекта является строка `"[object Object]"`.
-
-Такой вывод объекта не содержит интересной информации. Поэтому имеет смысл его поменять на что-то более полезное. 
-
-**Если в объекте присутствует метод `toString`, который возвращает примитив, то он используется для преобразования.**
-
-```js
-//+ run
-var user = {
-
-  firstName: 'Василий',
-
-  *!*toString:*/!* function() {
-    return 'Пользователь ' + this.firstName;
-  }
-};
-
-alert( user );  // Пользователь Василий
-```
-
-[smart header="Результатом `toString` может быть любой примитив"]
-Метод `toString` не обязан возвращать именно строку. 
-
-Его результат может быть любого примитивного типа. Например, это может быть число, как в примере ниже:
-
-```js
-//+ run
-var obj = {
-  toString: function() {
-    return 123;
-  }
-};
-
-alert( obj ); // 123
-```
-
-Поэтому мы и называем его здесь *"строковое преобразование"*, а не "преобразование к строке".
-[/smart]
-
-Все объекты, включая встроенные, имеют свои реализации метода `toString`, например:
-
-```js
-//+ run
-alert( [1, 2] ); // toString для массивов выводит список элементов "1,2"
-alert( new Date ); // toString для дат выводит дату в виде строки
-alert( function() {} ); // toString для функции выводит её код
-```
-
-## Численное преобразование
-
-Для численного преобразования объекта используется метод `valueOf`, а если его нет -- то `toString`:
-
-```js
-//+ run
-var room = {
-  number: 777,
-
-  valueOf: function() { return this.number; },
-  toString: function() { return this.number; }
-};
-
-alert( +room );  // 777, *!*вызвался valueOf*/!*
-
-delete room.valueOf; // *!*valueOf удалён*/!*
-
-alert( +room );  // 777, *!*вызвался toString*/!*
-```
-
-Метод `valueOf` обязан возвращать примитивное значение, иначе его результат будет проигнорирован. При этом -- не обязательно числовое.
-
-[smart header="У большинства объектов нет `valueOf`"]
-У большинства встроенных объектов такого `valueOf` нет, поэтому численное и строковое преобразования для них работают одинаково.
-
-Исключением является объект `Date`, который поддерживает оба типа преобразований:
-
-```js
-//+ run
-alert( new Date() ); // toString: Дата в виде читаемой строки
-alert( +new Date() ); // valueOf: кол-во миллисекунд, прошедших с 01.01.1970
-```
-
-[/smart]
-
-[smart header="Детали спецификации"]
-Если посмотреть в стандарт, то в пункте [15.2.4.4](http://es5.github.com/x15.2.html#x15.2.4.4) говорится о том, что `valueOf` есть у любых объектов. Но он ничего не делает, просто возвращает сам объект (не-примитивное значение!), а потому игнорируется.
-[/smart]
-
-## Две стадии преобразования
-
-Итак, объект преобразован в примитив при помощи `toString` или `valueOf`. 
-
-Но на этом преобразования не обязательно заканчиваются. Вполне возможно, что в процессе вычислений этот примитив будет преобразован во что-то другое.
-
-Например, рассмотрим применение к объекту операции `==`:
-
-```js
-//+ run
-var obj = {
-  valueOf: function() {
-    return 1;
-  }
-};
-
-alert( obj == true ); // true
-```
-
-Объект `obj` был сначала преобразован в примитив, используя численное преобразование, получилось `1 == true`. 
-
-Далее, так как значения всё ещё разных типов, применяются правила преобразования примитивов, результат: `true`.
-
-То же самое -- при сложении с объектом при помощи `+`:
-
-```js
-//+ run
-var obj = {
-  valueOf: function() {
-    return 1;
-  }
-};
-
-alert( obj + "test" ); // 1test
-```
-
-Или вот, для разности объектов:
-
-```js
-//+ run
-var a = {
-  valueOf: function() {
-    return "1";
-  }
-};
-var b = {
-  valueOf: function() {
-    return "2";
-  }
-};
-
-alert( a + b ); // "12"
-alert( a - b ); // "1" - "2" = -1
-```
-
-[warn header="Исключение: `Date`"]
-Объект `Date`, по историческим причинам, является исключением.
-
-Бинарный оператор плюс `+` обычно использует числовое преобразование и метод `valueOf`. Как мы уже знаем, если  подходящего `valueOf` нет (а его нет у большинства объектов), то используется `toString`, так что в итоге преобразование происходит к строке. Но если есть `valueOf`, то используется `valueOf`. Выше в примере как раз `a + b` это демонстрируют.
-
-У объектов `Date` есть и `valueOf` -- возвращает количество миллисекунд, и `toString` -- возвращает строку с датой. 
-
-...Но оператор `+` для `Date` использует именно `toString` (хотя должен бы `valueOf`).
-
-Это и есть исключение:
-
-```js
-//+ run
-// бинарный плюс для даты toString, для остальных объектов valueOf
-alert( new Date + "" ); // "строка даты"
-```
-
-Других подобных исключений нет. 
-[/warn]
-
-[warn header="Как испугать Java-разработчика"]
-В языке Java (это не JavaScript, другой язык, здесь приведён для примера) логические значения можно создавать, используя синтаксис `new Boolean(true/false)`, например `new Boolean(true)`.
-
-В JavaScript тоже есть подобная возможность, которая возвращает "объектную обёртку" для логического значения. 
-
-Эта возможность давно существует лишь для совместимости, она и не используется на практике, поскольку приводит к странным результатам. Некоторые из них могут сильно удивить человека, не привыкшего к JavaScript, например:
-
-```js
-//+ run
-var value = new Boolean(false);
-if (value) {
-  alert( true ); // сработает!
-}
-```
-
-Почему запустился `alert`? Ведь в `if` находится `false`... Проверим:
-
-```js
-//+ run
-var value = new Boolean(false);
-
-*!*
-alert( value ); // выводит false, все ок..
-*/!*
-
-if (value) {
-  alert( true ); // ..но тогда почему выполняется alert в if ?!? 
-}
-```
-
-Дело в том, что `new Boolean` -- это не примитивное значение, а объект. Поэтому в логическом контексте он преобразуется к `true`, в результате работает первый пример.
-
-А второй пример вызывает `alert`, который преобразует объект к строке, и он становится `"false"`. 
-
-**В JavaScript вызовы `new Boolean/String/Number` не используются, а используются простые вызовы соответствующих функций, они преобразуют значение в примитив нужного типа, например `Boolean(val) === !!val`.**
-[/warn]
-
-## Итого
-
-<ul>
-<li>В логическом контексте объект -- всегда `true`.</li>
-<li>При строковом преобразовании объекта используется его метод `toString`. Он должен возвращать примитивное значение, причём не обязательно именно строку.
-</li>
-<li>Для численного преобразования используется метод `valueOf`, который также может возвратить любое примитивное значение. У большинства объектов `valueOf` не работает (возвращает сам объект и потому игнорируется), при этом для численного преобразования используется `toString`.</li>
-</ul> 
-
-Полный алгоритм преобразований есть в спецификации EcmaScript, смотрите пункты [11.8.5](http://es5.github.com/x11.html#x11.8.5), [11.9.3](http://es5.github.com/x11.html#x11.9.3), а также [9.1](http://es5.github.com/x9.html#x9.1) и [9.3](http://es5.github.com/x9.html#x9.3).
-
-
-Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа:
-```js
-//+ no-beautify
-{}[0]  // чему равно? 
-{} + {} // а так?
-```
-
-Если вы запустите эти выражения в консоли, то результат может показаться странным. Подвох здесь в том, что если фигурные скобки `{...}` идут не в выражении, а в основном потоке кода, то JavaScript считает, что это не объект, а "блок кода" (как `if`, `for`, но без оператора, просто группировка команд вместе, используется редко).
-
-Вот блок кода с командой:
-```js
-//+run
-{
-  alert("Блок")
-}
-```
-
-А если команду изъять, то будет пустой блок `{}`, который ничего не делает. Два примера выше как раз содержат пустой блок в начале, который ничего не делает. Иначе говоря:
-```js
-//+ no-beautify
-{}[0]   // то же что и: [0]  
-{} + {} // то же что и: + {}
-```
-
-То есть, такие вопросы -- не на преобразование типов, а на понимание, что если `{ ... }` находится вне выражений, то это не объект, а блок.
-
-
-
diff --git a/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/solution.md b/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/solution.md
deleted file mode 100644
index 5b27cec2..00000000
--- a/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Да, возможны.
-
-Они должны возвращать одинаковый объект. При этом если функция возвращает объект, то `this` не используется.
-
-Например, они могут вернуть один и тот же объект `obj`, определённый снаружи:
-
-```js
-//+ run no-beautify
-var obj = {};
-
-function A() { return obj; }
-function B() { return obj; }
-
-var a = new A;
-var b = new B;
-
-alert( a == b ); // true
-```
-
diff --git a/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/task.md b/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/task.md
deleted file mode 100644
index 72c4e8eb..00000000
--- a/1-js/6-objects-more/3-constructor-new/1-two-functions-one-object/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Две функции один объект
-
-[importance 2]
-
-Возможны ли такие функции `A` и `B` в примере ниже, что соответствующие объекты `a,b` равны (см. код ниже)?
-
-```js
-//+ no-beautify
-function A() { ... }
-function B() { ... }
-
-var a = new A;
-var b = new B;
-
-alert( a == b ); // true
-```
-
-Если да -- приведите пример кода с такими функциями. 
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/_js.view/test.js b/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/_js.view/test.js
deleted file mode 100644
index ef881c45..00000000
--- a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/_js.view/test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-sinon.stub(window, "prompt")
-
-prompt.onCall(0).returns("2");
-prompt.onCall(1).returns("3");
-
-describe("calculator", function() {
-  var calculator;
-  before(function() {
-    calculator = new Calculator();
-    calculator.read();
-  });
-
-  it("при вводе 2 и 3 сумма равна 5", function() {
-    assert.equal(calculator.sum(), 5);
-  });
-
-  it("при вводе 2 и 3 произведение равно 6", function() {
-    assert.equal(calculator.mul(), 6);
-  });
-
-});
-
-after(function() {
-  prompt.restore();
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/solution.md b/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/solution.md
deleted file mode 100644
index a78010d9..00000000
--- a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-```js
-//+ run demo
-function Calculator() {
-
-  this.read = function() {
-    this.a = +prompt('a?', 0);
-    this.b = +prompt('b?', 0);
-  };
-
-  this.sum = function() {
-    return this.a + this.b;
-  };
-
-  this.mul = function() {
-    return this.a * this.b;
-  };
-}
-
-var calculator = new Calculator();
-calculator.read();
-
-alert( "Сумма=" + calculator.sum() );
-alert( "Произведение=" + calculator.mul() );
-```
-
diff --git a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/task.md b/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/task.md
deleted file mode 100644
index 31258cb7..00000000
--- a/1-js/6-objects-more/3-constructor-new/2-calculator-constructor/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Создать Calculator при помощи конструктора
-
-[importance 5]
-
-Напишите *функцию-конструктор* `Calculator`, которая создает объект с тремя методами:
-<ul>
-<li>Метод `read()` запрашивает два значения при помощи `prompt` и запоминает их в свойствах объекта.</li>
-<li>Метод `sum()` возвращает сумму запомненных свойств.</li>
-<li>Метод `mul()` возвращает произведение запомненных свойств.</li>
-</ul>
-
-Пример использования:
-
-```js
-var calculator = new Calculator();
-calculator.read();
-
-alert( "Сумма=" + calculator.sum() );
-alert( "Произведение=" + calculator.mul() );
-```
-
-[demo /]
diff --git a/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/solution.js b/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/solution.js
deleted file mode 100644
index bd744597..00000000
--- a/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/solution.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function Accumulator(startingValue) {
-  this.value = startingValue;
-
-  this.read = function() {
-    this.value += +prompt('Сколько добавлять будем?', 0);
-  };
-
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/test.js b/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/test.js
deleted file mode 100644
index aa651b11..00000000
--- a/1-js/6-objects-more/3-constructor-new/3-accumulator/_js.view/test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-describe("Accumulator(1)", function() {
-  var accumulator;
-  before(function() {
-    accumulator = new Accumulator(1);
-  });
-
-  beforeEach(function() {
-    sinon.stub(window, "prompt")
-  });
-
-  afterEach(function() {
-    prompt.restore();
-  });
-
-  it("начальное значение 1", function() {
-    assert.equal(accumulator.value, 1);
-  });
-
-  it("после ввода 0 значение 1", function() {
-    prompt.returns("0");
-    accumulator.read();
-    assert.equal(accumulator.value, 1);
-  });
-
-  it("после ввода 1 значение 2", function() {
-    prompt.returns("1");
-    accumulator.read();
-    assert.equal(accumulator.value, 2);
-  });
-
-  it("после ввода 2 значение 4", function() {
-    prompt.returns("2");
-    accumulator.read();
-    assert.equal(accumulator.value, 4);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/3-accumulator/solution.md b/1-js/6-objects-more/3-constructor-new/3-accumulator/solution.md
deleted file mode 100644
index f5b2ba43..00000000
--- a/1-js/6-objects-more/3-constructor-new/3-accumulator/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```js
-//+ run demo
-function Accumulator(startingValue) {
-  this.value = startingValue;
-
-  this.read = function() {
-    this.value += +prompt('Сколько добавлять будем?', 0);
-  };
-
-}
-
-var accumulator = new Accumulator(1);
-accumulator.read();
-accumulator.read();
-alert( accumulator.value );
-```
-
diff --git a/1-js/6-objects-more/3-constructor-new/3-accumulator/task.md b/1-js/6-objects-more/3-constructor-new/3-accumulator/task.md
deleted file mode 100644
index 7852e561..00000000
--- a/1-js/6-objects-more/3-constructor-new/3-accumulator/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Создать Accumulator при помощи конструктора
-
-[importance 5]
-
-Напишите *функцию-конструктор* `Accumulator(startingValue)`. 
-Объекты, которые она создает, должны хранить текущую сумму и прибавлять к ней то, что вводит посетитель.
-
-Более формально, объект должен:
-<ul>
-<li>Хранить текущее значение в своём свойстве `value`. Начальное значение свойства `value` ставится конструктором равным `startingValue`.</li>
-<li>Метод `read()` вызывает `prompt`, принимает число и прибавляет его к свойству `value`.</li> 
-</ul>
-Таким образом, свойство `value` является текущей суммой всего, что ввел посетитель при вызовах метода `read()`, с учетом начального значения `startingValue`.
-
-Ниже вы можете посмотреть работу кода:
-
-```js
-var accumulator = new Accumulator(1); // начальное значение 1
-accumulator.read(); // прибавит ввод prompt к текущему значению
-accumulator.read(); // прибавит ввод prompt к текущему значению
-alert( accumulator.value ); // выведет текущее значение
-```
-
-[demo /]
diff --git a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/solution.js b/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/solution.js
deleted file mode 100644
index 4bf9f22b..00000000
--- a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/solution.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function Calculator() {
-
-  var methods = {
-    "-": function(a, b) {
-      return a - b;
-    },
-    "+": function(a, b) {
-      return a + b;
-    }
-  };
-
-  this.calculate = function(str) {
-
-    var split = str.split(' '),
-      a = +split[0],
-      op = split[1],
-      b = +split[2]
-
-    if (!methods[op] || isNaN(a) || isNaN(b)) {
-      return NaN;
-    }
-
-    return methods[op](+a, +b);
-  }
-
-  this.addMethod = function(name, func) {
-    methods[name] = func;
-  };
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/test.js b/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/test.js
deleted file mode 100644
index 2c6891a9..00000000
--- a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/_js.view/test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-var calculator;
-before(function() {
-  calculator = new Calculator;
-});
-
-it("calculate(12 + 34) = 46", function() {
-  assert.equal(calculator.calculate("12 + 34"), 46);
-});
-
-it("calculate(34 - 12) = 22", function() {
-  assert.equal(calculator.calculate("34 - 12"), 22);
-});
-
-it("добавили умножение: calculate(2 * 3) = 6", function() {
-  calculator.addMethod("*", function(a, b) {
-    return a * b;
-  });
-  assert.equal(calculator.calculate("2 * 3"), 6);
-});
-
-it("добавили возведение в степень: calculate(2 ** 3) = 8", function() {
-  calculator.addMethod("**", function(a, b) {
-    return Math.pow(a, b);
-  });
-  assert.equal(calculator.calculate("2 ** 3"), 8);
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/solution.md b/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/solution.md
deleted file mode 100644
index 3e5f26e5..00000000
--- a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/solution.md
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-```js
-//+ run
-function Calculator() {
-
-  var methods = {
-    "-": function(a, b) {
-      return a - b;
-    },
-    "+": function(a, b) {
-      return a + b;
-    }
-  };
-
-  this.calculate = function(str) {
-
-    var split = str.split(' '),
-      a = +split[0],
-      op = split[1],
-      b = +split[2]
-
-    if (!methods[op] || isNaN(a) || isNaN(b)) {
-      return NaN;
-    }
-
-    return methods[op](+a, +b);
-  }
-
-  this.addMethod = function(name, func) {
-    methods[name] = func;
-  };
-}
-
-var calc = new Calculator;
-
-calc.addMethod("*", function(a, b) {
-  return a * b;
-});
-calc.addMethod("/", function(a, b) {
-  return a / b;
-});
-calc.addMethod("**", function(a, b) {
-  return Math.pow(a, b);
-});
-
-var result = calc.calculate("2 ** 3");
-alert( result ); // 8
-```
-
-<ul>
-<li>Обратите внимание на хранение методов. Они просто добавляются к внутреннему объекту.</li>
-<li>Все проверки и преобразование к числу производятся в методе `calculate`. В дальнейшем он может быть расширен для поддержки более сложных выражений.</li>
-</ul>
-
diff --git a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/task.md b/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/task.md
deleted file mode 100644
index 244a932c..00000000
--- a/1-js/6-objects-more/3-constructor-new/4-calculator-extendable/task.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Создайте калькулятор
-
-[importance 5]
-
-Напишите конструктор `Calculator`, который создаёт расширяемые объекты-калькуляторы.
-
-Эта задача состоит из двух частей, которые можно решать одна за другой.
-<ol>
-<li>Первый шаг задачи: вызов `calculate(str)` принимает строку, например "1 + 2", с жёстко заданным форматом "ЧИСЛО операция ЧИСЛО" (по одному пробелу вокруг операции), и возвращает результат. Понимает плюс `+` и минус `-`.
-
-Пример использования:
-
-```js
-var calc = new Calculator;
-
-alert( calc.calculate("3 + 7") ); // 10
-```
-
-</li>
-<li>Второй шаг -- добавить калькулятору метод `addMethod(name, func)`, который учит калькулятор новой операции. Он получает имя операции `name` и функцию от двух аргументов `func(a,b)`, которая должна её реализовывать.
-
-Например, добавим операции умножить `*`, поделить `/` и возвести в степень `**`:
-
-```js
-var powerCalc = new Calculator;
-powerCalc.addMethod("*", function(a, b) {
-  return a * b;
-});
-powerCalc.addMethod("/", function(a, b) {
-  return a / b;
-});
-powerCalc.addMethod("**", function(a, b) {
-  return Math.pow(a, b);
-});
-
-var result = powerCalc.calculate("2 ** 3");
-alert( result ); // 8
-```
-
-</li>
-</ol>
-
-<ul>
-<li>Поддержка скобок и сложных математических выражений в этой задаче не требуется.</li>
-<li>Числа и операции могут состоять из нескольких символов. Между ними ровно один пробел.</li>
-<li>Предусмотрите обработку ошибок. Какая она должна быть - решите сами.</li>
-</ul>
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-constructor-new/article.md b/1-js/6-objects-more/3-constructor-new/article.md
deleted file mode 100644
index f4ce62cf..00000000
--- a/1-js/6-objects-more/3-constructor-new/article.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Создание объектов через "new"
-
-Обычный синтаксис `{...}` позволяет создать один объект. Но зачастую нужно создать много однотипных объектов.
-
-Для этого используют "функции-конструкторы", запуская их при помощи специального оператора `new`.
-
-[cut]
-## Конструктор
-
-Конструктором становится любая функция, вызванная через `new`.
-
-Например:
-
-```js
-function Animal(name) {
-  this.name = name;
-  this.canWalk = true;
-}
-
-*!*
-var animal = new Animal("ёжик");
-*/!*
-```
-
-Заметим, что, технически, любая функция может быть использована как конструктор. То есть, любую функцию можно вызвать при помощи `new`. Как-то особым образом указывать, что она -- конструктор -- не надо.
-
-Но, чтобы выделить функции, задуманные как конструкторы, их называют с большой буквы: `Animal`, а не `animal`.
-
-Детальнее -- функция, запущенная через `new`, делает следующее:
-
-<ol>
-<li>Создаётся новый пустой объект.</li>
-<li>Ключевое слово `this` получает ссылку на этот объект.</li>
-<li>Функция выполняется. Как правило, она модифицирует `this`, добавляет методы, свойства.</li>
-<li>Возвращается `this`.</li>
-</ol>
-
-
-В результате вызова `new Animal("ёжик");` получаем такой объект:
-
-```js
-animal = {
-  name: "ёжик",
-  canWalk: true
-}
-```
-
-Иными словами, при вызове `new Animal` происходит что-то в таком духе (первая и последняя строка -- это то, что делает интерпретатор):
-
-```js
-function Animal(name) {
-*!*
-  // this = {};
-*/!*
-
-  // в this пишем свойства, методы  
-  this.name = name;
-  this.canWalk = true;
-
-*!*
-  // return this;
-*/!*
-}
-```
-
-Теперь многократными вызовами `new Animal` с разными параметрами мы можем создать столько объектов, сколько нужно. Поэтому такую функцию и называют *конструктором* -- она предназначена для "конструирования" объектов.
-
-[smart header="new function() { ... }"]
-Иногда функцию-конструктор объявляют и тут же используют, вот так:
-```js
-var animal = new function() {
-  this.name = "Васька";
-  this.canWalk = true;
-};
-```
-Так делают, когда хотят создать единственный объект данного типа. Примере выше с тем же успехом можно было бы переписать как:
-```js
-var animal = {
-  name: "Васька",
-  canWalk: true
-}
-```
-...Но обычный синтаксис `{...}` не подходит, когда при создании свойств объекта нужны более сложные вычисления. Их можно проделать в функции-конструкторе и записать результат в `this`.
-[/smart]
-
-## Правила обработки return
-
-Как правило, конструкторы ничего не возвращают. Их задача -- записать всё, что нужно, в `this`, который автоматически станет результатом.
-
-Но если явный вызов `return` всё же есть, то применяется простое правило:
-<ul>
-<li>При вызове `return` с объектом, будет возвращён он, а не `this`.</li>
-<li>При вызове `return` с примитивным значением, оно будет отброшено.</li>
-</ul>
-
-Иными словами, вызов `return` с объектом вернёт объект, а с чем угодно, кроме объекта -- возвратит, как обычно, `this`.
-
-Например, возврат объекта:
-
-```js
-//+ run no-beautify
-function BigAnimal() {
-
-  this.name = "Мышь";
-
-  return { name: "Годзилла" };  // <-- возвратим объект
-}
-
-alert( new BigAnimal().name );  // Годзилла, получили объект вместо this
-```
-
-А вот пример с возвратом строки:
-
-```js
-//+ run
-function BigAnimal() {
-
-  this.name = "Мышь";
-
-  return "Годзилла"; // <-- возвратим примитив
-}
-
-alert( new BigAnimal().name ); // Мышь, получили this (а Годзилла пропал)
-```
-
-Эта особенность работы `new` прописана в стандарте, но используется она весьма редко.
-
-[smart header="Можно без скобок"]
-Кстати, при вызове `new` без аргументов скобки можно не ставить:
-
-```js
-var animal = new BigAnimal; // <-- без скобок
-// то же самое что 
-var animal = new BigAnimal();
-```
-
-Не сказать, что выбрасывание скобок -- "хороший стиль", но такой синтаксис допустим стандартом.
-[/smart]
-
-## Создание методов в конструкторе   
-
-Использование функций для создания объекта дает большую гибкость. Можно передавать конструктору параметры,  определяющие как его создавать, и он будет "клепать" объекты заданным образом.
-
-Добавим в создаваемый объект ещё и метод.
-
-Например, `new User(name)` создает объект с заданным значением свойства `name` и методом `sayHi`:
-
-```js
-//+ run
-function User(name) {
-  this.name = name;
-
-  this.sayHi = function() {
-    alert( "Моё имя: " + this.name );
-  };
-}
-
-*!*
-var ivan = new User("Иван");
-
-ivan.sayHi(); // Моё имя: Иван
-*/!*
-
-/* 
-ivan = {
-   name: "Иван", 
-   sayHi: функция
-} 
-*/
-```
-
-## Локальные переменные   
-
-В функции-конструкторе бывает удобно объявить вспомогательные локальные переменные и вложенные функции, которые будут видны только внутри:
-
-```js
-//+ run
-function User(firstName, lastName) {
-*!*
-  // вспомогательная переменная
-  var phrase = "Привет";
-
-  //  вспомогательная вложенная функция
-  function getFullName() {
-      return firstName + " " + lastName;
-    }
-*/!*
-
-  this.sayHi = function() {
-    alert( phrase + ", " + getFullName() ); // использование
-  };
-}
-
-var vasya = new User("Вася", "Петров");
-vasya.sayHi(); // Привет, Вася Петров
-```
-
-Мы уже говорили об этом подходе ранее, в главе [](/closures-usage). 
-
-Те функции и данные, которые должны быть доступны для внешнего кода, мы пишем в `this` -- и к ним можно будет обращаться, как например `vasya.sayHi()`, а вспомогательные, которые нужны только внутри самого объекта, сохраняем в локальной области видимости.
-
-[]
-
-## Итого
-
-Объекты могут быть созданы при помощи функций-конструкторов:
-
-<ul>
-<li>Любая функция может быть вызвана с `new`, при этом она получает новый пустой объект в качестве `this`, в который она добавляет свойства. Если функция не решит возвратить свой объект, то её результатом будет `this`.</li>
-<li>Функции, которые предназначены для создания объектов, называются *конструкторами*. Их названия пишут с большой буквы, чтобы отличать от обычных.</li>
-</ul>
-
-
-
-
-
diff --git a/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/solution.md b/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/solution.md
deleted file mode 100644
index f00b3bc8..00000000
--- a/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/solution.md
+++ /dev/null
@@ -1,48 +0,0 @@
-
-```js
-//+ run
-function User(fullName) {
-  this.fullName = fullName;
-
-  Object.defineProperties(this, {
-
-    firstName: {
-
-      get: function() {
-        return this.fullName.split(' ')[0];
-      },
-
-      set: function(newFirstName) {
-        this.fullName = newFirstName + ' ' + this.lastName;
-      }
-
-    },
-
-    lastName: {
-
-      get: function() {
-        return this.fullName.split(' ')[1];
-      },
-
-      set: function(newLastName) {
-        this.fullName = this.firstName + ' ' + newLastName;
-      }
-
-    }
-
-
-  });
-}
-
-var vasya = new User("Василий Попкин");
-
-// чтение firstName/lastName
-alert( vasya.firstName ); // Василий
-alert( vasya.lastName ); // Попкин
-
-// запись в lastName
-vasya.lastName = 'Сидоров';
-
-alert( vasya.fullName ); // Василий Сидоров
-```
-
diff --git a/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/task.md b/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/task.md
deleted file mode 100644
index 81152200..00000000
--- a/1-js/6-objects-more/4-descriptors-getters-setters/1-replace-property-getter/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Добавить get/set-свойства
-
-[importance 5]
-
-Вам попал в руки код объекта `User`, который хранит имя и фамилию в свойстве `this.fullName`:
-
-```js
-function User(fullName) {
-  this.fullName = fullName;
-}
-
-var vasya = new User("Василий Попкин");
-```
-
-Имя и фамилия всегда разделяются пробелом.
-
-Сделайте, чтобы были доступны свойства `firstName` и `lastName`, причём не только на чтение, но и на запись, вот так:
-
-```js
-var vasya = new User("Василий Попкин");
-
-// чтение firstName/lastName
-alert( vasya.firstName ); // Василий
-alert( vasya.lastName ); // Попкин
-
-// запись в lastName
-vasya.lastName = 'Сидоров';
-
-alert( vasya.fullName ); // Василий Сидоров
-```
-
-Важно: в этой задаче `fullName` должно остаться свойством, а `firstName/lastName` -- реализованы через `get/set`. Лишнее дублирование здесь ни к чему.
\ No newline at end of file
diff --git a/1-js/6-objects-more/4-descriptors-getters-setters/article.md b/1-js/6-objects-more/4-descriptors-getters-setters/article.md
deleted file mode 100644
index 551b1f1e..00000000
--- a/1-js/6-objects-more/4-descriptors-getters-setters/article.md
+++ /dev/null
@@ -1,403 +0,0 @@
-# Дескрипторы, геттеры и сеттеры свойств
-
-В этой главе мы рассмотрим возможности, которые позволяют очень гибко и мощно управлять всеми свойствами объекта, включая их аспекты -- изменяемость, видимость в цикле `for..in` и даже незаметно делать их функциями.
-
-Они поддерживаются всеми современными браузерами, но не IE8-. Впрочем, даже в IE8 их поддерживает, но только для DOM-объектов (используются при работе со страницей, это сейчас вне нашего рассмотрения).
-
-[cut]
-## Дескрипторы в примерах
-
-Основной метод для управления свойствами -- [Object.defineProperty](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperty).
-
-Он позволяет объявить свойство объекта и, что самое главное, тонко настроить его особые аспекты, которые никак иначе не изменить.
-
-Синтаксис:
-
-```js
-Object.defineProperty(obj, prop, descriptor)
-```
-
-Аргументы:
-<dl>
-<dt>`obj`</dt>
-<dd>Объект, в котором объявляется свойство.</dd>
-<dt>`prop`</dt>
-<dd>Имя свойства, которое нужно объявить или модифицировать.</dd>
-<dt>`descriptor`</dt>
-<dd>Дескриптор -- объект, который описывает поведение свойства. 
-
-В нём могут быть следующие поля:
-
-<ul>
-<li>`value` -- значение свойства, по умолчанию `undefined`</li>
-<li>`writable` -- значение свойства можно менять, если `true`. По умолчанию `false`.</li>
-<li>`configurable` -- если `true`, то свойство можно удалять, а также менять его в дальнейшем при помощи новых вызовов `defineProperty`. По умолчанию `false`.</li>
-<li>`enumerable` -- если `true`, то свойство будет участвовать в переборе `for..in`. По умолчанию `false`.</li>
-<li>`get` -- функция, которая возвращает значение свойства. По умолчанию `undefined`.</li>
-<li>`set` -- функция, которая записывает значение свойства. По умолчанию `undefined`.</li>
-</ul>
-
-Чтобы избежать конфликта, запрещено одновременно указывать значение `value` и функции `get/set`. Либо значение, либо функции для его чтения-записи, одно из двух. Также запрещено и не имеет смысла указывать `writable` при наличии `get/set`-функций.
-
-Далее мы подробно разберём эти свойства на примерах.
-
-## Обычное свойство
-
-Обычное свойство добавить очень просто.
-
-Два таких вызова работают одинаково:
-
-```js
-//+ no-beautify
-var user = {};
-
-// 1. простое присваивание
-user.name = "Вася";
-
-// 2. указание значения через дескриптор
-Object.defineProperty(user, "name", { value: "Вася" });
-```
-
-## Свойство-константа
-
-Для того, чтобы сделать свойство неизменяемым, добавим ему флаги `writable` и `configurable`:
-
-```js
-//+ run
-*!*
-"use strict";
-*/!*
-
-var user = {};
-
-Object.defineProperty(user, "name", {
-  value: "Вася",
-  writable: false, // запретить присвоение "user.name=" 
-  configurable: false // запретить удаление "delete user.name"
-});
-
-// Теперь попытаемся изменить это свойство.
-
-// в strict mode присвоение "user.name=" вызовет ошибку
-*!*
-user.name = "Петя";
-*/!*
-```
-
-Заметим, что без `use strict` операция записи "молча" не сработает, а при `use strict` дополнительно генерируется ошибка.
-
-## Свойство, скрытое для for..in
-
-Встроенный метод `toString`, как и большинство встроенных методов, не участвует в цикле `for..in`. Это удобно, так как обычно такое свойство является "служебным".
-
-К сожалению, свойство `toString`, объявленное обычным способом, будет видно в цикле `for..in`, например:
-
-```js
-//+ run no-beautify
-var user = {
-  name: "Вася",
-  toString: function() { return this.name; }
-};
-
-*!*
-for(var key in user) alert(key);  // name, toString
-*/!*
-```
-
-Мы бы хотели, чтобы поведение нашего метода `toString` было таким же, как и стандартного.
-
-`Object.defineProperty` может исключить `toString` из списка итерации, поставив ему флаг `enumerable: false`. По стандарту, у встроенного `toString` этот флаг уже стоит.
-
-```js
-//+ run no-beautify
-var user = {
-  name: "Вася",
-  toString: function() { return this.name; }
-};
-
-*!*
-// помечаем toString как не подлежащий перебору в for..in
-Object.defineProperty(user, "toString", {enumerable: false});
-
-for(var key in user) alert(key);  // name
-*/!*
-```
-
-Обратим внимание, вызов `defineProperty` не перезаписал свойство, а просто модифицировал настройки у существующего `toString`.
-
-## Свойство-функция
-
-Дескриптор позволяет задать свойство, которое на самом деле работает как функция. Для этого в нём нужно указать эту функцию в `get`.
-
-Например, у объекта `user` есть обычные свойства: имя `firstName` и фамилия `surname`. 
-
-Создадим свойство `fullName`, которое на самом деле является функцией:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  surname: "Петров"
-}
-
-Object.defineProperty(user, "fullName", {
-  *!*get*/!*: function() {
-    return this.firstName + ' ' + this.surname;
-  }
-});
-
-*!*
-alert(user.fullName); // Вася Петров
-*/!*
-```
-
-Обратим внимание, снаружи `fullName` -- это обычное свойство `user.fullName`. Но дескриптор указывает, что на самом деле его значение возвращается функцией.
-
-Также можно указать функцию, которая используется для записи значения, при помощи дескриптора `set`.
-
-Например, добавим возможность присвоения `user.fullName` к примеру выше:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  surname: "Петров"
-}
-
-Object.defineProperty(user, "fullName", {
-
-  get: function() {
-    return this.firstName + ' ' + this.surname;
-  },
-
-*!*
-  set: function(value) {
-      var split = value.split(' ');
-      this.firstName = split[0];
-      this.surname = split[1];
-    }
-*/!*
-});
-
-*!*
-user.fullName = "Петя Иванов";
-*/!*
-alert( user.firstName ); // Петя 
-alert( user.surname ); // Иванов
-```
-
-## Указание get/set в литералах
-
-Если мы создаём объект при помощи синтаксиса `{ ... }`,  то задать свойства-функции можно прямо в его определении.
-
-Для этого используется особый синтаксис: `get свойство` или `set свойство`. 
-
-Например, ниже объявлен геттер-сеттер `fullName`:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  surname: "Петров",
-
-*!*
-  get fullName() {
-*/!*
-    return this.firstName + ' ' + this.surname;
-  },
-
-*!*
-  set fullName(value) {
-*/!*
-    var split = value.split(' ');
-    this.firstName = split[0];
-    this.surname = split[1];
-  }
-};
-
-*!*
-alert( user.fullName ); // Вася Петров (из геттера)
-
-user.fullName = "Петя Иванов";
-alert( user.firstName ); // Петя  (поставил сеттер)
-alert( user.surname ); // Иванов (поставил сеттер)
-*/!*
-```
-
-## Да здравствуют get/set!
-
-Казалось бы, зачем нам назначать get/set для свойства через всякие хитрые вызовы, когда можно сделать просто функции с самого начала? Например, `getFullName`, `setFullName`...
-
-Конечно, в ряде случаев свойства выглядят короче, такое решение просто может быть красивым. Но основной бонус -- это гибкость, возможность получить контроль над свойством в любой момент!
-
-Например, в начале разработки мы используем обычные свойства, например у `User` будет имя `name` и возраст `age`:
-
-```js
-function User(name, age) {
-  this.name = name;
-  this.age = age;
-}
-
-var pete = new User("Петя", 25);
-
-alert( pete.age ); // 25
-```
-
-С обычными свойствами в коде меньше букв, они удобны, причины использовать функции пока нет.
-
-...Но рано или поздно могут произойти изменения. Например, в `User` может стать более целесообразно вместо возраста `age` хранить дату рождения `birthday`:
-
-```js
-function User(name, birthday) {
-  this.name = name;
-  this.birthday = birthday;
-}
-
-var pete = new User("Петя", new Date(1987, 6, 1));
-```
-
-Что теперь делать со старым кодом, который выводит свойство `age`? 
-
-Можно, конечно, найти все места и поправить их, но это долго, а иногда и невозможно, скажем, если вы взаимодействуете со сторонней библиотекой, код в которой -- чужой и влезать в него нежелательно.
-
-Добавление `get`-функции `age` позволяет обойти проблему легко и непринуждённо:
-
-```js
-//+ run no-beautify
-function User(name, birthday) {
-  this.name = name;
-  this.birthday = birthday;
-
-*!*
-  // age будет высчитывать возраст по birthday
-  Object.defineProperty(this, "age", {
-    get: function() {
-      var todayYear = new Date().getFullYear();
-      return todayYear - this.birthday.getFullYear();
-    }
-  });
-*/!*
-}
-
-var pete = new User("Петя", new Date(1987, 6, 1));
-
-alert( pete.birthday ); // и дата рождения доступна
-alert( pete.age );      // и возраст
-```
-
-Заметим, что `pete.age` снаружи как было свойством, так и осталось. То есть, переписывать внешний код на вызов функции `pete.age()` не нужно.
-
-Таким образом, `defineProperty` позволяет нам начать с обычных свойств, а в будущем, при необходимости, можно в любой момент заменить их на функции, реализующие более сложную логику.
-
-## Другие методы работы со свойствами
-
-<dl>
-<dt>[Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperties)</dt>
-<dd>Позволяет объявить несколько свойств сразу:
-
-```js
-//+ run
-var user = {}
-
-Object.defineProperties(user, {
-*!*
-  firstName: {
-*/!*
-    value: "Петя"
-  },
-
-*!*
-  surname: {
-*/!*
-    value: "Иванов"
-  },
-
-*!*
-  fullName: {
-*/!*
-    get: function() {
-      return this.firstName + ' ' + this.surname;
-    }
-  }
-});
-
-alert( user.fullName ); // Петя Иванов
-```
-
-</dd>
-<dt>[Object.keys(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys), [Object.getOwnPropertyNames(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)</dt>
-<dd>Возвращают массив -- список свойств объекта.
-
-`Object.keys` возвращает только `enumerable`-свойства.
-
-`Object.getOwnPropertyNames` -- возвращает все:
-
-```js
-//+ run
-var obj = {
-  a: 1,
-  b: 2,
-  internal: 3
-};
-
-Object.defineProperty(obj, "internal", {
-  enumerable: false
-});
-
-*!*
-alert( Object.keys(obj) ); // a,b 
-alert( Object.getOwnPropertyNames(obj) ); // a, internal, b
-*/!*
-```
-
-</dd>
-<dt>[Object.getOwnPropertyDescriptor(obj, prop)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)</dt>
-<dd>Возвращает дескриптор для свойства `obj[prop]`.
-
-Полученный дескриптор можно изменить и использовать `defineProperty` для сохранения изменений, например:
-
-```js
-//+ run
-var obj = {
-  test: 5
-};
-*!*
-var descriptor = Object.getOwnPropertyDescriptor(obj, 'test');
-*/!*
-
-*!*
-// заменим value на геттер, для этого...
-*/!*
-delete descriptor.value; // ..нужно убрать value/writable
-delete descriptor.writable;
-descriptor.get = function() { // и поставить get
-  alert( "Preved :)" );
-};
-
-*!*
-// поставим новое свойство вместо старого
-*/!*
-
-// если не удалить - defineProperty объединит старый дескриптор с новым
-delete obj.test;
-
-Object.defineProperty(obj, 'test', descriptor);
-
-obj.test; // Preved :)
-```
-
-</dd>
-</dl>
-
-...И несколько методов, которые используются очень редко:
-<dl>
-<dt>[Object.preventExtensions(obj)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)</dt>
-<dd>Запрещает добавление свойств в объект.</dd>
-<dt>[Object.seal(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/seal)</dt>
-<dd>Запрещает добавление и удаление свойств, все текущие свойства делает `configurable: false`.</dd>
-<dt>[Object.freeze(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze)</dt>
-<dd>Запрещает добавление, удаление и изменение свойств, все текущие свойства делает `configurable: false, writable: false`.</dd>
-<dt>[Object.isExtensible(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isExtensible), [Object.isSealed(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isSealed), [Object.isFrozen(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isFrozen)</dt>
-<dd>Возвращают `true`, если на объекте были вызваны методы `Object.preventExtensions/seal/freeze`.</dd>
-</dl>
-
diff --git a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/solution.js b/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/solution.js
deleted file mode 100644
index 03b48506..00000000
--- a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function Article() {
-  this.created = new Date;
-
-  Article.count++; // увеличиваем счетчик при каждом вызове
-  Article.last = this.created; // и запоминаем дату
-}
-Article.count = 0; // начальное значение 
-
-Article.showStats = function() {
-  alert('Всего: ' + this.count + ', Последняя: ' + this.last);
-};
\ No newline at end of file
diff --git a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/test.js b/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/test.js
deleted file mode 100644
index 7bf37039..00000000
--- a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/_js.view/test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-describe("Article.showStats", function() {
-  before(function() {
-    sinon.stub(window, "alert");
-    this.clock = sinon.useFakeTimers();
-  });
-
-  after(function() {
-    window.alert.restore();
-    this.clock.restore();
-  });
-
-  it("Выводит число статей и дату создания последней", function() {
-    new Article();
-    this.clock.tick(100);
-    new Article();
-    Article.showStats();
-
-    assert(alert.calledWith('Всего: 2, Последняя: ' + new Date()));
-  });
-
-  it("и ещё одна статья...", function() {
-    this.clock.tick(100);
-    new Article();
-    Article.showStats();
-
-    assert(alert.calledWith('Всего: 3, Последняя: ' + new Date()));
-  });
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/solution.md b/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/solution.md
deleted file mode 100644
index 45ce7d39..00000000
--- a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Решение (как вариант):
-
-```js
-//+ run
-function Article() {
-  this.created = new Date;
-
-*!*
-  Article.count++; // увеличиваем счетчик при каждом вызове
-  Article.last = this.created; // и запоминаем дату
-*/!*
-}
-Article.count = 0; // начальное значение 
-// (нельзя оставить undefined, т.к. Article.count++ будет NaN)
-
-Article.showStats = function() {
-  alert( 'Всего: ' + this.count + ', Последняя: ' + this.last );
-};
-
-new Article();
-new Article();
-
-Article.showStats(); // Всего: 2, Последняя: (дата)
-
-new Article();
-
-Article.showStats(); // Всего: 3, Последняя: (дата)
-```
-
diff --git a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/task.md b/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/task.md
deleted file mode 100644
index 513ed072..00000000
--- a/1-js/6-objects-more/5-static-properties-and-methods/1-objects-counter/task.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Счетчик объектов
-
-[importance 5]
-
-Добавить в конструктор `Article`:
-<ul>
-<li>Подсчёт общего количества созданных объектов.</li>
-<li>Запоминание даты последнего созданного объекта.</li>
-</ul>
-Используйте для этого статические свойства.
-
-Пусть вызов `Article.showStats()` выводит то и другое.
-
-Использование:
-
-```js
-function Article() {
-  this.created = new Date();
-*!*
-  // ... ваш код ...
-*/!*
-}
-
-new Article();
-new Article();
-
-Article.showStats(); // Всего: 2, Последняя: (дата)
-
-new Article();
-
-Article.showStats(); // Всего: 3, Последняя: (дата)
-```
-
diff --git a/1-js/6-objects-more/5-static-properties-and-methods/article.md b/1-js/6-objects-more/5-static-properties-and-methods/article.md
deleted file mode 100644
index 3595a734..00000000
--- a/1-js/6-objects-more/5-static-properties-and-methods/article.md
+++ /dev/null
@@ -1,255 +0,0 @@
-# Статические и фабричные методы
-
-Методы и свойства, которые не привязаны к конкретному экземпляру объекта, называют "статическими". Их записывают прямо в саму функцию-конструктор.
-
-[cut]
-
-## Статические свойства 
-
-В коде ниже используются статические свойства `Article.count` и `Article.DEFAULT_FORMAT`:
-
-```js
-function Article() {
-  Article.count++;
-}
-
-Article.count = 0; // статическое свойство-переменная
-Article.DEFAULT_FORMAT = "html"; // статическое свойство-константа
-```
-
-Они хранят данные, специфичные не для одного объекта, а для всех статей целиком. 
-
-Как правило, это чаще константы, такие как формат "по умолчанию" `Article.DEFAULT_FORMAT`.
-
-## Статические методы
-
-С примерами статических методов мы уже знакомы: это встроенные методы [String.fromCharCode](http://javascript.ru/String.fromCharCode), [Date.parse](http://javascript.ru/Date.parse).
-
-Создадим для `Article` статический метод `Article.showCount()`:
-
-```js
-//+ run
-function Article() {
-  Article.count++;
-
-  //...
-}
-Article.count = 0;
-
-Article.showCount = function() {
-*!*
-  alert( this.count ); // (1)
-*/!*
-}
-
-// использование
-new Article();
-new Article();
-Article.showCount(); // (2)
-```
-
-Здесь `Article.count` -- статическое свойство, а `Article.showCount` -- статический метод.
-
-Обратим внимание на использование `this` в примере выше. Несмотря на то, что переменная и метод -- статические, он всё ещё полезен. В строке `(1)` он равен `Article`.
-
-## Пример: сравнение объектов
-
-Ещё один хороший способ применения -- сравнение объектов.
-
-Например, у нас есть объект `Journal` для журналов. Журналы можно сравнивать -- по толщине, по весу, по другим параметрам. 
-
-Объявим "стандартную" функцию сравнения, которая будет сравнивать по дате издания. Эта функция сравнения, естественно, не привязана к конкретному журналу, но относится к журналам вообще.
-
-Поэтому зададим её как статический метод `Journal.compare`:
-
-```js
-function Journal(date) {
-  this.date = date;
-  // ...
-}
-
-// возвращает значение, большее 0, если A больше B, иначе меньшее 0
-Journal.compare = function(journalA, journalB) {
-  return journalA.date - journalB.date;
-};
-```
-
-В примере ниже эта функция используется для поиска самого раннего журнала из массива:
-
-```js
-//+ run
-function Journal(date) {
-  this.date = date;
-
-  this.formatDate = function(date) {
-    return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear();
-  };
-
-  this.getTitle = function() {
-    return "Выпуск от " + this.formatDate(this.date);
-  };
-
-}
-
-*!*
-Journal.compare = function(journalA, journalB) {
-  return journalA.date - journalB.date;
-};
-*/!*
-
-// использование:
-var journals = [
-  new Journal(new Date(2012, 1, 1)),
-  new Journal(new Date(2012, 0, 1)),
-  new Journal(new Date(2011, 11, 1))
-];
-
-function findMin(journals) {
-  var min = 0;
-  for (var i = 0; i < journals.length; i++) {
-*!*
-    // используем статический метод
-    if (Journal.compare(journals[min], journals[i]) > 0) min = i;
-*/!*
-  }
-  return journals[min];
-}
-
-alert( findMin(journals).getTitle() );
-```
-
-**Статический метод также можно использовать для функций, которые вообще не требуют наличия объекта.**
-
-Например, метод `formatDate(date)` можно сделать статическим. Он будет форматировать дату "как это принято в журналах", при этом его можно использовать в любом месте кода, не обязательно создавать журнал.
-
-Например:
-
-```js
-//+ run
-function Journal() { /*...*/ }
-
-Journal.formatDate = function(date) {
-  return date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear();
-}
-
-// ни одного объекта Journal нет, просто форматируем дату
-alert( *!*Journal.formatDate(new Date)*/!* );
-```
-
-## Фабричные методы
-
-Рассмотрим ситуацию, когда объект нужно создавать различными способами. Например, это реализовано во встроенном объекте [Date](/datetime). Он по-разному обрабатывает аргументы разных типов:
-
-<ul>
-<li>`new Date()` -- создаёт объект с текущей датой,</li>
-<li>`new Date(milliseconds)` -- создаёт дату по количеству миллисекунд `milliseconds`,</li>
-<li>`new Date(year, month, day ...)` -- создаёт дату по компонентам год, месяц, день...</li>
-<li>`new Date(datestring)` -- читает дату из строки `datestring`</li>
-</ul>
-
-**"Фабричный статический метод" -- удобная альтернатива такому конструктору. Так называется статический метод, который служит для создания новых объектов (поэтому и называется "фабричным").**
-
-Пример встроенного фабричного метода -- [String.fromCharCode(code)](http://javascript.ru/String.fromCharCode). Этот метод создает строку из кода символа:
-
-```js
-//+ run
-var str = String.fromCharCode(65);
-alert( str ); // 'A'
-```
-
-Но строки -- слишком простой пример, посмотрим что-нибудь посложнее.
-
-Допустим, нам нужно создавать объекты `User`: анонимные `new User()` и с данными `new User({name: 'Вася', age: 25})`.
-
-Можно, конечно, создать полиморфную функцию-конструктор `User`:
-
-```js
-//+ run
-function User(userData) {
-  if (userData) { // если указаны данные -- одна ветка if
-    this.name = userData.name;
-    this.age = userData.age;
-  } else { // если не указаны -- другая
-    this.name = 'Аноним';
-  }
-
-  this.sayHi = function() {
-    alert(this.name)
-  };
-  // ...
-}
-
-// Использование
-
-var guest = new User();
-guest.sayHi(); // Аноним
-
-var knownUser = new User({
-  name: 'Вася',
-  age: 25
-});
-knownUser.sayHi(); // Вася
-```
-
-Подход с использованием фабричных методов был бы другим. Вместо разбора параметров в конструкторе -- делаем два метода: `User.createAnonymous` и `User.createFromData`. 
-
-Код:
-
-```js
-//+ run
-function User() {
-  this.sayHi = function() {
-    alert(this.name)
-  };
-}
-
-User.createAnonymous = function() {
-  var user = new User;
-  user.name = 'Аноним';
-  return user;
-}
-
-User.createFromData = function(userData) {
-  var user = new User;
-  user.name = userData.name;
-  user.age = userData.age;
-  return user;
-}
-
-// Использование
-
-*!*
-var guest = User.createAnonymous();
-guest.sayHi(); // Аноним
-
-var knownUser = User.createFromData({
-  name: 'Вася',
-  age: 25
-});
-knownUser.sayHi(); // Вася
-*/!*
-```
-
-Преимущества использования фабричных методов:
-
-[compare]
-+Лучшая читаемость кода. Как конструктора -- вместо одной большой функции несколько маленьких, так и вызывающего кода -- явно видно, что именно создаётся.
-+Лучший контроль ошибок, т.к. если в `createFromData` ничего не передали, то будет ошибка, а полиморфный конструктор создал бы анонимного посетителя.
-+Удобная расширяемость. Например, нужно добавить создание администратора, без аргументов. Фабричный метод сделать легко: `User.createAdmin = function() { ... }`. А для  полиморфного конструктора вызов без аргумента создаст анонима, так что нужно добавить параметр -- "тип посетителя" и усложнить этим код.
-[/compare]
-
-**Поэтому полиморфные конструкторы лучше использовать там, где нужна именно полиморфность**, т.е. когда непонятно, какого типа аргумент передадут, и хочется в одном конструкторе охватить все варианты. 
-
-А в остальных случаях отличная альтернатива -- фабричные методы.
-
-## Итого
-
-Статические свойства и методы объекта удобно применять в следующих случаях:
-
-<ul>
-<li>Общие действия и подсчёты, имеющие отношения ко всем объектам данного типа. В примерах выше это подсчёт количества.</li>
-<li>Методы, не привязанные к конкретному объекту, например сравнение.</li>
-<li>Вспомогательные методы, которые полезны вне объекта, например для форматирования даты.</li>
-<li>Фабричные методы.</li>
-</ul>
-
diff --git a/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/solution.md b/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/solution.md
deleted file mode 100644
index 9e5ca007..00000000
--- a/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/solution.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Первый вариант
-
-```js
-//+ run
-function sumArgs() {
-  // скопируем reduce из массива
-  arguments.reduce = [].reduce;
-  return arguments.reduce(function(a, b) {
-    return a + b;
-  });
-}
-
-alert( sumArgs(4, 5, 6) ); // 15
-```
-
-# Второй вариант
-
-Метод `call` здесь вполне подойдёт, так как требуется вызвать `reduce` в контексте `arguments` с одним аргументом.
-
-```js
-//+ run
-function sumArgs() {
-  // запустим reduce из массива напрямую
-  return [].reduce.call(arguments, function(a, b) {
-    return a + b;
-  });
-}
-
-alert( sumArgs(4, 5, 6) ); // 15
-```
-
diff --git a/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/task.md b/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/task.md
deleted file mode 100644
index b03a9fc7..00000000
--- a/1-js/6-objects-more/6-call-apply/1-rewrite-sum-arguments/task.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Перепишите суммирование аргументов
-
-[importance 5]
-
-Есть функция `sum`, которая суммирует все элементы массива:
-
-```js
-//+ run
-function sum(arr) {
-  return arr.reduce(function(a, b) {
-    return a + b;
-  });
-}
-
-alert( sum([1, 2, 3]) ); // 6 (=1+2+3)
-```
-
-Создайте аналогичную функцию `sumArgs()`, которая будет суммировать все свои аргументы:
-
-```js
-function sumArgs() {
-  /* ваш код */
-}
-
-alert( sumArgs(1, 2, 3) ); // 6, аргументы переданы через запятую, без массива
-```
-
-Для решения примените метод `reduce` к `arguments`, используя `call`, `apply` или одалживание метода.
-
-P.S. Функция `sum` вам не понадобится, она приведена в качестве примера использования `reduce` для похожей задачи.
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js b/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js
deleted file mode 100644
index b49aeb62..00000000
--- a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function applyAll(func) {
-  return func.apply(this, [].slice.call(arguments, 1));
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/test.js b/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/test.js
deleted file mode 100644
index 871a19a7..00000000
--- a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/_js.view/test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe("applyAll", function() {
-
-  it("применяет функцию ко всем аргументам, начиная со 2го", function() {
-    var min = applyAll(Math.min, 1, 2, 3);
-    assert.equal(min, 1);
-  });
-
-  it("при отсутствии аргументов просто вызывает функцию", function() {
-    var spy = sinon.spy();
-    applyAll(spy);
-    assert(spy.calledOnce);
-    assert.equal(spy.firstCall.args.length, 0);
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/solution.md b/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/solution.md
deleted file mode 100644
index c8579b0a..00000000
--- a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-```js
-//+ run
-function sum() {
-  return [].reduce.call(arguments, function(a, b) {
-    return a + b;
-  });
-}
-
-function mul() {
-  return [].reduce.call(arguments, function(a, b) {
-    return a * b;
-  });
-}
-
-*!*
-function applyAll(func) {
-    return func.apply(this, [].slice.call(arguments, 1));
-  }
-*/!*
-
-alert( applyAll(sum, 1, 2, 3) ); // 6
-alert( applyAll(mul, 2, 3, 4) ); // 24
-alert( applyAll(Math.max, 2, -2, 3) ); // 3
-alert( applyAll(Math.min, 2, -2, 3) ); // -2
-```
-
diff --git a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/task.md b/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/task.md
deleted file mode 100644
index 95bd2413..00000000
--- a/1-js/6-objects-more/6-call-apply/2-apply-function-skip-first-argument/task.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Примените функцию к аргументам
-
-[importance 5]
-
-Напишите функцию `applyAll(func, arg1, arg2...)`, которая получает функцию `func` и произвольное количество аргументов. 
-
-Она должна вызвать `func(arg1, arg2...)`, то есть передать в `func` все аргументы, начиная со второго, и возвратить результат. 
-
-Например:
-
-```js
-// Применить Math.max к аргументам 2, -2, 3
-alert( applyAll(Math.max, 2, -2, 3) ); // 3
-
-// Применить Math.min к аргументам 2, -2, 3
-alert( applyAll(Math.min, 2, -2, 3) ); // -2
-```
-
-Область применения `applyAll`, конечно, шире, можно вызывать её и со своими функциями:
-
-```js
-//+ run
-function sum() { // суммирует аргументы: sum(1,2,3) = 6
-  return [].reduce.call(arguments, function(a, b) {
-    return a + b;
-  });
-}
-
-function mul() { // перемножает аргументы: mul(2,3,4) = 24
-  return [].reduce.call(arguments, function(a, b) {
-    return a * b;
-  });
-}
-
-*!*
-alert( applyAll(sum, 1, 2, 3) ); // -> sum(1, 2, 3) = 6
-alert( applyAll(mul, 2, 3, 4) ); // -> mul(2, 3, 4) = 24
-*/!*
-```
-
diff --git a/1-js/6-objects-more/6-call-apply/article.md b/1-js/6-objects-more/6-call-apply/article.md
deleted file mode 100644
index 08f9f386..00000000
--- a/1-js/6-objects-more/6-call-apply/article.md
+++ /dev/null
@@ -1,311 +0,0 @@
-# Явное указание this: "call", "apply"
-
-Итак, мы знаем, что `this` -- это текущий объект при вызове "через точку" и новый объект при конструировании через `new`.
-
-В этой главе наша цель получить окончательное и полное понимание `this` в JavaScript. Для этого не хватает всего одного элемента: способа явно указать `this` при помощи методов `call` и `apply`.
-
-[cut]
-
-## Метод call   
-
-Синтаксис метода `call`:
-
-```js
-func.call(context, arg1, arg2, ...)
-```
-
-При этом вызывается функция `func`, первый аргумент `call` становится её `this`, а остальные передаются "как есть".
-
-**Вызов `func.call(context, a, b...)` -- то же, что обычный вызов  `func(a, b...)`, но с явно указанным `this(=context)`.**
-
-Например, у нас есть функция `showFullName`, которая  работает с `this`:
-
-```js
-function showFullName() {
-  alert( this.firstName + " " + this.lastName );
-}
-```
-
-Пока объекта нет, но это нормально, ведь JavaScript позволяет использовать `this` везде. Любая функция может в своём коде упомянуть `this`, каким будет это значение -- выяснится в момент запуска.
-
-Вызов `showFullName.call(user)` запустит функцию, установив `this = user`, вот так:
-
-```js
-//+ run
-function showFullName() {
-  alert( this.firstName + " " + this.lastName );
-}
-
-var user = {
-  firstName: "Василий",
-  lastName: "Петров"
-};
-
-*!*
-// функция вызовется с this=user
-showFullName.call(user) // "Василий Петров"
-*/!*
-```
-
-После контекста в `call` можно передать аргументы для функции. Вот пример с более сложным вариантом `showFullName`, который конструирует ответ из указанных свойств объекта:
-
-```js
-//+ run
-var user = {
-  firstName: "Василий",
-  surname: "Петров",
-  patronym: "Иванович"
-};
-
-function showFullName(firstPart, lastPart) {
-  alert( this[firstPart] + " " + this[lastPart] );
-}
-
-*!*
-// f.call(контекст, аргумент1, аргумент2, ...)
-showFullName.call(user, 'firstName', 'surname') // "Василий Петров"
-showFullName.call(user, 'firstName', 'patronym') // "Василий Иванович"
-*/!*
-```
-
-## "Одалживание метода"
-
-При помощи `call` можно легко взять метод одного объекта, в том числе встроенного, и вызвать в контексте другого. 
-
-Это называется "одалживание метода" (на англ. *method borrowing*).
-
-**Используем эту технику для упрощения манипуляций с `arguments`.**
-
-Как мы знаем, `arguments` не массив, а обычный объект, поэтому таких полезных методов как `push`, `pop`, `join` и других у него нет. Но иногда так хочется, чтобы были...
-
-Нет ничего проще! Давайте скопируем метод `join` из обычного массива:
-
-```js
-//+ run
-function printArgs() {
-  arguments.join = [].join; // одолжили метод (1)
-
-  var argStr = arguments.join(':'); // (2)
-
-  alert( argStr ); // сработает и выведет 1:2:3
-}
-
-printArgs(1, 2, 3);
-```
-
-<ol>
-<li>В строке `(1)` объявлен пустой массив `[]` и скопирован его метод `[].join`. Обратим внимание, мы не вызываем его, а просто копируем. Функция, в том числе встроенная -- обычное значение, мы можем скопировать любое свойство любого объекта, и `[].join` здесь не исключение. </li>
-<li>В строке `(2)` запустили `join` в контексте `arguments`, как будто он всегда там был.</li>
-
-[smart header="Почему вызов сработает?"]
-
-Здесь метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/join">join</a> массива скопирован и вызван в контексте `arguments`. Не произойдёт ли что-то плохое от того, что `arguments` -- не массив? Почему он, вообще, сработал?
-
-Ответ на эти вопросы простой. В соответствии [со спецификацией](http://es5.github.com/x15.4.html#x15.4.4.5), внутри `join` реализован примерно так:
-
-```js
-function join(separator) {
-  if (!this.length) return '';
-
-  var str = this[0];
-
-  for (var i = 1; i < this.length; i++) {
-    str += separator + this[i];
-  }
-
-  return str;
-}
-```
-
-Как видно, используется `this`, числовые индексы и свойство `length`. Если эти свойства есть, то все в порядке. А больше ничего и не нужно. 
-
-В качестве `this` подойдёт даже обычный объект:
-
-```js
-//+ run
-var obj = { // обычный объект с числовыми индексами и length
-  0: "А",
-  1: "Б",
-  2: "В",
-  length: 3
-};
-
-*!*
-obj.join = [].join;
-alert( obj.join(';') ); // "A;Б;В"
-*/!*
-```
-
-[/smart]
-
-...Однако, копирование метода из одного объекта в другой не всегда приемлемо!
-
-Представим на минуту, что вместо `arguments` у нас -- произвольный объект. У него тоже есть числовые индексы, `length` и мы хотим вызвать в его контексте метод `[].join`. То есть, ситуация похожа на `arguments`, но (!) вполне возможно, что у объекта есть *свой* метод `join`. 
-
-Поэтому копировать `[].join`, как сделано выше, нельзя: если он перезапишет собственный `join` объекта, то будет страшный бардак и путаница.
-
-Безопасно вызвать метод нам поможет `call`:
-
-```js
-//+ run
-function printArgs() {
-  var join = [].join; // скопируем ссылку на функцию в переменную
-
-*!*
-  // вызовем join с this=arguments,
-  // этот вызов эквивалентен arguments.join(':') из примера выше
-  var argStr = join.call(arguments, ':');
-*/!*
-
-  alert( argStr ); // сработает и выведет 1:2:3
-}
-
-printArgs(1, 2, 3);
-```
-
-Мы вызвали метод без копирования. Чисто, безопасно. 
-
-## Ещё пример: [].slice.call(arguments)
-
-В JavaScript есть очень простой способ сделать из `arguments` настоящий массив. Для этого возьмём метод массива: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/slice">slice</a>. 
-
-По стандарту вызов `arr.slice(start, end)` создаёт новый массив и копирует в него элементы массива `arr` от `start` до `end`. А если `start` и `end` не указаны, то копирует весь массив. 
-
-Вызовем его в контексте `arguments`:
-
-```js
-//+ run
-function printArgs() {
-  // вызов arr.slice() скопирует все элементы из this в новый массив
-*!*
-  var args = [].slice.call(arguments);
-*/!*
-  alert( args.join(', ') ); // args - полноценный массив из аргументов
-}
-
-printArgs('Привет', 'мой', 'мир'); // Привет, мой, мир
-```
-
-Как и в случае с `join`, такой вызов технически возможен потому, что `slice` для работы требует только нумерованные свойства и `length`. Всё это в `arguments` есть.
-
-## Метод apply   
-
-Если нам неизвестно, с каким количеством аргументов понадобится вызвать функцию, можно использовать более мощный метод: `apply`.
-
-**Вызов функции при помощи `func.apply` работает аналогично `func.call`, но принимает массив аргументов вместо списка.**
-
-```js
-func.call(context, arg1, arg2);
-// идентичен вызову
-func.apply(context, [arg1, arg2]);
-```
-
-В частности, эти две строчки cработают одинаково:
-
-```js
-showFullName.call(user, 'firstName', 'surname');
-
-showFullName.apply(user, ['firstName', 'surname']);
-```
-
-Преимущество `apply` перед `call` отчётливо видно, когда мы формируем массив аргументов динамически.
-
-Например, в JavaScript есть встроенная функция `Math.max(a, b, c...)`, которая возвращает максимальное значение из аргументов:
-
-```js
-//+ run
-alert( Math.max(1, 5, 2) ); // 5
-```
-
-При помощи `apply` мы могли бы найти максимум в произвольном массиве, вот так:
-
-```js
-//+ run
-var arr = [];
-arr.push(1);
-arr.push(5);
-arr.push(2);
-
-// получить максимум из элементов arr
-alert( Math.max.apply(null, arr) ); // 5
-```
-
-В примере выше мы передали аргументы через массив -- второй параметр `apply`... Но вы, наверное, заметили небольшую странность? В качестве контекста `this` был передан `null`. 
-
-Строго говоря, полным эквивалентом вызову `Math.max(1,2,3)` был бы вызов `Math.max.apply(Math, [1,2,3])`. В обоих этих вызовах контекстом будет объект `Math`.
-
-Но в данном случае в качестве контекста можно передавать что угодно, поскольку в своей внутренней реализации метод `Math.max` не использует `this`. Действительно, зачем `this`, если нужно всего лишь выбрать максимальный из аргументов? Вот так, при помощи `apply` мы получили короткий и элегантный способ вычислить максимальное значение в массиве!
-
-[smart header="Вызов `call/apply` с `null` или `undefined`"]
-
-В современном стандарте `call/apply` передают `this` "как есть". А в старом, без `use strict`, при указании первого аргумента `null` или `undefined` в `call/apply`, функция получает `this = window`, например:
-
-Современный стандарт:
-```js
-//+ run
-function f() {
-  "use strict";
-*!*
-  alert( this ); // null
-*/!*
-}
-
-f.call(null);
-```
-
-Без `use strict`:
-
-```js
-//+ run
-function f() {
-  alert( this ); // window
-}
-
-f.call(null);
-```
-
-[/smart]
-
-## Итого про this
-
-Значение `this` устанавливается в зависимости от того, как вызвана функция:
-
-<dl>
-<dt>При вызове функции как метода</dt>
-<dd>
-
-```js
-//+ no-beautify
-obj.func(...)    // this = obj
-obj["func"](...)
-```
-
-</dd>
-<dt>При обычном вызове</dt>
-<dd>
-
-```js
-func(...) // this = window (ES3) /undefined (ES5)
-```
-
-</dd>
-<dt>В `new`</dt>
-<dd>
-
-```js
-new func() // this = {} (новый объект)
-```
-
-</dd>
-<dt>Явное указание</dt>
-<dd>
-
-```js
-func.apply(context, args) // this = context (явная передача)
-func.call(context, arg1, arg2, ...)
-```
-
-</dd>
-</dl>
-
-
diff --git a/1-js/6-objects-more/7-bind/1-cross-browser-bind/solution.md b/1-js/6-objects-more/7-bind/1-cross-browser-bind/solution.md
deleted file mode 100644
index 28b52dcb..00000000
--- a/1-js/6-objects-more/7-bind/1-cross-browser-bind/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-
-Страшновато выглядит, да? Работает так (по строкам):
-<ol>
-<li>Вызов `bind` сохраняет дополнительные аргументы `args` (они идут со 2го номера) в массив `bindArgs`.</li>
-<li>... и возвращает обертку `wrapper`.</li>
-<li>Эта обёртка делает из `arguments` массив `args` и затем, используя метод [concat](http://javascript.ru/Array/concat), прибавляет их к аргументам `bindArgs` (карринг).</li>
-<li>Затем передаёт вызов `func` с контекстом и общим массивом аргументов.</li>
-</ol>
diff --git a/1-js/6-objects-more/7-bind/1-cross-browser-bind/task.md b/1-js/6-objects-more/7-bind/1-cross-browser-bind/task.md
deleted file mode 100644
index ce481712..00000000
--- a/1-js/6-objects-more/7-bind/1-cross-browser-bind/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Кросс-браузерная эмуляция bind
-
-[importance 3]
-
-Если вы вдруг захотите копнуть поглубже -- аналог `bind` для IE8- и старых версий других браузеров будет выглядеть следующим образом:
-
-```js
-//+ no-beautify
-function bind(func, context /*, args*/) {
-  var bindArgs = [].slice.call(arguments, 2); // (1)
-  function wrapper() {                        // (2)
-    var args = [].slice.call(arguments); 
-    var unshiftArgs = bindArgs.concat(args);  // (3)
-    return func.apply(context, unshiftArgs);  // (4)
-  }
-  return wrapper;
-}
-```
-
-Использование -- вместо `mul.bind(null, 2)` вызывать `bind(mul, null, 2)`.
-
-Не факт, что он вам понадобится, но в качестве упражнение попробуйте разобраться, как это работает.
-
diff --git a/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/solution.md b/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/solution.md
deleted file mode 100644
index ccd6ca0c..00000000
--- a/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-Ответ: `Hello`.
-
-```js
-//+ run
-function f() {
-  alert( this );
-}
-
-var user = {
-  g: f.bind("Hello")
-}
-
-user.g();
-```
-
-Так как вызов идёт в контексте объекта `user.g()`, то внутри функции `g` контекст `this = user`.
-
-Однако, функции `g` совершенно без разницы, какой `this` она получила.
-
-Её единственное предназначение -- это передать вызов в `f` вместе с аргументами и ранее указанным контекстом `"Hello"`, что она и делает.
-
-Эта задача демонстрирует, что изменить однажды привязанный контекст уже нельзя.
\ No newline at end of file
diff --git a/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/task.md b/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/task.md
deleted file mode 100644
index a189eeb3..00000000
--- a/1-js/6-objects-more/7-bind/2-write-to-object-after-bind/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Запись в объект после bind
-
-[importance 5]
-
-Что выведет функция?
-
-```js
-function f() {
-  alert( this );
-}
-
-var user = {
-  g: f.bind("Hello")
-}
-
-user.g();
-```
-
diff --git a/1-js/6-objects-more/7-bind/3-second-bind/solution.md b/1-js/6-objects-more/7-bind/3-second-bind/solution.md
deleted file mode 100644
index 2a8b26d8..00000000
--- a/1-js/6-objects-more/7-bind/3-second-bind/solution.md
+++ /dev/null
@@ -1,58 +0,0 @@
-Ответ: `"Вася"`.
-
-```js
-//+ run no-beautify
-function f() {
-  alert(this.name);
-}
-
-f = f.bind( {name: "Вася"} ).bind( {name: "Петя"} );
-
-f(); // Вася
-```
-
-Первый вызов `f.bind(..Вася..)` возвращает "обёртку", которая устанавливает контекст для `f` и передаёт вызов `f`.
-
-Следующий вызов `bind` будет устанавливать контекст уже для этой обёртки. Это ни на что не повлияет.
-
-Чтобы это проще понять, используем наш собственный вариант `bind` вместо встроенного:
-
-```js
-function bind(func, context) {
-  return function() {
-    return func.apply(context, arguments);
-  };
-}
-```
-
-Код станет таким:
-
-```js
-//+ no-beautify
-function f() {
-  alert(this.name);
-}
-
-f = bind(f, {name: "Вася"} ); // (1)
-f = bind(f, {name: "Петя"} ); // (2)
-
-f(); // Вася
-```
-
-Здесь видно, что первый вызов `bind`, в строке `(1)`, возвращает обёртку вокруг `f`, которая выглядит так (выделена):
-
-```js
-function bind(func, context) {
-*!*
-  return function() {
-    // здесь this не используется
-    return func.apply(context, arguments);
-  };
-*/!*
-}
-```
-
-В этой обёртке нигде не используется `this`, контекст `context` берётся из замыкания. Посмотрите на код, там нигде нет `this`.
-
-Поэтому следующий `bind` в строке `(2)`, который выполняется уже над обёрткой и фиксирует в ней `this`, ни на что не влияет. Какая разница, что будет в качестве `this` в функции, которая этот `this` не использует? Контекст `context`, как видно в коде выше, она получает через замыкание из аргументов первого `bind`.
-
diff --git a/1-js/6-objects-more/7-bind/3-second-bind/task.md b/1-js/6-objects-more/7-bind/3-second-bind/task.md
deleted file mode 100644
index 3b0f06b2..00000000
--- a/1-js/6-objects-more/7-bind/3-second-bind/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Повторный bind
-
-[importance 5]
-
-Что выведет этот код?
-
-```js
-//+ no-beautify
-function f() {
-  alert(this.name);
-}
-
-f = f.bind( {name: "Вася"} ).bind( {name: "Петя" } );
-
-f();
-```
-
diff --git a/1-js/6-objects-more/7-bind/4-function-property-after-bind/solution.md b/1-js/6-objects-more/7-bind/4-function-property-after-bind/solution.md
deleted file mode 100644
index a882a35e..00000000
--- a/1-js/6-objects-more/7-bind/4-function-property-after-bind/solution.md
+++ /dev/null
@@ -1,4 +0,0 @@
-Ответ: `undefined`.
-
-Результатом работы `bind` является функция-обёртка над `sayHi`. Эта функция -- самостоятельный объект, у неё уже нет свойства `test`.
-
diff --git a/1-js/6-objects-more/7-bind/4-function-property-after-bind/task.md b/1-js/6-objects-more/7-bind/4-function-property-after-bind/task.md
deleted file mode 100644
index b182b4e5..00000000
--- a/1-js/6-objects-more/7-bind/4-function-property-after-bind/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Свойство функции после bind
-
-[importance 5]
-
-В свойство функции записано значение. Изменится ли оно после применения `bind`? Обоснуйте ответ.
-
-```js
-function sayHi() {
-  alert( this.name );
-}
-sayHi.test = 5;
-alert( sayHi.test ); // 5
-
-*!*
-var bound = sayHi.bind({
-  name: "Вася"
-});
-
-alert( bound.test ); // что выведет? почему?
-*/!*
-```
-
diff --git a/1-js/6-objects-more/7-bind/5-question-use-bind/solution.md b/1-js/6-objects-more/7-bind/5-question-use-bind/solution.md
deleted file mode 100644
index 7eb5963e..00000000
--- a/1-js/6-objects-more/7-bind/5-question-use-bind/solution.md
+++ /dev/null
@@ -1,110 +0,0 @@
-# Решение с bind
-
-Ошибка происходит потому, что `ask` получает только функцию, без объекта-контекста. 
-
-Используем `bind`, чтобы передать в `ask` функцию с уже привязанным контекстом:
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  loginOk: function() {
-    alert( this.login + ' вошёл в сайт' );
-  },
-
-  loginFail: function() {
-    alert( this.login + ': ошибка входа' );
-  },
-
-  checkPassword: function() {
-*!*
-    ask("Ваш пароль?", this.password, this.loginOk.bind(this), this.loginFail.bind(this));
-*/!*
-  }
-};
-
-var vasya = user;
-user = null;
-vasya.checkPassword();
-```
-
-# Решение через замыкание
-
-Альтернативное решение -- сделать функции-обёртки над `user.loginOk/loginFail`:
-
-```js
-//+ no-beautify
-var user = {
-  ...
-  checkPassword: function() {
-*!*
-    ask("Ваш пароль?", this.password, 
-      function() { user.loginOk(); }, function() { user.loginFail(); });
-*/!*
-  }
-}
-```
-
-...Но такой код использует переменную `user`, так что если объект переместить из неё, к примеру, так, то работать он не будет:
-
-```js
-var vasya = user; // переместим user в vasya
-user = null;
-vasya.checkPassword(); // упс будет ошибка, ведь в коде объекта остался user
-```
-
-Для того, чтобы избежать проблем, можно использовать `this`. Внутри `checkPassword` он всегда будет равен текущему объекту, так что скопируем его в переменную, которую назовём `self`:
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  loginOk: function() {
-    alert( this.login + ' вошёл в сайт' );
-  },
-
-  loginFail: function() {
-    alert( this.login + ': ошибка входа' );
-  },
-
-  checkPassword: function() {
-*!*
-    var self = this;
-    ask("Ваш пароль?", this.password,
-      function() {
-        self.loginOk();
-      },
-      function() {
-        self.loginFail();
-      }
-    );
-*/!*
-  }
-};
-
-var vasya = user;
-user = null;
-vasya.checkPassword();
-```
-
-Теперь всё работает. Анонимные функции достают правильный контекст из замыкания, где он сохранён в переменной `self`.
\ No newline at end of file
diff --git a/1-js/6-objects-more/7-bind/5-question-use-bind/task.md b/1-js/6-objects-more/7-bind/5-question-use-bind/task.md
deleted file mode 100644
index a36bb858..00000000
--- a/1-js/6-objects-more/7-bind/5-question-use-bind/task.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Использование функции вопросов
-
-[importance 5]
-
-Вызов `user.checkPassword()` в коде ниже должен, при помощи `ask`, спрашивать пароль и вызывать `loginOk/loginFail` в зависимости от правильности ответа. 
-
-Однако, его вызов приводит к ошибке. Почему? 
-
-Исправьте выделенную строку, чтобы всё работало (других строк изменять не надо).
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  loginOk: function() {
-    alert( this.login + ' вошёл в сайт' );
-  },
-
-  loginFail: function() {
-    alert( this.login + ': ошибка входа' );
-  },
-
-  checkPassword: function() {
-*!*
-    ask("Ваш пароль?", this.password, this.loginOk, this.loginFail);
-*/!*
-  }
-};
-
-user.checkPassword();
-```
-
-P.S. Ваше решение должно также срабатывать, если переменная `user` будет перезаписана, например вместо `user.checkPassword()` в конце будут строки:
-
-```js
-var vasya = user;
-user = null;
-vasya.checkPassword();
-```
-
diff --git a/1-js/6-objects-more/7-bind/6-ask-currying/solution.md b/1-js/6-objects-more/7-bind/6-ask-currying/solution.md
deleted file mode 100644
index 86877551..00000000
--- a/1-js/6-objects-more/7-bind/6-ask-currying/solution.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Решение с bind
-
-Первое решение -- передать в `ask` функции с привязанным контекстом и аргументами.
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  loginDone: function(result) {
-    alert( this.login + (result ? ' вошёл в сайт' : ' ошибка входа') );
-  },
-
-  checkPassword: function() {
-*!*
-    ask("Ваш пароль?", this.password, this.loginDone.bind(this, true), this.loginDone.bind(this, false));
-*/!*
-  }
-};
-
-user.checkPassword();
-```
-
-# Решение с локальной переменной
-
-Второе решение -- это скопировать `this` в локальную переменную (чтобы внешняя перезапись не повлияла):
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  loginDone: function(result) {
-    alert( this.login + (result ? ' вошёл в сайт' : ' ошибка входа') );
-  },
-
-  checkPassword: function() {
-    var self = this;
-*!*
-    ask("Ваш пароль?", this.password,
-      function() {
-        self.loginDone(true);
-      },
-      function() {
-        self.loginDone(false);
-      }
-    );
-*/!*
-  }
-};
-
-user.checkPassword();
-```
-
-Оба решения хороши, вариант с `bind` короче.
\ No newline at end of file
diff --git a/1-js/6-objects-more/7-bind/6-ask-currying/task.md b/1-js/6-objects-more/7-bind/6-ask-currying/task.md
deleted file mode 100644
index 7b48e190..00000000
--- a/1-js/6-objects-more/7-bind/6-ask-currying/task.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# Использование функции вопросов с каррингом
-
-[importance 5]
-
-Эта задача -- усложнённый вариант задачи [](/task/question-use-bind). В ней объект `user` изменён.
-
-Теперь заменим две функции `user.loginOk()` и `user.loginFail()` на единый метод: `user.loginDone(true/false)`, который нужно вызвать с `true` при верном ответе и `fail` -- при неверном. 
-
-Код ниже делает это, соответствующий фрагмент выделен.
-
-**Сейчас он обладает важным недостатком: при записи в `user` другого значения объект перестанет корректно работать, вы увидите это, запустив пример ниже (будет ошибка).**
-
-Как бы вы написали правильно? 
-
-**Исправьте выделенный фрагмент, чтобы код заработал.**
-
-```js
-//+ run
-"use strict";
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-var user = {
-  login: 'Василий',
-  password: '12345',
-
-  // метод для вызова из ask 
-  loginDone: function(result) {
-    alert( this.login + (result ? ' вошёл в сайт' : ' ошибка входа') );
-  },
-
-  checkPassword: function() {
-*!*
-    ask("Ваш пароль?", this.password,
-      function() {
-        user.loginDone(true);
-      },
-      function() {
-        user.loginDone(false);
-      }
-    );
-*/!*
-  }
-};
-
-var vasya = user;
-user = null;
-vasya.checkPassword();
-```
-
-Изменения должны касаться только выделенного фрагмента.
-
-Если возможно, предложите два решения, одно -- с использованием `bind`, другое -- без него. Какое решение лучше?
diff --git a/1-js/6-objects-more/7-bind/article.md b/1-js/6-objects-more/7-bind/article.md
deleted file mode 100644
index a18a910e..00000000
--- a/1-js/6-objects-more/7-bind/article.md
+++ /dev/null
@@ -1,434 +0,0 @@
-# Привязка контекста и карринг: "bind"
-
-Функции в JavaScript никак не привязаны к своему контексту `this`, с одной стороны, здорово -- это позволяет быть максимально гибкими, одалживать методы и так далее.
-
-Но с другой стороны -- в некоторых случаях контекст может быть потерян. То есть мы вроде как вызываем метод объекта, а на самом деле он получает `this = undefined`. 
-
-Такая ситуация является типичной для начинающих разработчиков, но бывает и у "зубров" тоже. Конечно, "зубры" при этом знают, что с ней делать.
-
-[cut]
-
-## Пример потери контекста
-
-В браузере есть встроенная функция `setTimeout(func, ms)`, которая вызывает выполение функции `func` через `ms` миллисекунд (=1/1000 секунды).
-
-Мы подробно остановимся на ней и её тонкостях позже, в главе [](/settimeout-setinterval), а пока просто посмотрим пример.
-
-Этот код выведет "Привет" через 1000мс, то есть 1 секунду:
-
-```js
-//+ run
-setTimeout(function() {
-  alert( "Привет" );
-}, 1000);
-```
-
-Попробуем сделать то же самое с методом объекта, следующий код должен выводить имя пользователя через 1 секунду:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  sayHi: function() {
-    alert( this.firstName );
-  }
-};
-
-*!*
-setTimeout(user.sayHi, 1000); // undefined (не Вася!)
-*/!*
-```
-
-При запуске кода выше через секунду выводится вовсе не `"Вася"`, а `undefined`!
-
-Это произошло потому, что в примере выше `setTimeout` получил функцию `user.sayHi`, но не её контекст. То есть, последняя строчка аналогична двум таким:
-
-```js
-var f = user.sayHi;
-setTimeout(f, 1000); // контекст user потеряли
-```
-
-
-Ситуация довольно типична -- мы хотим передать метод объекта куда-то в другое место кода, откуда он потом может быть вызван. Как бы прикрепить к нему контекст, желательно, с минимумом плясок с бубном и при этом надёжно?
-
-Есть несколько способов решения, среди которых мы, в зависимости от ситуации, можем выбирать.
-
-## Решение 1: сделать обёртку
-
-Самый простой вариант решения -- это обернуть вызов в анонимную функцию:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  sayHi: function() {
-    alert( this.firstName );
-  }
-};
-
-*!*
-setTimeout(function() {
-  user.sayHi(); // Вася
-}, 1000);
-*/!*
-```
-
-Теперь код работает, так как `user` достаётся из замыкания.
-
-Это решение также позволяет передать дополнительные аргументы:
-
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  sayHi: function(who) {
-    alert( this.firstName + ": Привет, " + who );
-  }
-};
-
-*!*
-setTimeout(function() {
-  user.sayHi("Петя"); // Вася: Привет, Петя
-}, 1000);
-*/!*
-```
-
-
-Но тут же появляется и уязвимое место в структуре кода! 
-
-А что, если до срабатывания `setTimeout` (ведь есть целая секунда) в переменную `user` будет записано другое значение? К примеру, в другом месте кода будет присвоено `user=(другой пользователь)`... В этом случае вызов неожиданно будет совсем не тот!
-
-Хорошо бы гарантировать правильность контекста.
-
-## Решение 2: bind для привязки контекста
-
-Напишем вспомогательную функцию `bind(func, context)`, которая будет жёстко фиксировать контекст для `func`:
-
-```js
-function bind(func, context) {
-  return function() { // (*)
-    return func.apply(context, arguments);
-  };
-}
-```
-
-Посмотрим, что она делает, как работает, на таком примере:
-
-```js
-//+ run
-function f() {
-  alert( this );
-}
-
-var g = bind(f, "Context");
-g(); // Context
-```
-
-То есть, `bind(f, "Context")` привязывает `"Context"` в качестве `this` для `f`.
-
-Посмотрим, за счёт чего это происходит.
-
-Результатом  `bind(f, "Context")`, как видно из кода, будет анонимная функция `(*)`.
-
-Вот она отдельно:
-
-```js
-function() { // (*)
-  return func.apply(context, arguments);
-};
-```
-
-Если подставить наши конкретные аргументы, то есть `f` и `"Context"`, то получится так:
-
-```js
-function() { // (*)
-  return f.apply("Context", arguments);
-};
-```
-
-Эта функция запишется в переменную `g`.
-
-Далее, если вызвать `g`, то вызов будет передан в `f`, причём `f.apply("Context", arguments)` передаст в качестве контекста `"Context"`, который и будет выведен.
-
-Если вызвать `g` с аргументами, то также будет работать:
-
-```js
-//+ run
-function f(a, b) {
-  alert( this );
-  alert( a + b );
-}
-
-var g = bind(f, "Context");
-g(1, 2); // Context, затем 3
-```
-
-Аргументы, которые получила `g(...)`, передаются в `f` также благодаря методу `.apply`.
-
-**Иными словами, в результате вызова `bind(func, context)` мы получаем "функцию-обёртку", которая прозрачно передаёт вызов в `func`, с теми же аргументами, но фиксированным контекстом `context`.**
-
-Вернёмся к `user.sayHi`. Вариант с `bind`:
-
-```js
-//+ run
-function bind(func, context) {
-  return function() {
-    return func.apply(context, arguments);
-  };
-}
-
-var user = {
-  firstName: "Вася",
-  sayHi: function() {
-    alert( this.firstName );
-  }
-};
-
-*!*
-setTimeout(bind(user.sayHi, user), 1000);
-*/!*
-```
-
-Теперь всё в порядке! 
-
-Вызов `bind(user.sayHi, user)` возвращает такую функцию-обёртку, которая привязывает `user.sayHi` к контексту `user`. Она будет вызвана через 1000мс.
-
-Полученную обёртку можно вызвать и с аргументами -- они пойдут в `user.sayHi` без изменений, фиксирован лишь контекст.
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-*!*
-  sayHi: function(who) { // здесь у sayHi есть один аргумент
-*/!*
-    alert( this.firstName + ": Привет, " + who );
-  }
-};
-
-var sayHi = bind(user.sayHi, user);
-
-*!*
-// контекст Вася, а аргумент передаётся "как есть"
-sayHi("Петя"); // Вася: Привет, Петя
-sayHi("Маша"); // Вася: Привет, Маша
-*/!*
-```
-
-В примере выше продемонстрирована другая частая цель использования `bind` -- "привязать" функцию к контексту, чтобы в дальнейшем "не таскать за собой" объект, а просто вызывать `sayHi`.
-
-Результат `bind` можно передавать в любое место кода, вызывать как обычную функцию, он "помнит" свой контекст.
-
-## Решение 3: встроенный метод bind [#bind]
-
-В современном JavaScript (или при подключении библиотеки [es5-shim](https://github.com/kriskowal/es5-shim) для IE8-) у функций уже есть встроенный метод [bind](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind), который мы можем использовать.
-
-Он работает примерно так же, как `bind`, который описан выше.
-
-Изменения очень небольшие:
-
-```js
-//+ run
-function f(a, b) {
-  alert( this );
-  alert( a + b );
-}
-
-*!*
-// вместо 
-// var g = bind(f, "Context");
-var g = f.bind("Context");
-*/!*
-g(1, 2); // Context, затем 3
-```
-
-Синтаксис встроенного `bind`:
-
-```js
-var wrapper = func.bind(context[, arg1, arg2...])
-```
-
-<dl>
-<dt>`func`</dt>
-<dd>Произвольная функция</dd>
-<dt>`context`</dt>
-<dd>Контекст, который привязывается к `func`</dd>
-<dt>`arg1`, `arg2`, ...</dt>
-<dd>Если указаны аргументы `arg1, arg2...` -- они будут прибавлены к каждому вызову новой функции, причем встанут *перед* теми, которые указаны при вызове.</dd>
-</dl>
-
-Результат вызова `func.bind(context)` аналогичен вызову `bind(func, context)`, описанному выше. То есть, `wrapper` -- это обёртка, фиксирующая контекст и передающая вызовы в `func`. Также можно указать аргументы, тогда и они будут фиксированы, но об этом чуть позже.
-
-Пример со встроенным методом `bind`:
-
-```js
-//+ run
-var user = {
-  firstName: "Вася",
-  sayHi: function() {
-    alert( this.firstName );
-  }
-};
-
-*!*
-// setTimeout( bind(user.sayHi, user), 1000 ); 
-setTimeout(user.sayHi.bind(user), 1000); // аналог через встроенный метод
-*/!*
-```
-
-Получили простой и надёжный способ привязать контекст, причём даже встроенный в JavaScript.
-
-Далее мы будем использовать именно встроенный метод `bind`. 
-
-[warn header="bind не похож на call/apply"]
-Методы `bind` и `call/apply` близки по синтаксису, но есть важнейшее отличие.
-
-Методы `call/apply` вызывают функцию с заданным контекстом и аргументами.
-
-А `bind` не вызывает функцию. Он только возвращает "обёртку", которую мы можем вызвать позже, и которая передаст вызов в исходную функцию, с привязанным контекстом.
-[/warn]
-
-[smart header="Привязать всё: `bindAll`"]
-Если у объекта много методов и мы планируем их активно передавать, то можно привязать контекст для них всех в цикле:
-
-```js
-for (var prop in user) {
-  if (typeof user[prop] == 'function') {
-    user[prop] = user[prop].bind(user);
-  }
-}
-```
-
-В некоторых JS-фреймворках есть даже встроенные функции для этого, например [_.bindAll(obj)](http://lodash.com/docs#bindAll).
-[/smart]
-
-
-## Карринг
-
-До этого мы говорили о привязке контекста. Теперь пойдём на шаг дальше. Привязывать можно не только контекст, но и аргументы. Используется это реже, но бывает полезно.
-
-[Карринг](http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)  (currying) или *каррирование* -- термин [функционального программирования](http://ru.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5), который означает создание новой функции путём фиксирования аргументов существующей.
-
-Как было сказано выше, метод `func.bind(context, ...)` может создавать обёртку, которая фиксирует не только контекст, но и ряд аргументов функции.
-
-Например, есть функция умножения двух чисел `mul(a, b)`:
-
-```js
-function mul(a, b) {
-  return a * b;
-};
-```
-
-При помощи `bind` создадим функцию `double`, удваивающую значения. Это будет вариант функции `mul` с фиксированным первым аргументом:
-
-```js
-//+ run
-*!*
-// double умножает только на два
-var double = mul.bind(null, 2); // контекст фиксируем null, он не используется
-*/!*
-
-alert( double(3) ); // = mul(2, 3) = 6
-alert( double(4) ); // = mul(2, 4) = 8
-alert( double(5) ); // = mul(2, 5) = 10
-```
-
-При вызове `double` будет передавать свои аргументы исходной функции `mul` после тех, которые указаны в `bind`, то есть в данном случае после зафиксированного первого аргумента `2`.
-
-**Говорят, что `double` является "частичной функцией" (partial function) от `mul`.**
-
-Другая частичная функция `triple` утраивает значения:
-
-```js
-//+ run
-*!*
-var triple = mul.bind(null, 3); // контекст фиксируем null, он не используется
-*/!*
-
-alert( triple(3) ); // = mul(3, 3) = 9
-alert( triple(4) ); // = mul(3, 4) = 12
-alert( triple(5) ); // = mul(3, 5) = 15
-```
-
-При помощи `bind` мы можем получить из функции её "частный вариант" как самостоятельную функцию и дальше передать в `setTimeout` или сделать с ней что-то ещё.
-
-Наш выигрыш состоит в том, что эта самостоятельная функция, во-первых, имеет понятное имя (`double`, `triple`), а во-вторых, повторные вызовы позволяют не указывать каждый раз первый аргумент, он уже фиксирован благодаря `bind`.
-
-## Функция ask для задач
-
-В задачах этого раздела предполагается, что объявлена следующая "функция вопросов" `ask`:
-
-```js
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-```
-
-Её назначение -- задать вопрос `question` и, если ответ совпадёт с `answer`, то запустить функцию `ok()`, а иначе -- функцию `fail()`.
-
-Несмотря на внешнюю простоту, функции такого вида активно используются в реальных проектах. Конечно, они будут сложнее, вместо `alert/prompt` -- вывод красивого  JavaScript-диалога с рамочками, кнопочками и так далее, но это нам сейчас не нужно.
-
-Пример использования:
-
-```js
-//+ run
-*!*
-ask("Выпустить птичку?", "да", fly, die);
-*/!*
-
-function fly() {
-  alert( 'улетела :)' );
-}
-
-function die() {
-  alert( 'птичку жалко :(' );
-}
-```
-
-## Итого
-
-<ul>
-<li>Функция сама по себе не запоминает контекст выполнения.</li>
-<li>Чтобы гарантировать правильный контекст для вызова `obj.func()`, нужно использовать функцию-обёртку, задать её через анонимную функцию:
-```js
-setTimeout(function() {
-  obj.func();
-})
-```
-</li>
-<li>...Либо использовать `bind`:
-
-```js
-setTimeout(obj.func.bind(obj));
-```
-</li>
-<li>Вызов `bind` часто используют для привязки функции к контексту, чтобы затем присвоить её в обычную переменную и вызывать уже без явного указания объекта.</li>
-<li>Вызов `bind` также позволяет фиксировать первые аргументы функции ("каррировать" её), и таким образом из общей функции получить её "частные" варианты -- чтобы использовать их многократно без повтора одних и тех же аргументов каждый раз.</li>
-</ul>
-
-[head]
-<script>
-function mul(a, b) {
-  return a * b;
-};
-
-function ask(question, answer, ok, fail) {
-  var result = prompt(question, '');
-  if (result.toLowerCase() == answer.toLowerCase()) ok();
-  else fail();
-}
-
-function bind(func, context /*, args*/) {
-  var bindArgs = [].slice.call(arguments, 2); // (1)
-  function wrapper() {                        // (2)
-    var args = [].slice.call(arguments); 
-    var unshiftArgs = bindArgs.concat(args);  // (3)
-    return func.apply(context, unshiftArgs);  // (4)
-  }
-  return wrapper;
-}
-</script>
-[/head]
diff --git a/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/solution.js b/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/solution.js
deleted file mode 100644
index 1aa8f279..00000000
--- a/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/solution.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function makeLogging(f, log) {
-
-  function wrapper(a) {
-    log.push(a);
-    return f.call(this, a);
-  }
-
-  return wrapper;
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/test.js b/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/test.js
deleted file mode 100644
index 2257ee89..00000000
--- a/1-js/6-objects-more/8-decorators/1-logging-decorator/_js.view/test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-describe("makeLogging", function() {
-  it("записывает вызовы в массив log", function() {
-    var work = sinon.spy();
-
-    var log = [];
-    work = makeLogging(work, log);
-    assert.deepEqual(log, []);
-
-    work(1);
-    assert.deepEqual(log, [1]);
-
-    work(2);
-    assert.deepEqual(log, [1, 2]);
-  });
-
-  it("передаёт вызов функции, возвращает её результат", function() {
-    var log = [];
-
-    function work(x) {
-      return x * 2;
-    }
-
-    work = sinon.spy(work);
-    var spy = work;
-    work = makeLogging(work, log);
-
-    assert.equal(work(1), 2);
-    assert(spy.calledWith(1));
-  });
-
-
-  it("сохраняет контекст вызова для методов объекта", function() {
-    var log = [];
-
-    var calculator = {
-      double: function(x) {
-        return x * 2;
-      }
-    }
-
-    calculator.double = sinon.spy(calculator.double);
-    var spy = calculator.double;
-    calculator.double = makeLogging(calculator.double, log);
-
-    assert.equal(calculator.double(1), 2);
-    assert(spy.calledWith(1));
-    assert(spy.calledOn(calculator));
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/1-logging-decorator/solution.md b/1-js/6-objects-more/8-decorators/1-logging-decorator/solution.md
deleted file mode 100644
index 103ff4e5..00000000
--- a/1-js/6-objects-more/8-decorators/1-logging-decorator/solution.md
+++ /dev/null
@@ -1,44 +0,0 @@
-Возвратим декоратор `wrapper` который будет записывать аргумент в `log` и передавать вызов в `f`:
-
-```js
-//+ run
-function work(a) {
-  /*...*/ // work - произвольная функция, один аргумент
-}
-
-function makeLogging(f, log) {
-
-*!*
-  function wrapper(a) {
-      log.push(a);
-      return f.call(this, a);
-    }
-*/!*
-
-  return wrapper;
-}
-
-var log = [];
-work = makeLogging(work, log);
-
-work(1); // 1
-work(5); // 5
-
-for (var i = 0; i < log.length; i++) {
-  alert( 'Лог:' + log[i] ); // "Лог:1", затем "Лог:5"
-}
-```
-
-**Обратите внимание, вызов функции осуществляется как `f.call(this, a)`, а не просто `f(a)`.**
-
-Передача контекста необходима, чтобы декоратор корректно работал с методами объекта. Например:
-
-```js
-user.method = makeLogging(user.method, log);
-```
-
-Теперь при вызове `user.method(...)` в декоратор будет передаваться контекст `this`, который надо передать исходной функции через `call/apply`.
-
-
-
-
diff --git a/1-js/6-objects-more/8-decorators/1-logging-decorator/task.md b/1-js/6-objects-more/8-decorators/1-logging-decorator/task.md
deleted file mode 100644
index e1efa4f8..00000000
--- a/1-js/6-objects-more/8-decorators/1-logging-decorator/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Логирующий декоратор (1 аргумент)
-
-[importance 5]
-
-Создайте декоратор `makeLogging(f, log)`, который берет функцию `f` и массив `log`. 
-
-Он должен возвращать обёртку вокруг `f`, которая при каждом вызове записывает ("логирует") аргументы в `log`, а затем передает вызов в `f`. 
-
-**В этой задаче можно считать, что у функции `f` ровно один аргумент.**
-
-Работать должно так:
-
-```js
-function work(a) {
-  /* ... */ // work - произвольная функция, один аргумент
-}
-
-function makeLogging(f, log) { /* ваш код */ }
-
-var log = [];
-work = makeLogging(work, log);
-
-work(1); // 1, добавлено в log
-work(5); // 5, добавлено в log
-
-for (var i = 0; i < log.length; i++) {
-*!*
-  alert( 'Лог:' + log[i] ); // "Лог:1", затем "Лог:5"
-*/!*
-}
-```
-
diff --git a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/solution.js b/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/solution.js
deleted file mode 100644
index f7052f65..00000000
--- a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/solution.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function makeLogging(f, log) {
-
-  function wrapper() {
-    log.push([].slice.call(arguments));
-    return f.apply(this, arguments);
-  }
-
-  return wrapper;
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/test.js b/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/test.js
deleted file mode 100644
index eb29c837..00000000
--- a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/_js.view/test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-describe("makeLogging", function() {
-  it("записывает вызовы в массив log", function() {
-    var work = sinon.spy();
-
-    var log = [];
-    work = makeLogging(work, log);
-    assert.deepEqual(log, []);
-
-    work(1, 2);
-    assert.deepEqual(log, [
-      [1, 2]
-    ]);
-
-    work(3, 4);
-    assert.deepEqual(log, [
-      [1, 2],
-      [3, 4]
-    ]);
-  });
-
-  it("передаёт вызов функции, возвращает её результат", function() {
-    var log = [];
-
-    function sum(a, b) {
-      return a + b;
-    }
-
-    sum = sinon.spy(sum);
-    var spy = sum;
-    sum = makeLogging(sum, log);
-
-    assert.equal(sum(1, 2), 3);
-    assert(spy.calledWith(1, 2));
-  });
-
-
-  it("сохраняет контекст вызова для методов объекта", function() {
-    var log = [];
-
-    var calculator = {
-      sum: function(a, b) {
-        return a + b;
-      }
-    }
-
-    calculator.sum = sinon.spy(calculator.sum);
-    var spy = calculator.sum;
-    calculator.sum = makeLogging(calculator.sum, log);
-
-    assert.equal(calculator.sum(1, 2), 3);
-    assert(spy.calledWith(1, 2));
-    assert(spy.calledOn(calculator));
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/solution.md b/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/solution.md
deleted file mode 100644
index dfc2b902..00000000
--- a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Решение аналогично задаче [](/task/logging-decorator), разница в том, что в лог вместо одного аргумента идет весь объект `arguments`.
-
-Для передачи вызова с произвольным количеством аргументов используем `f.apply(this, arguments)`.
-
-```js
-//+ run
-function work(a, b) {
-  alert( a + b ); // work - произвольная функция
-}
-
-function makeLogging(f, log) {
-
-*!*
-  function wrapper() {
-      log.push([].slice.call(arguments));
-      return f.apply(this, arguments);
-    }
-*/!*
-
-  return wrapper;
-}
-
-var log = [];
-work = makeLogging(work, log);
-
-work(1, 2); // 3
-work(4, 5); // 9
-
-for (var i = 0; i < log.length; i++) {
-  var args = log[i]; // массив из аргументов i-го вызова
-  alert( 'Лог:' + args.join() ); // "Лог:1,2", "Лог:4,5"
-}
-```
-
diff --git a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/task.md b/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/task.md
deleted file mode 100644
index e5ab5b6b..00000000
--- a/1-js/6-objects-more/8-decorators/2-logging-decorator-arguments/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Логирующий декоратор (много аргументов)
-
-[importance 3]
-
-Создайте декоратор `makeLogging(func, log)`, для функции `func` возвращающий обёртку, которая при каждом вызове добавляет её аргументы в массив `log`. 
-
-Условие аналогично задаче [](/task/logging-decorator), но допускается `func` с любым набором аргументов.
-
-Работать должно так:
-
-```js
-function work(a, b) {
-  alert( a + b ); // work - произвольная функция
-}
-
-function makeLogging(f, log) { /* ваш код */ }
-
-var log = [];
-work = makeLogging(work, log);
-
-work(1, 2); // 3
-work(4, 5); // 9
-
-for (var i = 0; i < log.length; i++) {
-  var args = log[i]; // массив из аргументов i-го вызова
-  alert( 'Лог:' + args.join() ); // "Лог:1,2", "Лог:4,5"
-}
-```
-
diff --git a/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/solution.js b/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/solution.js
deleted file mode 100644
index dc865601..00000000
--- a/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/solution.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function makeCaching(f) {
-  var cache = {};
-
-  return function(x) {
-    if (!(x in cache)) {
-      cache[x] = f.call(this, x);
-    }
-    return cache[x];
-  };
-
-}
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/test.js b/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/test.js
deleted file mode 100644
index aed6f0fe..00000000
--- a/1-js/6-objects-more/8-decorators/3-caching-decorator/_js.view/test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-describe("makeCaching", function() {
-
-  it("запоминает предыдущее значение функции с таким аргументом", function() {
-    function f(x) {
-      return Math.random() * x;
-    }
-
-    f = makeCaching(f);
-
-    var a = f(1);
-    var b = f(1);
-    assert.equal(a, b);
-
-    var anotherValue = f(2);
-    // почти наверняка другое значение
-    assert.notEqual(a, anotherValue);
-  });
-
-  it("сохраняет контекст вызова", function() {
-    var obj = {
-      spy: sinon.spy()
-    };
-
-    var spy = obj.spy;
-    obj.spy = makeCaching(obj.spy);
-    obj.spy(123);
-    assert(spy.calledWith(123));
-    assert(spy.calledOn(obj));
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/6-objects-more/8-decorators/3-caching-decorator/solution.md b/1-js/6-objects-more/8-decorators/3-caching-decorator/solution.md
deleted file mode 100644
index 9b413f92..00000000
--- a/1-js/6-objects-more/8-decorators/3-caching-decorator/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Запоминать результаты вызова функции будем в замыкании, в объекте `cache: { ключ:значение }`.
-
-```js
-//+ run no-beautify
-function f(x) { 
-  return Math.random()*x;
-}
-
-*!*
-function makeCaching(f) { 
-  var cache = {};  
-
-  return function(x) {
-    if (!(x in cache)) {   
-      cache[x] = f.call(this, x);
-    }
-    return cache[x];
-  };
-
-}
-*/!*
-
-f = makeCaching(f);
-
-var a = f(1);
-var b = f(1);
-alert( a == b ); // true (значение закешировано)
-
-b = f(2);
-alert( a == b ); // false, другой аргумент => другое значение
-```
-
-Обратите внимание: проверка на наличие уже подсчитанного значения выглядит так: `if (x in cache)`. Менее универсально можно проверить так: `if (cache[x])`, это если мы точно знаем, что `cache[x]` никогда не будет `false`, `0` и т.п.
-
diff --git a/1-js/6-objects-more/8-decorators/3-caching-decorator/task.md b/1-js/6-objects-more/8-decorators/3-caching-decorator/task.md
deleted file mode 100644
index f0b3a78f..00000000
--- a/1-js/6-objects-more/8-decorators/3-caching-decorator/task.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Кеширующий декоратор
-
-[importance 5]
-
-Создайте декоратор `makeCaching(f)`, который берет функцию `f` и возвращает обертку, которая кеширует её результаты.
-
-**В этой задаче функция `f` имеет только один аргумент, и он является числом.**
-
-<ol>
-<li>При первом вызове обертки с определенным аргументом -- она вызывает `f` и запоминает значение.</li>
-<li>При втором и последующих вызовах с тем же аргументом возвращается запомненное значение.</li>
-</ol>
-
-Должно работать так:
-
-```js
-function f(x) {
-  return Math.random() * x; // random для удобства тестирования 
-}
-
-function makeCaching(f) { /* ваш код */ }
-
-f = makeCaching(f);
-
-var a, b;
-
-a = f(1);
-b = f(1);
-alert( a == b ); // true (значение закешировано)
-
-b = f(2);
-alert( a == b ); // false, другой аргумент => другое значение
-```
-
diff --git a/1-js/6-objects-more/8-decorators/article.md b/1-js/6-objects-more/8-decorators/article.md
deleted file mode 100644
index f089df90..00000000
--- a/1-js/6-objects-more/8-decorators/article.md
+++ /dev/null
@@ -1,232 +0,0 @@
-# Функции-обёртки, декораторы
-
-JavaScript предоставляет удивительно гибкие возможности по работе с функциями: их можно передавать, в них можно записывать данные как в объекты, у них есть свои встроенные методы...
-
-Конечно, этим нужно уметь пользоваться. В этой главе, чтобы более глубоко понимать работу с функциями, мы рассмотрим создание функций-обёрток или, иначе говоря, "декораторов".
-
-[cut]
-
-[Декоратор](http://en.wikipedia.org/wiki/Decorator_pattern) -- приём программирования, который позволяет взять существующую функцию и изменить/расширить ее поведение.
-
-*Декоратор* получает функцию и возвращает обертку, которая делает что-то своё "вокруг" вызова основной функции.
-
-## bind -- привязка контекста
-
-Один простой декоратор вы уже видели ранее -- это функция [bind](/bind):
-
-```js
-function bind(func, context) {
-  return function() {
-    return func.apply(context, arguments);
-  };
-}
-```
-
-Вызов `bind(func, context)` возвращает обёртку, которая ставит `this` и передаёт основную работу функции `func`.
-
-## Декоратор-таймер
-
-Создадим более сложный декоратор, замеряющий время выполнения функции.
-
-Он будет называться `timingDecorator` и получать функцию вместе с "названием таймера", а возвращать -- функцию-обёртку, которая измеряет время и прибавляет его в специальный объект `timer` по свойству-названию.
-
-Использование:
-```js
-function f(x) {} // любая функция
-
-var timers = {}; // объект для таймеров
-
-// отдекорировали
-f = timingDecorator(f, "myFunc");
-
-// запускаем
-f(1);
-f(2);
-f(3); // функция работает как раньше, но время подсчитывается
-
-alert( timers.myFunc ); // общее время выполнения всех вызовов f
-```
-
-При помощи декоратора `timingDecorator` мы сможем взять произвольную функцию и одним движением руки прикрутить к ней измеритель времени.
-
-Его реализация:
-
-```js
-//+ run
-var timers = {};
-
-// прибавит время выполнения f к таймеру timers[timer]
-function timingDecorator(f, timer) {
-  return function() {
-    var start = performance.now();
-
-    var result = f.apply(this, arguments); // (*)
-
-    if (!timers[timer]) timers[timer] = 0;
-    timers[timer] += performance.now() - start;
-
-    return result;
-  }
-}
-
-// функция может быть произвольной, например такой:
-function fibonacci(n) {
-  return (n > 2) ? fibonacci(n - 1) + fibonacci(n - 2) : 1;
-}
-
-*!*
-// использование: завернём fibonacci в декоратор
-fibonacci = timingDecorator(fibonacci, "fibo");
-*/!*
-
-// неоднократные вызовы...
-alert( fibonacci(10) ); // 55
-alert( fibonacci(20) ); // 6765
-// ...
-
-*!*
-// в любой момент можно получить общее количество времени на вызовы
-alert( timers.fibo + 'мс' );
-*/!*
-```
-
-Обратим внимание на строку `(*)` внутри декоратора, которая и осуществляет передачу вызова:
-
-```js
-var result = f.apply(this, arguments); // (*)
-```
-
-Этот приём называется "форвардинг вызова" (от англ. forwarding): текущий контекст и аргументы через `apply` передаются в функцию `f`, так что изнутри `f` всё выглядит так, как была вызвана она напрямую, а не декоратор.
-
-## Декоратор для проверки типа
-
-В JavaScript, как правило, пренебрегают проверками типа. В функцию, которая должна получать число, может быть передана строка, булево значение или даже объект. 
-
-Например:
-
-```js
-//+ no-beautify
-function sum(a, b) {
-  return a + b;
-}
-
-// передадим в функцию для сложения чисел нечисловые значения
-alert( sum(true, { name: "Вася", age: 35 }) ); // true[Object object]
-```
-
-Функция "как-то" отработала, но в реальной жизни передача в `sum` подобных значений, скорее всего, будет следствием программной ошибки. Всё-таки `sum` предназначена для суммирования чисел, а не объектов.
-
-Многие языки программирования позволяют прямо в объявлении функции указать, какие типы данных имеют параметры. И это удобно, поскольку повышает надёжность кода.
-
-В JavaScript же проверку типов приходится делать дополнительным кодом в начале функции, который во-первых обычно  лень писать, а во-вторых он увеличивает общий объем текста, тем самым ухудшая читаемость.
-
-**Декораторы способны упростить рутинные, повторяющиеся задачи, вынести их из кода функции.**
-
-Например, создадим декоратор, который принимает функцию и массив, который описывает для какого аргумента какую проверку типа применять:
-
-```js
-//+ run
-// вспомогательная функция для проверки на число
-function checkNumber(value) {
-  return typeof value == 'number';
-}
-
-// декоратор, проверяющий типы для f
-// второй аргумент checks - массив с функциями для проверки
-function typeCheck(f, checks) {
-  return function() {
-    for (var i = 0; i < arguments.length; i++) {
-      if (!checks[i](arguments[i])) {
-        alert( "Некорректный тип аргумента номер " + i );
-        return;
-      }
-    }
-    return f.apply(this, arguments);
-  }
-}
-
-function sum(a, b) {
-  return a + b;
-}
-
-*!*
-// обернём декоратор для проверки
-sum = typeCheck(sum, [checkNumber, checkNumber]); // оба аргумента - числа
-*/!*
-
-// пользуемся функцией как обычно
-alert( sum(1, 2) ); // 3, все хорошо
-
-*!*
-// а вот так - будет ошибка
-sum(true, null); // некорректный аргумент номер 0
-sum(1, ["array", "in", "sum?!?"]); // некорректный аргумент номер 1
-*/!*
-```
-
-Конечно, этот декоратор можно ещё расширять, улучшать, дописывать проверки, но... Вы уже поняли принцип, не правда ли? 
-
-**Один раз пишем декоратор и дальше просто применяем этот функционал везде, где нужно.**
-
-## Декоратор проверки доступа
-
-И наконец посмотрим ещё один, последний пример.
-
-Предположим, у нас есть функция `isAdmin()`, которая возвращает `true`, если у посетителя есть права администратора.
-
-Можно создать декоратор `checkPermissionDecorator`, который добавляет в любую функцию проверку прав:
-
-Например, создадим декоратор `checkPermissionDecorator(f)`. Он будет возвращать обертку, которая передает вызов `f` в том случае, если у посетителя достаточно прав:
-
-```js
-function checkPermissionDecorator(f) {
-  return function() {
-    if (isAdmin()) {
-      return f.apply(this, arguments);
-    }
-    alert( 'Недостаточно прав' );
-  }
-}
-```
-
-Использование декоратора:
-
-```js
-//+ no-beautify
-function save() { ... }
-
-save = checkPermissionDecorator(save);
-// Теперь вызов функции save() проверяет права
-```
-
-## Итого
-
-Декоратор -- это обёртка над функцией, которая модифицирует её поведение. При этом основную работу по-прежнему выполняет функция.
-
-**Декораторы можно не только повторно использовать, но и комбинировать!**
-
-Это кардинально повышает их выразительную силу. Декораторы можно рассматривать как своего рода "фичи" или возможности, которые можно "нацепить" на любую функцию. Можно один, а можно несколько.
-
-Скажем, используя декораторы, описанные выше, можно добавить к функции возможности по проверке типов данных, замеру времени и проверке доступа буквально одной строкой, не залезая при этом в её код, то есть (!) не увеличивая его сложность.
-
-Предлагаю вашему вниманию задачи, которые помогут выяснить, насколько вы разобрались в декораторах. Далее в учебнике мы ещё встретимся с ними.
-
-
-
-[head]
-<script>
-function timingDecorator(f) {
-  return function() {
-    var d = new Date();
-    var result = f.apply(this, arguments);
-    console.log("Функция заняла: " + (new Date - d) + "мс");
-    return result;
-  }
-}
-function bind(func, context) {
-  return function() { 
-    return func.apply(context, arguments); 
-  };
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/1-js/6-objects-more/index.md b/1-js/6-objects-more/index.md
deleted file mode 100644
index 94f1be86..00000000
--- a/1-js/6-objects-more/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Методы объектов и контекст вызова
-
-Начинаем изучать объектно-ориентированную разработку -- как работают объекты и функции, что такое контекст вызова и способы его передачи.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/solution.js b/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/solution.js
deleted file mode 100644
index 48113fa4..00000000
--- a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/solution.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function formatDate(date) {
-  if (typeof date == 'number') {
-    // перевести секунды в миллисекунды и преобразовать к Date
-    date = new Date(date * 1000);
-  } else if (typeof date == 'string') {
-    // строка в стандартном формате автоматически будет разобрана в дату
-    date = new Date(date); 
-  } else if (Array.isArray(date)) { 
-    date = new Date(date[0], date[1], date[2]);
-  }
-  // преобразования для поддержки полиморфизма завершены, 
-  // теперь мы работаем с датой (форматируем её)
-
-  return date.toLocaleString("ru", {day: '2-digit', month: '2-digit', year: '2-digit'});
-
-  /*
-  // можно и вручную, если лень добавлят в старый IE поддержку локализации
-  var day = date.getDate();
-  if (day < 10) day = '0' + day;
-
-  var month = date.getMonth() + 1;
-  if (month < 10) month = '0' + month;
-
-  // взять 2 последние цифры года
-  var year = date.getFullYear() % 100;
-  if (year < 10) year = '0' + year;
-
-  var formattedDate = day + '.' + month + '.' + year;
-  
-  return formattedDate;
-  */
-}
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/test.js b/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/test.js
deleted file mode 100644
index a458b62f..00000000
--- a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/_js.view/test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-describe("formatDate", function() {
-  it("читает дату вида гггг-мм-дд из строки", function() {
-    assert.equal(formatDate('2011-10-02'), "02.10.11");
-  });
-
-  it("читает дату из числа 1234567890 (миллисекунды)", function() {
-    assert.equal(formatDate(1234567890), "14.02.09");
-  });
-
-  it("читает дату из массива вида [гггг, м, д]", function() {
-    assert.equal(formatDate([2014, 0, 1]), "01.01.14");
-  });
-
-  it("читает дату из объекта Date", function() {
-    assert.equal(formatDate(new Date(2014, 0, 1)), "01.01.14");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/solution.md b/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/solution.md
deleted file mode 100644
index 878033e9..00000000
--- a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Для определения примитивного типа строка/число подойдет оператор [typeof](#type-typeof).
-
-Примеры его работы:
-
-```js
-//+ run
-alert( typeof 123 ); // "number"
-alert( typeof "строка" ); // "string"
-alert( typeof new Date() ); // "object"
-alert( typeof [] ); // "object"
-```
-
-Оператор `typeof` не умеет различать разные типы объектов, они для него все на одно лицо: `"object"`. Поэтому он не сможет отличить `Date` от `Array`.
-
-Для отличия `Array` используем вызов `Array.isArray`. Если он неверен, значит у нас дата.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/task.md b/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/task.md
deleted file mode 100644
index 4d4176da..00000000
--- a/1-js/7-js-misc/1-class-instanceof/1-format-date-polymorphic/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Полиморфная функция formatDate
-
-[importance 5]
-
-Напишите функцию `formatDate(date)`, которая возвращает дату в формате `dd.mm.yy`. 
-
-Ее первый аргумент должен содержать дату в одном из видов:
-<ol>
-<li>Как объект `Date`.</li>
-<li>Как строку, например `yyyy-mm-dd` или другую в стандартном формате даты.</li>
-<li>Как число *секунд* с `01.01.1970`.</li>
-<li>Как массив `[гггг, мм, дд]`, месяц начинается с нуля</li>
-</ol>
-Для этого вам понадобится определить тип данных аргумента и, при необходимости, преобразовать входные данные в нужный формат.
-
-Пример работы:
-
-```js
-function formatDate(date) { /* ваш код */ }
-
-alert( formatDate('2011-10-02') ); // 02.10.11
-alert( formatDate(1234567890) ); // 14.02.09
-alert( formatDate([2014, 0, 1]) ); // 01.01.14
-alert( formatDate(new Date(2014, 0, 1)) ); // 01.01.14
-```
-
diff --git a/1-js/7-js-misc/1-class-instanceof/article.md b/1-js/7-js-misc/1-class-instanceof/article.md
deleted file mode 100644
index 54b519b2..00000000
--- a/1-js/7-js-misc/1-class-instanceof/article.md
+++ /dev/null
@@ -1,252 +0,0 @@
-# Типы данных: [[Class]], instanceof и утки
-
-Время от времени бывает удобно создавать так называемые "полиморфные" функции, то есть такие, которые по-разному обрабатывают аргументы, в зависимости от их типа. Например, функция вывода может по-разному форматировать числа и даты.
-
-Для реализации такой возможности нужен способ определить тип переменной. 
-
-## Оператор typeof
-
-Мы уже знакомы с простейшим способом -- оператором [typeof](#type-typeof). 
-
-Оператор `typeof` надежно работает с примитивными типами, кроме `null`, а также с функциями. Он возвращает для них тип в виде строки:
-
-```js
-//+ run no-beautify
-alert( typeof 1 );         // 'number'
-alert( typeof true );      // 'boolean'
-alert( typeof "Текст" );   // 'string'
-alert( typeof undefined ); // 'undefined'
-alert( typeof null );      // 'object' (ошибка в языке)
-alert( typeof alert );     // 'function'
-```
-
-...Но все объекты, включая массивы и даты для `typeof` -- на одно лицо, они имеют один тип `'object'`:
-
-```js
-//+ run
-alert( typeof {} ); // 'object'
-alert( typeof [] ); // 'object'
-alert( typeof new Date ); // 'object'
-```
-
-Поэтому различить их при помощи `typeof` нельзя, и в этом его основной недостаток.
-
-## Секретное свойство [[Class]]
-
-Для встроенных объектов есть одна "секретная" возможность узнать их тип, которая связана с методом `toString`. 
-
-Во всех встроенных объектах есть специальное свойство `[[Class]]`, в котором хранится информация о его типе или конструкторе.
-
-Оно взято в квадратные скобки, так как это свойство -- внутреннее. Явно получить его нельзя, но можно прочитать его "в обход", воспользовавшись методом `toString` стандартного объекта `Object`.
-
-Его внутренняя реализация выводит `[[Class]]` в небольшом обрамлении, как `"[object значение]"`.
-
-Например:
-
-```js
-//+ run
-var toString = {}.toString; 
-
-var arr = [1, 2];
-alert( toString.call(arr) ); // [object Array]
-
-var date = new Date;
-alert( toString.call(date) ); // [object Date]
-
-var user = { name: "Вася" };
-alert( toString.call(user) ); // [object Object]
-```
-
-В первой строке мы взяли метод `toString`, принадлежащий именно стандартному объекту `{}`. Нам пришлось это сделать, так как у `Date` и `Array`  -- свои собственные методы `toString`, которые работают иначе.
-
-Затем мы вызываем этот `toString` в контексте нужного объекта `obj`, и он возвращает его внутреннее, невидимое другими способами, свойство `[[Class]]`.
-
-**Для получения `[[Class]]` нужна именно внутренняя реализация `toString` стандартного объекта `Object`, другая не подойдёт.**
-
-К счастью, методы в JavaScript -- это всего лишь функции-свойства объекта, которые можно скопировать в переменную и применить на другом объекте через `call/apply`. Что мы и делаем для `{}.toString`.
-
-Метод также можно использовать с примитивами:
-
-```js
-//+ run
-alert( {}.toString.call(123) ); // [object Number]
-alert( {}.toString.call("строка") ); // [object String]
-```
-
-[warn header="Вызов `{}.toString` в консоли может выдать ошибку"]
-При тестировании кода в консоли вы можете обнаружить, что если ввести в командную строку `{}.toString.call(...)` -- будет ошибка. С другой стороны, вызов `alert( {}.toString... )` -- работает.
-
-Эта ошибка возникает потому, что фигурные скобки `{ }` в основном потоке кода интерпретируются как блок. Интерпретатор читает `{}.toString.call(...)` так:
-
-```js
-//+ no-beautify
-{ } // пустой блок кода
-.toString.call(...) // а что это за точка в начале? не понимаю, ошибка!
-```
-
-Фигурные скобки считаются объектом, только если они находятся в контексте выражения. В частности, оборачивание в скобки `( {}.toString... )` тоже сработает нормально.
-[/warn]
-
-
-Для большего удобства можно сделать функцию `getClass`, которая будет возвращать только сам `[[Class]]`:
-
-```js
-//+ run
-function getClass(obj) {
-  return {}.toString.call(obj).slice(8, -1);
-}
-
-alert( getClass(new Date) ); // Date
-alert( getClass([1, 2, 3]) ); // Array
-```
-
-Заметим, что свойство `[[Class]]` есть и доступно для чтения указанным способом -- у всех *встроенных* объектов. Но его нет у объектов, которые создают *наши функции*. Точнее, оно есть, но равно всегда `"Object"`.
-
-Например:
-
-```js
-//+ run
-function User() {}
-
-var user = new User();
-
-alert( {}.toString.call(user) ); // [object Object], не [object User]
-```
-
-Поэтому узнать тип таким образом можно только для встроенных объектов.
-
-## Метод Array.isArray()
-
-Для проверки на массивов есть специальный метод: `Array.isArray(arr)`. Он возвращает `true` только если `arr` -- массив:
-
-```js
-//+ run
-alert( Array.isArray([1,2,3]) ); // true
-alert( Array.isArray("not array")); // false
-```
-
-Но этот метод -- единственный в своём роде.
-
-Других аналогичных, типа `Object.isObject`, `Date.isDate` -- нет.
-
-
-## Оператор instanceof
-
-Оператор `instanceof` позволяет проверить, создан ли объект данной функцией, причём работает для любых функций -- как встроенных, так и наших.
-
-```js
-//+ run
-function User() {}
-
-var user = new User();
-
-alert( user instanceof User ); // true
-```
-
-Таким образом, `instanceof`, в отличие от `[[Class]]` и `typeof` может помочь выяснить тип для новых объектов, созданных нашими конструкторами.
-
-Заметим, что оператор `instanceof` -- сложнее, чем кажется. Он учитывает наследование, которое мы пока не проходили, но скоро изучим, и затем вернёмся к `instanceof` в главе [](/instanceof).
-
-
-## Утиная типизация
-
-Альтернативный подход к типу -- "утиная типизация", которая основана на одной известной пословице: *"If it looks like a duck, swims like a duck and quacks like a duck, then it probably is a duck (who cares what it really is)"*.
-
-В переводе: *"Если это выглядит как утка, плавает как утка и крякает как утка, то, вероятно, это утка (какая разница, что это на самом деле)"*. 
-
-Смысл утиной типизации -- в проверке необходимых методов и свойств.
-
-Например, мы можем проверить, что объект -- массив, не вызывая `Array.isArray`, а просто уточнив наличие важного для нас метода, например `splice`:
-
-```js
-//+ run
-var something = [1, 2, 3];
-
-if (something.splice) {
-  alert( 'Это утка! То есть, массив!' );
-}
-```
-
-Обратите внимание -- в `if` мы не вызываем метод `something.splice()`, а пробуем получить само свойство `something.splice`. Для массивов оно всегда есть и является функцией, т.е. даст в логическом контексте `true`.
-
-Проверить на дату можно, определив наличие метода `getTime`:
-
-```js
-//+ run
-var x = new Date();
-
-if (x.getTime) {
-  alert( 'Дата!' );
-  alert( x.getTime() ); // работаем с датой
-}
-```
-
-С виду такая проверка хрупка, ее можно "сломать", передав похожий объект с тем же методом. 
-
-Но как раз в этом и есть смысл утиной типизации: если объект похож на дату, у него есть методы даты, то будем работать с ним как с датой (какая разница, что это на самом деле). 
-
-То есть, мы намеренно позволяем передать в код нечто менее конкретное, чем определённый тип, чтобы сделать его более универсальным.
-
-[smart header="Проверка интерфейса"]
-Если говорить словами "классического программирования", то "duck typing" -- это проверка реализации объектом требуемого интерфейса. Если реализует -- ок, используем его. Если нет -- значит это что-то другое.
-[/smart]
-
-
-## Пример полиморфной функции
-
-Пример полиморфной функции -- `sayHi(who)`, которая будет говорить "Привет" своему аргументу, причём если передан массив -- то "Привет" каждому:
-
-```js
-//+ run
-function sayHi(who) {
-
-  if (Array.isArray(who)) { 
-    who.forEach(sayHi);
-  } else {
-    alert( 'Привет, ' + who );
-  }
-}
-
-// Вызов с примитивным аргументом
-sayHi("Вася"); // Привет, Вася
-
-// Вызов с массивом
-sayHi(["Саша", "Петя"]); // Привет, Саша... Петя
-
-// Вызов с вложенными массивами - тоже работает!
-sayHi(["Саша", "Петя", ["Маша", "Юля"]]); // Привет Саша..Петя..Маша..Юля
-```
-
-Проверку на массив в этом примере можно заменить на "утиную" -- нам ведь нужен только метод `forEach`:
-
-```js
-//+ run
-function sayHi(who) {
-
-  if (who.forEach) {  // если есть forEach
-    who.forEach(sayHi); // предполагаем, что он ведёт себя "как надо"
-  } else {
-    alert( 'Привет, ' + who );
-  }
-}
-```
-
-## Итого
-
-Для написания полиморфных (это удобно!) функций нам нужна проверка типов.
-
-<ul>
-<li>Для примитивов с ней отлично справляется оператор `typeof`. 
-
-У него две особенности:
-<ol>
-<li>Он считает `null` объектом, это внутренняя ошибка в языке.</li>
-<li>Для функций он возвращает `function`, по стандарту функция не считается базовым типом, но на практике это удобно и полезно.</li>
-</ol>
-</li>
-<li>Для встроенных объектов мы можем получить тип из скрытого свойства `[[Class]]`, при помощи вызова `{}.toString.call(obj).slice(8, -1)`. Не работает для конструкторов, которые объявлены нами.
-</li>
-<li>Оператор `obj instanceof Func` проверяет, создан ли объект `obj` функцией `Func`, работает для любых конструкторов. Более подробно мы разберём его в главе [](/instanceof).</li>
-<li>И, наконец, зачастую достаточно проверить не сам тип, а просто наличие нужных свойств или методов. Это называется "утиная типизация".</li>
-</ul>
-
diff --git a/1-js/7-js-misc/2-json/1-serialize-object/solution.md b/1-js/7-js-misc/2-json/1-serialize-object/solution.md
deleted file mode 100644
index 0893b44e..00000000
--- a/1-js/7-js-misc/2-json/1-serialize-object/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-```js
-var leader = {
-  name: "Василий Иванович",
-  age: 35
-};
-
-var leaderStr = JSON.stringify(leader);
-leader = JSON.parse(leaderStr);
-```
-
diff --git a/1-js/7-js-misc/2-json/1-serialize-object/task.md b/1-js/7-js-misc/2-json/1-serialize-object/task.md
deleted file mode 100644
index cc46554d..00000000
--- a/1-js/7-js-misc/2-json/1-serialize-object/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Превратите объект в JSON
-
-[importance 3]
-
-Превратите объект `leader` из примера ниже в JSON:
-
-```js
-var leader = {
-  name: "Василий Иванович",
-  age: 35
-};
-```
-
-После этого прочитайте получившуюся строку обратно в объект. 
diff --git a/1-js/7-js-misc/2-json/2-serialize-object-circular/solution.md b/1-js/7-js-misc/2-json/2-serialize-object-circular/solution.md
deleted file mode 100644
index 0ec62c2b..00000000
--- a/1-js/7-js-misc/2-json/2-serialize-object-circular/solution.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Ответ на первый вопрос
-
-Обычный вызов `JSON.stringify(team)` выдаст ошибку, так как объекты `leader` и `soldier` внутри структуры ссылаются друг на друга. 
-
-Формат JSON не предусматривает средств для хранения ссылок.
-
-# Варианты решения 
-
-Чтобы превращать такие структуры в JSON, обычно используются два подхода:
-
-<ol>
-<li>Добавить в `team` свой код `toJSON`:
-
-```js
-team.toJSON = function() {
-  /* свой код, который может создавать копию объекта без круговых ссылок и передавать управление JSON.stringify */
-}
-```
-
-При этом, конечно, понадобится и своя функция чтения из JSON, которая будет восстанавливать объект, а затем дополнять его круговыми ссылками.
-</li>
-<li>Можно учесть возможную проблему в самой структуре, используя вместо ссылок `id`. Как правило, это несложно, ведь на сервере у данных тоже есть идентификаторы.
-
-Изменённая структура может выглядеть так:
-
-```js
-var leader = {
-  id: 12,
-  name: "Василий Иванович"
-};
-
-var soldier = {
-  id: 51,
-  name: "Петька"
-};
-
-*!*
-// поменяли прямую ссылку на ID
-leader.soldierId = 51;
-soldier.leaderId = 12;
-*/!*
-
-var team = {
-  12: leader,
-  51: soldier
-};
-```
-
-..Но действительно ли это решение будет оптимальным? Использовать структуру стало сложнее, и вряд ли это изменение стоит делать лишь из-за JSON. Вот если есть другие преимущества, тогда можно подумать.
-</li>
-</ol>
-
-Универсальный вариант подхода, описанного выше -- это использование особой реализации JSON, которая не входит в стандарт и поддерживает расширенный формат для поддержки ссылок. 
-
-Она, к примеру, есть во фреймворке Dojo.
-
-При вызове `dojox.json.ref.toJson(team)` будет создано следующее строковое представление:
-
-```js
-//+ no-beautify
-[{"name":"Василий Иванович","soldier":{"name":"Петька","leader":{"$ref":"#0"}}},{"$ref":"#0.soldier"}]
-```
-
-Метод разбора такой строки -- также свой: `dojox.json.ref.fromJson`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/2-json/2-serialize-object-circular/task.md b/1-js/7-js-misc/2-json/2-serialize-object-circular/task.md
deleted file mode 100644
index 7aa131ef..00000000
--- a/1-js/7-js-misc/2-json/2-serialize-object-circular/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Превратите объекты со ссылками в JSON
-
-[importance 3]
-
-Превратите объект `team` из примера ниже в JSON:
-
-```js
-var leader = {
-  name: "Василий Иванович"
-};
-
-var soldier = {
-  name: "Петька"
-};
-
-// эти объекты ссылаются друг на друга!
-leader.soldier = soldier;
-soldier.leader = leader;
-
-var team = [leader, soldier];
-```
-
-<ol>
-<li>Может ли это сделать прямой вызов `JSON.stringify(team)`? Если нет, то почему?</li>
-<li>Какой подход вы бы предложили для чтения и восстановления таких объектов?</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/7-js-misc/2-json/article.md b/1-js/7-js-misc/2-json/article.md
deleted file mode 100644
index ad99b881..00000000
--- a/1-js/7-js-misc/2-json/article.md
+++ /dev/null
@@ -1,366 +0,0 @@
-# Формат JSON, метод toJSON
-
-В этой главе мы рассмотрим работу с форматом [JSON](http://ru.wikipedia.org/wiki/JSON), который используется для представления объектов в виде строки. 
-
-Это один из наиболее удобных форматов данных при взаимодействии с JavaScript. Если нужно с сервера взять объект с данными и передать на клиенте, то в качестве промежуточного формата -- для передачи по сети, почти всегда используют именно его.
-
-В современных браузерах есть замечательные методы, знание тонкостей которых делает операции с JSON простыми и комфортными.
-
-[cut]
-
-## Формат JSON
-
-Данные в формате JSON ([RFC 4627](http://tools.ietf.org/html/rfc4627)) представляют собой:
-<ul>
-<li>JavaScript-объекты `{ ... }` или</li>
-<li>Массивы `[ ... ]` или</li>
-<li>Значения одного из типов:
-<ul>
-<li>строки в двойных кавычках,</li>
-<li>число,</li>
-<li>логическое значение `true`/`false`,</li>
-<li>`null`.</li>
-</ul>
-</li>
-</ul>
-
-Почти все языки программирования имеют библиотеки для преобразования объектов в формат JSON.
-
-Основные методы для работы с JSON в JavaScript -- это:
-<ul>
-<li>`JSON.parse` -- читает объекты из строки в формате JSON.</li>
-<li>`JSON.stringify` -- превращает объекты в строку в формате JSON, используется, когда нужно из JavaScript передать данные по сети.</li>
-</ul>
-
-## Метод JSON.parse
-
-Вызов `JSON.parse(str)` превратит строку с данными в формате JSON в JavaScript-объект/массив/значение.
-
-Например:
-
-```js
-//+ run
-var numbers = "[0, 1, 2, 3]";
-
-numbers = JSON.parse(numbers);
-
-alert( numbers[1] ); // 1
-```
-
-Или так:
-
-```js
-//+ run
-var user = '{ "name": "Вася", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';
-
-user = JSON.parse(user);
-
-alert( user.friends[1] ); // 1
-```
-
-Данные могут быть сколь угодно сложными, объекты и массивы могут включать в себя другие объекты и массивы. Главное чтобы они соответствовали формату.
-
-[warn header="JSON-объекты ≠ JavaScript-объекты"]
-Объекты в формате JSON похожи на обычные JavaScript-объекты, но отличаются от них более строгими требованиями к строкам -- они должны быть именно в двойных кавычках.
-
-В частности, первые два свойства объекта ниже -- некорректны:
-
-```js
-{
-  *!*name*/!*: "Вася",       // ошибка: ключ name без кавычек!
-  "surname": *!*'Петров'*/!*,// ошибка: одинарные кавычки у значения 'Петров'!
-  "age": 35           // .. а тут всё в порядке.
-  "isAdmin": false    // и тут тоже всё ок
-}
-```
-
-Кроме того, в формате JSON не поддерживаются комментарии. Он предназначен только для передачи данных.
-
-Есть нестандартное расширение формата JSON, которое называется [JSON5](http://json5.org/) и как раз разрешает ключи без кавычек, комментарии и т.п, как в обычном JavaScript. На данном этапе, это отдельная библиотека.
-[/warn]
-
-## Умный разбор: JSON.parse(str, reviver)
-
-Метод `JSON.parse` поддерживает и более сложные алгоритмы разбора.
-
-Например, мы получили с сервера объект с данными события `event`.
-
-Он выглядит так:
-
-```js
-// title: название собятия, date: дата события
-var str = '{"title":"Конференция","date":"2012-11-30T12:00:00.000Z"}';
-```
-
-...И теперь нужно *восстановить* его, то есть превратить в JavaScript-объект.
-
-Попробуем вызвать для этого `JSON.parse`:
-
-```js
-//+ run
-var str = '{"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}';
-
-var event = JSON.parse(str);
-
-*!*
-alert( event.date.getDate() ); // ошибка!
-*/!*
-```
-
-...Увы, ошибка!
-
-Дело в том, что значением `event.date` является строка, а отнюдь не объект `Date`. Откуда методу `JSON.parse` знать, что нужно превратить строку именно в дату?
-
-**Для интеллектуального восстановления из строки у `JSON.parse(str, reviver)` есть второй параметр `reviver`, который является функцией `function(key, value)`.**
-
-Если она указана, то в процессе чтения объекта из строки `JSON.parse` передаёт ей по очереди все создаваемые пары ключ-значение и может возвратить либо преобразованное значение, либо `undefined`, если его нужно пропустить.
-
-В данном случае мы можем создать правило, что ключ `date` всегда означает дату:
-
-```js
-//+ run
-// дата в строке - в формате UTC
-var str = '{"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}';
-
-*!*
-var event = JSON.parse(str, function(key, value) {
-  if (key == 'date') return new Date(value);
-  return value;
-});
-*/!*
-
-alert( event.date.getDate() ); // теперь сработает!
-```
-
-Кстати, эта возможность работает и для вложенных объектов тоже:
-
-```js
-//+ run
-var schedule = '{ \
-  "events": [ \
-    {"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}, \
-    {"title":"День рождения","date":"2015-04-18T12:00:00.000Z"} \
-  ]\
-}';
-
-schedule = JSON.parse(schedule, function(key, value) {
-  if (key == 'date') return new Date(value);
-  return value;
-});
-
-*!*
-alert( schedule.events[1].date.getDate() ); // сработает!
-*/!*
-```
-
-## Сериализация, метод JSON.stringify
-
-Метод `JSON.stringify(value, replacer, space)` преобразует ("сериализует") значение в JSON-строку. 
-
-Пример использования:
-
-```js
-//+ run
-var event = {
-  title: "Конференция",
-  date: "сегодня"
-};
-
-var str = JSON.stringify(event);
-alert( str ); // {"title":"Конференция","date":"сегодня"}
-
-// Обратное преобразование.
-event = JSON.parse(str);
-```
-
-**При сериализации объекта вызывается его метод `toJSON`.**
-
-Если такого метода нет -- перечисляются его свойства, кроме функций.
-
-Посмотрим это в примере посложнее:
-
-```js
-//+ run
-var room = {
-  number: 23,
-  occupy: function() {
-    alert( this.number );
-  }
-};
-
-event = {
-  title: "Конференция",
-  date: new Date(Date.UTC(2014, 0, 1)),
-  room: room
-};
-
-alert( JSON.stringify(event) );
-/*
-  {
-    "title":"Конференция",
-    "date":"2014-01-01T00:00:00.000Z",  // (1)
-    "room": {"number":23}               // (2)
-  }
-*/
-```
-
-Обратим внимание на два момента:
-<ol>
-<li>Дата превратилась в строку. Это не случайно: у всех дат есть встроенный метод `toJSON`. Его результат в данном случае -- строка в таймзоне UTC.</li>
-<li>У объекта `room` нет метода `toJSON`. Поэтому он сериализуется перечислением свойств.
-
-Мы, конечно, могли бы добавить такой метод, тогда в итог попал бы его результат:
-
-```js
-//+ run
-var room = {
-  number: 23,
-*!*
-  toJSON: function() {
-      return this.number;
-    }
-*/!*
-};
-
-alert( JSON.stringify(room) ); // 23
-```
-
-</li>
-</ol>
-
-### Исключение свойств
-
-Попытаемся преобразовать в JSON объект, содержащий ссылку на DOM.
-
-Например:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  age: 25,
-  window: window
-};
-
-*!*
-alert( JSON.stringify(user) ); // ошибка!
-// TypeError: Converting circular structure to JSON (текст из Chrome)
-*/!*
-```
-
-Произошла ошибка! В чём же дело, неужели некоторые объекты запрещены? Как видно из текста ошибки -- дело совсем в другом. Глобальный объект `window` -- сложная структура с кучей встроенных свойств и круговыми ссылками, поэтому его преобразовать невозможно. Да и нужно ли?
-
-**Во втором параметре `JSON.stringify(value, replacer)` можно указать массив свойств, которые подлежат сериализации.**
-
-Например:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  age: 25,
-  window: window
-};
-
-*!*
-alert( JSON.stringify(user, ["name", "age"]) );
-// {"name":"Вася","age":25}
-*/!*
-```
-
-Для более сложных ситуаций вторым параметром можно передать функцию `function(key, value)`, которая возвращает сериализованное `value` либо `undefined`, если его не нужно включать в результат:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  age: 25,
-  window: window
-};
-
-*!*
-var str = JSON.stringify(user, function(key, value) {
-  if (key == 'window') return undefined;
-  return value;
-});
-*/!*
-
-alert( str ); // {"name":"Вася","age":25}
-```
-
-В примере выше функция пропустит свойство с названием `window`. Для остальных она просто возвращает значение, передавая его стандартному алгоритму. А могла бы и как-то обработать.
-
-[smart header="Функция `replacer` работает рекурсивно"]
-То есть, если объект содержит вложенные объекты, массивы и т.п., то все они пройдут через `replacer`. 
-[/smart]
-
-### Красивое форматирование
-
-В методе `JSON.stringify(value, replacer, space)` есть ещё третий параметр `space`.
-
-Если он является числом -- то уровни вложенности в JSON оформляются указанным количеством пробелов, если строкой -- вставляется эта строка.
-
-Например:
-
-```js
-//+ run
-var user = {
-  name: "Вася",
-  age: 25,
-  roles: {
-    isAdmin: false,
-    isEditor: true
-  }
-};
-
-*!*
-var str = JSON.stringify(user, "", 4);
-*/!*
-
-alert( str );
-/* Результат -- красиво сериализованный объект:
-{
-    "name": "Вася",
-    "age": 25,
-    "roles": {
-        "isAdmin": false,
-        "isEditor": true
-    }
-}
-*/
-```
-
-## Итого
-
-<ul>
-<li>JSON -- формат для представления объектов (и не только) в виде строки.</li>
-<li>Методы [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) и [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) позволяют интеллектуально преобразовать объект в строку и обратно.</li>
-</ul>
-
-
-
-[head]
-<script>
-function voteSync(outputElem) {
-  var xhr = new XMLHttpRequest(); // (1)
-
-  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', false); 
-  xhr.send(null);   // (2)
-
-  outputElem.innerHTML = xhr.responseText;  // (3)
-}
-
-function vote(outputElem) {
-  var xhr = new XMLHttpRequest();
-
-  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', true);
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState != 4) return;
-    outputElem.innerHTML = xhr.responseText;
-  }
-
-  xhr.send(null);
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/solution.md
deleted file mode 100644
index f6e7fbcd..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/solution.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-```js
-//+ run
-function printNumbersInterval() {
-  var i = 1;
-  var timerId = setInterval(function() {
-    console.log(i);
-    if (i == 20) clearInterval(timerId);
-    i++;
-  }, 100);
-}
-
-// вызов
-printNumbersInterval();
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/task.md
deleted file mode 100644
index dc2364f4..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/1-output-numbers-100ms/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Вывод чисел каждые 100мс
-
-[importance 5]
-
-Напишите функцию `printNumbersInterval()`, которая последовательно выводит в консоль числа от 1 до 20, с интервалом между числами 100мс. То есть, весь вывод должен занимать 2000мс, в течение которых каждые 100мс в консоли появляется очередное число.
-
-Нажмите на кнопку, открыв консоль, для демонстрации:
-<script> 
-function printNumbersInterval() {
-  var i = 1;
-  var timerId = setInterval(function() {
-    console.log(i);
-    if (i == 20) clearInterval(timerId);
-    i++;
-  }, 100);
-}
-</script>
-<button onclick="printNumbersInterval()">printNumbersInterval()</button>
-</script>
-
-P.S. Функция должна использовать `setInterval`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md
deleted file mode 100644
index bc23dd04..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-```js
-//+ run
-function printNumbersTimeout20_100() {
-  var i = 1;
-  var timerId = setTimeout(function go() {
-    console.log(i);
-    if (i < 20) setTimeout(go, 100);
-    i++;
-  }, 100);
-}
-
-// вызов
-printNumbersTimeout20_100();
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md
deleted file mode 100644
index 8334753f..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Вывод чисел каждые 100мс, через setTimeout
-
-[importance 5]
-
-Сделайте то же самое, что в задаче [](/task/output-numbers-100ms), но с использованием рекурсивного `setTimeout` вместо `setInterval`. 
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/solution.md
deleted file mode 100644
index 13c70041..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-**Нужно выбрать вариант 2, который гарантирует браузеру свободное время между выполнениями `highlight`.**
-
-Первый вариант может загрузить процессор на 100%, если `highlight` занимает время, близкое к 10мс или, тем более, большее чем 10мс, т.к. таймер не учитывает время выполнения функции. 
-
-Что интересно, в обоих случаях браузер не будет выводить предупреждение о том, что скрипт занимает много времени. Но от 100% загрузки процессора возможны притормаживания других операций. В общем, это совсем не то, что мы хотим, поэтому вариант 2.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/task.md
deleted file mode 100644
index afe1d6fd..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/3-highlight-tactics/task.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Для подсветки setInterval или setTimeout?
-
-[importance 5]
-
-Стоит задача: реализовать подсветку синтаксиса в длинном коде при помощи JavaScript, для онлайн-редактора кода. Это требует сложных вычислений, особенно загружает процессор генерация дополнительных элементов страницы, визуально осуществляющих подсветку. 
-
-Поэтому решаем обрабатывать не весь код сразу, что привело бы к зависанию скрипта, а разбить работу на части: подсвечивать по 20 строк раз в 10мс.
-
-Как мы знаем, есть два варианта реализации такой подсветки:
-
-<ol>
-<li>Через `setInterval`, с остановкой по окончании работы:
-
-```js
-timer = setInterval(function() {
-  if (есть еще что подсветить) highlight();
-  else clearInterval(timer);
-}, 10);
-```
-
-</li>
-<li>Через рекурсивный `setTimeout`:
-
-```js
-setTimeout(function go() {
-  highlight();
-  if (есть еще что подсветить) setTimeout(go, 10);
-}, 10);
-```
-
-</li>
-</ol>
-
-Какой из них стоит использовать? Почему?
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/solution.md
deleted file mode 100644
index ea95474b..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-Ответы:
-<ul>
-<li>`alert` выведет `100000000`.</li>
-<li>**3**, срабатывание будет после окончания работы `hardWork`.</li>
-</ul>
-
-
-Так будет потому, что вызов планируется на `100мс` от времени вызова `setTimeout`, но функция выполняется больше, чем `100мс`, поэтому к моменту ее окончания время уже подошло и отложенный вызов выполняется тут же. 
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/task.md
deleted file mode 100644
index 8c2de36d..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/4-settimeout-result/task.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Что выведет setTimeout?
-
-[importance 5]
-
-В коде ниже запланирован запуск `setTimeout`, а затем запущена тяжёлая функция `hardWork`, выполнение которой занимает более долгое время, чем интервал до срабатывания таймера. 
-
-Когда сработает `setTimeout`? Выберите нужный вариант:
-<ol>
-<li>До выполнения `hardWork`.</li>
-<li>Во время выполнения `hardWork`.</li>
-<li>Сразу же по окончании `hardWork`.</li>
-<li>Через 100мс после окончания `hardWork`.</li>
-</ol>
-
-Что выведет `alert` в коде ниже?
-
-```js
-setTimeout(function() {
-  alert( i );
-}, 100);
-
-var i;
-
-function hardWork() {
-  // время выполнения этого кода >100мс, сам код неважен
-  for (i = 0; i < 1e8; i++) hardWork[i % 2] = i;
-}
-
-hardWork();
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/solution.md
deleted file mode 100644
index 1fe34f89..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/solution.md
+++ /dev/null
@@ -1,37 +0,0 @@
-Вызов `alert(i)` в `setTimeout` введет `100000001`. 
-
-Можете проверить это запуском:
-
-```js
-//+ run
-var timer = setInterval(function() {
-  i++;
-}, 10);
-
-setTimeout(function() {
-  clearInterval(timer);
-*!*
-  alert( i ); // (*)
-*/!*
-}, 50);
-
-var i;
-
-function f() {
-  // точное время выполнения не играет роли
-  // здесь оно заведомо больше 100мс
-  for (i = 0; i < 1e8; i++) f[i % 2] = i;
-}
-
-f();
-```
-
-Правильный вариант срабатывания: **3** (сразу же по окончании `f` один раз).
-
-Планирование `setInterval` будет вызывать функцию каждые `10мс` после текущего времени. Но так как интерпретатор занят долгой функцией, то до конца ее работы никакого вызова не происходит.
-
-За время выполнения `f` может пройти время, на которое запланированы несколько вызовов `setInterval`, но в этом случае остается только один, т.е. накопления вызовов не происходит. Такова логика работы `setInterval`. 
-
-После окончания текущего скрипта интерпретатор обращается к очереди запланированных вызовов, видит в ней `setInterval` и выполняет. А затем тут же выполняется  `setTimeout`, очередь которого тут же подошла. 
-
-Итого, как раз и видим, что `setInterval` выполнился ровно 1 раз по окончании работы функции. Такое поведение кросс-браузерно.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/task.md
deleted file mode 100644
index 84461c2d..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/5-setinterval-result/task.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Что выведет после setInterval?
-
-[importance 5]
-
-В коде ниже запускается `setInterval` каждые 10мс, и через 50мс запланирована его отмена.
-
-После этого запущена тяжёлая функция `f`, выполнение которой (мы точно знаем) потребует более 100мс. 
-
-Сработает ли `setInterval`, как и когда?
-
-Варианты:
-<ol>
-<li>Да, несколько раз, *в процессе* выполнения `f`.</li>
-<li>Да, несколько раз, *сразу после* выполнения `f`.</li>
-<li>Да, один раз, *сразу после* выполнения `f`.</li>
-<li>Нет, не сработает.</li>
-<li>Может быть по-разному, как повезёт.</li>
-</ol>
-
-Что выведет `alert` в строке `(*)`?
-
-```js
-var i;
-var timer = setInterval(function() { // планируем setInterval каждые 10мс
-  i++;
-}, 10);
-
-setTimeout(function() { // через 50мс - отмена setInterval
-  clearInterval(timer);
-*!*
-  alert( i ); // (*)
-*/!*
-}, 50);
-
-// и запускаем тяжёлую функцию
-function f() {
-  // точное время выполнения не играет роли
-  // здесь оно заведомо больше 100мс
-  for (i = 0; i < 1e8; i++) f[i % 2] = i;
-}
-
-f();
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/solution.md
deleted file mode 100644
index 9d8afe0d..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/solution.md
+++ /dev/null
@@ -1,55 +0,0 @@
-Задача -- с небольшим "нюансом".
-
-Есть браузеры, в которых на время работы JavaScript таймер "застывает", например таков IE. В них количество шагов будет почти одинаковым, +-1.
-
-В других браузерах (Chrome) первый бегун будет быстрее.
-
-Создадим реальные объекты `Runner` и запустим их для проверки:
-
-```js
-//+ run
-function Runner() {
-  this.steps = 0;
-
-  this.step = function() {
-    this.doSomethingHeavy();
-    this.steps++;
-  };
-
-  function fib(n) {
-    return n <= 1 ? n : fib(n - 1) + fib(n - 2);
-  }
-
-  this.doSomethingHeavy = function() {
-    for (var i = 0; i < 25; i++) {
-      this[i] = fib(i);
-    }
-  };
-
-}
-
-var runner1 = new Runner();
-var runner2 = new Runner();
-
-// запускаем бегунов
-var t1 = setInterval(function() {
-  runner1.step();
-}, 15);
-
-var t2 = setTimeout(function go() {
-  runner2.step();
-  t2 = setTimeout(go, 15);
-}, 15);
-
-// кто сделает больше шагов?
-setTimeout(function() {
-  clearInterval(t1);
-  clearTimeout(t2);
-  alert( runner1.steps );
-  alert( runner2.steps );
-}, 5000);
-```
-
-Если бы в шаге `step()` не было вызова `doSomethingHeavy()`, то есть он бы не требовал времени, то количество шагов было бы почти равным.
-
-Но так как у нас шаг, всё же, что-то делает, и функция `doSomethingHeavy()` специально написана таким образом, что она требует (небольшого) времени, то первый бегун успеет сделать больше шагов. Ведь в `setTimeout` пауза `15` мс будет *между* шагами, а `setInterval` шагает равномерно, каждые `15` мс. Получается чаще.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/task.md
deleted file mode 100644
index 85d20a37..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/6-who-runs-faster/task.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Кто быстрее?
-
-[importance 5]
-
-Есть два бегуна:
-
-```js
-var runner1 = new Runner();
-var runner2 = new Runner();
-```
-
-У каждого есть метод `step()`, который делает шаг, увеличивая свойство `steps`. 
-
-Конкретный код метода `step()` не имеет значения, важно лишь что шаг делается не мгновенно, он требует небольшого времени. 
-
-Если запустить первого бегуна через `setInterval`, а второго -- через вложенный `setTimeout` -- какой сделает больше шагов за 5 секунд?
-
-```js
-// первый?
-setInterval(function() {
-  runner1.step();
-}, 15);
-
-// или второй?
-setTimeout(function go() {
-  runner2.step();
-  setTimeout(go, 15);
-}, 15);
-
-setTimeout(function() {
-  alert( runner1.steps );
-  alert( runner2.steps );
-}, 5000);
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/solution.js b/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/solution.js
deleted file mode 100644
index 62271941..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/solution.js
+++ /dev/null
@@ -1,12 +0,0 @@
-function delay(f, ms) {
-
-  return function() {
-    var savedThis = this;
-    var savedArgs = arguments;
-
-    setTimeout(function() {
-      f.apply(savedThis, savedArgs);
-    }, ms);
-  };
-
-}
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/test.js b/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/test.js
deleted file mode 100644
index 964ccf60..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/_js.view/test.js
+++ /dev/null
@@ -1,46 +0,0 @@
-describe("delay", function() {
-  before(function() {
-    this.clock = sinon.useFakeTimers();
-  });
-
-  after(function() {
-    this.clock.restore();
-  });
-
-  it("вызывает функцию через указанный таймаут", function() {
-    var start = Date.now();
-
-    function f(x) {
-      assert.equal(Date.now() - start, 1000);
-    }
-    f = sinon.spy(f);
-
-    var f1000 = delay(f, 1000);
-    f1000("test");
-    this.clock.tick(2000);
-    assert(f.calledOnce, 'calledOnce check fails');
-  });
-
-  it("передаёт аргументы и контекст", function() {
-    var start = Date.now();
-    var user = {
-      sayHi: function(phrase, who) {
-        assert.equal(this, user);
-        assert.equal(phrase, "Привет");
-        assert.equal(who, "Вася");
-        assert.equal(Date.now() - start, 1500);
-      }
-    };
-
-    user.sayHi = sinon.spy(user.sayHi);
-
-    var spy = user.sayHi;
-    user.sayHi = delay(user.sayHi, 1500);
-
-    user.sayHi("Привет", "Вася");
-
-    this.clock.tick(2000);
-
-    assert(spy.calledOnce, 'проверка calledOnce не сработала');
-  });
-});
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/solution.md
deleted file mode 100644
index 2044ff9b..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/solution.md
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-```js
-//+ run
-function delay(f, ms) {
-
-*!*
-  return function() {
-    var savedThis = this;
-    var savedArgs = arguments;
-
-    setTimeout(function() {
-      f.apply(savedThis, savedArgs);
-    }, ms);
-  };
-*/!*
-
-}
-
-function f(x) {
-  alert( x );
-}
-
-var f1000 = delay(f, 1000);
-var f1500 = delay(f, 1500);
-
-f1000("тест"); // выведет "тест" через 1000 миллисекунд
-f1500("тест2"); // выведет "тест2" через 1500 миллисекунд
-```
-
-Обратим внимание на то, как работает обёртка:
-
-```js
-return function() {
-  var savedThis = this;
-  var savedArgs = arguments;
-
-  setTimeout(function() {
-    f.apply(savedThis, savedArgs);
-  }, ms);
-};
-```
-
-Именно обёртка возвращается декоратором `delay` и будет вызвана. Чтобы передать аргумент и контекст функции, вызываемой через `ms` миллисекунд, они копируются в локальные переменные `savedThis` и `savedArgs`. 
-
-Это один из самых простых, и в то же время удобных способов передать что-либо в функцию, вызываемую через `setTimeout`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/task.md
deleted file mode 100644
index f198d7b9..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/7-delay/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Функция-задержка
-
-[importance 5]
-
-Напишите функцию `delay(f, ms)`, которая возвращает обёртку вокруг `f`, задерживающую вызов на `ms` миллисекунд.
-
-Например:
-
-```js
-function f(x) {
-  alert( x );
-}
-
-var f1000 = delay(f, 1000);
-var f1500 = delay(f, 1500);
-
-f1000("тест"); // выведет "тест" через 1000 миллисекунд
-f1500("тест2"); // выведет "тест2" через 1500 миллисекунд
-```
-
-Упрощённо можно сказать, что `delay` возвращает "задержанный на `ms`" вариант `f`.
-
-В примере выше у функции только один аргумент, но `delay` должна быть универсальной: передавать любое количество аргументов и контекст `this`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/solution.js b/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/solution.js
deleted file mode 100644
index e52efb87..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/solution.js
+++ /dev/null
@@ -1,19 +0,0 @@
-function debounce(f, ms) {
-
-  var state = null;
-
-  var COOLDOWN = 1;
-
-  return function() {
-    if (state) return;
-
-    f.apply(this, arguments);
-
-    state = COOLDOWN;
-
-    setTimeout(function() {
-      state = null
-    }, ms);
-  }
-
-}
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/test.js b/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/test.js
deleted file mode 100644
index 860cd6dd..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/_js.view/test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-describe("debounce", function() {
-  before(function() {
-    this.clock = sinon.useFakeTimers();
-  });
-
-  after(function() {
-    this.clock.restore();
-  });
-
-  it("вызывает функцию не чаще чем раз в ms миллисекунд", function() {
-    var log = '';
-
-    function f(a) {
-      log += a;
-    }
-
-    f = debounce(f, 1000);
-
-    f(1); // выполнится сразу же
-    f(2); // игнор
-
-    setTimeout(function() {
-      f(3)
-    }, 100); // игнор (рановато)
-    setTimeout(function() {
-      f(4)
-    }, 1100); // выполнится (таймаут прошёл)
-    setTimeout(function() {
-      f(5)
-    }, 1500); // игнор
-
-    this.clock.tick(5000);
-    assert.equal(log, "14");
-  });
-
-  it("сохраняет контекст вызова", function() {
-    var obj = {
-      f: function() {
-        assert.equal(this, obj);
-      }
-    };
-
-    obj.f = debounce(obj.f, 1000);
-    obj.f("test");
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/solution.md
deleted file mode 100644
index d5fc55e1..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/solution.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-```js
-//+ run no-beautify
-function debounce(f, ms) {
-
-  var state = null;
-
-  var COOLDOWN = 1;
-
-  return function() {
-    if (state) return;
-
-    f.apply(this, arguments);
-
-    state = COOLDOWN;
-
-    setTimeout(function() { state = null }, ms);
-  }
-
-}
-
-function f(x) { alert(x) }
-var f = debounce(f, 1000);
-
-f(1); // 1, выполнится сразу же
-f(2); // игнор
-
-setTimeout( function() { f(3) }, 100); // игнор (прошло только 100мс)
-setTimeout( function() { f(4) }, 1100); // 4, выполнится
-setTimeout( function() { f(5) }, 1500); // игнор
-```
-
-Вызов `debounce` возвращает функцию-обёртку. Все необходимые данные для неё хранятся в замыкании.
-
-При вызове ставится таймер и состояние `state` меняется на константу `COOLDOWN` ("в процессе охлаждения").
-
-Последующие вызовы игнорируются, пока таймер не обнулит состояние.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/task.md
deleted file mode 100644
index 31b9f540..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/8-debounce/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Вызов не чаще чем в N миллисекунд
-
-[importance 5]
-
-Напишите функцию `debounce(f, ms)`, которая возвращает обёртку, которая передаёт вызов `f` не чаще, чем раз в `ms` миллисекунд.
-
-"Лишние" вызовы игнорируются. Все аргументы и контекст -- передаются.
-
-Например:
-
-```js
-//+ no-beautify
-function f() { ... }
-
-var f = debounce(f, 1000);
-
-f(1); // выполнится сразу же
-f(2); // игнор
-
-setTimeout( function() { f(3) }, 100); // игнор (прошло только 100мс)
-setTimeout( function() { f(4) }, 1100); // выполнится
-setTimeout( function() { f(5) }, 1500); // игнор
-```
-
-Упрощённо можно сказать, что `debounce` возвращает вариант `f`, срабатывающий не чаще чем раз в `ms` миллисекунд.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/solution.js b/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/solution.js
deleted file mode 100644
index a8011c6b..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/solution.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function throttle(func, ms) {
-
-  var isThrottled = false,
-    savedArgs,
-    savedThis;
-
-  function wrapper() {
-
-    if (isThrottled) {
-      savedArgs = arguments;
-      savedThis = this;
-      return;
-    }
-
-    func.apply(this, arguments);
-
-    isThrottled = true;
-
-    setTimeout(function() {
-      isThrottled = false;
-      if (savedArgs) {
-        wrapper.apply(savedThis, savedArgs);
-        savedArgs = savedThis = null;
-      }
-    }, ms);
-  }
-
-  return wrapper;
-}
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/test.js b/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/test.js
deleted file mode 100644
index 1627e857..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/_js.view/test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-describe("throttle(f, 1000)", function() {
-  var f1000;
-  var log = "";
-
-  function f(a) {
-    log += a;
-  }
-
-  before(function() {
-    f1000 = throttle(f, 1000);
-    this.clock = sinon.useFakeTimers();
-  });
-
-  it("первый вызов срабатывает тут же", function() {
-    f1000(1); // такой вызов должен сработать тут же
-    assert.equal(log, "1");
-  });
-
-  it("тормозит второе срабатывание до 1000мс", function() {
-    f1000(2); // (тормозим, не прошло 1000мс)
-    f1000(3); // (тормозим, не прошло 1000мс)
-    // через 1000 мс запланирован вызов с последним аргументом 
-
-    assert.equal(log, "1"); // пока что сработал только первый вызов
-
-    this.clock.tick(1000); // прошло 1000мс времени
-    assert.equal(log, "13"); // log==13, т.к. сработал вызов f1000(3)
-  });
-
-  it("тормозит третье срабатывание до 1000мс после второго", function() {
-    this.clock.tick(100);
-    f1000(4); // (тормозим, с последнего вызова прошло 100мс - менее 1000мс)
-    this.clock.tick(100);
-    f1000(5); // (тормозим, с последнего вызова прошло 200мс - менее 1000мс)
-    this.clock.tick(700);
-    f1000(6); // (тормозим, с последнего вызова прошло 900мс - менее 1000мс)
-
-    this.clock.tick(100); // сработал вызов с 6
-
-    assert.equal(log, "136");
-  });
-
-  after(function() {
-    this.clock.restore();
-  });
-
-});
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/solution.md b/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/solution.md
deleted file mode 100644
index 306f2977..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/solution.md
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-```js
-function throttle(func, ms) {
-
-  var isThrottled = false,
-    savedArgs,
-    savedThis;
-
-  function wrapper() {
-
-    if (isThrottled) { // (2)
-      savedArgs = arguments;
-      savedThis = this;
-      return;
-    }
-
-    func.apply(this, arguments); // (1)
-
-    isThrottled = true;
-
-    setTimeout(function() {
-      isThrottled = false; // (3)
-      if (savedArgs) {
-        wrapper.apply(savedThis, savedArgs);
-        savedArgs = savedThis = null;
-      }
-    }, ms);
-  }
-
-  return wrapper;
-}
-```
-
-Шаги работы этой функции:
-<ol>
-<li>Декоратор `throttle` возвращает функцию-обёртку `wrapper`, которая при первом вызове запускает `func` и переходит в состояние "паузы" (`isThrottled = true`).</li>
-<li>В этом состоянии все новые вызовы запоминаются в замыкании через `savedArgs/savedThis`. Обратим внимание, что и контекст вызова и аргументы для нас одинаково важны и запоминаются одновременно. Только зная и то и другое, можно воспроизвести вызов правильно.</li>
-<li>Далее, когда пройдёт таймаут `ms` миллисекунд -- пауза будет снята, а `wrapper` -- запущен с последними аргументами и контекстом (если во время паузы были вызовы).</li>
-</ol>
-
-Шаг `(3)` запускает именно не саму функцию, а снова `wrapper`, так как необходимо не только выполнить `func`, но и снова поставить выполнение на паузу. Получается последовательность "вызов - пауза.. вызов - пауза .. вызов - пауза ...", каждое выполнение в обязательном порядке сопровождается паузой после него. Это удобно описывается рекурсией.
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/task.md b/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/task.md
deleted file mode 100644
index aaf5956b..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/9-throttle/task.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Тормозилка
-
-[importance 5]
-
-Напишите функцию `throttle(f, ms)` -- "тормозилку", которая возвращает обёртку, передающую вызов `f` не чаще, чем раз в `ms` миллисекунд.
-
-**У этой функции должно быть важное существенное отличие от `debounce`:** если игнорируемый вызов оказался последним, т.е. после него до окончания задержки ничего нет -- то он выполнится.
-
-Чтобы лучше понять, откуда взялось это требование, и как `throttle` должна работать -- разберём реальное применение, на которое и ориентирована эта задача.
-
-**Например, нужно обрабатывать передвижения мыши.** 
-
-В JavaScript это делается функцией, которая будет запускаться при каждом микро-передвижении мыши и получать координаты курсора. По мере того, как мышь двигается, эта функция может запускаться очень часто, может быть 100 раз в секунду (каждые 10мс).
-
-**Функция обработки передвижения должна обновлять некую информацию на странице.** 
-
-При этом обновление -- слишком "тяжёлый" процесс, чтобы делать его при каждом микро-передвижении. Имеет смысл делать его раз в 100мс, не чаще. 
-
-Пусть функция, которая осуществляет это обновление по передвижению, называется `onmousemove`.
-
-Вызов `throttle(onmousemove, 100)`, по сути, предназначен для того, чтобы "притормаживать" обработку `onmousemove`. Технически, он должен возвращать обёртку, которая передаёт все вызовы `onmousemove`, но не чаще чем раз в 100мс.
-
-**При этом промежуточные движения можно игнорировать, но мышь в конце концов где-то остановится. И это последнее, итоговое положение мыши обязательно нужно обработать!**
-
-Визуально это даст следующую картину обработки перемещений мыши:
-<ol>
-<li>Первое обновление произойдёт сразу (это важно, посетитель тут же видит реакцию на своё действие).</li>
-<li>Дальше может быть много вызовов (микро-передвижений) с разными координатами, но пока не пройдёт 100мс -- ничего не будет.</li>
-<li>По истечении 100мс -- опять обновление, с последними координатами. Промежуточные микро-передвижения игнорированы.</li>
-<li>В конце концов мышь где-то остановится, обновление по окончании очередной паузы 100мс  сработает с последними координатами.</li>
-</ol>
-
-Ещё раз заметим -- задача из реальной жизни, и в ней принципиально важно, что *последнее* передвижение обрабатывается. Пользователь должен увидеть, где остановил мышь. 
-
-Пример использования:
-
-```js
-var f = function(a) {
-  console.log(a)
-};
-
-// затормозить функцию до одного раза в 1000 мс
-var f1000 = throttle(f, 1000);
-
-f1000(1); // выведет 1
-f1000(2); // (тормозим, не прошло 1000мс)
-f1000(3); // (тормозим, не прошло 1000мс)
-
-// когда пройдёт 1000мс...
-// выведет 3, промежуточное значение 2 игнорируется
-```
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/article.md b/1-js/7-js-misc/3-setTimeout-setInterval/article.md
deleted file mode 100644
index a85c0550..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/article.md
+++ /dev/null
@@ -1,326 +0,0 @@
-# setTimeout и setInterval
-
-Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.
-
-В частности, эта возможность поддерживается в браузерах и в сервере Node.JS.
-
-[cut]
-## setTimeout
-
-Синтаксис:
-
-```js
-var timerId = setTimeout(func / code, delay[, arg1, arg2...])
-```
-
-Параметры:
-
-<dl>
-<dt>`func/code`</dt>
-<dd>Функция или строка кода для исполнения. 
-Строка поддерживается для совместимости, использовать её не рекомендуется.</dd>
-<dt>`delay`</dt>
-<dd>Задержка в милисекундах, 1000 милисекунд равны 1 секунде.</dd>
-<dt>`arg1`, `arg2`...</dt>
-<dd>Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.</dd>
-</dl>
-
-Исполнение функции произойдёт спустя время, указанное в параметре `delay`. 
-
-Например, следующий код вызовет `func()` через одну секунду:
-
-```js
-//+ run
-function func() {
-  alert( 'Привет' );
-}
-
-*!*
-setTimeout(func, 1000);
-*/!*
-```
-
-С передачей аргументов (не сработает в IE9-):
-
-```js
-//+ run
-function func(phrase, who) {
-  alert( phrase + ', ' + who );
-}
-
-*!*
-setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася
-*/!*
-```
-
-Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.
-
-То есть такая запись тоже сработает:
-
-```js
-//+ run no-beautify
-setTimeout("alert('Привет')", 1000);
-```
-
-Однако, использование строк не рекомендуется, так как они могут вызвать проблемы при минимизации кода, и, вообще, сама возможность использовать строку сохраняется лишь для совместимости.
-
-Вместо них используйте анонимные функции, вот так:
-
-```js
-//+ run no-beautify
-setTimeout(function() { alert('Привет') }, 1000);
-```
-
-### Отмена исполнения clearTimeout
-
-Функция `setTimeout` возвращает числовой идентификатор таймера `timerId`, который можно использовать для отмены действия.
-
-Синтаксис:
-
-```js
-var timerId = setTimeout(...);
-clearTimeout(timerId);
-```
-
-В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.
-
-```js
-//+ run no-beautify
-var timerId = setTimeout(function() { alert(1) }, 1000);
-alert(timerId); // число - идентификатор таймера
-
-clearTimeout(timerId);
-alert(timerId); // всё ещё число, оно не обнуляется после отмены
-```
-
-Как видно из `alert`, в браузере идентификатор таймера является обычным числом. Другие JavaScript-окружения, например Node.JS, могут возвращать объект таймера, с дополнительными методами.
-
-**Такие разночтения вполне соответствуют стандарту просто потому, что в спецификации JavaScript про таймеры нет ни слова.**
-
-Таймеры -- это надстройка над JavaScript, которая описана в [секции Timers](http://www.w3.org/TR/html5/webappapis.html#timers) стандарта HTML5 для браузеров и в [документации к Node.JS](http://nodejs.org/docs/latest/api/timers.html) -- для сервера. 
-
-## setInterval   
-
-Метод `setInterval` имеет синтаксис, аналогичный `setTimeout`.
-
-```js
-var timerId = setInterval(func / code, delay[, arg1, arg2...])
-```
-
-Смысл аргументов -- тот же самый. Но, в отличие от `setTimeout`, он запускает выполнение функции не один раз, а  регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом `clearInterval(timerId)`.
-
-Следующий пример при запуске станет выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:
-
-```js
-//+ run
-// начать повторы с интервалом 2 сек
-var timerId = setInterval(function() {
-  alert( "тик" );
-}, 2000);
-
-// через 5 сек остановить повторы
-setTimeout(function() {
-  clearInterval(timerId);
-  alert( 'стоп' );
-}, 5000);
-```
-
-[smart header="Модальные окна замораживают время в Chrome/Opera/Safari"]
-Что будет, если долго не жать `OK` на появившемся `alert`? Это зависит от браузера. 
-
-В браузерах Chrome, Opera и Safari внутренний таймер "заморожен" во время показа `alert/confirm/prompt`. А вот в IE и Firefox внутренний таймер продолжит идти.
-
-Поэтому, если закрыть `alert` после небольшой паузы, то в Firefox/IE следующий `alert` будет показан сразу же (время подошло), а в Chrome/Opera/Safari -- только через 2 секунды после закрытия. 
-[/smart]
-
-
-### Рекурсивный setTimeout
-
-Важная альтернатива `setInterval` -- рекурсивный `setTimeout`:
-
-```js
-/** вместо:
-var timerId = setInterval(function() { 
-  alert( "тик" );
-}, 2000);
-*/
-
-var timerId = setTimeout(function tick() {
-  alert( "тик" );
-*!*
-  timerId = setTimeout(tick, 2000);
-*/!*
-}, 2000);
-```
-
-В коде выше следующее выполнение планируется сразу после окончания предыдущего.
-
-**Рекурсивный `setTimeout` -- более гибкий метод тайминга, чем `setInterval`, так как время до следующего выполнения можно запланировать по-разному, в зависимости от результатов текущего.**
-
-Например, у нас есть сервис, который в 5 секунд опрашивает сервер на предмет новых данных. В случае, если сервер перегружен, можно увеличивать интервал опроса до 10, 20, 60 секунд... А потом вернуть обратно, когда всё нормализуется.
-
-Если у нас регулярно проходят грузящие процессор задачи, то мы можем оценивать время, потраченное на их выполнение, и планировать следующий запуск раньше или позже.
-
-**Рекурсивный `setTimeout` гарантирует паузу между вызовами, `setInterval` -- нет.**
-
-Давайте сравним два кода. Первый использует `setInterval`:
-
-```js
-var i = 1;
-setInterval(function() {
-  func(i);
-}, 100);
-```
-
-Второй использует рекурсивный `setTimeout`:
-
-```js
-var i = 1;
-setTimeout(function run() {
-  func(i);
-  setTimeout(run, 100);
-}, 100);
-```
-
-При `setInterval` внутренний таймер будет срабатывать чётко каждые `100` мс и вызывать `func(i)`:
-
-<img src="setinterval-interval.png">
-
-Вы обратили внимание?...
-
-**Реальная пауза между вызовами `func` при `setInterval` меньше, чем указана в коде!**
-
-Это естественно, ведь время работы функции никак не учитывается, оно "съедает" часть интервала. 
-
-Возможно и такое что `func` оказалась сложнее, чем мы рассчитывали и выполнялась дольше, чем 100мс. 
-
-В этом случае интерпретатор будет ждать, пока функция завершится, затем проверит таймер и, если время вызова `setInterval` уже подошло (или прошло), то следующий вызов произойдёт *сразу же*.
-
-**Если функция и выполняется дольше, чем пауза `setInterval`, то вызовы будут происходить вообще без перерыва.**
-
-Исключением является IE, в котором таймер "застывает" во время выполнения JavaScript.
-
-А так будет выглядеть картинка с рекурсивным `setTimeout`:
-
-<img src="settimeout-interval.png">
-
-**При рекурсивном `setTimeout` задержка всегда фиксирована и равна 100мс.**
-
-Это происходит потому, что каждый новый запуск планируется только после окончания текущего.
-
-[smart header="Управление памятью"]
-Сборщик мусора в JavaScript не чистит функции, назначенные в таймерах, пока таймеры актуальны. 
-
-При передаче функции в `setInterval/setTimeout` создаётся внутренняя ссылка на неё, через которую браузер её будет запускать, и которая препятствует удалению из памяти, даже если функция анонимна.
-
-```js
-// Функция будет жить в памяти, пока не сработал (или не был очищен) таймер
-setTimeout(function() {}, 100);
-```
-
-<ul>
-<li>Для `setTimeout` -- внутренняя ссылка исчезнет после исполнения функции.</li>
-<li>Для `setInterval` -- ссылка исчезнет при очистке таймера.</li>
-</ul>
-
-Так как функция также тянет за собой всё замыкание, то ставшие неактуальными, но не отменённые `setInterval` могут приводить к излишним тратам памяти.
-[/smart]
-
-
-## Минимальная задержка таймера
-
-У браузерного таймера есть минимальная возможная задержка. Она меняется от примерно нуля до 4мс в современных браузерах. В более старых она может быть больше и достигать 15мс.
-
-По [стандарту](http://www.w3.org/TR/html5/webappapis.html#timers), минимальная задержка составляет 4мс.  Так что нет разницы между `setTimeout(..,1)` и `setTimeout(..,4)`. 
-
-Посмотреть минимальное разрешение "вживую" можно на следующем примере.
-
-**В примере ниже каждая полоска удлиняется вызовом `setInterval` с указанной на ней задержкой -- от 0мс (сверху) до 20мс (внизу).**
-
-Позапускайте его в различных браузерах. Вы заметите, что несколько первых полосок анимируются с одинаковой скоростью. Это как раз потому, что слишком маленькие задержки таймер не различает.
-
-[iframe border="1" src="setinterval-anim" link edit]
-
-[warn]
-В Internet Explorer, нулевая задержка `setInterval(.., 0)` не сработает. Это касается именно `setInterval`, т.е. `setTimeout(.., 0)` работает нормально. 
-[/warn]
-
-[smart header="Откуда взялись эти 4мс?"]
-Почему минимальная задержка -- 4мс, а не 1мс? Зачем она вообще существует?
-
-Это -- "привет" от прошлого. Браузер Chrome как-то пытался убрать минимальную задержку в своих ранних версиях, но оказалось, что существуют сайты, которые используют `setTimeout(..,0)` рекурсивно, создавая тем самым "асинхронный цикл". И, если задержку совсем убрать, то будет 100% загрузка процессора, такой сайт "подвесит" браузер.
-
-Поэтому, чтобы не ломать существующие скрипты, решили сделать задержку. По возможности, небольшую. На время создания стандарта оптимальным числом показалось 4мс.
-[/smart]
-
-## Реальная частота срабатывания
-
-В ряде ситуаций таймер будет срабатывать реже, чем обычно. Задержка между вызовами  `setInterval(..., 4)` может быть не 4мс, а 30мс или даже 1000мс.
-
-<ul>
-<li>Большинство браузеров (десктопных в первую очередь) продолжают выполнять `setTimeout/setInterval`, даже если вкладка неактивна.
-
-При этом ряд из них (Chrome, FF, IE10) снижают минимальную частоту таймера, до 1 раза в секунду. Получается, что в "фоновой" вкладке будет срабатывать таймер, но редко.</li>
-<li>При работе от батареи, в ноутбуке -- браузеры тоже могут снижать частоту, чтобы реже выполнять код и экономить заряд батареи. Особенно этим известен IE. Снижение может достигать нескольких раз, в зависимости от настроек.</li>
-<li>При слишком большой загрузке процессора JavaScript может не успевать обрабатывать таймеры вовремя. При этом некоторые запуски `setInterval` будут пропущены.</li>
-</ul>
-
-**Вывод: на частоту 4мс стоит ориентироваться, но не стоит рассчитывать.**
-
-[online]
-Посмотрим снижение частоты в действии на небольшом примере. 
-
-
-При клике на кнопку ниже запускается `setInterval(..., 90)`, который выводит список интервалов времени между 25 последними срабатываниями таймера. Запустите его. Перейдите на другую вкладку и вернитесь.
-
-<div id="timer-interval-log"></div>
-
-<button onclick="timerIntervalLog()">Запустить повтор с интервалом в 90 мс</button> 
-<button onclick="clearInterval(timerIntervalLogTimer)">Остановить повтор</button>
-
-<script>
-var timerIntervalLogTimer;
-function timerIntervalLog() {
-  var arr = [];
-  var d = new Date;
-  timerIntervalLogTimer = setInterval(function() {
-    var diff = new Date - d;
-    if (diff > 100) diff = '<span style="color:red">'+diff+'</span>';
-    arr.push( diff );
-    if (arr.length > 25) arr.shift();
-    document.getElementById('timer-interval-log').innerHTML = arr;
-    d = new Date;
-  }, 90);
-}
-</script>
-
-Если ваш браузер увеличивает таймаут при фоновом выполнении вкладки, то вы увидите увеличенные интервалы, помеченные <span style="color:red">красным</span>.
-
-Кроме того, вы заметите, что таймер не является идеально точным ;)
-[/online]
-
-## Разбивка долгих скриптов
-
-Нулевой или небольшой таймаут также используют, чтобы разорвать поток выполнения "тяжелых" скриптов.
-
-Например, скрипт для подсветки синтаксиса должен проанализировать код, создать много цветных элементов для подсветки и добавить их в документ -- на большом файле это займёт много времени, браузер может даже подвиснуть, что неприемлемо.
-
-Для того, чтобы этого избежать, сложная задача разбивается на части, выполнение каждой части запускается через мини-интервал после предыдущей, чтобы дать браузеру время. 
-
-Например, осуществляется анализ и подсветка первых 100 строк, затем через 20 мс -- следующие 100 строк и так далее. При этом можно подстраиваться под CPU посетителя: замерять время на анализ 100 строк и, если процессор хороший, то в следующий раз обработать 200 строк, а если плохой -- то 50. В итоге подсветка будет работать с адекватной быстротой и без тормозов на любых текстах и компьютерах.
-
-## Итого
-
-<ul>
-<li>Методы `setInterval(func, delay)` и `setTimeout(func, delay)` позволяют запускать `func` регулярно/один раз через `delay` миллисекунд.</li>
-<li>Оба метода возвращают идентификатор таймера. Его используют для остановки выполнения вызовом `clearInterval/clearTimeout`.</li>
-<li>В случаях, когда нужно гарантировать задержку между регулярными вызовами или гибко её менять, вместо `setInterval` используют рекурсивный `setTimeout`.</li>
-<li>Минимальная задержка по стандарту составляет `4мс`. Браузеры соблюдают этот стандарт, но некоторые другие среды для выполнения JS, например Node.JS, могут предоставить и меньше задержки.</li>
-<li>В реальности срабатывания таймера могут быть гораздо реже, чем назначено, например если процессор перегружен, вкладка находится в фоновом режиме, ноутбук работает от батареи или по какой-то иной причине.</li>
-
-Браузерных особенностей почти нет, разве что вызов `setInterval(..., 0)` с нулевой задержкой в IE недопустим, нужно указывать `setInterval(..., 1)`.
-
-
-
-
-
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/setInterval-anim.view/index.html b/1-js/7-js-misc/3-setTimeout-setInterval/setInterval-anim.view/index.html
deleted file mode 100755
index caa33217..00000000
--- a/1-js/7-js-misc/3-setTimeout-setInterval/setInterval-anim.view/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      height: 18px;
-      margin: 1px;
-      background-color: green;
-    }
-  </style>
-</head>
-
-<body>
-
-  <input type="button" id="start" value="Старт">
-  <input type="button" id="stop" value="Стоп" disabled>
-
-  <script>
-    for (var i = 0; i <= 20; i += 2) {
-      document.write('<div>' + i + '</div>');
-    }
-
-    var startButton = document.getElementById('start');
-    var stopButton = document.getElementById('stop');
-
-    var timers = [];
-
-    stopButton.onclick = function() {
-      startButton.disabled = false;
-      stopButton.disabled = true;
-
-      for (var i = 0; i < timers.length; i++) clearInterval(timers[i]);
-      timers = [];
-    }
-
-    startButton.onclick = function() {
-      startButton.disabled = true;
-      stopButton.disabled = false;
-
-      var divs = document.getElementsByTagName('div');
-      for (var i = 0; i < divs.length; i++) {
-        animateDiv(divs, i);
-      }
-    }
-
-    function animateDiv(divs, i) {
-      var div = divs[i],
-        speed = div.innerHTML;
-      timers[i] = setInterval(function() {
-        div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
-      }, speed);
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.png b/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.png
deleted file mode 100644
index 0a815bdb..00000000
Binary files a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.png and /dev/null differ
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval@2x.png b/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval@2x.png
deleted file mode 100644
index 1e764160..00000000
Binary files a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval@2x.png and /dev/null differ
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.png b/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.png
deleted file mode 100644
index b6909cc2..00000000
Binary files a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.png and /dev/null differ
diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval@2x.png b/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval@2x.png
deleted file mode 100644
index 657ec0db..00000000
Binary files a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval@2x.png and /dev/null differ
diff --git a/1-js/7-js-misc/4-eval/1-eval-calculator/solution.md b/1-js/7-js-misc/4-eval/1-eval-calculator/solution.md
deleted file mode 100644
index 0ad14328..00000000
--- a/1-js/7-js-misc/4-eval/1-eval-calculator/solution.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Вычислить любое выражение нам поможет `eval`:
-
-```js
-//+ demo run
-var expr = prompt("Введите выражение?", '2*3+2');
-
-alert( eval(expr) );
-```
-
-При этом посетитель потенциально может делать все, что угодно.
-
-Чтобы ограничить выражения только математикой, вводимую строку нужно проверять при помощи [регулярных выражений](/regular-expressions-javascript) на наличие любых символов, кроме букв, пробелов и знаков пунктуации. 
diff --git a/1-js/7-js-misc/4-eval/1-eval-calculator/task.md b/1-js/7-js-misc/4-eval/1-eval-calculator/task.md
deleted file mode 100644
index 771b005f..00000000
--- a/1-js/7-js-misc/4-eval/1-eval-calculator/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Eval-калькулятор
-
-[importance 4]
-
-Напишите интерфейс, который принимает математическое выражение (`prompt`) и возвращает его результат.
-
-Проверять выражение на корректность не требуется.
-
-[demo /]
diff --git a/1-js/7-js-misc/4-eval/article.md b/1-js/7-js-misc/4-eval/article.md
deleted file mode 100644
index 7f8ab9e2..00000000
--- a/1-js/7-js-misc/4-eval/article.md
+++ /dev/null
@@ -1,266 +0,0 @@
-# Запуск кода из строки: eval 
-
-Функция `eval(code)` позволяет выполнить код, переданный ей в виде строки.
-
-Этот код будет выполнен в *текущей области видимости*.
-[cut]
-
-## Использование eval
-
-В простейшем случае `eval` всего лишь выполняет код, например:
-
-```js
-//+ run no-beautify
-var a = 1;
-
-(function() {
-
-  var a = 2; 
-  
-*!*
-  eval(' alert(a) '); // 2
-*/!*
-
-})()
-```
-
-Но он может не только выполнить код, но и вернуть результат.
-
-**Вызов `eval` возвращает последнее вычисленное выражение**:
-
-Например:
-
-```js
-//+ run
-alert( eval('1+1') ); // 2
-```
-
-**При вызове `eval` имеет полный доступ к локальным переменным.**
-
-Это означает, что текущие переменные могут быть изменены или дополнены:
-
-```js
-//+ untrusted refresh run
-var x = 5;
-eval(" alert( x ); x = 10"); // 5, доступ к старому значению
-alert( x ); // 10, значение изменено внутри eval
-```
-
-[smart header="В строгом режиме `eval` имеет свою область видимости "]
-В строгом режиме функционал `eval` чуть-чуть меняется. 
-
-При `use strict` код внутри `eval` по-прежнему сможет читать и менять внешние переменные, однако переменные и функции, объявленные внутри `eval`, не попадут наружу.
-
-```js
-//+ untrusted refresh run
-"use strict";
-
-*!*
-eval("var a = 5; function f() { }");
-*/!*
-alert( a ); // ошибка, переменная не определена
-// функция f тоже не видна снаружи
-```
-
-Иными словами, в новом стандарте `eval` имеет свою область видимости, а к внешним переменным обращается через замыкание, аналогично тому, как работают обычные функции.
-[/smart]
-
-## Неграмотное использование eval
-
-Начнём с того, что `eval` применяется очень редко. Действительно редко. Есть даже такое выражение "eval is evil" (eval -- зло).
-
-Причина проста: когда-то JavaScript был гораздо более слабым языком, чем сейчас, и некоторые вещи без `eval` было сделать невозможно. Но те времена давно прошли. И теперь найти тот случай, когда действительно надо выполнить код из строки -- это надо постараться. 
-
-Но если вы действительно знаете, что это именно тот случай и вам необходим `eval` -- есть ряд вещей, которые нужно иметь в виду.
-
-Доступ к локальным переменным -- худшее, что можно сделать при `eval`.
-
-Дело в том, что локальные переменные могут быть легко переименованы:
-
-```js
-function sayHi() {
-  var phrase = "Привет";
-  eval(str);
-}
-```
-
-Переменная `phrase` может быть переименована в `hello`, и если строка `str` обращается к ней -- будет ошибка.
-
-Современные средства сжатия JavaScript переименовывают локальные переменные автоматически. Это считается безопасным, так как локальная переменная видна лишь внутри функции и если в ней везде поменять `phrase` на `p`, то никто этого не заметит.
-
-До сжатия:
-
-```js
-function sayHi() {
-  var phrase = "Привет";
-  alert( phrase );
-}
-```
-
-После сжатия:
-
-```js
-function sayHi() {
-  var a = "Привет";
-  alert( a );
-}
-```
-
-На самом деле всё ещё проще -- в данном случае утилита сжатия автоматически уберёт переменную `a` и код станет таким:
-
-```js
-function sayHi() {
-  alert( "Привет" );
-}
-```
-
-Итак, если где-то в функции есть `eval`, то его взаимодействие с локальными переменными будет нарушено с непредсказуемыми побочными эффектами.
-
-Некоторые инструменты сжатия предупреждают, когда видят `eval` или стараются вообще не сжимать такой код вместе с его внешними функциями, но всё это борьба с последствиями кривого кода.
-
-Как правило, `eval` не нужен, именно поэтому говорят, "eval is evil". 
-
-## Запуск скрипта в глобальной области
-
-Ок, взаимодействовать с локальными переменными нельзя. 
-
-Но допустим мы загрузили с сервера или вручную сгенерировали скрипт, который нужно выполнить. Желательно, в глобальной области, вне любых функций, чтобы он уж точно к локальным переменным отношения не имел.
-
-Здесь `eval` может пригодиться. Есть два трюка для выполнения кода в глобальной области:
-
-<ol>
-<li>Везде, кроме IE8-, достаточно вызвать `eval` не напрямую, а через `window.eval`. 
-
-Вот так:
-
-```js
-//+ run no-beautify
-var a = 1;
-
-(function() {
-
-  var a = 2; 
-*!*  
-  window.eval(' alert(a) '); // 1, выполнено глобально везде, кроме IE8-
-*/!*
-})();
-```
-
-</li>
-<li>В IE8- можно применить нестандартную фунцию [execScript](http://msdn.microsoft.com/en-us/library/ie/ms536420%28v=vs.85%29.aspx). Она, как и `eval`, выполняет код, но всегда в глобальной области видимости и не возвращает значение.</li>
-</ol>
-
-Оба способа можно объединить в единой функции `globalEval(code)`, выполняющей код без доступа к локальным переменным:
-
-```js
-//+ run no-beautify
-*!*
-function globalEval(code) { // объединим два способа в одну функцию
-  window.execScript ? execScript(code) : window.eval(code);
-}
-*/!*
-
-var a = 1;
-
-(function() {
-
-  var a = 2; 
-  
-  globalEval(' alert(a) '); // 1, во всех браузерах
-
-})();
-```
-
-## Внешние данные через new Function
-
-Итак, у нас есть код, который, всё же, нужно выполнить динамически, через `eval`, но не просто скрипт -- а ему нужно передать какие-то значения.
-
-Как мы говорили ранее, считать их из локальных переменных нельзя: это подвержено ошибкам при переименовании переменных и сразу ломается при сжатии JavaScript. Да и вообще, неочевидно и криво.
-
-**К счастью, существует отличная альтернатива `eval`, которая позволяет корректно взаимодействовать c внешним кодом: `new Function`.**
-
-Вызов `new Function('a,b', '..тело..')` создает функцию с указанными аргументами `a,b` и телом. Как мы помним, доступа к текущему замыканию у такой функции не будет, но можно передать параметры и получить результат.
-
-Например:
-
-```js
-//+ run
-var a = 2,
-  b = 3;
-
-*!*
-// вместо обращения к a,b через eval
-// будем принимать их как аргументы динамически созданной функции
-var mul = new Function('a, b', ' return a * b;');
-*/!*
-
-alert( mul(a, b) ); // 6
-```
-
-## JSON и eval
-
-В браузерах IE7- не было методов `JSON.stringify` и `JSON.parse`, поэтому работа с JSON происходила через `eval`.
-
-Этот способ работы с JSON давно устарел, но его можно встретить кое-где в старом коде, так что для примера рассмотрим его.
-
-Вызов `eval(code)` выполняет код и, если это выражение, то возвращает его значение, поэтому можно в качестве кода передать JSON.
-
-Например:
-
-```js
-//+ run
-var str = '{ \
-    "name": "Вася", \
-    "age": 25 \
-}';
-
-*!*
-var user = eval('(' + str + ')');
-*/!*
-
-alert( user.name ); // Вася
-```
-
-Зачем здесь нужны скобки `eval( '(' + str + ')' )`, почему не просто `eval(str)`? 
-
-...Всё дело в том, что в JavaScript с фигурной скобки `{` начинаются не только объекты, а в том числе и "блоки кода". Что имеется в виду в данном случае -- интерпретатор определяет по контексту. Если в основном потоке кода -- то блок, если в контексте выражения, то объект.
-
-Поэтому если передать в `eval` объект напрямую, то интерпретатор подумает, что это на самом деле блок кода, а там внутри какие-то двоеточия... 
-
-Вот, для примера, `eval` без скобок, он выдаст ошибку:
-
-```js
-//+ run
-var user = eval('{  "name": "Вася",  "age": 25  }');
-```
-
-А если `eval` получает выражение в скобках `( ... )`, то интерпретатор точно знает, что это не блок кода, а объект:
-
-```js
-//+ run
-var user = eval('( {  "name": "Вася",  "age": 25  } )');
-alert( user.age ); // 25
-```
-
-[warn header="Осторожно, злой JSON!"]
-Если мы получаем JSON из недоверенного источника, например с чужого сервера, то разбор через `eval` может быть опасен.
-
-Например, чужой сервер может быть взломан (за свой-то код мы отвечаем, а за чужой -- нет) и вместо JSON вставлен злонамеренный JavaScript-код.
-
-**Поэтому рекомендуется, всё же, использовать `JSON.parse`.**
-
-При разборе через `JSON.parse` некорректный JSON просто приведёт к ошибке, а вот при разборе через `eval` этот код реально выполнится, он может вывести что-то на странице, перенаправить посетителя куда-то и т.п.
-[/warn]
-
-
-## Итого
-
-<ul>
-<li>Функция `eval(str)` выполняет код и возвращает последнее вычисленное выражение. В современном JavaScript она используется редко.</li>
-<li>Вызов `eval` может читать и менять локальные переменные. Это -- зло, которого нужно избегать.</li>
-<li>Для выполнения скрипта в глобальной области используются трюк с `window.eval/execScript`. При этом локальные переменные не будут затронуты, так что такое выполнение безопасно и иногда, в редких архитектурах, может быть полезным.</li>
-<li>Если нужно выполняемый код всё же должен взаимодействовать с локальными переменными -- используйте `new Function`. Создавайте функцию из строки и передавайте переменные ей, это надёжно и безопасно.</li>
-</ul>
-
-Ещё примеры использования `eval` вы найдёте далее, в главе [](/json).
-
diff --git a/1-js/7-js-misc/5-exception/1-finally-or-code-after/solution.md b/1-js/7-js-misc/5-exception/1-finally-or-code-after/solution.md
deleted file mode 100644
index 5befa284..00000000
--- a/1-js/7-js-misc/5-exception/1-finally-or-code-after/solution.md
+++ /dev/null
@@ -1,43 +0,0 @@
-Разница в поведении станет очевидной, если рассмотреть код внутри функции.
-
-Поведение будет различным, если управление каким-то образом выпрыгнет из `try..catch`.
-
-Например, `finally` сработает после `return`:
-
-```js
-function f() {
-  try {
-    ...
-*!*
-    return result;
-*/!*
-  } catch (e) {
-    ...
-  } finally {
-    очистить ресурсы
-  }
-}
-```
-
-Или же управление может выпрыгнуть из-за `throw`:
-
-```js
-function f() {
-  try {
-    ...
-
-  } catch (e) {
-    ...
-    if(не умею обрабатывать эту ошибку) {
-*!*
-      throw e;
-*/!*
-    }
-
-  } finally {
-    очистить ресурсы
-  }
-}
-```
-
-В этих случаях именно `finally` гарантирует выполнение кода до окончания работы `f`, просто код не будет вызван.
\ No newline at end of file
diff --git a/1-js/7-js-misc/5-exception/1-finally-or-code-after/task.md b/1-js/7-js-misc/5-exception/1-finally-or-code-after/task.md
deleted file mode 100644
index 5c93daf5..00000000
--- a/1-js/7-js-misc/5-exception/1-finally-or-code-after/task.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Finally или просто код?
-
-[importance 5]
-
-Сравните два фрагмента кода. 
-
-<ol>
-<li>Первый использует `finally` для выполнения кода по выходу из `try..catch`:
-
-```js
-try {
-  начать работу
-  работать
-} catch (e) {
-  обработать ошибку
-} finally {
-*!*
-  финализация: завершить работу
-*/!*
-}
-```
-
-</li>
-<li>Второй фрагмент просто ставит очистку ресурсов за `try..catch`:
-
-```js
-try {
-  начать работу
-} catch (e) {
-  обработать ошибку
-}
-
-*!*
-финализация: завершить работу
-*/!*
-```
-
-</li>
-</ol>
-
-Нужно, чтобы код финализации всегда выполнялся при выходе из блока `try..catch` и, таким образом, заканчивал начатую работу. Имеет ли здесь `finally` какое-то преимущество или оба фрагмента работают одинаково?
-
-Если имеет, то дайте пример когда код с `finally` работает верно, а без -- неверно.
diff --git a/1-js/7-js-misc/5-exception/2-eval-calculator-errors/solution.md b/1-js/7-js-misc/5-exception/2-eval-calculator-errors/solution.md
deleted file mode 100644
index a9cd06aa..00000000
--- a/1-js/7-js-misc/5-exception/2-eval-calculator-errors/solution.md
+++ /dev/null
@@ -1,36 +0,0 @@
-Вычислить любое выражение нам поможет `eval`:
-
-```js
-//+ run
-alert( eval("2+2") ); // 4
-```
-
-Считываем выражение в цикле `while(true)`. Если при вычислении возникает ошибка -- ловим её в `try..catch`. 
-
-Ошибкой считается, в том числе, получение `NaN` из `eval`, хотя при этом исключение не возникает. Можно бросить своё исключение в этом случае.
-
-Код решения:
-
-```js
-//+ run demo
-var expr, res;
-
-while (true) {
-  expr = prompt("Введите выражение?", '2-');
-  if (expr == null) break;
-
-  try {
-    res = eval(expr);
-    if (isNaN(res)) {
-      throw new Error("Результат неопределён");
-    }
-
-    break;
-  } catch (e) {
-    alert( "Ошибка: " + e.message + ", повторите ввод" );
-  }
-}
-
-alert( res );
-```
-
diff --git a/1-js/7-js-misc/5-exception/2-eval-calculator-errors/task.md b/1-js/7-js-misc/5-exception/2-eval-calculator-errors/task.md
deleted file mode 100644
index 73e5108f..00000000
--- a/1-js/7-js-misc/5-exception/2-eval-calculator-errors/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-#  Eval-калькулятор с ошибками
-
-[importance 5]
-
-Напишите интерфейс, который принимает математическое выражение (в `prompt`) и результат его вычисления через `eval`.
-
-**При ошибке нужно выводить сообщение и просить переввести выражение**. 
-
-Ошибкой считается не только некорректное выражение, такое как `2+`, но и выражение, возвращающее `NaN`, например `0/0`. 
-
-[demo /]
-
-
diff --git a/1-js/7-js-misc/5-exception/article.md b/1-js/7-js-misc/5-exception/article.md
deleted file mode 100644
index 42b30917..00000000
--- a/1-js/7-js-misc/5-exception/article.md
+++ /dev/null
@@ -1,590 +0,0 @@
-# Перехват ошибок, "try..catch"
-
-Как бы мы хорошо ни программировали, в коде бывают ошибки. Или, как их иначе называют, "исключительные ситуации" (исключения). 
-
-Обычно скрипт при ошибке, как говорят, "падает", с выводом ошибки в консоль.
-
-Но бывают случаи, когда нам хотелось бы как-то контролировать ситуацию, чтобы скрипт не просто "упал", а сделал что-то разумное.
-
-Для этого в JavaScript есть замечательная конструкция `try..catch`.
-
-[cut]
-
-## Конструкция try..catch 
-
-Конструкция `try..catch` состоит из двух основных блоков: `try`, и затем `catch`:
-
-```js
-try {
-
-  // код ...
-
-} catch (err) {
-
-  // обработка ошибки
-
-}
-```
-
-Работает она так:
-<ol>
-<li>Выполняется код внутри блока `try`.</li>
-<li>Если в нём ошибок нет, то блок `catch(err)` игнорируется, то есть выполнение доходит до конца `try` и потом прыгает через `catch`.</li>
-<li>Если в нём возникнет ошибка, то выполнение `try` на ней прерывается, и управление прыгает в начало блока `catch(err)`.
-
-При этом переменная `err` (можно выбрать и другое название) будет содержать объект ошибки с подробной информацией о произошедшем.</li>
-</ol>
-
-**Таким образом, при ошибке в `try` скрипт не "падает", и мы получаем возможность обработать ошибку внутри `catch`.**
-
-Посмотрим это на примерах.
-
-<ul>
-<li>Пример без ошибок: при запуске сработают `alert` `(1)` и `(2)`:
-
-```js
-//+ run
-try {
-
-  alert('Начало блока try');  // *!*(1) <--*/!*
-
-  // .. код без ошибок
-
-  alert('Конец блока try');   // *!*(2) <--*/!*
-
-} catch(e) {
-
-  alert('Блок catch не получит управление, так как нет ошибок'); // (3)
-
-}
-
-alert("Потом код продолжит выполнение...");
-```
-
-</li>
-<li>Пример с ошибкой: при запуске сработают `(1)` и `(3)`:
-
-```js
-//+ run
-try {
-
-  alert('Начало блока try');  // *!*(1) <--*/!*
-
-*!*
-  lalala; // ошибка, переменная не определена!
-*/!*
-
-  alert('Конец блока try');  // (2)
- 
-} catch(e) {
-
-  alert('Ошибка ' + e.name + ":" + e.message + "\n" + e.stack); // *!*(3) <--*/!*
-
-}
-
-alert("Потом код продолжит выполнение...");
-```
-
-</li> 
-</ul>
-
-[warn header="`try..catch` подразумевает, что код синтаксически верен"]
-Если грубо нарушена структура кода, например не закрыта фигурная скобка или где-то стоит лишняя запятая, то никакой `try..catch` здесь не поможет. Такие ошибки называются *синтаксическими*, интерпретатор не может понять такой код.
-
-Здесь же мы рассматриваем ошибки *семантические*, то есть происходящие в корректном коде, в процессе выполнения.
-[/warn]
-
-
-[warn header="`try..catch` работает только в синхронном коде"]
-Ошибку, которая произойдёт в коде, запланированном "на будущее", например, в `setTimeout`, `try..catch` не поймает:
-
-```js
-//+ run
-try {
-  setTimeout(function() {
-    throw new Error(); // вылетит в консоль
-  }, 1000);
-} catch (e) {
-  alert( "не сработает" );
-}
-```
-
-На момент запуска функции, назначенной через `setTimeout`, этот код уже завершится, интерпретатор выйдет из блока `try..catch`.
-
-Чтобы поймать ошибку внутри функции из `setTimeout`, и `try..catch` должен быть в той же функции.
-[/warn]
-
-
-## Объект ошибки
-
-В примере выше мы видим объект ошибки. У него есть три основных свойства:
-<dl>
-<dt>`name`</dt>
-<dd>Тип ошибки. Например, при обращении к несуществующей переменной: `"ReferenceError"`.</dd>
-<dt>`message`</dt>
-<dd>Текстовое сообщение о деталях ошибки.</dd>
-<dt>`stack`</dt>
-<dd>Везде, кроме IE8-, есть также свойство `stack`, которое содержит строку с информацией о последовательности вызовов, которая привела к ошибке.</dd>
-</dl>
-
-В зависимости от браузера, у него могут быть и дополнительные свойства, см. <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error">Error в MDN</a> и <a href="http://msdn.microsoft.com/en-us/library/dww52sbt%28v=vs.85%29.aspx">Error в MSDN</a>.
-
-## Пример использования
-
-В JavaScript есть встроенный метод [JSON.parse(str)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse), который используется для чтения JavaScript-объектов (и не только) из строки. 
-
-Обычно он используется для того, чтобы обрабатывать данные, полученные по сети, с сервера или из другого источника.
-
-Мы получаем их и вызываем метод `JSON.parse`, вот так:
-
-```js
-//+ run
-var data = '{"name":"Вася", "age": 30}'; // строка с данными, полученная с сервера
-
-var user = JSON.parse(data); // преобразовали строку в объект
-
-// теперь user -- это JS-объект с данными из строки
-alert( user.name ); // Вася
-alert( user.age ); // 30
-```
-
-Более детально формат JSON разобран в главе [](/json).
-
-**В случае, если данные некорректны, `JSON.parse` генерирует ошибку, то есть скрипт "упадёт".**
-
-Устроит ли нас такое поведение? Конечно нет!
-
-Получается, что если вдруг что-то не так с данными, то посетитель никогда (если, конечно, не откроет консоль) об этом не узнает.
-
-А люди очень-очень не любят, когда что-то "просто падает", без всякого объявления об ошибке.
-
-**Бывают ситуации, когда без `try..catch` не обойтись, это -- одна из таких.**
-
-Используем `try..catch`, чтобы обработать некорректный ответ:
-
-```js
-//+ run
-var data = "Has Error"; // в данных ошибка
-
-try {
-
-  var user = JSON.parse(data); // <-- ошибка при выполнении
-  alert( user.name ); // не сработает
-
-} catch (e) {
-  // ...выполнится catch
-  alert( "Извините, в данных ошибка, мы попробуем получить их ещё раз" );
-  alert( e.name );
-  alert( e.message );
-}
-```
-
-Здесь в `alert` только выводится сообщение, но область применения гораздо шире: можно повторять запрос, можно предлагать посетителю использовать альтернативный способ, можно отсылать информацию об ошибке на сервер... Свобода действий.
-
-## Генерация своих ошибок
-
-Представим на минуту, что данные являются корректным JSON... Но в этом объекте нет нужного свойства `name`:
-
-```js
-//+ run
-var data = '{ "age": 30 }'; // данные неполны
-
-try {
-
-  var user = JSON.parse(data); // <-- выполнится без ошибок
-*!*
-  alert( user.name ); // undefined
-*/!*
-
-} catch (e) {
-  // не выполнится
-  alert( "Извините, в данных ошибка" );
-}
-```
-
-Вызов `JSON.parse` выполнится без ошибок, но ошибка в данных есть. И, так как свойство `name` обязательно должно быть, то для нас это такие же некорректные данные как и `"Has Error"`.
-
-Для того, чтобы унифицировать и объединить обработку ошибок парсинга и ошибок в структуре, мы воспользуемся оператором `throw`.
-
-### Оператор throw
-
-Оператор `throw` генерирует ошибку. 
- 
-Синтаксис: `throw <объект ошибки>`. 
-
-Технически, в качестве объекта ошибки можно передать что угодно, это может быть даже не объект, а число или строка, но всё же лучше, чтобы это был объект, желательно -- совместимый со стандартным, то есть чтобы у него были как минимум свойства `name` и `message`.
-
-**В качестве конструктора ошибок можно использовать встроенный конструктор: `new Error(message)` или любой другой.**
-
-В JavaScript встроен ряд конструкторов для стандартных ошибок: `SyntaxError`, `ReferenceError`, `RangeError` и некоторые другие. Можно использовать и их, но только чтобы не было путаницы.
-
-В данном случае мы используем конструктор `new SyntaxError(message)`. Он создаёт ошибку того же типа, что и `JSON.parse`.
-
-```js
-//+ run
-var data = '{ "age": 30 }'; // данные неполны
-
-try {
-
-  var user = JSON.parse(data); // <-- выполнится без ошибок
-
-*!*
-  if (!user.name) {
-    throw new SyntaxError("Данные некорректны");
-  }
-*/!*
-
-  alert( user.name );
-
-} catch (e) {
-  alert( "Извините, в данных ошибка" );
-}
-```
-
-Получилось, что блок `catch` -- единое место для обработки ошибок во всех случаях: когда ошибка выявляется при `JSON.parse` или позже.
-
-## Проброс исключения
-
-В коде выше мы предусмотрели обработку ошибок, которые возникают при некорректных данных. Но может ли быть так, что возникнет какая-то другая ошибка?
-
-Конечно, может! Код -- это вообще мешок с ошибками, бывает даже так что библиотеку выкладывают в открытый доступ, она там 10 лет лежит, её смотрят миллионы людей и на 11й год находятся опаснейшие ошибки. Такова жизнь, таковы люди.
-
-Блок `catch` в нашем примере предназначен для обработки ошибок, возникающих при некорректных данных. Если же в него попала какая-то другая ошибка, то вывод сообщения о "некорректных данных" будет дезинформацией посетителя. 
-
-**Ошибку, о которой `catch` не знает, он не должен обрабатывать.**
-
-Такая техника называется *"проброс исключения"*: в `catch(e)` мы анализируем объект ошибки, и если он нам не подходит, то делаем `throw e`.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-При этом ошибка "выпадает" из `try..catch` наружу. Далее она может быть поймана либо внешним блоком `try..catch` (если есть), либо "повалит" скрипт.
-
-В примере ниже `catch` обрабатывает только ошибки `SyntaxError`, а остальные -- выбрасывает дальше:
-
-```js
-//+ run
-var data = '{ "name": "Вася", "age": 30 }'; // данные корректны
-
-try {
-
-  var user = JSON.parse(data);
-
-  if (!user.name) {
-    throw new SyntaxError("Ошибка в данных");
-  }
-
-*!*
-  blabla(); // произошла непредусмотренная ошибка
-*/!*
-
-  alert( user.name );
-
-} catch (e) {
-
-*!*
-  if (e.name == "SyntaxError") {
-    alert( "Извините, в данных ошибка" );
-  } else {
-    throw e;
-  }
-*/!*
-
-}
-```
-
-Заметим, что ошибка, которая возникла внутри блока `catch`, "выпадает" наружу, как если бы была в обычном коде.
-
-В следующем примере такие ошибки обрабатываются ещё одним, "более внешним" `try..catch`:
-
-```js
-//+ run
-function readData() {
-  var data = '{ "name": "Вася", "age": 30 }';
-
-  try {
-    // ...
-*!*
-    blabla(); // ошибка!
-*/!*
-  } catch (e) {
-    // ...
-*!*
-    if (e.name != 'SyntaxError') {
-      throw e; // пробрасываем
-    }
-*/!*
-  }
-}
-
-
-try {
-  readData();
-} catch (e) {
-*!*
-  alert( "Поймал во внешнем catch: " + e ); // ловим
-*/!*
-}
-```
-
-В примере выше `try..catch` внутри `readData` умеет обрабатывать только `SyntaxError`, а внешний -- все ошибки.
-
-Без внешнего проброшенная ошибка "вывалилась" бы в консоль, с остановкой скрипта. 
-
-## Оборачивание исключений
-
-И, для полноты картины -- последняя, самая продвинутая техника по работе с ошибками. Она, впрочем, является стандартной практикой во многих объектно-ориентированных языках.
-
-Цель функции `readData` в примере выше -- прочитать данные. При чтении могут возникать разные ошибки, не только `SyntaxError`, но и, возможно, к примеру, `URIError` (неправильное применение функций работы с URI), да и другие.
-
-Код, который вызвал `readData`, хотел бы иметь либо результат, либо информацию об ошибке.
-
-При этом очень важным является вопрос: обязан ли этот внешний код знать о всевозможных типах ошибок, которые могут возникать при чтении данных, и уметь перехватывать их?
-
-Обычно внешний код хотел бы работать "на уровень выше", и получать либо результат, либо "ошибку чтения данных", при этом какая именно ошибка произошла -- ему неважно. Ну, или, если будет важно, то хотелось бы иметь возможность это узнать, но обычно не требуется.
-
-Это важнейший общий подход к проектированию -- каждый участок функционала должен получать информацию на том уровне, который ему необходим. 
-
-Мы его видим везде в грамотно построенном коде, но не всегда отдаём себе в этом отчёт. 
-
-В данном случае, если при чтении данных происходит ошибка, то мы будем генерировать её в виде объекта `ReadError`, с соответствующим сообщением. А "исходную" ошибку -- на всякий случай тоже сохраним, присвоим в свойство `cause` (англ. -- причина).
-
-Выглядит это так:
-```js
-//+ run
-function ReadError(message, cause) {
-  this.message = message;
-  this.cause = cause;
-  this.name = 'ReadError';
-  this.stack = cause.stack;
-}
-
-function readData() {
-  var data = '{ bad data }';
-
-  try {
-    // ...
-    JSON.parse(data);
-    // ...
-  } catch (e) {
-    // ...
-    if (e.name == 'URIError') {
-      throw new ReadError("Ошибка в URI", e);
-    } else if (e.name == 'SyntaxError') {
-*!*
-      throw new ReadError("Синтаксическая ошибка в данных", e);
-*/!*
-    } else {
-      throw e; // пробрасываем
-    }
-  }
-}
-
-
-try {
-  readData();
-} catch (e) {
-  if (e.name == 'ReadError') {
-    alert( e.message );
-    alert( e.cause ); // оригинальная ошибка-причина
-  } else {
-    throw e;
-  }
-}
-```
-
-Этот подход называют "оборачиванием" исключения, поскольку мы берём ошибки "более низкого уровня" и "заворачиваем" их в `ReadError`, которая соответствует текущей задаче.
-
-## Секция finally  
-
-Конструкция `try..catch` может содержать ещё один блок: `finally`.
-
-Выглядит этот расширенный синтаксис так:
-
-```js
-*!*try*/!* {
-   .. пробуем выполнить код ..
-} *!*catch*/!*(e) {
-   .. перехватываем исключение ..
-} *!*finally*/!* {
-   .. выполняем всегда ..
-}
-```
-
-Секция `finally` не обязательна, но если она есть, то она выполняется всегда:
-<ul>
-<li>после блока `try`, если ошибок не было,</li>
-<li>после `catch`, если они были.</li>
-</ul>
-
-Попробуйте запустить такой код?
-
-```js
-//+ run
-try {
-  alert( 'try' );
-  if (confirm('Сгенерировать ошибку?')) BAD_CODE();
-} catch (e) {
-  alert( 'catch' );
-} finally {
-  alert( 'finally' );
-}
-```
-
-У него два варианта работы:
-<ol>
-<li>Если вы ответите на вопрос "Сгенерировать ошибку?" утвердительно, то `try -> catch -> finally`.</li>
-<li>Если ответите отрицательно, то `try -> finally`.
-</ol>
-
-**Секцию `finally` используют, чтобы завершить начатые операции при любом варианте развития событий.**
-
-Например, мы хотим подсчитать время на выполнение функции `sum(n)`, которая должна возвратить сумму чисел от `1` до `n` и работает рекурсивно:
-
-```js
-//+ run
-function sum(n) {
-  return n ? (n + sum(n - 1)) : 0;
-}
-
-var n = +prompt('Введите n?', 100);
-
-var start = new Date();
-
-try {
-  var result = sum(n);
-} catch (e) {
-  result = 0;
-*!*
-} finally {
-  var diff = new Date() - start;
-}
-*/!*
-
-alert( result ? result : 'была ошибка' );
-alert( "Выполнение заняло " + diff );
-```
-
-Здесь секция `finally` гарантирует, что время будет подсчитано в любых ситуациях -- при ошибке в `sum` или без неё.
-
-Вы можете проверить это, запустив код с указанием `n=100` -- будет без ошибки, `finally` выполнится после `try`, а затем с `n=100000` -- будет ошибка из-за слишком глубокой рекурсии, управление прыгнет в `finally` после `catch`.
-
-[smart header="`finally` и `return`"]
-  
-Блок `finally` срабатывает при *любом* выходе из `try..catch`, в том числе и `return`.
-
-В примере ниже, из `try` происходит `return`, но `finally` получает управление до того, как контроль возвращается во внешний код.
-
-```js
-//+ run
-function func() {
-
-  try {
-    // сразу вернуть значение
-    return 1;
-
-  } catch (e) {
-    /* ... */
-  } finally {
-*!*
-    alert( 'finally' );
-*/!*
-  }
-}
-
-alert( func() ); // сначала finally, потом 1
-```
-
-Если внутри `try` были начаты какие-то процессы, которые нужно завершить по окончании работы, во в `finally` это обязательно будет сделано.
-
-Кстати, для таких случаев иногда используют `try..finally` вообще без `catch`:
-
-```js
-//+ run
-function func() {
-  try {
-    return 1;
-  } finally {
-    alert( 'Вызов завершён' );
-  }
-}
-
-alert( func() ); // сначала finally, потом 1
-```
-
-В примере выше `try..finally` вообще не обрабатывает ошибки. Задача в другом -- выполнить код при любом выходе из `try` -- с ошибкой ли, без ошибок или через `return`.
-[/smart]
-
-
-## Последняя надежда: window.onerror
-
-Допустим, ошибка произошла вне блока `try..catch` или выпала из `try..catch` наружу, во внешний код. Скрипт упал.
-
-Можно ли как-то узнать о том, что произошло? Да, конечно.
-
-В браузере существует специальное свойство `window.onerror`, если в него записать функцию, то она выполнится и получит в аргументах сообщение ошибки, текущий URL и номер строки, откуда "выпала" ошибка.
-
-Необходимо лишь позаботиться, чтобы функция была назначена заранее. 
-
-Например:
-
-```html
-<!--+ run -->
-<script>
-*!*
-  window.onerror = function(message, url, lineNumber) {
-    alert("Поймана ошибка, выпавшая в глобальную область!\n" +
-      "Сообщение: " + message + "\n(" + url + ":" + lineNumber + ")");
-  };
-*/!*
-
-  function readData() {
-    error(); // ой, что-то не так
-  }
-
-  readData();
-</script>
-```
-
-Как правило, роль `window.onerror` заключается в том, чтобы не оживить скрипт -- скорее всего, это уже невозможно, а в том, чтобы отослать сообщение об ошибке на сервер, где разработчики о ней узнают.
-
-Существуют даже специальные веб-сервисы, которые предоставляют скрипты для отлова и аналитики таких ошибок, например: [](https://errorception.com/) или [](http://www.muscula.com/).
-
-
-## Итого
-
-Обработка ошибок -- большая и важная тема. 
-
-В JavaScript для этого предусмотрены:
-
-<ul>
-<li>Конструкция `try..catch..finally` -- она позволяет обработать произвольные ошибки в блоке кода.
-
-Это удобно в тех случаях, когда проще сделать действие и потом разбираться с результатом, чем долго и нудно проверять, не упадёт ли чего.
-
-Кроме того, иногда проверить просто невозможно, например `JSON.parse(str)` не позволяет "проверить" формат строки перед разбором. В этом случае блок `try..catch` необходим.
-
-Полный вид конструкции:
-
-```js
-*!*try*/!* {
-   .. пробуем выполнить код ..
-} *!*catch*/!*(e) {
-   .. перехватываем исключение ..
-} *!*finally*/!* { 
-   .. выполняем всегда ..
-}
-```
-
-Возможны также варианты `try..catch` или `try..finally`.</li>
-<li>Оператор `throw err` генерирует свою ошибку, в качестве `err` рекомендуется использовать объекты, совместимые с встроенным типом [Error](http://javascript.ru/Error), содержащие свойства `message` и `name`.</li>
-</ul>
-
-Кроме того, мы рассмотрели некоторые важные приёмы:
-
-<ul>
-<li>Проброс исключения -- `catch(err)` должен обрабатывать только те ошибки, которые мы рассчитываем в нём увидеть, остальные -- пробрасывать дальше через `throw err`.
-
-Определить, нужная ли это ошибка, можно, например, по свойству `name`.</li>
-<li>Оборачивание исключений -- функция, в процессе работы которой возможны различные виды ошибок, может "обернуть их" в одну общую ошибку, специфичную для её задачи, и уже её пробросить дальше. Чтобы, при необходимости, можно было подробно определить, что произошло, исходную ошибку обычно присваивают в свойство этой, общей. Обычно это нужно для логирования.</li>
-<li>В `window.onerror` можно присвоить функцию, которая выполнится при любой "выпавшей" из скрипта ошибке. Как правило, это используют в информационных целях, например отправляют информацию об ошибке на специальный сервис.</li>
-</ul>
-
-
diff --git a/1-js/7-js-misc/index.md b/1-js/7-js-misc/index.md
deleted file mode 100644
index 091a171f..00000000
--- a/1-js/7-js-misc/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Некоторые другие возможности
-
-Различные возможности JavaScript, которые достаточно важны, но не заслужили отдельного раздела.
\ No newline at end of file
diff --git a/1-js/8-oop/1-about-oop/article.md b/1-js/8-oop/1-about-oop/article.md
deleted file mode 100644
index 9039a50c..00000000
--- a/1-js/8-oop/1-about-oop/article.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Введение 
-
-На протяжении долгого времени в программировании применялся [процедурный подход](http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D0%B4%D1%83%D1%80%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5). При этом программа состоит из функций, вызывающих друг друга.
-	 
-Гораздо позже появилось [объектно-ориентированное программирование](http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) (ООП), которое позволяет группировать функции и данные в единой сущности -- "объекте".
- 	
-
-При объектно-ориентированной разработке мы описываем происходящее на уровне объектов, которые создаются, меняют свои свойства, взаимодействуют друг с другом и (в случае браузера) со страницей, в общем, живут.
-
-Например, "пользователь", "меню", "компонент интерфейса"... При объектно-ориентированном подходе каждый  объект должен представлять собой интуитивно понятную сущность, у которой есть методы и данные.
-
-[warn header="ООП -- это не просто объекты"]
-В JavaScript объекты часто используются просто как коллекции.
-
-Например, встроенный объект [Math](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math) содержит функции (`Math.sin`, `Math.pow`, ...) и данные (константа `Math.PI`).
- 
-При таком использовании объектов мы не можем сказать, что "применён объектно-ориентированный подход". В частности, никакую "единую сущность" `Math` из себя не представляет, это просто коллекция независимых функций с общим префиксом `Math`.
-[/warn]
- 	 	
-
-Мы уже работали в ООП-стиле, создавая объекты такого вида:
-
-```js
-//+ run
-function User(name) {
-
-  this.sayHi = function() {
-    alert( "Привет, я " + name );
-  };
-
-}
-
-var vasya = new User("Вася"); // создали пользователя
-vasya.sayHi(); // пользователь умеет говорить "Привет"
-```
-
-Здесь мы видим ярко выраженную сущность -- `User` (посетитель). Используя терминологию ООП, такие конструкторы часто называют *классами*, то есть можно сказать "класс `User`".
-
-[smart header="Класс в ООП"]
-[Классом]("https://en.wikipedia.org/wiki/Class_(computer_programming)") в объектно-ориентированной разработке называют шаблон/программный код, предназначенный для создания объектов и методов. 
-
-В JavaScript классы можно организовать по-разному. Говорят, что класс `User` написан в "функциональном" стиле. Далее мы также увидим "прототипный" стиль.
-[/smart]
-
-ООП -- это наука о том, как делать правильную архитектуру. У неё есть свои принципы, например [SOLID](https://ru.wikipedia.org/wiki/SOLID_%28%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29).
-
-По приёмам объектно-ориентированной разработки пишут книги, к примеру:
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/3905587/?partner=iliakan">Объектно-ориентированный анализ и проектирование с примерами приложений.</a>
-<i>Гради Буч и др.</i>.</li>
-<li><a href="http://www.ozon.ru/context/detail/id/2457392/?partner=iliakan">Приемы объектно-ориентированного проектирования. Паттерны проектирования.</a>
-<i>Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес.</i></li>
-</ul>
-
-Здесь мы не имеем возможности углубиться в теорию ООП, поэтому чтение таких книг рекомендуется. Хотя основные принципы, как использовать ООП правильно, мы, всё же, затронем.
\ No newline at end of file
diff --git a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md
deleted file mode 100644
index 5c92acb6..00000000
--- a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md
+++ /dev/null
@@ -1,42 +0,0 @@
-Кофеварка с новым методом:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-*!*
-  var timerId;
-*/!*
-  var self = this;
-
-  function getBoilTime() {
-    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-*!*
-    timerId = setTimeout(onReady, getBoilTime());
-*/!*
-  };
-
-*!*
-  this.stop = function() {
-    clearTimeout(timerId)
-  };
-*/!*
-}
-
-
-var coffeeMachine = new CoffeeMachine(50000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-coffeeMachine.stop(); // кофе приготовлен не будет
-```
-
diff --git a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md
deleted file mode 100644
index 62177288..00000000
--- a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Добавить метод и свойство кофеварке
-
-[importance 5]
-
-Улучшите готовый код кофеварки, который дан ниже: добавьте в кофеварку *публичный* метод `stop()`, который будет останавливать кипячение (через `clearTimeout`).
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  var self = this;
-
-  function getBoilTime() {
-    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getBoilTime());
-  };
-
-}
-```
-
-Вот такой код должен ничего не выводить:
-
-```js
-var coffeeMachine = new CoffeeMachine(50000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-coffeeMachine.stop(); // кофе приготовлен не будет
-```
-
-P.S. Текущую температуру воды вычислять и хранить не требуется.
-
-P.P.S. При решении вам, скорее всего, понадобится добавить *приватное* свойство `timerId`, которое будет хранить текущий таймер.
\ No newline at end of file
diff --git a/1-js/8-oop/2-internal-external-interface/article.md b/1-js/8-oop/2-internal-external-interface/article.md
deleted file mode 100644
index b4058737..00000000
--- a/1-js/8-oop/2-internal-external-interface/article.md
+++ /dev/null
@@ -1,338 +0,0 @@
-# Внутренний и внешний интерфейс
-
-Один из важнейших принципов ООП -- отделение внутреннего интерфейса от внешнего.
-
-Это -- обязательная практика в разработке чего угодно сложнее hello world.
-
-Чтобы это понять, отвлечемся от разработки и переведем взгляд на объекты реального мира. 
-
-Как правило, устройства, с которыми мы имеем дело, весьма сложны. Но *разделение интерфейса на внешний и внутренний* позволяет использовать их без малейших проблем.
-[cut]
-## Пример из жизни
-
-Например, кофеварка. Простая снаружи: кнопка, индикатор, отверстия,... И, конечно, результат -- кофе :)
-
-<img src="coffee.jpg">
-
-Но внутри... (картинка из пособия по ремонту)
-
-<img src="coffee-inside.jpg">
-
-Масса деталей. Но мы можем пользоваться ей, совершенно не зная об этом.
-
-Кофеварки -- довольно-таки надежны, не правда ли? Можно пользоваться годами, и только когда что-то пойдет не так -- придется нести к мастеру.
-
-Секрет надежности и простоты кофеварки -- в том, что все детали отлажены и *спрятаны* внутри.
-
-Если снять с кофеварки защитный кожух, то использование её будет более сложным (куда нажимать?) и опасным (током ударить может). 
-
-Как мы увидим, объекты очень схожи с кофеварками.
-
-Только для того, чтобы прятать внутренние детали, используется не кожух, а специальные средства языка и соглашения.
-
-## Внутренний и внешний интерфейс
-
-В программировании мы будем разделять методы и свойства объекта на две группы:
-
-<ul>
-<li>*Внутренний интерфейс* -- это свойства и методы, доступ к которым может быть осуществлен только из других методов объекта, их также называют "приватными" (есть и другие термины, встретим их далее).</li>
-</li>
-<li>*Внешний интерфейс* -- это свойства и методы, доступные снаружи объекта, их называют "публичными".</li>
-</ul>
-
-Если продолжить аналогию с кофеваркой -- то, что спрятано внутри кофеварки: трубка кипятильника, нагревательный элемент, тепловой предохранитель и так далее -- это её внутренний интерфейс. 
-
-Внутренний интерфейс используется для обеспечения работоспособности объекта, его детали используют друг друга. Например, трубка кипятильника подключена к нагревательному элементу. 
-
-Но снаружи кофеварка закрыта специальным кожухом, чтобы никто к ним не подобрался. Детали скрыты и недоступны. Виден лишь внешний интерфейс.
-
-Получив объект, всё, что нужно для пользования им -- это знать внешний интерфейс. О внутреннем же знать вообще не обязательно.
-
-Это были общие слова по теории программирования.
-
-Далее мы реализуем кофеварку на JavaScript с приватными и публичными свойствами. В кофеварке много деталей, мы конечно, не будем моделировать каждый винтик, а сосредоточимся на основных приёмах разработки.
-
-## Шаг 1: публичное и приватное свойство
-
-Конструктор кофеварок будет называться `CoffeeMachine`.
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0; // количество воды в кофеварке
-
-  alert( 'Создана кофеварка мощностью: ' + power + ' ватт' );
-}
-
-// создать кофеварку
-var coffeeMachine = new CoffeeMachine(100);
-
-// залить воды
-coffeeMachine.waterAmount = 200;
-```
-
-**Локальные переменные, включая параметры конструктора, можно считать приватными свойствами.**
-
-В примере выше это `power` -- мощность кофеварки, которая указывается при создании и далее будет использована для расчёта времени кипячения. 
-
-К локальным переменным конструктора нельзя обратиться снаружи, но они доступны внутри самого конструктора.
-
-**Свойства, записанные в `this`, можно считать публичными.**
-
-Здесь свойство `waterAmount` записано в объект, а значит -- доступно для модификации снаружи. Можно доливать и выливать воду в любом количестве. 
-
-[smart header="Вопрос терминологии"]
-Далее мы будем называть `power` как "локальной переменной", так и "приватным свойством" объекта.
-
-Это, смотря, с какой стороны посмотреть.
-
-Термины "приватное свойство/метод", "публичное свойство/метод" относятся к общей теории ООП. А их конкретная реализация в языке программирования может быть различной. 
-
-Здесь ООП-принцип "приватного свойства" реализован через локальные переменные, поэтому и "локальная переменная" и "приватное свойство" -- правильные термины, в зависимости от того, с какой точки зрения взглянуть -- кода или архитектуры ООП.
-[/smart]
-
-
-## Шаг 2: публичный и приватный методы
-
-Добавим публичный метод `run`, запускающий кофеварку, а также вспомогательные внутренние методы `getBoilTime` и `onReady`:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-
-  this.waterAmount = 0;
-
-*!*
-  // расчёт времени для кипячения
-  function getBoilTime() {
-    return 1000; // точная формула расчета будет позже
-  }
-
-  // что делать по окончании процесса
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-    // setTimeout - встроенная функция, 
-    // она запустит onReady через getBoilTime() миллисекунд
-    setTimeout(onReady, getBoilTime());
-  };
-*/!*
-}
-
-var coffeeMachine = new CoffeeMachine(100);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-```
-
-Приватные методы, такие как `onReady`, `getBoilTime` могут быть объявлены как вложенные функции.
-
-В результате естественным образом получается, что доступ к ним (через замыкание) имеют только другие функции, объявленные в том же конструкторе.
-
-## Шаг 3: константа
-
-Для расчёта времени на кипячение воды используется формула `c*m*ΔT / power`, где:
-<ul>
-<li>`c` -- коэффициент теплоёмкости воды, физическая константа равная `4200`.</li>
-<li>`m` -- масса воды, которую нужно согреть.</li>
-<li>`ΔT` -- температура, на которую нужно подогреть, будем считать, что изначально вода -- комнатной температуры 20°С, то есть до 100° нужно греть на `ΔT=80`.</li>
-<li>`power` -- мощность.</li>
-</ul>
-
-Используем её в более реалистичном варианте `getBoilTime()`, включающем использование приватных свойств и константу:
-
-```js
-//+ run
-"use strict"
-
-function CoffeeMachine(power) {
-
-  this.waterAmount = 0;
-
-*!*
-  // физическая константа - удельная теплоёмкость воды для getBoilTime
-  var WATER_HEAT_CAPACITY = 4200;
-
-  // расчёт времени для кипячения
-  function getBoilTime() {
-      return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power; // ошибка!
-    }
-*/!*
-
-  // что делать по окончании процесса
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getBoilTime());
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(1000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-```
-
-Удельная теплоёмкость `WATER_HEAT_CAPACITY` выделена большими буквами, так как это константа.
-
-Внимание, при запуске кода выше в методе `getBoilTime` будет ошибка. Как вы думаете, почему?
-
-## Шаг 4: доступ к объекту из внутреннего метода 
-
-Внутренний метод вызывается так: `getBoilTime()`. А чему при этом равен `this`?... Как вы наверняка помните, в современном стандарте он будет `undefined` (в старом -- `window`), из-за этого при чтении `this.waterAmount` возникнет ошибка!
-
-Её можно решить, если вызвать `getBoilTime` с явным указанием контекста: `getBoilTime.call(this)`:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0;
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getBoilTime() {
-    return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-*!*
-    setTimeout(onReady, getBoilTime.call(this));
-*/!*
-  };
-
-}
-
-// создаю кофеварку, мощностью 100000W чтобы кипятила быстро
-var coffeeMachine = new CoffeeMachine(100000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-```
-
-Такой подход будет работать, но он не очень-то удобен. Ведь получается, что теперь везде, где мы хотим вызвать `getBoilTime`, нужно явно указывать контекст, т.е. писать `getBoilTime.call(this)`.
-
-К счастью существуют более элегантные решения.
-
-### Привязка через bind
-
-Можно при объявлении привязать `getBoilTime` к объекту через `bind`, тогда вопрос контекста отпадёт сам собой:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-*!*
-  var getBoilTime = function() {
-    return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }.bind(this);
-*/!*
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-*!*
-    setTimeout(onReady, getBoilTime());
-*/!*
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(100000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-```
-
-Это решение будет работать, теперь функцию можно просто вызывать без `call`. Но объявление функции стало менее красивым.
-
-### Сохранение this в замыкании
-
-Пожалуй, самый удобный и часто применяемый путь решения состоит в том, чтобы предварительно скопировать `this` во вспомогательную переменную и обращаться из внутренних функций уже к ней.
-
-Вот так:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  this.waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-*!*
-  var self = this;
-
-  function getBoilTime() {
-      return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-    }
-*/!*
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getBoilTime());
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(100000);
-coffeeMachine.waterAmount = 200;
-
-coffeeMachine.run();
-```
-
-Теперь `getBoilTime` получает `self` из замыкания. 
-
-**Конечно, чтобы это работало, мы не должны изменять `self`, а все приватные методы, которые хотят иметь доступ к текущему объекту, должны использовать внутри себя `self` вместо `this`.**
-
-Вместо `self` можно использовать любое другое имя переменной, например `var me = this`.
-
-## Итого
-
-Итак, мы сделали кофеварку с публичными и приватными методами и заставили их корректно работать.
-
-В терминологии ООП отделение и защита внутреннего интерфейса называется [инкапсуляция](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D0%BA%D0%B0%D0%BF%D1%81%D1%83%D0%BB%D1%8F%D1%86%D0%B8%D1%8F_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29). 
-
-Кратко перечислим бонусы, которые она даёт:
-
-<dl>
-<dt>Защита пользователей от выстрела себе в ногу</dt>
-<dd>Представьте, команда разработчиков пользуется кофеваркой. Кофеварка создана фирмой "Лучшие Кофеварки" и, в общем, работает хорошо, но с неё сняли защитный кожух и, таким образом, внутренний интерфейс стал доступен.
-
-Все разработчики цивилизованны -- и пользуются кофеваркой как обычно. Но хитрый Вася решил, что он самый умный, и подкрутил кое-что внутри кофеварки, чтобы кофе заваривался покрепче. Вася не знал, что те изменения, которые он произвёл, приведут к тому, что кофеварка испортится через два дня. 
-
-Виноват, разумеется, не только Вася, но и тот, кто снял защитный кожух с кофеварки, и тем самым позволил Васе проводить манипуляции.
-
-В программировании -- то же самое. Если пользователь объекта будет менять то, что не рассчитано на изменение снаружи -- последствия могут быть непредсказуемыми. 
-</dd>
-<dt>Удобство в поддержке</dt>
-<dd>Ситуация в программировании сложнее, чем с кофеваркой, т.к. кофеварку один раз купили и всё, а программа может улучшаться и дорабатываться.
-
-**При наличии чётко выделенного внешнего интерфейса, разработчик может свободно менять внутренние свойства и методы, без оглядки на коллег.** 
-
-Гораздо легче разрабатывать, если знаешь, что ряд методов (все внутренние) можно переименовывать, менять их параметры, и вообще, переписать как угодно, так как внешний код к ним абсолютно точно не обращается.
-
-Ближайшая аналогия в реальной жизни -- это когда выходит "новая версия" кофеварки, которая работает гораздо лучше. Разработчик мог переделать всё внутри, но пользоваться ей по-прежнему просто, так как внешний интерфейс сохранён.</dd>
-<dt>Управление сложностью</dt>
-<dd>Люди обожают пользоваться вещами, которые просты с виду. А что внутри -- дело десятое. 
-
-Программисты здесь не исключение. 
-
-**Всегда удобно, когда детали реализации скрыты, и доступен простой, понятно документированный внешний интерфейс.**
-</dd>
-</dl>
-
diff --git a/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg b/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg
deleted file mode 100755
index 60f84664..00000000
Binary files a/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg and /dev/null differ
diff --git a/1-js/8-oop/2-internal-external-interface/coffee.jpg b/1-js/8-oop/2-internal-external-interface/coffee.jpg
deleted file mode 100755
index ee26e1c0..00000000
Binary files a/1-js/8-oop/2-internal-external-interface/coffee.jpg and /dev/null differ
diff --git a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md
deleted file mode 100644
index bb0bb14d..00000000
--- a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Решение:
-
-```js
-//+ run
-function User() {
-
-  var firstName, surname;
-
-  this.setFirstName = function(newFirstName) {
-    firstName = newFirstName;
-  };
-
-  this.setSurname = function(newSurname) {
-    surname = newSurname;
-  };
-
-  this.getFullName = function() {
-    return firstName + ' ' + surname;
-  }
-}
-
-var user = new User();
-user.setFirstName("Петя");
-user.setSurname("Иванов");
-
-alert( user.getFullName() ); // Петя Иванов
-```
-
-Обратим внимание, что для "геттера" `getFullName` нет соответствующего свойства объекта, он конструирует ответ "на лету". Это нормально. Одна из целей существования геттеров/сеттеров -- как раз и есть изоляция внутренних свойств объекта, чтобы можно было их как угодно менять, генерировать "на лету", а внешний интерфейс оставался тем же.
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md
deleted file mode 100644
index d9efe056..00000000
--- a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Написать объект с геттерами и сеттерами
-
-[importance 4]
-
-Напишите конструктор `User` для создания объектов:
-<ul>
-<li>С приватными свойствами имя `firstName` и фамилия `surname`.</li>
-<li>С сеттерами для этих свойств.</li>
-<li>С геттером `getFullName()`, который возвращает полное имя.</li>
-</ul>
-
-Должен работать так:
-
-```js
-function User() {
-  /* ваш код */
-}
-
-var user = new User();
-user.setFirstName("Петя");
-user.setSurname("Иванов");
-
-alert( user.getFullName() ); // Петя Иванов
-```
-
diff --git a/1-js/8-oop/3-getters-setters/2-getter-power/solution.md b/1-js/8-oop/3-getters-setters/2-getter-power/solution.md
deleted file mode 100644
index b82c109a..00000000
--- a/1-js/8-oop/3-getters-setters/2-getter-power/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-```js
-function CoffeeMachine(power, capacity) {
-  //...
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить воды больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-  this.getWaterAmount = function() {
-    return waterAmount;
-  };
-
-*!*
-  this.getPower = function() {
-    return power;
-  };
-*/!*
-}
-```
-
diff --git a/1-js/8-oop/3-getters-setters/2-getter-power/task.md b/1-js/8-oop/3-getters-setters/2-getter-power/task.md
deleted file mode 100644
index 7301c6f5..00000000
--- a/1-js/8-oop/3-getters-setters/2-getter-power/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Добавить геттер для power
-
-[importance 5]
-
-Добавьте кофеварке геттер для приватного свойства `power`, чтобы внешний код мог узнать мощность кофеварки. 
-
-Исходный код:
-
-```js
-function CoffeeMachine(power, capacity) {
-  //...
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить воды больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-  this.getWaterAmount = function() {
-    return waterAmount;
-  };
-
-}
-```
-
-Обратим внимание, что ситуация, когда у свойства `power` есть геттер, но нет сеттера -- вполне обычна. 
-
-Здесь это означает, что мощность `power` можно указать лишь при создании кофеварки и в дальнейшем её можно прочитать, но нельзя изменить.
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md
deleted file mode 100644
index 41aa318a..00000000
--- a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md
+++ /dev/null
@@ -1,47 +0,0 @@
-В решении ниже `addWater` будет просто вызывать `setWaterAmount`.
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-*!*
-  this.addWater = function(amount) {
-    this.setWaterAmount(waterAmount + amount);
-  };
-*/!*
-
-  function onReady() {
-    alert( 'Кофе готов!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getTimeToBoil());
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(100000, 400);
-coffeeMachine.addWater(200);
-coffeeMachine.addWater(100);
-coffeeMachine.addWater(300); // Нельзя залить больше..
-coffeeMachine.run();
-```
-
diff --git a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md
deleted file mode 100644
index e123fed4..00000000
--- a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Добавить публичный метод кофеварке
-
-[importance 5]
-
-Добавьте кофеварке публичный метод `addWater(amount)`, который будет добавлять воду. 
-
-При этом, конечно же, должны происходить все необходимые проверки -- на положительность и превышение ёмкости.
-
-Исходный код:
-
-```js
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-  function onReady() {
-    alert( 'Кофе готов!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getTimeToBoil());
-  };
-
-}
-```
-
-Вот такой код должен приводить к ошибке:
-
-```js
-var coffeeMachine = new CoffeeMachine(100000, 400);
-coffeeMachine.addWater(200);
-coffeeMachine.addWater(100);
-coffeeMachine.addWater(300); // Нельзя залить больше, чем 400
-coffeeMachine.run();
-```
-
diff --git a/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md b/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md
deleted file mode 100644
index 2aca1b6f..00000000
--- a/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.setWaterAmount = function(amount) {
-    // ... проверки пропущены для краткости
-    waterAmount = amount;
-  };
-
-  this.getWaterAmount = function(amount) {
-    return waterAmount;
-  };
-
-  function onReady() {
-    alert( 'Кофе готов!' );
-  }
-
-*!*
-  this.setOnReady = function(newOnReady) {
-    onReady = newOnReady;
-  };
-*/!*
-
-  this.run = function() {
-*!*
-    setTimeout(function() {
-      onReady();
-    }, getTimeToBoil());
-*/!*
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(20000, 500);
-coffeeMachine.setWaterAmount(150);
-
-coffeeMachine.run();
-
-*!*
-coffeeMachine.setOnReady(function() {
-  var amount = coffeeMachine.getWaterAmount();
-  alert( 'Готов кофе: ' + amount + 'мл' ); // Готов кофе: 150 мл
-});
-*/!*
-```
-
-Обратите внимание на два момента в решении:
-<ol>
-<li>В сеттере `setOnReady` параметр называется `newOnReady`. Мы не можем назвать его `onReady`, так как тогда изнутри сеттера мы никак не доберёмся до внешнего (старого значения):
-
-```js
-// нерабочий вариант
-this.setOnReady = function(onReady) {
-  onReady = onReady; // ??? внешняя переменная onReady недоступна
-};
-```
-
-</li>
-<li>Чтобы `setOnReady` можно было вызывать в любое время, в `setTimeout` передаётся не `onReady`, а анонимная функция `function() { onReady() }`, которая возьмёт текущий (установленный последним) `onReady` из замыкания.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/4-setter-onready/task.md b/1-js/8-oop/3-getters-setters/4-setter-onready/task.md
deleted file mode 100644
index 2e960697..00000000
--- a/1-js/8-oop/3-getters-setters/4-setter-onready/task.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Создать сеттер для onReady 
-
-[importance 5]
-
-Обычно когда кофе готов, мы хотим что-то сделать, например выпить его.
-
-Сейчас при готовности срабатывает функция `onReady`, но она жёстко задана в коде:
-
-```js
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.setWaterAmount = function(amount) {
-    // ... проверки пропущены для краткости
-    waterAmount = amount;
-  };
-
-  this.getWaterAmount = function(amount) {
-    return waterAmount;
-  };
-
-*!*
-  function onReady() {
-      alert( 'Кофе готов!' );
-    }
-*/!*
-
-  this.run = function() {
-    setTimeout(onReady, getTimeToBoil());
-  };
-
-}
-```
-
-Создайте сеттер `setOnReady`, чтобы код снаружи мог назначить свой `onReady`, вот так:
-
-```js
-var coffeeMachine = new CoffeeMachine(20000, 500);
-coffeeMachine.setWaterAmount(150);
-
-*!*
-coffeeMachine.setOnReady(function() {
-  var amount = coffeeMachine.getWaterAmount();
-  alert( 'Готов кофе: ' + amount + 'мл' ); // Кофе готов: 150 мл
-});
-*/!*
-
-coffeeMachine.run();
-```
-
-P.S. Значение `onReady` по умолчанию должно быть таким же, как и раньше.
-
-P.P.S. Постарайтесь сделать так, чтобы `setOnReady` можно было вызвать не только до, но и *после* запуска кофеварки, то есть чтобы функцию `onReady` можно было изменить в любой момент до её срабатывания. 
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md
deleted file mode 100644
index 8f61ff53..00000000
--- a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md
+++ /dev/null
@@ -1,62 +0,0 @@
-Код решения модифицирует функцию `run` и добавляет приватный идентификатор таймера `timerId`, по наличию которого мы судим о состоянии кофеварки:
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-*!*
-  var timerId;
-
-  this.isRunning = function() {
-    return !!timerId;
-  };
-*/!*
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.setWaterAmount = function(amount) {
-    // ... проверки пропущены для краткости
-    waterAmount = amount;
-  };
-
-  this.getWaterAmount = function(amount) {
-    return waterAmount;
-  };
-
-  function onReady() {
-    alert( 'Кофе готов!' );
-  }
-
-  this.setOnReady = function(newOnReady) {
-    onReady = newOnReady;
-  };
-
-  this.run = function() {
-*!*
-    timerId = setTimeout(function() {
-      timerId = null;
-      onReady();
-    }, getTimeToBoil());
-  };
-*/!*
-
-}
-
-var coffeeMachine = new CoffeeMachine(20000, 500);
-coffeeMachine.setWaterAmount(100);
-
-alert( 'До: ' + coffeeMachine.isRunning() ); // До: false
-
-coffeeMachine.run();
-alert( 'В процессе: ' + coffeeMachine.isRunning() ); // В процессе: true
-
-coffeeMachine.setOnReady(function() {
-  alert( "После: " + coffeeMachine.isRunning() ); // После: false
-});
-```
-
diff --git a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md
deleted file mode 100644
index 7d8ff96c..00000000
--- a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Добавить метод isRunning
-
-[importance 5]
-
-Из внешнего кода мы хотели бы иметь возможность понять -- запущена кофеварка или нет.
-
-Для этого добавьте кофеварке публичный метод `isRunning()`, который будет возвращать `true`, если она запущена и `false`, если нет.
-
-Нужно, чтобы такой код работал:
-
-```js
-var coffeeMachine = new CoffeeMachine(20000, 500);
-coffeeMachine.setWaterAmount(100);
-
-alert( 'До: ' + coffeeMachine.isRunning() ); // До: false
-
-coffeeMachine.run();
-alert( 'В процессе: ' + coffeeMachine.isRunning() ); // В процессе: true
-
-coffeeMachine.setOnReady(function() {
-  alert( "После: " + coffeeMachine.isRunning() ); // После: false
-});
-```
-
-Исходный код возьмите из решения [предыдущей задачи](/task/setter-onready).
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/article.md b/1-js/8-oop/3-getters-setters/article.md
deleted file mode 100644
index e97a6e1b..00000000
--- a/1-js/8-oop/3-getters-setters/article.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# Геттеры и сеттеры
-
-Для *управляемого* доступа к состоянию объекта используют специальные функции, так называемые "геттеры" и "сеттеры".
-[cut]
-
-## Геттер и сеттер для воды
-
-На текущий момент количество воды в кофеварке является публичным свойством `waterAmount`:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  // количество воды в кофеварке
-  this.waterAmount = 0;
-
-  ...
-}
-```
-
-Это немного опасно. Ведь в это свойство можно записать произвольное количество воды, хоть весь мировой океан.
-
-```js
-// не помещается в кофеварку!
-coffeeMachine.waterAmount = 1000000;
-```
-
-Это ещё ничего, гораздо хуже, что можно наоборот -- вылить больше, чем есть:
-
-```js
-// и не волнует, было ли там столько воды вообще!
-coffeeMachine.waterAmount -= 1000000;
-```
-
-Так происходит потому, что свойство полностью доступно снаружи.
-
-Чтобы не было таких казусов, нам нужно ограничить контроль над свойством со стороны внешнего кода.
-
-**Для лучшего контроля над свойством его делают приватным, а запись значения осуществляется через специальный метод, который называют *"сеттер"* (setter method).**
-
-Типичное название для сеттера -- `setСвойство`, например, в случае с кофеваркой таким сеттером будет метод `setWaterAmount`:
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) { // capacity - ёмкость кофеварки
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-*!*
-  // "умная" установка свойства
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить воды больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-*/!*
-
-  function onReady() {
-    alert( 'Кофе готов!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, getTimeToBoil());
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(1000, 500);
-coffeeMachine.setWaterAmount(600); // упс, ошибка!
-```
-
-Теперь `waterAmount` -- внутреннее свойство, его можно записать (через сеттер), но, увы, нельзя прочитать.
-
-**Для того, чтобы дать возможность внешнему коду узнать его значение, создадим специальную функцию -- "геттер" (getter method).** 
-
-Геттеры обычно имеют название вида `getСвойство`, в данном случае `getWaterAmount`:
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) {
-  //...
-  this.setWaterAmount = function(amount) {
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить воды больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-*!*
-  this.getWaterAmount = function() {
-    return waterAmount;
-  };
-*/!*
-}
-
-var coffeeMachine = new CoffeeMachine(1000, 500);
-coffeeMachine.setWaterAmount(450);
-alert( coffeeMachine.getWaterAmount() ); // 450
-```
-
-## Единый геттер-сеттер
-
-Для большего удобства иногда делают единый метод, который называется так же, как свойство и отвечает *и за запись и за чтение*.
-
-При вызове без параметров такой метод возвращает свойство, а при передаче параметра -- назначает его. 
-
-Выглядит это так:
-
-```js
-//+ run
-function CoffeeMachine(power, capacity) {
-  var waterAmount = 0;
-
-*!*
-  this.waterAmount = function(amount) {
-*/!*
-    // вызов без параметра, значит режим геттера, возвращаем свойство
-    if (!arguments.length) return waterAmount;
-
-    // иначе режим сеттера
-    if (amount < 0) {
-      throw new Error("Значение должно быть положительным");
-    }
-    if (amount > capacity) {
-      throw new Error("Нельзя залить воды больше, чем " + capacity);
-    }
-
-    waterAmount = amount;
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(1000, 500);
-
-// пример использования
-*!*
-coffeeMachine.waterAmount(450);
-alert( coffeeMachine.waterAmount() ); // 450
-*/!*
-```
-
-Единый геттер-сеттер используется реже, чем две отдельные функции, но в некоторых JavaScript-библиотеках, например [jQuery](http://jquery.com) и [D3](http://d3js.org) подобный подход принят на уровне концепта. 
-
-## Итого
-
-<ul>
-<li>Для большего контроля над присвоением и чтением значения, вместо свойства делают "функцию-геттер" и "функцию-сеттер", геттер возвращает значение, сеттер -- устанавливает.</li>
-<li>Если свойство предназначено только для чтения, то может быть только геттер, только для записи -- только сеттер.</li>
-<li>В качестве альтернативы паре геттер/сеттер применяют единую функцию, которая без аргументов ведёт себя как геттер, а с аргументом -- как сеттер.</li>
-</ul>
-
-Также можно организовать геттеры/сеттеры для свойства, не меняя структуры кода, через [дескрипторы свойств](/descriptors-getters-setters).
-
-
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md
deleted file mode 100644
index 9f35452d..00000000
--- a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Изменения в методе `run`:
-
-```js
-this.run = function() {
-*!*
-  if (!this._enabled) {
-    throw new Error("Кофеварка выключена");
-  }
-*/!*
-
-  setTimeout(onReady, 1000);
-};
-```
-
-
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html
deleted file mode 100755
index 053c8198..00000000
--- a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script>
-    function Machine(power) {
-      this._enabled = false;
-
-      this.enable = function() {
-        this._enabled = true;
-      };
-
-      this.disable = function() {
-        this._enabled = false;
-      };
-    }
-
-    function CoffeeMachine(power) {
-      Machine.apply(this, arguments);
-
-      var waterAmount = 0;
-
-      this.setWaterAmount = function(amount) {
-        waterAmount = amount;
-      };
-
-      function onReady() {
-        alert('Кофе готов!');
-      }
-
-      this.run = function() {
-        if (!this._enabled) {
-          throw new Error("Кофеварка выключена");
-        }
-        setTimeout(onReady, 1000);
-      };
-
-    }
-
-    var coffeeMachine = new CoffeeMachine(10000);
-    coffeeMachine.run();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html
deleted file mode 100755
index 6d287989..00000000
--- a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script>
-    function Machine(power) {
-      this._enabled = false;
-
-      this.enable = function() {
-        this._enabled = true;
-      };
-
-      this.disable = function() {
-        this._enabled = false;
-      };
-    }
-
-    function CoffeeMachine(power) {
-      Machine.apply(this, arguments);
-
-      var waterAmount = 0;
-
-      this.setWaterAmount = function(amount) {
-        waterAmount = amount;
-      };
-
-      function onReady() {
-        alert('Кофе готово!');
-      }
-
-      this.run = function() {
-        setTimeout(onReady, 1000);
-      };
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md
deleted file mode 100644
index d90fce6a..00000000
--- a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Запускать только при включённой кофеварке
-
-[importance 5]
-
-В коде `CoffeeMachine` сделайте так, чтобы метод `run` выводил ошибку, если кофеварка выключена.
-
-В итоге должен работать такой код:
-
-```js
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.run(); // ошибка, кофеварка выключена!
-```
-
-А вот так -- всё в порядке:
-
-```js
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.enable();
-coffeeMachine.run(); // ...Кофе готов!
-```
-
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html
deleted file mode 100755
index 61ce8414..00000000
--- a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script>
-    function Machine(power) {
-      this._enabled = false;
-
-      this.enable = function() {
-        this._enabled = true;
-      };
-
-      this.disable = function() {
-        this._enabled = false;
-      };
-    }
-
-    function CoffeeMachine(power) {
-      Machine.apply(this, arguments);
-
-      var waterAmount = 0;
-      var timerId;
-
-      this.setWaterAmount = function(amount) {
-        waterAmount = amount;
-      };
-
-      function onReady() {
-        alert('Кофе готов!');
-      }
-
-      var parentDisable = this.disable;
-      this.disable = function() {
-        parentDisable.call(this);
-        clearTimeout(timerId);
-      }
-
-      this.run = function() {
-        if (!this._enabled) {
-          throw new Error("Кофеварка выключена");
-        }
-        timerId = setTimeout(onReady, 1000);
-      };
-
-    }
-
-    var coffeeMachine = new CoffeeMachine(10000);
-    coffeeMachine.run();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md
deleted file mode 100644
index 298cd301..00000000
--- a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Останавливать кофеварку при выключении
-
-[importance 5]
-
-Когда кофеварку выключают -- текущая варка кофе должна останавливаться.
-
-Например, следующий код кофе не сварит:
-
-```js
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.enable();
-coffeeMachine.run();
-coffeeMachine.disable(); // остановит работу, ничего не выведет
-```
-
-Реализуйте это на основе решения [предыдущей задачи](/task/coffeemachine-fix-run).
diff --git a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md
deleted file mode 100644
index 38957f28..00000000
--- a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Решение:
-
-```js
-function Fridge(power) {
-  // унаследовать
-  Machine.apply(this, arguments);
-
-  var food = []; // приватное свойство food
-
-  this.addFood = function() {
-    if (!this._enabled) {
-      throw new Error("Холодильник выключен");
-    }
-    if (food.length + arguments.length >= this._power / 100) {
-      throw new Error("Нельзя добавить, не хватает мощности");
-    }
-    for (var i = 0; i < arguments.length; i++) {
-      food.push(arguments[i]); // добавить всё из arguments
-    }
-  };
-
-  this.getFood = function() {
-    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
-    return food.slice();
-  };
-
-}
-```
-
diff --git a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md
deleted file mode 100644
index 150bdb0f..00000000
--- a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Унаследуйте холодильник
-
-[importance 4]
-
-Создайте класс для холодильника `Fridge(power)`, наследующий от `Machine`, с приватным свойством `food` и методами `addFood(...)`, `getFood()`:
-<ul>
-<li>Приватное свойство `food` хранит массив еды.</li>
-<li>Публичный метод `addFood(item)` добавляет в массив `food` новую еду, доступен вызов с несколькими аргументами `addFood(item1, item2...)` для добавления нескольких элементов сразу.</li>
-<li>Если холодильник выключен, то добавить еду нельзя, будет ошибка.</li>
-<li>Максимальное количество еды ограничено `power/100`, где `power` -- мощность холодильника, указывается в конструкторе. При попытке добавить больше -- будет ошибка</li>
-<li>Публичный метод `getFood()` возвращает еду в виде массива, добавление или удаление элементов из которого не должно влиять на свойство `food` холодильника.</li>
-</ul>
-
-Код для проверки:
-
-```js
-var fridge = new Fridge(200);
-fridge.addFood("котлета"); // ошибка, холодильник выключен
-```
-
-Ещё код для проверки:
-
-```js
-// создать холодильник мощностью 500 (не более 5 еды)
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood("котлета");
-fridge.addFood("сок", "зелень");
-fridge.addFood("варенье", "пирог", "торт"); // ошибка, слишком много еды
-```
-
-Код использования холодильника без ошибок:
-
-```js
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood("котлета");
-fridge.addFood("сок", "варенье");
-
-var fridgeFood = fridge.getFood();
-alert( fridgeFood ); // котлета, сок, варенье
-
-// добавление элементов не влияет на еду в холодильнике
-fridgeFood.push("вилка", "ложка");
-
-alert( fridge.getFood() ); // внутри по-прежнему: котлета, сок, варенье
-```
-
-Исходный код класса `Machine`, от которого нужно наследовать:
-
-```js
-function Machine(power) {
-  this._power = power;
-  this._enabled = false;
-
-  var self = this;
-
-  this.enable = function() {
-    self._enabled = true;
-  };
-
-  this.disable = function() {
-    self._enabled = false;
-  };
-}
-```
-
diff --git a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md
deleted file mode 100644
index e7752658..00000000
--- a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md
+++ /dev/null
@@ -1,89 +0,0 @@
-
-
-```js
-//+ run
-function Machine(power) {
-  this._power = power;
-  this._enabled = false;
-
-  var self = this;
-
-  this.enable = function() {
-    self._enabled = true;
-  };
-
-  this.disable = function() {
-    self._enabled = false;
-  };
-}
-
-function Fridge(power) {
-  // унаследовать
-  Machine.apply(this, arguments);
-
-  var food = []; // приватное свойство food
-
-  this.addFood = function() {
-    if (!this._enabled) {
-      throw new Error("Холодильник выключен");
-    }
-    if (food.length + arguments.length >= this._power / 100) {
-      throw new Error("Нельзя добавить, не хватает мощности");
-    }
-    for (var i = 0; i < arguments.length; i++) {
-      food.push(arguments[i]); // добавить всё из arguments
-    }
-
-  };
-
-  this.getFood = function() {
-    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
-    return food.slice();
-  };
-
-*!*
-  this.filterFood = function(filter) {
-    return food.filter(filter);
-  };
-
-  this.removeFood = function(item) {
-    var idx = food.indexOf(item);
-    if (idx != -1) food.splice(idx, 1);
-  };
-*/!*
-}
-
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood({
-  title: "котлета",
-  calories: 100
-});
-fridge.addFood({
-  title: "сок",
-  calories: 30
-});
-fridge.addFood({
-  title: "зелень",
-  calories: 10
-});
-fridge.addFood({
-  title: "варенье",
-  calories: 150
-});
-
-var dietItems = fridge.filterFood(function(item) {
-  return item.calories < 50;
-});
-
-fridge.removeFood("нет такой еды"); // без эффекта
-alert( fridge.getFood().length ); // 4
-
-dietItems.forEach(function(item) {
-  alert( item.title ); // сок, зелень
-  fridge.removeFood(item);
-});
-
-alert( fridge.getFood().length ); // 2
-```
-
diff --git a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md
deleted file mode 100644
index 46a4db21..00000000
--- a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Добавьте методы в холодильник
-
-[importance 5]
-
-Добавьте в холодильник методы:
-<ul>
-<li>Публичный метод `filterFood(func)`, который возвращает всю еду, для которой `func(item) == true`</li>
-<li>Публичный метод `removeFood(item)`, который удаляет еду `item` из холодильника.</li>
-</ul>
-
-Код для проверки:
-
-```js
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood({
-  title: "котлета",
-  calories: 100
-});
-fridge.addFood({
-  title: "сок",
-  calories: 30
-});
-fridge.addFood({
-  title: "зелень",
-  calories: 10
-});
-fridge.addFood({
-  title: "варенье",
-  calories: 150
-});
-
-fridge.removeFood("нет такой еды"); // без эффекта
-alert( fridge.getFood().length ); // 4
-
-var dietItems = fridge.filterFood(function(item) {
-  return item.calories < 50;
-});
-
-dietItems.forEach(function(item) {
-  alert( item.title ); // сок, зелень
-  fridge.removeFood(item);
-});
-
-alert( fridge.getFood().length ); // 2
-```
-
-В качестве исходного кода используйте решение [предыдущей задачи](/task/inherit-fridge).
diff --git a/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md b/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md
deleted file mode 100644
index ec5fbb18..00000000
--- a/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-```js
-//+ run
-function Machine(power) {
-  this._power = power;
-  this._enabled = false;
-
-  var self = this;
-
-  this.enable = function() {
-    self._enabled = true;
-  };
-
-  this.disable = function() {
-    self._enabled = false;
-  };
-}
-
-function Fridge(power) {
-  Machine.apply(this, arguments);
-
-  var food = []; // приватное свойство food
-
-  this.addFood = function() {
-    if (!this._enabled) {
-      throw new Error("Холодильник выключен");
-    }
-    if (food.length + arguments.length >= this._power / 100) {
-      throw new Error("Нельзя добавить, не хватает мощности");
-    }
-    for (var i = 0; i < arguments.length; i++) {
-      food.push(arguments[i]); // добавить всё из arguments
-    }
-
-  };
-
-  this.getFood = function() {
-    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
-    return food.slice();
-  };
-
-  this.filterFood = function(filter) {
-    return food.filter(filter);
-  };
-
-  this.removeFood = function(item) {
-    var idx = food.indexOf(item);
-    if (idx != -1) food.splice(idx, 1);
-  };
-
-*!*
-  var parentDisable = this.disable;
-  this.disable = function() {
-    if (food.length) {
-      throw new Error("Нельзя выключить: внутри еда");
-    }
-    parentDisable();
-  };
-*/!*
-}
-
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood("кус-кус");
-fridge.disable(); // ошибка, в холодильнике есть еда
-```
-
diff --git a/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md b/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md
deleted file mode 100644
index 482ffaaa..00000000
--- a/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Переопределите disable
-
-[importance 5]
-
-Переопределите метод `disable` холодильника, чтобы при наличии в нём еды он выдавал ошибку.
-
-
-Код для проверки:
-
-```js
-var fridge = new Fridge(500);
-fridge.enable();
-fridge.addFood("кус-кус");
-fridge.disable(); // ошибка, в холодильнике есть еда
-```
-
-В качестве исходного кода используйте решение [предыдущей задачи](/task/add-methods-fridge).
diff --git a/1-js/8-oop/5-functional-inheritance/article.md b/1-js/8-oop/5-functional-inheritance/article.md
deleted file mode 100644
index 3afd5a93..00000000
--- a/1-js/8-oop/5-functional-inheritance/article.md
+++ /dev/null
@@ -1,403 +0,0 @@
-# Функциональное наследование
-
-Наследование -- это создание новых "классов" на основе существующих.
-
-В JavaScript его можно реализовать несколькими путями, один из которых -- с использованием наложения конструкторов, мы рассмотрим в этой главе.
-[cut]
-
-## Зачем наследование?
-
-Ранее мы обсуждали различные реализации кофеварки. Продолжим эту тему далее.
-
-Хватит ли нам только кофеварки для удобной жизни? Вряд ли... Скорее всего, ещё понадобятся как минимум холодильник, микроволновка, а возможно и другие *машины*.
-
-В реальной жизни у этих *машин* есть базовые правила пользования. Например, большая кнопка <i class="fa fa-power-off"></i> -- включение, шнур с розеткой нужно воткнуть в питание и т.п.
-
-Можно сказать, что "у всех машин есть общие свойства, а конкретные машины могут их дополнять". 
-
-Именно поэтому, увидев новую технику, мы уже можем что-то с ней сделать, даже не читая инструкцию.
-
-Механизм наследования позволяет определить базовый класс `Машина`, в нём описать то, что свойственно всем машинам, а затем на его основе построить другие, более конкретные: `Кофеварка`, `Холодильник` и т.п.
-
-[smart header="В веб-разработке всё так же"]
-В веб-разработке нам могут понадобиться классы `Меню`, `Табы`, `Диалог` и другие компоненты интерфейса. В них всех обычно есть что-то общее.
-
-Можно выделить такой общий функционал в класс `Компонент` и наследовать их от него, чтобы не дублировать код. 
-[/smart]
-
-## Наследование от Machine
-
-Базовый класс "машина" `Machine` будет реализовывать общего вида методы "включить" `enable()` и "выключить" `disable()`:
-
-```js
-function Machine() {
-  var enabled = false;
-
-  this.enable = function() {
-    enabled = true;
-  };
-
-  this.disable = function() {
-    enabled = false;
-  };
-}
-```
-
-Унаследуем от него кофеварку. При этом она получит эти методы автоматически:
-
-```js
-function CoffeeMachine(power) {
-*!*
-  Machine.call(this); // отнаследовать
-*/!*
-
-  var waterAmount = 0;
-
-  this.setWaterAmount = function(amount) {
-    waterAmount = amount;
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-
-*!*
-coffeeMachine.enable();
-coffeeMachine.setWaterAmount(100);
-coffeeMachine.disable();
-*/!*
-```
-
-Наследование реализовано вызовом `Machine.call(this)` в начале конструктора `CoffeeMachine`.
-
-Он вызывает функцию `Machine`, передавая ей в качестве контекста `this` текущий объект. `Machine`, в процессе выполнения, записывает в `this` различные полезные свойства и методы, в нашем случае `this.enable` и `this.disable`.
-
-Далее конструктор `CoffeeMachine` продолжает выполнение и может добавить свои свойства и методы.
-
-В результате мы получаем объект `coffeeMachine`, который включает в себя методы из `Machine` и `CoffeeMachine`.
-
-## Защищённые свойства
-
-В коде выше есть одна проблема.
-
-**Наследник не имеет доступа к приватным свойствам родителя.**
-
-Иначе говоря, если кофеварка захочет обратиться к `enabled`, то её ждёт разочарование:
-
-```js
-//+ run
-function Machine() {
-  var enabled = false;
-
-  this.enable = function() {
-    enabled = true;
-  };
-
-  this.disable = function() {
-    enabled = false;
-  };
-}
-
-function CoffeeMachine(power) {
-  Machine.call(this);
-
-  this.enable();
-
-*!*
-  // ошибка, переменная не определена!
-  alert( enabled );
-*/!*
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-```
-
-Это естественно, ведь `enabled` -- локальная переменная функции `Machine`. Она находится в другой области видимости.
-
-**Чтобы наследник имел доступ к свойству, оно должно быть записано в `this`.**
-
-При этом, чтобы обозначить, что свойство является внутренним, его имя начинают с подчёркивания `_`.
-
-```js
-//+ run
-function Machine() {
-*!*
-  this._enabled = false; // вместо var enabled
-*/!*
-
-  this.enable = function() {
-    this._enabled = true;
-  };
-
-  this.disable = function() {
-    this._enabled = false;
-  };
-}
-
-function CoffeeMachine(power) {
-  Machine.call(this);
-
-  this.enable();
-
-*!*
-  alert( this._enabled ); // true
-*/!*
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-```
-
-Подчёркивание в начале свойства -- общепринятый знак, что свойство является внутренним, предназначенным лишь для доступа из самого объекта и его наследников. Такие свойства называют *защищёнными*.
-
-Технически, залезть в него из внешнего кода, конечно, возможно, но приличный программист так делать не будет.
-
-## Перенос свойства в защищённые
-
-У `CoffeeMachine` есть приватное свойство `power`. Сейчас мы его тоже сделаем защищённым и перенесём в `Machine`, поскольку "мощность" свойственна всем машинам, а не только кофеварке.
-
-```js
-//+ run
-function Machine(power) {
-*!*
-  this._power = power; // (1)
-*/!*
-
-  this._enabled = false;
-
-  this.enable = function() {
-    this._enabled = true;
-  };
-
-  this.disable = function() {
-    this._enabled = false;
-  };
-}
-
-function CoffeeMachine(power) {
-*!*
-  Machine.apply(this, arguments); // (2)
-*/!*
-
-  alert( this._enabled ); // false
-  alert( this._power ); // 10000
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-```
-
-Теперь все машины `Machine` имеют мощность `power`. Обратим внимание, что мы из параметра конструктора сразу скопировали её в объект в строке `(1)`. Иначе она была бы недоступна из наследников.
-
-В строке `(2)` мы теперь вызываем не просто `Machine.call(this)`, а расширенный вариант: `Machine.apply(this, arguments)`, который вызывает `Machine` в текущем контексте вместе с передачей текущих аргументов.
-
-Можно было бы использовать и более простой вызов `Machine.call(this, power)`, но использование `apply` гарантирует передачу всех аргументов, вдруг их количество увеличится -- не надо будет переписывать.
-
-## Переопределение методов
-
-Итак, мы получили класс `CoffeeMachine`, который наследует от `Machine`.
-
-Аналогичным образом мы можем унаследовать от `Machine` холодильник `Fridge`, микроволновку `MicroOven` и другие классы, которые разделяют общий "машинный" функционал, то есть имеют мощность и их можно включать/выключать.
-
-Для этого достаточно вызвать `Machine` текущем контексте, а затем добавить свои методы.
-
-```js
-// Fridge может добавить и свои аргументы, 
-// которые в Machine не будут использованы
-function Fridge(power, temperature) {
-  Machine.apply(this, arguments);
-
-  // ...
-}
-```
-
-Бывает так, что реализация конкретного метода машины в наследнике имеет свои особенности.
-
-Можно, конечно, объявить в `CoffeeMachine` свой `enable`:
-
-```js
-function CoffeeMachine(power, capacity) {
-  Machine.apply(this, arguments);
-
-  // переопределить this.enable
-  this.enable = function() {
-    /* enable для кофеварки */
-  };
-}
-```
-
-...Однако, как правило, мы хотим не заменить, а *расширить* метод родителя, добавить к нему что-то. Например, сделать так, чтобы при включении кофеварка тут же запускалась.
-
-Для этого метод родителя предварительно копируют в переменную, и затем вызывают внутри нового `enable` -- там, где считают нужным:
-
-```js
-function CoffeeMachine(power) {
-  Machine.apply(this, arguments);
-
-*!*
-  var parentEnable = this.enable; // (1)
-  this.enable = function() { // (2)
-      parentEnable.call(this); // (3)
-      this.run(); // (4)
-    }
-*/!*
-
-  ...
-}
-```
-
-**Общая схема переопределения метода (по строкам выделенного фрагмента кода):**
-
-<ol>
-<li>Копируем доставшийся от родителя метод `this.enable` в переменную, например `parentEnable`.</li>
-<li>Заменяем `this.enable` на свою функцию...</li>
-<li>...Которая по-прежнему реализует старый функционал через вызов `parentEnable`.</li>
-<li>...И в дополнение к нему делает что-то своё, например запускает приготовление кофе.</li>
-</ol>
-
-Обратим внимание на строку `(3)`. 
-
-В ней родительский метод вызывается так: `parentEnable.call(this)`. Если бы вызов был таким: `parentEnable()`, то ему бы не передался текущий `this` и возникла бы ошибка.
-
-Технически, можно сделать возможность вызывать его и как `parentEnable()`, но тогда надо гарантировать, что контекст будет правильным, например привязать его при помощи `bind` или при объявлении, в родителе, вообще не использовать `this`, а получать контекст через замыкание, вот так:
-
-```js
-//+ run
-function Machine(power) {
-  this._enabled = false;
-
-*!*
-  var self = this;
-*/!*
-
-  this.enable = function() {
-*!*
-    // используем внешнюю переменную вместо this
-    self._enabled = true;
-*/!*
-  };
-
-  this.disable = function() {
-    self._enabled = false;
-  };
-
-}
-
-function CoffeeMachine(power) {
-  Machine.apply(this, arguments);
-
-  var waterAmount = 0;
-
-  this.setWaterAmount = function(amount) {
-    waterAmount = amount;
-  };
-
-*!*
-  var parentEnable = this.enable;
-  this.enable = function() {
-      parentEnable(); // теперь можно вызывать как угодно, this не важен
-      this.run();
-    }
-*/!*
-
-  function onReady() {
-    alert( 'Кофе готово!' );
-  }
-
-  this.run = function() {
-    setTimeout(onReady, 1000);
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.setWaterAmount(50);
-coffeeMachine.enable();
-```
-
-В коде выше родительский метод `parentEnable = this.enable` успешно продолжает работать даже при вызове без контекста. А всё потому, что использует `self` внутри.
-
-## Итого
-
-Организация наследования, которая описана в этой главе, называется "функциональным паттерном наследования".
-
-Её общая схема (кратко):
-
-<ol>
-<li>Объявляется конструктор родителя `Machine`. В нём могут быть приватные (private), публичные (public) и защищённые (protected) свойства:
-
-```js
-function Machine(params) {
-  // локальные переменные и функции доступны только внутри Machine
-  var privateProperty;
-
-  // публичные доступны снаружи
-  this.publicProperty = ...;
-
-  // защищённые доступны внутри Machine и для потомков
-  // мы договариваемся не трогать их снаружи
-  this._protectedProperty = ...
-}
-
-var machine = new Machine(...)
-machine.public();
-```
-
-</li>
-<li>Для наследования конструктор потомка вызывает родителя в своём контексте через `apply`. После чего может добавить свои переменные и методы:
-
-```js
-function CoffeeMachine(params) {
-  // универсальный вызов с передачей любых аргументов
-*!*
-  Machine.apply(this, arguments);
-*/!*
-
-  this.coffeePublicProperty = ...
-}
-
-var coffeeMachine = new CoffeeMachine(...);
-coffeeMachine.publicProperty();
-coffeeMachine.coffeePublicProperty();
-```
-
-</li>
-<li>В `CoffeeMachine` свойства, полученные от родителя, можно перезаписать своими. Но обычно требуется не заменить, а расширить метод родителя. Для этого он предварительно копируется в переменную:
-
-```js
-function CoffeeMachine(params) {
-  Machine.apply(this, arguments);
-
-*!*
-  var parentProtected = this._protectedProperty;
-  this._protectedProperty = function(args) {
-    parentProtected.apply(this, args); // (*)
-    // ...
-  };
-*/!*
-}
-```
-
-Строку `(*)` можно упростить до `parentProtected(args)`, если метод родителя не использует `this`, а, например, привязан к `var self = this`:
-
-```js
-function Machine(params) {
-  var self = this;
-
-  this._protected = function() {
-    self.property = "value";
-  };
-}
-```
-
-</li>
-</ol>
-
-Надо сказать, что способ наследования, описанный в этой главе, используется нечасто.
-
-В следующих главах мы будем изучать прототипный подход, который обладаем рядом преимуществ.
-
-Но знать и понимать его необходимо, поскольку во многих существующих библиотеках классы написаны в функциональном стиле, и расширять/наследовать от них можно только так.
-
-
-
-
-
diff --git a/1-js/8-oop/index.md b/1-js/8-oop/index.md
deleted file mode 100644
index 292b2d77..00000000
--- a/1-js/8-oop/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# ООП в функциональном стиле
-
-Инкапсуляция и наследование в функциональном стиле, а также расширенные возможности объектов JavaScript.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md b/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md
deleted file mode 100644
index f6308c17..00000000
--- a/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-<ol>
-<li>`true`, свойство взято из `rabbit`.</li>
-<li>`null`, свойство взято из `animal`.</li>
-<li>`undefined`, свойства больше нет.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md b/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md
deleted file mode 100644
index 70b4e3ba..00000000
--- a/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Чему равно cвойство после delete?
-
-[importance 5]
-
-Какие значения будут выводиться в коде ниже?
-
-```js
-var animal = {
-  jumps: null
-};
-var rabbit = {
-  jumps: true
-};
-
-rabbit.__proto__ = animal;
-
-alert( rabbit.jumps ); // ? (1)
-
-delete rabbit.jumps;
-
-alert( rabbit.jumps ); // ? (2)
-
-delete animal.jumps;
-
-alert( rabbit.jumps ); // ? (3)
-```
-
-Итого три вопроса.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png
deleted file mode 100755
index 055a4447..00000000
Binary files a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png and /dev/null differ
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png
deleted file mode 100755
index d8a63a58..00000000
Binary files a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png and /dev/null differ
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md b/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md
deleted file mode 100644
index 4206298f..00000000
--- a/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-**Ответ: свойство будет записано в `rabbit`.**
-
-Если коротко -- то потому что `this` будет указывать на `rabbit`, а прототип при записи не используется.
-
-Если в деталях -- посмотрим как выполняется `rabbit.eat()`:
-<ol>
-<li>Интерпретатор ищет `rabbit.eat`, чтобы его вызвать. Но свойство `eat` отсутствует в объекте `rabbit`, поэтому он идет по ссылке `rabbit.__proto__` и находит это свойство там.
-<img src="proto5.png">
-</li>
-<li>Функция `eat` запускается. Контекст ставится равным объекту перед точкой, т.е. `this = rabbit`.
-
-Итак -- получается, что команда `this.full = true` устанавливает свойство `full` в самом объекте `rabbit`. Итог:
-
-<img src="proto6.png">
-</li>
-</ol>
- 
-Эта задача демонстрирует, что несмотря на то, в каком прототипе находится свойство, это никак не влияет на установку `this`, которая осуществляется по своим, независимым правилам.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md b/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md
deleted file mode 100644
index 346de8e1..00000000
--- a/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Прототип и this
-
-[importance 5]
-
-Сработает ли вызов `rabbit.eat()` ?
-
-Если да, то в какой именно объект он запишет свойство `full`: в `rabbit` или `animal`?
-
-```js
-var animal = {
-  eat: function() {
-    this.full = true;
-  }
-};
-
-var rabbit = {
-  __proto__: animal
-};
-
-*!*
-rabbit.eat();
-*/!*
-```
-
diff --git a/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md b/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md
deleted file mode 100644
index 60ba9501..00000000
--- a/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md
+++ /dev/null
@@ -1,33 +0,0 @@
-<ol>
-<li>Расставим `__proto__`:
-
-```js
-//+ run
-var head = {
-  glasses: 1
-};
-
-var table = {
-  pen: 3
-};
-table.__proto__ = head;
-
-var bed = {
-  sheet: 1,
-  pillow: 2
-};
-bed.__proto__ = table;
-
-var pockets = {
-  money: 2000
-};
-pockets.__proto__ = bed;
-
-alert( pockets.pen ); // 3
-alert( bed.glasses ); // 1
-alert( table.money ); // undefined
-```
-
-</li>
-<li>**В современных браузерах, с точки зрения производительности, нет разницы, брать свойство из объекта или прототипа.** Они запоминают, где было найдено свойство и в следующий раз при запросе, к примеру, `pockets.glasses` начнут искать сразу в прототипе (`head`).</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md b/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md
deleted file mode 100644
index ab5f9f16..00000000
--- a/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Алгоритм для поиска
-
-[importance 5]
-
-Есть объекты:
-
-```js
-var head = {
-  glasses: 1
-};
-
-var table = {
-  pen: 3
-};
-
-var bed = {
-  sheet: 1,
-  pillow: 2
-};
-
-var pockets = {
-  money: 2000
-};
-```
-
-Задание состоит из двух частей:
-<ol>
-<li>Присвойте объектам ссылки `__proto__` так, чтобы любой поиск чего-либо шёл по алгоритму `pockets -> bed -> table -> head`.
-
-То есть `pockets.pen == 3`, `bed.glasses == 1`, но `table.money == undefined`.</li>
-<li>После этого ответьте на вопрос, как быстрее искать `glasses`: обращением к `pockets.glasses` или `head.glasses`? Попробуйте протестировать.</li>
-</ol>
diff --git a/1-js/9-prototypes/1-prototype/article.md b/1-js/9-prototypes/1-prototype/article.md
deleted file mode 100644
index 3d83be6a..00000000
--- a/1-js/9-prototypes/1-prototype/article.md
+++ /dev/null
@@ -1,246 +0,0 @@
-# Прототип объекта
-
-Объекты в JavaScript можно организовать в цепочки так, чтобы свойство, не найденное в одном объекте, автоматически искалось бы в другом.
-
-Связующим звеном выступает специальное свойство `__proto__`.
-
-[cut]
-## Прототип __proto__ 
-
-Если один объект имеет специальную ссылку `__proto__` на другой объект, то при чтении свойства из него, если свойство отсутствует в самом объекте, оно ищется в объекте `__proto__`.
-
-Свойство `__proto__` доступно во всех браузерах, кроме IE10-, а в более старых IE оно, конечно же, тоже есть, но напрямую к нему не обратиться, требуются чуть более сложные способы, которые мы рассмотрим позднее.
-
-Пример кода (кроме IE10-):
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-var rabbit = {
-  jumps: true
-};
-
-*!*
-rabbit.__proto__ = animal;
-*/!*
-
-// в rabbit можно найти оба свойства
-alert( rabbit.jumps ); // true
-alert( rabbit.eats ); // true
-```
-
-<ol>
-<li>Первый `alert` здесь работает очевидным образом -- он выводит свойство `jumps` объекта `rabbit`.</li>
-<li>Второй `alert` хочет вывести `rabbit.eats`, ищет его в самом объекте `rabbit`, не находит -- и продолжает поиск в объекте `rabbit.__proto__`, то есть, в данном случае, в `animal`.</li>
-</ol>
-
-Иллюстрация происходящего при чтении `rabbit.eats` (поиск идет снизу вверх):
-
-<img src="proto-animal-rabbit.png">
-
-**Объект, на который указывает ссылка `__proto__`, называется *"прототипом"*. В данном случае получилось, что `animal` является прототипом для `rabbit`.**
-
-**Также говорят, что объект `rabbit` *"прототипно наследует"* от `animal`.**
-
-Обратим внимание -- прототип используется исключительно при чтении. Запись значения, например, `rabbit.eats = value` или удаление `delete rabbit.eats` -- работает напрямую с объектом. 
-
-В примере ниже мы записываем свойство в сам `rabbit`, после чего `alert` перестаёт брать его у прототипа, а берёт уже из самого объекта:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-var rabbit = {
-  jumps: true,
-  eats: false
-};
-
-rabbit.__proto__ = animal;
-
-*!*
-alert( rabbit.eats ); // false, свойство взято из rabbit 
-*/!*
-```
-
-**Другими словами, прототип -- это "резервное хранилище свойств и методов" объекта, автоматически используемое при поиске.**
-
-У объекта, который является `__proto__`, может быть свой `__proto__`, у того -- свой, и так далее. При этом свойства будут искаться по цепочке.
-
-[smart header="Ссылка __proto__ в спецификации"]
-Если вы будете читать спецификацию EcmaScript -- свойство `__proto__` обозначено в ней как `[[Prototype]]`. 
-
-Двойные квадратные скобки здесь важны, чтобы не перепутать его с совсем другим свойством, которое называется `prototype`, и которое мы рассмотрим позже.
-[/smart]
-
- 
-## Метод hasOwnProperty
-
-Обычный цикл `for..in` не делает различия между свойствами объекта и его прототипа.
-
-Он перебирает всё, например:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-var rabbit = {
-  jumps: true,
-  __proto__: animal
-};
-
-*!*
-for (var key in rabbit) {
-  alert( key + " = " + rabbit[key] ); // выводит и "eats" и "jumps"
-}
-*/!*
-```
-
-Иногда хочется посмотреть, что находится именно в самом объекте, а не в прототипе.
-
-**Вызов [obj.hasOwnProperty(prop)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/HasOwnProperty) возвращает `true`, если свойство `prop` принадлежит самому объекту `obj`, иначе `false`.**
-
-Например:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-var rabbit = {
-  jumps: true,
-  __proto__: animal
-};
-
-*!*
-alert( rabbit.hasOwnProperty('jumps') ); // true: jumps принадлежит rabbit
-
-alert( rabbit.hasOwnProperty('eats') ); // false: eats не принадлежит
-*/!*
-```
-
-Для того, чтобы перебрать свойства самого объекта, достаточно профильтровать `key` через `hasOwnProperty`:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-var rabbit = {
-  jumps: true,
-  __proto__: animal
-};
-
-for (var key in rabbit) {
-*!*
-  if (!rabbit.hasOwnProperty(key)) continue; // пропустить "не свои" свойства
-*/!*
-  alert( key + " = " + rabbit[key] ); // выводит только "jumps"
-}
-```
-
-## Object.create(null)
-
-Зачастую объекты используют для хранения произвольных значений по ключу, как коллекцию:
-
-```js
-var data = {};
-data.text = "Привет";
-data.age = 35;
-// ...
-```
-
-При дальнейшем поиске в этой коллекции мы найдём не только `text` и `age`, но и встроенные функции:
-
-```js
-//+ run
-var data = {};
-alert(data.toString); // функция, хотя мы её туда не записывали
-```
-
-Это может быть неприятным сюрпризом и приводить к ошибкам, если названия свойств приходят от посетителя и могут быть произвольными.
-
-Чтобы этого избежать, мы можем исключать свойства, не принадлежащие самому объекту:
-```js
-//+ run
-var data = {};
-
-// выведет toString только если оно записано в сам объект
-alert(data.hasOwnProperty('toString') ? data.toString : undefined);
-```
-
-Однако, есть путь и проще:
-```js
-//+ run
-*!*
-var data = Object.create(null);
-*/!*
-data.text = "Привет";
-
-alert(data.text); // Привет
-*!*
-alert(data.toString); // undefined
-*/!*
-```
-
-Объект, создаваемый при помощи `Object.create(null)` не имеет прототипа, а значит в нём нет лишних свойств. Для коллекции -- как раз то, что надо.
-
-
-## Методы для работы с __proto__
-
-В современных браузерах есть два дополнительных метода для работы с `__proto__`. Зачем они нужны, если есть `__proto__`? В общем-то, не очень нужны, но по историческим причинам тоже существуют.
-
-<dl>
-<dt>Чтение: [Object.getPrototypeOf(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getPrototypeOf)</dt>
-<dd>Возвращает `obj.__proto__` (кроме IE8-)</dd>
-<dt>Запись: [Object.setPrototypeOf(obj, proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/setPrototypeOf)</dt>
-<dd>Устанавливает `obj.__proto__ = proto` (кроме IE10-).</dd>
-</dl>
-
-Кроме того, есть ещё один вспомогательный метод:
-<dt>Создание объекта с прототипом: [Object.create(proto, descriptors)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create)</dt>
-<dd>Создаёт пустой объект с `__proto__`, равным первому аргументу (кроме IE8-), второй необязательный аргумент может содержать [дескрипторы свойств](/descriptors-getters-setters).</dd>
-</dl>
-
-
-
-## Итого
-
-
-<ul>
-<li>В JavaScript есть встроенное "наследование" между объектами при помощи специального свойства `__proto__`.</li>
-<li>При установке свойства `rabbit.__proto__ = animal` говорят, что объект `animal` будет "прототипом" `rabbit`.</li>
-<li>При чтении свойства из объекта, если его в нём нет, оно ищется в `__proto__`. Прототип задействуется только при чтении свойства. Операции присвоения `obj.prop =` или удаления `delete obj.prop` совершаются всегда над самим объектом `obj`.</li>
-</ul>
-
-Несколько прототипов одному объекту присвоить нельзя, но можно организовать объекты в цепочку, когда один объект ссылается на другой при помощи `__proto__`, тот ссылается на третий, и так далее.
-
-В современных браузерах есть методы для работы с прототипом:
-
-<ul>
-<li>[Object.getPrototypeOf(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) (кроме IE8-)</li>
-<li>[Object.setPrototypeOf(obj, proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) (кроме IE10-)</li>
-<li>[Object.create(proto, descriptors)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create) (кроме IE8-)</li>
-</ul>
-
-Возможно, вас смущает недостаточная поддержка `__proto__` в старых IE. Но это не страшно. В последующих главах мы рассмотрим дополнительные методы работы с `__proto__`, включая те, которые работают везде.
-
-Также мы рассмотрим, как свойство `__proto__` используется внутри самого языка JavaScript и как организовать классы с его помощью.
-
-
-
-[head]
-<script>
-function inherit(proto) {
-  function F() {}     
-  F.prototype = proto;
-  return new F();
-}
-</script>
-[/head]
diff --git a/1-js/9-prototypes/1-prototype/proto-animal-rabbit.png b/1-js/9-prototypes/1-prototype/proto-animal-rabbit.png
deleted file mode 100644
index 89b49b19..00000000
Binary files a/1-js/9-prototypes/1-prototype/proto-animal-rabbit.png and /dev/null differ
diff --git a/1-js/9-prototypes/1-prototype/proto-animal-rabbit@2x.png b/1-js/9-prototypes/1-prototype/proto-animal-rabbit@2x.png
deleted file mode 100644
index 2e9e7441..00000000
Binary files a/1-js/9-prototypes/1-prototype/proto-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md
deleted file mode 100644
index 9256a9fb..00000000
--- a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Результат: `true`, из прототипа
-
-Результат:  `true`. Свойство `prototype` всего лишь задаёт `__proto__` у новых объектов. Так что его изменение не повлияет на `rabbit.__proto__`. Свойство `eats` будет получено из прототипа.
-
-Результат: `false`. Свойство `Rabbit.prototype` и `rabbit.__proto__` указывают на один и тот же объект. В данном случае изменения вносятся в сам объект.
-
-Результат: `true`, так как `delete rabbit.eats` попытается удалить `eats` из `rabbit`, где его и так нет. А чтение в `alert` произойдёт из прототипа.
-
-Результат: `undefined`. Удаление осуществляется из самого прототипа, поэтому свойство `rabbit.eats` больше взять неоткуда.
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md
deleted file mode 100644
index f8ea33a7..00000000
--- a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# Прототип после создания
-
-[importance 5]
-
-В примерах ниже создаётся объект `new Rabbit`, а затем проводятся различные действия с `prototype`. 
-
-Каковы будут результаты выполнения? Почему?
-
-Начнём с этого кода. Что он выведет?
-
-```js
-function Rabbit() {}
-Rabbit.prototype = {
-  eats: true
-};
-
-var rabbit = new Rabbit();
-
-alert( rabbit.eats );
-```
-
-Добавили строку (выделена), что будет теперь?
-
-```js
-function Rabbit() {}
-Rabbit.prototype = {
-  eats: true
-};
-
-var rabbit = new Rabbit();
-
-*!*
-Rabbit.prototype = {};
-*/!*
-
-alert( rabbit.eats );
-```
-
-А если код будет такой? (заменена одна строка):
-
-```js
-function Rabbit(name) {}
-Rabbit.prototype = {
-  eats: true
-};
-
-var rabbit = new Rabbit();
-
-*!*
-Rabbit.prototype.eats = false;
-*/!*
-
-alert( rabbit.eats );
-```
-
-А такой? (заменена одна строка)
-
-```js
-function Rabbit(name) {}
-Rabbit.prototype = {
-  eats: true
-};
-
-var rabbit = new Rabbit();
-
-*!*
-delete rabbit.eats; // (*)
-*/!*
-
-alert( rabbit.eats );
-```
-
-И последний вариант:
-
-```js
-function Rabbit(name) {}
-Rabbit.prototype = {
-  eats: true
-};
-
-var rabbit = new Rabbit();
-
-*!*
-delete Rabbit.prototype.eats; // (*)
-*/!*
-
-alert( rabbit.eats );
-```
-
diff --git a/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md b/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md
deleted file mode 100644
index 222e9083..00000000
--- a/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Можно прототипно унаследовать от `options` и добавлять/менять опции в наследнике:
-
-```js
-//+ run
-function Menu(options) {
-  options = Object.create(options);
-  options.width = options.width || 300;
-
-  alert( options.width ); // возьмёт width из наследника
-  alert( options.height ); // возьмёт height из исходного объекта
-  ...
-}
-```
-
-Все изменения будут происходить не в самом `options`, а в его наследнике, при этом исходный объект останется незатронутым.
diff --git a/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md b/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md
deleted file mode 100644
index 1f1c84d5..00000000
--- a/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Аргументы по умолчанию
-
-[importance 4]
-
-Есть функция `Menu`, которая получает аргументы в виде объекта `options`:
-
-```js
-/* options содержит настройки меню: width, height и т.п. */
-function Menu(options) {
-  ...
-}
-```
-
-Ряд опций должны иметь значение по умолчанию. Мы могли бы проставить их напрямую в объекте `options`:
-
-```js
-function Menu(options) {
-  options.width = options.width || 300; // по умолчанию ширина 300
-  ...
-}
-```
-
-...Но такие изменения могут привести к непредвиденным результатам, т.к. объект `options` может быть повторно использован во внешнем коде. Он передается в `Menu` для того, чтобы параметры из него читали, а не писали.
-
-Один из способов безопасно назначить значения по умолчанию -- скопировать все свойства `options` в локальные переменные и затем уже менять. Другой способ -- клонировать `options` путём копирования всех свойств из него в новый объект, который уже изменяется. 
-
-При помощи наследования и `Object.create` предложите третий способ, который позволяет избежать копирования объекта и не требует новых переменных.
diff --git a/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md b/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md
deleted file mode 100644
index 1b268b84..00000000
--- a/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Разница между вызовами
-
-Первый вызов ставит `this == rabbit`, остальные ставят `this` равным `Rabbit.prototype`, следуя правилу "`this` -- объект перед точкой". 
-
-Так что только первый вызов выведет `Rabbit`, в остальных он будет `undefined`.
-
-Код для проверки:
-
-```js
-//+ run
-function Rabbit(name) {
-  this.name = name;
-}
-Rabbit.prototype.sayHi = function() {
-  alert( this.name );
-}
-
-var rabbit = new Rabbit("Rabbit");
-
-rabbit.sayHi();
-Rabbit.prototype.sayHi();
-Object.getPrototypeOf(rabbit).sayHi();
-rabbit.__proto__.sayHi();
-```
-
-# Совместимость 
-
-<ol>
-<li>Первый вызов работает везде.</li>
-<li>Второй вызов работает везде.</li>
-<li>Третий вызов не будет работать в IE8-, там нет метода `getPrototypeOf`</li>
-<li>Четвёртый вызов -- самый "несовместимый", он не будет работать в IE10-, ввиду отсутствия свойства  `__proto__`.</li>
-</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md b/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md
deleted file mode 100644
index b3773dfa..00000000
--- a/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Есть ли разница между вызовами?
-
-[importance 5]
-
-Создадим новый объект, вот такой:
-
-```js
-function Rabbit(name) {
-  this.name = name;
-}
-Rabbit.prototype.sayHi = function() {
-  alert( this.name );
-}
-
-var rabbit = new Rabbit("Rabbit");
-```
-
-Одинаково ли сработают эти вызовы?
-
-```js
-rabbit.sayHi();
-Rabbit.prototype.sayHi();
-Object.getPrototypeOf(rabbit).sayHi();
-rabbit.__proto__.sayHi();
-```
-
-Все ли они являются кросс-браузерными? Если нет -- в каких браузерах сработает каждый?
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/solution.md b/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/solution.md
deleted file mode 100644
index eae8b524..00000000
--- a/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Да, можем, но только если уверены, что кто-то позаботился о том, чтобы значение `constructor` было верным.
-
-В частности, без вмешательства в прототип код точно работает, например:
-
-```js
-//+ run
-function User(name) {
-  this.name = name;
-}
-
-var obj = new User('Вася');
-var obj2 = new obj.constructor('Петя');
-
-alert( obj2.name ); // Петя (сработало)
-```
-
-Сработало, так как `User.prototype.constructor == User`. 
-
-Но если кто-то, к примеру, перезапишет `User.prototype` и забудет указать `constructor`, то такой фокус не пройдёт, например:
-
-```js
-//+ run
-function User(name) {
-    this.name = name;
-  }
-*!*
-User.prototype = {};
-*/!*
-
-var obj = new User('Вася');
-var obj2 = new obj.constructor('Петя');
-
-alert( obj2.name ); // undefined
-```
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/task.md b/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/task.md
deleted file mode 100644
index 99cb4e90..00000000
--- a/1-js/9-prototypes/2-new-prototype/4-new-object-same-constructor/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Создать объект тем же конструктором
-
-[importance 5]
-
-Пусть у нас есть произвольный объект `obj`, созданный каким-то конструктором, каким -- мы не знаем, но хотели бы создать новый объект с его помощью.
-
-Сможем ли мы сделать так?
-
-```js
-var obj2 = new obj.constructor();
-```
-
-Приведите пример конструкторов для `obj`, при которых такой код будет работать верно -- и неверно.
diff --git a/1-js/9-prototypes/2-new-prototype/article.md b/1-js/9-prototypes/2-new-prototype/article.md
deleted file mode 100644
index 70120f02..00000000
--- a/1-js/9-prototypes/2-new-prototype/article.md
+++ /dev/null
@@ -1,229 +0,0 @@
-# Свойство F.prototype и создание объектов через new
-
-До этого момента мы говорили о наследовании объектов, объявленных через `{...}`. 
-
-Но в реальных проектах объекты обычно создаются функцией-конструктором через `new`. Посмотрим, как указать прототип в этом случае.
-[cut]
-
-## Свойство F.prototype
-
-Самым очевидным решением является назначение `__proto__` в конструкторе.
-
-Например, если я хочу, чтобы у всех объектов, которые создаются `new Rabbit`, был прототип `animal`, я могу сделать так:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-function Rabbit(name) {
-  this.name = name;
-*!*
-  this.__proto__ = animal;
-*/!*
-}
-
-var rabbit = new Rabbit("Кроль");
-
-alert( rabbit.eats ); // true, из прототипа
-```
-
-Недостаток этого подхода -- он не работает в IE10-. 
-
-К счастью, в JavaScript с древнейших времён существует альтернативный, встроенный в язык и полностью кросс-браузерный способ.
-
-**Чтобы новым объектам автоматически ставить прототип, конструктору ставится свойство `prototype`.**
-
-**При создании объекта через `new`, в его прототип `__proto__` записывается ссылка из `prototype` функции-конструктора.**
-
-Например, код ниже полностью аналогичен предыдущему, но работает всегда и везде:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-function Rabbit(name) {
-  this.name = name;
-}
-
-*!*
-Rabbit.prototype = animal;
-*/!*
-
-var rabbit = new Rabbit("Кроль"); //  rabbit.__proto__ == animal
-
-alert( rabbit.eats ); // true
-```
-
-Установка `Rabbit.prototype = animal` буквально говорит интерпретатору следующее: *"При создании объекта через `new Rabbit` запиши ему `__proto__  = animal`".* 
-
-[smart header="Свойство `prototype` имеет смысл только у конструктора"]
-Свойство с именем `prototype` можно указать на любом объекте, но особый смысл оно имеет, лишь если назначено функции-конструктору.
-
-Само по себе, без вызова оператора `new`, оно вообще ничего не делает, его единственное назначение -- указывать `__proto__` для новых объектов.
-[/smart]
-
-
-
-[warn header="Значением `prototype` может быть только объект"]
-Технически, в это свойство можно записать что угодно.
-
-Однако, при работе `new`, свойство `prototype` будет использовано лишь в том случае, если это объект. Примитивное значение, такое как число или строка, будет проигнорировано. 
-[/warn]
-
-## Свойство constructor
-
-У каждой функции по умолчанию уже есть свойство `prototype`. 
-
-Оно содержит объект такого вида:
-
-```js
-function Rabbit() {}
-
-Rabbit.prototype = {
-  constructor: Rabbit
-};
-```
-
-В коде выше я создал `Rabbit.prototype` вручную, но ровно такой же -- генерируется автоматически.
-
-Проверим:
-
-```js
-//+ run
-function Rabbit() {}
-
-// в Rabbit.prototype есть одно свойство: constructor
-alert( Object.getOwnPropertyNames(Rabbit.prototype) ); // constructor
-
-// оно равно Rabbit
-alert( Rabbit.prototype.constructor == Rabbit ); // true
-```
-
-Можно его использовать для создания объекта с тем же конструктором, что и данный:
-
-```js
-//+ run
-function Rabbit(name) {
-  this.name = name;
-  alert( name );
-}
-
-var rabbit = new Rabbit("Кроль");
-
-var rabbit2 = new rabbit.constructor("Крольчиха");
-```
-
-Эта возможность бывает полезна, когда, получив объект, мы не знаем в точности, какой у него был конструктор (например, сделан вне нашего кода), а нужно создать такой же.
-
-[warn header="Свойство `constructor` легко потерять"]
-JavaScript никак не использует свойство `constructor`. То есть, оно создаётся автоматически, а что с ним происходит дальше -- это уже наша забота. В стандарте прописано только его создание. 
-
-В частности, при перезаписи `Rabbit.prototype = { jumps: true }` свойства `constructor` больше не будет.
-
-Сам интерпретатор JavaScript его в служебных целях не требует, поэтому в работе объектов ничего не "сломается". Но если мы хотим, чтобы возможность получить конструктор, всё же, была, то можно при перезаписи гарантировать наличие `constructor` вручную: 
-```js
-Rabbit.prototype = {
-  jumps: true,
-*!*
-  constructor: Rabbit
-*/!*
-};
-```
-
-Либо можно поступить аккуратно и добавить свойства к встроенному `prototype` без его замены:
-```js
-// сохранится встроенный constructor
-Rabbit.prototype.jumps = true
-```
-[/warn]
-
-
-## Эмуляция Object.create для IE8- [#inherit]
-
-Как мы только что видели, с конструкторами всё просто, назначить прототип можно кросс-браузерно при помощи `F.prototype`.
-
-Теперь небольшое "лирическое отступление" в область совместимости.
-
-Прямые методы работы с прототипом осутствуют в старых IE, но один из них -- `Object.create(proto)` можно эмулировать, как раз при помощи `prototype`. И он будет работать везде, даже в самых устаревших браузерах.
-
-Кросс-браузерный аналог -- назовём его `inherit`, состоит буквально из нескольких строк:
-
-```js
-function inherit(proto) {
-  function F() {}
-  F.prototype = proto;
-  var object = new F;
-  return object;
-}
-```
-
-Результат вызова `inherit(animal)` идентичен `Object.create(animal)`. Она создаёт новый пустой объект с прототипом `animal`.
-
-Например:
-
-```js
-//+ run
-var animal = {
-  eats: true
-};
-
-var rabbit = inherit(animal);
-
-alert( rabbit.eats ); // true
-```
-
-Посмотрите внимательно на функцию `inherit` и вы, наверняка, сами поймёте, как она работает...
- 
-Если где-то неясности, то её построчное описание:
-
-```js
-//+ no-beautify
-function inherit(proto) {
-  function F() {}     // (1)
-  F.prototype = proto // (2)
-  var object = new F; // (3)
-  return object;      // (4)
-}
-```
-
-<ol>
-<li>Создана новая функция `F`. Она ничего не делает с `this`, так что если вызвать `new F`, то получим пустой объект.</li>
-<li>Свойство `F.prototype` устанавливается в будущий прототип `proto`</li>
-<li>Результатом вызова `new F` будет пустой объект с `__proto__` равным значению `F.prototype`.</li>
-<li>Мы получили пустой объект с заданным прототипом, как и хотели. Возвратим его.</li>
-</ol>
-
-Для унификации можно запустить такой код, и метод `Object.create` станет кросс-браузерным:
-
-```js
-if (!Object.create) Object.create = inherit; /* определение inherit - выше */
-```
-
-В частности, аналогичным образом работает библиотека [es5-shim](https://github.com/es-shims/es5-shim), при подключении которой `Object.create` станет доступен для всех браузеров.
-
-
-## Итого
-
-Для произвольной функции -- назовём её `Constructor`, верно следующее:
-
-<ul>
-<li>Прототип `__proto__` новых объектов, создаваемых через `new Constructor`, можно задавать при помощи свойства `Constructor.prototype`.</li>
-<li>Значением `Constructor.prototype` по умолчанию является объект с единственным свойством `constructor`, содержащим ссылку на `Constructor`. Его можно использовать, чтобы из самого объекта получить функцию, которая его создала. Однако, JavaScript никак не поддерживает корректность этого свойства, поэтому программист может его изменить или удалить.</li>
-<li>Современный метод `Object.create(proto)` можно эмулировать при помощи `prototype`, если хочется, чтобы он работал в IE8-.</li>
-</ul>
-
-
-
-[head]
-<script>
-function inherit(proto) {
-  function F() {}     
-  F.prototype = proto;
-  return new F();
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md
deleted file mode 100644
index 46d09410..00000000
--- a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```js
-//+ run
-Function.prototype.defer = function(ms) {
-  setTimeout(this, ms);
-}
-
-function f() {
-  alert( "привет" );
-}
-
-f.defer(1000); // выведет "привет" через 1 секунду
-```
-
diff --git a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md
deleted file mode 100644
index 000adcc5..00000000
--- a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Добавить функциям defer
-
-[importance 5]
-
-Добавьте всем функциям в прототип метод `defer(ms)`, который откладывает вызов функции на `ms` миллисекунд.
-
-После этого должен работать такой код:
-
-```js
-function f() {
-  alert( "привет" );
-}
-
-f.defer(1000); // выведет "привет" через 1 секунду
-```
-
diff --git a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md
deleted file mode 100644
index 6c421265..00000000
--- a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-```js
-//+ run
-Function.prototype.defer = function(ms) {
-  var f = this;
-  return function() {
-    var args = arguments,
-      context = this;
-    setTimeout(function() {
-      f.apply(context, args);
-    }, ms);
-  }
-}
-
-// проверка
-function f(a, b) {
-  alert( a + b );
-}
-
-f.defer(1000)(1, 2); // выведет 3 через 1 секунду.
-```
-
diff --git a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md
deleted file mode 100644
index ddb3d4ba..00000000
--- a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Добавить функциям defer с аргументами
-
-[importance 4]
-
-Добавьте всем функциям в прототип метод defer(ms), который возвращает обёртку, откладывающую вызов функции на ms миллисекунд.
-
-Например, должно работать так:
-
-```js
-function f(a, b) {
-  alert( a + b );
-}
-
-f.defer(1000)(1, 2); // выведет 3 через 1 секунду.
-```
-
-То есть, должны корректно передаваться аргументы.
-
-
diff --git a/1-js/9-prototypes/3-native-prototypes/article.md b/1-js/9-prototypes/3-native-prototypes/article.md
deleted file mode 100644
index 1c8ce795..00000000
--- a/1-js/9-prototypes/3-native-prototypes/article.md
+++ /dev/null
@@ -1,328 +0,0 @@
-# Встроенные "классы" в JavaScript
-
-В JavaScript есть встроенные объекты: `Date`, `Array`, `Object` и другие. Они используют прототипы и демонстрируют организацию "псевдоклассов" на JavaScript, которую мы вполне можем применить и для себя.
-
-[cut]
-
-## Откуда методы у {} ?
-
-Начнём мы с того, что создадим пустой объект и выведем его.
-
-```js
-//+ run
-var obj = {};
-alert( obj ); // "[object Object]" ?
-```
-
-Где код, который генерирует строковое представление для `alert(obj)`? Объект-то ведь пустой.
-
-## Object.prototype
-
-...Конечно же, это сделал метод `toString`, который находится... Конечно, не в самом объекте (он пуст), а в его прототипе `obj.__proto__`, можно его даже вывести:
-
-```js
-//+ run
-alert( {}.__proto__.toString ); // function toString
-```
-
-Откуда новый объект `obj` получает такой `__proto__`?
-
-<ol>
-<li>Запись `obj = {}` является краткой формой `obj = new Object`, где `Object` -- встроенная функция-конструктор для объектов.</li>
-<li>При выполнении `new Object`, создаваемому объекту ставится `__proto__` по `prototype` конструктора, который в данном случае равен встроенному `Object.prototype`.</li>
-<li>В дальнейшем при обращении к `obj.toString()` -- функция будет взята из `Object.prototype`.</li>
-</ol>
-
-<img src="native-prototypes-object.png">
-
-Это можно легко проверить:
-
-```js
-//+ run
-var obj = {};
-
-// метод берётся из прототипа?
-alert( obj.toString == Object.prototype.toString ); // true, да
-
-// проверим, правда ли что __proto__ это Object.prototype?
-alert( obj.__proto__ == Object.prototype ); // true
-
-// А есть ли __proto__ у Object.prototype?
-alert( obj.__proto__.__proto__ ); // null, нет
-```
-
-## Встроенные "классы" в JavaScript
-
-Точно такой же подход используется в массивах `Array`, функциях `Function` и других объектах. Встроенные методы для них находятся в `Array.prototype`, `Function.prototype` и т.п.
-
-<img src="native-prototypes-classes.png">
-
-Например, когда мы создаём массив, `[1, 2, 3]`, то это альтернативный вариант синтаксиса `new Array`, так что у массивов есть стандартный прототип `Array.prototype`.
-
-Но в нём есть методы лишь для массивов, а для общих методов всех объектов есть ссылка `Array.prototype.__proto__`, равная `Object.prototype`.
-
-Аналогично, для функций.
-
-Лишь для чисел (как и других примитивов) всё немного иначе, но об этом чуть далее. 
-
-Объект `Object.prototype` -- вершина иерархии, единственный, у которого `__proto__` равно `null`.
-
-**Поэтому говорят, что "все объекты наследуют от `Object`", а если более точно, то от `Object.prototype`.**
-
-"Псевдоклассом" или, более коротко, "классом", называют функцию-конструктор вместе с её `prototype`. Такой способ объявления классов называют "прототипным стилем ООП".
-
-При наследовании часть методов переопределяется, например, у массива `Array` есть свой `toString`, который выводит элементы массива через запятую:
-
-```js
-//+ run
-var arr = [1, 2, 3]
-alert( arr ); // 1,2,3 <-- результат Array.prototype.toString
-```
-
-Как мы видели раньше, у `Object.prototype` есть свой `toString`, но так как в `Array.prototype` он ищется первым, то берётся именно вариант для массивов:
-
-<img src="native-prototypes-array-tostring.png">
-
-
-[smart header="Вызов методов через `apply` из прототипа"]
-
-Ранее мы говорили о применении методов массивов к "псевдомассивам", например, можно использовать `[].join` для `arguments`:
-
-```js
-//+ run
-function showList() {
-*!*
-  alert( [].join.call(arguments, " - ") );
-*/!*
-}
-
-showList("Вася", "Паша", "Маша"); // Вася - Паша - Маша
-```
-
-Так как метод `join` находится в `Array.prototype`, то можно вызвать его оттуда напрямую, вот так:
-
-```js
-//+ run
-function showList() {
-*!*
-  alert( Array.prototype.join.call(arguments, " - ") );
-*/!*
-}
-
-showList("Вася", "Паша", "Маша"); // Вася - Паша - Маша
-```
-
-Это эффективнее, потому что не создаётся лишний объект массива `[]`, хотя, с другой стороны -- больше букв писать.
-[/smart]
-
-## Примитивы
-
-Примитивы не являются объектами, но методы берут из соответствующих прототипов: `Number.prototype`, `Boolean.prototype`, `String.prototype`.
-
-По стандарту, если обратиться к свойству числа, строки или логического значения, то будет создан объект соответствующего типа, например `new String` для строки, `new Number` для чисел, `new Boolean` -- для логических выражений.
-
-Далее будет произведена операция со свойством или вызов метода по обычным правилам, с поиском в прототипе, а затем этот объект будет уничтожен. 
-
-Именно так работает код ниже:
-
-```js
-//+ run
-var user = "Вася"; // создали строку (примитив)
-
-*!*
-alert( user.toUpperCase() ); // ВАСЯ
-// был создан временный объект new String
-// вызван метод 
-// new String уничтожен, результат возвращён
-*/!*
-```
-
-Можно даже попробовать записать в этот временный объект свойство:
-
-```js
-//+ run
-// попытаемся записать свойство в строку:
-var user = "Вася";
-user.age = 30;
-
-*!*
-alert( user.age ); // undefined
-*/!*
-```
-
-Свойство `age` было записано во временный объект, который был тут же уничтожен, так что смысла в такой записи немного.
-
-[warn header="Конструкторы `String/Number/Boolean` -- только для внутреннего использования"]
-Технически, можно создавать объекты для примитивов и вручную, например `new Number`. Но в ряде случаев получится откровенно бредовое поведение. Например:
-
-```js
-//+ run
-alert( typeof 1 ); // "number"
-
-alert( typeof new Number(1) ); // "object" ?!?
-```
-
-Или, ещё страннее:
-
-```js
-//+ run
-var zero = new Number(0);
-
-if (zero) { // объект - true, так что alert выполнится
-  alert( "число ноль -- true?!?" );
-}
-```
-
-Поэтому в явном виде `new String`, `new Number` и `new Boolean` никогда не вызываются.
-[/warn]
-
-[warn header="Значения `null` и `undefined` не имеют свойств"]
-Значения `null` и `undefined` стоят особняком. Вышесказанное к ним не относится.
-
-Для них нет соответствующих классов, в них нельзя записать свойство (будет ошибка), в общем, на конкурсе "самое примитивное значение" они точно разделили бы первое место.
-[/warn]
-
-
-## Изменение встроенных прототипов [#native-prototype-change]
-
-Встроенные прототипы можно изменять. В том числе -- добавлять свои методы.
-
-Мы можем написать метод для многократного повторения строки, и он тут же станет доступным для всех строк:
-
-```js
-//+ run
-String.prototype.repeat = function(times) {
-  return new Array(times + 1).join(this);
-};
-
-alert( "ля".repeat(3) ); // ляляля
-```
-
-Аналогично мы могли бы создать метод `Object.prototype.each(func)`, который будет применять `func` к каждому свойству:
-
-```js
-//+ run
-Object.prototype.each = function(f) {
-  for (var prop in this) {
-    var value = this[prop];
-    f.call(value, prop, value); // вызовет f(prop, value), this=value
-  }
-}
-
-// Попробуем! (внимание, пока что это работает неверно!) 
-var user = {
-  name: 'Вася',
-  age: 25
-};
-
-user.each(function(prop, val) {
-  alert( prop ); // name -> age -> (!) each
-});
-```
-
-Обратите внимание -- пример выше работает не совсем корректно. Вместе со свойствами объекта `user` он выводит и наше свойство `each`. Технически, это правильно, так как цикл `for..in` перебирает свойства и в прототипе тоже, но не очень удобно.
-
-Конечно, это легко поправить добавлением проверки `hasOwnProperty`:
-
-```js
-//+ run
-Object.prototype.each = function(f) {
-
-  for (var prop in this) {
-
-*!*
-    // пропускать свойства из прототипа
-    if (!this.hasOwnProperty(prop)) continue;
-*/!*
-
-    var value = this[prop];
-    f.call(value, prop, value);
-
-  }
-
-};
-
-// Теперь все будет в порядке
-var obj = {
-  name: 'Вася',
-  age: 25
-};
-
-obj.each(function(prop, val) {
-  alert( prop ); // name -> age
-});
-```
-
-Здесь это сработало, теперь код работает верно. Но мы же не хотим добавлять  `hasOwnProperty` в цикл по любому объекту! Поэтому либо не добавляйте свойства в `Object.prototype`, либо можно использовать [дескриптор свойства](/descriptors-getters-setters) и флаг `enumerable`.
-
-Это, конечно, не будет работать в IE8-:
-
-```js
-//+ run
-Object.prototype.each = function(f) {
-
-  for (var prop in this) {
-    var value = this[prop];
-    f.call(value, prop, value);
-  }
-
-};
-
-*!*
-// поправить объявление свойства, установив флаг enumerable: false
-Object.defineProperty(Object.prototype, 'each', {
-  enumerable: false
-});
-*/!*
-
-// Теперь все будет в порядке
-var obj = {
-  name: 'Вася',
-  age: 25
-};
-
-obj.each(function(prop, val) {
-  alert( prop ); // name -> age
-});
-```
-
-Есть несколько "за" и "против" модификации встроенных прототипов:
-
-[compare]
-+Методы в прототипе автоматически доступны везде, их вызов прост и красив.
--Новые свойства, добавленные в прототип из разных мест, могут конфликтовать между собой. Представьте, что вы подключили две библиотеки, которые добавили одно и то же свойство в прототип, но определили его по-разному. Конфликт неизбежен.
--Изменения встроенных прототипов влияют глобально, на все-все скрипты, делать их не очень хорошо с архитектурной точки зрения.
-[/compare]
-
-Как правило, минусы весомее, но есть одно исключение, когда изменения встроенных прототипов не только разрешены, но и приветствуются.
-
-**Допустимо изменение прототипа встроенных объектов, которое добавляет поддержку метода из современных стандартов в те браузеры, где её пока нет.**
-
-Например, добавим `Object.create(proto)` в старые браузеры:
-
-```js
-if (!Object.create) {
-
-  Object.create = function(proto) {
-    function F() {}
-    F.prototype = proto;
-    return new F;
-  };
-
-}
-```
-
-Именно так работает библиотека [es5-shim](https://github.com/kriskowal/es5-shim), которая предоставляет многие функции современного JavaScript для старых браузеров. Они добавляются во встроенные объекты и их прототипы.
-
-## Итого
-
-<ul>
-<li>Методы встроенных объектов хранятся в их прототипах.</li>
-<li>Встроенные прототипы можно расширить или поменять.</li>
-<li>Добавление методов в `Object.prototype`, если оно не сопровождается `Object.defineProperty` с установкой `enumerable` (IE9+), "сломает" циклы `for..in`, поэтому стараются в этот прототип методы не добавлять. 
-
-Другие прототипы изменять менее опасно, но все же не рекомендуется во избежание конфликтов.
-
-Отдельно стоит изменение с целью добавления современных методов в старые браузеры, таких как <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>, <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a> и т.п. Это допустимо и как раз делается [es5-shim](https://github.com/kriskowal/es5-shim).</li>
-</ul>
-
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototype-object.png b/1-js/9-prototypes/3-native-prototypes/native-prototype-object.png
deleted file mode 100644
index 1353bd9c..00000000
--- a/1-js/9-prototypes/3-native-prototypes/native-prototype-object.png
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="200" height="233" viewBox="0 0 200 233" xmlns="http://www.w3.org/2000/svg"><title>native-prototype-object</title><g fill="none" fill-rule="evenodd"><path stroke="#979797" d="M0 86h200v60H0z"/><text font-family="Consolas" font-size="14" fill="#000" transform="translate(0 69)"><tspan x="11" y="41">toString: function</tspan> <tspan x="11" y="57">другие методы объектов</tspan></text><text font-family="Consolas" font-size="14" font-style="italic" fill="#000" transform="translate(0 69)"><tspan x="0" y="10">Object.prototype</tspan></text><path stroke="#979797" d="M0 203h200v30H0z"/><text font-family="Consolas" font-size="14" font-style="italic" fill="#000" transform="translate(0 186)"><tspan x="0" y="10">obj</tspan></text><path d="M60.5 194.5v-41m0 0l-3 10.8h6l-3-10.8z" stroke="#4990E2" stroke-linecap="square" fill="#4990E2"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="70" y="175">__proto__</tspan></text><path d="M60.5 62.5v-41m0 0l-3 10.8h6l-3-10.8z" stroke="#4990E2" stroke-linecap="square" fill="#4990E2"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="70" y="43">__proto__</tspan></text><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="46" y="10">null</tspan></text></g></svg>
\ No newline at end of file
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.png
deleted file mode 100644
index 0c6f18e5..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.png and /dev/null differ
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring@2x.png
deleted file mode 100644
index 6f58e781..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.png
deleted file mode 100644
index 451f4548..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.png and /dev/null differ
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes@2x.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes@2x.png
deleted file mode 100644
index 28783af2..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.png
deleted file mode 100644
index 5ac3315e..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.png and /dev/null differ
diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object@2x.png b/1-js/9-prototypes/3-native-prototypes/native-prototypes-object@2x.png
deleted file mode 100644
index 26ae7911..00000000
Binary files a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md b/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md
deleted file mode 100644
index a43508c8..00000000
--- a/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  // свойства конкретной кофеварки
-  this._power = power;
-  this._waterAmount = 0;
-}
-
-// свойства и методы для всех объектов класса
-CoffeeMachine.prototype.WATER_HEAT_CAPACITY = 4200;
-
-CoffeeMachine.prototype._getTimeToBoil = function() {
-  return this._waterAmount * this.WATER_HEAT_CAPACITY * 80 / this._power;
-};
-
-CoffeeMachine.prototype.run = function() {
-  setTimeout(function() {
-    alert( 'Кофе готов!' );
-  }, this._getTimeToBoil());
-};
-
-CoffeeMachine.prototype.setWaterAmount = function(amount) {
-  this._waterAmount = amount;
-};
-
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.setWaterAmount(50);
-coffeeMachine.run();
-```
-
diff --git a/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md b/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md
deleted file mode 100644
index cfc8aa91..00000000
--- a/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Перепишите в виде класса
-
-[importance 5]
-
-Есть класс `CoffeeMachine`, заданный в функциональном стиле. 
-
-Задача: переписать `CoffeeMachine` в виде класса с использованием прототипа.
-
-Исходный код:
-
-```js
-//+ run
-function CoffeeMachine(power) {
-  var waterAmount = 0;
-
-  var WATER_HEAT_CAPACITY = 4200;
-
-  function getTimeToBoil() {
-    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
-  }
-
-  this.run = function() {
-    setTimeout(function() {
-      alert( 'Кофе готов!' );
-    }, getTimeToBoil());
-  };
-
-  this.setWaterAmount = function(amount) {
-    waterAmount = amount;
-  };
-
-}
-
-var coffeeMachine = new CoffeeMachine(10000);
-coffeeMachine.setWaterAmount(50);
-coffeeMachine.run();
-```
-
-P.S. При описании через прототипы локальные переменные недоступны методам, поэтому нужно будет переделать их в защищённые свойства.
diff --git a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md
deleted file mode 100644
index 113334fd..00000000
--- a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Почему возникает проблема
-
-Давайте подробнее разберем происходящее при вызове `speedy.found("яблоко")`:
-<ol>
-<li>Интерпретатор ищет свойство `found` в `speedy`. Но `speedy` -- пустой объект, т.к. `new Hamster` ничего не делает с `this`.</li>
-<li>Интерпретатор идёт по ссылке `speedy.__proto__ (==Hamster.prototype)` и находят там метод `found`, запускает его.</li>
-<li>Значение `this` устанавливается в объект перед точкой, т.е. в `speedy`.</li>
-<li>Для выполнения `this.food.push()` нужно найти свойство `this.food`. Оно отсутствует в `speedy`, но есть в `speedy.__proto__`.</li>
-<li>Значение `"яблоко"` добавляется в `speedy.__proto__.food`.</li>
-</ol>
-
-**У всех хомяков общий живот!** Или, в терминах JavaScript, свойство `food` изменяется в прототипе, который является общим для всех объектов-хомяков.
-
-Заметим, что этой проблемы не было бы при простом присваивании:
-
-```js
-this.food = something;
-```
-
-В этом случае значение записалось бы в сам объект, без поиска `found` в прототипе.
-
-**Проблема возникает только со свойствами-объектами в прототипе.**
-
-Исправьте её?
-
-# Исправление
-
-Для исправления проблемы нужно дать каждому хомяку свой живот. Это можно сделать, присвоив его в конструкторе.
-
-```js
-//+ run
-function Hamster() {
-*!*
-  this.food = [];
-*/!*
-}
-
-Hamster.prototype.found = function(something) {
-  this.food.push(something);
-};
-
-speedy = new Hamster();
-lazy = new Hamster();
-
-speedy.found("яблоко");
-speedy.found("орех");
-
-alert(speedy.food.length) // 2
-alert(lazy.food.length) // 0(!)
-```
-
-Теперь всё в порядке. У каждого хомяка -- свой живот.
\ No newline at end of file
diff --git a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md
deleted file mode 100644
index 48aa3220..00000000
--- a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Хомяки с __proto__
-
-[importance 5]
-
-Вы -- руководитель команды, которая разрабатывает игру, хомяковую ферму. Один из программистов получил задание создать класс "хомяк" (англ - `"Hamster"`).
-
-Объекты-хомяки должны иметь массив `food` для хранения еды и метод `found`, который добавляет к нему.
-
-Ниже -- его решение. При создании двух хомяков, если поел один -- почему-то сытым становится и второй тоже. 
-
-В чём дело? Как поправить?
-
-```js
-//+ run
-function Hamster() {}
-
-Hamster.prototype.food = []; // пустой "живот"
-
-Hamster.prototype.found = function(something) {
-  this.food.push(something);
-};
-
-// Создаём двух хомяков и кормим первого
-var speedy = new Hamster();
-var lazy = new Hamster();
-
-speedy.found("яблоко");
-speedy.found("орех");
-
-alert( speedy.food.length ); // 2
-alert( lazy.food.length ); // 2 (!??)
-```
-
diff --git a/1-js/9-prototypes/4-classes/article.md b/1-js/9-prototypes/4-classes/article.md
deleted file mode 100644
index 082c22f2..00000000
--- a/1-js/9-prototypes/4-classes/article.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# Свои классы на прототипах
-
-Используем ту же структуру, что JavaScript использует внутри себя, для объявления своих классов.
-
-[cut]
-## Обычный конструктор
-
-Вспомним, как мы объявляли классы ранее.
-
-Например, этот код задаёт класс `Animal` в функциональном стиле, без всяких прототипов:
-
-```js
-//+ run
-function Animal(name) {
-  this.speed = 0;
-  this.name = name;
-
-  this.run = function(speed) {
-    this.speed += speed;
-    alert( this.name + ' бежит, скорость ' + this.speed );
-  };
-
-  this.stop = function() {
-    this.speed = 0;
-    alert( this.name + ' стоит' );
-  };
-};
-
-var animal = new Animal('Зверь');
-
-alert( animal.speed ); // 0, начальная скорость
-animal.run(3); // Зверь бежит, скорость 3
-animal.run(10); // Зверь бежит, скорость 13
-animal.stop(); // Зверь стоит
-```
-
-## Класс через прототип
-
-А теперь создадим аналогичный класс, используя прототипы, наподобие того, как сделаны классы `Object`, `Date` и остальные.
-
-Чтобы объявить свой класс, нужно:
-
-<ol>
-<li>Объявить функцию-конструктор.</li>
-<li>Записать методы и свойства, нужные всем объектам класса, в `prototype`.</li>
-</ol>
-
-Опишем класс `Animal`:
-
-```js
-//+ run
-// конструктор
-function Animal(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-// методы в прототипе
-Animal.prototype.run = function(speed) {
-  this.speed += speed;
-  alert( this.name + ' бежит, скорость ' + this.speed );
-};
-
-Animal.prototype.stop = function() {
-  this.speed = 0;
-  alert( this.name + ' стоит' );
-};
-
-var animal = new Animal('Зверь');
-
-alert( animal.speed ); // 0, свойство взято из прототипа
-animal.run(5); // Зверь бежит, скорость 5
-animal.run(5); // Зверь бежит, скорость 10
-animal.stop(); // Зверь стоит
-```
-
-В объекте `animal` будут хранится свойства конкретного экземпляра: `name` и `speed`, а общие методы -- в прототипе.
-
-Совершенно такой же подход, как и для встроенных классов в JavaScript.
-
-## Сравнение
-
-Чем такое задание класса лучше и хуже функционального стиля?
-
-[compare]
-+Функциональный стиль записывает в каждый объект и свойства и методы, а прототипный -- только свойства. Поэтому прототипный стиль -- быстрее и экономнее по памяти.
--При создании методов через прототип, мы теряем возможность использовать локальные переменные как приватные свойства, у них больше нет общей области видимости с конструктором.
-[/compare]
-
-Таким образом, прототипный стиль -- быстрее и экономнее, но немного  менее удобен.
-
-К примеру, есть у нас приватное свойство `name` и метод `sayHi` в функциональном стиле ООП:
-
-```js
-//+ run
-function Animal(name) {
-  this.sayHi = function() {
-*!*
-    alert( name );
-*/!*
-  };
-}
-
-var animal = new Animal("Зверь");
-animal.sayHi(); // Зверь
-```
-
-При задании методов в прототипе мы не сможем её так оставить, ведь методы находятся *вне* конструктора, у них нет общей области видимости, поэтому приходится записывать `name` в сам объект, обозначив его как защищённое:
-
-```js
-//+ run
-function Animal(name) {
-*!*
-  this._name = name;
-*/!*
-}
-
-Animal.prototype.sayHi = function() {
-*!*
-  alert( this._name );
-*/!*
-}
-
-var animal = new Animal("Зверь");
-animal.sayHi(); // Зверь
-```
-
-Впрочем, недостаток этот -- довольно условный. Ведь при наследовании в функциональном стиле также пришлось бы писать `this._name`, чтобы потомок получил доступ к этому значению.
diff --git a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md
deleted file mode 100644
index 8987b2d7..00000000
--- a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md
+++ /dev/null
@@ -1,44 +0,0 @@
-Ошибка в строке:
-
-```js
-Rabbit.prototype = Animal.prototype;
-```
-
-Эта ошибка приведёт к тому, что `Rabbit.prototype` и `Animal.prototype` -- один и тот же объект. В результате методы `Rabbit` будут помещены в него и, при совпадении, перезапишут методы `Animal`.
-
-Получится, что все животные прыгают, вот пример:
-
-```js
-//+ run no-beautify
-function Animal(name) {
-  this.name = name;
-}
-
-Animal.prototype.walk = function() { 
-  alert("ходит " + this.name);
-};
-
-function Rabbit(name) {
-  this.name = name;
-}
-*!*
-Rabbit.prototype = Animal.prototype;
-*/!*
-
-Rabbit.prototype.walk = function() { 
-  alert("прыгает! и ходит: " + this.name);
-};
-
-*!*
-var animal = new Animal("Хрюшка");
-animal.walk(); // прыгает! и ходит Хрюшка
-*/!*
-```
-
-Правильный вариант этой строки:
-
-```js
-Rabbit.prototype = Object.create(Animal.prototype);
-```
-
-Если так написать, то в `Rabbit.prototype` будет отдельный объект, который прототипно наследует от `Animal.prototype`, но может содержать и свои свойства, специфичные для кроликов.
diff --git a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md
deleted file mode 100644
index ddb177e9..00000000
--- a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Найдите ошибку в наследовании
-
-[importance 5]
-
-Найдите ошибку в прототипном наследовании. К чему она приведёт?
-
-```js
-function Animal(name) {
-  this.name = name;
-}
-
-Animal.prototype.walk = function() {
-  alert( "ходит " + this.name );
-};
-
-function Rabbit(name) {
-  this.name = name;
-}
-Rabbit.prototype = Animal.prototype;
-
-Rabbit.prototype.walk = function() {
-  alert( "прыгает! и ходит: " + this.name );
-};
-```
-
diff --git a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md
deleted file mode 100644
index 19384566..00000000
--- a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Ошибка -- в том, что метод `walk` присваивается в конструкторе `Animal` самому объекту вместо прототипа.
-
-Поэтому, если мы решим перезаписать этот метод своим, специфичным для кролика, то он не сработает:
-
-```js
-// ...
-
-// записывается в прототип
-Rabbit.prototype.walk = function() {
-  alert( "прыгает " + this.name );
-};
-```
-
-Метод `this.walk` из `Animal` записывается в сам объект, и поэтому он всегда будет первым, игнорируя цепочку прототипов.
-
-Правильно было бы определять `walk` как `Animal.prototype.walk`.
-
-Тем более, что этот метод является общим для всех объектов, тратить память и время на запись его в каждый конструктор определённо ни к чему.
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md
deleted file mode 100644
index b97447f5..00000000
--- a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# В чём ошибка в наследовании
-
-[importance 5]
-
-Найдите ошибку в прототипном наследовании. К чему она приведёт?
-
-```js
-//+ run
-function Animal(name) {
-  this.name = name;
-
-  this.walk = function() {
-    alert( "ходит " + this.name );
-  };
-
-}
-
-function Rabbit(name) {
-  Animal.apply(this, arguments);
-}
-Rabbit.prototype = Object.create(Animal.prototype);
-
-Rabbit.prototype.walk = function() {
-  alert( "прыгает " + this.name );
-};
-
-var rabbit = new Rabbit("Кроль");
-rabbit.walk();
-```
-
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js
deleted file mode 100755
index 34fb026d..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock(options) {
-  this._template = options.template;
-}
-
-Clock.prototype._render = function render() {
-  var date = new Date();
-
-  var hours = date.getHours();
-  if (hours < 10) hours = '0' + hours;
-
-  var min = date.getMinutes();
-  if (min < 10) min = '0' + min;
-
-  var sec = date.getSeconds();
-  if (sec < 10) sec = '0' + sec;
-
-  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
-
-  console.log(output);
-};
-
-Clock.prototype.stop = function() {
-  clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, 1000);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md
deleted file mode 100644
index d1c08b87..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-```js
-//+ src="clock.js"
-```
-
-[edit src="solution"]Открыть полное решение[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js
deleted file mode 100755
index 34fb026d..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock(options) {
-  this._template = options.template;
-}
-
-Clock.prototype._render = function render() {
-  var date = new Date();
-
-  var hours = date.getHours();
-  if (hours < 10) hours = '0' + hours;
-
-  var min = date.getMinutes();
-  if (min < 10) min = '0' + min;
-
-  var sec = date.getSeconds();
-  if (sec < 10) sec = '0' + sec;
-
-  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
-
-  console.log(output);
-};
-
-Clock.prototype.stop = function() {
-  clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, 1000);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html
deleted file mode 100755
index ec1acda9..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики в консоли</title>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="clock.js"></script>
-  <script>
-    var clock = new Clock({
-      template: 'h:m:s'
-    });
-    clock.start();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js
deleted file mode 100755
index 87f457c6..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock(options) {
-
-  var template = options.template;
-  var timer;
-
-  function render() {
-    var date = new Date();
-
-    var hours = date.getHours();
-    if (hours < 10) hours = '0' + hours;
-
-    var min = date.getMinutes();
-    if (min < 10) min = '0' + min;
-
-    var sec = date.getSeconds();
-    if (sec < 10) sec = '0' + sec;
-
-    var output = template.replace('h', hours).replace('m', min).replace('s', sec);
-
-    console.log(output);
-  }
-
-  this.stop = function() {
-    clearInterval(timer);
-  };
-
-  this.start = function() {
-    render();
-    timer = setInterval(render, 1000);
-  }
-
-}
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html
deleted file mode 100755
index ec1acda9..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики в консоли</title>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="clock.js"></script>
-  <script>
-    var clock = new Clock({
-      template: 'h:m:s'
-    });
-    clock.start();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md b/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md
deleted file mode 100644
index 59355fee..00000000
--- a/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Класс "часы"
-
-[importance 5]
-
-Есть реализация часиков, оформленная в виде одной функции-конструктора. У неё есть приватные свойства `timer`, `template` и метод `render`.
-
-Задача: переписать часы на прототипах. Приватные свойства и методы сделать защищёнными.
-
-
-
-P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js
deleted file mode 100755
index 3e0bf9bd..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function ExtendedClock(options) {
-  Clock.apply(this, arguments);
-  this._precision = +options.precision || 1000;
-}
-
-ExtendedClock.prototype = Object.create(Clock.prototype);
-
-ExtendedClock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, this._precision);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md
deleted file mode 100644
index f58d46d8..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Наследник:
-
-```js
-//+ src="extended-clock.js"
-```
-
-[edit src="solution"]Открыть полное решение в редакторе[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js
deleted file mode 100755
index 34fb026d..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock(options) {
-  this._template = options.template;
-}
-
-Clock.prototype._render = function render() {
-  var date = new Date();
-
-  var hours = date.getHours();
-  if (hours < 10) hours = '0' + hours;
-
-  var min = date.getMinutes();
-  if (min < 10) min = '0' + min;
-
-  var sec = date.getSeconds();
-  if (sec < 10) sec = '0' + sec;
-
-  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
-
-  console.log(output);
-};
-
-Clock.prototype.stop = function() {
-  clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, 1000);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js
deleted file mode 100755
index 3e0bf9bd..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function ExtendedClock(options) {
-  Clock.apply(this, arguments);
-  this._precision = +options.precision || 1000;
-}
-
-ExtendedClock.prototype = Object.create(Clock.prototype);
-
-ExtendedClock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, this._precision);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html
deleted file mode 100755
index c226468c..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики в консоли</title>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="clock.js"></script>
-
-  <script src="extended-clock.js"></script>
-
-  <script>
-    var lowResolutionClock = new ExtendedClock({
-      template: 'h:m:s',
-      precision: 10000
-    });
-
-    lowResolutionClock.start();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js
deleted file mode 100755
index 34fb026d..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock(options) {
-  this._template = options.template;
-}
-
-Clock.prototype._render = function render() {
-  var date = new Date();
-
-  var hours = date.getHours();
-  if (hours < 10) hours = '0' + hours;
-
-  var min = date.getMinutes();
-  if (min < 10) min = '0' + min;
-
-  var sec = date.getSeconds();
-  if (sec < 10) sec = '0' + sec;
-
-  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
-
-  console.log(output);
-};
-
-Clock.prototype.stop = function() {
-  clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
-  this._render();
-  var self = this;
-  this._timer = setInterval(function() {
-    self._render();
-  }, 1000);
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js
deleted file mode 100755
index 3b3efe1e..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function extend(Child, Parent) {
-  Child.prototype = inherit(Parent.prototype);
-  Child.prototype.constructor = Child;
-  Child.parent = Parent.prototype;
-}
-
-function inherit(proto) {
-  function F() {}
-  F.prototype = proto;
-  return new F;
-}
-
-// ваш код
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html
deleted file mode 100755
index 4aac9ceb..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики в консоли</title>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <!-- исходные часы, от них нужно унаследовать -->
-  <script src="clock.js"></script>
-  <script>
-    var clock = new Clock({
-      template: 'h:m:s'
-    });
-    clock.start();
-
-
-    /* ... ваш код для ExtendedClock */
-
-    /*
-	Надо: часы, которые тикают раз в 10 секунд (точность 10000)
-    var lowResolutionClock = new ExtendedClock({
-        template: 'h:m:s',
-        precision: 10000
-    });
-
-    lowResolutionClock.start();
-    */
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md
deleted file mode 100644
index 94bee22a..00000000
--- a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Класс "расширенные часы"
-
-[importance 5]
-
-Есть реализация часиков на прототипах. Создайте класс, расширяющий её, добавляющий поддержку параметра `precision`, который будет задавать частоту тика в `setInterval`. Значение по умолчанию: `1000`.
-
-
-
-<ul>
-<li>Для этого класс `Clock` надо унаследовать. Пишите ваш новый код в файле `extended-clock.js`.</li>
-<li>Исходный класс `Clock` менять нельзя.</li>
-<li>Пусть конструктор потомка вызывает конструктор родителя. Это позволит избежать проблем при расширении `Clock` новыми опциями.</li>
-</ul>
-
-P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md
deleted file mode 100644
index 9cb942f7..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md
+++ /dev/null
@@ -1,3 +0,0 @@
-[edit src="solution"]Открыть решение в редакторе[/edit]
-
-Обратите внимание: константы состояний перенесены в прототип, чтобы `AnimatingMenu` их тоже унаследовал.
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html
deleted file mode 100755
index 705919d8..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="menu.js"></script>
-  <script>
-    function AnimatingMenu() {
-      Menu.apply(this, arguments);
-    }
-
-    AnimatingMenu.prototype = Object.create(Menu.prototype);
-
-    AnimatingMenu.prototype.STATE_ANIMATING = 2;
-
-    AnimatingMenu.prototype.open = function() {
-      var self = this;
-
-      this._state = this.STATE_ANIMATING;
-
-      this._timer = setTimeout(function() {
-        Menu.prototype.open.call(self);
-      }, 1000);
-    };
-
-    AnimatingMenu.prototype.close = function() {
-      clearTimeout(this._timer);
-      Menu.prototype.close.apply(this);
-    };
-
-    AnimatingMenu.prototype._stateAsString = function() {
-
-      switch (this._state) {
-        case this.STATE_ANIMATING:
-          return 'анимация';
-
-        default:
-          return Menu.prototype._stateAsString.call(this);
-      }
-    };
-
-    // тест, использование..
-    var menu = new AnimatingMenu();
-
-    menu.showState(); // закрыто
-
-    menu.open();
-    menu.showState(); // анимация
-
-    setTimeout(function() { // через 1 секунду
-      menu.showState(); // открыто
-
-      menu.close();
-      menu.showState(); // закрыто
-    }, 1000);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js
deleted file mode 100755
index 9a91f30e..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function Menu(state) {
-  this._state = state || this.STATE_CLOSED;
-};
-
-Menu.prototype.STATE_OPEN = 1;
-Menu.prototype.STATE_CLOSED = 0;
-
-Menu.prototype.open = function() {
-  this._state = this.STATE_OPEN;
-};
-
-Menu.prototype.close = function() {
-  this._state = this.STATE_CLOSED;
-};
-
-Menu.prototype._stateAsString = function() {
-  switch (this._state) {
-    case this.STATE_OPEN:
-      return 'открыто';
-
-    case this.STATE_CLOSED:
-      return 'закрыто';
-  }
-};
-
-Menu.prototype.showState = function() {
-  alert(this._stateAsString());
-}
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html
deleted file mode 100755
index 20de9758..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script src="menu.js"></script>
-  <script>
-    var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
-
-    // использование..
-
-    var menu = new AnimatingMenu();
-
-    menu.showState(); // закрыто
-
-    menu.open();
-    menu.showState(); // анимация
-
-    setTimeout(function() {
-      menu.showState(); // открыто
-
-      menu.close();
-      menu.showState(); // закрыто (закрытие без анимации)
-    }, 1000);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js
deleted file mode 100755
index 996329ad..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function Menu(state) {
-  this._state = state || Menu.STATE_CLOSED;
-};
-
-Menu.STATE_OPEN = 1;
-Menu.STATE_CLOSED = 0;
-
-Menu.prototype.open = function() {
-  this._state = Menu.STATE_OPEN;
-};
-
-Menu.prototype.close = function() {
-  this._state = Menu.STATE_CLOSED;
-};
-
-Menu.prototype._stateAsString = function() {
-  switch (this._state) {
-    case Menu.STATE_OPEN:
-      return 'открыто';
-
-    case Menu.STATE_CLOSED:
-      return 'закрыто';
-  }
-};
-
-Menu.prototype.showState = function() {
-  alert(this._stateAsString());
-};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md
deleted file mode 100644
index dd080260..00000000
--- a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Меню с таймером для анимации
-
-[importance 5]
-
-Есть класс `Menu`. У него может быть два состояния: открыто `STATE_OPEN` и закрыто `STATE_CLOSED`.
-
-Создайте наследника `AnimatingMenu`, который добавляет третье состояние `STATE_ANIMATING`.
-<ul>
-<li>При вызове `open()` состояние меняется на `STATE_ANIMATING`, а через 1 секунду, по таймеру, открытие завершается вызовом `open()` родителя.</li>
-<li>Вызов `close()` при необходимости отменяет таймер анимации (назначаемый в `open`) и передаёт вызов родительскому `close`.</li>
-<li>Метод `showState` для нового состояния выводит `"анимация"`, для остальных -- полагается на родителя.</li>
-</ul>
-
-[edit src="source"]Исходный документ, вместе с тестом[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/solution.md b/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/solution.md
deleted file mode 100644
index 4339ffe9..00000000
--- a/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-**Нет, не распознает, выведет `false`.**
-
-Свойство `constructor` содержится в `prototype` функции по умолчанию, интерпретатор не поддерживает его корректность. Посмотрим, чему оно равно и откуда оно будет взято в данном случае.
-
-Порядок поиска свойства `rabbit.constructor`, по цепочке прототипов:
-<ol>
-<li>`rabbit` -- это пустой объект, в нём нет.</li>
-<li>`Rabbit.prototype` -- в него при помощи `Object.create` записан пустой объект, наследующий от `Animal.prototype`. Поэтому `constructor'а` в нём также нет.</li>
-<li>`Animal.prototype` -- у функции `Animal` свойство `prototype` никто не менял. Поэтому оно содержит `Animal.prototype.constructor == Animal`.</li>
-</ol>
-
-```js
-//+ run
-function Animal() {}
-
-function Rabbit() {}
-Rabbit.prototype = Object.create(Animal.prototype);
-
-var rabbit = new Rabbit();
-
-*!*
-alert( rabbit.constructor == Rabbit ); // false
-alert( rabbit.constructor == Animal ); // true
-*/!*
-```
-
diff --git a/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/task.md b/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/task.md
deleted file mode 100644
index ea7fde62..00000000
--- a/1-js/9-prototypes/5-class-inheritance/6-constructor-inherited/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Что содержит constructor?
-
-[importance 5]
-
-В коде ниже создаётся простейшая иерархия классов: `Animal -> Rabbit`.
-
-Что содержит свойство `rabbit.constructor`? Распознает ли проверка в `alert` объект как `Rabbit`?
-
-```js
-function Animal() {}
-
-function Rabbit() {}
-Rabbit.prototype = Object.create(Animal.prototype);
-
-var rabbit = new Rabbit();
-
-alert( rabbit.constructor == Rabbit ); // что выведет?
-```
-
diff --git a/1-js/9-prototypes/5-class-inheritance/article.md b/1-js/9-prototypes/5-class-inheritance/article.md
deleted file mode 100644
index 3aa7012c..00000000
--- a/1-js/9-prototypes/5-class-inheritance/article.md
+++ /dev/null
@@ -1,358 +0,0 @@
-# Наследование классов в JavaScript
-
-Наследование на уровне объектов в JavaScript, как мы видели, реализуется через ссылку `__proto__`.
-
-Теперь поговорим о наследовании на уровне классов, то есть когда объекты, создаваемые, к примеру, через `new Admin`, должны иметь все методы, которые есть у объектов, создаваемых через `new User`, и ещё какие-то свои.
-
-[cut]
-
-## Наследование Array от Object
-
-Для реализации наследования в наших классах мы будем использовать тот же подход, который принят внутри JavaScript.
-
-Взглянем на него ещё раз на примере `Array`, который наследует от `Object`:
-
-<img src="class-inheritance-array-object.png">
-
-<ul>
-<li>Методы массивов `Array` хранятся в `Array.prototype`.</li>
-<li>`Array.prototype` имеет прототипом `Object.prototype`.</li>
-</ul>
-
-Поэтому когда экземпляры класса `Array` хотят получить метод массива -- они берут его из своего прототипа, например `Array.prototype.slice`. 
-
-Если же нужен метод объекта, например, `hasOwnProperty`, то его в `Array.prototype` нет, и он берётся из `Object.prototype`.
-
-Отличный способ "потрогать это руками" -- запустить в консоли команду `console.dir([1,2,3])`.
-
-Вывод в Chrome будет примерно таким:
-
-<img src="console_dir_array.png">
-
-Здесь отчётливо видно, что сами данные и `length` находятся в массиве, дальше в `__proto__` идут методы для массивов `concat`, то есть `Array.prototype`, а далее -- `Object.prototype`.
-
-[smart header="`console.dir` для доступа к свойствам"]
-Обратите внимание, я использовал именно `console.dir`, а не `console.log`, поскольку `log` зачастую выводит объект в виде строки, без доступа к свойствам.
-[/smart]
-
-## Наследование в наших классах
-
-Применим тот же подход для наших классов: объявим класс `Rabbit`, который будет наследовать от `Animal`.
-
-Вначале создадим два этих класса по отдельности, они пока что будут совершенно независимы.
-
-`Animal`:
-
-```js
-function Animal(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-Animal.prototype.run = function(speed) {
-  this.speed += speed;
-  alert( this.name + ' бежит, скорость ' + this.speed );
-};
-
-Animal.prototype.stop = function() {
-  this.speed = 0;
-  alert( this.name + ' стоит' );
-};
-```
-
-`Rabbit`:
-
-```js
-function Rabbit(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-Rabbit.prototype.jump = function() {
-  this.speed++;
-  alert( this.name + ' прыгает' );
-};
-
-var rabbit = new Rabbit('Кроль');
-```
-
-Для того, чтобы наследование работало, объект `rabbit = new Rabbit` должен использовать свойства и методы из своего прототипа `Rabbit.prototype`, а если их там нет, то -- свойства и метода родителя, которые хранятся в `Animal.prototype`.
-
-Если ещё короче -- порядок поиска свойств и методов должен быть таким: `rabbit -> Rabbit.prototype -> Animal.prototype`, по аналогии с тем, как это сделано для объектов и массивов. 
-
-Для этого можно поставить ссылку `__proto__` с `Rabbit.prototype` на `Animal.prototype`.
-
-Можно сделать это так:
-```js
-Rabbit.prototype.__proto__ = Animal.prototype;
-```
-
-Однако, прямой доступ к `__proto__` не поддерживается в IE10-, поэтому для поддержки этих браузеров мы используем функцию `Object.create`. Она либо встроена либо легко эмулируется во всех браузерах.
-
-Класс `Animal` остаётся без изменений, а `Rabbit.prototype` мы будем создавать с нужным прототипом, используя `Object.create`:
-
-```js
-//+ no-beautify
-function Rabbit(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-*!*
-// задаём наследование
-Rabbit.prototype = Object.create(Animal.prototype);
-*/!*
-
-// и добавим свой метод (или методы...)
-Rabbit.prototype.jump = function() { ... };
-```
-
-Теперь выглядеть иерархия будет так:
-
-<img src="class-inheritance-rabbit-animal.png">
-
-В `prototype` по умолчанию всегда находится свойство `constructor`, указывающее на функцию-конструктор. В частности, `Rabbit.prototype.constructor == Rabbit`. Если мы рассчитываем использовать это свойство, то при замене `prototype` через `Object.create` нужно его явно сохранить:
-
-```js
-Rabbit.prototype = Object.create(Animal.prototype);
-Rabbit.prototype.constructor = Rabbit;
-```
-
-## Полный код наследования
-
-Для наглядности -- вот итоговый код с двумя классами `Animal` и `Rabbit`:
-
-```js
-// 1. Конструктор Animal 
-function Animal(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-// 1.1. Методы -- в прототип
-
-Animal.prototype.stop = function() {
-  this.speed = 0;
-  alert( this.name + ' стоит' );
-}
-
-Animal.prototype.run = function(speed) {
-  this.speed += speed;
-  alert( this.name + ' бежит, скорость ' + this.speed );
-};
-
-
-// 2. Конструктор Rabbit
-function Rabbit(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-// 2.1. Наследование
-Rabbit.prototype = Object.create(Animal.prototype);
-Rabbit.prototype.constructor = Rabbit;
-
-// 2.2. Методы Rabbit
-Rabbit.prototype.jump = function() {
-  this.speed++;
-  alert( this.name + ' прыгает, скорость ' + this.speed );
-}
-```
-
-Как видно, наследование задаётся всего одной строчкой, поставленной в правильном месте.
-
-Обратим внимание: `Rabbit.prototype = Object.create(proto)` присваивается сразу после объявления конструктора, иначе он перезатрёт уже записанные в прототип методы.
-
-[warn header="Неправильный вариант: `Rabbit.prototype = new Animal`"]
-
-В некоторых устаревших руководствах предлагают вместо `Object.create(Animal.prototype)` записывать в прототип `new Animal`, вот так:
-
-```js
-// вместо Rabbit.prototype = Object.create(Animal.prototype)
-Rabbit.prototype = new Animal();
-```
-
-
-Частично, он рабочий, поскольку иерархия прототипов будет такая же, ведь `new Animal` -- это объект с прототипом `Animal.prototype`, как и `Object.create(Animal.prototype)`. Они в этом плане идентичны.
-
-Но у этого подхода важный недостаток. Как правило мы не хотим создавать `Animal`, а хотим только унаследовать его методы!
-
-Более того, на практике создание объекта может требовать обязательных аргументов, влиять на страницу в браузере, делать запросы к серверу и что-то ещё, чего мы хотели бы избежать. Поэтому рекомендуется использовать вариант с `Object.create`.
-[/warn]
-
-## Вызов конструктора родителя
-
-Посмотрим внимательно на конструкторы `Animal` и `Rabbit` из примеров выше:
-
-```js
-function Animal(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-function Rabbit(name) {
-  this.name = name;
-  this.speed = 0;
-}
-```
-
-Как видно, объект `Rabbit` не добавляет никакой особенной логики при создании, которой не было в `Animal`.
-
-Чтобы упростить поддержку кода, имеет смысл не дублировать код конструктора `Animal`, а напрямую вызвать его:
-
-```js
-function Rabbit(name) {
-  Animal.apply(this, arguments);
-}
-```
-
-Такой вызов запустит функцию `Animal` в контексте текущего объекта, со всеми аргументами, она выполнится и запишет в `this` всё, что нужно. 
-
-Здесь можно было бы использовать и `Animal.call(this, name)`, но `apply` надёжнее, так как работает с любым количеством аргументов.
-
-## Переопределение метода  
-
-Итак, `Rabbit` наследует `Animal`. Теперь если какого-то метода нет в `Rabbit.prototype` -- он будет взят из `Animal.prototype`. 
-
-В `Rabbit` может понадобиться задать какие-то методы, которые у родителя уже есть. Например, кролики бегают не так, как остальные животные, поэтому переопределим метод `run()`:
-
-```js
-Rabbit.prototype.run = function(speed) {
-  this.speed++;
-  this.jump();
-};
-```
-
-Вызов `rabbit.run()` теперь будет брать `run` из своего прототипа:
-
-<img src="class-inheritance-rabbit-run-animal.png">
-
-
-### Вызов метода родителя внутри своего
-
-Более частая ситуация -- когда мы хотим не просто заменить метод на свой, а взять метод родителя и расширить его. Скажем, кролик бежит так же, как и другие звери, но время от времени подпрыгивает.
-
-Для вызова метода родителя можно обратиться к нему напрямую, взяв из прототипа:
-
-```js
-//+ run
- Rabbit.prototype.run = function() {
-*!*
-   // вызвать метод родителя, передав ему текущие аргументы
-   Animal.prototype.run.apply(this, arguments);
-*/!*
-   this.jump();
- }
-```
-
-Обратите внимание на вызов через `apply` и явное указание контекста. 
-
-Если вызвать просто `Animal.prototype.run()`, то в качестве `this` функция `run` получит `Animal.prototype`, а это неверно, нужен текущий объект.
-
-
-## Итого
-
-<ul>
-<li>Для наследования нужно, чтобы "склад методов потомка" (`Child.prototype`) наследовал от "склада метода родителей" (`Parent.prototype`).
-
-Это можно сделать при помощи `Object.create`:
-
-Код:
-
-```js
-Rabbit.prototype = Object.create(Animal.prototype);
-```
-
-</li>
-<li>Для того, чтобы наследник создавался так же, как и родитель, он вызывает конструктор родителя в своём контексте, используя `apply(this, arguments)`, вот так:
-
-```js
-function Rabbit(...) {
-  Animal.apply(this, arguments);
-}
-```
-
-</li>
-<li>При переопределении метода родителя в потомке, к исходному методу можно обратиться, взяв его напрямую из прототипа:
-
-```js
-Rabbit.prototype.run = function() {
-  var result = Animal.prototype.run.apply(this, ...);
-  // result -- результат вызова метода родителя 
-}
-```
-
-</li>
-</ul>
-
-Структура наследования полностью:
-
-```js
-//+ run
-*!*
-// --------- Класс-Родитель ------------
-*/!*
-// Конструктор родителя пишет свойства конкретного объекта
-function Animal(name) {
-  this.name = name;
-  this.speed = 0;
-}
-
-// Методы хранятся в прототипе
-Animal.prototype.run = function() {
-  alert(this.name + " бежит!")
-}
-
-*!*
-// --------- Класс-потомок -----------
-*/!*
-// Конструктор потомка
-function Rabbit(name) {
-  Animal.apply(this, arguments);
-}
-
-// Унаследовать
-*!*
-Rabbit.prototype = Object.create(Animal.prototype);
-*/!*
-
-// Желательно и constructor сохранить
-Rabbit.prototype.constructor = Rabbit;
-
-// Методы потомка
-Rabbit.prototype.run = function() {
-  // Вызов метода родителя внутри своего
-  Animal.prototype.run.apply(this);
-  alert( this.name + " подпрыгивает!" );
-};
-
-// Готово, можно создавать объекты
-var rabbit = new Rabbit('Кроль');
-rabbit.run();
-```
-
-Такое наследование лучше функционального стиля, так как не дублирует методы в каждом объекте.
-
-Кроме того, есть ещё неявное, но очень важное архитектурное отличие.
-
-Зачастую вызов конструктора имеет какие-то побочные эффекты, например влияет на документ. Если конструктор родителя имеет какое-то поведение, которое нужно переопределить в потомке, то в функциональном стиле это невозможно.
-
-Иначе говоря, в функциональном стиле в процессе создания `Rabbit` нужно обязательно вызывать `Animal.apply(this, arguments)`, чтобы получить методы родителя -- и если этот `Animal.apply` кроме добавления методов говорит: "Му-у-у!", то это проблема:
-
-```js
-function Animal() {
-  this.walk = function() {
-    alert('walk')
-  };
-  alert( 'Му-у-у!' );
-}
-
-function Rabbit() {
-  Animal.apply(this, arguments); // как избавиться от мычания, но получить walk?
-}
-```
-
-...Которой нет в прототипном подходе, потому что в процессе создания `new Rabbit` мы вовсе не обязаны вызывать конструктор родителя. Ведь методы находятся в прототипе. 
-
-Поэтому прототипный подход стоит предпочитать функциональному как более быстрый и универсальный. А что касается красоты синтаксиса -- она сильно лучше в новом стандарте ES6, которым можно пользоваться уже сейчас, если взять транслятор [babeljs](https://babeljs.io/).
-
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.png
deleted file mode 100644
index 9bb33ca2..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object@2x.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object@2x.png
deleted file mode 100644
index 975c24fc..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.png
deleted file mode 100644
index e1a75f0e..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal@2x.png
deleted file mode 100644
index ad834718..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.png
deleted file mode 100644
index 9582a793..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal@2x.png b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
deleted file mode 100644
index 3316df5a..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png b/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png
deleted file mode 100755
index cd8506f4..00000000
Binary files a/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png and /dev/null differ
diff --git a/1-js/9-prototypes/6-instanceof/1-strange-instanceof/solution.md b/1-js/9-prototypes/6-instanceof/1-strange-instanceof/solution.md
deleted file mode 100644
index 6bf55d43..00000000
--- a/1-js/9-prototypes/6-instanceof/1-strange-instanceof/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Да, это выглядит достаточно странно, поскольку объект `a` не создавался функцией `B`. 
-
-Но методу `instanceof` на самом деле вообще не важна функция. Он смотрит на её `prototype` и сверяет его с цепочкой `__proto__` объекта.
-
-В данном случае `a.__proto__ == B.prototype`, поэтому `instanceof` возвращает `true`.
-
-По логике `instanceof` именно прототип задаёт "тип объекта", поэтому `instanceof` работает именно так.
\ No newline at end of file
diff --git a/1-js/9-prototypes/6-instanceof/1-strange-instanceof/task.md b/1-js/9-prototypes/6-instanceof/1-strange-instanceof/task.md
deleted file mode 100644
index a3c73f74..00000000
--- a/1-js/9-prototypes/6-instanceof/1-strange-instanceof/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Странное поведение instanceof
-
-[importance 5]
-
-Почему `instanceof` в коде ниже возвращает `true`, ведь объект `a` явно создан не `B()`?
-
-```js
-//+ run
-function A() {}
-
-function B() {}
-
-A.prototype = B.prototype = {};
-
-var a = new A();
-
-*!*
-alert( a instanceof B ); // true
-*/!*
-```
-
diff --git a/1-js/9-prototypes/6-instanceof/2-instanceof-result/solution.md b/1-js/9-prototypes/6-instanceof/2-instanceof-result/solution.md
deleted file mode 100644
index 646e3aa1..00000000
--- a/1-js/9-prototypes/6-instanceof/2-instanceof-result/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Да, распознает.
-
-Он проверяет наследование с учётом цепочки прототипов.
-
-```js
-//+ run
-function Animal() {}
-
-function Rabbit() {}
-Rabbit.prototype = Object.create(Animal.prototype);
-
-var rabbit = new Rabbit();
-
-alert( rabbit instanceof Rabbit ); // true
-alert( rabbit instanceof Animal ); // true
-alert( rabbit instanceof Object ); // true
-```
-
diff --git a/1-js/9-prototypes/6-instanceof/2-instanceof-result/task.md b/1-js/9-prototypes/6-instanceof/2-instanceof-result/task.md
deleted file mode 100644
index 56c971e4..00000000
--- a/1-js/9-prototypes/6-instanceof/2-instanceof-result/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Что выведет instanceof?
-
-[importance 5]
-
-В коде ниже создаётся простейшая иерархия классов: `Animal -> Rabbit`.
-
-Что выведет [instanceof](/instanceof)?  
-
-Распознает ли он `rabbit` как `Animal`, `Rabbit` и к тому же `Object`?
-
-```js
-function Animal() {}
-
-function Rabbit() {}
-Rabbit.prototype = Object.create(Animal.prototype);
-
-var rabbit = new Rabbit();
-
-alert( rabbit instanceof Rabbit );
-alert( rabbit instanceof Animal );
-alert( rabbit instanceof Object );
-```
-
diff --git a/1-js/9-prototypes/6-instanceof/article.md b/1-js/9-prototypes/6-instanceof/article.md
deleted file mode 100644
index 174333cf..00000000
--- a/1-js/9-prototypes/6-instanceof/article.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Проверка класса: "instanceof" 
-
-Оператор `instanceof` позволяет проверить, какому классу принадлежит объект, с учетом прототипного наследования.
-
-[cut]
-
-## Алгоритм работы instanceof [#ref-instanceof]
-
-Вызов `obj instanceof Constructor` возвращает `true`, если объект принадлежит классу `Constructor` или его родителям.
-
-Пример использования:
-
-```js
-//+ run
-function Rabbit() {}
-
-*!*
-// создаём объект
-*/!*
-var rabbit = new Rabbit();
-
-// проверяем -- этот объект создан Rabbit?
-*!*
-alert( rabbit instanceof Rabbit ); // true, верно
-*/!*
-```
-
-Массив `arr` принадлежит классу `Array`, но также и является объектом `Object`. Это верно, так как массивы наследуют от объектов:
-
-```js
-//+ run
-var arr = [];
-alert( arr instanceof Array ); // true
-alert( arr instanceof Object ); // true
-```
-
-Как это часто бывает в JavaScript, здесь есть ряд тонкостей. В некоторых ситуациях, проверка может даже ошибаться!
-
-**Алгоритм проверки `obj instanceof Constructor`:**
-
-<ol>
-<li>Получить `obj.__proto__`</li>
-<li>Сравнить `obj.__proto__` с `Constructor.prototype`</li>
-<li>Если не совпадает, тогда заменить `obj` на `obj.__proto__` и повторить проверку на шаге 2 до тех пор, пока либо не найдется совпадение (результат `true`), либо цепочка прототипов не закончится (результат `false`).</li>
-</ol>
-
-В проверке `rabbit instanceof Rabbit` совпадение происходит на первом же шаге этого алгоритма, так как: `rabbit.__proto__ == Rabbit.prototype`.
-
-А если рассмотреть `arr instanceof Object`, то совпадение будет найдено на следующем шаге, так как `arr.__proto__.__proto__ == Object.prototype`.
-
-Забавно, что сама функция-констуктор не участвует в процессе проверки! Важна только цепочка прототипов для проверяемого объекта.
-
-Это может приводить к забавному результату и даже ошибкам в проверке при изменении `prototype`, например:
-
-```js
-//+ run
-// Создаём объект rabbit, как обычно
-function Rabbit() {}
-var rabbit = new Rabbit();
-
-// изменили prototype...
-Rabbit.prototype = {};
-
-// ...instanceof перестал работать!
-*!*
-alert( rabbit instanceof Rabbit ); // false
-*/!*
-```
-
-Стоит ли говорить, что это один из доводов для того, чтобы никогда не менять `prototype`? Так сказать, во избежание.
-
-[warn header="Не друзья: `instanceof` и фреймы"]
-
-Оператор `instanceof` не срабатывает, когда значение приходит из другого окна или фрейма.
-
-Например, массив, который создан в ифрейме и передан родительскому окну -- будет массивом *в том ифрейме*, но не в родительском окне. Проверка `instanceof Array` в родительском окне вернёт `false`.
-
-Вообще, у каждого окна и фрейма -- своя иерархия объектов и свой `window` .
-
-Как правило, эта проблема возникает со встроенными объектами, в этом случае используется проверка внутреннего свойства `[[Class]]`, которое подробнее описано в главе [](/class-instanceof).
-[/warn]
-
-
-## Итого
-
-<ul>
-<li>Оператор `obj instanceof Func` проверяет тот факт, что `obj` является результатом вызова `new Func`. Он учитывает цепочку `__proto__`, поэтому наследование поддерживается.</li>
-<li>Оператор `instanceof` не сможет проверить тип значения, если объект создан в одном окне/фрейме, а проверяется в другом. Это потому, что в каждом окне -- своя иерархия объектов. Для точной проверки типов встроенных объектов можно использовать свойство `[[Class]]`.</li>
-</ul>
-
-Оператор `instanceof` особенно востребован в случаях, когда мы работаем с иерархиями классов. Это наилучший способ проверить принадлежность тому или иному классу с учётом наследования.
diff --git a/1-js/9-prototypes/7-oop-errors/1-format-error/solution.md b/1-js/9-prototypes/7-oop-errors/1-format-error/solution.md
deleted file mode 100644
index 1532bd3c..00000000
--- a/1-js/9-prototypes/7-oop-errors/1-format-error/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-//+ run
-function FormatError(message) {
-  this.name = "FormatError";
-
-  this.message = message;
-
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(this, this.constructor);
-  } else {
-    this.stack = (new Error()).stack;
-  }
-
-}
-
-FormatError.prototype = Object.create(SyntaxError.prototype);
-FormatError.prototype.constructor = FormatError;
-
-// Использование
-
-var err = new FormatError("ошибка форматирования");
-
-alert( err.message ); // ошибка форматирования
-alert( err.name ); // FormatError
-alert( err.stack ); // стек на момент генерации ошибки
-
-alert( err instanceof SyntaxError ); // true
-```
\ No newline at end of file
diff --git a/1-js/9-prototypes/7-oop-errors/1-format-error/task.md b/1-js/9-prototypes/7-oop-errors/1-format-error/task.md
deleted file mode 100644
index bd78ad35..00000000
--- a/1-js/9-prototypes/7-oop-errors/1-format-error/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Унаследуйте от SyntaxError
-
-[importance 5]
-
-Создайте ошибку `FormatError`, которая будет наследовать от встроенного класса `SyntaxError`.
-
-Синтаксис для её создания -- такой же, как обычно:
-
-```js
-var err = new FormatError("ошибка форматирования");
-
-alert( err.message ); // ошибка форматирования
-alert( err.name ); // FormatError
-alert( err.stack ); // стек на момент генерации ошибки
-
-alert( err instanceof SyntaxError ); // true
-```
diff --git a/1-js/9-prototypes/7-oop-errors/article.md b/1-js/9-prototypes/7-oop-errors/article.md
deleted file mode 100644
index 13fd9715..00000000
--- a/1-js/9-prototypes/7-oop-errors/article.md
+++ /dev/null
@@ -1,285 +0,0 @@
-# Свои ошибки, наследование от Error
-
-Когда мы работаем с внешними данными, возможны самые разные ошибки. 
-
-Если приложение сложное, то ошибки естественным образом укладываются в иерархию, разобраться в которой помогает `instanceof`.
-
-## Свой объект ошибки
-
-Для примера создадим функцию `readUser(json)`, которая будет разбирать JSON с данными посетителя. Мы его получаем с сервера -- может, нашего, а может -- чужого, в общем -- желательно проверить на ошибки. А может, это даже и не JSON, а какие-то другие данные -- не важно, для наглядности поработаем с JSON.
-
-Пример `json` на входе в функцию: `{ "name": "Вася", "age": 30 }`. 
-
-В процессе работы `readUser` возможны различные ошибки. Одна -- очевидно, `SyntaxError` -- если передан некорректный JSON.
-
-Но могут быть и другие, например `PropertyError` -- эта ошибка будет возникать, если в прочитанном объекте нет свойства `name` или `age`. 
-
-Реализуем класс `PropertyError`:
-
-```js
-function PropertyError(property) {
-  Error.call(this, property) ;
-  this.name = "PropertyError";
-
-  this.property = property;
-  this.message = "Ошибка в свойстве " + property;
-
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(this, PropertyError);
-  } else {
-    this.stack = (new Error()).stack;
-  }
-
-}
-
-PropertyError.prototype = Object.create(Error.prototype);
-```
-
-В этом коде вы можете видеть ряд важных деталей, важных именно для ошибок:
-
-<dl>
-<dt>`name` -- имя ошибки.</dt>
-<dd>Должно совпадать с именем функции.</dd>
-<dt>`message` -- сообщение об ошибке.</dt>
-<dd>Несмотря на то, что `PropertyError` наследует от `Error` (последняя строка), конструктор у неё немного другой. Он принимает не сообщение об ошибке, а название свойства `property`, ну а сообщение генерируется из него. 
-
-В результате в объекте ошибки есть как стандартное свойство `message`, так и более точное `property`.
-
-Это частая практика -- добавлять в объект ошибки свойства, которых нет в базовых объектах `Error`, более подробно описывающие ситуацию для данного класса ошибок.</dd>
-<dt>`stack` -- стек вызовов, которые в итоге привели к ошибке.</dt>
-<dd>У встроенных объектов `Error` это свойство есть автоматически, вот к примеру:
-```js
-//+ run
-function f() {
-  alert( new Error().stack );
-}
-
-f(); // выведет список вложенных вызовов, с номерами строк, где они были сделаны
-```
-
-Если же объект ошибки делаем мы, то "по умолчанию" у него такого свойства у него не будет. Нам нужно как-то самим узнавать последовательность вложенных вызовов на текущий момент. Однако удобного способа сделать это в JavaScript нет, поэтому мы поступаем хитро и копируем его из нового объекта `new Error`, который генерируем тут же.
-
-В V8 (Chrome, Opera, Node.JS) есть нестандартное расширение [Error.captureStackTrace](https://code.google.com/p/v8-wiki/wiki/JavaScriptStackTraceApi), которое позволяет стек получать.
-
-Это делает строка из кода выше:
-```js
-Error.captureStackTrace(this, PropertyError);
-```
-
-Такой вызов записывает в объект `this` (текущий объект ошибки) стек вызовов, ну а второй аргумент -- вообще не обязателен, но если есть, то говорит, что при генерации стека нужно на этой функции остановиться. В результате в стеке будет информация о цепочке вложенных вызовов вплоть до вызова `PropertyError`.
-
-То есть, будет последовательность вызовов до генерации ошибки, но не включая код самого конструктора ошибки, который, как правило, не интересен. Такое поведение максимально соответствует встроенным ошибкам JavaScript.
-</dd>
-</dl>
-
-[smart header="Конструктор родителя здесь не обязателен"]
-Обычно, когда мы наследуем, то вызываем конструктор родителя. В данном случае вызов выглядит как `Error.call(this, message)`. 
-
-Строго говоря, этот вызов здесь не обязателен. Встроенный конструктор `Error` ничего полезного не делает, даже свойство `this.message` (не говоря уже об `name` и `stack`) не назначает. Единственный возможный смысл его вызова -- он ставит специальное внутреннее свойство `[[ErrorData]]`, которое выводится в `toString` и позволяет увидить, что это ошибка. Поэтому по стандарту вызывать конструктор `Error` при наследовании в таких случаях рекомендовано.
-[/smart]
-
-
-## instanceof + try..catch = ♡
-
-Давайте теперь используем наш новый класс для `readUser`:
-
-```js
-//+ run
-*!*
-// Объявление
-*/!*
-function PropertyError(property) {
-  this.name = "PropertyError";
-
-  this.property = property;
-  this.message = "Ошибка в свойстве " + property;
-
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(this, PropertyError);
-  } else {
-    this.stack = (new Error()).stack;
-  }
-
-}
-
-PropertyError.prototype = Object.create(Error.prototype);
-
-*!*
-// Генерация ошибки
-*/!*
-function readUser(data) {
-
-  var user = JSON.parse(data);
-
-  if (!user.age) {
-    throw new PropertyError("age");
-  }
-
-  if (!user.name) {
-    throw new PropertyError("name");
-  }
-
-  return user;
-}
-
-*!*
-// Запуск и try..catch
-*/!*
-
-try {
-  var user = readUser('{ "age": 25 }');
-} catch (err) {
-  if (err instanceof PropertyError) {
-    if (err.property == 'name') {
-      // если в данном месте кода возможны анонимы, то всё нормально
-*!*
-      alert( "Здравствуйте, Аноним!" );
-*/!*
-    } else {
-      alert( err.message ); // Ошибка в свойстве ...
-    }
-  } else if (err instanceof SyntaxError) {
-    alert( "Ошибка в синтаксисе данных: " + err.message );
-  } else {
-    throw err; // неизвестная ошибка, не знаю что с ней делать
-  }
-}
-```
-
-Всё работает -- и наша ошибка `PropertyError` и встроенная `SyntaxError` корректно генерируются, перехватываются, обрабатываются.
-
-Обратим внимание на проверку типа ошибки в `try..catch`. Оператор `instanceof` проверяет класс с учётом наследования. Это значит, что если мы в дальнейшем решим создать новый тип ошибки, наследующий от  `PropertyError`, то проверка `err instanceof PropertyError` для класса-наследника тоже будет работать. Код получился расширяемым, это очень важно.
-
-## Дальнейшее наследование
-
-`PropertyError` -- это просто общего вида ошибка в свойстве. Создадим ошибку `PropertyRequiredError`, которая означает, что свойства нет. 
-
-Эт подвид `PropertyError`, так что унаследуем он неё. Общий вид конструктора-наследника -- стандартный:
-
-```js
-function PropertyRequiredError(property) {
-  // вызываем конструктор родителя и передаём текущие аргументы
-  PropertyError.apply(this, arguments);
-  ...
-}
-```
-
-Достаточно ли в наследнике просто вызвать конструктор родителя? Увы, нет.
-
-Если так поступить, то свойство `this.name` будет некорректным, да и `Error.captureStackTrace` тоже получит неправильную функцию вторым параметром.
-
-Можно ли как-то поправить конструктор родителя, чтобы от него было проще наследовать? 
-
-Для этого нужно убрать из него упоминания о конкретном классе `PropertyError`, чтобы сделать код универсальным. Частично -- это возможно. Как мы помним, существует свойство `constructor`, которое есть в `prototype` по умолчанию, и которое мы можем намеренно сохранить при наследовании.
-
-Исправим родителя `PropertyError` для более удобного наследования от него:
-
-```js
-function PropertyError(property) {
-  this.name = "PropertyError";
-
-  this.property = property;
-  this.message = "Ошибка в свойстве " + property;
-
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(this, *!*this.constructor*/!*); // (*)
-  } else {
-    this.stack = (new Error()).stack;
-  }
-
-}
-
-PropertyError.prototype = Object.create(Error.prototype);
-*!*
-PropertyError.prototype.constructor = PropertyError;
-*/!*
-```
-
-В строке `(*)` вместо ссылки на `PropertyError` используем `constructor` чтобы получить именно конструктор для текущего объекта. В наследнике там будет `PropertyRequiredError`, как и задумано.
-
-Мы убрали одну жёсткую привязку к `PropertyError`, но со второй (`this.name`), увы, сложности. Оно должно содержать имя ошибки, то есть, имя её функции-конструктора. Его можно получить через `this.name = this.constructor.name`, но в IE11- это работать не будет.
-
-Если подерживать IE11-, то тут уж придётся в наследнике его записывать вручную.
-
-Полный код для наследника:
-
-```js
-function PropertyRequiredError(property) {
-  PropertyError.apply(this, arguments);
-  this.name = 'PropertyRequiredError';
-  this.message = 'Отсутствует свойство ' + property;
-}
-
-PropertyRequiredError.prototype = Object.create(PropertyError.prototype);
-PropertyRequiredError.prototype.constructor = PropertyRequiredError;
-
-var err = new PropertyRequiredError("age");
-// пройдёт проверку
-alert( err instanceof PropertyError ); // true
-```
-
-Здесь заодно и `message` в наследнике было перезаписано на более точное. Если хочется избежать записи и перезаписи, то можно оформить его в виде геттера через `Object.defineProperty`.
-
-## Итого
-
-<ul>
-<li>Чтобы наследовать от ошибок `Error`, нужно самостоятельно позаботиться о `name`, `message` и `stack`.</li>
-<li>Благодаря тому, что `instanceof` поддерживает наследование, удобно организуются проверки на нужный тип. В иерархию ошибок можно в любой момент добавить новые классы, с понятным кодом и предсказуемым поведением.</li>
-</ul>
-
-Чтобы создавать наследники от `Error` было проще, можно создать класс `CustomError`, записать в него универсальный код, наподобие `PropertyError` и далее наследовать уже от него:
-
-```js
-*!*
-// общего вида "наша" ошибка
-*/!*
-function CustomError(message) {
-  this.name = "CustomError";
-  this.message = message;
-
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(this, this.constructor);
-  } else {
-    this.stack = (new Error()).stack;
-  }
-
-}
-
-CustomError.prototype = Object.create(Error.prototype);
-CustomError.prototype.constructor = CustomError;
-
-*!*
-// наследник
-*/!*
-function PropertyError(property) {
-  CustomError.call(this, "Отсутствует свойство " + property)
-  this.name = "PropertyError";
-
-  this.property = property;
-}
-
-PropertyError.prototype = Object.create(CustomError.prototype);
-PropertyError.prototype.constructor = PropertyError;
-
-*!*
-// и ещё уровень
-*/!*
-function PropertyRequiredError(property) {
-  PropertyError.call(this, property);
-  this.name = 'PropertyRequiredError';
-  this.message = 'Отсутствует свойство ' + property;
-}
-
-PropertyRequiredError.prototype = Object.create(PropertyError.prototype);
-PropertyRequiredError.prototype.constructor = PropertyRequiredError;
-
-*!*
-// использование
-*/!*
-var err = new PropertyRequiredError("age");
-// пройдёт проверку
-alert( err instanceof PropertyRequiredError ); // true
-alert( err instanceof PropertyError ); // true
-alert( err isntanceof CustomError ); // true
-alert( err isntanceof Error ); // true
-```
diff --git a/1-js/9-prototypes/8-mixins/article.md b/1-js/9-prototypes/8-mixins/article.md
deleted file mode 100644
index a87d1bf3..00000000
--- a/1-js/9-prototypes/8-mixins/article.md
+++ /dev/null
@@ -1,170 +0,0 @@
-# Примеси
-
-В JavaScript невозможно унаследовать от двух и более объектов. Ссылка `__proto__` -- только одна.
-
-Но потребность такая существует -- к примеру, мы написали код, релизующий методы работы с шаблонизатором или методы по обмену событиями, и хочется легко и непринуждённо добавлять эти возможности к любому классу.
-
-Обычно это делают через примеси.
-
-Примесь (англ. mixin) -- класс или объект, реализующий какое-либо чётко выделенное поведение. Используется для уточнения поведения других классов, не предназначен для самостоятельного использования.
-
-<!--break-->
-
-## Пример примеси
-
-Самый простой вариант примеси -- это объект с полезными методами, которые мы просто копируем в нужный прототип.
-
-Например:
-
-```js
-//+ run
-*!*
-// примесь
-*/!*
-var sayHiMixin = {
-  sayHi: function() {
-    alert("Привет " + this.name);
-  },
-  sayBye: function() {
-    alert("Пока " + this.name);
-  }
-};
-
-*!*
-// использование:
-*/!*
-function User(name) {
-  this.name = name;
-}
-
-// передать методы примеси
-for(var key in sayHiMixin) User.prototype[key] = sayHiMixin[key];
-
-// User "умеет" sayHi
-new User("Вася").sayHi(); // Привет Вася
-```
-
-Как видно из примера, методы примеси активно используют `this` и предназначены именно для запуска в контексте "объекта-носителя примеси".
-
-Если какие-то из методов примеси не нужны -- их можно перезаписать своими после копирования.
-
-
-## Примесь для событий
-
-Теперь пример из реальной жизни.
-
-Важный аспект, который может понадобиться объектам -- это умение работать с событиями.
-
-То есть, чтобы объект мог специальным вызовом генерировать "уведомление о событии", а на эти уведомления другие объекты могли "подписываться", чтобы их получать.
-
-Например, объект "Пользователь" при входе на сайт может генерировать событие `"login"`, а другие объекты, например "Календарь" может такие уведомления получать и подгружать информацию о пользователе.
-
-Или объект "Меню" может при выборе пункта меню генерировать событие `"select"` с информацией о выбранном пункте меню, а другие объекты -- подписавшись на это событие, будут узнавать об этом.
-
-События -- это средство "поделиться информацией" с неопределённым кругом заинтересованных лиц. А там уже кому надо -- тот среагирует.
-
-Примесь `eventMixin`, реализующая события:
-
-```js
-var eventMixin = {
-
-  /**
-   * Подписка на событие
-   * Использование:
-   *  menu.on('select', function(item) { ... }
-  */
-  on: function(eventName, handler) {
-    if (!this._eventHandlers) this._eventHandlers = {};
-    if (!this._eventHandlers[eventName]) {
-      this._eventHandlers[eventName] = [];
-    }
-    this._eventHandlers[eventName].push(handler);
-  },
-
-  /**
-   * Прекращение подписки
-   *  menu.off('select',  handler)
-   */
-  off: function(eventName, handler) {
-    var handlers = this._eventHandlers && this._eventHandlers[eventName];
-    if (!handlers) return;
-    for(var i=0; i<handlers.length; i++) {
-      if (handlers[i] == handler) {
-        handlers.splice(i--, 1);
-      }
-    }
-  },
-
-  /**
-   * Генерация события с передачей данных
-   *  this.trigger('select', item);
-   */
-  trigger: function(eventName /*, ... */) {
-
-    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
-      return; // обработчиков для события нет
-    }
-
-    // вызвать обработчики
-    var handlers = this._eventHandlers[eventName];
-    for (var i = 0; i < handlers.length; i++) {
-      handlers[i].apply(this, [].slice.call(arguments, 1));
-    }
-
-  }
-};
-```
-
-Здесь есть три метода:
-<ol>
-<li>`.on(имя события, функция)` -- назначает функцию к выполнению при наступлении события с данным именем. Такие функции хранятся в защищённом свойстве объекта `_eventHandlers`.</li>
-<li>`.off(имя события, функция)` -- удаляет функцию из списка предназначенных к выполнению.</li>
-<li>`.trigger(имя события, аргументы)` -- генерирует событие, при этом вызываются все назначенные на него функции, и им передаются аргументы.</li>
-</ol>
-
-Использование:
-
-```js
-// Класс Menu с примесью eventMixin
-function Menu() {
-  // ...
-}
-
-for(var key in eventMixin) {
-  Menu.prototype[key] = eventMixin[key];
-}
-
-// Генерирует событие select при выборе значения
-Menu.prototype.choose = function(value) {
-*!*
-  this.trigger("select", value);
-*/!*
-}
-
-// Создадим меню
-var menu = new Menu();
-
-// При наступлении события select вызвать эту функцию
-*!*
-menu.on("select", function(value) {
-  alert("Выбрано значение " + value);
-});
-*/!*
-
-// Запускаем выбор (событие select вызовет обработчики)
-menu.choose("123");
-```
-
-...То есть, смысл событий -- обычно в том, что объект, в процессе своей деятельности, внутри себя (`this.trigger`) генерирует уведомления, на которые внешний код через `menu.on(...)` может быть подписан. И узнавать из них ценную информцию о происходящем, например -- что выбран некий пункт меню.
-
-Один раз написав методы `on/off/trigger` в примеси, мы затем можем использовать их во множестве прототипов. 
-
-## Итого
-
-<ul>
-<li>Примесь -- объект, содержащий методы и свойства для реализации конкретного функционала. 
-Возможны вариации этого приёма проектирования. Например, примесь может предусматривать конструктор, который должен запускаться в конструкторе объекта. Но как правило просто набора методов хватает.</li>
-<li>Для добавления примеси в класс -- её просто "подмешивают" в прототип.</li>
-<li>"Подмешать" можно сколько угодно примесей, но если имена методов в разных примесях совпадают, то возможны конфликты. Их уже разрешать -- разработчику. Например, можно заменить конфликтующий метод на свой, который будет решать несколько задач сразу. Конфликты при грамотно оформленных примесях возникают редко.</li></ul>
-
-
diff --git a/1-js/9-prototypes/index.md b/1-js/9-prototypes/index.md
deleted file mode 100644
index 3b67318e..00000000
--- a/1-js/9-prototypes/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# ООП в прототипном стиле
-
-В этом разделе мы изучим прототипы и классы на них -- де-факто стандарт объектно-ориентированной разработки в JavaScript.
\ No newline at end of file
diff --git a/1-js/index.md b/1-js/index.md
index f3fadc3a..c313cb85 100644
--- a/1-js/index.md
+++ b/1-js/index.md
@@ -1,5 +1,6 @@
-# Язык JavaScript
+# The JavaScript language
 
-Эта часть позволит вам изучить JavaScript с нуля или упорядочить и дополнить существующие знания.
+Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.
+
+We concentrate on the language itself here, with the minimum of environment-specific notes.
 
-Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку JavaScript.
\ No newline at end of file
diff --git a/1-js/plan3.txt b/1-js/plan3.txt
new file mode 100644
index 00000000..4d553174
--- /dev/null
+++ b/1-js/plan3.txt
@@ -0,0 +1,5 @@
+todo:
+
+intl?
+proxy?
+eval?
diff --git a/10-regular-expressions-javascript/1-regexp-introduction/article.md b/10-regular-expressions-javascript/1-regexp-introduction/article.md
deleted file mode 100644
index 3fb0195a..00000000
--- a/10-regular-expressions-javascript/1-regexp-introduction/article.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Паттерны и флаги
-
-Регулярные выражения –- мощное средство поиска и замены в строке. 
-
-В JavaScript регулярные выражения реализованы отдельным объектом `RegExp` и интегрированы в методы строк.
-[cut]
-
-## Регэкспы
-
-Регулярное выражение (оно же "регэксп", "регулярка" или просто "рег"), состоит из *паттерна* (он же "шаблон") и необязательных *флагов*.
-
-Синтаксис создания регулярного выражения:
-
-```js
-var regexp = new RegExp("шаблон", "флаги");
-```
-
-Как правило, используют более короткую запись: шаблон внутри слешей `"/"`:
-
-```js
-var regexp = /шаблон/; // без флагов
-var regexp = /шаблон/gmi; // с флагами gmi (изучим их дальше)
-```
-
-Слэши `"/"` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк.
-
-## Использование
-
-Основа регулярного выражения -- паттерн. Это строка, которую можно расширить специальными символами, которые делают поиск намного мощнее.
-
-В простейшем случае, если флагов и специальных символов нет, поиск по паттерну -- то же самое, что и обычный поиск подстроки:
-
-```js
-//+ run
-var str = "Я люблю JavaScript!"; // будем искать в этой строке
-
-var regexp = /лю/;
-alert( str.search(regexp) ); // 2
-```
-
-Сравните с обычным поиском:
-
-```js
-//+ run
-var str = "Я люблю JavaScript!";
-
-var substr = "лю";
-alert( str.indexOf(substr) ); // 2
-```
-
-Как видим, то же самое, разве что для регэкспа использован метод [search](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/search) -- он как раз работает с регулярными выражениями, а для подстроки -- [indexOf](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf). 
-
-Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда увидим, что они гораздо мощнее.
-
-[smart header="Цветовые обозначения"]
-Здесь и далее в тексте используется следующая цветовая схема:
-<ul>
-<li>регэксп (регулярное выражение) - <code class="pattern">красный</code></li>
-<li>строка - <code class="subject">синий</code></li>
-<li>результат - <code class="match">зеленый</code></li>
-</ul>
-[/smart]
-
-## Флаги
-
-Регулярные выражения могут иметь флаги, которые влияют на поиск. 
-
-В JavaScript их всего три:
-
-<dl>
-<dt>`i`</dt>
-<dd>Если этот флаг есть, то регэксп ищет независимо от регистра, то есть не различает между `А` и `а`.</dd>
-<dt>`g`</dt>
-<dd>Если этот флаг есть, то регэксп ищет все совпадения, иначе -- только первое.</dd>
-<dt>`m`</dt>
-<dd>Многострочный режим.</dd>
-</dl>
-
-Самый простой для понимания из этих флагов -- безусловно, `i`. 
-
-Пример его использования:
-
-```js
-//+ run
-var str = "Я люблю JavaScript!"; // будем искать в этой строке
- 
-alert( str.search( *!*/ЛЮ/*/!* ) ); // -1
-alert( str.search( *!*/ЛЮ/i*/!* ) ); // 2
-```
-
-<ol>
-<li>С регом <code class="pattern">/ЛЮ/</code> вызов вернул `-1`, что означает "не найдено" (как и в `indexOf`),</li>
-<li>С регом <code class="pattern">/ЛЮ/i</code> вызов нашёл совпадение на позиции 2, так как стоит флаг `i`, а значит "лю" тоже подходит.</li>
-</ol>
-
-Другие флаги мы рассмотрим в последующих главах.
-
-## Итого
-
-<ul>
-<li>Регулярное выражение состоит из шаблона и необязательных флагов `g`, `i` и `m`.</li>
-<li>Поиск по регулярному выражению без флагов и спец. символов, которые мы изучим далее -- это то же самое, что и обычный поиск подстроки в строке. Но флаги и спец. символы, как мы увидим далее, могут сделать его гораздо мощнее.</li>
-<li>Метод строки `str.search(regexp)` возвращает индекс, на котором найдено совпадение.</li>
-</ul>
diff --git a/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/solution.md b/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/solution.md
deleted file mode 100644
index e5118b47..00000000
--- a/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-Нам нужна строка, которая начинается -- и тут же кончается. То есть, пустая.
-
-Или, если быть ближе к механике регэкспов, то движок сначала будет искать в тексте начальную позицию ``pattern`^`, а как только найдёт её -- будет ожидать конечной ``pattern`$`.
-
-Заметим, что и ``pattern`^` и ``pattern`$` не требуют наличия символов. Это -- проверки. В пустой строке движок сначала проверит первую, а потом -- вторую -- и зафиксирует совпадение.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/task.md b/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/task.md
deleted file mode 100644
index f5df587e..00000000
--- a/10-regular-expressions-javascript/10-regexp-ahchors/1-start-end/task.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Регэксп ^$
-
-Предложите строку, которая подойдёт под регулярное выражение ``pattern`^$`.
-
diff --git a/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/solution.md b/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/solution.md
deleted file mode 100644
index 5a91a896..00000000
--- a/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Двузначное шестнадцатиричное число -- это ``pattern`[0-9a-f]{2}` (с учётом флага ``pattern`/i`).
-
-Нам нужно одно такое число, и за ним ещё 5 с двоеточиями перед ними: ``pattern`[0-9a-f]{2}(:[0-9a-f]{2}){5}`
-
-И, наконец, совпадение должно начинаться в начале строки и заканчиваться -- в конце. То есть, строка целиком должна подходить под шаблон. Для этого обернём шаблон в ``pattern`^...$`.
-
-Итого, в действии:
-
-
-```js
-//+ run
-var re = /^[0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}$/i;
-
-alert( re.test('01:32:54:67:89:AB') ); // true
-
-alert( re.test('0132546789AB') ); // false (нет двоеточий)
-
-alert( re.test('01:32:54:67:89') ); // false (5 чисел, а не 6)
-
-alert( re.test('01:32:54:67:89:ZZ') ) // false (ZZ в конце)
-```
diff --git a/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/task.md b/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/task.md
deleted file mode 100644
index fecf7dd0..00000000
--- a/10-regular-expressions-javascript/10-regexp-ahchors/2-test-mac/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Проверьте MAC-адрес
-
-MAC-адрес сетевого интерфейса состоит из шести двузначиных шестандцатиричных чисел, разделённых двоеточием.
-
-Например: ``subject`'01:32:54:67:89:AB'`.
-
-Напишите регулярное выражение, которое по строке проверяет, является ли она корректным MAC-адресом.
-
-Использование:
-```js
-var re = ваш регэксп
-
-alert( re.test('01:32:54:67:89:AB') ); // true
-
-alert( re.test('0132546789AB') ); // false (нет двоеточий)
-
-alert( re.test('01:32:54:67:89') ); // false (5 чисел, а не 6)
-
-alert( re.test('01:32:54:67:89:ZZ') ) // false (ZZ в конце)
-```
diff --git a/10-regular-expressions-javascript/10-regexp-ahchors/article.md b/10-regular-expressions-javascript/10-regexp-ahchors/article.md
deleted file mode 100644
index 16abf01c..00000000
--- a/10-regular-expressions-javascript/10-regexp-ahchors/article.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Начало строки ^ и конец $
-
-Знак каретки <code class="pattern">'^'</code> и доллара <code class="pattern">'$'</code> имеют в регулярном выражении особый смысл. Их называют "якорями" (anchor - англ.).
-[cut]
-
-Каретка <code class="pattern">^</code> совпадает в начале текста, а доллар <code class="pattern">$</code> -- в конце.
-
-**Якоря являются не символами, а проверками.**
-
-До этого мы говорили о регулярных выражениях, которые ищут один или несколько символов. Если совпадение есть -- эти символы включаются в результат.
-
-А якоря -- не такие. Когда поиск ходит до якоря -- он проверяет, есть ли соответствие, если есть -- продолжает идти по шаблону, не прибавляя ничего к результату.
-
-Каретку <code class="pattern">^</code> обычно используют, чтобы указать, что регулярное выражение необходимо проверить именно с начала текста.
-
-Например, без каретки найдёт все числа:
-
-```js
-//+ run
-var str = '100500 попугаев съели 500100 бананов!';
-alert( str.match(/\d+/ig) ); // 100500, 500100 (нашло все числа)
-```
-
-А с кареткой -- только первое:
-
-```js
-//+ run
-var str = '100500 попугаев съели 500100 бананов!';
-alert( str.match(/^\d+/ig) ); // 100500 (только в начале строки)*!*
-```
-
-Знак доллара <code class="pattern">$</code> используют, чтобы указать, что паттерн должен заканчиваться в конце текста.
-
-Аналогичный пример с долларом для поиска числа в конце:
-
-```js
-//+ run
-var str = '100500 попугаев съели 500100';
-alert( str.match(/\d+$/ig) ); // 500100
-```
-
-Оба якоря используют одновременно, если требуется, чтобы шаблон охватывал текст с начала и до конца. Обычно это требуется при валидации.
-
-Например, мы хотим проверить, что в переменной `num` хранится именно десятичная дробь.
-
-Ей соответствует регэксп <code class="pattern">\d+\.\d+</code>. Но простой поиск найдёт дробь в любом тексте:
-
-```js
-//+ run
-var num = "ля-ля 12.34";
-alert( num.match(/\d+\.\d+/ig) ); // 12.34
-```
-
-Наша же задача -- проверить, что `num` *целиком* соответствует паттерну <code class="pattern">\d+\.\d+</code>.
-
-Для этого обернём шаблон в якоря <code class="pattern">^...$</code>:
-
-```js
-//+ run
-var num = "ля-ля 12.34";
-alert( num.match(/^\d+\.\d+$/ig) ); // null, не дробь
-
-var num = "12.34";
-alert( num.match(/^\d+\.\d+$/ig) ); // 12.34, дробь!
-```
-
-Теперь поиск ищет начало текста, за которым идёт число, затем точка, ещё число и конец текста. Это как раз то, что нужно.
-
diff --git a/10-regular-expressions-javascript/11-regexp-multiline-mode/article.md b/10-regular-expressions-javascript/11-regexp-multiline-mode/article.md
deleted file mode 100644
index 918a85eb..00000000
--- a/10-regular-expressions-javascript/11-regexp-multiline-mode/article.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# Многострочный режим, флаг "m"
-
-Многострочный режим включается, если у регэкспа есть флаг <code class="pattern">/m</code>. 
-[cut]
-
-В этом случае изменяется поведение <code class="pattern">^</code> и <code class="pattern">$</code>.
-
-В многострочном режиме якоря означают не только начало/конец текста, но и начало/конец строки.
-
-## Начало строки ^
-
-В примере ниже текст состоит из нескольких строк. Паттерн <code class="pattern">/^\d+/gm</code> берёт число с начала каждой строки:
-
-```js
-//+ run
-var str = '1е место: Винни\n' +
-  '2е место: Пятачок\n' +
-  '33е место: Слонопотам';
-
-*!*
-alert( str.match(/^\d+/gm) ); // 1, 2, 33
-*/!*
-```
-
-Обратим внимание -- без флага <code class="pattern">/m</code> было бы найдено только первое число:
-
-```js
-//+ run
-var str = '1е место: Винни\n' +
-  '2е место: Пятачок\n' +
-  '33е место: Слонопотам';
-
-alert( str.match(/^\d+/g) ); // 1
-```
-
-Это потому что в обычном режиме каретка <code class="pattern">^</code> -- это только начало текста, а в многострочном -- начало любой строки. 
-
-Движок регулярных выражений двигается по тексту, и как только видит начало строки, начинает искать там <code class="pattern">\d+</code>.
-
-## Конец строки $
-
-Символ доллара <code class="pattern">$</code> ведёт себя аналогично.
-
-Регулярное выражение <code class="pattern">[а-я]+$</code> в следующем примере находит последнее слово в каждой строке:
-
-```js
-//+ run
-var str = '1е место: Винни\n' +
-  '2е место: Пятачок\n' +
-  '33е место: Слонопотам';
-
-alert( str.match(/[а-я]+$/gim) ); // Винни,Пятачок,Слонопотам
-```
-
-Без флага <code class="pattern">m</code> якорь <code class="pattern">$</code> обозначал бы конец всего текста, и было бы найдено только последнее слово.
-
-[smart header="Якорь `$` против `\n`"]
-Для того, чтобы найти конец строки, можно использовать не только `$`, но и символ `\n`.
-
-Но, в отличие от `$`, символ `\n` во-первых берёт символ в результат, а во-вторых -- не совпадает в конце текста (если, конечно, последний символ -- не конец строки).
-
-Посмотрим, что будет с примером выше, если вместо <code class="pattern">[а-я]+$</code> использовать <code class="pattern">[а-я]+\n</code>:
-
-```js
-//+ run
-var str = '1е место: Винни\n' +
-  '2е место: Пятачок\n' +
-  '33е место: Слонопотам';
-
-alert( str.match(/[а-я]+\n/gim) ); 
-/*
-Винни
-,Пятачок
-*/
-```
-
-Всего два результата: <code class="match">Винни\n</code> (с символом перевода строки) и <code class="match">Пятачок\n</code>. Последнее слово "Слонопотам" здесь не даёт совпадения, так как после него нет перевода строки.
-[/smart]
-
-## Итого
-
-В мультистрочном режиме:
-<ul>
-<li>Символ `^` означает начало строки.</li>
-<li>Символ `$` означает конец строки.</li>
-</ul>
-
-Оба символа являются проверками, они не добавляют ничего к результату. Про них также говорят, что "они имеют нулевую длину".
-
diff --git a/10-regular-expressions-javascript/12-regexp-lookahead/article.md b/10-regular-expressions-javascript/12-regexp-lookahead/article.md
deleted file mode 100644
index 2cd4438c..00000000
--- a/10-regular-expressions-javascript/12-regexp-lookahead/article.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Предпросмотр (неготово)
-
-Требуется добавить главу про предпросмотр lookahead.
-
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/article.md b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/article.md
deleted file mode 100644
index 582c1066..00000000
--- a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/article.md
+++ /dev/null
@@ -1,305 +0,0 @@
-# Чёрная дыра бэктрекинга 
-
-Некоторые регулярные выражения, с виду являясь простыми, могут выполняться оооочень долго, и даже "подвешивать" интерпретатор JavaScript.
-
-Рано или поздно, с этим сталкивается любой разработчик, потому что нечаянно создать такое регулярное выражение -- легче лёгкого.
-
-Типична ситуация, когда регулярное выражение до поры до времени работает нормально, и вдруг на каком-то тексте как начнёт "подвешивать" интерпретатор и есть 100% процессора.
-
-Это может стать уязвимостью. Например, если JavaScript выполняется на сервере, то при разборе данных, присланных посетителем, он может зависнуть, если использует подобный регэксп. На клиенте тоже возможно подобное, при использовании регэкспа для подсветки синтаксиса.
-
-Такие уязвимости "убивали" почтовые сервера и системы обмена сообщениями и до появления JavaScript, и наверно будут "убивать" и после его исчезновения. Так что мы просто обязаны с ними разобраться.
-
-[cut]
-
-## Пример
-
-План изложения у нас будет таким:
-
-<ol>
-<li>Сначала посмотрим на проблему в реальной ситуации.</li>
-<li>Потом упростим реальную ситуацию до "корней" и увидим, откуда она берётся.</li>
-</ol>
-
-Рассмотрим, например, поиск по HTML.
-
-Мы хотим найти теги с атрибутами, то есть совпадения вида <code class="subject">&lt;a href="..." class=doc ...&gt;</code>. 
-
-Самый простой способ это сделать -- <code class="pattern">&lt;[^>]*&gt;</code>. Но он же и не совсем корректный, так как тег может выглядеть так: <code class="subject">&lt;a test="&lt;&gt;" href="#"&gt;</code>. То есть, внутри "закавыченного" атрибута может быть символ `>`. Простейший регэксп на нём остановится и найдёт <code class="match">&lt;a test="&lt;&gt;</code>.
-
-Соответствие:
-```
-<[^>]*....>
-<a test="<>" href="#">
-```
-
-А нам нужен весь тег.
-
-Для того, чтобы правильно обрабатывать такие ситуации, нужно учесть их в регулярном выражении. Оно будет иметь вид <code class="pattern">&lt;тег (ключ=значение)*&gt;</code>.
-
-Если перевести на язык регэкспов, то: <code class="pattern">&lt;\w+(\s*\w+=(\w+|"[^"]*")\s*)*&gt;</code>:
-<ol>
-<li><code class="pattern">&lt;\w+</code> -- начало тега</li>
-<li><code class="pattern">(\s*\w+=(\w+|"[^"]*")\s*)*</code> -- произвольное количество пар вида `слово=значение`, где "значение" может быть также словом <code class="pattern">\w+</code>, либо строкой в кавычках <code class="pattern">"[^"]*"</code>.</li>
-</ol>
-
-
-Мы пока не учитываем все детали грамматики HTML, ведь строки возможны и в 'одинарных' кавычках, но на данный момент этого достаточно. Главное, что регулярное выражение получилось в меру простым и понятным.
-
-
-Испытаем полученный регэксп в действии:
-
-```js
-//+ run
-var reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
-
-var str='...<a test="<>" href="#">... <b>...';
-
-alert( str.match(reg) ); // <a test="<>" href="#">, <b>
-```
-
-Отлично, всё работает! Нашло как длинный тег <code class="match">&lt;a test="&lt;&gt;" href="#"&gt;</code>, так и одинокий <code class="match">&lt;b&gt;</code>.
-
-А теперь -- демонстрация проблемы. 
-
-Если запустить пример ниже, то он может подвесить браузер:
-
-```js
-//+ run
-var reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
-
-var str = "<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  \
-a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
-
-*!*
-// Этот поиск будет выполняться очень, очень долго
-alert( str.match(reg) );
-*/!*
-```
-
-Некоторые движки регулярных выражений могут в разумное время разобраться с таким поиском, но большинство -- нет.
-
-В чём дело? Почему несложное регулярное выражение на такой небольшой строке "виснет" наглухо?
-
-Упростим ситуацию, удалив тег и возможность указывать строки в кавычках:
-
-
-```js
-//+ run
-// только атрибуты, разделённые пробелами
-var reg = /<(\s*\w+=\w+\s*)*>/g;
-
-var str = "<a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  \
-a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
-
-*!*
-// Этот поиск будет выполняться очень, очень долго
-alert( str.match(reg) );
-*/!*
-```
-
-То же самое.
-
-На этом мы закончим с демонстрацией "практического примера" и перейдём к разбору происходящего.
-
-## Бектрекинг
-
-В качестве ещё более простого регулярного выражения, рассмотрим <code class="pattern">(\d+)*$</code>.
-
-В большинстве движков регэкспов, например в Chrome или IE, этот поиск выполняется очень долго (осторожно, может "подвесить" браузер):
-
-```js
-//+ run
-alert( '12345678901234567890123456789123456789z'.match(/(\d+)*$/) );
-```
-
-В чём же дело, что не так с регэкспом?
-
-Внимательный читатель, посмотрев на него, наверняка удивится, ведь он "какой-то странный". Квантификатор <code class="pattern">*</code> здесь выглядит лишним. 
-
-Если хочется найти число, то с тем же успехом можно искать <code class="pattern">\d+$</code>. 
-
-Да, этот регэксп носит искусственный характер, но, разобравшись с ним, мы поймём и практический пример, данный выше. Причина их медленной работы одинакова. 
-
-В целом, с регэкспом "всё так", синтаксис вполне допустимый. Проблема в том, как выполняется поиск по нему.
-
-Посмотрим, что происходит при поиске в строке <code class="subject">123456789z</code>:
-
-<ol>
-<li>Первым делом, движок регэкспов пытается найти <code class="pattern">\d+</code>. Плюс <code class="pattern">+</code> является жадным по умолчанию, так что он хватает все цифры, какие может:
-
-```
-\d+.......
-(123456789)z
-```
-</li>
-<li>Затем движок пытается применить звёздочку вокруг скобок <code class="pattern">(\d+)*</code>, но больше цифр нет, так что звёздочка не даёт повторений.
-
-Затем в шаблоне идёт символ конца строки <code class="pattern">$</code>, а в тексте -- символ <code class="subject">z</code>. 
-
-```
-           X  
-\d+........$
-(123456789)z
-```
-Соответствия нет.
-</li>
-<li>Так как соответствие не найдено, то "жадный" плюс <code class="pattern">+</code> отступает на один символ (бэктрекинг).
-
-Теперь `\d+` -- это все цифры, за исключением последней:
-```
-\d+.......
-(12345678)9z
-```
-</li>
-<li>После бэктрекинга, <code class="pattern">\d+</code> содержит всё число, кроме последней цифры. Движок снова пытается найти совпадение, уже с новой позиции (`9`). 
-
-Звёздочка <code class="pattern">(\d+)*</code> теперь может быть применена -- она даёт число <code class="match">9</code>:
-
-```
-          
-\d+.......\d+
-(12345678)(9)z
-```
-Движок пытается найти `$`, но это ему не удаётся -- на его пути опять `z`:
-
-```
-             X  
-\d+.......\d+
-(12345678)(9)z
-```
-
-Так как совпадения нет, то поисковой движок отступает назад ещё раз.
-</li>
-<li>Теперь первое число <code class="pattern">\d+</code> будет содержать 7 цифр, а остаток строки <code class="subject">89</code> становится вторым <code class="pattern">\d+</code>:
-
-
-```   
-             X
-\d+......\d+
-(1234567)(89)z
-```
-
-Увы, всё ещё нет соответствия для <code class="pattern">$</code>.
-
-Поисковой движок снова должен отступить назад. При этом последний жадный квантификатор отпускает символ. В данном случае это означает, что укорачивается второй <code class="pattern">\d+</code>, до одного символа <code class="subject">8</code>, и звёздочка забирает следующий <code class="subject">9</code>.
-
-
-```   
-               X 
-\d+......\d+\d+
-(1234567)(8)(9)z
-```
-</li>
-<li>...И снова неудача. Второе и третье <code class="pattern">\d+</code> отступили по-максимуму, так что сокращается снова первое число, до <code class="subject">123456</code>, а звёздочка берёт оставшееся:
-
-```   
-             X 
-\d+.......\d+ 
-(123456)(789)z
-```
-
-Снова нет совпадения. Процесс повторяется, последний жадный квантификатор <code class="pattern">+</code> отпускает один символ (`9`):
-
-```   
-               X 
-\d+.....\d+ \d+
-(123456)(78)(9)z
-```
-</li>
-<li>
-...И так далее.
-</li>
-</ol>
-
-Получается, что движок регулярных выражений перебирает все комбинации из `123456789` и их подпоследовательности. А таких комбинаций очень много.
-
-На этом месте умный читатель может воскликнуть: "Во всём виноват бэктрекинг? Давайте включим ленивый режим -- и не будет никакого бэктрекинга!"
-
-Что ж, заменим <code class="pattern">\d+</code> на <code class="pattern">\d+?</code> и посмотрим (аккуратно, может подвесить браузер):
-
-```js
-//+ run
-alert( '12345678901234567890123456789123456789z'.match(/(\d+?)*$/) );
-```
-
-Не помогло!
-
-**Ленивые регулярные выражения делают то же самое, но в обратном порядке.**
-
-Просто подумайте о том, как будет в этом случае работать поисковой движок.
-
-Некоторые движки регулярных выражений содержат хитрые проверки и конечные автоматы, которые позволяют избежать бесконечного перебора или кардинально ускорить его, но все движки и не всегда.
-
-Возвращаясь к примеру выше -- при поиске <code class="pattern">&lt;(\s*\w+=\w+\s*)*&gt;</code> в строке <code class="subject">&lt;a=b  a=b  a=b  a=b</code> происходит то же самое.
-
-Поиск успешно начинается, выбирается некая комбинация из <code class="pattern">\s*\w+=\w+\s*</code>, которая, так как в конце нет `>`, оказывается не подходящей. Движок честно отступает, пробует другую комбинацию -- и так далее.
-
-## Что делать?
-
-Проблема -- в сверхмноговариантном переборе.
-
-Движок регулярных выражений перебирает кучу возможных вариантов скобок там, где это не нужно.
-
-Например, в регэкспе <code class="pattern">(\d+)*$</code> нам (людям) очевидно, что в <code class="pattern">(\d+)</code> откатываться не нужно. От того, что вместо одного <code class="pattern">\d+</code> у нас два независимых <code class="pattern">\d+\d+</code>, ничего не изменится.
-
-Без разницы:
-
-```         
-\d+........
-(123456789)z
-
-\d+...\d+....
-(1234)(56789)z
-```
-
-Если вернуться к более реальному примеру <code class="pattern">&lt;(\s*\w+=\w+\s*)*&gt;</code> то
-cам алгоритм поиска, который у нас в голове, предусматривает, что мы "просто" ищем тег, а потом пары `атрибут=значение` (сколько получится).
-
-Никакого "отката" здесь не нужно.
-
-В современных регулярных выражениях для решения этой проблемы придумали "possessive" (сверхжадные? неоткатные? точный перевод пока не устоялся) квантификаторы, которые вообще не используют бэктрегинг. 
-
-То есть, они даже проще, чем "жадные" -- берут максимальное количество символов и всё. Поиск продолжается дальше. При несовпадении никакого возврата не происходит.
-
-Это, c стороны уменьшает количество возможных результатов, но с другой стороны -- в ряде случаев очевидно, что возврат (уменьшение количество повторений квантификатора) результата не даст. А только потратит время, что как раз и доставляет проблемы. Как раз такие ситуации и описаны выше.
-
-Есть и другое средство -- "атомарные скобочные группы", которые запрещают перебор внутри скобок, по сути позволяя добиваться того же, что и сверхжадные квантификаторы,
-
-К сожалению, в JavaScript они не поддерживаются.
-
-Однако, можно получить подобный эффект при помощи предпросмотра. Подробное описание соответствия с учётом синтаксиса сверхжадных квантификаторов и атомарных групп есть в статьях [Regex: Emulate Atomic Grouping (and Possessive Quantifiers) with LookAhead](http://instanceof.me/post/52245507631/regex-emulate-atomic-grouping-with-lookahead) и [Mimicking Atomic Groups](http://blog.stevenlevithan.com/archives/mimic-atomic-groups), здесь же мы останемся в рамках синтаксиса JavaScript.
-
-Взятие максимального количества повторений `a+` без отката выглядит так: <code class="pattern">(?=(a+))\1</code>.
-
-То есть, иными словами, предпросмотр <code class="pattern">?=</code> ищет максимальное количество повторений <code class="pattern">a+</code>, доступных с текущей позиции. А затем они "берутся в результат" обратной ссылкой <code class="pattern">\1</code>. Дальнейший поиск -- после найденных повторений. 
-
-Откат в этой логике принципе не предусмотрен, поскольку предпросмотр "откатываться" не умеет. То есть, если предпросмотр нашёл 5 штук <code class="pattern">a+</code>, и в результате поиск не удался, то он не будет откатываться на 4 повторения. Эта возможность в предпросмотре отсутствует, а в данном случае она как раз и не нужна.
-
-Исправим регэксп для поиска тега с атрибутами <code class="pattern"><\w+(\s*\w+=(\w+|"[^"]*")\s*)*></code>, описанный в начале главы. Используем предпросмотр, чтобы запретить откат на меньшее количество пар `атрибут=значение`:
-
-```js
-//+ run
-// регэксп для пары атрибут=значение
-var attr = /(\s*\w+=(\w+|"[^"]*")\s*)/
-
-// используем его внутри регэкспа для тега
-var reg = new RegExp('<\\w+(?=(' + attr.source + '*))\\1>', 'g');
-    
-var good = '...<a test="<>" href="#">... <b>...';
-
-var bad = "<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b\
-  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
-
-alert( good.match(reg) ); // <a test="<>" href="#">, <b>
-alert( bad.match(reg) ); // null (нет результатов, быстро)
-```
-
-Отлично, всё работает! Нашло как длинный тег <code class="match">&lt;a test="&lt;&gt;" href="#"&gt;</code>, так и одинокий <code class="match">&lt;b&gt;</code>.
-
-
-
-
-
-
-
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png
deleted file mode 100644
index 8f207c4d..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png
deleted file mode 100644
index 713532ae..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png
deleted file mode 100644
index 0de64148..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png
deleted file mode 100644
index 8d0cd522..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png
deleted file mode 100644
index c693a42e..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png b/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png
deleted file mode 100644
index 63f0e9e4..00000000
Binary files a/10-regular-expressions-javascript/13-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/2-regexp-methods/article.md b/10-regular-expressions-javascript/2-regexp-methods/article.md
deleted file mode 100644
index fdf66de8..00000000
--- a/10-regular-expressions-javascript/2-regexp-methods/article.md
+++ /dev/null
@@ -1,392 +0,0 @@
-# Методы RegExp и String
-
-Регулярные выражения в JavaScript являются объектами класса [RegExp](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp). 
-
-Кроме того, методы для поиска по регулярным выражениям встроены прямо в обычные строки `String`.
-
-К сожалению, общая структура встроенных методов слегка запутана, поэтому мы сначала рассмотрим их по отдельности, а затем -- рецепты по решению стандартных задач с ними.
-
-[cut]
-
-## str.search(reg)  
-
-Этот метод мы уже видели. 
-
-Он возвращает позицию первого совпадения или `-1`, если ничего не найдено.
-
-```js
-//+ run
-var str = "Люблю регэкспы я, но странною любовью";
-
-alert( str.search( *!*/лю/i*/!* ) ); // 0
-```
-
-**Ограничение метода `search` -- он всегда ищет только первое совпадение.**
-
-Нельзя заставить `search` искать дальше первого совпадения, такой синтаксис попросту не предусмотрен. Но есть другие методы, которые это умеют.
-
-## str.match(reg) без флага g
-
-Метод `str.match` работает по-разному, в зависимости от наличия или отсутствия флага `g`, поэтому сначала мы разберём вариант, когда его нет.
-
-В этом случае `str.match(reg)` находит только одно, первое совпадение.
-
-Результат вызова -- это массив, состоящий из этого совпадения, с дополнительными свойствами `index` -- позиция, на которой оно обнаружено и `input` -- строка, в которой был поиск.
-
-Например:
-
-```js
-//+ run
-var str = "ОЙ-Ой-ой";
-
-var result = str.match( *!*/ой/i*/!* );
-
-alert( result[0] ); // ОЙ  (совпадение)
-alert( result.index ); // 0 (позиция)
-alert( result.input ); // ОЙ-Ой-ой (вся поисковая строка)
-```
-
-У этого массива не всегда только один элемент. 
-
-**Если часть шаблона обозначена скобками, то она станет отдельным элементом массива.**
-
-Например:
-
-```js
-//+ run
-var str = "javascript - это такой язык";
-
-var result = str.match( *!*/JAVA(SCRIPT)/i*/!* );
-
-alert( result[0] ); // javascript (всё совпадение полностью)  
-alert( result[1] ); // script (часть совпадения, соответствующая скобкам)
-alert( result.index ); // 0
-alert( result.input ); // javascript - это такой язык
-```
-
-Благодаря флагу `i` поиск не обращает внимание на регистр буквы, поэтому находит <code class="match">javascript</code>. При этом часть строки, соответствующая <code class="pattern">SCRIPT</code>, выделена в отдельный элемент массива. 
-
-Позже мы ещё вернёмся к скобочным выражениям, они особенно удобны для поиска с заменой.
-
-## str.match(reg) с флагом g
-
-При наличии флага `g`, вызов `match` возвращает обычный массив из всех совпадений.
-
-Никаких дополнительных свойств у массива в этом случае нет, скобки дополнительных элементов не порождают.
-
-Например:
-
-```js
-//+ run
-var str = "ОЙ-Ой-ой";
-
-var result = str.match( *!*/ой/ig*/!* );
-
-alert( result ); // ОЙ, Ой, ой
-```
-
-Пример со скобками:
-
-```js
-//+ run
-var str = "javascript - это такой язык";
-
-var result = str.match( *!*/JAVA(SCRIPT)/gi*/!* );
-
-alert( result[0] ); // javascript
-alert( result.length ); // 1
-alert( result.index ); // undefined
-```
-
-Из последнего примера видно, что элемент в массиве ровно один, и свойства `index` также нет. Такова особенность глобального поиска при помощи `match`  -- он просто возвращает все совпадения.
-
-Для расширенного глобального поиска, который позволит получить все позиции и, при желании, скобки, нужно использовать метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), которые будет рассмотрен далее.
-
-[warn header="В случае, если совпадений не было, `match` возвращает `null`"]
-Обратите внимание, это важно -- если `match` не нашёл совпадений, он возвращает не пустой массив, а именно `null`.
-
-Это важно иметь в виду, чтобы не попасть в такую ловушку:
-
-```js
-//+ run
-var str = "Ой-йой-йой";
-
-// результат match не всегда массив!
-alert(str.match(/лю/gi).length) // ошибка! нет свойства length у null
-```
-[/warn]
-
-## str.split(reg|substr, limit)  
-
-Разбивает строку в массив по разделителю -- регулярному выражению `regexp` или подстроке `substr`. 
-
-Обычно мы используем метод `split` со строками, вот так:
-
-```js
-//+ run
-alert('12-34-56'.split('-')) // [12, 34, 56]
-```
-
-Можно передать в него и регулярное выражение, тогда он разобьёт строку по всем совпадениям.
-
-Тот же пример с регэкспом:
-
-```js
-//+ run
-alert('12-34-56'.split(/-/)) // [12, 34, 56]
-```
-
-## str.replace(reg, str|func)   
-
-Швейцарский нож для работы со строками, поиска и замены любого уровня сложности.
-
-Его простейшее применение -- поиск и замена подстроки в строке, вот так:
-
-```js
-//+ run
-// заменить дефис на двоеточие
-alert('12-34-56'.replace("-", ":")) // 12:34-56
-```
-
-**При вызове со строкой замены `replace` всегда заменяет только первое совпадение.**
-
-Чтобы заменить *все* совпадения, нужно использовать для поиска не строку `"-"`, а регулярное выражение <code class="pattern">/-/g</code>, причём обязательно с флагом `g`:
-
-```js
-//+ run
-// заменить дефис на двоеточие
-alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
-```
-
-
-В строке для замены можно использовать специальные символы:
-
-<table>
-    <thead>
-    <tr>
-        <th>Спецсимволы</th>
-        <th>Действие в строке замены</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-        <td>`$$`</td>
-        <td>Вставляет `"$"`.</td>
-    </tr>
-    <tr>
-        <td>`$&`</td>
-        <td>Вставляет всё найденное совпадение.</td>
-    </tr>
-    <tr>
-        <td><code>$&#096;</code></td>
-        <td>Вставляет часть строки до совпадения.</td>
-    </tr>
-    <tr>
-        <td>
-            <code>$'</code>
-        </td>
-        <td>Вставляет часть строки после совпадения.</td>
-    </tr>
-    <tr>
-        <td>
-            <code>$*n*</code>
-        </td>
-        <td>где `n` -- цифра или двузначное число, обозначает `n-ю` по счёту скобку, если считать слева-направо.</td>
-    </tr>
-    </tbody>
-</table>
-
-Пример использования скобок и `$1`, `$2`:
-
-```js
-//+ run
-var str = "Василий Пупкин";
-
-alert(str.replace(/(Василий) (Пупкин)/, '$2, $1')) // Пупкин, Василий
-```
-
-Ещё пример, с использованием `$&`:
-
-```js
-//+ run
-var str = "Василий Пупкин";
-
-alert(str.replace(/Василий Пупкин/, 'Великий $&!')) // Великий Василий Пупкин!
-```
-
-**Для ситуаций, который требуют максимально "умной" замены, в качестве второго аргумента предусмотрена функция.**
-
-Она будет вызвана для каждого совпадения, и её результат будет вставлен как замена.
-
-Например:
-
-```js
-//+ run
-var i = 0;
-
-// заменить каждое вхождение "ой" на результат вызова функции
-alert("ОЙ-Ой-ой".replace(/ой/gi, function() {
-  return ++i;
-})); // 1-2-3
-```
-
-В примере выше функция просто возвращала числа по очереди, но обычно она основывается на поисковых данных.
-
-Эта функция получает следующие аргументы: 
-
-<ol>
-<li>`str` -- найденное совпадение,</li>
-<li>`p1, p2, ..., pn` -- содержимое скобок (если есть),</li>
-<li>`offset` -- позиция, на которой найдено совпадение,</li>
-<li>`s` -- исходная строка.</li>
-</ol>
-
-Если скобок в регулярном выражении нет, то у функции всегда будет ровно 3 аргумента: `replacer(str, offset, s)`.
-
-Используем это, чтобы вывести полную информацию о совпадениях:
-
-```js
-//+ run
-// вывести и заменить все совпадения
-function replacer(str, offset, s) {
-  alert( "Найдено: " + str + " на позиции: " + offset + " в строке: " + s );
-  return str.toLowerCase();
-}
-
-var result = "ОЙ-Ой-ой".replace(/ой/gi, replacer);
-alert( 'Результат: ' + result ); // Результат: ой-ой-ой
-```
-
-С двумя скобочными выражениями -- аргументов уже 5:
-
-```js
-//+ run
-function replacer(str, name, surname, offset, s) {
-  return surname + ", " + name;
-}
-
-alert(str.replace(/(Василий) (Пупкин)/, replacer)) // Пупкин, Василий
-```
-
-Функция -- это самый мощный инструмент для замены, какой только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё.
-
-## regexp.test(str) 
-
-Теперь переходим к методам класса `RegExp`.
-
-Метод `test` проверяет, есть ли хоть одно совпадение в строке `str`. Возвращает `true/false`.
-
-Работает, по сути, так же, как и проверка `str.search(reg) != -1`, например:
-
-```js
-//+ run
-var str = "Люблю регэкспы я, но странною любовью";
-
-// эти две проверки идентичны
-alert( *!*/лю/i*/!*.test(str) ) // true
-alert( str.search(*!*/лю/i*/!*) != -1 ) // true
-```
-
-Пример с отрицательным результатом:
-
-```js
-//+ run
-var str = "Ой, цветёт калина...";
-
-alert( *!*/javascript/i*/!*.test(str) ) // false
-alert( str.search(*!*/javascript/i*/!*) != -1 ) // false
-```
-
-## regexp.exec(str)  
-
-Для поиска мы уже видели методы:
-<ul>
-<li>`search` -- ищет индекс</li>
-<li>`match` -- если регэксп без флага `g` -- ищет совпадение с подрезультатами в скобках</li>
-<li>`match` -- если регэксп с флагом `g` -- ищет все совпадения, но без скобочных групп.</li>
-</ul>
-
-Метод `regexp.exec` дополняет их. Он позволяет искать и все совпадения и скобочные группы в них.
-
-Он ведёт себя по-разному, в зависимости от того, есть ли у регэкспа флаг `g`.
-
-<ul>
-<li>Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(reg)`.</li>
-<li>Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.</li>
-</ul>
-
-Это используют для поиска всех совпадений в цикле:
-
-```js
-//+ run
-var str = 'Многое по JavaScript можно найти на сайте http://javascript.ru';
-
-var regexp = /javascript/ig;
-
-alert( "Начальное значение lastIndex: " + regexp.lastIndex );
-
-while (result = regexp.exec(str)) {
-  alert( 'Найдено: ' + result[0] + ' на позиции:' + result.index );
-  alert( 'Свойство lastIndex: ' + regexp.lastIndex );
-}
-
-alert( 'Конечное значение lastIndex: ' + regexp.lastIndex );
-```
-
-Здесь цикл продолжается до тех пор, пока `regexp.exec` не вернёт `null`, что означает "совпадений больше нет".
-
-Найденные результаты последовательно помещаются в `result`, причём находятся там в том же формате, что и `match` -- с учётом скобок, со свойствами `result.index` и `result.input`.
-
-[smart header="Поиск с нужной позиции"]
-Можно заставить `regexp.exec` искать сразу с нужной позиции, если поставить `lastIndex` вручную:
-
-```js
-//+ run
-var str = 'Многое по JavaScript можно найти на сайте http://javascript.ru';
-
-var regexp = /javascript/ig;
-regexp.lastIndex = 40;
-
-alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиции
-```
-[/smart]
-
-## Итого, рецепты
-
-Методы становятся гораздо понятнее, если разбить их использование по задачам, которые нужны в реальной жизни.
-
-<dl>
-<dt>Для поиска только одного совпадения:</dt>
-<dd>
-<ul>
-<li>Найти позицию первого совпадения -- `str.search(reg)`.</li>
-<li>Найти само совпадение -- `str.match(reg)`.</li>
-<li>Проверить, есть ли хоть одно совпадение -- `regexp.test(str)` или `str.search(reg) != -1`.</li>
-<li>Найти совпадение с нужной позиции -- `regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex`.</li>
-</ul>
-</dd>
-<dt>Для поиска всех совпадений:</dt>
-<dd>
-<ul>
-<li>Найти массив совпадений -- `str.match(reg)`, с флагом `g`.</li>
-<li>Получить все совпадения, с подробной информацией о каждом -- `regexp.exec(str)` с флагом `g`, в цикле.</li>
-</ul>
-</dd>
-</dt>
-<dt>Для поиска-и-замены:</dt>
-<dd>
-<ul>
-<li>Замена на другую строку или функцией -- `str.replace(reg, str|func)`</li>
-</ul>
-</dd>
-<dt>Для разбивки строки на части:</dt>
-<dd>
-<ul>
-<li>`str.split(str|reg)`</li>
-</ul>
-</dd>
-</dl>
-
-Зная эти методы, мы уже можем использовать регулярные выражения.
-
-Конечно, для этого желательно хорошо понимать их синтаксис и возможности, так что переходим к ним дальше.
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/solution.md b/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/solution.md
deleted file mode 100644
index 1fd6b26a..00000000
--- a/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-
-Ответ: <code class="pattern">\d\d:\d\d</code>.
-
-```js
-//+ run
-alert( "Завтрак в 09:00.".match( /\d\d:\d\d/ ) ); // 09:00
-```
-
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/task.md b/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/task.md
deleted file mode 100644
index f92b52a5..00000000
--- a/10-regular-expressions-javascript/3-regexp-character-classes/1-find-time-hh-mm/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Найдите время
-
-Время имеет формат `часы:минуты`. И часы и минуты состоят из двух цифр, например: `09:00`.
-
-Напишите регулярное выражение для поиска времени в строке: <code class="subject">Завтрак в 09:00.</code>
-
-P.S. В этой задаче выражению позволительно найти и некорректное время, например `25:99`. 
-
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/article.md b/10-regular-expressions-javascript/3-regexp-character-classes/article.md
deleted file mode 100644
index 26fd9277..00000000
--- a/10-regular-expressions-javascript/3-regexp-character-classes/article.md
+++ /dev/null
@@ -1,271 +0,0 @@
-# Классы и спецсимволы
-
-Рассмотрим практическую задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры. А остальные символы нас не интересуют.
-
-Для поиска символов определённого вида в регулярных выражениях предусмотрены "классы символов".
-
-[cut]
-
-Класс символов -- это специальное обозначение, под которое подходит любой символ из определённого набора.
-
-Например, есть класс "любая цифра". Он обозначается `\d`. Это обозначение вставляется в шаблон, и при поиске под него подходит любая цифра.
-
-То есть, регулярное выражение <code class="pattern">/\d/</code> ищет ровно одну цифру:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-var reg = /\d/;
-
-// не глобальный регэксп, поэтому ищет только первую цифру
-alert( str.match(reg) ); // 7
-```
-
-...Ну а для поиска всех цифр достаточно добавить к регэкспу флаг `g`:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-var reg = /\d/g;
-
-alert( str.match(reg) ); // массив всех совпадений: 7,9,0,3,1,2,3,4,5,6,7
-```
-
-## Важнейшие классы: \d \s \w
-
-Это был класс для цифр.
-
-Конечно же, есть и другие.
-
-Наиболее часто используются:
-<dl>
-<dt>`\d` (от английского "digit" -- "цифра")</dt>
-<dd>Цифра, символ от `0` до `9`.</dd>
-<dt>`\s` (от английского "space" -- "пробел")</dt>
-<dd>Пробельный символ, включая табы, переводы строки и т.п.</dd>
-<dt>`\w` (от английского "word" -- "слово") </dt>
-<dd>Символ "слова", а точнее -- буква латинского алфавита или цифра или подчёркивание `'_'`. Не-английские буквы не являются `\w`, то есть русская буква не подходит.</dd>
-</dl>
-
-Например, <code class="pattern">\d\s\w</code> обозначает цифру, за которой идёт пробельный символ, а затем символ слова.
-
-Регулярное выражение может содержать одновременно и обычные символы и классы.
-
-Например, <code class="pattern">CSS\d</code> найдёт строку <code class="match">CSS</code>, с любой цифрой после неё:
-
-```js
-//+ run
-var str = "Стандарт CSS4 - это здорово";
-var reg = /CSS\d/
-
-alert( str.match(reg) ); // CSS4
-```
-
-И много классов подряд:
-
-```js
-//+ run
-alert( "Я люблю HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
-```
-
-Совпадение (каждому классу в регэкспе соответствует один символ результата):
-
-<img src="love-html5-classes.png">
-
-## Граница слова \b
-
-Граница слова <code class="pattern">\b</code> -- это особый класс.
-
-Он интересен тем, что обозначает не символ, а границу между символами.
-
-Например, <code class="pattern">\bJava\b</code> найдёт слово <code class="match">Java</code> в строке <code class="subject">Hello, Java!</code>, но не в строке <code class="subject">Hello, Javascript!</code>.
-
-
-```js
-//+ run
-
-alert( "Hello, Java!".match(/\bJava\b/) ); // Java
-alert( "Hello, Javascript!".match(/\bJava\b/) ); // null
-```
-
-Граница имеет "нулевую ширину" в том смысле, что обычно символам регулярного выражения соответствуют символы строки, но не в этом случае. 
-
-Граница -- это проверка.
-
-При поиске движок регулярных выражений идёт по шаблону и одновременно по строке, пытаясь построить соответствие. Когда он видит <code class="pattern">\b</code>, то проверяет, что текущая позиция в строке подходит под одно из условий:
-<ul>
-<li>Начало текста, если первый символ `\w`.</li>
-<li>Конец текста, если последний символ `\w`.</li>
-<li>Внутри текста, если с одной стороны `\w`, а с другой -- не `\w`.</li>
-</ul>
-
-Например, в строке <code class="subject">Hello, Java!</code> под `\b` подходят следующие позиции:
-
-<img src="hello-java-boundaries.png">
-
-Как правило, `\b` используется, чтобы искать отдельно стоящее слово. Не на русском конечно, хотя подобную проверку, как мы увидим далее, можно легко сделать для любого языка. А вот на английском, как в примере выше или для чисел, которые являются частным случаем `\w` -- легко.
-
-Например, регэксп <code class="pattern">\b\d\d\b</code> ищет отдельно двузначные числа. Иными словами, он требует, чтобы до и после <code class="pattern">\d\d</code> был символ, отличный от `\w` (или начало/конец текста).
-
-
-## Обратные классы
-
-Для каждого класса существует "обратный ему", представленный такой же, но заглавной буквой.
-
-"Обратный" -- означает, что ему соответствуют все остальные символы, например:
-
-<dl>
-<dt>`\D`</dt>
-<dd>Не-цифра, то есть любой символ кроме `\d`, например буква.</dd>
-<dt>`\S`</dt>
-<dd>Не-пробел, то есть любой символ кроме `\s`, например буква.</dd>
-<dt>`\W`</dt>
-<dd>Любой символ, кроме `\w`, то есть не латинница, не подчёркивание, не цифра. В частности, русские буквы принадлежат этому классу.</dd>
-<dt>`\B`</dt>
-<dd>Проверка, обратная `\b`.</dd>
-</dl>
-
-В начале этой главы мы видели, как получить из телефона <code class="subject">+7(903)-123-45-67</code> все цифры.
-
-Первый способ -- найти все цифры через `match(/\d/g)`.
-
-Обратные классы помогут реализовать альтернативный -- найти все НЕцифры и удалить их из строки:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-alert( str.replace(/\D/g, "") ); // 79031234567
-```
-
-## Пробелы -- обычные символы
-
-Заметим, что в регулярных выражениях пробел -- такой же символ, как и другие.
-
-Обычно мы не обращаем внимание на пробелы. Для нашего взгляда строки <code class="subject">1-5</code> и <code class="subject">1 - 5</code> почти идентичны.
-
-Однако, если регэксп не учитывает пробелов, то он не сработает.
-
-Попытаемся найти цифры, разделённые дефисом:
-
-```js
-//+ run
-alert( "1 - 5".match(/\d-\d/) ); // null, нет совпадений!
-```
-
-Поправим это, добавив в регэксп пробелы:
-
-```js
-//+ run
-alert( "1 - 5".match(/\d - \d/) ); // работает, пробелы вокруг дефиса
-```
-
-Конечно же, пробелы в регэкспе нужны лишь тогда, когда мы их ищем. Лишние пробелы (как и любые лишние символы) могут навредить:
-
-```js
-//+ run
-alert( "1-5".match(/\d - \d/) ); // null, так как в строке 1-5 нет пробелов
-```
-
-Короче говоря, в регулярном выражении все символы имеют значение. Даже (и тем более) -- пробелы.
-
-## Точка -- любой символ
-
-Особым классом символов является точка `"."`.
-
-В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки:
-
-```js
-//+ run
-alert( "Z".match(/./) ); // найдено Z
-```
-
-Посередине регулярного выражения:
-
-```js
-//+ run
-var re = /CS.4/;
-
-alert( "CSS4".match(re) ); // найдено "CSS4"
-alert( "CS-4".match(re) ); // найдено "CS-4" 
-alert( "CS 4".match(re) ); // найдено "CS 4" (пробел тоже символ)
-```
-
-Обратим внимание -- точка означает именно "произвольный символ". 
-
-То есть какой-то символ на этом месте в строке должен быть:
-
-```js
-//+ run
-alert( "CS4".match(/CS.4/) ); // нет совпадений, так как для точки нет символа
-```
-
-## Экранирование специальных символов
-
-В регулярных выражениях есть и другие символы, имеющие особый смысл. 
-
-Они используются, чтобы расширить возможности поиска. 
-
-Вот их полный список: <code class="pattern">[ \ ^ $ . | ? * + ( )</code>.
-
-Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
-
-**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.** 
-
-Или, другими словами, перед символом должен быть обратный слэш `'\'`. 
-
-Например, нам нужно найти точку <code class="pattern">'.'</code>. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: <code class="pattern">\.</code>.
-
-```js
-//+ run
-alert( "Глава 5.1".match(/\d\.\d/) ); // 5.1
-```
-
-Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
-
-```js
-//+ run
-alert( "function g()".match(/g\(\)/) ); // "g()"
-```
-
-Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>, поэтому его тоже нужно экранировать.
-
-Так выглядит поиск слэша `'/'`:
-
-```js
-//+ run
-alert( "/".match(/\//) ); // '/'
-```
-
-Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
-
-Так выглядит поиск обратного слэша `"\"`:
-
-```js
-//+ run
-alert( "1\2".match(/\\/) ); // '\'
-```
-
-
-## Итого
-
-Мы рассмотрели классы для поиска типов символов:
-
-<ul>
-<li>`\d` -- цифры.</li>
-<li>`\D` -- не-цифры.</li>
-<li>`\s` -- пробельные символы, переводы строки.</li>
-<li>`\S` -- всё, кроме `\s`.</li>
-<li>`\w` -- латинница, цифры, подчёркивание `'_'`.</li>
-<li>`'.'` -- точка обозначает любой символ, кроме перевода строки.</li>
-</ul>
-
-Если хочется поискать именно сочетание `"\d"` или символ "точка", то его экранируют обратным слэшем, вот так: <code class="pattern">\.</code>
-
-Заметим, что регулярное выражение может также содержать перевод строки `\n`, табуляцию `\t` и прочие спецсимволы для строк. Конфликта с классами не происходит, так как для них зарезервированы другие буквы. 
-
-
-
-
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries.png b/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries.png
deleted file mode 100644
index 3a47f13c..00000000
Binary files a/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries@2x.png b/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries@2x.png
deleted file mode 100644
index e8f14d87..00000000
Binary files a/10-regular-expressions-javascript/3-regexp-character-classes/hello-java-boundaries@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes.png b/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes.png
deleted file mode 100644
index 387fac9d..00000000
Binary files a/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes@2x.png b/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes@2x.png
deleted file mode 100644
index f5b3e380..00000000
Binary files a/10-regular-expressions-javascript/3-regexp-character-classes/love-html5-classes@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/solution.md b/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/solution.md
deleted file mode 100644
index 6177c8e6..00000000
--- a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Ответы: **нет, да**.
-
-<ul>
-<li>В строке  <code class="subject">Java</code> он ничего не найдёт, так как исключающие квадратные скобки в `Java[^...]` означают "один символ, кроме указанных". А после <code>"Java"</code> -- конец строки, символов больше нет.
-
-```js
-//+ run
-alert( "Java".match(/Java[^script]/) ); // нет совпадений
-```
-</li>
-<li>Да, найдёт. Поскольку регэксп регистрозависим, то под `[^script]` вполне подходит символ `"S"`.
-
-```js
-//+ run
-alert( "JavaScript".match(/Java[^script]/) ); // "JavaS"
-```
-</li>
-</ul>
diff --git a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/task.md b/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/task.md
deleted file mode 100644
index 6f0b0e37..00000000
--- a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/1-find-range-1/task.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Java[^script]
-
-Найдет ли регэксп <code class="pattern">/Java[^script]/</code> что-нибудь в строке <code class="subject">Java</code>? 
-
-А в строке <code class="subject">JavaScript</code>?
diff --git a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md b/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
deleted file mode 100644
index 969966a2..00000000
--- a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Ответ: <code class="pattern">\d\d[-:]\d\d</code>.
-
-```js
-//+ run
-var re = /\d\d[-:]\d\d/g;
-alert( "Завтрак в 09:00. Обед - в 21-30".match(re) );
-```
-
-Обратим внимание, что дефис <code class="pattern">'-'</code> не экранирован, поскольку в начале скобок он не может иметь специального смысла.
diff --git a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md b/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
deleted file mode 100644
index dd03af58..00000000
--- a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Найдите время в одном из форматов
-
-Время может быть в формате `часы:минуты` или `часы-минуты`. И часы и минуты состоят из двух цифр, например `09:00`, `21-30`.
-
-Напишите регулярное выражение для поиска времени:
-
-```js
-var re = /ваше выражение/;
-alert( "Завтрак в 09:00. Обед - в 21-30".match(re) ); // 09:00, 21-30
-```
-
diff --git a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/article.md b/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/article.md
deleted file mode 100644
index c8f2041f..00000000
--- a/10-regular-expressions-javascript/4-regexp-character-sets-and-ranges/article.md
+++ /dev/null
@@ -1,170 +0,0 @@
-# Наборы и диапазоны [...]
-
-Если в регулярном выражении несколько символов или символьных классов заключены в квадратные скобки `[…]`, то это означает "искать любой символ из указанных в `[…]`".
-
-[cut]
-
-## Набор
-
-Например, <code class="pattern">[еао]</code> означает любой символ из этих трёх: `'а'`, `'е'`, или `'о'`.
-
-Такое обозначение называют *набором*. Наборы используются в регулярном выражении наравне с обычными символами:
-
-```js
-//+ run
-// найти [г или т], а затем "оп"
-alert( "Гоп-стоп".match(/[гт]оп/gi) ); // "Гоп", "топ"
-```
-
-Обратим внимание: несмотря на то, что в наборе указано несколько символов, в совпадении должен присутствовать *ровно один* из них. 
-
-Поэтому в примере ниже нет результатов:
-
-```js
-//+ run
-// найти "В", затем [у или а], затем "ля"
-alert( "Вуаля".match(/В[уа]ля/) ); // совпадений нет
-```
-
-Поиск подразумевает:
-<ul>
-<li><code class="pattern">В</code>,</li>
-<li>затем *одну* из букв набора <code class="pattern">[уа]</code>,</li>
-<li>а затем <code class="pattern">ля</code></li>
-</ul>
-
-Таким образом, совпадение было бы для строки <code class="match">Вуля</code> или <code class="match">Валя</code>.
-
-## Диапазоны
-
-Квадратные скобки могут также содержать *диапазоны символов*.
-
-Например,  <code class="pattern">[a-z]</code> -- произвольный символ от `a` до `z`, <code class="pattern">[0-5]</code> -- цифра от `0` до `5`.
-
-В примере ниже мы будем искать `"x"`, после которого идёт два раза любая цифра или буква от A до F:
-
-```js
-//+ run
-// найдёт "xAF"
-alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
-```
-
-Обратим внимание, в слове <code class="subject">Exception</code> есть сочетание <code class="subject">xce</code>, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне <code class="pattern">[0-9A-F]</code> -- большие. 
-
-Если хочется искать и его тоже, можно добавить в скобки диапазон `a-f`: <code class="pattern">[0-9A-Fa-f]</code>. Или же просто указать у всего регулярного выражения флаг `i`.
-
-**Символьные классы -- всего лишь более короткие записи для диапазонов, в частности:**
-
-<ul>
-<li>**\d** -- то же самое, что <code class="pattern">[0-9]</code>,</li>
-<li>**\w** -- то же самое, что <code class="pattern">[a-zA-Z0-9_]</code>,</li>
-<li>**\s** -- то же самое, что <code class="pattern">[\t\n\v\f\r ]</code> плюс несколько юникодных пробельных символов.</li>
-</ul>
-
-В квадратных скобках можно использовать и диапазоны и символьные классы -- вместе.
-
-Например, нам нужно найти все слова в тексте. Если они на английском -- это достаточно просто:
-
-```js
-//+ run
-var str = "The sun is rising!";
-
-alert( str.match(/\w+/g) ); // The, sun, is, rising*!*
-```
-
-А если есть слова и на русском?
-
-```js
-//+ run
-var str = "Солнце встаёт!";
-
-alert( str.match(/\w+/g) ); // null*!*
-```
-
-Ничего не найдено! Это можно понять, ведь <code class="pattern">\w</code> -- это именно английская букво-цифра, как можно видеть из аналога <code class="pattern">[a-zA-Z0-9_]</code>.
-
-Чтобы находило слово на русском -- нужно использовать диапазон, например <code class="pattern">/[а-я]/</code>. 
-
-А чтобы на обоих языках -- и то и другое вместе:
-
-```js
-//+ run
-var str = "Солнце (the sun) встаёт!";
-
-alert( str.match(/[\wа-я]+/gi) ); // Солнце, the, sun, вста, т*!*
-```
-
-...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву <code class="match">ё</code>, более того -- считает её разрывом в слове. Причина  -- в кодировке юникод, она подробно раскрыта в главе [](/string). 
-
-Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
-
-```js
-//+ run
-var str = "Солнце (the sun) встаёт!";
-
-alert( str.match(/[\wа-яё]+/gi) ); // Солнце, the, sun, встаёт*!*
-```
-
-Теперь всё в порядке.
-
-## Диапазоны "кроме"
-
-**Кроме обычных, существуют также *исключающие* диапазоны: <code class="pattern">[^…]</code>.**
-
-Квадратные скобки, начинающиеся со знака каретки: <code class="pattern">[^…]</code> находят любой символ, *кроме указанных*.
-
-Например:
-
-<ul>
-<li><code class="pattern">[^аеуо]</code> -- любой символ, кроме  `'a'`, `'e'`, `'y'`, `'o'`.</li>
-<li><code class="pattern">[^0-9]</code> -- любой символ, кроме цифры, то же что `\D`.</li>
-<li><code class="pattern">[^\s]</code> -- любой не-пробельный символ, то же что `\S`.</li>
-</ul>
-
-Пример ниже ищет любые символы, кроме букв, цифр и пробелов:
-
-```js
-//+ run
-alert( "alice15@gmail.com".match(/[^\d\sA-Z]/gi) ); // "@", "."
-```
-
-## Не нужно экранирование
-
-Обычно, если мы хотим искать именно точку, а не любой символ, или именно символ `\`, то мы используем экранирование: указываем `\.` или `\\`.
-
-В квадратных скобках большинство специальных символов можно использовать без экранирования, если конечно они не имеют какой-то особый смысл именно внутри квадратных скобок.
-
-То есть, "как есть", без экранирования можно использовать символы:
-<ul>
-<li>Точка <code class="pattern">'.'</code>.</li>
-<li>Плюс <code class="pattern">'+'</code>.</li>
-<li>Круглые скобки <code class="pattern">'( )'</code>.</li>
-<li>Дефис <code class="pattern">'-'</code>, если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.</li>
-<li>Символ каретки <code class="pattern">'^'</code>, если не находится в начале квадратных скобок.</li>
-<li>А также открывающая квадратная скобка <code class="pattern">'['</code>.</li>
-</ul>
-
-То есть, точка `"."` в квадратных скобках означает не "любой символ", а обычную точку.
-
-Регэксп <code class="pattern">[.,]</code> ищет один из символов "точка" или "запятая".
-
-В примере ниже регэксп <code class="pattern">[-().^+]</code> ищет один из символов `-().^`. Они не экранированы:
-
-```js
-//+ run
-// Без экранирования
-var re = /[-().^+]/g;
-
-alert( "1 + 2 - 3".match(re) ); // найдёт +, -
-```
-
-...Впрочем, даже если вы решите "на всякий случай" заэкранировать эти символы, поставив перед ними обратный слэш `\` -- вреда не будет:
-
-```js
-//+ run
-// Всё заэкранировали
-var re = /[\-\(\)\.\^\+]/g;
-
-alert( "1 + 2 - 3".match(re) ); // тоже работает: +, -
-```
-
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/solution.md b/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/solution.md
deleted file mode 100644
index 5108d628..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-Решение:
-
-```js
-//+ run
-var reg = /\.{3,}/g;
-alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
-```
-
-Заметим, что символ `.` является специальным, значит его надо экранировать, то есть вставлять как `\.`.
-
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/task.md b/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/task.md
deleted file mode 100644
index 4e94ba20..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/1-find-text-manydots/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-#  Как найти многоточие... ?
-
-[importance 5]
-
-Напишите регулярное выражения для поиска многоточий: трёх или более точек подряд.
-
-Проверьте его:
-
-```js
-var reg = /ваше выражение/g;
-alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
-```
-
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/solution.md b/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/solution.md
deleted file mode 100644
index 09576d99..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Итак, нужно написать выражение для описания цвета, который начинается с "#", за которым следуют 6 шестнадцатеричных символов.
-
-Шестнадцатеричный символ можно описать с помощью <code class="pattern">[0-9a-fA-F]</code>. Мы можем сократить выражение, используя не чувствительный к регистру шаблон <code class="pattern">[0-9a-f]</code>.
-
-Для его шестикратного повторения мы будем использовать квантификатор <code class="pattern">{6}</code>. 
-
-В итоге, получаем выражение вида <code class="pattern">/#[a-f0-9]{6}/gi</code>.
-
-```js
-//+ run
-var re = /#[a-f0-9]{6}/gi;
-
-var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2";
-
-alert( str.match(re) );  // #121212,#AA00ef
-```
-
-Проблема этого выражения в том, что оно находит цвет и в более длинных последовательностях:
-
-```js
-//+ run
-alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #12345678
-```
-
-Чтобы такого не было, можно добавить в конец `\b`:
-
-```js
-//+ run
-// цвет
-alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456
-
-// не цвет
-alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null
-```
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/task.md b/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/task.md
deleted file mode 100644
index ea2dbf18..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/2-find-html-colors-6hex/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Регулярное выражение для цвета
-
-Напишите регулярное выражение для поиска HTML-цвета, заданного как `#ABCDEF`, то есть `#` и содержит затем 6 шестнадцатеричных символов.
-
-Пример использования:
-
-```
-var re = /*...ваше регулярное выражение...*/
-
-var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"
-
-alert( str.match(re) )  // #121212,#AA00ef
-```
-
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md b/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md
deleted file mode 100644
index 41f71b50..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-Целое число -- это <code class="pattern">\d+</code>.
-
-Десятичная точка с дробной частью -- <code class="pattern">\.\d+</code>.
-
-Она не обязательна, так что обернём её в скобки с квантификатором <code class="pattern">'?'</code>.
-
-Итого, получилось регулярное выражение <code class="pattern">\d+(\.\d+)?</code>:
-
-```js
-//+ run
-var re = /\d+(\.\d+)?/g
-
-var str = "1.5 0 12. 123.4.";
-
-alert( str.match(re) );   // 1.5, 0, 12, 123.4
-```
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/task.md b/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/task.md
deleted file mode 100644
index 17e4d836..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/3-find-decimal-positive-numbers/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Найдите положительные числа
-
-Создайте регэксп, который ищет все положительные числа, в том числе и с десятичной точкой.
-
-Пример использования:
-
-```js
-var re = /* ваш регэксп */
-
-var str = "1.5 0 12. 123.4.";
-
-alert( str.match(re) );   // 1.5, 0, 12, 123.4
-```
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/solution.md b/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/solution.md
deleted file mode 100644
index 2abd91c0..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Целое число с необязательной дробной частью -- это <code class="pattern">\d+(\.\d+)?</code>. 
-
-К этому нужно добавить необязательный `-` в начале:
-
-
-```js
-//+ run
-var re = /-?\d+(\.\d+)?/g
-
-var str = "-1.5 0 2 -123.4.";
-
-alert( str.match(re) );   // -1.5, 0, 2, -123.4
-```
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/task.md b/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/task.md
deleted file mode 100644
index 5c5d4d09..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/4-find-decimal-numbers/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Найдите десятичные числа
-
-Создайте регэксп, который ищет все числа, в том числе и с десятичной точкой, в том числе и отрицательные.
-
-Пример использования:
-
-```js
-var re = /* ваш регэксп */
-
-var str = "-1.5 0 2 -123.4.";
-
-alert( str.match(re) );   // -1.5, 0, 2, -123.4
-```
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/5-regexp-quantifiers/article.md b/10-regular-expressions-javascript/5-regexp-quantifiers/article.md
deleted file mode 100644
index 17605289..00000000
--- a/10-regular-expressions-javascript/5-regexp-quantifiers/article.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# Квантификаторы +, *, ? и {n}
-
-Рассмотрим ту же задачу, что и ранее -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. Но теперь нас интересуют не цифры по отдельности, а именно числа, то есть результат вида `7, 903, 123, 45, 67`.
-
-Для поиска цифр по отдельности нам было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
-
-## Количество {n}
-
-Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.
-
-Такое указание называют *квантификатором* (от англ. quantifier).
-
-У него есть несколько подформ записи:
-
-<dl>
-<dt>Точное количество: `{5}`</dt>
-<dd>Регэксп <code class="pattern">\d{5}</code> обозначает ровно 5 цифр, в точности как <code class="pattern">\d\d\d\d\d</code>.
-
-Следующий пример находит пятизначное число.
-
-```js
-//+ run
-alert( "Мне 12345 лет".match(/\d{5}/) ); //  "12345"
-```
-
-</dd>
-<dt>Количество от-до: `{3,5}`</dt>
-<dd>Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках: <code class="pattern">\d{3,5}</code>
-
-```js
-//+ run
-alert( "Мне не 12, а 1234 года".match(/\d{3,5}/) ); // "1234"
-```
-
-Последнее значение можно и не указывать. Тогда выражение <code class="pattern">\d{3,}</code> найдет числа, длиной от трех цифр:
-
-```js
-//+ run
-alert( "Мне не 12, а 345678 лет".match(/\d{3,5}/) ); // "345678"
-```
-</dd>
-</dl>
-
-В случае с телефоном нам нужны числа -- одна или более цифр подряд. Этой задаче соответствует регулярное выражение <code class="pattern">\d{1,}</code>:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-alert( str.match(/\d{1,}/g) ); // 7,903,123,45,67
-```
-
-
-## Короткие обозначения
-
-Для самые часто востребованных квантификаторов есть специальные короткие обозначения.
-
-<dl>
-<dt>`+`</dt>
-<dd>Означает "один или более", то же что `{1,}`. 
-
-Например, <code class="pattern">\d+</code> находит числа -- последовательности из 1 или более цифр:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-alert( str.match(/\d+/g) ); // 7,903,123,45,67
-```
-
-</dd>
-<dt>`?`</dt>
-<dd>Означает "ноль или один", то же что и `{0,1}`. По сути, делает символ необязательным.
-
-Например, регэксп <code class="pattern">ou?r</code> найдёт <code class="match">o</code>, после которого, возможно, следует <code class="match">u</code>, а затем <code class="match">r</code>.
-
-Этот регэксп найдёт <code class="match">or</code> в слове <code class="subject">color</code> и <code class="match">our</code> в <code class="subject">colour</code>:
-
-```js
-//+ run
-var str = "Можно писать color или colour (британский вариант)";
-
-alert( str.match(/colou?r/g) ); // color, colour
-```
-
-</dd>
-<dt>`*`</dt>
-<dd>Означает "ноль или более", то же что `{0,}`. То есть, символ может повторяться много раз или вообще отсутствовать.
-
-Пример ниже находит цифру, после которой идёт один или более нулей:
-
-```js
-//+ run
-alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1
-```
-
-Сравните это с `'+'` (один или более):
-
-```js
-//+ run
-alert( "100 10 1".match(/\d0+/g) ); // 100, 10
-```
-
-</dd>
-</dl>
-
-## Ещё примеры
-
-Эти квантификаторы принадлежат к числу самых важных "строительных блоков" для сложных регулярных выражений, поэтому мы рассмотрим ещё примеры.
-
-<dl>
-<dt>Регэксп "десятичная дробь" (число с точкой внутри): <code class="pattern">\d+\.\d+</code></dt>
-<dd>
-
-В действии:
-```js
-//+ run
-alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345
-```
-
-</dd>
-<dt>Регэксп "открывающий HTML-тег без атрибутов", такой как `<span>` или `<p>`: <code class="pattern">/&lt;[a-z]+&gt;/i</code></dt>
-<dd>Пример:
-
-```js
-//+ run
-alert( "<BODY> ... </BODY>".match(/<[a-z]+>/gi) ); // <BODY>
-```
-
-Это регулярное выражение ищет символ <code class="pattern">'&lt;'</code>, за которым идут одна или более букв английского алфавита, и затем <code class="pattern">'&gt;'</code>. 
-</dd>
-<dt>Регэксп "открывающий HTML-тег без атрибутов" (лучше): <code class="pattern">/&lt;[a-z][a-z0-9]*&gt;/i</code></dt>
-<dd>
-Здесь регулярное выражение расширено: в соответствие со стандартом, HTML-тег может иметь символ на любой позиции, кроме первой, например `<h1>`.
-
-```js
-//+ run
-alert( "<h1>Привет!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>
-```
-
-</dd>
-<dt>Регэксп "открывающий или закрывающий HTML-тег без атрибутов": <code class="pattern">/&lt;\/?[a-z][a-z0-9]*&gt;/i</code></dt>
-<dd>В предыдущий паттерн добавили необязательный слэш <code class="pattern">/?</code> перед тегом. Его понадобилось заэкранировать, чтобы JavaScript не принял его за конец шаблона.
-
-```js
-//+ run
-alert( "<h1>Привет!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>
-```
-
-</dd>
-</dl>
-
-
-[smart header="Точнее -- значит сложнее"]
-В этих примерах мы видим общее правило, которое повторяется из раза в раз: чем точнее регулярное выражение, тем оно длиннее и сложнее.
-
-Например, для HTML-тегов, скорее всего, подошло бы и более короткое регулярное выражение <code class="pattern">&lt;\w+&gt;</code>.
-
-Так как класс `\w` означает "любая цифра или английская буква или `'_'`, то под такой регэксп подойдут и не теги, например <code class="match">&lt;_&gt;</code>. Однако он гораздо проще, чем более точный регэксп <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>. 
-
-Подойдёт ли нам <code class="pattern">&lt;\w+&gt;</code> или нужно использовать именно <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>?
-
-В реальной жизни допустимы оба варианта. Ответ на подобные вопросы зависит от того, насколько реально важна точность и насколько сложно потом будет отфильтровать лишние совпадения (если появятся).
-[/smart]
-
-
-
-
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/solution.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
deleted file mode 100644
index 083b3044..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-Результат: `123 456`.
-
-Ленивый `\d+?` будет брать цифры до пробела, то есть `123`. После каждой цифры он будет останавливаться, проверять -- не пробел ли дальше? Если нет -- брать ещё цифру, в итоге возьмёт `123`.
-
-З в дело вступит `\d+`, который по-максимуму возьмёт дальнейшие цифры, то есть `456`.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/task.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/task.md
deleted file mode 100644
index 7076396f..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/1-lazy-greedy/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Совпадение для /d+? d+/ 
-
-Что будет при таком поиске, когда сначало стоит ленивый, а потом жадный квантификаторы?
-
-```js
-"123 456".match(/\d+? \d+/g) ); // какой результат?
-```
-
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/solution.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/solution.md
deleted file mode 100644
index b47d89b3..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Они очень похожи и, да, *почти* одинаковы. Оба ищут от одной кавычки до другой.
-
-Различие здесь в символе точка <code class="pattern">'.'</code>. Как мы помним, точка <code class="pattern">'.'</code> обозначает *любой символ, кроме перевода строки*.
-
-А <code class="pattern">[^"]</code> -- это *любой символ, кроме кавычки <code class="pattern">'"'</code>.
-
-Получатся, что первый регэксп <code class="pattern">"[^"]*"</code> найдёт закавыченные строки с `\n` внутри, а второй регэксп <code class="pattern">".*?"</code> -- нет.
-
-Вот пример:
-```js
-//+ run
-alert( '"многострочный \n текст"'.match(/"[^"]*"/) ); // найдёт
-
-alert( '"многострочный \n текст"'.match(/".*?"/) ); // null (нет совпадений)
-```
-
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/task.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/task.md
deleted file mode 100644
index 5e9dcf17..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/2-difference-find-quote/task.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Различие между "[^"]*" и ".*?"
-
-Регулярные выражения <code class="pattern">"[^"]*"</code> и <code class="pattern">".*?"</code> -- при выполнении одинаковы?
-
-Иначе говоря, существует ли такая строка, на которой они дадут разные результаты? Если да -- дайте такую строку.
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/solution.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/solution.md
deleted file mode 100644
index 17bf43eb..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Нужно найти начало комментария <code class="match">&lt;!--</code>, затем всё до конца <code class="match">--&gt;</code>.
-
-С первого взгляда кажется, что это сделает регулярное выражение <code class="pattern">&lt;!--.*?--&gt;</code> -- квантификатор сделан ленивым, чтобы остановился, достигнув <code class="match">--&gt;</code>.
-
-Однако, точка в JavaScript -- любой символ, *кроме* конца строки. Поэтому такой регэксп не найдёт многострочный комментарий.
-
-Всё получится, если вместо точки использовать полностю "всеядный" <code class="pattern">[\s\S]</code>.
-
-Итого:
-
-```js
-//+ run
-var re = /<!--[\s\S]*?-->/g;
-
-var str = '.. <!-- Мой -- комментарий \n тест --> ..  <!----> .. ';
-
-alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
-```
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/task.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/task.md
deleted file mode 100644
index af0b1b2a..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/3-find-html-comments/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Найти HTML-комментарии
-
-Найдите все HTML-комментарии в тексте:
-
-```js
-var re = ..ваш регэксп..
-
-var str = '.. <!-- Мой -- комментарий \n тест --> ..  <!----> .. ';
-
-alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
-```
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
deleted file mode 100644
index 6a87a597..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
+++ /dev/null
@@ -1,38 +0,0 @@
-Начнём поиск с <code class="pattern">&lt;</code>, затем один или более произвольный символ, но до закрывающего "уголка": <code class="pattern">.+?&gt;</code>.
-
-Проверим, как работает этот регэксп:
-
-```js
-//+ run
-var re = /<.+?>/g;
-
-var str = '<> <a href="/"> <input type="radio" checked> <b>';
-
-alert( str.match(re) ); // <> <a href="/">, <input type="radio" checked>, <b>
-```
-
-Результат неверен! В качестве первого тега регэксп нашёл подстроку <code class="match">&lt;&gt; &lt;a href="/"&gt;</code>, но это явно не тег.
-
-Всё потому, что <code class="pattern">.+?</code> -- это "любой символ (кроме `\n`), повторяющийся один и более раз до того, как оставшаяся часть шаблона совпадёт (ленивость)". 
-
-Поэтому он находит первый `<`, затем есть "всё подряд" до следующего `>`.
-
-Первое совпадение получается как раз таким:
-
-```
-<.............>
-<> <a href="/"> <input type="radio" checked> <b>
-```
-
-Правильным решением будет использовать <code class="pattern">&lt;[^&gt;]+&gt;</code>:
-
-```js
-//+ run
-var re = /<[^>]+>/g
-
-var str = '<> <a href="/"> <input type="radio" checked> <b>';
-
-alert( str.match(re) ); // <a href="/">, <input type="radio" checked>, <b>
-```
-
-Это же решение автоматически позволяет находится внутри тегу символу `\n`, который в класс точка `.` не входит.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
deleted file mode 100644
index 43935130..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Найти HTML-теги
-
-Создайте регулярное выражение для поиска всех (открывающихся и закрывающихся) HTML-тегов вместе с атрибутами.
-
-Пример использования:
-```js
-//+ run
-var re = /* ваш регэксп */
-
-var str = '<> <a href="/"> <input type="radio" checked> <b>';
-
-alert( str.match(re) ); // '<a href="/">', '<input type="radio" checked>', '<b>'
-```
-
-В этой задаче можно считать, что тег начинается с <code>&lt;</code>, заканчивается <code>&gt;</code> и может содержать внутри любые символы, кроме <code>&lt;</code> и <code>&gt;</code>.
-
-Но хотя бы один символ внутри тега должен быть: <code>&lt;&gt;</code> -- не тег.
-
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/article.md b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/article.md
deleted file mode 100644
index 09758bab..00000000
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/article.md
+++ /dev/null
@@ -1,335 +0,0 @@
-# Жадные и ленивые квантификаторы 
-
-Квантификаторы -- с виду очень простая, но на самом деле очень хитрая штука.
-
-Необходимо очень хорошо понимать, как именно происходит поиск, если конечно мы хотим искать что-либо сложнее чем <code class="pattern">/\d+/</code>.
-
-[cut]
-
-Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить в тексте кавычки вида `"..."` (их называют "английские кавычки") на "кавычки-ёлочки": `«...»`.
-
-Для этого нужно сначала найти все слова в таких кавычках.
-
-Соотверствующее регулярное выражение может выглядеть так: <code class="pattern">/".+"/g</code>, то есть мы ищем кавычку, после которой один или более произвольный символ, и в конце опять кавычка.
-
-Однако, если попробовать применить его на практике, даже на таком простом случае...
-
-```js
-//+ run
-var reg = /".+"/g;
-
-var str = 'a "witch" and her "broom" is one';
-
-alert( str.match(reg) ); // "witch" and her "broom"
-```
-
-...Мы увидим, что оно работает совсем не так, как задумано!
-
-Вместо того, чтобы найти два совпадения <code class="match">"witch"</code> и <code class="match">"broom"</code>, оно находит одно: <code class="match">"witch" and her "broom"</code>.
-
-Это как раз тот случай, когда *жадность* -- причина всех зол.
-
-## Жадный поиск
-
-Чтобы найти совпадение, движок регулярных выражений обычно использует следующий алгоритм:
-
-<ul>
-<li>Для каждой позиции в поисковой строке
-<ul>
-<li>Проверить совпадение на данной позиции
-<ul><li>Посимвольно, с учётом классов и квантификаторов сопоставив с ней регулярное выражение.</li></ul>
-</li>
-</ul>
-</li>
-</ul>
-
-Это общие слова, гораздо понятнее будет, если мы проследим, что именно он делает для регэкспа <code class="pattern">".+"</code>.
-
-<ol>
-<li>Первый символ шаблона -- это кавычка <code class="pattern">"</code>. 
-
-Движок регулярных выражений пытается сопоставить её на 0й позиции в строке, но символ `a`, поэтому на 0й позиции соответствия явно нет.
-
-Далее он переходит 1ю, 2ю позицию в исходной строке и, наконец, обнаруживает кавычку на 3й позиции:
-<img src="witch_greedy1.png">
-</li>
-<li>Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна. 
-
-В данном случае следующий символ шаблона: <code class="pattern">.</code> (точка). Она обозначает "любой символ", так что следующая буква строки <code class="match">'w'</code> вполне подходит:
-<img src="witch_greedy2.png">
-</li>
-<li>Далее "любой символ" повторяется, так как стоит квантификатор <code class="pattern">.+</code>. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. 
-
-В данном случае это означает "до конца строки":
-<img src="witch_greedy3.png">
-</li>
-<li>Итак, текст закончился, движок регулярных выражений больше не может найти "любой символ", он закончил повторения для <code class="pattern">.+</code> и переходит к следующему символу шаблона.
-
-Следующий символ шаблона -- это кавычка. Её тоже необходимо найти, чтобы соответствие было полным. А тут -- беда, ведь поисковый текст завершился!
-
-Движок регулярных выражений понимает, что, наверное, взял многовато <code class="pattern">.+</code> и начинает отступать обратно.
-
-Иными словами, он сокращает текущее совпадение на один символ:
-
-<img src="witch_greedy4.png">
-
-Это называется "фаза возврата" или "фаза бэктрекинга" (backtracking -- англ.).
-
-Теперь <code class="pattern">.+</code> соответствует почти вся оставшаяся строка, за исключением одного символа, и движок регулярных выражений ещё раз пытается подобрать соответствие для остатка шаблона, начиная с оставшейся части строки. 
-
-Если бы последним символом строки была кавычка <code class="pattern">'"'</code>, то на этом бы всё и закончилось. Но последний символ <code class="subject">'e'</code>, так что совпадения нет.</li>
-<li>...Поэтому движок уменьшает число повторений <code class="pattern">.+</code> ещё на один символ:
-
-<img src="witch_greedy5.png">
-
-Кавычка <code class="pattern">'"'</code> не совпадает с <code class="subject">'n'</code>. Опять неудача.</li>
-<li>Движок продолжает отступать, он уменьшает количество повторений точки <code class="pattern">'.'</code> до тех пор, пока остаток паттерна, то есть в данном случае кавычка <code class="pattern">'"'</code>, не совпадёт:
-
-<img src="witch_greedy6.png">
-</li>
-<li>Совпадение получено. Дальнейший поиск по оставшейся части строки <code class="subject">is one</code> новых совпадений не даст.</li>
-</ol>
-
-Возможно, это не совсем то, что мы ожидали.
-
-**В жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы найти соответствие.**
-
-То есть, любой символ <code class="pattern">.+</code> повторился максимальное количество раз, что и привело к такой длинной строке.
-
-А мы, наверное, хотели, чтобы каждая строка в кавычках была независимым совпадением? Для этого можно переключить квантификатор `+` в "ленивый" режим, о котором будет речь далее.
-
-## Ленивый режим
-
-Ленивый режим работы квантификаторов -- противоположность жадному, он означает "повторять минимальное количество раз".
-
-Его можно включить, если поставить знак вопроса <code class="pattern">'?'</code> после квантификатора, так что он станет таким: <code class="pattern">*?</code> или <code class="pattern">+?</code> или даже <code class="pattern">??</code> для <code class="pattern">'?'</code>.
-
-Чтобы не возникло путаницы -- важно понимать: обычно `?` сам является квантификатором (ноль или один). Но если он стоит *после другого квантификатора (или даже после себя)*, то обретает другой смысл -- в этом случае он меняет режим его работы на ленивый.
-
-Регэксп <code class="pattern">/".+?"/g</code> работает, как задумано -- находит отдельно <code class="match">witch</code> и <code class="match">broom</code>:
-
-```js
-//+ run
-var reg = /".+?"/g;
-
-var str = 'a "witch" and her "broom" is one';
-
-alert( str.match(reg) ); // witch, broom
-```
-
-Чтобы в точности понять, как поменялась работа квантификатора, разберём поиск по шагам.
-
-<ol>
-<li>Первый шаг -- тот же, кавычка <code class="pattern">'"'</code> найдена на 3й позиции:
-<img src="witch_greedy1.png">
-</li>
-
-<li>Второй шаг -- тот же, находим произвольный символ <code class="pattern">'.'</code>:
-<img src="witch_greedy2.png">
-</li>
-
-<li>А вот дальше -- так как стоит ленивый режим работы `+`, то движок не повторет точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть <code class="pattern">'"'</code>:
-<img src="witch_lazy3.png">
-
-Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случе -- нет, символ `'i'` не равен '"'.
-</li>
-<li>Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:
-
-<img src="witch_lazy4.png">
-Опять неудача. Тогда поисковой движок увеличивает количество повторений ещё и ещё...
-</li>
-<li>Только на 5м шаге поисковой движок наконец находит соответствие для остатка паттерна:
-
-<img src="witch_lazy5.png">
-</li>
-<li>Так как поиск происходит с флагом `g`, то он продолжается с конца текущего совпадения, давая ещё один результат:
-
-<img src="witch_lazy6.png">
-</li>
-</ol>
-
-В примере выше продемонстрирована работа ленивого режима для <code class="pattern">+?</code>. Квантификаторы  <code class="pattern">+?</code> и <code class="pattern">??</code> ведут себя аналогично -- "ленивый" движок увеличивает количество повторений только в том случае, если для остальной части шаблона на данной позиции нет соответствия.
-
-**Ленивость распространяется только на тот квантификатор, после которого стоит `?`.**
-
-Прочие квантификаторы остаются жадными.
-
-Например:
-
-```js
-//+ run
-alert( "123 456".match(/\d+ \d+?/g) ); // 123 4
-```
-
-<ol>
-<li>Подшаблон <code class="pattern">\d+</code> пытается найти столько цифр, сколько возможно (работает жадно), так что он находит <code class="match">123</code> и останавливается, поскольку символ пробела <code class="pattern">' '</code> не подходит под <code class="pattern">\d</code>.</li>
-<li>Далее в шаблоне пробел, он совпадает.</li>
-<li>Далее в шаблоне идёт <code class="pattern">\d+?</code>. 
-
-Квантификатор указан в ленивом режиме, поэтому он находит одну цифру <code class="match">4</code> и пытается проверить, есть ли совпадение с остатком шаблона. 
-
-Но после <code class="pattern">\d+?</code> в шаблоне ничего нет. 
-
-**Ленивый режим без необходимости лишний раз квантификатор не повторит.**
-
-Так как шаблон завершился, то искать дальше, в общем-то нечего. Получено совпадение <code class="match">123 4</code>.</li>
-<li>Следующий поиск продолжится с `5`, но ничего не найдёт.</li>
-</ol>
-
-[smart header="Конечные автоматы и не только"]
-Современные движки регулярных выражений могут иметь более хитрую реализацию внутренних алгоритмов, чтобы искать быстрее.
-
-Однако, чтобы понять, как работает регулярное выражение, и строить регулярные выражения самому, знание этих хитрых алгоритмов ни к чему. Они служат лишь внутренней оптимизации способа поиска, описанного выше.
-
-Кроме того, сложные регулярные выражения плохо поддаются всяким оптимизациям, так что поиск вполне может работать и в точности как здесь описано.
-[/smart]
-
-## Альтернативный подход
-
-В данном конкретном случае, возможно искать строки в кавычках, оставаясь в жадном режиме, с использованием регулярного выражения <code class="pattern">"[^"]+"</code>:
-
-```js
-//+ run
-var reg = /"[^"]+"/g;
-
-var str = 'a "witch" and her "broom" is one';
-
-alert( str.match(reg) ); // witch, broom
-```
-
-Регэксп <code class="pattern">"[^"]+"</code> даст правильные результаты, поскольку ищет кавычку <code class="pattern">'"'</code>, за которой идут столько не-кавычек (исключающие квадратные скобки), сколько возможно.
-
-Так что вторая кавычка автоматически прекращает повторения <code class="pattern">[^"]+</code> и позволяет найти остаток шаблона <code class="pattern">"</code>.
-
-**Эта логика ни в коей мере не заменяет ленивые квантификаторы!**
-
-
-Она просто другая. И то и другое бывает полезно.
-
-Давайте посмотрим пример, когда нужен именно такой вариант, а ленивые квантификаторы не подойдут.
-
-Например, мы хотим найти в тексте ссылки вида `<a href="..." class="doc">`, с любым содержанием `href`.
-
-Какое регулярное выражение для этого подойдёт?
-
-Первый вариант может выглядеть так: <code class="pattern">/&lt;a href=".*" class="doc"&gt;/g</code>.
-
-Проверим его:
-```js
-//+ run
-var str = '...<a href="link" class="doc">...';
-var reg = /<a href=".*" class="doc">/g;
-
-// Сработало!
-alert( str.match(reg) ); // <a href="link" class="doc">
-```
-
-А если в тексте несколько ссылок?
-
-```js
-//+ run
-var str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
-var reg = /<a href=".*" class="doc">/g;
-
-// Упс! Сразу две ссылки!
-alert( str.match(reg) ); // <a href="link1" class="doc">... <a href="link2" class="doc">
-```
-
-На этот раз результат неверен.
-
-Жадный <code class="pattern">.*</code> взял слишком много символов.
-
-Соответствие получилось таким:
-```
-<a href="....................................." class="doc"> 
-<a href="link1" class="doc">... <a href="link2" class="doc">
-```
-
-Модифицируем шаблон -- добавим ленивость квантификатору <code class="pattern">.*?</code>:
-
-```js
-//+ run
-var str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
-var reg = /<a href=".*?" class="doc">/g;
-
-// Сработало!
-alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
-```
-
-Теперь всё верно, два результата:
-
-```
-<a href="....." class="doc">    <a href="....." class="doc"> 
-<a href="link1" class="doc">... <a href="link2" class="doc">
-```
-
-Почему теперь всё в порядке -- для внимательного читателя, после объяснений, данных выше в этой главе, должно быть полностью очевидно. 
-
-Поэтому не будем останавливаться здесь на деталях, а попробуем ещё пример:
-
-```js
-//+ run
-var str = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
-var reg = /<a href=".*?" class="doc">/g;
-
-// Неправильное совпадение!
-alert( str.match(reg) ); // <a href="link1" class="wrong">... <p style="" class="doc">
-```
-
-Совпадение -- не ссылка, а более длинный текст. 
-
-Получилось следующее:
-<ol>
-<li>Найдено совпадение <code class="match">&lt;a href="</code>.</li>
-<li>Лениво ищем <code class="pattern">.*?</code>, после каждого символа проверяя, есть ли совпадение остальной части шаблона. 
-
-Подшаблон <code class="pattern">.*?</code> будет брать символы до тех пор, пока не найдёт <code class="match">class="doc"&gt;</code>.
-
-В данном случае этот поиск закончится уже за пределами ссылки, в теге `<p>`, вообще не имеющем отношения к `<a>`.
-</li>
-<li>Получившееся совпадение:
-
-```
-<a href="..................................." class="doc">
-<a href="link1" class="wrong">... <p style="" class="doc">
-```
-</li>
-</ol>
-
-Итак, ленивость нам не помогла. 
-
-Необходимо как-то прекратить поиск <code class="pattern">.*</code>, чтобы он не вышел за пределы кавычек.
-
-Для этого мы используем более точное указание, какие символы нам подходят, а какие нет.
-
-Правильный вариант: <code class="pattern">[^"]*</code>. Этот шаблон будет брать все символы до ближайшей кавычки, как раз то, что требуется.
-
-Рабочий пример:
-
-```js
-//+ run
-var str1 = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
-var str2 = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
-var reg = /<a href="[^"]*" class="doc">/g;
-
-// Работает!
-alert( str1.match(reg) ); // null, совпадений нет, и это верно
-alert( str2.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
-```
-
-## Итого
-
-Квантификаторы имеют два режима работы:
-<dl>
-<dt>Жадный</dt>
-<dd>Режим по умолчанию -- движок регулярных выражений повторяет его по-максимуму. Когда повторять уже нельзя, например нет больше цифр для `\d+`, он продолжает поиск с оставшейся части текста. Если совпадение найти не удалось -- отступает обратно, уменьшая количество повторений.</dd>
-<dt>Ленивый</dt>
-<dd>При указании после квантификатора символа `?` он работает в ленивом режиме. То есть, он перед каждым повторением проверяет совпадение оставшейся части шаблона на текущей позиции.</dd>
-</dl>
-
-Как мы видели в примере выше, ленивый режим -- не панацея от "слишком жадного" забора символов. Альтернатива -- более аккуратно настроенный "жадный", с исключением символов. Как мы увидим далее, можно исключать не только символы, но и целые подшаблоны.
-
-
-
-
-
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1.png
deleted file mode 100644
index a4fc2c4f..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1@2x.png
deleted file mode 100644
index e1b2ca0a..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2.png
deleted file mode 100644
index b7b84c1b..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2@2x.png
deleted file mode 100644
index ce87d89e..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3.png
deleted file mode 100644
index 0e5b07fd..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3@2x.png
deleted file mode 100644
index 975fc49c..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4.png
deleted file mode 100644
index 0ca3df76..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4@2x.png
deleted file mode 100644
index fe514d4d..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5.png
deleted file mode 100644
index 43b01a9a..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5@2x.png
deleted file mode 100644
index 353f69e2..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6.png
deleted file mode 100644
index 2ae63d20..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6@2x.png
deleted file mode 100644
index 5b09faa0..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3.png
deleted file mode 100644
index af0482bb..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3@2x.png
deleted file mode 100644
index 7d5fd2c6..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4.png
deleted file mode 100644
index 920530bd..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4@2x.png
deleted file mode 100644
index 1e14c11c..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5.png
deleted file mode 100644
index 0a07eeae..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5@2x.png
deleted file mode 100644
index 8c9ff19f..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6.png
deleted file mode 100644
index 67f0d27a..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6@2x.png b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6@2x.png
deleted file mode 100644
index e7eb1aa0..00000000
Binary files a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/solution.md b/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/solution.md
deleted file mode 100644
index ece24fb8..00000000
--- a/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-Регулярное выражение для поиска 3-значного цвета вида `#abc`: <code class="pattern">/#[a-f0-9]{3}/i</code>.
-
-Нужно добавить ещё три символа, причём нужны именно три, четыре или семь символов не нужны. Эти три символа либо есть, либо нет.
-
-Самый простой способ добавить -- просто дописать в конец регэкспа: <code class="pattern">/#[a-f0-9]{3}([a-f0-9]{3})?/i</code>
-
-Можно поступить и хитрее: <code class="pattern">/#([a-f0-9]{3}){1,2}/i</code>.
-
-Здесь регэксп <code class="pattern">[a-f0-9]{3}</code> заключён в скобки, чтобы квантификатор <code class="pattern">{1,2}</code> применялся целиком ко всей этой структуре.
-
-В действии:
-```js
-//+ run
-var re = /#([a-f0-9]{3}){1,2}/gi;
-
-var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
-
-alert( str.match(re) ); // #3f3 #AA0ef #abc
-```
-
-В последнем выражении <code class="subject">#abcd</code> было найдено совпадение <code class="match">#abc</code>. Чтобы этого не происходило, добавим в конец <code class="pattern">\b</code>:
-
-```js
-//+ run
-var re = /#([a-f0-9]{3}){1,2}\b/gi;
-
-var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
-
-alert( str.match(re) ); // #3f3 #AA0ef
-```
diff --git a/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/task.md b/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/task.md
deleted file mode 100644
index 419c0476..00000000
--- a/10-regular-expressions-javascript/7-regexp-groups/1-find-webcolor-3-or-6/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Найдите цвет в формате #abc или #abcdef
-
-Напишите регулярное выражение, которое находит цвет в формате `#abc` или `#abcdef`. То есть, символ `#`, после которого идут 3 или 6 шестнадцатиричных символа.
-
-Пример использования:
-```js
-var re = /* ваш регэксп */
-
-var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
-
-alert( str.match(re) ); // #3f3 #AA0ef
-```
-
-P.S. Значения из любого другого количества букв, кроме 3 и 6, такие как `#abcd`, не должны подходить под регэксп.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/solution.md b/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/solution.md
deleted file mode 100644
index 05fedcd8..00000000
--- a/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/solution.md
+++ /dev/null
@@ -1,53 +0,0 @@
-Регулярное выражение для числа, возможно, дробного и отрицательного: <code class="pattern">-?\d+(\.\d+)?</code>. Мы уже разбирали его в предыдущих задачах.
-
-Оператор -- это <code class="pattern">[-+*/]</code>. Заметим, что дефис <code class="pattern">-</code> идёт в списке первым, так как на любой позиции, кроме первой и последней, он имеет специальный смысл внутри <code class="pattern">[...]</code>, и его понадобилось бы экранировать.
-
-Кроме того, когда мы оформим это в JavaScript-синтаксис <code class="pattern">/.../</code> -- понадобится заэкранировать слэш <code class="pattern">/</code>.
-
-Нам нужно число, затем оператор, затем число, и необязательные пробелы между ними.
-
-Полное регулярное выражение будет таким: <code class="pattern">-?\d+(\.\d+)?\s*[-+*/]\s*-?\d+(\.\d+)?</code>. 
-
-Чтобы получить результат в виде массива, добавим скобки вокруг тех данных, которые нам интересны, то есть -- вокруг чисел и оператора: <code class="pattern">(-?\d+(\.\d+)?)\s*([-+*/])\s*(-?\d+(\.\d+)?)</code>.
-
-Посмотрим в действии:
-```js
-//+ run
-var re = /(-?\d+(\.\d+)?)\s*([-+*\/])\s*(-?\d+(\.\d+)?)/;
-
-alert( "1.2 + 12".match(re) );
-```
-
-Итоговый массив будет включать в себя компоненты:
-
-<ul>
-<li>`result[0] == "1.2 + 12"` (вначале всегда полное совпадение)</li>
-<li>`result[1] == "1"` (первая скобка)</li>
-<li>`result[2] == "2"` (вторая скобка -- дробная часть `(\.\d+)?`)</li>
-<li>`result[3] == "+"` (...)</li>
-<li>`result[4] == "12"` (...)</li>
-<li>`result[5] == undefined` (последняя скобка, но у второго числа дробная часть отсутствует)</li>
-</ul>
-
-Нам из этого массива нужны только числа и оператор. А, скажем, дробная часть сама по себе -- не нужна.
-
-Уберём её из запоминания, добавив в начало скобки <code class="pattern">?:</code>, то есть: <code class="pattern">(?:\.\d+)?</code>.
-
-Итого, решение:
-
-```js
-//+ run
-function parse(expr) {
-  var re = /(-?\d+(?:\.\d+)?)\s*([-+*\/])\s*(-?\d+(?:\.\d+)?)/;
-
-  var result = expr.match(re);
-
-  if (!result) return;
-  result.shift();
-
-  return result;
-}
-
-alert( parse("-1.23 * 3.45") );  // -1.23, *, 3.45
-```
-
diff --git a/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/task.md b/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/task.md
deleted file mode 100644
index c48e5a0c..00000000
--- a/10-regular-expressions-javascript/7-regexp-groups/2-parse-expression/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Разобрать выражение
-
-Арифметическое выражение состоит из двух чисел и операции между ними, например:
-<ul>
-<li>`1 + 2`</li>
-<li>`1.2 * 3.4`</li>
-<li>`-3 / -6`</li>
-<li>`-2 - 2`</li>
-</ul>
-
-Список операций: `"+"`, `"-"`, `"*"` и `"/"`.
-
-Также могут присутсововать пробелы вокруг оператора и чисел.
-
-Напишите функцию, которая будет получать выражение и возвращать массив из трёх аргументов:
-<ol>
-<li>Первое число.</li>
-<li>Оператор.</li>
-<li>Второе число.</li>
-</ol>
diff --git a/10-regular-expressions-javascript/7-regexp-groups/article.md b/10-regular-expressions-javascript/7-regexp-groups/article.md
deleted file mode 100644
index 515c6175..00000000
--- a/10-regular-expressions-javascript/7-regexp-groups/article.md
+++ /dev/null
@@ -1,150 +0,0 @@
-# Скобочные группы
-
-Часть шаблона может быть заключена в скобки <code class="pattern">(...)</code>. Такие выделенные части шаблона называют "скобочными выражениями" или "скобочными группами".
-
-У такого выделения есть два эффекта:
-<ol>
-<li>Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) или [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).</li>
-<li>Если поставить квантификатор после скобки, то он применится *ко всей скобке*, а не всего лишь к одному символу.</li>
-</ol>
-
-[cut]
-
-## Пример
-
-В примере ниже, шаблон <code class="pattern">(go)+</code> находит один или более повторяющихся <code class="pattern">'go'</code>:
-
-```js
-//+ run
-alert( 'Gogogo now!'.match(/(go)+/i ); // "Gogogo"
-```
-
-Без скобок, шаблон <code class="pattern">/go+/</code> означал бы <code class="subject">g</code>, после которого идёт одна или более <code class="subject">o</code>, например: <code class="match">goooo</code>. А скобки "группируют" <code class="pattern">(go)</code> вместе.
-
-
-## Содержимое группы
-
-Скобки нумеруются слева направо. Поисковой движок запоминает содержимое каждой скобки и позволяет обращаться к нему -- в шаблоне и строке замены и, конечно же, в результатах.
-
-Например, найти HTML-тег можно шаблоном <code class="pattern">&lt;.*?&gt;</code>. 
-
-После поиска мы захотим что-то сделать с результатом. Для удобства заключим содержимое `<...>` в скобки: <code class="pattern">&lt;(.*?)&gt;</code>. Тогда оно будет доступно отдельно.
-
-При поиске методом [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) в результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы. В шаблоне <code class="pattern">&lt;(.*?)&gt;</code> скобочная группа только одна:
-
-```js
-//+ run
-var str = '<h1>Привет, мир!</h1>';
-var reg = /<(.*?)>/;
-
-alert( str.match(reg) ); // массив: <h1>, h1
-```
-
-Заметим, что метод [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) выдаёт скобочные группы только при поиске без флага `/.../g`. В примере выше он нашёл только первое совпадение <code class="match">&lt;h1&gt;</code>, а закрывающий <code class="match">&lt;/h1&gt;</code> не нашёл, поскольку без флага `/.../g` ищется только первое совпадение.
-
-Для того, чтобы искать и с флагом `/.../g` и со скобочными группами, используется метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec):
-
-```js
-//+ run
-var str = '<h1>Привет, мир!</h1>';
-var reg = /<(.*?)>/g;
-
-var match;
-
-while ((match = reg.exec(str)) !== null) {
-  // сначала выведет первое совпадение: <h1>,h1
-  // затем выведет второе совпадение: </h1>,/h1
-  alert(match);
-}
-```
-
-Теперь найдено оба совпадения <code class="pattern">&lt;(.*?)&gt;</code>, каждое -- массив из полного совпадения и скобочных групп (одна в данном случае).
-
-## Вложенные группы
-Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.
-
-Например, при поиске тега в <code class="subject">&lt;span class="my"&gt;</code> нас может интересовать:
-
-<ol>
-<li>Содержимое тега целиком: `span class="my"`.</li>
-<li>В отдельную переменную для удобства хотелось бы поместить тег: `span`.</li>
-<li>Также может быть удобно отдельно выделить атрибуты `class="my"`.</li>
-</ol>
-
-Добавим скобки в регулярное выражение:
-
-```js
-//+ run
-var str = '<span class="my">';
-
-reg = /<(([a-z]+)\s*([^>]*))>/;
-
-alert( str.match(reg) ); // <span class="my">, span, s
-```
-
-Вот так выглядят скобочные группы:
-
-<img src="regexp-nested-groups.png">
-
-На нулевом месте -- всегда совпадение полностью, далее -- группы. Нумерация всегда идёт слева направо, по открывающей скобке.
-
-В данном случае получилось, что группа 1 включает в себя содержимое групп 2 и 3. Это совершенно нормальная ситуация, которая возникает, когда нужно выделить что-то отдельное внутри большей группы.
-
-**Даже если скобочная группа необязательна и не входит в совпадение, соответствующий элемент массива существует (и равен `undefined`).**
-
-Например, рассмотрим регэксп <code class="pattern">a(z)?(c)?</code>. Он ищет `"a"`, за которой не обязательно идёт буква `"z"`, за которой необязательно идёт буква `"c"`.
-
-Если напустить его на строку из одной буквы `"a"`, то результат будет таков:
-
-```js
-//+ run
-match = 'a'.match(/a(z)?(c)?/)
-
-alert( match.length ); // 3
-alert( match[0] ); // a
-alert( match[1] ); // undefined
-alert( match[2] ); // undefined
-```
-
-Массив получился длины `3`, но все скобочные группы -- `undefined`.
-
-А теперь более сложная ситуация, строка <code class="subject">ack</code>:
-
-```js
-//+ run
-match = 'ack'.match(/a(z)?(c)?/)
-
-alert( match.length ); // 3
-alert( match[0] ); // ac, всё совпадение
-alert( match[1] ); // undefined, для (z)? ничего нет
-alert( match[2] ); // c
-```
-
-Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы <code class="pattern">(z)?</code> в ней ничего нет, поэтому результат: `["ac", undefined, "c"]`.
-
-## Исключение из запоминания через ?:
-
-Бывает так, что скобки нужны, чтобы квантификатор правильно применился, а вот запоминать её в массиве не нужно. 
-
-Скобочную группу можно исключить из запоминаемых и нумеруемых, добавив в её начало <code class="pattern">?:</code>.
-
-Например, мы хотим найти <code class="pattern">(go)+</code>, но содержимое скобок (`go`) в отдельный элемент массива выделять не хотим. 
-
-Для этого нужно сразу после открывающей скобки поставить `?:`, то есть: <code class="pattern">(?:go)+</code>.
-
-Например:
-
-```js
-//+ run
-var str = "Gogo John!";
-*!*
-var reg = /(?:go)+ (\w+)/i;
-*/!*
-
-var result = str.match(reg);
-
-alert( result.length ); // 2
-alert( result[1] ); // John
-```
-
-В примере выше массив результатов имеет длину `2` и содержит только полное совпадение и результат <code class="pattern">(\w+)</code>. Это удобно в тех случаях, когда содержимое скобок нас не интересует.
diff --git a/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups.png b/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups.png
deleted file mode 100644
index 9103ea28..00000000
Binary files a/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups@2x.png b/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups@2x.png
deleted file mode 100644
index 4f5ee487..00000000
Binary files a/10-regular-expressions-javascript/7-regexp-groups/regexp-nested-groups@2x.png and /dev/null differ
diff --git a/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/solution.md b/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/solution.md
deleted file mode 100644
index 234032d4..00000000
--- a/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-Открывающий тег -- это <code class="pattern">\[(b|url|quote)\]</code>.
-
-Для того, чтобы найти всё до закрывающего -- используем ленивый поиск <code class="pattern">[\s\S]*?</code> и обратную ссылку на открывающий тег.
-
-Итого, получится: <code class="pattern">\[(b|url|quote)\][\s\S]*?\[/\1\]</code>.
-
-В действии:
-
-```js
-//+ run
-var re = /\[(b|url|quote)\][\s\S]*?\[\/\1\]/g;
-
-var str1 = "..[url]http://ya.ru[/url]..";
-var str2 = "..[url][b]http://ya.ru[/b][/url]..";
-
-alert( str1.match(re) ); // [url]http://ya.ru[/url]
-alert( str2.match(re) ); // [url][b]http://ya.ru[/b][/url]
-```
-
-Для закрывающего тега `[/1]` понадобилось дополнительно экранировать слеш: `\[\/1\]`.
diff --git a/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/task.md b/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/task.md
deleted file mode 100644
index 8596bed5..00000000
--- a/10-regular-expressions-javascript/8-regexp-backreferences/1-find-matching-bbtags/task.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Найдите пары тегов
-
-ББ-тег имеет вид `[имя]...[/имя]`, где имя -- слово, одно из: `b`, `url`, `quote`.
-
-Например:
-```
-[b]текст[/b]
-[url]http://ya.ru[/url]
-```
-
-ББ-теги могут быть вложенными, но сам в себя тег быть вложен не может, например:
-
-```
-Допустимо:
-[url] [b]http://ya.ru[/b] [/url]
-[quote] [b]текст[/b] [/quote]
-
-Нельзя:
-[b][b]текст[/b][/b]
-```
-
-Создайте регулярное выражение для поиска ББ-тегов и их содержимого.
-
-Например:
-
-```js
-var re = /* регулярка */
-
-var str = "..[url]http://ya.ru[/url]..";
-alert( str.match(re) ); // [url]http://ya.ru[/url]
-```
-
-Если теги вложены, то нужно искать самый внешний тег (при желании можно будет продолжить поиск в его содержимом):
-
-```js
-var re = /* регулярка */
-
-var str = "..[url][b]http://ya.ru[/b][/url]..";
-alert( str.match(re) ); // [url][b]http://ya.ru[/b][/url]
-```
-
diff --git a/10-regular-expressions-javascript/8-regexp-backreferences/article.md b/10-regular-expressions-javascript/8-regexp-backreferences/article.md
deleted file mode 100644
index 3814da12..00000000
--- a/10-regular-expressions-javascript/8-regexp-backreferences/article.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Обратные ссылки: \n и $n
-
-Скобочные группы можно не только получать в результате.
-
-Движок регулярных выражений запоминает их содержимое, и затем его можно использовать как в самом паттерне, так и в строке замены.
-
-[cut]
-
-## Группа в строке замены
-
-Ссылки в строке замены имеют вид `$n`, где `n` -- это номер скобочной группы. 
-
-Вместо `$n` подставляется содержимое соответствующей скобки:
-
-```js
-//+ run
-var name = "Александр Пушкин";
-
-name = name.replace(/([а-яё]+) ([а-яё]+)/i, *!*"$2, $1"*/!*);
-alert( name ); // Пушкин, Александр
-```
-
-В примере выше вместо <code class="pattern">$2</code> подставляется второе найденное слово, а вместо <code class="pattern">$1</code> -- первое.
-
-## Группа в шаблоне
-
-Выше был пример использования содержимого групп в строке замены. Это удобно, когда нужно реорганизовать содержимое или создать новое с использованием старого.
-
-Но к скобочной группе можно также обратиться в самом поисковом шаблоне, ссылкой вида `\номер`.
-
-Чтобы было яснее, рассмотрим это на реальной задаче -- необходимо найти в тексте строку в кавычках. Причём кавычки могут быть одинарными <code class="subject">'...'</code> или двойными <code class="subject">"..."</code> -- и то и другое должно искаться корректно.
-
-Как такие строки искать? 
-
-Можно в регэкспе предусмотреть произвольные кавычки: <code class="pattern">`['"](.*?)['"]`</code>. Такой регэксп найдёт строки вида <code class="match">"..."</code>, <code class="match">'...'</code>, но он даст неверный ответ в случае, если одна кавычка ненароком оказалась внутри другой, как например в строке <code class="subject">"She's the one!"</code>:
-
-```js
-//+ run
-str = "He said: \"She's the one!\".";
-
-reg = /['"](.*?)['"]/g;
-
-// Результат не соответствует замыслу
-alert( str.match(reg) ); // "She'
-```
-
-Как видно, регэксп нашёл открывающую кавычку <code class="match">"</code>, затем текст, вплоть до новой кавычки <code class="match">'</code>, которая закрывает соответствие.
-
-Для того, чтобы попросить регэксп искать закрывающую кавычку -- такую же, как открывающую, мы обернём её в скобочную группу и используем обратную ссылку на неё:
-
-```js
-//+ run
-str = "He said: \"She's the one!\".";
-
-reg = /(['"])(.*?)\1/g;
-
-alert( str.match(reg) ); // "She's the one!"
-```
-
-Теперь работает верно! Движок регулярных выражений, найдя первое скобочное выражение -- кавычку <code class="pattern">(['"])</code>, запоминает его и далее <code class="pattern">\1</code> означает "найти то же самое, что в первой скобочной группе".
-
-Обратим внимание на два нюанса:
-
-<ul>
-<li>Чтобы использовать скобочную группу в строке замены -- нужно использовать ссылку вида `$1`, а в шаблоне -- обратный слэш: `\1`.</li>
-<li>Чтобы в принципе иметь возможность обратиться к скобочной группе -- не важно откуда, она не должна быть исключена из запоминаемых при помощи `?:`. Скобочные группы вида `(?:...)` не участвуют в нумерации.</li>
-</ul>
- 
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/solution.md b/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/solution.md
deleted file mode 100644
index 483f818e..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/solution.md
+++ /dev/null
@@ -1,36 +0,0 @@
-Сначала неправильный способ.
-
-Если перечислить языки один за другим через `|`, то получится совсем не то:
-
-```js
-//+ run
-var reg = /Java|JavaScript|PHP|C|C\+\+/g;
-
-var str = "Java, JavaScript, PHP, C, C++";
-
-alert( str.match(reg) ); // Java,Java,PHP,C,C
-```
-
-Как видно, движок регулярных выражений ищет альтернации в порядке их перечисления. То есть, он сначала смотрит, есть ли <code class="match">Java</code>, а если нет -- ищет <code class="match">JavaScript</code>.
-
-Естественно, при этом <code class="match">JavaScript</code> не будет найдено никогда. 
-
-То же самое -- с языками <code class="match">C</code> и <code class="match">C++</code>.
-
-Есть два решения проблемы:
-
-<ol>
-<li>Поменять порядок, чтобы более длинное совпадение проверялось первым: <code class="pattern">JavaScript|Java|C\+\+|C|PHP</code>.</li>
-<li>Соединить длинный вариант с коротким: <code class="pattern">Java(Script)?|C(\+\+)?|PHP</code>.</li>
-</ol>
-
-В действии:
-
-```js
-//+ run
-var reg = /Java(Script)?|C(\+\+)?|PHP/g;
-
-var str = "Java, JavaScript, PHP, C, C++";
-
-alert( str.match(reg) ); // Java,JavaScript,PHP,C,C++
-```
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/task.md b/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/task.md
deleted file mode 100644
index b93570f3..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/1-find-programming-language/task.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Найдите языки программирования
-
-Существует много языков программирования, например Java, JavaScript, PHP, C, C++.
-
-Напишите регулярное выражение, которое найдёт их все в строке "Java JavaScript PHP C++ C"
-
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/solution.md b/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/solution.md
deleted file mode 100644
index c959b6fa..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Решение задачи: <code class="pattern">/"(\\.|[^"\\])*"/g</code>.
-
-То есть:
-<ul>
-<li>Сначала ищем кавычку <code class="pattern">"</code></li>
-<li>Затем, если далее слэш <code class="pattern">\\</code> (удвоение слэша -- техническое, для вставки в регэксп, на самом деле там один слэш), то после него также подойдёт любой символ (точка).</li>
-<li>Если не слэш, то берём любой символ, кроме кавычек (которые будут означать конец строки) и слэша (чтобы предотвратить одинокие слэши, сам по себе единственный слэш не нужен, он должен экранировать какой-то символ) <code class="pattern">[^"\\]</code></li>
-<li>...И так жадно, до закрывающей кавычки.</li>
-</ul>
-
-В действии:
-
-```js
-//+ run
-var re = /"(\\.|[^"\\])*"/g;
-var str = '.. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" ..';
-
-alert( str.match(re) ); // "test me","Скажи \"Привет\"!","\r\n\\"
-```
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/task.md b/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/task.md
deleted file mode 100644
index 4db27891..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/2-match-quoted-string/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Найдите строки в кавычках
-
-Найдите в тексте при помощи регэкспа строки в двойных кавычках <code class="subject">"..."</code>.
-
-В строке поддерживается экранирование при помощи слеша -- примерно в таком же виде, как в обычных строках JavaScript. То есть, строка может содержать любые символы, экранированные слэшем, в частности: <code class="subject">\"</code>, <code class="subject">\n</code>, и даже сам слэш в экранированном виде: <code class="subject">\\</code>. 
-
-Здесь особо важно, что двойная кавычка после слэша не оканчивает строку, а считается её частью. В этом и состоит основная сложность задачи, которая без этого условия была бы элементарной.
-
-Пример совпадающих строк:
-```js
-.. *!*"test me"*/!* ..  (обычная строка)
-.. *!*"Скажи \"Привет\"!"*/!* ... (строка с кавычками внутри)
-.. *!*"\r\n\\"*/!* ..  (строка со спец. символами и слэшем внутри)
-```
-
-Заметим, что в JavaScript такие строки удобнее всего задавать в одинарных кавычках, и слеши придётся удвоить (в одинарных кавычках они являются экранирующими символами):
-
-Пример задания тестовой строки в JavaScript:
-```js
-//+ run
-var str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" .. '; 
-
-// эта строка будет такой:
-alert(str); //  .. "test me" .. "Скажи \"Привет\"!" .. "\r\n\\" .. 
-```
-
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/solution.md b/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/solution.md
deleted file mode 100644
index 0a422af1..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-
-Начало шаблона очевидно: ``pattern`<style`.
-
-А вот дальше... Мы не можем написать просто ``pattern`<style.*?>`, так как ``match`<styler>` удовлетворяет этому регэкспу.
-
-Нужно уточнить его. После ``match`<style` должен быть либо пробел, после которого может быть что-то ещё, либо закрытие тега.
-
-На языке регэкспов: ``pattern`<style(>|\s.*?>)`.
-
-В действии:
-
-```js
-//+ run
-var re = /<style(>|\s.*?>)/g;
-
-alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>
-```
-
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/task.md b/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/task.md
deleted file mode 100644
index 5f19a87b..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/3-match-exact-tag/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Найдите тег style
-
-Напишите регулярное выражение, которое будет искать в тексте тег `<style>`. Подходят как обычный тег `<style>`, так и вариант с атрибутами `<style type="...">`. 
-
-Но регулярное выражение не должно находить `<styler>`!
-
-Использование:
-
-```js
-var re = ваш регэксп
-
-alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>
-```
-
diff --git a/10-regular-expressions-javascript/9-regexp-alternation/article.md b/10-regular-expressions-javascript/9-regexp-alternation/article.md
deleted file mode 100644
index 764a58d8..00000000
--- a/10-regular-expressions-javascript/9-regexp-alternation/article.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Альтернация (или) | 
-
-Альтернация -- термин в регулярных выражениях, которому в русском языке соответствует слово "ИЛИ". Она обозначается символом вертикальной черты <code class="pattern">|</code> и позволяет выбирать между вариантами.
-
-[cut]
-
-Например, нам нужно найти языки программирования: HTML, PHP, Java и JavaScript.
-
-Соответствующее регулярное выражение: <code class="pattern">html|php|java(script)?</code>.
-
-Пример использования:
-
-```js
-//+ run
-var reg = /html|php|css|java(script)?/gi
-
-var str = "Сначала появился HTML, затем CSS, потом JavaScript"
-
-alert( str.match(reg) ) // 'HTML', 'CSS', 'JavaScript'
-```
-
-Мы уже знаем похожую вещь -- квадратные скобки. Они позволяют выбирать между символами, например <code class="pattern">gr[ae]y</code> найдёт <code class="match">gray</code>, либо <code class="match">grey</code>.
-
-Альтернация работает уже не посимвольно, а на уровне фраз и подвыражений. Регэксп <code class="pattern">A|B|C</code> обозначает поиск одного из выражений: `A`, `B` или `C`, причём в качестве выражений могут быть другие, сколь угодно сложные регэкспы.
-
-Для указания границ альтернации используют скобки `(...)`, например: <code class="pattern">before(XXX|YYY)after</code> будет искать <code class="match">beforeXXXafter</code> или <code class="match">beforeYYYafter</code>.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/index.md b/10-regular-expressions-javascript/index.md
deleted file mode 100644
index a39bffe9..00000000
--- a/10-regular-expressions-javascript/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Регулярные выражения 
-
-Регулярные выражения -- мощный способ поиска и замены для строк.
\ No newline at end of file
diff --git a/11-extra/10-cookie/article.md b/11-extra/10-cookie/article.md
deleted file mode 100644
index 3887263f..00000000
--- a/11-extra/10-cookie/article.md
+++ /dev/null
@@ -1,255 +0,0 @@
-# Куки, document.cookie 
-
-Для чтения и записи cookie используется свойство `document.cookie`. Однако, оно представляет собой не объект, а строку в специальном формате, для удобной манипуляций с которой нужны дополнительные функции.
-
-[cut]
-
-## Чтение document.cookie
-
-Наверняка у вас есть cookie, которые привязаны к этому сайту. Давайте полюбуемся на них. Вот так:
-
-```js
-//+ run
-alert( document.cookie );
-```
-
-Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `"; "`. 
-
-Значит, чтобы прочитать cookie, достаточно разбить строку по `"; "`, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение.
-
-## Функция getCookie(name)
-
-Следующая функция `getCookie(name)` возвращает cookie с именем `name`:
-
-```js
-// возвращает cookie с именем name, если есть, если нет, то undefined
-function getCookie(name) {
-  var matches = document.cookie.match(new RegExp(
-    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
-  ));
-  return matches ? decodeURIComponent(matches[1]) : undefined;
-}
-```
-
-Обратим внимание, что значение может быть любым. Если оно содержит символы, нарушающие форматирование, например, пробелы или `;`, то оно кодируется при помощи `encodeURIComponent`. Функция `getCookie` автоматически раскодирует его.
-
-## Запись в document.cookie
-
-В `document.cookie` можно писать. При этом запись не перезаписывает существующие cookie, а дополняет к ним!
-
-Например, такая строка поставит cookie с именем `userName` и значением `Vasya`:
-
-```js
-//+ run
-document.cookie = "userName=Vasya";
-```
-
-...Однако, всё не так просто. У cookie есть ряд важных настроек, которые очень желательно указать, так как значения по умолчанию у них неудобны.
-
-Эти настройки указываются после пары ключ=значение, каждое -- после точки с запятой:
-<dl>
-<dt>`path=/mypath`</dt>
-<dd>Путь, внутри которого будет доступ к cookie. Если не указать, то имеется в виду текущий путь и все пути ниже него. 
-
-Как правило, используется `path=/`, то есть cookie доступно со всех страниц сайта.</dd>
-<dt>`domain=site.com`</dt>
-<dd>Домен, на котором доступно cookie. Если не указать, то текущий домен. Допустимо указывать текущий домен `site.com` и его поддомены, например `forum.site.com`.
-
-Если указать специальную маску `.site.com`, то cookie будет доступно на сайте и всех его поддоменах. Это используется, например, в случаях, когда кука содержит данные авторизации и должна быть доступна как на `site.com`, так и на `forum.site.com`. 
-</dd>
-<dt>`expires=Tue, 19 Jan 2038 03:14:07 GMT`</dt>
-<dd>Дата истечения куки в формате GMT. Получить нужную дату можно, используя объект `Date`. Его можно установить в любое время, а потом вызвать `toUTCString()`, например:
-
-```js
-// +1 день от текущего момента
-var date = new Date;
-date.setDate(date.getDate() + 1);
-alert( date.toUTCString() );
-```
-
-Если дату не указать, то cookie будет считаться "сессионным". Такое cookie удаляется при закрытии браузера.
-Если дата в прошлом, то кука будет удалена. 
-</dd>
-<dt>`secure`</dt>
-<dd>Cookie можно передавать только по HTTPS.</dd>
-</dl>
-
-Например, чтобы поставить cookie `name=value` по текущему пути с датой истечения через 60 секунд:
-
-```js
-//+ run
-var date = new Date(new Date().getTime() + 60 * 1000);
-document.cookie = "name=value; path=/; expires=" + date.toUTCString();
-```
-
-Чтобы удалить это cookie:
-
-```js
-//+ run
-var date = new Date(0);
-document.cookie = "name=; path=/; expires=" + date.toUTCString();
-```
-
-При удалении значение не важно. Можно его не указывать, как сделано в коде выше.
-
-## Функция setCookie(name, value, options)
-
-Если собрать все настройки воедино, вот такая функция ставит куки:
-
-```js
-function setCookie(name, value, options) {
-  options = options || {};
-
-  var expires = options.expires;
-
-  if (typeof expires == "number" && expires) {
-    var d = new Date();
-    d.setTime(d.getTime() + expires * 1000);
-    expires = options.expires = d;
-  }
-  if (expires && expires.toUTCString) {
-    options.expires = expires.toUTCString();
-  }
-
-  value = encodeURIComponent(value);
-
-  var updatedCookie = name + "=" + value;
-
-  for (var propName in options) {
-    updatedCookie += "; " + propName;
-    var propValue = options[propName];
-    if (propValue !== true) {
-      updatedCookie += "=" + propValue;
-    }
-  }
-
-  document.cookie = updatedCookie;
-}
-```
-
-Аргументы:
-<dl>
-<dt>name</dt><dd>название cookie</dd>
-<dt>value</dt><dd>значение cookie (строка)</dd>
-<dt>options</dt><dd>
-Объект с дополнительными свойствами для установки cookie:
-<dl>
-<dt>expires</dt><dd>Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:
-<ul>
-<li>Число -- количество секунд до истечения. Например, `expires: 3600` -- кука на час.</li>
-<li>Объект типа [Date](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date) -- дата истечения.</li>
-<li>Если expires в прошлом, то cookie будет удалено.</li>
-<li>Если expires отсутствует или `0`, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.</li>
-</ul>
-</dd>
-<dt>path</dt><dd>Путь для cookie.</dd>
-<dt>domain</dt><dd>Домен для cookie.</dd>
-<dt>secure</dt><dd>Если `true`, то пересылать cookie только по защищенному соединению.</dd>
-</dl>
-</dd>
-</dl>
-
-## Функция deleteCookie(name)
-
-Здесь всё просто -- удаляем вызовом `setCookie` с датой в прошлом.
-
-```js
-function deleteCookie(name) {
-  setCookie(name, "", {
-    expires: -1
-  })
-}
-```
-
-## Сторонние cookie
-
-При работе с cookie есть важная тонкость, которая касается внешних ресурсов.
-
-Теоретически, любой ресурс, который загружает браузер, может поставить cookie. 
-
-Например:
-<ul>
-<li>Если на странице есть `<img src="http://mail.ru/counter.gif">`, то вместе с картинкой в ответ сервер может прислать заголовки, устанавливающие cookie.</li>
-<li>Если на странице есть `<iframe src="http://facebook.com/button.php">`, то во-первых сервер может вместе с `button.php` прислать cookie, а во-вторых JS-код внутри ифрейма может записать в `document.cookie`</li>
-</ul>
-
-При этом cookie будут принадлежать тому домену, который их поставил. То есть, на `mail.ru` для первого случая, и на `facebook.com` во втором. 
-
-**Такие cookie, которые не принадлежат основной странице, называются "сторонними" (3rd party) cookies. Не все браузеры их разрешают.**
-
-Как правило, в настройках браузера можно поставить "Блокировать данные и файлы cookie сторонних сайтов" (Chrome). 
-
-**В Safari такая настройка включена по умолчанию и выглядит так:**
-
-<img src="safari-nocookie.png">
-
-### Тс-с-с. Большой брат смотрит за тобой.
-
-Цель этого запрета -- защитить посетителей от слежки со стороны рекламодателей, которые вместе с картинкой-баннером присылают и куки, таким образом помечая посетителей. 
-
-Например, на многих сайтах стоят баннеры и другая реклама Google Ads. При помощи таких cookie компания Google будет знать, какие именно сайты вы посещаете, сколько времени вы на них проводите и многое другое. 
-
-Как? Да очень просто -- на каждом сайте загружается, к примеру, картинка с рекламой. При этом баннер берётся с домена, принадлежащего Google. Вместе с баннером Google ставит cookie со специальным уникальным идентификатором.
-
-Далее, при следующем запросе на баннер, браузер пошлёт стандартные заголовки, которые включают в себя:
-
-<ul>
-<li>Cookie с домена баннера, то есть уникальный идентификатор, который был поставлен ранее.</li>
-<li>Стандартный заголовок Referrer (его не будет при HTTPS!), который говорит, с какого сайта сделан запрос. Да, впрочем, Google и так знает, с какого сайта запрос, ведь идентификатор сайта есть в URL.</li>
-</ul>
-
-Так что Google может хранить в своей базе, какие именно сайты из тех, на которых есть баннер Google, вы посещали, когда вы на них были, и т.п. Этот идентификатор легко привязывается к остальной информации от других сервисов, и таким образом картина слежки получается довольно-таки глобальной.
-
-Здесь я не утверждаю, что в конкретной компании Google всё именно так... Но во-первых, сделать так легко, во-вторых идентификаторы действительно ставятся, а в-третьих, такие знания о человеке позволяют решать, какую именно рекламу и когда ему показать. А это основная доля доходов Google, благодаря которой корпорация существует.
-
-Возможно, компания Apple, которая выпустила Safari, поставила такой флаг по умолчанию именно для уменьшения влияния Google? 
-
-### А если очень надо?
-
-Итак, Safari запрещает сторонние cookie по умолчанию. Другие браузеры предоставляют такую возможность, если посетитель захочет. 
-
-**А что, если ну очень надо поставить стороннюю cookie, и чтобы это было надёжно?**
-
-Такая задача действительно возникает, например, в системе кросс-доменной авторизации, когда есть несколько доменов 2-го уровня, и хочется, чтобы посетитель, который входит в один сайт, автоматически распознавался во всей сетке. При этом cookie для авторизации ставятся на главный домен -- "мастер", а остальные сайты запрашивают их при помощи специального скрипта (и, как правило, копируют к себе для оптимизации, но здесь это не суть).
-
-Ещё пример -- когда есть внешний виджет, например, `iframe` с информационным сервисом, который можно подключать на разные сайты. И этот `iframe` должен знать что-то о посетителе, опять же, авторизация или какие-то настройки, которые хорошо бы хранить в cookie.
-
-Есть несколько способов поставить 3rd-party cookie для Safari.
-
-<dl>
-<dt>Использовать ифрейм.</dt>
-<dd>Ифрейм является полноценным окном браузера. В нём должна быть доступна вся функциональность, в том числе cookie. Как браузер решает, что ифрейм "сторонний" и нужно запретить для него и его скриптов установку cookie? Критерий таков: "в ифрейме нет навигации". Если навигация есть, то ифрейм признаётся полноценным окном.
-
-Например, в сторонний `iframe` можно сделать POST. И тогда, в ответ на POST, сервер может поставить cookie. Или прислать документ, который это делает. Ифрейм, в который прошёл POST, считается родным и надёжным.</dd>
-<dt>Popup-окно</dt>
-<dd>Другой вариант -- использовать popup, то есть при помощи `window.open` открывать именно окно со стороннего домена, и уже там ставить cookie. Это тоже работает.</dd>
-<dt>Редирект</dt>
-<dd>Ещё одно альтернативное решение, которое подходит не везде - это сделать интеграцию со сторонним доменом, такую что на него можно сделать редирект, он ставит cookie и делает редирект обратно.</dd>
-</dl>
-
-## Дополнительно
-
-<ul>
-<li>На Cookie наложены ограничения:
-<ul>
-<li>Имя и значение (после `encodeURIComponent`) вместе не должны превышать 4кб.</li>
-<li>Общее количество cookie на домен ограничено 30-50, в зависимости от браузера.</li>
-<li>Разные домены 2го уровня полностью изолированы. Но в пределах доменов 3го уровня куки можно ставить свободно с указанием `domain`.</li>
-<li>Сервер может поставить cookie с дополнительным флагом `HttpOnly`. Cookie с таким параметром передаётся только в заголовках, оно никак не доступно из JavaScript.</li>
-</ul>
-</li>
-<li>Иногда посетители отключают cookie. Отловить это можно проверкой свойства [navigator.cookieEnabled](https://developer.mozilla.org/en-US/docs/DOM/window.navigator.cookieEnabled)
-
-```js
-//+ run
-if (!navigator.cookieEnabled) {
-  alert( 'Включите cookie для комфортной работы с этим сайтом' );
-}
-```
-
-...Конечно, предполагается, что включён JavaScript. Впрочем, посетитель без JS и cookie с большой вероятностью не человек, а бот.</li> 
-</ul>
-
-## Итого
-
-Файл с функциями для работы с cookie: [cookie.js](cookie.js).
\ No newline at end of file
diff --git a/11-extra/10-cookie/cookie.js b/11-extra/10-cookie/cookie.js
deleted file mode 100644
index 896993d6..00000000
--- a/11-extra/10-cookie/cookie.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// возвращает cookie с именем name, если есть, если нет, то undefined
-function getCookie(name) {
-  var matches = document.cookie.match(new RegExp(
-    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
-  ));
-  return matches ? decodeURIComponent(matches[1]) : undefined;
-}
-
-// устанавливает cookie c именем name и значением value
-// options - объект с свойствами cookie (expires, path, domain, secure)
-function setCookie(name, value, options) {
-  options = options || {};
-
-  var expires = options.expires;
-
-  if (typeof expires == "number" && expires) {
-    var d = new Date();
-    d.setTime(d.getTime() + expires * 1000);
-    expires = options.expires = d;
-  }
-  if (expires && expires.toUTCString) {
-    options.expires = expires.toUTCString();
-  }
-
-  value = encodeURIComponent(value);
-
-  var updatedCookie = name + "=" + value;
-
-  for (var propName in options) {
-    updatedCookie += "; " + propName;
-    var propValue = options[propName];
-    if (propValue !== true) {
-      updatedCookie += "=" + propValue;
-    }
-  }
-
-  document.cookie = updatedCookie;
-}
-
-// удаляет cookie с именем name
-function deleteCookie(name) {
-  setCookie(name, "", {
-    expires: -1
-  })
-}
\ No newline at end of file
diff --git a/11-extra/10-cookie/safari-nocookie.png b/11-extra/10-cookie/safari-nocookie.png
deleted file mode 100644
index 1a4fb868..00000000
Binary files a/11-extra/10-cookie/safari-nocookie.png and /dev/null differ
diff --git a/11-extra/10-cookie/safari-nocookie@2x.png b/11-extra/10-cookie/safari-nocookie@2x.png
deleted file mode 100644
index 6c3f9d82..00000000
Binary files a/11-extra/10-cookie/safari-nocookie@2x.png and /dev/null differ
diff --git a/11-extra/11-intl/1-collate-array-sort/solution.md b/11-extra/11-intl/1-collate-array-sort/solution.md
deleted file mode 100644
index 78c1d455..00000000
--- a/11-extra/11-intl/1-collate-array-sort/solution.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Здесь подойдут стандартные параметры сравнения:
-
-```js
-//+ run
-var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
-
-*!*
-var collator = new Intl.Collator();
-animals.sort(function(a, b) {
-  return collator.compare(a, b);
-});
-*/!*
-
-alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК
-```
-
-А вот, что было бы при обычном вызове `sort()`:
-
-```js
-//+ run
-var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
-
-*!*
-alert( animals.sort() ); // АИСТ,ЯК,енот,ехидна,тигр,ёж
-*/!*
-```
-
diff --git a/11-extra/11-intl/1-collate-array-sort/task.md b/11-extra/11-intl/1-collate-array-sort/task.md
deleted file mode 100644
index c457627a..00000000
--- a/11-extra/11-intl/1-collate-array-sort/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Отсортируйте массив с буквой ё
-
-[importance 5]
-
-Используя `Intl.Collate`, отсортируйте массив:
-
-```js
-var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
-
-// ... ваш код ...
-
-alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК
-```
-
-В этом примере порядок сортировки не должен зависеть от регистра. 
-
-Что касается бувы `"ё"`, то мы следуем [обычным правилам сортировки буквы ё](http://ru.wikipedia.org/wiki/%D0%81#.D0.A1.D0.BE.D1.80.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.BA.D0.B0), по которым "е" и "ё" считаются одной и той же буквой, за исключением случая, когда два слова отличаются только в позиции буквы "е" / "ё" -- тогда слово с "е" ставится первым.
\ No newline at end of file
diff --git a/11-extra/11-intl/article.md b/11-extra/11-intl/article.md
deleted file mode 100644
index 97619b99..00000000
--- a/11-extra/11-intl/article.md
+++ /dev/null
@@ -1,484 +0,0 @@
-# Intl: интернационализация в JavaScript
-
-Общая проблема строк, дат, чисел в JavaScript -- они "не в курсе" языка и особенностей стран, где находится посетитель.
-
-В частности:
-<dl>
-<dt>Строки</dt>
-<dd>При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что `"ё" > "я"` и `"а" > "Я"`, хотя всем известно, что `я` -- последняя буква алфавита и это она должна быть больше любой другой.</dd>
-<dt>Даты</dt>
-<dd>В разных странах принята разная запись дат. Где-то пишут 31.12.2014 (Россия), а где-то 12/31/2014 (США), где-то иначе.</dd>
-<dt>Числа</dt>
-<dd>В одних странах выводятся цифрами, в других -- иероглифами, длинные числа разделяются где-то пробелом, где-то запятой.</dd>
-</dl>
-
-Все современные браузеры, кроме IE10- (но есть библиотеки и для него) поддерживают стандарт [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), предназначенный решить эти проблемы навсегда.
-
-[cut]
-
-## Основные объекты
-
-<dl>
-<dt>`Intl.Collator`</dt>
-<dd>Умеет правильно сравнивать и сортировать строки.</dd>
-<dt>`Intl.DateTimeFormat`</dt>
-<dd>Умеет форматировать дату и время в соответствии с нужным языком.</dd>
-<dt>`Intl.NumberFormat`</dt>
-<dd>Умеет форматировать числа в соответствии с нужным языком.</dd>
-</dl>
-
-## Локаль 
-
-*Локаль* -- первый и самый важный аргумент всех методов, связанных с интернационализацией.
-
-Локаль описывается строкой из трёх компонентов, которые разделяются дефисом:
-<ol>
-<li>Код языка.</li>
-<li>Код способа записи.</li>
-<li>Код страны.</li>
-</ol>
-
-На практике не всегда указаны три, обычно меньше:
-<ol>
-<li>`ru` -- русский язык, без уточнений.</li>
-<li>`en-GB` -- английский язык, используемый в Англии (`GB`).</li>
-<li>`en-US` -- английский язык, используемый в США (`US`).</li>
-<li>`zh-Hans-CN` -- китайский язык (`zh`), записываемый упрощённой иероглифической письменностью (`Hans`), используемый в китае.</li>
-</ol>
-
-Также через суффикс `-u-*` можно указать расширения локалей, например `"th-TH-u-nu-thai"` -- тайский язык (`th`), используемый в Тайланде (`TH`), с записью чисел тайскими буквами (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) .
-
-Стандарт, который описывает локали -- [RFC 5464](http://tools.ietf.org/html/rfc5646), языки описаны в [IANA language registry](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
-
-Все методы принимают локаль в виде строки или массива, содержащего несколько локалей в порядке предпочтения.
-
-Если локаль не указана или `undefined` -- берётся локаль по умолчанию, установленная в окружении (браузере).
-
-### Подбор локали localeMatcher
-
-`localeMatcher` -- вспомогательная настройка, которую тоже можно везде указать, она определяет способ подбора локали, если желаемая недоступна.
-
-У него два значения:
-<ul>
-<li>`"lookup"` -- означает простейший порядок поиска путём обрезания суффикса, например `zh-Hans-CN` -> `zh-Hans` -> `zh` -> локаль по умолчанию.</li>
-<li>`"best fit"` -- использует встроенные алгоритмы и предпочтения браузера (или другого окружения) для выбора подходящей локали.</li>
-</ul>
-
-**По умолчанию стоит `"best fit"`.**
-
-Если локалей несколько, например `["zh-Hans-CN", "ru-RU"]` то `localeMatcher` пытается подобрать наиболее подходящую локаль для первой из списка (китайская), если не получается -- переходит ко второй (русской) и так далее. Если ни одной не нашёл, например на компьютере не совсем поддерживается ни китайский ни русский, то используется локаль по умолчанию.
-
-Как правило, `"best fit"` является здесь наилучшим выбором.
-
-
-## Строки, Intl.Collator [#intl-collator]
-
-Синтаксис:
-
-```js
-// создание 
-var collator = new Intl.Collator([locales, [options]])
-```
-
-Параметры:
-<dl>
-<dt>`locales`</dt>
-<dd>Локаль, одна или массив в порядке предпочтения.</dd>
-<dt>`options`</dt>
-<dd>Объект с дополнительными настройками:
-<ul>
-<li>`localeMatcher` -- алгоритм выбора подходящей локали.</li>
-<li>`usage` -- цель сравнения: сортировка `"sort"` или поиск `"search"`, по умолчанию `"sort"`.</li>
-<li>`sensitivity` -- чувствительность: какие различия в символах учитывать, а какие -- нет, варианты:
-<ul>
-<li>`base` -- учитывать только разные символы, без диакритических знаков и регистра, например: `а ≠ б`, `е = ё`, `а = А`.</li>
-<li>`accent` -- учитывать символы и диакритические знаки, например: `а ≠ б`, `е ≠ ё`, `а = А`.</li>
-<li>`case` --  учитывать символы и регистр, например: `а ≠ б`, `е = ё`, `а ≠ А`.</li>
-<li>`variant` -- учитывать всё: символ, диакритические знаки, регистр, например: `а ≠ б`, `е ≠ ё`, `а ≠ А`, используется по умолчанию.</li>
-</ul>
-</li>
-<li>`ignorePunctuation` -- игнорировать знаки пунктуации: `true/false`, по умолчанию `false`.</li>
-<li>`numeric` -- использовать ли численное сравнение: `true/false`, если `true`, то будет `12 > 2`, иначе `2 < 12`.</li>
-<li>`caseFirst` -- в сортировке должны идти первыми прописные или строчные буквы,  варианты: `"upper"` (прописные), `lower` (строчные) или `false` (стандартное для локали, также является значением по умолчанию). Не поддерживается IE11-.</li>
-</ul>
-</dd>
-</dl>
-
-В подавляющем большинстве случаев подходят стандартные параметры, то есть `options` указывать не нужно.
-
-Использование:
-
-```js
-var result = collator.compare(str1, str2);
-```
-
-Результат `compare` имеет значение `1` (больше), `0` (равно) или `-1` (меньше).
-
-Например:
-
-```js
-//+ run
-var collator = new Intl.Collator();
-
-alert( "ёжик" > "яблоко" ); // true (ёжик больше, что неверно)
-alert( collator.compare("ёжик", "яблоко") ); // -1 (ёжик меньше, верно)
-```
-
-Выше были использованы полностью стандартные настройки. Они различают регистр символа, но это различие можно убрать, если настроить чувствительность `sensitivity`:
-
-```js
-//+ run
-var collator = new Intl.Collator();
-alert( collator.compare("ЁжиК", "ёжик") ); // 1, разные
-
-var collator = new Intl.Collator(undefined, {
-  sensitivity: "accent"
-});
-alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые
-```
-
-## Даты, Intl.DateFormatter [#intl-dateformatter]
-
-Синтаксис:
-
-```js
-// создание 
-var formatter = new Intl.DateFormatter([locales, [options]])
-```
-
-Первый аргумент -- такой же, как и в `Collator`, а в объекте `options` мы можем определить, какие именно части даты показывать (часы, месяц, год...) и в каком формате.
-
-Полный список свойств `options`:
-<table>
-<thead>
-<tr>
-    <th>Свойство</th>
-    <th>Описание</th>
-    <th>Возможные значения</th>
-    <th>По умолчанию</th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr>
-    <td>`localeMatcher` </td>
-    <td> Алгоритм подбора локали</td>
-    <td>
-      `lookup`,`best fit`
-    </td>
-    <td>
-      `best fit`
-    </td>
-  </tr>
-  <tr>
-    <td>`formatMatcher` </td>
-    <td>
-      Алгоритм подбора формата
-    </td>
-    <td> `basic`, `best fit` </td>
-    <td> `best fit` </td>
-  </tr>
-  <tr>
-    <td>`hour12`</td>
-    <td>Включать ли время в 12-часовом формате</td>
-    <td>`true` -- 12-часовой формат, `false` -- 24-часовой</td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`timeZone`</td>
-    <td>Временная зона</td>
-    <td>Временная зона, например `Europe/Moscow`</td>
-    <td>`UTC`</td>
-  </tr>
-  <tr>
-    <td>`weekday`</td>
-    <td>День недели</td>
-    <td>`narrow`, `short`, `long`</td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`era`</td>
-    <td>Эра</td>
-    <td>`narrow`, `short`, `long`</td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`year`</td>
-    <td>Год</td>
-    <td>`2-digit`, `numeric`</td>
-    <td>`undefined` или `numeric`</td>
-  </tr>
-  <tr>
-    <td>`month`</td>
-    <td>Месяц</td>
-    <td>`2-digit`, `numeric`, `narrow`, `short`, `long` </td>
-    <td>`undefined` или `numeric`</td>
-  </tr>
-  <tr>
-    <td>`day`</td>
-    <td>День</td>
-    <td>`2-digit`, `numeric`</td>
-    <td>`undefined` или `numeric`</td>
-  </tr>
-  <tr>
-    <td>`hour`</td>
-    <td>Час</td>
-    <td> `2-digit`, `numeric` </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`minute`</td>
-    <td>Минуты </td>
-    <td> `2-digit`, `numeric` </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`second`
-    </td>
-    <td>Секунды</td>
-    <td>`2-digit`, `numeric`</td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>`timeZoneName`</td>
-    <td>Название таймзоны (нет в IE11)</td>
-    <td>`short`, `long`</td>
-    <td></td>
-  </tr>
-  </tbody>
-</table>
-
-**Все локали обязаны поддерживать следующие наборы настроек:**
-
-<ul>
-<li>weekday, year, month, day, hour, minute, second</li>
-<li>weekday, year, month, day</li>
-<li>year, month, day</li>
-<li>year, month</li>
-<li>month, day</li>
-<li>hour, minute, second</li>
-</ul>
-
-Если указанный формат не поддерживается, то настройка `formatMatcher` задаёт алгоритм подбора наиболее близкого формата: `basic` -- по [стандартным правилам](http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) и `best fit` -- по умолчанию, на усмотрение окружения (браузера).
-
-
-Использование:
-
-```js
-var dateString = formatter.format(date);
-```
-
-Например:
-
-```js
-//+ run
-var date = new Date(2014, 11, 31, 12, 30, 0);
-
-var formatter = new Intl.DateTimeFormat("ru");
-alert( formatter.format(date) ); // 31.12.2014
-
-var formatter = new Intl.DateTimeFormat("en-US");
-alert( formatter.format(date) ); // 12/31/2014
-```
-
-Длинная дата, с настройками:
-
-```js
-//+ run
-var date = new Date(2014, 11, 31, 12, 30, 0);
-
-var formatter = new Intl.DateTimeFormat("ru", {
-  weekday: "long",
-  year: "numeric",
-  month: "long",
-  day: "numeric"
-});
-
-alert( formatter.format(date) ); // среда, 31 декабря 2014 г.
-```
-
-Только время:
-
-```js
-//+ run
-var date = new Date(2014, 11, 31, 12, 30, 0);
-
-var formatter = new Intl.DateTimeFormat("ru", {
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric"
-});
-
-alert( formatter.format(date) ); // 12:30:00
-```
-
-## Числа: Intl.NumberFormat
-
-Форматтер `Intl.NumberFormat` умеет красиво форматировать не только числа, но и валюту, а также проценты.
-
-Синтаксис:
-
-```js
-var formatter = new Intl.NumberFormat([locales[, options]]);
-
-formatter.format(number); // форматирование
-```
-
-Параметры, как и раньше -- локаль и опции.
-
-Список опций:
-
-<table>
-<tr>
-    <th>Свойство </th>
-    <th>Описание </th>
-    <th>Возможные значения </th>
-    <th>По умолчанию </th>
-  </tr>
-  <tr>
-    <td> `localeMatcher` </td>
-    <td>Алгоритм подбора локали </td>
-    <td> `lookup`, `best fit` </td>
-    <td> `best fit` </td>
-  </tr>
-  <tr>
-    <td> `style` </td>
-    <td>Стиль форматирования </td>
-    <td> `decimal`, `percent`, `currency` </td>
-    <td> `decimal` </td>
-  </tr>
-  <tr>
-    <td> `currency` </td>
-    <td> Алфавитный код валюты</td>
-    <td> См. [Список кодов валюты](http://www.currency-iso.org/en/home/tables/table-a1.html), например `USD` </td>
-    <td> </td>
-  </tr>
-  <tr>
-    <td> `currencyDisplay` </td>
-    <td>Показывать валюту в виде кода, локализованного символа или локализованного названия
-    </td>
-    <td> `code`, `symbol`, `name` </td>
-    <td> `symbol` </td>
-  </tr>
-  <tr>
-    <td> `useGrouping` </td>
-    <td>Разделять ли цифры на группы</td>
-    <td> `true`, `false` </td>
-    <td> `true` </td>
-  </tr>
-  <tr>
-    <td>`minimumIntegerDigits`</td>
-    <td>Минимальное количество цифр целой части</td>
-    <td>от `1` до `21`
-    </td>
-    <td>`21`</td>
-  </tr>
-  <tr>
-    <td>`minimumFractionDigits` </td>
-    <td>Минимальное количество десятичных цифр
-    </td>
-    <td>от `0` до `20` </td>
-    <td>для чисел и процентов `0`, для валюты зависит от кода.</td>
-  </tr>
-  <tr>
-    <td>`maximumFractionDigits`</td>
-    <td>Максимальное количество десятичных цифр </td>
-    <td>от `minimumFractionDigits` до `20`. </td>
-    <td>для чисел `max(minimumFractionDigits, 3)`, для процентов `0`, для валюты зависит от кода.</td>
-  </tr>
-  <tr>
-    <td>`minimumSignificantDigits`</td>
-    <td>Минимальное количество значимых цифр</td>
-    <td>от `1` до `21`</td>
-    <td>`1`</td>
-  </tr>
-  <tr>
-    <td>`maximumSignificantDigits`</td>
-    <td>Максимальное количество значимых цифр</td>
-    <td>от `minimumSignificantDigits` до `21`</td>
-    <td>`minimumSignificantDigits`</td>
-  </tr>
-</table>
-
-Пример без опций:
-
-```js
-//+ run
-var formatter = new Intl.NumberFormat("ru");
-alert( formatter.format(1234567890.123) ); // 1 234 567 890,123
-```
-
-С ограничением значимых цифр (важны только первые 3):
-
-```js
-//+ run
-var formatter = new Intl.NumberFormat("ru", {
-  maximumSignificantDigits: 3
-});
-alert( formatter.format(1234567890.123) ); // 1 230 000 000
-```
-
-C опциями для валюты:
-
-```js
-var formatter = new Intl.NumberFormat("ru", {
-  style: "currency",
-  currency: "GBP"
-});
-
-alert( formatter.format(1234.5) ); // 1 234,5 £
-```
-
-С двумя цифрами после запятой:
-
-```js
-var formatter = new Intl.NumberFormat("ru", {
-  style: "currency",
-  currency: "GBP",
-  minimumFractionDigits: 2
-});
-
-alert( formatter.format(1234.5) ); // 1 234,50 £
-```
-
-## Методы в Date, String, Number
-
-Методы форматирования также поддерживаются в обычных строках, датах, числах:
-
-<dl>
-<dt>`String.prototype.localeCompare(that [, locales [, options]])`</dt>
-<dd>Сравнивает строку с другой, с учётом локали, например:
-
-```js
-//+ run
-var str = "ёжик";
-
-alert( str.localeCompare("яблоко", "ru") ); // -1
-```
-
-</dd>
-<dt>`Date.prototype.toLocaleString([locales [, options]])`</dt>
-<dd>Форматирует дату в соответствии с локалью, например:
-
-```js
-//+ run no-beautify
-var date = new Date(2014, 11, 31, 12, 00);
-
-alert( date.toLocaleString("ru", { year: 'numeric', month: 'long' }) ); // Декабрь 2014
-```
-
-</dd>
-<dt>`Date.prototype.toLocaleDateString([locales [, options]])`</dt>
-<dd>То же, что и выше, но опции по умолчанию включают в себя год, месяц, день</dd>
-<dt>`Date.prototype.toLocaleTimeString([locales [, options]])`</dt>
-<dd>То же, что и выше, но опции по умолчанию включают в себя часы, минуты, секунды</dd>
-<dt>`Number.prototype.toLocaleString([locales [, options]])`</dt>
-<dd>Форматирует число, используя опции `Intl.NumberFormat`.</dd>
-</dl>
-
-Все эти методы при запуске создают соответствующий объект `Intl.*` и передают ему опции, можно рассматривать их как укороченные варианты вызова.
-
-## Старые IE
-
-В IE10- рекомендуется использовать полифилл, например библиотеку [](https://github.com/andyearnshaw/Intl.js).
-
-
diff --git a/11-extra/12-regexp-specials/article.md b/11-extra/12-regexp-specials/article.md
deleted file mode 100644
index 50303b3c..00000000
--- a/11-extra/12-regexp-specials/article.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# Особенности регулярных выражений в Javascript
-
-Регулярные выражения в javascript немного странные. Вроде - перловые, обычные, но с подводными камнями, на которые натыкаются даже опытные javascript-разработчики.
-
-Эта статья ставит целью перечислить неожиданные фишки и особенности `RegExp` в краткой и понятной форме.
-
-
-[cut]
-## Точка и перенос строки
-
-Для поиска в многострочном режиме почти все модификации перловых регэкспов используют специальный multiline-флаг.
-
-И javascript здесь не исключение.
-
-Попробуем же сделать поиск и замену многострочного вхождения. Скажем, будем заменять <code>[u] ... [/u]</code> на тэг подчеркивания: <code>&lt;u&gt;</code>:
-
-```js
-//+ run
-function bbtagit(text) {
-  text = text.replace(/\[u\](.*?)\[\/u\]/gim, '<u>$1</u>')
-
-  return text
-}
-
-var line = "[u]мой\n текст[/u]"
-alert(bbtagit(line))
-```
-
-Попробуйте запустить. Заменяет? Как бы не так!
-
-Дело в том, что в javascript мультилайн режим (флаг <code>m</code>) влияет только на символы ^ и $, которые начинают матчиться с началом и концом строки, а не всего текста.
-
-Точка по-прежнему - любой символ, кроме новой строки. В javascript нет флага, который устанавливает мультилайн-режим для точки. Для того, чтобы заматчить совсем что угодно - используйте <code>[\s\S]</code>.
-
-Работающий вариант:
-
-```js
-//+ run
-function bbtagit(text) {
-  text = text.replace(/\[u\]([\s\S]*)\[\/u\]/gim, '<u>$1</u>')
-
-  return text
-}
-
-var line = "[u]мой\n текст[/u]"
-alert(bbtagit(line))
-```
-
-## Жадность
-
-Это не совсем особенность, скорее фича, но все же достойная отдельного абзаца.
-
-Все регулярные выражения в javascript - жадные. То есть, выражение старается отхватить как можно больший кусок строки.
-
-Например, мы хотим заменить все открывающие тэги <code>&lt;a&gt;</code>. На что и почему - не так важно.
-
-```js
-//+ run
-text = '1 <A href="#">...</A> 2'
-text = text.replace(/<A(.*)>/, 'TEST')
-alert(text)
-```
-
-При запуске вы увидите, что заменяется не открывающий тэг, а вся ссылка, выражение матчит ее от начала и до конца.
-
-Это происходит из-за того, что точка-звездочка в "жадном" режиме пытается захватить как можно больше, в нашем случае - это как раз до последнего <code>&gt;</code>.
-
-Последний символ <code>&gt;</code> точка-звездочка не захватывает, т.к. иначе не будет совпадения.
-
-Как вариант решения используют квадратные скобки: <code>[^&gt;]</code>:
-
-```js
-//+ run
-text = '1 <A href="#">...</A> 2'
-text = text.replace(/<A([^>]*)>/, 'TEST')
-alert(text)
-```
-
-Это работает. Но самым удобным вариантом является переключение точки-звездочки в нежадный режим. Это осуществляется простым добавлением знака "<code>?</code>" после звездочки.
-
-В нежадном режиме точка-звездочка пустит поиск дальше сразу, как только нашла совпадение:
-
-```js
-//+ run
-text = '1 <A href="#">...</A> 2'
-text = text.replace(/<A(.*?)>/, 'TEST')
-alert(text)
-```
-
-В некоторых языках программирования можно переключить жадность на уровне всего регулярного выражения, флагом.
-
-В javascript это сделать нельзя.. Вот такая особенность. А вопросительный знак после звездочки рулит - честное слово.
-
-## Backreferences в паттерне и при замене
-
-Иногда нужно в самом паттерне поиска обратиться к предыдущей его части.
-
-Например, при поиске BB-тагов, то есть строк вида <code>[u]...[/u]</code>, <code>[b]...[/b]</code> и <code>[s]...[/s]</code>. Или при поиске атрибутов, которые могут быть в одинарных кавычках или двойных.
-
-Обращение к предыдущей части паттерна в javascript осуществляется как \1, \2 и т.п., бэкслеш + номер скобочной группы:
-
-```js
-//+ run
-text = ' [b]a [u]b[/u] c [/b] '
-
-var reg = /\[([bus])\](.*?)\[\// * u * /\1/ * /u*/\] /
-text = text.replace(reg, '<$1>$2</$1>')
-alert(text)
-```
-
-Обращение к скобочной группе в строке замены идет уже через доллар: <code>$1</code>. Не знаю, почему, наверное так удобнее..
-
-P.S. Понятно, что при таком способе поиска bb-тагов придется пропустить текст через замену несколько раз - пока результат не перестанет отличаться от оригинала.
-
-## Найти все / Заменить все
-
-Эти две задачи решаются в javascript принципиально по-разному.
-
-Начнем с "простого".
-
-### Заменить все
-
-Для замены всех вхождений используется метод [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace). 
-Он интересен тем, что допускает первый аргумент - регэксп или строку. 
-
-Если первый аргумент - строка, то будет осуществлен поиск подстроки, без преобразования в регулярное выражение.
-
-Попробуйте:
-
-```js
-//+ run
-alert("2 ++ 1".replace("+", "*"))
-```
-
-Как видите, заменился только один плюс, а не оба.
-
-**Чтобы заменить все вхождения, [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace) обязательно нужно использовать с регулярным выражением.**
-
-В режиме регулярного выражения плюс придётся экранировать, но зато <code>replace</code> заменит все вхождения (при указании флага <code>g</code>):
-
-```js
-//+ run
-alert("2 ++ 1".replace(/\+/g, "*"))
-```
-
-Вот такая особенность работы со строкой.
-
-### Заменить функцией
-
-Очень полезной особенностью <code>replace</code> является возможность работать с функцией вместо строки замены. Такая функция получает первым аргументом - все совпадение, а последующими аргументами - скобочные группы.
-
-Следующий пример произведет операции вычитания:
-
-```js
-//+ run no-beautify
-var str = "count 36 - 26, 18 - 9"
-str = str.replace(/(\d+) - (\d+)/g, function(a,b,c) { return b-c })
-alert(str)
-```
-
-### Найти всё
-
-В javascript нет одного универсального метода для поиска всех совпадений. 
-Для поиска без запоминания скобочных групп - можно использовать [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match):
-
-```js
-//+ run
-var str = "count 36-26, 18-9"
-var re = /(\d+)-(\d+)/g
-result = str.match(re)
-for (var i = 0; i < result.length; i++) alert(result[i])
-```
-
-Как видите, оно исправно ищет все совпадения (флаг <code>'g'</code> у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий "облегченный вариант". 
-
-### Найти всё с учётом скобочных групп
-
-В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
-
-Для этого регулярное выражение должно использовать флаг <code>'g'</code>. Тогда результат поиска, запомненный в свойстве <code>lastIndex</code> объекта <code>RegExp</code> используется как точка отсчета для следующего поиска:
-
-```js
-//+ run
-var str = "count 36-26, 18-9"
-var re = /(\d+)-(\d+)/g
-var res
-while ((res = re.exec(str)) != null) {
-  alert("Найдено " + res[0] + ":  (" + res[1] + ") и (" + res[2] + ")")
-  alert("Дальше ищу с позиции " + re.lastIndex)
-}
-```
-
-Проверка <code>while( (res = re.exec(str)) != null)</code> нужна т.к. значение <code>res = 0</code> является хорошим и означает, что вхождение найдено в самом начале строки (поиск успешен). Поэтому необходимо сравнивать именно с <code>null</code>.
diff --git a/11-extra/3-templates/article.md b/11-extra/3-templates/article.md
deleted file mode 100644
index c433f8be..00000000
--- a/11-extra/3-templates/article.md
+++ /dev/null
@@ -1,308 +0,0 @@
-# Эволюция шаблонных систем для JavaScript
-
-Различных шаблонных систем -- много.
-
-Они постепенно эволюционировали и развивались. 
-
-В этой главе мы разберём, как шёл этот процесс, какие шаблонки "родились", какие бонусы нам даёт использование той или иной шаблонной системы.
-[cut]
-
-## Микрошаблоны
-
-*Микрошаблоны* (англ. microtemplate) мы уже видели на примере `_.template`.
-
-Это HTML со вставками переменных и произвольным JS.
-
-Пример:
-
-```html
-<!--+ no-beautify -->
-<div class="menu">
-  <span class="title"><%-title%></span>
-  <ul>
-    <% items.forEach(function(item) { %>
-    <li><%-item%></li>
-    <% }); %>
-  </ul>
-</div>
-```
-
-Шаблонная система компилирует этот код в JavaScript-функцию с минимальными модификациями, и она уже, запустившись с данными, генерирует результат.
-
-Достоинства и недостатки такого подхода:
-
-[compare]
--Жёстко привязан к языку JavaScript.
--При ошибке в шаблоне приходится лезть внутрь "страшной" функции
-+Простая и быстрая шаблонная система
-+Внутри JS-функции доступен полноценный браузерный отладчик, функция хоть и страшна, но понятна.
-[/compare]
-
-### Код в шаблоне
-
-Включение произвольного JS-кода в шаблон, в теории, позволяет делать в нём всё, что угодно. Но обратная сторона медали -- шаблон вместо внятного HTML может стать адским нагромождением разделителей вперемешку с вычислениями. Что рекомендуется делать в шаблонах, а что нет?
-
-Можно разделить код на два типа с точки зрения шаблонизации:
-<ul>
-<li>**Бизнес-логика** -- код, *формирующий данные*, основной код приложения.</li>
-<li>**Презентационная логика** -- код, описывающий, как *показываются данные*.</li>
-</ul>
-
-Например, код, получающий данные с сервера для вывода в таблице -- бизнес-логика, а код, форматирующий даты для вывода -- презентационная логика. 
-
-В шаблонах допустима лишь презентационная логика.
-
-### Кросс-платформенность
-
-Зачастую, нужно использовать один и тот же шаблон и в браузере и на сервере.
-
-Например, серверный код генерирует HTML со списком сообщений, а JavaScript на клиенте добавляет к нему новые по мере появления.
-
-...Но как использовать на сервере шаблон с JavaScript, если его основной язык -- PHP, Ruby, Java?
-
-Эту проблему можно обойти. На сервер, использующем PHP, Ruby, Java или какой-то другой язык, дополнительно ставится виртуальная машина [V8](http://code.google.com/p/v8/) и настраивается интеграция с ней. Почти все платформы это умеют.
-
-После этого становится возможным запускать JavaScript-шаблоны и передавать им данные в виде объектов, массивов и так далее.
-
-Этот подход может показаться искусственным, но на самом деле он вполне жизнеспособен и используется в ряде крупных проектов.
-
-### Прекомпиляция 
-
-Эта шаблонка и большинство других систем, которые мы рассмотрим далее, допускают *прекомпиляцию*.
-
-То есть, можно заранее, до выкладывания сайта на "боевой сервер", обработать шаблоны, создать из них JS-функции, объединить их в единый файл и далее, в "боевом окружении" использовать уже их.
-
-Современные системы сборки ([brunch](http://brunch.io/), [grunt](http://gruntjs.com/) с плагинами и другие) позволяют делать это удобно, а также хранить шаблоны в разных файлах, каждый -- в нужной директории с JS-кодом для виджета.
-
-## Хелперы и фильтры
-
-JavaScript-вставки не всегда просты и элегантны. Иногда, чтобы что-то сделать, нужно написать порядочно кода.
-
-**Для того, чтобы сделать шаблоны компактнее и проще, в них стали добавлять фильтры и хелперы.**
-
-<ul>
-<li>**Хелпер** (англ. helper) -- вспомогательная функция, которая доступна в шаблонах и используется для решения часто возникающих задач. 
-
-В `_.template`, чтобы объявить хелпер, можно просто сделать глобальную функцию. Но это слишком грубо, так не делают. Гораздо лучше -- использовать объект `_.templateSettings.imports`, в котором можно указать, какие функции добавлять в шаблоны, или опцию `imports` для `_.template`.
-
-Пример хелпера -- функция `t(phrase)`, которая переводит `phrase` на текущий язык:
-
-```js
-//+ run
-_.templateSettings.imports.t = function(phrase) {
-  // обычно функция перевода немного сложнее, но здесь это не важно
-  if (phrase == "Hello") return "Привет";
-}
-
-*!*
-// в шаблоне используется хелпер t для перевода 
-var compiled = _.template("<div><%=t('Hello')%></div>");
-*/!*
-alert( compiled() ); // <div>Привет</div>
-```
-
-Такой хелпер очень полезен для мультиязычных сайтов, когда один шаблон нужно выводить на десяти языках. Нечто подобное используется почти во всех языках и платформах, не только в JavaScript.
-</li>
-<li>**Фильтр** -- это функция, которая трансформирует данные, например, форматирует дату, сортирует элементы массива и так далее.
-
-Обычно для фильтров обычно предусмотрен специальный "особо простой и короткий" синтаксис.
-
-Например, в системе шаблонизации [EJS](https://github.com/visionmedia/ejs), которая по сути такая же, но мощнее, чем `_.template`, фильтры задаются через символ `|`, внутри разделителя `<%=: ... %>`.
-
-Чтобы вывести `item` с большой буквы, можно вместо `<%=item%>` написать `<%=: item | capitalize %>`. Чтобы выводить отсортированный массив, можно использовать `<%=: items | sort %>` и так далее.
-</li>
-</ul>
-
-## Свой язык
-
-Для того, чтобы сделать шаблон ещё короче, а также с целью "отвязать" их от JavaScript, ряд шаблонных систем предлагают свой язык.
-
-Например:
-<ul>
-<li>[Mustache](http://mustache.github.com/)</li>
-<li>[Handlebars](http://handlebarsjs.com/)</li>
-<li>[Closure Templates](https://developers.google.com/closure/templates/docs/javascript_usage)</li>
-<li>...тысячи их...</li>
-</ul>
-
-Шаблон для меню в Handlerbars, к примеру, будет выглядеть так:
-
-```html
-<!--+ no-beautify -->
-<div class="menu">
-  <span class="title">{{title}}</span>
-  <ul>
-    {{#each items}}
-    <li>{{item}}</li>
-    {{/each}}
-  </ul>
-<div>
-```
-
-Как видно, *вместо* JavaScript-конструкций здесь используются хелперы. В примере выше `{{#each}} ... {{/each}` -- "блочный" хелпер: он показывает своё содержимое для каждого элемента `items` и является альтернативой `forEach`.
-
-Есть и другие встроенные в шаблонизатор хелперы, можно легко делать свои.
-
-Использование такого шаблона:
-
-```js
-// текст шаблона должен быть в переменной tmpl
-var compiled = Handlebars.compile(tmpl);
-
-var result = compiled({
-  title: "Сладости",
-  items: ["Торт", "Пирожное", "Пончик"]
-});
-```
-
-Библиотека шаблонизации [Handlebars](http://handlebarsjs.com/) "понимает" этот язык. Вызов `Handlebars.compile` принимает строку шаблона, разбивает по разделителям и, аналогично предыдущему виду шаблонов, делает JavaScript-функцию, которая затем по данным выдаёт строку-результат.
-
-### Запрет на встроенный JS
-
-Если "свой язык шаблонизатора" очень прост, то библиотеку для его поддержки можно легко написать под PHP, Ruby, Java и других языках, которые тем самым научатся понимать такие шаблоны.
-
-**Если шаблонка действительна нацелена на кросс-платформенность, то явные JS-вызовы в ней запрещены. Всё делается через хелперы.**
-
-Если же нужна какая-то логика, то она либо выносится во внешний код, либо делается через новый хелпер --  он отдельно пишется на JavaScript (для клиента) и для сервера (на его языке). Получается полная совместимость.
-
-Это создаёт определённые сложности. Например, в Handlebars есть хелпер `{{#if cond}} ... {{/if}}`, который выводит содержимое, если истинно условие `cond`. При этом вместо `cond` нельзя поставить, к примеру, `a > b` или вызов `str.toUpperCase()`, будет ошибка. Все вычисления должны быть сделаны на этапе передачи данных в шаблон. 
-
-Так сделано как раз для переносимости шаблонной системы на другие языки, но на практике не очень-то удобно.
-
-Продвинутые кросс-платформенные шаблонизаторы, в частности, [Closure Templates](https://developers.google.com/closure/templates/docs/javascript_usage), обладают более мощным языком и умеют самостоятельно разбирать и компилировать многие выражения. 
-
-## Шаблонизация компонент
-
-До этого мы говорили о шаблонных системах "общего назначения". По большому счёту, это всего лишь механизмы для преобразования одной строки в другую. Но при описании шаблона для компоненты мы хотим сгенерировать не просто строку, а DOM-элемент, и не просто генерировать, а в дальнейшем -- с ним работать. 
-
-Современные шаблонные системы "заточены" на это. Они умеют создавать по шаблону DOM-элементы и автоматически выполнять после этого разные полезные действия.
-
-Например:
-<ul>
-<li>Можно сохранить важные подэлементы в свойства компоненты, чтобы было проще к ним обращаться из JavaScript.</li>
-<li>Можно автоматически назначать обработчики из методов компонента.</li>
-<li>Можно запомнить, какие данные относятся к каким элементам и в дальнейшем, при изменении данных автоматически обновлять DOM ("привязка данных" -- англ. data binding).</li>
-</ul>
-
-Одной из первых систем шаблонизации, которая поддерживает подобные возможности была [Knockout.JS](http://knockoutjs.com).
-
-Попробуйте поменять значение `<input>` в примере ниже и вы увидите двухстороннюю привязку данных в действии:
-
-```html
-<!--+ run height=120 autorun -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
-
-Поменяйте имя: <input *!*data-bind="value: name, valueUpdate: 'input'"*/!*>
-<hr>
-<h1>Привет, <span *!*data-bind="text: name"*/!*></span>!</h1>
-
-<script>
-var user = {
-  name: ko.observable("Вася")
-};
-
-ko.applyBindings(user, document.body); 
-</script>
-```
-
-Библиотека Knockout.JS создаёт объект `ko`, который и содержит все её возможности.
-
-В этом примере работу начинает вызов `ko.applyBindings(user, document.body)`. 
-
-Его аргументы:
-
-<ul>
-<li>`user` -- объект с данными.</li>
-<li>`document.body` -- DOM-элемент, который будет использован в качестве шаблона.</li>
-</ul>
-
-Он пробегает по всем подэлементам `document.body` и, если видит атрибут `data-bind`, то читает его и выполняет привязку данных. 
-
-Значение `<input data-bind="value: name, ...">` означает, что нужно привязать `input.value` к свойству `name` объекта данных.
-
-Привязка осуществляется в две стороны:
-<ol>
-<li>Во-первых, библиотека ставит на `input` свой обработчик `oninput` (можно выбрать другие события, см. [документацию](http://knockoutjs.com/documentation/value-binding.html)), который будет обновлять `user.name`. То есть, изменение `input` автоматически меняет `user.name`</li>
-<li>Во-вторых, свойство `user.name` создано как `ko.observable(...)`. Технически, `ko.observable(value)` -- это функция-обёртка вокруг значения: геттер-сеттер, который умеет рассылать события при изменении.
-
-Например:
-
-```html
-<!--+ run  no-beautify -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
-
-<script>
-var user = ko.observable("Вася");
-
-*!*
-// вызов user() возвращает значение
-*/!*
-alert( user() ); // Вася
-
-*!*
-// вызов user.subscribe(func) ставит обработчик на изменение значения
-*/!*
-user.subscribe(function(newValue) {
-  alert("Новое значение: " + newValue);
-});
-
-*!*
-// вызов user(newValue) меняет значение
-*/!*
-user("Петя"); // сработает обработчик, назначенный выше
-</script>
-```
-
-Библиотека Knockout.JS ставит свой обработчик на изменение значения и при этом обновляет все привязки. Так что при изменении `user.name` меняется и `input.value`.
-</li>
-</ol>
-
-Далее в том же примере находится `<span data-bind="text: name">` -- здесь атрибут означает привязку текста к `name`. Так как `<span>` по своей инициативе меняться не может, то привязка односторонняя, но если бы мог, то можно сделать и двухстороннюю, это несложно.
-
-**Вызов `ko.applyBindings` можно делать внутри компоненты, и таким образом устанавливать соответствия между её объектом и DOM.**
-
-Библиотка также поддерживает хранение шаблонов в `<script type="text/template">` -- см. документацию [template-binding](http://knockoutjs.com/documentation/template-binding.html), можно организовать прекомпиляцию, добавлять свои привязки и так далее.
-
-### Другие библиотеки
-
-Есть другие библиотеки "продвинутой шаблонизации", которые добавляют свои возможности по работе с DOM, например:
-
-<ul>
-<li>[Ractive.JS](http://www.ractivejs.org)</li>
-<li>[Rivets.JS](http://www.rivetsjs.com/)</li>
-</ul>
-
-Подобная шаблонная система является частью многих фреймворков, например:
-<ul>
-<li>[React.JS](http://facebook.github.io/react/)</li>
-<li>[Angular.JS](http://angularjs.org)</li>
-<li>[Ember.JS](http://emberjs.com/)</li>
-</ul>
-
-Все эти фреймворки разные:
-<ul>
-<li>Ember использует надстройку над Handlebars.</li>
-<li>React использует JSX ([JavaScript XML syntax transform](http://facebook.github.io/react/docs/jsx-in-depth.html)) -- свой особый способ вставки разметки в JS-код, который нужно обязательно прекомпилировать перед запуском.</li>
-<li>Angular вместо работы со строками использует клонирование DOM-узлов.</li>
-</ul>
-
-При разработке современного веб-приложения имеет смысл выбрать продвинутую шаблонную систему или даже один из этих архитектурных фреймворков.
-
-## Итого
-
-Системы шаблонизации, в порядке развития и усложнения:
-
-<ul>
-<li>Микрошаблонизация -- строка с JS-вставками, которая компилируется в функцию -- самый простой вариант, минимальная работа для шаблонизатора.</li>
-<li>Собственный язык шаблонов -- "особо простой" синтаксис для частых операций, с запретом на JS в случае, если нужна кросс-платформенность.</li>
-<li>Шаблонизация для компонентов -- современные системы, которые умеют не только генерировать DOM, но и помогать с дальнейшей работой с ним.</li>
-</ul>
-
-Для того, чтобы использовать одни и те же шаблоны на клиенте и сервере, применяют либо кросс-платформенную систему шаблонизации, либо, чаще -- интегрируют серверную часть с V8 и, возможно, с сервером Node.JS.
-
-В главе было много ссылок на шаблонные системы. Все они достаточно современные, поддерживаемые и используются во многих проектах. Среди них вы наверняка найдёте нужную вам.
-
-
-[libs]
-lodash
-[/libs]
\ No newline at end of file
diff --git a/11-extra/4-books/article.md b/11-extra/4-books/article.md
deleted file mode 100644
index b65edd19..00000000
--- a/11-extra/4-books/article.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# Книги по JS, HTML/CSS и не только
-
-Мне часто задают вопрос: "Какую литературу порекомендуете?". На этой странице я предлагаю рекомендации по различным темам. Всего несколько книг на каждую тему, из большего количества все равно пришлось бы выбирать.
-
-Кстати, по всем книжкам, особенно тем, которые касаются технологий, всегда ищите последнее издание.
-
-P.S. Скачать книги здесь нельзя. Эта страница содержит только рекомендации.
-
-## CSS
-
-CSS стоит изучать по одной из этих книг. Можно сразу по обеим.
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/24493075/?partner=iliakan">Большая книга CSS3.</a>
-<i>Дэвид Макфарланд.</i></li>
-<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство.</a>
-<i>Эрик Мейер</i></li>
-</ul>
-
-Конечно, [стандарты](http://www.w3.org/Style/CSS/) тоже будут полезны. Подчас их точность куда проще, чем много страниц разъяснений.
-
-## JavaScript
-
-Полезное чтение о языке, встроенных методах и конструкциях JavaScript:
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/19677670/?partner=iliakan">JavaScript. Подробное руководство.</a>
-<i>Дэвид Флэнаган.</i></li>
-<li><a href="http://www.ozon.ru/context/detail/id/6287517/?partner=iliakan">JavaScript. Шаблоны.</a>
-<i>Стоян Стефанов.</i></li>
-</ul>
-
-## jQuery
-
-Кроме [документации](http://api.jquery.com/):
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/6277333/?partner=iliakan">jQuery. Подробное руководство по продвинутому JavaScript.</a>
-<i>Бер Бибо, Иегуда Кац.</i></li>
-</ul>
-
-## Объектно-ориентированное программирование 
-
-Объектно-ориентированное программирование (ООП) -- это концепция построения программных систем на основе объектов и взаимодействия между ними. При изучении ООП рассматриваются полезные архитектурные приёмы, как организовать программу более эффективно. 
-
-Умение создавать объект, конструктор, вызывать методы -- это основные, самые базовые "кирпичики". Их следует освоить первыми, например используя этот учебник. Затем, когда основы более-менее освоены, стоит уделить внимание теории объектно-ориентированной разработки:
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/3905587/?partner=iliakan">Объектно-ориентированный анализ и проектирование с примерами приложений.</a>
-<i>Гради Буч и др.</i>.</li>
-<li><a href="http://www.ozon.ru/context/detail/id/20217137/?partner=iliakan">Приемы объектно-ориентированного проектирования. Паттерны проектирования.</a>
-<i>Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес.</i></li>
-</ul>
-
-## Регулярные выражения
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/4066500/?partner=iliakan">Регулярные выражения.</a>
-<i>Джеффри Фридл.</i></li>
-</ul>
-
-Эта книга описывает более широкий класс регэкспов, по сравнению с текущим JavaScript. С одной стороны, какая-то информация будет лишней, с другой -- регулярные выражения вообще очень важная и полезная тема.
-
-## Алгоритмы и структуры данных
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/2429691/?partner=iliakan">Алгоритмы. Построение и анализ.</a>
-<i>Т. Кормен, Ч. Лейзерсон, Р. Ривест, К. Штайн.</i></li>
-</ul>
-
-Есть и другая классика, например "Искусство программирования", Дональд Кнут, но она требует более серьёзной математической подготовки. Будьте готовы читать и вникать долго и упорно. Результат -- апгрейд мозговых извилин и общего умения программировать. 
-
-## Разработка и организация кода
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/5508646/?partner=iliakan">Совершенный код.</a>
-<i>Стив Макконнелл.</i></li>
-</ul>
-
-Это желательно изучать уже после получения какого-то опыта в программировании.
- 
-
-
diff --git a/11-extra/5-setimmediate/article.md b/11-extra/5-setimmediate/article.md
deleted file mode 100644
index 123ece3e..00000000
--- a/11-extra/5-setimmediate/article.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Асинхронное выполнение: setImmediate
-
-Функция, отложенная через `setTimeout(..0)` выполнится не ранее следующего "тика" таймера, минимальная частота которого может составлять от 4 до 1000мс. И, конечно же, это произойдёт после того, как все текущие изменения будут перерисованы.
-
-Но нужна ли нам эта дополнительная задержка? Как правило, используя `setTimeout(func, 0)`, мы хотим перенести выполнение `func` на "ближайшее время после текущего кода", и какая-то дополнительная задержка нам не нужна. Если бы была нужна -- мы бы её указали вторым аргументом вместо `0`.
-
-[cut]
-## Метод setImmediate(func)
-
-Для того, чтобы поставить функцию в очередь на выполнение без задержки, в Microsoft предложили метод [setImmediate(func)](http://msdn.microsoft.com/en-us/library/ie/hh773176.aspx). Он реализован в IE10+ и на платформе Node.JS.
-
-У `setImmediate` единственный аргумент -- это функция, выполнение которой нужно запланировать.
-
-В других браузерах `setImmediate` нет, но его можно эмулировать, используя, к примеру, метод [postMessage](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage), предназначенный для пересылки сообщений от одного окна другому. Детали работы с `postMessage` вы найдёте в статье [](/cross-window-messaging-with-postmessage). Желательно читать её после освоения темы "События".
-
-Полифилл для `setImmediate` через `postMessage`:
-
-```js
-//+ no-beautify
-if (!window.setImmediate) window.setImmediate = (function() {
-  var head = { }, tail = head; // очередь вызовов, 1-связный список
-
-  var ID = Math.random(); // уникальный идентификатор
-
-  function onmessage(e) {
-    if(e.data != ID) return; // не наше сообщение
-    head = head.next;
-    var func = head.func;
-    delete head.func;
-    func();      
-  }
-
-  if(window.addEventListener) { // IE9+, другие браузеры
-    window.addEventListener('message', onmessage);
-  } else { // IE8
-    window.attachEvent( 'onmessage', onmessage ); 
-  }
-
-  return function(func) {
-    tail = tail.next = { func: func };
-    window.postMessage(ID, "*");
-  };
-}());
-```
-
-Есть и более сложные эмуляции, включая [MessageChannel](http://www.w3.org/TR/webmessaging/#channel-messaging) для работы с [Web Workers](http://www.w3.org/TR/workers/) и хитрый метод для поддержки IE8-: [](https://github.com/NobleJS/setImmediate). Все они по существу являются "хаками", направленными на то, чтобы обеспечить поддержку `setImmediate` в тех браузерах, где его нет.
-
-## Тест производительности
-
-Чтобы сравнить реальную частоту срабатывания -- измерим время на 100 последовательных вызовов при `setTimeout(..0)` по сравнению с `setImmediate`:
-
-[codetabs src="setimmediate"]
-
-Запустите пример выше -- и вы увидите реальную разницу во времени между `setTimeout(.., 0)` и `setImmediate`. Да, она может быть более в 50, 100 и более раз.
\ No newline at end of file
diff --git a/11-extra/5-setimmediate/setimmediate.view/index.html b/11-extra/5-setimmediate/setimmediate.view/index.html
deleted file mode 100644
index a3e38af1..00000000
--- a/11-extra/5-setimmediate/setimmediate.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <script src="setImmediate.js"></script>
-</head>
-
-<body>
-
-  <button onclick="testTimeout()">testTimeout</button>
-  <button onclick="testImmediate()">testImmediate</button>
-
-  <script>
-    function testTimeout() {
-      var start = new Date();
-      var i = 0;
-      setTimeout(function go() {
-        i++;
-        if (i == 100) {
-          alert(new Date - start);
-        } else {
-          setTimeout(go, 0);
-        }
-      }, 0);
-    }
-
-    function testImmediate() {
-      var start = new Date();
-      var i = 0;
-      setImmediate(function go() {
-        i++;
-        if (i == 100) {
-          alert(new Date - start);
-        } else {
-          setImmediate(go);
-        }
-      });
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/5-setimmediate/setimmediate.view/setImmediate.js b/11-extra/5-setimmediate/setimmediate.view/setImmediate.js
deleted file mode 100644
index aa90843d..00000000
--- a/11-extra/5-setimmediate/setimmediate.view/setImmediate.js
+++ /dev/null
@@ -1,27 +0,0 @@
-if (!window.setImmediate) window.setImmediate = (function() {
-  var head = {},
-    tail = head; // очередь вызовов, 1-связный список
-
-  var ID = Math.random(); // уникальный идентификатор
-
-  function onmessage(e) {
-    if (e.data != ID) return; // не наше сообщение
-    head = head.next;
-    var func = head.func;
-    delete head.func;
-    func();
-  }
-
-  if (window.addEventListener) { // IE9+, другие браузеры
-    window.addEventListener('message', onmessage);
-  } else { // IE8
-    window.attachEvent('onmessage', onmessage);
-  }
-
-  return function(func) {
-    tail = tail.next = {
-      func: func
-    };
-    window.postMessage(ID, "*");
-  };
-}());
\ No newline at end of file
diff --git a/11-extra/6-bind-late/article.md b/11-extra/6-bind-late/article.md
deleted file mode 100644
index 07fd2028..00000000
--- a/11-extra/6-bind-late/article.md
+++ /dev/null
@@ -1,160 +0,0 @@
-# Позднее связывание "bindLate"
-
-Обычный метод `bind` называется "ранним связыванием", поскольку фиксирует привязку сразу же. 
-
-Как только значения привязаны -- они уже не могут быть изменены. В том числе, если метод объекта, который привязали, кто-то переопределит -- "привязанная" функция этого не заметит.
-
-Позднее связывание -- более гибкое, оно позволяет переопределить привязанный метод когда угодно.
-[cut]
-
-## Раннее связывание
-
-Например, попытаемся переопределить метод при раннем связывании:
-
-```js
-//+ run
-function bind(func, context) {  
-  return function() { 
-    return func.apply(context, arguments); 
-  };
-}
-
-var user = {                
-  sayHi: function() { alert('Привет!'); }
-}
-
-// привязали метод к объекту
-*!*
-var userSayHi = bind(user.sayHi, user);
-*/!*
-
-// понадобилось переопределить метод
-user.sayHi = function() { alert('Новый метод!'); }
-
-// будет вызван старый метод, а хотелось бы - новый!
-userSayHi(); // *!*выведет "Привет!"*/!*
-```
-
-...Привязка всё ещё работает со старым методом, несмотря на то что он был переопределён.
-
-## Позднее связывание
-
-При позднем связывании `bind` вызовет не ту функцию, которая была в `sayHi` на момент привязки, а ту, которая есть на момент вызова.**
-
-Встроенного метода для этого нет, поэтому нужно реализовать.
-
-Синтаксис будет таков:
-
-```js
-var func = bindLate(obj, "method");
-```
-
-<dl>
-<dt>`obj`</dt>
-<dd>Объект</dd>
-<dt>`method`</dt>
-<dd>Название метода (строка)</dd>
-</dl>
-
-Код:
-
-```js
-function bindLate(context, funcName) {
-  return function() {
-    return context[funcName].apply(context, arguments);
-  };
-}
-```
-
-Этот вызов похож на обычный `bind`, один из вариантов которого как раз и выглядит как `bind(obj, "method")`, но работает по-другому.
-
-**Поиск метода в объекте: `context[funcName]`, осуществляется при вызове, самой обёрткой**. 
-
-**Поэтому, если метод переопределили -- будет использован всегда последний вариант.**
-
-В частности, пример, рассмотренный выше, станет работать правильно:
-
-```js
-//+ run
-function bindLate(context, funcName) { 
-  return function() {
-    return context[funcName].apply(context, arguments);
-  };
-}
-
-var user = {
-  sayHi: function() { alert('Привет!'); }
-}
-
-*!*
-var userSayHi = bindLate(user, 'sayHi');
-*/!*
-
-user.sayHi = function() { alert('Здравствуйте!'); }
-
-userSayHi(); // *!*Здравствуйте!*/!*
-```
-
-## Привязка метода, которого нет
-
-Позднее связывание позволяет привязать к объекту даже метод, которого ещё нет!
-
-Конечно, предполагается, что к моменту вызова он уже будет определён ;).
-
-Например:
-
-```js
-//+ run
-function bindLate(context, funcName) { 
-  return function() {
-    return context[funcName].apply(context, arguments);
-  };
-}
-
-// *!*метода нет*/!*
-var user = {  };
-
-// *!*..а привязка возможна!*/!*
-*!*
-var userSayHi = bindLate(user, 'sayHi'); 
-*/!*
-
-// по ходу выполнения добавили метод..
-user.sayHi = function() { alert('Привет!'); }
-
-userSayHi(); // Метод работает: *!*Привет!*/!*
-```
-
-В некотором смысле, позднее связывание всегда лучше, чем раннее. Оно удобнее и надежнее, так как всегда вызывает нужный метод, который в объекте сейчас. 
-
-Но оно влечет и небольшие накладные расходы -- поиск метода при каждом вызове.
-
-## Итого
-
-*Позднее связывание* ищет функцию в объекте в момент вызова.
-
-Оно используется для привязки в тех случаях, когда метод *может быть переопределён* после привязки или *на момент привязки не существует*.
-
-Обёртка для позднего связывания (без карринга):
-
-```js
-function bindLate(context, funcName) {
-  return function() {
-    return context[funcName].apply(context, arguments);
-  };
-}
-```
-
-[head]
-<script>
-function bind(func, context /*, args*/) {
-  var bindArgs = [].slice.call(arguments, 2); // (1)
-  function wrapper() {                        // (2)
-    var args = [].slice.call(arguments); 
-    var unshiftArgs = bindArgs.concat(args);  // (3)
-    return func.apply(context, unshiftArgs);  // (4)
-  }
-  return wrapper;
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/11-extra/7-sublime/article.md b/11-extra/7-sublime/article.md
deleted file mode 100644
index 46891fef..00000000
--- a/11-extra/7-sublime/article.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Sublime Text: шпаргалка
-
-Одним из наиболее мощных, и при этом простых, редакторов является [Sublime Text](http://www.sublimetext.com/). 
-
-В нём хорошо развита система команд и горячих клавиш. На этой странице размещена "шпаргалка" с плагинами и самыми частыми сочетаниями клавиш, которые сильно упрощают жизнь. 
-
-[cut]
-
-## Горячие клавиши
-Для наибольшего удобства "шпаргалка" должна быть распечатана и повешена перед глазами, поэтому она сделана в виде 3-колоночного PDF.
-
-[Скачать шпаргалку в формате PDF](sheet.pdf)
-
-Эта шпаргалка -- под Mac, для Windows сочетания похожи, обычно вместо Mac-клавиши <code class="key">Cmd</code> под Windows будет <code class="key">Ctrl</code>. А если в сочетании есть и <code class="key">Cmd</code> и <code class="key">Ctrl</code>, то под Windows будет <code class="key">Ctrl</code> + <code class="key">Shift</code>.
-
-**Вы часто используете сочетание, но его нет в списке? Поделитесь им в комментариях!**
-
-## Плагины
-
-Мои любимые плагины:
-
-<ul>
-<li>Package Control</li>
-<li>sublime-emmet</li>
-<li>JsFormat</li>
-<li>SideBarEnhancements</li>
-<li>AdvancedNewFile</li>
-<li>sublime-jsdocs</li>
-<li>SublimeCodeIntel</li>
-</ul>
-
-Остальные:
-
-<ul>
-<li>Alignment</li>
-<li>CSSComb</li>
-<li>EncodingHelper</li>
-<li>GoToRecent</li>
-<li>HTML5</li>
-<li>jQuery</li>
-<li>Prefixr</li>
-<li>View In Browser</li>
-</ul>
-
-Чтобы узнать о плагине подробнее -- введите его название в Google.
-
-Есть и другие хорошие плагины, кроме перечисленных. Кроме того, Sublime позволяет легко писать свои плагины и команды. 
diff --git a/11-extra/7-sublime/sheet.pdf b/11-extra/7-sublime/sheet.pdf
deleted file mode 100644
index 42f4db54..00000000
Binary files a/11-extra/7-sublime/sheet.pdf and /dev/null differ
diff --git a/11-extra/8-range-textrange-selection/56.gif b/11-extra/8-range-textrange-selection/56.gif
deleted file mode 100644
index 67f0b78e..00000000
Binary files a/11-extra/8-range-textrange-selection/56.gif and /dev/null differ
diff --git a/11-extra/8-range-textrange-selection/57.gif b/11-extra/8-range-textrange-selection/57.gif
deleted file mode 100644
index 2aa3d374..00000000
Binary files a/11-extra/8-range-textrange-selection/57.gif and /dev/null differ
diff --git a/11-extra/8-range-textrange-selection/58.gif b/11-extra/8-range-textrange-selection/58.gif
deleted file mode 100644
index 4746e2c9..00000000
Binary files a/11-extra/8-range-textrange-selection/58.gif and /dev/null differ
diff --git a/11-extra/8-range-textrange-selection/article.md b/11-extra/8-range-textrange-selection/article.md
deleted file mode 100644
index 1f53f9b1..00000000
--- a/11-extra/8-range-textrange-selection/article.md
+++ /dev/null
@@ -1,428 +0,0 @@
-# Выделение: Range, TextRange и Selection
-
-В этой статье речь пойдет о документированных, но нечасто используемых объектах `Range`, `TextRange` и `Selection`. Мы рассмотрим вольный перевод спецификаций с понятными примерами и различные кроссбраузерные реализации.
-
-Эта статья представляет собой обновлённый вариант статьи Александра Бурцева, которой уже нет онлайн. Публикуется с его разрешения, спасибо, Александр!
-[cut]
-## Range
-
-`Range`. -- это объект, соответствующий фрагменту документа, который может включать узлы и участки текста из этого документа. Наиболее подробно объект `Range` описан в спецификации [DOM Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html).
-
-Чтобы понять о чем речь, обратимся к самому простому случаю  `Range`, который будет подробно рассмотрен ниже -- к выделениям. В приводимом ниже примере выделите несколько слов в предложении. Будет выводиться текстовое содержимое выделяемой области:
-
-<div id="demo-mix" onmouseup="alert($selection.getText())" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
-  Соберем микс из <b>жирности</b>, <em>курсива</em> и <a href="#">ссылки</a> и повыделяем здесь.
-</div>
-
-
-Но такие области можно создавать не только с помощью пользовательского выделения, но и из JavaScript-сценария, выполняя с ними определенные манипуляции. Однако, написать простой иллюстрирующий код сразу не выйдет, т.к. есть одно НО -- Internet Explorer до версии 9. В Microsoft создали собственную реализацию -- [объект TextRange](http://msdn.microsoft.com/en-us/library/ms535872.aspx). Разбёрем каждую реализацию по-отдельности.
-
-### DOM-реализация Range (кроме IE8-)
-
-`Range` состоит из двух граничных точек (boundary-points), соответствующих началу и концу области. Позиция любой граничной точки определяется в документе с помощью двух свойств: узел (node) и смещение (offset).
-
-Контейнером (container) называют узел, содержащий граничную точку. Сам контейнер и все его предки называются родительскими контейнерами (ancestor containers) для граничной точки. Родительский контейнер, включающий обе граничные точки, называют корневым контейнером (root container).
-
-<img src="57.gif">
-
-На изображении выше граничные точки выделения лежат в текстовых узлах (`#text1` и `#text2`), которые являются контейнерами. Для левой границы родительскими контейнерами являются `#text1`, `H1`, `BODY`, для правой -- `#text2`, `P`, `BODY`. Общий родитель для обоих граничных точек -- `BODY`, этот элемент является корневым контейнером.
-
-Если контейнер является текстовым узлом, то смещение определяется в символах от начала DOM-узла. Если контейнер является элементом (`Document`, `DocumentFragment`, `Element`...), то смещение определяется в дочерних узлах.
-
-Смотрим на иллюстрацию ([источник](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#td-boundarypoint)):
-
-<img src="56.gif" alt="Пример Range">
-
-Граничные точки объекта `Range` <span style="color:green; font-weight:bold;">s1</span> лежат в текстовых узлах, поэтому смещение задается в символах от начала узла. Для <span style="color:red; font-weight:bold;">s2</span> граничные точки расставлены так, что включают весь абзац &lt;p&gt;Blah xyz&lt;/p&gt;, поэтому контейнером является элемент `BODY`, и смещение считается в позициях дочерних узлов.
-
-Объекты `Range` создаются с помощью вызова `document.createRange()`. Объект при этом создается пустой, и граничные точки нужно задать далее его методами `setStart` и `setEnd`. Смотрим пример.
-
-HTML:
-
-```html
-<div id="ex2">
-  <h2>Соз|даем объект Range</h2>
-  <p>От третье|го символа заголовка до десятого символа это абзаца.</p>
-</div>
-
-<button onclick="alert(domRangeCreate())">
-  Создать Range и вывести его текст
-</button>
-
-<script>
-  function domRangeCreate() {
-    // Найдем корневой контейнер
-    var root = document.getElementById('ex2');
-    // Найдем контейнеры граничных точек (в данном случае тестовые)
-    var start = root.getElementsByTagName('h2')[0].firstChild;
-    var end = root.getElementsByTagName('p')[0].firstChild;
-    if (root.createRange) {
-      // Создаем Range
-      var rng = root.createRange();
-      // Задаем верхнюю граничную точку, передав контейнер и смещение
-      rng.setStart(start, 3);
-      // Аналогично для нижней границы
-      rng.setEnd(end, 10);
-      // Теперь мы можем вернуть текст, который содержится в полученной области
-      return rng.toString();
-    } else {
-      return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже';
-    }
-  }
-</script>
-```
-
-<p>В действии:</p>
-
-[iframe border="1" src="domRangeCreate" edit link]
-
-<p>Рассмотрим вкратце [свойства и методы Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Interface):</p>
-
-<ul>
-  <li>Свойство `commonAncestorContainer` вернет ссылку на наиболее вложенный корневой контейнер.</li>
-  <li>Свойство `startContainer` (`endContainer`) вернет ссылку на контейнер верхней (нижней) граничной точки.</li>
-  <li>Свойство `startOffset` (`endOffset`) вернет смещение для верхней (нижней) граничной точки.</li>
-  <li>Свойство `collapsed` вернет `true`, если граничные точки имеют одинаковые контейнеры и смещение (`false` в противном случае).</li>
-</ul>
-
-<ul>
-  <li>Метод `setStart` (`setEnd`) задает контейнер (ссылка на узел) и смещение (целочисленное значение) для соответствующих граничных точек. Пример выше.</li>
-  <li>Методы `setStartBefore`, `setStartAfter`, `setEndBefore`, `setEndAfter` принимают в качестве единственного аргумента ссылку на узел и устанавливают граничные точки в соот-ии с естественной границей переданного узла. Например:
-
-```html
-<span id="s1">First</span>
-<span id="s2">Second</span>
-```
-
-
-
-```js
-var rng = document.createRange();
-// Установит верхнюю граничную точку по левой границе спана #s1
-rng.setStartBefore(document.getElementById('s1'));
-// Установит нижнюю граничную точку по правой границе спана #s2
-rng.setEndAfter(document.getElementById('s2'));
-```
-
-</li>
-  <li>Методы `selectNode` и `selectNodeContents` позволяют создать объект `Range` по границам узла, ссылку на который они принимают в качестве единственного аргумента. При использовании `selectNode` передаваемый узел также войдет в `Range`, в то время как `selectNodeContents` создаст объект только из содержимого узла:
-
-<img src="58.gif">
-</li>
-  <li>Метод `collapse` объединяет граничные точки объекта `Range`. В качестве единственного аргумента принимает булево значение (`true` -- для объединения в верхней точке, `false` -- в нижней). По-умолчанию `true`.</li>
-  <li>Метод `toString` вернет текстовое содержимое объекта `Range`.</li>
-  <li>Метод `cloneContents` вернет копию содержимого объекта `Range` в виде фрагмента документа.</li>
-  <li>Метод `cloneRange` вернет копию самого объекта `Range`.</li>
-  <li>Метод `deleteContents` удаляет всё содержимое объекта `Range`.</li>
-  <li>Метод `detach` извлекает текущий объект из DOM, так что на него больше нельзя сослаться.</li>
-  <li>Метод `insertNode` принимает в качестве единственного аргумента ссылку на узел (или фрагмент документа) и вставляет его в содержимое объекта `Range` в начальной точке.</li>
-  <li>Метод `extractContents` вырезает содержимое объекта `Range` и возвращает ссылку на полученный фрагмент документа.</li>
-  <li>Метод `surroundContents` помещает всё содержимое текущего объекта `Range` в новый родительский элемент, ссылка на который принимается в качестве единственного аргумента.</li>
-  <li>Метод `compareBoundaryPoints` используется для сравнения граничных точек.</li>
-</ul>
-
-Для примера решим небольшую задачку. Найдём в текстовом узле фразу и подсветим её синим фоном.
-
-```html
-<div id="ex3">
-  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
-</div>
-
-<script>
-  function domRangeHighlight(text) {
-    // Получим текстовый узел
-    var root = document.getElementById('ex3').firstChild;
-    // и его содержимое
-    var content = root.nodeValue;
-    // Проверим есть ли совпадения с переданным текстом
-    if (~content.indexOf(text)) {
-      if (document.createRange) {
-        // Если есть совпадение, и браузер поддерживает Range, создаем объект
-        var rng = document.createRange();
-        // Ставим верхнюю границу по индексу совпадения,
-        rng.setStart(root, content.indexOf(text));
-        // а нижнюю по индексу + длина текста
-        rng.setEnd(root, content.indexOf(text) + text.length);
-        // Создаем спан с синим фоном
-        var highlightDiv = document.createElement('span');
-        highlightDiv.style.backgroundColor = 'blue';
-        // Обернем наш Range в спан
-        rng.surroundContents(highlightDiv);
-      } else {
-        alert( 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже' );
-      }
-    } else {
-      alert( 'Совпадений не найдено' );
-    }
-  }
-</script>
-```
-
-В действии:
-
-[codetabs src="domRangeHighlight"]
-
-С остальными свойствами и методами поэкспериментируйте сами. Перейдем к реализации range в IE.
-
-### TextRange (для IE)
-
-Объект `TextRange` в реализации MSIE -- это текстовый диапазон нулевой и более длины. У данного диапазона также есть свои границы, "перемещать" которые можно на целое число текстовых единиц: character(символ), word (слово), sentence (предложение). То есть можно взять и сдвинуть границу на 2(5, 8 и т.д.) слова (символа, предложения) вправо (влево). При этом у объекта сохраняются данные о HTML-содержимом диапазона и есть методы взаимодействия с DOM.
-
-Объект `TextRange` создается с помощью метода `createTextRange`, который можно вызывать в контексте элементов `BODY`, `BUTTON`, `INPUT` (большинство типов), `TEXTAREA`.
-
-Простой пример с кнопкой:
-
-```html
-<!--+ autorun -->
-<input id="buttonId" type="button" value="Test button" onclick="alert( ieTextRangeCreate() );" />
-
-<script>
-  function ieTextRangeCreate() {
-    // Найдем кнопку
-    var button = document.getElementById('buttonId');
-    // Если мы в ИЕ
-    if (button.createTextRange && button.createTextRange() != undefined) {
-      // Создаем TextRange
-      var rng = button.createTextRange();
-      // И вернем текстовое содержимое полученного объекта
-      return rng.text;
-    } else {
-      return 'Вероятно, у вас не IE, смотрите реализацию Range выше';
-    }
-  }
-</script>
-```
-
-Рассмотрим [свойства и методы объекта TextRange](http://msdn.microsoft.com/en-us/library/ms535872.aspx) (не все, только самые необходимые):
-
-<ul>
-  <li>Свойство `boundingWidth` (boundingHeight) вернет ширину (высоту), которую занимает объект TextRange в пикселях.</li>
-  <li>Свойство `boundingTop` (`boundingLeft`) вернет Y(X)-координату верхнего левого угла тестовой области относительно окна документа.</li>
-  <li>Свойство `htmlText` вернет HTML-содержимое объекта.</li>
-  <li>Свойство `text` вернет текстовое содержимое объекта (см. пример выше).</li>
-  <li>Свойство `offsetTop` (`offsetLeft`) вернет Y(X)-координату верхнего левого угла тестовой области относительно предка.</li>
-</ul>
-
-<ul>
-  <li>Метод `collapse` объединяет граничные точки диапазона. В качестве единственного аргумента принимает булево значение (`true` -- для объединения в верхней точке, `false` -- в нижней). По-умолчанию true.</li>
-  <li>Метод `duplicate` клонирует имеющийся текстовый диапазон, возвращая новый, точно такой же.</li>
-  <li>Метод `expand` расширяет текущий тектовый диапазон до единицы текста, переданной в качестве единственного текстового аргумента:
-  <ul>
-  <li>`"character'` -- символ.</li>
-  <li>`"word"` -- слово</li>
-  <li>`"sentence"` -- предложение</li>
-  <li>`"textedit"` -- сворачивает до первоначального диапазона.
-</ul>
-  Вернет `true` (`false`) в случае успеха (неудачи).
-  </li>
-  <li>Метод `findText` ищет в диапазоне совпадения с текстовой строкой, передаваемой в качестве первого аргумента (без учета регистра). Если совпадение найдено, то границы диапазона сворачиваются до него. В качестве второго (необязательного) аргумента можно передать целое число, указывающее число символов от верхней точки, в которых нужно производить поиск. Далее в качестве аргументов можно перечислять INT-флаги, которые вам [вряд ли понадобятся](http://msdn.microsoft.com/en-us/library/ms536422.aspx).</li>
-  <li>Метод `getBookmark` возвращает в случае успешного вызова строку, по которой можно будет восстановить текущее состояние текстового диапазона с помощью метода `moveToBookmark`.</li>
-  <li>Метод `inRange` принимает в качестве аргумента другой `TextRange` и проверяет, входит ли его текстовый диапазон в диапазон контекстного объекта. Возвращает булево значение.</li>
-  <li>Метод `isEqual` проверяет является ли текущий `TextRange` идентичным переданному в качестве аргумента. Возвращает булево значение.</li>
-  <li>Метод `move(sUnit [, iCount])` сворачивает текущий диапазон до нулевой длины и передвигает на единицу текста, переданного в качестве первого аргумента (character | word | sentence | textedit). В качестве второго (необязательного) аргумента можно передать число единиц, на которое следует передвинуть диапазон.</li>
-  <li>Метод `moveEnd` (`moveStart`), аналогично методу move, передвигает верхнюю (нижнюю) границу диапазона на единицу текста, число которых также можно задать необязательным вторым параметром.</li>
-  <li>Метод `moveToElementText` принимает в качестве аргумента ссылку на DOM-элемент и выставляет границы диапазона Textобъекта `Range` по границам полученного элемента.</li>
-  <li>Метод `moveToPoint` принимает в качестве двух обязательных аргументов X и Y-координаты (в пикселях) относительно верхнего левого угла документа и переносит границы диапазона туда.</li>
-  <li>Метод `parentElement` вернет ссылку на элемент, который полностью содержит диапазон объекта `TextRange` (или `null`).</li>
-  <li>Метод `pasteHTML` заменяет HTML-содержимое текущего текстового диапазона на строку, переданную в качестве единственного аргумента.</li>
-  <li>Метод `select` формирует выделение на основе содержимого объекта `TextRange`, о чем мы подробнее поговорим ниже.</li>
-  <li>Метод `setEndPoint` принимает в качестве обязательных аргументов текстовый указатель и ссылку на другой `TextRange`, устанавливая в зависимости от значения указателя границы диапазона. Указатели могут быть следующими: 'StartToEnd', 'StartToStart', 'EndToStart', 'EndToEnd'.</li>
-</ul>
-
-Также к `TextRange` применимы команды [метода execCommand](http://msdn.microsoft.com/en-us/library/ms536419%28v=vs.85%29.aspx), который умеет делать текст жирным, курсивным, копировать его в буфер обмена (только IE) и т.п.
-
-Для закрепления сделаем задачку по поиску текстового содержимого, аналогичную той, что была выше:
-
-```html
-<div id="ex4">
-  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
-</div>
-
-<script>
-  function ieTextRangeHighlight(text) {
-    // Получим ссылку на элемент, в котором будет происходить поиск
-    var root = document.getElementById('ex4');
-    // Получим значение его текстового потомка
-    var content = root.firstChild.nodeValue;
-    // Если есть совпадение
-    if (~content.indexOf(text)) {
-      // и мы в MSIE
-      if (document.body.createTextRange) {
-        // Создадим объект TextRange
-        var rng = document.body.createTextRange();
-        // Свернем его до root
-        rng.moveToElementText(root);
-        // Найдем текст и свернем диапазон до него
-        if (rng.findText(text))
-        // Заменим текстовый фрагмент на span с синим фоном
-          rng.pasteHTML('<span style="background:blue;">' + text + '</span>');
-      } else {
-        alert( 'Вероятно, у вас не  IE, смотрите реализацию Range выше' );
-      }
-    } else {
-      alert( 'Совпадений не найдено' );
-    }
-  }
-</script>
-```
-
-В действии:
-
-[codetabs border="1" src="ieTextRangeHighlight"]
-
-С остальными свойствами и методами поэкспериментируйте сами.
-
-## Selection
-
-Всем знакомо выделение элементов на странице, когда, зажав левую кнопку мыши и передвигая курсор, мы выделяем нужный фрагмент. Или зажимаем Shift и жмём на стрелочки клавиатуры. Или еще как-то, неважно. В данной части статьи мы кроссбраузерно научимся решать две задачи: получать пользовательское выделение и устанавливать собственное.
-
-### Получаем пользовательское выделение
-
-Эту задачу мы уже решали в самом начале статьи <a href="#demo-mix">в примере с миксом</a>. Теперь рассмотрим код:
-
-```js
-//+ no-beautify
-function getSelectionText() {
-  var txt = '';
-  if (txt = window.getSelection) // Не IE, используем метод getSelection
-    txt = window.getSelection().toString();
-  } else { // IE, используем объект selection
-    txt = document.selection.createRange().text;
-  }
-  return txt;
-}
-```
-
-Все браузеры, кроме IE8- поддерживают метод `window.getSelection()`, который возвращает объект, схожий с рассмотренным ранее `Range`. У этого объекта есть точка начала выделения (anchor) и фокусная точка окончания (focus). Точки могут совпадать. Рассмотрим свойства и методы объекта `Selection`:
-
-<ul>
-  <li>Свойство `anchorNode` вернет контейнер, в котором начинается выделение. Замечу, что началом выделения считается та граница, от которой вы начали выделение. То есть, если вы выделяете справа налево, то началом будет именно правая граница. Это правило работает везде, кроме браузера Opera, в котором `anchorNode` вернет ссылку на узел левого края выделения.</li>
-  <li>Свойство `anchorOffset` вернет смещение для начала выделения в пределах контейнера `anchorNode`.</li>
-  <li>Свойства `focusNode` и `focusOffset` работают аналогично для фокусных точек, то есть точек окончания выделения. Opera и здесь отличилась, возвращает вместо фокусной точки узел правого края выделения.</li>
-  <li>Свойство `rangeCount` возвращает число объектов `Range`, которые входят в полученное выделение. Это свойство полезно при использовании метода `addRange`.</li>
-</ul>
-
-<ul>
-  <li>Метод `getRangeAt` принимает в качестве аргумента индекс объекта `Range` и возвращает сам объект. Если `rangeCount == 1`, то работать будет только `getRangeAt(0)`. Таким образом, мы можем получить объект `Range`, полностью соответствующий текущему выделению.</li>
-  <li>Метод `collapse` сворачивает выделение в точку (каретку). Методу можно передать в качестве первого аргумента узел, в который нужно поместить каретку.</li>
-  <li>Метод `extend` принимает в качестве аргументов ссылку на контейнер и смещение (`parentNode`, `offset`), и перемещает фокусную точку в это положение.</li>
-  <li>Метод `collapseToStart` (`collapseToEnd`) перемещает фокусную (начальную) границу к начальной (фокусной), тем самым сворачивая выделение в каретку.</li>
-  <li>Метод `selectAllChildren` принимает в качестве единственного аргумента ссылку на узел и добавляет всех его потомков в выделение.</li>
-  <li>Метод `addRange` принимает в качестве аргумента объект `Range` и добавляет его в выделение. Таким образом можно увеличить количество объектов `Range`, число которых нам подскажет свойство `rangeCount`.</li>
-  <li>Метод `removeRange` (`removeAllRanges`) удаляет переданный (все) объект `Range` из выделения.</li>
-  <li>Метод `toString` вернет текстовое содержимое выделения.</li>
-</ul>
-
-
-IE предоставляет собственный интерфейс взаимодействия с выделениями -- объект `selection` в контексте document. Для работы с этим объектом используются следующие методы:
-
-<ul>
-  <li>Метод `clear` убирает выделение вместе с содержимым.</li>
-  <li>Метод `createRange` (ВАЖНО! Не путать со стандартным методом `document.createRange()` для создания объектов `Range`!) создает из содержимого выделения `TextRange`.</li>
-  <li>Метод `empty` убирает выделение, но оставляет содержимое.</li>
-</ul>
-
-Надеюсь, теперь, после знакомства с обеими реализациями выделений, код выше стал более понятен.
-
-### Установка собственного выделения
-
-Допустим, вам хочется, чтобы какой-то текстовый фрагмент на странице был выделен, как пользовательское выделение. Это нужно при клиентской реализации поиска по странице и некоторых других задач. 
-
-Проще всего решить эту задачу следующим образом:
-
-<ol>
-  <li>Создать объект `Range` (`TextRange` для IE8-).</li>
-  <li>Перевести полученный объект в выделение.</li>
-</ol>
-
-Смотрим реализацию:
-
-```html
-<div id="ex5">
-  Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
-</div>
-
-<script>
-  function setSelection() {
-    var target = document.getElementById('ex5').getElementsByTagName('span')[0];
-    var rng, sel;
-    if (document.createRange) {
-      rng = document.createRange();
-      rng.selectNode(target)
-      sel = window.getSelection();
-      sel.removeAllRanges();
-      sel.addRange(rng);
-    } else {
-      var rng = document.body.createTextRange();
-      rng.moveToElementText(target);
-      rng.select();
-    }
-  }
-</script>
-```
-
-В действии:
-[codetabs border="1" src="setSelection"]
-
-## Снятие выделения
-
-Код для снятия выделения, использующий соответствующие методы объектов `Selection`:
-
-```js
-function clearSelection() {
-  try {
-    // современный объект Selection
-    window.getSelection().removeAllRanges();
-  } catch (e) {
-    // для IE8-
-    document.selection.empty();
-  }
-}
-```
-
-## Итого
-
-<ul>
-<li>В современных браузерах поддерживается стандартный объект [Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html)
-</li>
-<li>В IE8- поддерживается только собственный объект [TextRange](http://help.dottoro.com/ljgbbkjf.php).</li>
-</ul>
-
-Есть библиотеки, которые "исправляют" объект `TextRange`, добавляя ему нужные свойства из `Range`. 
-
-Код, получающий выделение, при использовании такой библиотеки может выглядеть так:
-
-```js
-  var range = getRangeObject();
-  if (range) {
-    alert( range );
-    alert( range.startContainer.nodeValue );
-    alert( range.startOffset );
-    alert( range.endOffset );
-  } else {
-    alert( 'Ничего не выделено' );
-  }
-  }
-```
-
-В действии:
-[codetabs border="1" src="fix-ie"]
-
-Код функций `getRangeObject(win)` для получения выделения в окне и `fixIERangeObject(range, win)` для исправления `TextRange` -- [edit src="fix-ie"]в песочнице вместе с этим примером[/edit]. 
-
-[head]
-<script>
-
-window.$selection = {
-	getText : function() {
-		var txt = '';
-		if (txt = window.getSelection) {
-			txt = window.getSelection().toString();
-		} else {
-			txt = document.selection.createRange().text;
-		}
-		return txt;
-	}
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/domRangeCreate.view/index.html b/11-extra/8-range-textrange-selection/domRangeCreate.view/index.html
deleted file mode 100644
index 54050cf1..00000000
--- a/11-extra/8-range-textrange-selection/domRangeCreate.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <div id="ex2" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
-    <h2 style="color:#333; margin:0; padding:0 0 7px 0; font:bold 15px Arial;">Соз|даем Range-объект</h2>
-    <p style="color:#333; margin:0; font:13px Arial;">От третье|го символа заголовка до десятого символа это абзаца.</p>
-  </div>
-
-  <button onclick="alert(domRangeCreate())">Создать Range и вывести его текст</button>
-
-  <script>
-    function domRangeCreate() {
-      // Найдем корневой контейнер
-      var root = document.getElementById('ex2');
-      // Найдем контейнеры граничных точек (в данном случае тестовые)
-      var start = root.getElementsByTagName('h2')[0].firstChild;
-      var end = root.getElementsByTagName('p')[0].firstChild;
-      if (document.createRange) {
-        // Создаем Range
-        var rng = document.createRange();
-        // Задаем верхнюю граничную точку, передав контейнер и смещение
-        rng.setStart(start, 3);
-        // Аналогично для нижней границы
-        rng.setEnd(end, 10);
-        // Теперь мы можем вернуть текст, который содержится в полученной области
-        return rng.toString();
-      } else {
-        return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже';
-      }
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/domRangeHighlight.view/index.html b/11-extra/8-range-textrange-selection/domRangeHighlight.view/index.html
deleted file mode 100644
index e7b6d9b5..00000000
--- a/11-extra/8-range-textrange-selection/domRangeHighlight.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
-    Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
-  </div>
-  <div>
-    <input onclick="domRangehighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
-  </div>
-  <script>
-    function domRangehighlight(text) {
-      var root = document.getElementById('ex3').firstChild;
-      var content = root.nodeValue;
-      if (~content.indexOf(text)) {
-        if (document.createRange) {
-          var rng = document.createRange();
-          rng.setStart(root, content.indexOf(text));
-          rng.setEnd(root, content.indexOf(text) + text.length);
-          var highlightDiv = document.createElement('span');
-          highlightDiv.style.backgroundColor = 'blue';
-          rng.surroundContents(highlightDiv);
-        } else
-          alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже');
-      } else
-        alert('Совпадений не найдено');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js b/11-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js
deleted file mode 100644
index 7137ab3c..00000000
--- a/11-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
-  This code is to fix Microsoft TextRange object (IE8 and below), to give equivalent of
-  HTML5 Range object's startContainer,startOffset,endContainer and endOffset properties.
-
-  Originally from: https://gist.github.com/1115251 (Munnawwar)
-*/
-
-/**
- * @param {window object} [win] Optional prameter. You could send an IFrame.contentWindow too.
- */
-function fixIERangeObject(range, win) { //Only for IE8 and below.
-  win = win || window;
-
-  if (!range) return null;
-  if (!range.startContainer && win.document.selection) { //IE8 and below
-
-    var _findTextNode = function(parentElement, text) {
-      //Iterate through all the child text nodes and check for matches
-      //As we go through each text node keep removing the text value (substring) from the beginning of the text variable.
-      var container = null,
-        offset = -1;
-      for (var node = parentElement.firstChild; node; node = node.nextSibling) {
-        if (node.nodeType == 3) { //Text node
-          var find = node.nodeValue;
-          var pos = text.indexOf(find);
-          if (pos == 0 && text != find) { //text==find is a special case
-            text = text.substring(find.length);
-          } else {
-            container = node;
-            offset = text.length - 1; //Offset to the last character of text. text[text.length-1] will give the last character.
-            break;
-          }
-        }
-      }
-      //Debug Message
-      //alert(container.nodeValue);
-      return {
-        node: container,
-        offset: offset
-      }; //nodeInfo
-    }
-
-    var rangeCopy1 = range.duplicate(),
-      rangeCopy2 = range.duplicate(); //Create a copy
-    var rangeObj1 = range.duplicate(),
-      rangeObj2 = range.duplicate(); //More copies :P
-
-    rangeCopy1.collapse(true); //Go to beginning of the selection
-    rangeCopy1.moveEnd('character', 1); //Select only the first character
-    rangeCopy2.collapse(false); //Go to the end of the selection
-    rangeCopy2.moveStart('character', -1); //Select only the last character
-
-    //Debug Message
-    // alert(rangeCopy1.text); //Should be the first character of the selection
-    var parentElement1 = rangeCopy1.parentElement(),
-      parentElement2 = rangeCopy2.parentElement();
-
-    //If user clicks the input button without selecting text, then moveToElementText throws an error.
-    if (parentElement1 instanceof HTMLInputElement || parentElement2 instanceof HTMLInputElement) {
-      return null;
-    }
-    rangeObj1.moveToElementText(parentElement1); //Select all text of parentElement
-    rangeObj1.setEndPoint('EndToEnd', rangeCopy1); //Set end point to the first character of the 'real' selection
-    rangeObj2.moveToElementText(parentElement2);
-    rangeObj2.setEndPoint('EndToEnd', rangeCopy2); //Set end point to the last character of the 'real' selection
-
-    var text1 = rangeObj1.text; //Now we get all text from parentElement's first character upto the real selection's first character
-    var text2 = rangeObj2.text; //Here we get all text from parentElement's first character upto the real selection's last character
-
-    var nodeInfo1 = _findTextNode(parentElement1, text1);
-    var nodeInfo2 = _findTextNode(parentElement2, text2);
-
-    //Finally we are here
-    range.startContainer = nodeInfo1.node;
-    range.startOffset = nodeInfo1.offset;
-    range.endContainer = nodeInfo2.node;
-    range.endOffset = nodeInfo2.offset + 1; //End offset comes 1 position after the last character of selection.
-  }
-  return range;
-}
-
-function getRangeObject(win) { //Gets the first range object
-  win = win || window;
-  if (win.getSelection) { // Firefox/Chrome/Safari/Opera/IE9
-    try {
-      return win.getSelection().getRangeAt(0); //W3C DOM Range Object
-    } catch (e) { /*If no text is selected an exception might be thrown*/ }
-  } else if (win.document.selection) { // IE8
-    var range = win.document.selection.createRange(); //Microsoft TextRange Object
-    return fixIERangeObject(range, win);
-  }
-  return null;
-}
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/fix-ie.view/index.html b/11-extra/8-range-textrange-selection/fix-ie.view/index.html
deleted file mode 100644
index 189ceddf..00000000
--- a/11-extra/8-range-textrange-selection/fix-ie.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="fixIERangeObject.js"></script>
-
-  <script>
-    function test() {
-
-      var range = getRangeObject();
-      if (range) {
-        alert(range);
-        alert(range.startContainer.nodeValue);
-        alert(range.startOffset);
-        alert(range.endOffset);
-      } else {
-        alert('Сначала выделите текст');
-      }
-    }
-  </script>
-</head>
-
-<body>
-  Выделите текст:
-  <pre>The quick brown fox jumped over the lazy dog</pre>
-  <input type="button" value="Вывести выделение и свойства startContainer, startOffset, endOffset" onclick="test();" />
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html b/11-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html
deleted file mode 100644
index 8a8fd8df..00000000
--- a/11-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
-    Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
-  </div>
-  <div>
-    <input onclick="ieTextRangeHighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
-  </div>
-  <script>
-    function ieTextRangeHighlight(text) {
-      var root = document.getElementById('ex4');
-      var content = root.firstChild.nodeValue;
-      if (~content.indexOf(text)) {
-        if (document.body.createTextRange) {
-          var rng = document.body.createTextRange();
-          rng.moveToElementText(root);
-          if (rng.findText(text))
-            rng.pasteHTML('<span style="background:blue;">' + text + '</span>');
-        } else
-          alert('Вероятно, у вас не IE, смотрите реализацию Range выше');
-      } else
-        alert('Совпадений не найдено');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/8-range-textrange-selection/setSelection.view/index.html b/11-extra/8-range-textrange-selection/setSelection.view/index.html
deleted file mode 100644
index ef81a498..00000000
--- a/11-extra/8-range-textrange-selection/setSelection.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
-    Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
-  </div>
-  <div>
-    <input onclick="setSelection()" type="button" value="Выделить бабулю">
-  </div>
-  <script>
-    function setSelection() {
-      var target = document.getElementById('ex5').getElementsByTagName('span')[0];
-      var rng, sel;
-      if (document.createRange) {
-        rng = document.createRange();
-        rng.selectNode(target)
-        sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(rng);
-      } else {
-        var rng = document.body.createTextRange();
-        rng.moveToElementText(target);
-        rng.select();
-      }
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/DragAvatar.js b/11-extra/9-drag-and-drop-plus/DragAvatar.js
deleted file mode 100644
index 66752b6e..00000000
--- a/11-extra/9-drag-and-drop-plus/DragAvatar.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * "Аватар" - элемент, который перетаскивается.
- *
- * В простейшем случае аватаром является сам переносимый элемент
- * Также аватар может быть клонированным элементом
- * Также аватар может быть иконкой и вообще чем угодно.
- */
-function DragAvatar(dragZone, dragElem) {
-  /** "родительская" зона переноса */
-  this._dragZone = dragZone;
-
-  /**
-   * подэлемент родительской зоны, к которому относится аватар
-   * по умолчанию - элемент, соответствующий всей зоне
-   * может быть уточнен в initFromEvent
-   */
-  this._dragZoneElem = dragElem;
-
-  /**
-   * Сам элемент аватара, который будет носиться по экрану.
-   * Инициализуется в initFromEvent
-   */
-  this._elem = dragElem;
-}
-
-/**
- * Инициализовать this._elem и позиционировать его
- * При необходимости уточнить this._dragZoneElem
- * @param downX Координата X нажатия мыши
- * @param downY Координата Y нажатия мыши
- * @param event Текущее событие мыши
- */
-DragAvatar.prototype.initFromEvent = function(downX, downY, event) {
-  /* override */
-};
-
-/**
- * Возвращает информацию о переносимом элементе для DropTarget
- * @param event
- */
-DragAvatar.prototype.getDragInfo = function(event) {
-  // тут может быть еще какая-то информация, необходимая для обработки конца или процесса переноса
-  return {
-    elem: this._elem,
-    dragZoneElem: this._dragZoneElem,
-    dragZone: this._dragZone
-  };
-};
-
-/**
- * Возвращает текущий самый глубокий DOM-элемент под this._elem
- * Приватное свойство _currentTargetElem обновляется при каждом передвижении
- */
-DragAvatar.prototype.getTargetElem = function() {
-  return this._currentTargetElem;
-};
-
-/**
- * При каждом движении мыши перемещает this._elem
- * и записывает текущий элемент под this._elem в _currentTargetElem
- * @param event
- */
-DragAvatar.prototype.onDragMove = function(event) {
-  this._elem.style.left = event.pageX - this._shiftX + 'px';
-  this._elem.style.top = event.pageY - this._shiftY + 'px';
-
-  this._currentTargetElem = getElementUnderClientXY(this._elem, event.clientX, event.clientY);
-};
-
-/**
- * Действия с аватаром, когда перенос не удался
- * Например, можно вернуть элемент обратно или уничтожить
- */
-DragAvatar.prototype.onDragCancel = function() {
-  /* override */
-};
-
-/**
- * Действия с аватаром после успешного переноса
- */
-DragAvatar.prototype.onDragEnd = function() {
-  /* override */
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/DragManager.js b/11-extra/9-drag-and-drop-plus/DragManager.js
deleted file mode 100644
index a4db4468..00000000
--- a/11-extra/9-drag-and-drop-plus/DragManager.js
+++ /dev/null
@@ -1,120 +0,0 @@
-var dragManager = new function() {
-
-  var dragZone, avatar, dropTarget;
-  var downX, downY;
-
-  var self = this;
-
-  function onMouseDown(e) {
-
-    if (e.which != 1) { // не левой кнопкой
-      return false;
-    }
-
-    dragZone = findDragZone(e);
-
-    if (!dragZone) {
-      return;
-    }
-
-    // запомним, что элемент нажат на текущих координатах pageX/pageY
-    downX = e.pageX;
-    downY = e.pageY;
-
-    return false;
-  }
-
-  function onMouseMove(e) {
-    if (!dragZone) return; // элемент не зажат
-
-    if (!avatar) { // элемент нажат, но пока не начали его двигать
-      if (Math.abs(e.pageX - downX) < 3 && Math.abs(e.pageY - downY) < 3) {
-        return;
-      }
-      // попробовать захватить элемент
-      avatar = dragZone.onDragStart(downX, downY, e);
-
-      if (!avatar) { // не получилось, значит перенос продолжать нельзя
-        cleanUp(); // очистить приватные переменные, связанные с переносом
-        return;
-      }
-    }
-
-    // отобразить перенос объекта, перевычислить текущий элемент под курсором
-    avatar.onDragMove(e);
-
-    // найти новый dropTarget под курсором: newDropTarget
-    // текущий dropTarget остался от прошлого mousemove
-    // *оба значения: и newDropTarget и dropTarget могут быть null
-    var newDropTarget = findDropTarget(e);
-
-    if (newDropTarget != dropTarget) {
-      // уведомить старую и новую зоны-цели о том, что с них ушли/на них зашли
-      dropTarget && dropTarget.onDragLeave(newDropTarget, avatar, e);
-      newDropTarget && newDropTarget.onDragEnter(dropTarget, avatar, e);
-    }
-
-    dropTarget = newDropTarget;
-
-    dropTarget && dropTarget.onDragMove(avatar, e);
-
-    return false;
-  }
-
-  function onMouseUp(e) {
-
-    if (e.which != 1) { // не левой кнопкой
-      return false;
-    }
-
-    if (avatar) { // если уже начали передвигать
-
-      if (dropTarget) {
-        // завершить перенос и избавиться от аватара, если это нужно
-        // эта функция обязана вызвать avatar.onDragEnd/onDragCancel
-        dropTarget.onDragEnd(avatar, e);
-      } else {
-        avatar.onDragCancel();
-      }
-
-    }
-
-    cleanUp();
-  }
-
-  function cleanUp() {
-    // очистить все промежуточные объекты
-    dragZone = avatar = dropTarget = null;
-  }
-
-  function findDragZone(event) {
-    var elem = event.target;
-    while (elem != document && !elem.dragZone) {
-      elem = elem.parentNode;
-    }
-    return elem.dragZone;
-  }
-
-  function findDropTarget(event) {
-    // получить элемент под аватаром
-    var elem = avatar.getTargetElem();
-
-    while (elem != document && !elem.dropTarget) {
-      elem = elem.parentNode;
-    }
-
-    if (!elem.dropTarget) {
-      return null;
-    }
-
-    return elem.dropTarget;
-  }
-
-  document.ondragstart = function() {
-    return false;
-  }
-
-  document.onmousemove = onMouseMove;
-  document.onmouseup = onMouseUp;
-  document.onmousedown = onMouseDown;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/DragZone.js b/11-extra/9-drag-and-drop-plus/DragZone.js
deleted file mode 100644
index a2ffd9b6..00000000
--- a/11-extra/9-drag-and-drop-plus/DragZone.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Зона, из которой можно переносить объекты
- * Умеет обрабатывать начало переноса на себе и создавать "аватар" 
- * @param elem DOM-элемент, к которому привязана зона
- */
-function DragZone(elem) {
-  elem.dragZone = this;
-  this._elem = elem;
-}
-
-/**
- * Создать аватар, соответствующий зоне.
- * У разных зон могут быть разные типы аватаров
- */
-DragZone.prototype._makeAvatar = function() {
-  /* override */
-};
-
-/**
- * Обработать начало переноса.
- *
- * Получает координаты изначального нажатия мышки, событие.
- *
- * @param downX Координата изначального нажатия по X
- * @param downY Координата изначального нажатия по Y
- * @param event текущее событие мыши
- *
- * @return аватар или false, если захватить с данной точки ничего нельзя
- */
-DragZone.prototype.onDragStart = function(downX, downY, event) {
-
-  var avatar = this._makeAvatar();
-
-  if (!avatar.initFromEvent(downX, downY, event)) {
-    return false;
-  }
-
-  return avatar;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/DropTarget.js b/11-extra/9-drag-and-drop-plus/DropTarget.js
deleted file mode 100644
index b812f087..00000000
--- a/11-extra/9-drag-and-drop-plus/DropTarget.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Зона, в которую объекты можно класть
- * Занимается индикацией передвижения по себе, добавлением в себя
- */
-function DropTarget(elem) {
-  elem.dropTarget = this;
-  this._elem = elem;
-
-  /**
-   * Подэлемент, над которым в настоящий момент находится аватар
-   */
-  this._targetElem = null;
-}
-
-/**
- * Возвращает DOM-подэлемент, над которым сейчас пролетает аватар
- *
- * @return DOM-элемент, на который можно положить или undefined
- */
-DropTarget.prototype._getTargetElem = function(avatar, event) {
-  return this._elem;
-};
-
-/**
- * Спрятать индикацию переноса
- * Вызывается, когда аватар уходит с текущего this._targetElem
- */
-DropTarget.prototype._hideHoverIndication = function(avatar) {
-  /* override */
-};
-
-/**
- * Показать индикацию переноса
- * Вызывается, когда аватар пришел на новый this._targetElem
- */
-DropTarget.prototype._showHoverIndication = function(avatar) {
-  /* override */
-};
-
-/**
- * Метод вызывается при каждом движении аватара
- */
-DropTarget.prototype.onDragMove = function(avatar, event) {
-
-  var newTargetElem = this._getTargetElem(avatar, event);
-
-  if (this._targetElem != newTargetElem) {
-
-    this._hideHoverIndication(avatar);
-    this._targetElem = newTargetElem;
-    this._showHoverIndication(avatar);
-  }
-};
-
-/**
- * Завершение переноса.
- * Алгоритм обработки (переопределить функцию и написать в потомке):
- * 1. Получить данные переноса из avatar.getDragInfo()
- * 2. Определить, возможен ли перенос на _targetElem (если он есть)
- * 3. Вызвать avatar.onDragEnd() или avatar.onDragCancel()
- *  Если нужно подтвердить перенос запросом на сервер, то avatar.onDragEnd(),
- *  а затем асинхронно, если сервер вернул ошибку, avatar.onDragCancel()
- *  При этом аватар должен уметь "откатываться" после onDragEnd.
- *
- * При любом завершении этого метода нужно (делается ниже):
- *  снять текущую индикацию переноса
- *  обнулить this._targetElem
- */
-DropTarget.prototype.onDragEnd = function(avatar, event) {
-  this._hideHoverIndication(avatar);
-  this._targetElem = null;
-};
-
-/**
- * Вход аватара в DropTarget
- */
-DropTarget.prototype.onDragEnter = function(fromDropTarget, avatar, event) {};
-
-/**
- * Выход аватара из DropTarget
- */
-DropTarget.prototype.onDragLeave = function(toDropTarget, avatar, event) {
-  this._hideHoverIndication();
-  this._targetElem = null;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/TreeDragAvatar.js b/11-extra/9-drag-and-drop-plus/TreeDragAvatar.js
deleted file mode 100644
index 7273712f..00000000
--- a/11-extra/9-drag-and-drop-plus/TreeDragAvatar.js
+++ /dev/null
@@ -1,43 +0,0 @@
-function TreeDragAvatar(dragZone, dragElem) {
-  DragAvatar.apply(this, arguments);
-}
-
-extend(TreeDragAvatar, DragAvatar);
-
-TreeDragAvatar.prototype.initFromEvent = function(downX, downY, event) {
-  if (event.target.tagName != 'SPAN') return false;
-
-  this._dragZoneElem = event.target;
-  var elem = this._elem = this._dragZoneElem.cloneNode(true);
-  elem.className = 'avatar';
-
-  // создать вспомогательные свойства shiftX/shiftY
-  var coords = getCoords(this._dragZoneElem);
-  this._shiftX = downX - coords.left;
-  this._shiftY = downY - coords.top;
-
-  // инициировать начало переноса
-  document.body.appendChild(elem);
-  elem.style.zIndex = 9999;
-  elem.style.position = 'absolute';
-
-  return true;
-};
-
-/**
- * Вспомогательный метод
- */
-TreeDragAvatar.prototype._destroy = function() {
-  this._elem.parentNode.removeChild(this._elem);
-};
-
-/**
- * При любом исходе переноса элемент-клон больше не нужен
- */
-TreeDragAvatar.prototype.onDragCancel = function() {
-  this._destroy();
-};
-
-TreeDragAvatar.prototype.onDragEnd = function() {
-  this._destroy();
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/TreeDragZone.js b/11-extra/9-drag-and-drop-plus/TreeDragZone.js
deleted file mode 100644
index 4d91806b..00000000
--- a/11-extra/9-drag-and-drop-plus/TreeDragZone.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function TreeDragZone(elem) {
-  DragZone.apply(this, arguments);
-}
-
-extend(TreeDragZone, DragZone);
-
-TreeDragZone.prototype._makeAvatar = function() {
-  return new TreeDragAvatar(this, this._elem);
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/TreeDropTarget.js b/11-extra/9-drag-and-drop-plus/TreeDropTarget.js
deleted file mode 100644
index 1245be65..00000000
--- a/11-extra/9-drag-and-drop-plus/TreeDropTarget.js
+++ /dev/null
@@ -1,72 +0,0 @@
- function TreeDropTarget(elem) {
-   TreeDropTarget.parent.constructor.apply(this, arguments);
- }
-
- extend(TreeDropTarget, DropTarget);
-
- TreeDropTarget.prototype._showHoverIndication = function() {
-   this._targetElem && this._targetElem.classList.add('hover');
- };
-
- TreeDropTarget.prototype._hideHoverIndication = function() {
-   this._targetElem && this._targetElem.classList.remove('hover');
- };
-
- TreeDropTarget.prototype._getTargetElem = function(avatar, event) {
-   var target = avatar.getTargetElem();
-   if (target.tagName != 'SPAN') {
-     return;
-   }
-
-   // проверить, может быть перенос узла внутрь самого себя или в себя?
-   var elemToMove = avatar.getDragInfo(event).dragZoneElem.parentNode;
-
-   var elem = target;
-   while (elem) {
-     if (elem == elemToMove) return; // попытка перенести родителя в потомка
-     elem = elem.parentNode;
-   }
-
-   return target;
- };
-
- TreeDropTarget.prototype.onDragEnd = function(avatar, event) {
-
-   if (!this._targetElem) {
-     // перенос закончился вне подходящей точки приземления
-     avatar.onDragCancel();
-     return;
-   }
-
-   this._hideHoverIndication();
-
-   // получить информацию об объекте переноса
-   var avatarInfo = avatar.getDragInfo(event);
-
-   avatar.onDragEnd(); // аватар больше не нужен, перенос успешен
-
-   // вставить элемент в детей в отсортированном порядке
-   var elemToMove = avatarInfo.dragZoneElem.parentNode; // <LI>
-   var title = avatarInfo.dragZoneElem.innerHTML; // переносимый заголовок
-
-   // получить контейнер для узлов дерева, соответствующий точке преземления
-   var ul = this._targetElem.parentNode.getElementsByTagName('UL')[0];
-   if (!ul) { // нет детей, создадим контейнер
-     ul = document.createElement('UL');
-     this._targetElem.parentNode.appendChild(ul);
-   }
-
-   // вставить новый узел в нужное место среди потомков, в алфавитном порядке
-   var li = null;
-   for (var i = 0; i < ul.children.length; i++) {
-     li = ul.children[i];
-     var childTitle = li.children[0].innerHTML;
-     if (childTitle > title) {
-       break;
-     }
-   }
-
-   ul.insertBefore(elemToMove, li);
-
-   this._targetElem = null;
- };
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/article.md b/11-extra/9-drag-and-drop-plus/article.md
deleted file mode 100644
index 2651340b..00000000
--- a/11-extra/9-drag-and-drop-plus/article.md
+++ /dev/null
@@ -1,207 +0,0 @@
-# Применяем ООП: Drag'n'Drop++
-
-Эта статья представляет собой продолжение главы [](/drag-and-drop-objects). 
-Она посвящена более гибкой и расширяемой реализации переноса.
-
-Рекомендуется прочитать указанную главу перед тем, как двигаться дальше.
-
-[cut]
-В сложных приложениях Drag'n'Drop обладает рядом особенностей:
-<ol>
-<li>Перетаскиваются *элементы* из *зоны переноса `dragZone`* в *зону-цель `dropTarget`*. При этом сама зона не переносится.
-
-Например -- два списка, нужен перенос элемента из одного в другой. В этом случае один список является зоной переноса, второй -- зоной-целью. 
-
-Возможно, что перенос осуществляется внутри одного и того же списка. При этом  `dragZone == dropTarget`.
-</li>
-<li>На странице может быть несколько разных зон переноса и зон-целей.</li>
-<li>Обработка завершения переноса может быть асинхронной, с уведомлением сервера.</li>
-<li>Должно быть легко добавить новый тип зоны переноса или зоны-цели, а также расширить поведение существующей.</li>
-<li>Фреймворк для переноса должен быть расширяемым с учётом сложных сценариев.</li>
-</ol>
-
-Всё это вполне реализуемо. Но для этого фреймворк, описанный в статье [](/drag-and-drop-objects), нужно отрефакторить, и разделить на сущности.
-
-## Основные сущности
-
-Всего будет 4 сущности:
-
-<dl>
-<dt>`DragZone`</dt>
-<dd>Зона переноса. С нее начинается перенос. Она принимает нажатие мыши и генерирует аватар нужного типа.</dd>
-<dt>`DragAvatar`</dt>
-<dd>Переносимый объект. Предоставляет доступ к информации о том, что переносится. Умеет двигать себя по экрану. В зависимости от вида переноса, может что-то делать с собой в конце, например, самоуничтожаться.</dd>
-<dt>`DropTarget`</dt>
-<dd>Зона-цель, на которую можно положить. В процессе переноса аватара над ней умеет рисовать на себе предполагаемое "место приземления". Обрабатывает окончание переноса.</dd>
-<dt>`dragManager`</dt>
-<dd>Единый объект, который стоит над всеми ними, ставит обработчики `mousedown/mousemove/mouseup` и управляет процессом. В терминах ООП, это не класс, а [объект-синглтон](http://ru.wikipedia.org/wiki/%D0%9E%D0%B4%D0%B8%D0%BD%D0%BE%D1%87%D0%BA%D0%B0_%28%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%29), поэтому он с маленькой буквы.</dd>
-</dl>
-
-На макете страницы ниже возможен перенос студентов из левого списка -- вправо, в одну из команд или в "корзину":
-
-<img src="dragzonetarget.png">
-
-Здесь левый список является зоной переноса `ListDragZone`, а правые списки -- это несколько зон-целей `ListDropTarget`. Кроме того, корзина также является зоной-целью отдельного типа `RemoveDropTarget`.
-
-## Пример
-
-В этой статье мы реализуем пример, когда узлы дерева можно переносить внутри него. То есть, дерево, которое является одновременно `TreeDragZone` и `TreeDropTarget`.
-
-Структура дерева будет состоять из вложенных списков с заголовком в `SPAN`:
-
-```html
-<ul>
-  <li><span>Заголовок 1</span>
-    <ul>
-      <li><span>Заголовок 1.1</span></li>
-      <li><span>Заголовок 1.2</span></li>
-      ...
-    </ul>
-  </li>
-  ...
-</ul>
-```
-
-При переносе:
-<ul>
-<li>Для аватара нужно клонировать заголовок узла, на котором было нажатие.</li>
-<li>Узлы, на которые можно положить, при переносе подсвечиваются красным.</li>
-<li>Нельзя перенести узел сам в себя или в своего потомка.</li>
-<li>Дерево само поддерживает сортировку по алфавиту среди узлов.</li>
-<li>Обязательна расширяемость кода, поддержка большого количества узлов и т.п.</li>
-</ul>
-
-[iframe height=450 border=1 src="dragTree"]
-
-## dragManager
-
-Обязанность `dragManager` -- обработка событий мыши и координация всех остальных сущностей в процессе переноса.
-
-**Готовьтесь, дальше будет много кода с комментариями.** 
-
-Следующий код должен быть очевиден по смыслу, если вы читали [предыдущую статью](/drag-and-drop-objects). Объект взят оттуда, и из него изъята лишняя функциональность, которая перенесена в другие сущности.
-
-Если вызываемые в нём методы `onDrag*` непонятны -- смотрите далее, в описание остальных объектов.
-
-```js
-//+ src="DragManager.js"
-```
-
-## DragZone
-
-Основная задача `DragZone` -- создать аватар и инициализовать его. В зависимости от места, где произошел клик, аватар получит соответствующий подэлемент зоны.
-
-Метод для создания аватара `_makeAvatar` вынесен отдельно, чтобы его легко можно было переопределить и подставить собственный тип аватара.
-
-```js
-//+ src="DragZone.js"
-```
-
-### TreeDragZone
-
-Объект зоны переноса для дерева, по существу, не вносит ничего нового, по сравнению с `DragZone`.
-
-Он только переопределяет `_makeAvatar` для создания `TreeDragAvatar`.
-
-```js
-//+ src="TreeDragZone.js"
-```
-
-## DragAvatar
-
-Аватар создается только зоной переноса при начале Drag'n'Drop. Он содержит всю необходимую информацию об объекте, который переносится. 
-
-В дальнейшем вся работа происходит *только с аватаром*, сама зона напрямую не вызывается.
-
-У аватара есть три основных свойства:
-<dl>
-<dt>`_dragZone`</dt>
-<dd>Зона переноса, которая его создала.</dd>
-<dt>`_dragZoneElem`</dt>
-<dd>Элемент, соответствующий аватару в зоне переноса. По умолчанию -- DOM-элемент всей зоны. Это подходит в тех случаях, когда зона перетаскивается только целиком.
-При инициализации аватара значение этого свойства быть уточнено, например изменено на подэлемент списка, который перетаскивается.</dd>
-<dt>`_elem`</dt>
-<dd>Основной элемент аватара, который будет двигаться по экрану. По умолчанию  равен `_dragZoneElem`, т.е мы переносим сам элемент.
- 
-При инициализации мы можем также склонировать `_dragZoneElem`, или создать своё красивое представление переносимого элемента и поместить его в `_elem`.</dd>
-</dl>
-
-```js
-//+ src="DragAvatar.js"
-```
-
-### TreeDragAvatar
-
-Основные изменения -- в методе `initFromEvent`, который создает аватар из узла, на котором был клик. 
-
-Обратите внимание, возможно что клик был не на заголовке `SPAN`, а просто где-то на дереве. В этом случае `initFromEvent` возвращает `false` и перенос не начинается.
-
-```js
-//+ src="TreeDragAvatar.js"
-```
-
-## DropTarget
-
-Именно на `DropTarget` ложится работа по отображению предполагаемой "точки приземления" аватара, а также, по завершению переноса, обработка результата. 
-
-Как правило, `DropTarget` принимает переносимый узел в себя, а вот как конкретно организован процесс вставки -- нужно описать в классе-наследнике. Разные типы зон делают разное при вставке: `TreeDropTarget` вставляет элемент в качестве потомка, а `RemoveDropTarget` -- удаляет.
-
-```js
-//+ src="DropTarget.js"
-```
-
-Как видно, из кода выше, по умолчанию `DropTarget` занимается только отслеживанием и индикацией "точки приземления". По умолчанию, единственной возможной "точкой приземления" является сам элемент зоны. В более сложных ситуациях это может быть подэлемент.
-
-Для применения в реальности необходимо как минимум переопределить обработку результата переноса в `onDragEnd`. 
-
-### TreeDropTarget
-
-`TreeDropTarget` содержит код, специфичный для дерева:
-<ul>
-<li>Индикацию переноса над элементом: методы `_showHoverIndication` и `_hideHoverIndication`.</li>
-<li>Получение текущей точки приземления `_targetElem` в методе `_getTargetElem`. Ей может быть только заголовок узла дерева, причем дополнительно проверяется, что это не потомок переносимого узла.</li>
-<li>Обработка успешного переноса в `onDragEnd`, вставка исходного узла `avatar.dragZoneElem` в узел, соответствующий `_targetElem`.</li>
-</ul>
-
-```js
-//+ src="TreeDropTarget.js"
-```
-
-## Итого 
-
-
-Реализация Drag'n'Drop оказалась отличным способом применить ООП в JavaScript.
-
-Исходный код примера целиком находится [edit src="dragTree"]в песочнице[/edit].
-
-<ul>
-<li>Синглтон `dragManager` и классы `Drag*` задают общий фреймворк. От них наследуются конкретные объекты. Для создания новых зон достаточно унаследовать стандартные классы и переопределить их. </li>
-<li>Мини-фреймворк для Drag'n'Drop, который здесь представлен, является переписанным и обновленным вариантом реальной библиотеки, на основе которой было создано много успешных скриптов переноса. 
-
-В зависимости от ваших потребностей, вы можете расширить его, добавить перенос нескольких объектов одновременно, поддержку событий и другие возможности.</li>
-<li>На сегодняшний день в каждом серьезном фреймворке есть библиотека для Drag'n'Drop. Она работает похожим образом, но сделать универсальный перенос -- штука непростая. Зачастую он перегружен лишним функционалом, либо наоборот -- недостаточно расширяем в нужных местах. 
-Понимание, как это все может быть устроено, на примере этой статьи, может помочь в адаптации существующего кода под ваши потребности.</li>
-</ul>
-
-[head]
-<script>
-function getElementUnderClientXY(elem, clientX, clientY) {
-  var display = elem.style.display || '';
-  elem.style.display = 'none';
-
-  var target = document.elementFromPoint(clientX, clientY);
-
-  elem.style.display = display;
-
-  if (!target || target == document) { 
-    target = document.body; 
-  }
-
-  return target;
-}
-
-</script>
-[/head]
-[libs]
-getCoords.js
-[/libs]
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js b/11-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js
deleted file mode 100644
index 66752b6e..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * "Аватар" - элемент, который перетаскивается.
- *
- * В простейшем случае аватаром является сам переносимый элемент
- * Также аватар может быть клонированным элементом
- * Также аватар может быть иконкой и вообще чем угодно.
- */
-function DragAvatar(dragZone, dragElem) {
-  /** "родительская" зона переноса */
-  this._dragZone = dragZone;
-
-  /**
-   * подэлемент родительской зоны, к которому относится аватар
-   * по умолчанию - элемент, соответствующий всей зоне
-   * может быть уточнен в initFromEvent
-   */
-  this._dragZoneElem = dragElem;
-
-  /**
-   * Сам элемент аватара, который будет носиться по экрану.
-   * Инициализуется в initFromEvent
-   */
-  this._elem = dragElem;
-}
-
-/**
- * Инициализовать this._elem и позиционировать его
- * При необходимости уточнить this._dragZoneElem
- * @param downX Координата X нажатия мыши
- * @param downY Координата Y нажатия мыши
- * @param event Текущее событие мыши
- */
-DragAvatar.prototype.initFromEvent = function(downX, downY, event) {
-  /* override */
-};
-
-/**
- * Возвращает информацию о переносимом элементе для DropTarget
- * @param event
- */
-DragAvatar.prototype.getDragInfo = function(event) {
-  // тут может быть еще какая-то информация, необходимая для обработки конца или процесса переноса
-  return {
-    elem: this._elem,
-    dragZoneElem: this._dragZoneElem,
-    dragZone: this._dragZone
-  };
-};
-
-/**
- * Возвращает текущий самый глубокий DOM-элемент под this._elem
- * Приватное свойство _currentTargetElem обновляется при каждом передвижении
- */
-DragAvatar.prototype.getTargetElem = function() {
-  return this._currentTargetElem;
-};
-
-/**
- * При каждом движении мыши перемещает this._elem
- * и записывает текущий элемент под this._elem в _currentTargetElem
- * @param event
- */
-DragAvatar.prototype.onDragMove = function(event) {
-  this._elem.style.left = event.pageX - this._shiftX + 'px';
-  this._elem.style.top = event.pageY - this._shiftY + 'px';
-
-  this._currentTargetElem = getElementUnderClientXY(this._elem, event.clientX, event.clientY);
-};
-
-/**
- * Действия с аватаром, когда перенос не удался
- * Например, можно вернуть элемент обратно или уничтожить
- */
-DragAvatar.prototype.onDragCancel = function() {
-  /* override */
-};
-
-/**
- * Действия с аватаром после успешного переноса
- */
-DragAvatar.prototype.onDragEnd = function() {
-  /* override */
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js b/11-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js
deleted file mode 100644
index a4db4468..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js
+++ /dev/null
@@ -1,120 +0,0 @@
-var dragManager = new function() {
-
-  var dragZone, avatar, dropTarget;
-  var downX, downY;
-
-  var self = this;
-
-  function onMouseDown(e) {
-
-    if (e.which != 1) { // не левой кнопкой
-      return false;
-    }
-
-    dragZone = findDragZone(e);
-
-    if (!dragZone) {
-      return;
-    }
-
-    // запомним, что элемент нажат на текущих координатах pageX/pageY
-    downX = e.pageX;
-    downY = e.pageY;
-
-    return false;
-  }
-
-  function onMouseMove(e) {
-    if (!dragZone) return; // элемент не зажат
-
-    if (!avatar) { // элемент нажат, но пока не начали его двигать
-      if (Math.abs(e.pageX - downX) < 3 && Math.abs(e.pageY - downY) < 3) {
-        return;
-      }
-      // попробовать захватить элемент
-      avatar = dragZone.onDragStart(downX, downY, e);
-
-      if (!avatar) { // не получилось, значит перенос продолжать нельзя
-        cleanUp(); // очистить приватные переменные, связанные с переносом
-        return;
-      }
-    }
-
-    // отобразить перенос объекта, перевычислить текущий элемент под курсором
-    avatar.onDragMove(e);
-
-    // найти новый dropTarget под курсором: newDropTarget
-    // текущий dropTarget остался от прошлого mousemove
-    // *оба значения: и newDropTarget и dropTarget могут быть null
-    var newDropTarget = findDropTarget(e);
-
-    if (newDropTarget != dropTarget) {
-      // уведомить старую и новую зоны-цели о том, что с них ушли/на них зашли
-      dropTarget && dropTarget.onDragLeave(newDropTarget, avatar, e);
-      newDropTarget && newDropTarget.onDragEnter(dropTarget, avatar, e);
-    }
-
-    dropTarget = newDropTarget;
-
-    dropTarget && dropTarget.onDragMove(avatar, e);
-
-    return false;
-  }
-
-  function onMouseUp(e) {
-
-    if (e.which != 1) { // не левой кнопкой
-      return false;
-    }
-
-    if (avatar) { // если уже начали передвигать
-
-      if (dropTarget) {
-        // завершить перенос и избавиться от аватара, если это нужно
-        // эта функция обязана вызвать avatar.onDragEnd/onDragCancel
-        dropTarget.onDragEnd(avatar, e);
-      } else {
-        avatar.onDragCancel();
-      }
-
-    }
-
-    cleanUp();
-  }
-
-  function cleanUp() {
-    // очистить все промежуточные объекты
-    dragZone = avatar = dropTarget = null;
-  }
-
-  function findDragZone(event) {
-    var elem = event.target;
-    while (elem != document && !elem.dragZone) {
-      elem = elem.parentNode;
-    }
-    return elem.dragZone;
-  }
-
-  function findDropTarget(event) {
-    // получить элемент под аватаром
-    var elem = avatar.getTargetElem();
-
-    while (elem != document && !elem.dropTarget) {
-      elem = elem.parentNode;
-    }
-
-    if (!elem.dropTarget) {
-      return null;
-    }
-
-    return elem.dropTarget;
-  }
-
-  document.ondragstart = function() {
-    return false;
-  }
-
-  document.onmousemove = onMouseMove;
-  document.onmouseup = onMouseUp;
-  document.onmousedown = onMouseDown;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js b/11-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js
deleted file mode 100644
index a2ffd9b6..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Зона, из которой можно переносить объекты
- * Умеет обрабатывать начало переноса на себе и создавать "аватар" 
- * @param elem DOM-элемент, к которому привязана зона
- */
-function DragZone(elem) {
-  elem.dragZone = this;
-  this._elem = elem;
-}
-
-/**
- * Создать аватар, соответствующий зоне.
- * У разных зон могут быть разные типы аватаров
- */
-DragZone.prototype._makeAvatar = function() {
-  /* override */
-};
-
-/**
- * Обработать начало переноса.
- *
- * Получает координаты изначального нажатия мышки, событие.
- *
- * @param downX Координата изначального нажатия по X
- * @param downY Координата изначального нажатия по Y
- * @param event текущее событие мыши
- *
- * @return аватар или false, если захватить с данной точки ничего нельзя
- */
-DragZone.prototype.onDragStart = function(downX, downY, event) {
-
-  var avatar = this._makeAvatar();
-
-  if (!avatar.initFromEvent(downX, downY, event)) {
-    return false;
-  }
-
-  return avatar;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js b/11-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js
deleted file mode 100644
index b812f087..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Зона, в которую объекты можно класть
- * Занимается индикацией передвижения по себе, добавлением в себя
- */
-function DropTarget(elem) {
-  elem.dropTarget = this;
-  this._elem = elem;
-
-  /**
-   * Подэлемент, над которым в настоящий момент находится аватар
-   */
-  this._targetElem = null;
-}
-
-/**
- * Возвращает DOM-подэлемент, над которым сейчас пролетает аватар
- *
- * @return DOM-элемент, на который можно положить или undefined
- */
-DropTarget.prototype._getTargetElem = function(avatar, event) {
-  return this._elem;
-};
-
-/**
- * Спрятать индикацию переноса
- * Вызывается, когда аватар уходит с текущего this._targetElem
- */
-DropTarget.prototype._hideHoverIndication = function(avatar) {
-  /* override */
-};
-
-/**
- * Показать индикацию переноса
- * Вызывается, когда аватар пришел на новый this._targetElem
- */
-DropTarget.prototype._showHoverIndication = function(avatar) {
-  /* override */
-};
-
-/**
- * Метод вызывается при каждом движении аватара
- */
-DropTarget.prototype.onDragMove = function(avatar, event) {
-
-  var newTargetElem = this._getTargetElem(avatar, event);
-
-  if (this._targetElem != newTargetElem) {
-
-    this._hideHoverIndication(avatar);
-    this._targetElem = newTargetElem;
-    this._showHoverIndication(avatar);
-  }
-};
-
-/**
- * Завершение переноса.
- * Алгоритм обработки (переопределить функцию и написать в потомке):
- * 1. Получить данные переноса из avatar.getDragInfo()
- * 2. Определить, возможен ли перенос на _targetElem (если он есть)
- * 3. Вызвать avatar.onDragEnd() или avatar.onDragCancel()
- *  Если нужно подтвердить перенос запросом на сервер, то avatar.onDragEnd(),
- *  а затем асинхронно, если сервер вернул ошибку, avatar.onDragCancel()
- *  При этом аватар должен уметь "откатываться" после onDragEnd.
- *
- * При любом завершении этого метода нужно (делается ниже):
- *  снять текущую индикацию переноса
- *  обнулить this._targetElem
- */
-DropTarget.prototype.onDragEnd = function(avatar, event) {
-  this._hideHoverIndication(avatar);
-  this._targetElem = null;
-};
-
-/**
- * Вход аватара в DropTarget
- */
-DropTarget.prototype.onDragEnter = function(fromDropTarget, avatar, event) {};
-
-/**
- * Выход аватара из DropTarget
- */
-DropTarget.prototype.onDragLeave = function(toDropTarget, avatar, event) {
-  this._hideHoverIndication();
-  this._targetElem = null;
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js b/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js
deleted file mode 100644
index 7273712f..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js
+++ /dev/null
@@ -1,43 +0,0 @@
-function TreeDragAvatar(dragZone, dragElem) {
-  DragAvatar.apply(this, arguments);
-}
-
-extend(TreeDragAvatar, DragAvatar);
-
-TreeDragAvatar.prototype.initFromEvent = function(downX, downY, event) {
-  if (event.target.tagName != 'SPAN') return false;
-
-  this._dragZoneElem = event.target;
-  var elem = this._elem = this._dragZoneElem.cloneNode(true);
-  elem.className = 'avatar';
-
-  // создать вспомогательные свойства shiftX/shiftY
-  var coords = getCoords(this._dragZoneElem);
-  this._shiftX = downX - coords.left;
-  this._shiftY = downY - coords.top;
-
-  // инициировать начало переноса
-  document.body.appendChild(elem);
-  elem.style.zIndex = 9999;
-  elem.style.position = 'absolute';
-
-  return true;
-};
-
-/**
- * Вспомогательный метод
- */
-TreeDragAvatar.prototype._destroy = function() {
-  this._elem.parentNode.removeChild(this._elem);
-};
-
-/**
- * При любом исходе переноса элемент-клон больше не нужен
- */
-TreeDragAvatar.prototype.onDragCancel = function() {
-  this._destroy();
-};
-
-TreeDragAvatar.prototype.onDragEnd = function() {
-  this._destroy();
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js b/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js
deleted file mode 100644
index 4d91806b..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function TreeDragZone(elem) {
-  DragZone.apply(this, arguments);
-}
-
-extend(TreeDragZone, DragZone);
-
-TreeDragZone.prototype._makeAvatar = function() {
-  return new TreeDragAvatar(this, this._elem);
-};
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js b/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js
deleted file mode 100644
index 1245be65..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js
+++ /dev/null
@@ -1,72 +0,0 @@
- function TreeDropTarget(elem) {
-   TreeDropTarget.parent.constructor.apply(this, arguments);
- }
-
- extend(TreeDropTarget, DropTarget);
-
- TreeDropTarget.prototype._showHoverIndication = function() {
-   this._targetElem && this._targetElem.classList.add('hover');
- };
-
- TreeDropTarget.prototype._hideHoverIndication = function() {
-   this._targetElem && this._targetElem.classList.remove('hover');
- };
-
- TreeDropTarget.prototype._getTargetElem = function(avatar, event) {
-   var target = avatar.getTargetElem();
-   if (target.tagName != 'SPAN') {
-     return;
-   }
-
-   // проверить, может быть перенос узла внутрь самого себя или в себя?
-   var elemToMove = avatar.getDragInfo(event).dragZoneElem.parentNode;
-
-   var elem = target;
-   while (elem) {
-     if (elem == elemToMove) return; // попытка перенести родителя в потомка
-     elem = elem.parentNode;
-   }
-
-   return target;
- };
-
- TreeDropTarget.prototype.onDragEnd = function(avatar, event) {
-
-   if (!this._targetElem) {
-     // перенос закончился вне подходящей точки приземления
-     avatar.onDragCancel();
-     return;
-   }
-
-   this._hideHoverIndication();
-
-   // получить информацию об объекте переноса
-   var avatarInfo = avatar.getDragInfo(event);
-
-   avatar.onDragEnd(); // аватар больше не нужен, перенос успешен
-
-   // вставить элемент в детей в отсортированном порядке
-   var elemToMove = avatarInfo.dragZoneElem.parentNode; // <LI>
-   var title = avatarInfo.dragZoneElem.innerHTML; // переносимый заголовок
-
-   // получить контейнер для узлов дерева, соответствующий точке преземления
-   var ul = this._targetElem.parentNode.getElementsByTagName('UL')[0];
-   if (!ul) { // нет детей, создадим контейнер
-     ul = document.createElement('UL');
-     this._targetElem.parentNode.appendChild(ul);
-   }
-
-   // вставить новый узел в нужное место среди потомков, в алфавитном порядке
-   var li = null;
-   for (var i = 0; i < ul.children.length; i++) {
-     li = ul.children[i];
-     var childTitle = li.children[0].innerHTML;
-     if (childTitle > title) {
-       break;
-     }
-   }
-
-   ul.insertBefore(elemToMove, li);
-
-   this._targetElem = null;
- };
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css b/11-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css
deleted file mode 100644
index 747d26f8..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css
+++ /dev/null
@@ -1,22 +0,0 @@
-#tree span:hover {
-  cursor: pointer;
-  font-weight: bold;
-}
-/* #tree span.hover, для приоритета перед :hover также добавлен подселектор */
-
-#tree span.hover,
-#tree span.hover:hover {
-  color: red;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-span.avatar {
-  padding: 1px;
-  border: 1px dotted black;
-  background: white;
-  cursor: pointer;
-  opacity: 0.6;
-  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
-  /* IE opacity */
-}
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/index.html b/11-extra/9-drag-and-drop-plus/dragTree.view/index.html
deleted file mode 100644
index 49db15fd..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script src="lib.js"></script>
-  <script src="DragManager.js"></script>
-  <script src="DragAvatar.js"></script>
-  <script src="DragZone.js"></script>
-  <script src="DropTarget.js"></script>
-  <script src="TreeDragAvatar.js"></script>
-  <script src="TreeDragZone.js"></script>
-  <script src="TreeDropTarget.js"></script>
-  <link rel="stylesheet" type="text/css" href="dragTree.css">
-</head>
-
-<body>
-
-  Возьмите за любой заголовок и поменяйте ему родителя.
-  <br> В собственных детей перенести нельзя.
-  <br> Потомки всегда отсортированы по алфавиту.
-
-  <ul id="tree">
-    <li><span>Древо жизни (сверхмалая часть)</span>
-      <ul>
-        <li><span>Грибы</span>
-          <ul>
-            <li><span>Древесные</span>
-              <ul>
-                <li><span>Чага</span></li>
-              </ul>
-            </li>
-            <li><span>Наземные</span>
-              <ul>
-                <li><span>Опята</span></li>
-                <li><span>Подосиновики</span></li>
-              </ul>
-
-            </li>
-          </ul>
-        </li>
-        <li><span>Животные</span>
-          <ul>
-            <li><span>Земноводные</span>
-              <ul>
-                <li><span>Лягушки</span></li>
-                <li><span>Саламандры</span></li>
-                <li><span>Тритоны</span></li>
-              </ul>
-            </li>
-            <li><span>Млекопитающие</span>
-              <ul>
-                <li><span>Коровы</span></li>
-                <li><span>Ослы</span></li>
-                <li><span>Собаки</span></li>
-                <li><span>Тигры</span></li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var tree = document.getElementById('tree');
-    new TreeDragZone(tree);
-    new TreeDropTarget(tree);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragTree.view/lib.js b/11-extra/9-drag-and-drop-plus/dragTree.view/lib.js
deleted file mode 100644
index 441f8619..00000000
--- a/11-extra/9-drag-and-drop-plus/dragTree.view/lib.js
+++ /dev/null
@@ -1,43 +0,0 @@
-function getCoords(elem) {
-  var box = elem.getBoundingClientRect();
-
-  var body = document.body;
-  var docElem = document.documentElement;
-
-  var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
-  var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
-
-  var clientTop = docElem.clientTop || body.clientTop || 0;
-  var clientLeft = docElem.clientLeft || body.clientLeft || 0;
-
-  var top = box.top + scrollTop - clientTop;
-  var left = box.left + scrollLeft - clientLeft;
-
-  return {
-    top: Math.round(top),
-    left: Math.round(left)
-  };
-}
-
-function getElementUnderClientXY(elem, clientX, clientY) {
-  var display = elem.style.display || '';
-  elem.style.display = 'none';
-
-  var target = document.elementFromPoint(clientX, clientY);
-
-  elem.style.display = display;
-
-  if (!target || target == document) { // это бывает при выносе за границы окна
-    target = document.body; // поправить значение, чтобы был именно элемент
-  }
-
-  return target;
-}
-
-function extend(Child, Parent) {
-  function F() {}
-  F.prototype = Parent.prototype
-  Child.prototype = new F()
-  Child.prototype.constructor = Child
-  Child.parent = Parent.prototype
-}
\ No newline at end of file
diff --git a/11-extra/9-drag-and-drop-plus/dragzonetarget.png b/11-extra/9-drag-and-drop-plus/dragzonetarget.png
deleted file mode 100644
index 4ad031b6..00000000
Binary files a/11-extra/9-drag-and-drop-plus/dragzonetarget.png and /dev/null differ
diff --git a/11-extra/index.md b/11-extra/index.md
deleted file mode 100644
index 6adea6de..00000000
--- a/11-extra/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# О всякой всячине
-
-Статьи на разные темы, которые не вошли в другие разделы.
-
diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md
new file mode 100644
index 00000000..5f6910dc
--- /dev/null
+++ b/2-ui/1-document/01-browser-environment/article.md
@@ -0,0 +1,123 @@
+# Browser environment, specs
+
+The JavaScript language was initially created for web browsers. Since then, it evolved and became a language with many uses and platforms.
+
+A platform may be either a browser or a web-server or a washing machine or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
+
+A host environment provides platform-specific objects and functions additionally to the language core. Web browsers give means to control web pages. Node.JS provides server-side features, and so on.
+
+[cut]
+
+Here's a bird-eye view of what we have when JavaScript runs in a web-browser:
+
+![](windowObjects.png)
+
+There's a "root" object called `window`. It has two roles:
+
+1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
+2. Second, it represents the "browser window" and provides methods to control it.
+
+For instance, here we use it as a global object:
+
+```js run
+function sayHi() {
+  alert("Hello");
+}
+
+// global functions are accessible as properties of window
+alert(window.sayHi);
+```
+
+And here we use it as a browser window, to see the window height:
+
+```js run
+alert(window.innerHeight); // inner window height
+```
+
+There are more window-specific methods and properties, we'll cover them later.
+
+## Document Object Model (DOM)
+
+The `document` object gives access to the page content. We can change or create anything on the page using it.
+
+For instance:
+```js run
+// change the background color to red
+document.body.style.background = 'red';
+
+// change it back after 1 second
+setTimeout(() => document.body.style.background = '', 1000);
+```
+
+Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification. By chance, there are two working groups who develop it:
+
+1. [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) -- the documentation is at <https://www.w3.org/TR/dom>.
+2. [WhatWG](https://en.wikipedia.org/wiki/WHATWG), publishing at <https://dom.spec.whatwg.org>.
+
+As it happens, the two groups don't always agree, so we have like 2 sets of standards. But they are in the tight contact and eventually things merge. So the documentation that you can find on the given resources is very similar, there's like 99% match. There are very minor differences, you probably won't notice them.
+
+Personally, I find <https://dom.spec.whatwg.org> more pleasant to use.
+
+In the ancient past, there was no standard at all -- each browser implemented whatever it wanted. So different browsers had different sets methods and properties for the same thing, and developers had to write different code for each of them. Dark, messy times.
+
+Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But in this tutorial we'll use modern stuff: there's no need to learn old things until you really need those (chances are high you won't).
+
+Then the DOM standard appeared, in an attempt to bring everyone to an agreement. The first version was "DOM Level 1", then it was extended by DOM Level 2, then DOM Level 3, and now it's DOM Level 4. People from WhatWG group got tired of version and are calling that just "DOM", without a number. So will do we.
+
+```smart header="DOM is not only for browsers"
+The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too.
+
+For instance, server-side tools that download HTML pages and process them. They may support only a part of the DOM specification though.
+```
+
+```smart header="CSSOM for styling"
+CSS rules and stylesheets are structured not like HTML. So there's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, how to read and write them.
+
+CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now.
+```
+
+## BOM (part of HTML spec)
+
+Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document.
+
+For instance:
+
+- [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operation system. There are many properties, but two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
+- [location](mdn:api/Window/location) object allows to read the current URL and redirect the browser to a new one.
+
+Here's how we can use the `location` object:
+
+```js run
+alert(location.href); // shows current URL
+if (confirm("Go to wikipedia?")) {
+  location.href = 'https://wikipedia.org'; // redirect the browser to another URL
+}
+```
+
+Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
+
+
+```smart header="HTML specification"
+BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
+
+Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms".
+```
+
+## Summary
+
+Talking about standards, we have:
+
+DOM specification
+: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
+
+CSSOM specification
+: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
+
+HTML specification
+: Describes HTML language (tags etc) and also BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes DOM specification and extends it with many additional properties and methods.
+
+Now we'll get down to learning DOM, because the document plays the central role in the UI, and working with it is the most complex part.
+
+Please note the links above, because there's so many stuff to learn, it's impossible to cover and remember everything.
+
+When you'd like to read about a property or a method -- the Mozilla manual at <https://developer.mozilla.org/en-US/search> is a nice one, but reading the corresponding spec may be better: more complex and longer to read, but will make your fundamental knowledge sound and complete.
diff --git a/2-ui/1-document/01-browser-environment/windowObjects.png b/2-ui/1-document/01-browser-environment/windowObjects.png
new file mode 100644
index 00000000..81803bd0
Binary files /dev/null and b/2-ui/1-document/01-browser-environment/windowObjects.png differ
diff --git a/2-ui/1-document/01-browser-environment/windowObjects@2x.png b/2-ui/1-document/01-browser-environment/windowObjects@2x.png
new file mode 100644
index 00000000..e6dae7c3
Binary files /dev/null and b/2-ui/1-document/01-browser-environment/windowObjects@2x.png differ
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
new file mode 100644
index 00000000..635986d1
--- /dev/null
+++ b/2-ui/1-document/02-dom-nodes/article.md
@@ -0,0 +1,261 @@
+libs:
+  - d3
+  - domtree
+
+---
+
+# DOM tree
+
+The backbone of an HTML document is tags.
+
+According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called "children" of the enclosing one.
+
+The text inside a tag it is an object as well.
+
+All these objects are accessible using JavaScript.
+
+## An example of DOM
+
+For instance, let's explore the DOM for this document:
+
+```html run no-beautify
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>About elks</title>
+</head>
+<body>
+  The truth about elks.
+</body>
+</html>
+```
+
+The DOM represents HTML as a tree structure of tags. Here's how it looks:
+
+<div class="domtree"></div>
+
+<script>
+let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks."}]}]}
+
+drawHtmlTree(node1, 'div.domtree', 690, 320);
+</script>
+
+```online
+On the picture above element nodes you can click on element nodes. Their children will open/collapse.
+```
+
+Tags are called *element nodes* (or just elements). Nested tags become children of the enclosing ones. As a result we have a tree of elements: `<html>` is at the root, then `<head>` and `<body>` are its children etc.
+
+The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree.
+
+For instance, the `<title>` tag has the text `"About elks"`.
+
+Please note the special characters in text nodes:
+
+- a newline: `↵` (in JavaScript known as `\n`)
+- a space: `␣`
+
+Spaces and newlines -- are totally valid characters, they form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains come spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only).
+
+There are only two top-level exclusions:
+1. Spaces and newlines before `<head>` are ignored for historical reasons,
+2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as HTML spec requires that all content must be inside `<body>`. So there may be no spaces after `</body>`.
+
+In other cases everything's honest -- if there are spaces (just like any character) in the document, then they text nodes in DOM, and if we remove them, then there won't be any.
+
+Here are no space-only text nodes:
+
+```html no-beautify
+<!DOCTYPE HTML>
+<html><head><title>About elks</title></head><body>The truth about elks.</body></html>
+```
+
+<div class="domtree"></div>
+
+<script>
+let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elks."}]}]}
+
+drawHtmlTree(node2, 'div.domtree', 690, 210);
+</script>
+
+```smart header="Edge spaces and in-between empty text are usually hidden in tools"
+Browser tools (to be covered soon) that work with DOM usually do not show spaces at start/end of the text and empty text nodes (line-breaks) between tags. .
+
+That's because they are mainly used to decorate HTML, and do not affect (in most cases) how it is shown.
+
+On further DOM pictures we'll sometimes omit them where they are irrelevant, to keep things short.
+```
+
+
+## Autocorrection
+
+If the browser encounters malformed HTML, it automatically corrects it when making DOM.
+
+For instance, the top tag is always `<html>`. Even if it doesn't exist in the document -- it will be in DOM, the browser will create it. The same about `<body>`.
+
+As an example, if the HTML file is a single word `"Hello"`, the browser will wrap it into `<html>` and `<body>`, add the required `<head>`, and the DOM will be:
+
+
+<div class="domtree"></div>
+
+<script>
+let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]}]}
+
+drawHtmlTree(node3, 'div.domtree', 690, 150);
+</script>
+
+While generating DOM, browser automatically processes errors in the document, closes tags and so on.
+
+Such an "invalid" document:
+
+```html no-beautify
+<p>Hello
+<li>Mom
+<li>and
+<li>Dad
+```
+
+...Will become a normal DOM, as the browser read tags and restores the missing parts:
+
+<div class="domtree"></div>
+
+<script>
+let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Mom"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"and"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Dad"}]}]}]}
+
+drawHtmlTree(node4, 'div.domtree', 690, 360);
+</script>
+
+````warn header="Tables always have `<tbody>`"
+An interesting "special case" is tables. By the DOM specification they must have `<tbody>`, but HTML text may (officially) omit it. Then the browser creates `<tbody>` in DOM automatically.
+
+For the HTML:
+
+```html no-beautify
+<table id="table"><tr><td>1</td></tr></table>
+```
+
+DOM-structure will be:
+<div class="domtree"></div>
+
+<script>
+let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]}]}]}]};
+
+drawHtmlTree(node5,  'div.domtree', 600, 200);
+</script>
+
+You see? The `<tbody>` has appeared out of nowhere. Should keep in mind while working with tables to evade surprises.
+````
+
+## Other node types
+
+Let's add more tags and a comment to the page:
+
+```html
+<!DOCTYPE HTML>
+<html>
+<body>
+  The truth about elks.
+  <ol>
+    <li>An elk is a smart</li>
+*!*
+    <!-- comment -->
+*/!*
+    <li>...and cunning animal!</li>
+  </ol>
+</body>
+</html>
+```
+
+<div class="domtree"></div>
+
+<script>
+let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks.\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n"}]}]};
+
+drawHtmlTree(node6, 'div.domtree', 690, 500);
+</script>
+
+Here we see a new tree node type -- *comment node*, labeled as `#comment`.
+
+We may think -- why a comment is added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree.
+
+**Everything in HTML, even comments, becomes a part of DOM.**
+
+Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before `<html>`. We are not going to touch that node, we even don't draw it on diagrams for that reason, but it's there.
+
+The `document` object that represents the whole document is, formally, a DOM node as well.
+
+There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them:
+
+1. `document` -- the "entry point" into DOM.
+2. element nodes -- HTML-tags, the tree building blocks.
+3. text nodes -- contain text.
+4. comments -- sometimes we can put the information there, it won't be shown, but JS can read it from DOM.
+
+## See it yourself
+
+To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up DOM at instant.
+
+## In the browser inspector
+
+Another way to explore DOM is to use browser developer tools. Actually, that's what we use when developing.
+
+To do so, open the web-page [elks.html](elks.html), turn on browser developer tools and switch to Elements tab.
+
+Should look like this:
+
+![](elks.png)
+
+You can see the DOM, click on elements, see their details and so on.
+
+Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of time we are interested in element nodes.
+
+Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows to choose a node from the webpage using a mouse (or other pointer device) and "inspect" it (scroll to it in the elements tab). Works great when we have a huge HTML page and would like to see the DOM of a particular place in it.
+
+Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
+
+![](inspect.png)
+
+At the right part of the tools there are following subtabs:
+- Styles -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited at-place including the dimensions/margins/paddings of the box below.
+- Computed -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such).
+- Event Listeners -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial).
+- ...and so on.
+
+The best way to study them is to click around. Most values are in-place editable.
+
+## Interaction with console
+
+As we explore the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see how it looks. Here are few tips to travel between the Elements tab and the console.
+
+- Select the first `<li>` in the Elements tab.
+- Press `key:Esc` -- it will open console right below the Elements tab.
+
+Now the last selected element is available as `$0`, the previously selected is `$1` etc.
+
+We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this:
+
+![](domconsole0.png)
+
+From the other side, if we're in console and have a variable referencing a DOM node, then we can use the command `inspect(node)` to see it in the Elements pane.
+
+Or we can just output it in the console and explore "at-place", like `document.body` below:
+
+![](domconsole1.png)
+
+That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript.
+
+The browser developer tools are a great help in development: we can explore DOM, try things and see what goes wrong.
+
+## Summary
+
+An HTML/XML document is represented inside the browser as the DOM tree.
+
+- Tags become element nodes and form the structure.
+- Text becomes text nodes.
+- ...etc, everything in HTML has its place in DOM, even comments.
+
+We can use developer tools to inspect DOM and modify it manually.
+
+Here we covered the basics, most used and important actions to start with. There's an extensive documentation about Chrome developer tools at <https://developers.google.com/web/tools/chrome-devtools>. The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest.
+
+DOM nodes have properties and methods that allow to travel between them, modify, move around the page and more. We'll get down to them in the next chapters.
diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.png b/2-ui/1-document/02-dom-nodes/domconsole0.png
new file mode 100644
index 00000000..121c11d7
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/domconsole0.png differ
diff --git a/2-ui/1-document/02-dom-nodes/domconsole0@2x.png b/2-ui/1-document/02-dom-nodes/domconsole0@2x.png
new file mode 100644
index 00000000..a8953395
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/domconsole0@2x.png differ
diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.png b/2-ui/1-document/02-dom-nodes/domconsole1.png
new file mode 100644
index 00000000..c04f015c
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/domconsole1.png differ
diff --git a/2-ui/1-document/02-dom-nodes/domconsole1@2x.png b/2-ui/1-document/02-dom-nodes/domconsole1@2x.png
new file mode 100644
index 00000000..ce0fa0ff
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/domconsole1@2x.png differ
diff --git a/2-ui/1-document/02-dom-nodes/elks.html b/2-ui/1-document/02-dom-nodes/elks.html
new file mode 100644
index 00000000..7d29f3d4
--- /dev/null
+++ b/2-ui/1-document/02-dom-nodes/elks.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  The truth about elks.
+  <ol>
+    <li>An elk is a smart</li>
+    <!-- comment -->
+    <li>...and cunning animal!</li>
+  </ol>
+</body>
+</html>
diff --git a/2-ui/1-document/02-dom-nodes/elks.png b/2-ui/1-document/02-dom-nodes/elks.png
new file mode 100644
index 00000000..03177c40
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/elks.png differ
diff --git a/2-ui/1-document/02-dom-nodes/elks@2x.png b/2-ui/1-document/02-dom-nodes/elks@2x.png
new file mode 100644
index 00000000..e8a15bd5
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/elks@2x.png differ
diff --git a/2-ui/1-document/02-dom-nodes/head.html b/2-ui/1-document/02-dom-nodes/head.html
new file mode 100644
index 00000000..d61883c2
--- /dev/null
+++ b/2-ui/1-document/02-dom-nodes/head.html
@@ -0,0 +1,8 @@
+<style>
+span.devtools {
+  display: inline-block;
+  background-image: url(/article/dom-nodes/toolbarButtonGlyphs.svg);
+  height:16px;
+  width:16px;
+}
+</style>
diff --git a/2-ui/1-document/02-dom-nodes/inspect.png b/2-ui/1-document/02-dom-nodes/inspect.png
new file mode 100644
index 00000000..075cf930
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/inspect.png differ
diff --git a/2-ui/1-document/02-dom-nodes/inspect@2x.png b/2-ui/1-document/02-dom-nodes/inspect@2x.png
new file mode 100644
index 00000000..8743dd29
Binary files /dev/null and b/2-ui/1-document/02-dom-nodes/inspect@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg b/2-ui/1-document/02-dom-nodes/statusbarButtonGlyphs.svg
similarity index 100%
rename from 1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg
rename to 2-ui/1-document/02-dom-nodes/statusbarButtonGlyphs.svg
diff --git a/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg b/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg
new file mode 100644
index 00000000..5bdf20a8
--- /dev/null
+++ b/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg
@@ -0,0 +1,1035 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="168"
+   version="1.1"
+   width="352"
+   xml:space="preserve"
+   id="svg3395"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="toolbarButtonGlyphs.svg"><metadata
+     id="metadata3773"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+     showgrid="true"
+     id="namedview3397"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="155.02536"
+     inkscape:cy="18.05"
+     inkscape:window-width="1920"
+     inkscape:window-height="1172"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3395"
+     inkscape:snap-global="false"
+     showguides="true"
+     inkscape:guide-bbox="true"><inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid3327"
+       snapvisiblegridlinesonly="true"
+       spacingx="32px"
+       spacingy="24px"
+       type="xygrid"
+       visible="true" /></sodipodi:namedview><defs
+     id="defs3400"><linearGradient
+       id="a"><stop
+         offset="0"
+         stop-color="#606eda"
+         id="stop3403" /><stop
+         offset="1"
+         stop-color="#021db2"
+         id="stop3405" /></linearGradient><linearGradient
+       id="b"><stop
+         offset="0"
+         stop-color="#e59290"
+         id="stop3408" /><stop
+         offset="1"
+         stop-color="#e99890"
+         id="stop3410" /></linearGradient><linearGradient
+       id="c"><stop
+         offset="0"
+         stop-color="#c0544f"
+         id="stop3413" /><stop
+         offset="1"
+         stop-color="#d08481"
+         id="stop3415" /></linearGradient><linearGradient
+       id="d"><stop
+         offset="0"
+         stop-color="#ffa801"
+         stop-opacity="0"
+         id="stop3418" /><stop
+         offset="1"
+         stop-color="#f0fb3d"
+         id="stop3420" /></linearGradient><linearGradient
+       id="e"><stop
+         offset="0"
+         stop-color="#ffbd00"
+         stop-opacity="0.65"
+         id="stop3423" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3425" /></linearGradient><linearGradient
+       id="f"><stop
+         offset="0"
+         stop-color="#00d600"
+         stop-opacity="0"
+         id="stop3428" /><stop
+         offset="1"
+         stop-color="#d8fc7b"
+         stop-opacity="0.81"
+         id="stop3430" /></linearGradient><linearGradient
+       id="g"><stop
+         offset="0"
+         stop-color="#00ba00"
+         id="stop3433" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3435" /></linearGradient><linearGradient
+       id="h"><stop
+         offset="0"
+         stop-color="#00a104"
+         id="stop3438" /><stop
+         offset="1"
+         stop-color="#00c605"
+         id="stop3440" /></linearGradient><linearGradient
+       id="i"><stop
+         offset="0"
+         stop-color="#f00"
+         stop-opacity="0"
+         id="stop3443" /><stop
+         offset="1"
+         stop-color="#f0cb68"
+         stop-opacity="0.71"
+         id="stop3445" /></linearGradient><linearGradient
+       id="j"><stop
+         offset="0"
+         stop-color="#e60000"
+         stop-opacity="0.65"
+         id="stop3448" /><stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0.91"
+         id="stop3450" /></linearGradient><linearGradient
+       id="k"><stop
+         offset="0"
+         stop-color="#a10000"
+         id="stop3453" /><stop
+         offset="1"
+         stop-color="#c60000"
+         id="stop3455" /></linearGradient><linearGradient
+       id="l"><stop
+         offset="0"
+         stop-color="#d7687d"
+         id="stop3458" /><stop
+         offset="1"
+         stop-color="#b21402"
+         id="stop3460" /></linearGradient><radialGradient
+       cx="0"
+       cy="0"
+       fx="0"
+       fy="0"
+       gradientTransform="matrix(18,0,0,-18,680,341)"
+       gradientUnits="userSpaceOnUse"
+       id="z"
+       r="1"
+       spreadMethod="pad"><stop
+         offset="0"
+         id="stop3463" /><stop
+         offset="1"
+         stop-opacity="0"
+         id="stop3465" /></radialGradient><radialGradient
+       cx="0"
+       cy="0"
+       fx="0"
+       fy="0"
+       gradientTransform="matrix(9,0,0,9,304,36)"
+       gradientUnits="userSpaceOnUse"
+       id="A"
+       r="1"
+       spreadMethod="pad"
+       xlink:href="#z" /><linearGradient
+       gradientTransform="matrix(0,-0.58333333,-0.58333333,0,118,110)"
+       gradientUnits="userSpaceOnUse"
+       id="m"
+       x1="0"
+       x2="24"
+       xlink:href="#l"
+       y1="0"
+       y2="0" /><linearGradient
+       gradientTransform="matrix(0,1,-1,0,206,0)"
+       gradientUnits="userSpaceOnUse"
+       id="n"
+       x1="96.5"
+       x2="109.5"
+       xlink:href="#b"
+       y1="103"
+       y2="103" /><linearGradient
+       gradientTransform="matrix(0,1,-1,0,207,-17)"
+       gradientUnits="userSpaceOnUse"
+       id="o"
+       x1="113"
+       x2="127"
+       xlink:href="#c"
+       y1="104"
+       y2="104" /><linearGradient
+       gradientTransform="matrix(0,-0.41666666,-0.41666666,0,218,106)"
+       gradientUnits="userSpaceOnUse"
+       id="p"
+       x1="0"
+       x2="24"
+       xlink:href="#l"
+       y1="0"
+       y2="0" /><linearGradient
+       gradientTransform="matrix(0.71428571,0,0,0.71428571,132.28571,37.714287)"
+       gradientUnits="userSpaceOnUse"
+       id="q"
+       x1="113"
+       x2="127"
+       xlink:href="#a"
+       y1="104"
+       y2="104" /><linearGradient
+       gradientTransform="matrix(0,1.3793103,-1.3008129,0,363.08462,-218.35335)"
+       gradientUnits="userSpaceOnUse"
+       id="r"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#k"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,-0.62931035,0.92682926,0,133.46895,244.52849)"
+       gradientUnits="userSpaceOnUse"
+       id="s"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#j"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,0.43965518,0.78048781,0,148.48744,2.1206316)"
+       gradientUnits="userSpaceOnUse"
+       id="t"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#i"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(-0.01506784,1.3792098,-1.3007182,-0.01421029,377.66542,-216.8212)"
+       gradientUnits="userSpaceOnUse"
+       id="u"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#h"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0.00687469,-0.62926454,0.92676181,0.01012483,142.86511,243.44332)"
+       gradientUnits="userSpaceOnUse"
+       id="v"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#g"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(-0.00480288,0.43962318,0.780431,0.00852617,160.60265,1.1603253)"
+       gradientUnits="userSpaceOnUse"
+       id="w"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#f"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,-0.62931035,0.92682926,0,155.46895,244.52849)"
+       gradientUnits="userSpaceOnUse"
+       id="x"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#e"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       gradientTransform="matrix(0,0.43965518,0.78048781,0,170.44325,2.076437)"
+       gradientUnits="userSpaceOnUse"
+       id="y"
+       x1="227.875"
+       x2="235.125"
+       xlink:href="#d"
+       y1="103.15625"
+       y2="103.15625" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#l-0"
+       id="linearGradient3239"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,-0.41666666,-0.41666666,0,249.99999,117)"
+       x1="0"
+       y1="0"
+       x2="24"
+       y2="0" /><linearGradient
+       id="l-0"><stop
+         offset="0"
+         stop-color="#d7687d"
+         id="stop3458-8" /><stop
+         offset="1"
+         stop-color="#b21402"
+         id="stop3460-8" /></linearGradient></defs><path
+     d="M 57,12 53.5,8 39,8 l 0,8 14.5,0"
+     id="path3481"
+     inkscape:connector-curvature="0" /><path
+     d="M 25,36 21.36,32 19.57,32 14,40 21.36,40 25,36 z"
+     id="path3483"
+     inkscape:connector-curvature="0" /><path
+     d="M 7,32 7,40 9.05,40 14,32 7,32 z"
+     id="path3485"
+     inkscape:connector-curvature="0" /><path
+     d="M 9.67,44.55 8.08,43.23 18.84,27.45 20.43,28.77 9.67,44.55 z"
+     id="path3487"
+     inkscape:connector-curvature="0" /><path
+     d="m 16,5 0,2 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 l -1.84,0 c -0.04,1.72 -1.43,3.09 -3.16,3.09 -1.75,0 -3.16,-1.4 -3.16,-3.15 0,-1.75 1.41,-3.16 3.16,-3.16 L 16,11 20.5,8 16,5 z"
+     id="path3489"
+     inkscape:connector-curvature="0" /><path
+     d="m 53,37 -10,0 0,-5 10,0 0,5 z m -12,5 14,0 0,-12 -14,0 0,12 z"
+     id="path3491"
+     inkscape:connector-curvature="0" /><path
+     d="m 10,57 -2,0 0,9 11,0 0,-2 -9,0 z"
+     id="path3493"
+     inkscape:connector-curvature="0" /><path
+     d="m 13,56 7,0 0,5 -7,0 z m -2,-2 0,9 11,0 0,-9 z"
+     id="path3495"
+     inkscape:connector-curvature="0" /><path
+     d="m 80.44,16.94 c -2.48,0 -4.5,-2.02 -4.5,-4.5 0,-0.88 0.26,-1.7 0.69,-2.39 l 6.2,6.2 c -0.69,0.44 -1.51,0.69 -2.39,0.69 m 4.5,-4.5 c 0,0.88 -0.26,1.7 -0.69,2.39 l -6.2,-6.2 c 0.69,-0.44 1.51,-0.69 2.39,-0.69 2.48,0 4.5,2.02 4.5,4.5 M 80.5,6 C 76.91,6 74,8.91 74,12.5 74,16.09 76.91,19 80.5,19 84.09,19 87,16.09 87,12.5 87,8.91 84.09,6 80.5,6"
+     id="path3505"
+     inkscape:connector-curvature="0" /><path
+     d="m 117,65 -10,0 0,-10 10,0 0,10 z"
+     id="path3507"
+     inkscape:connector-curvature="0" /><path
+     d="M 149,8.33 147.67,7 144,10.67 140.33,7 139,8.33 142.67,12 139,15.67 140.33,17 144,13.33 147.67,17 149,15.67 145.33,12 149,8.33 z"
+     id="path3509"
+     inkscape:connector-curvature="0" /><path
+     d="m 44,59 2,3 0,4 4,0 0,-4 2,-3 z"
+     id="path3511"
+     inkscape:connector-curvature="0"
+     style="opacity:0.5;fill:#424242" /><path
+     d="m 46.5,65.23 c 0.32,0.13 0.84,0.24 1.47,0.24 0.59,0 1.14,-0.1 1.53,-0.26 l 0,-3.93 4,-4.57 0,-0.19 -11,0 0,0.22 4,4.57 0,3.93 z M 47.97,67 C 46.81,66.91 45.82,66.71 45,66.01 l 0,-4.12 -4,-4.57 0,-2.32 14,0 0,2.35 -4,4.57 0,4.13 c -0.92,0.67 -2.1,0.94 -3.03,0.95"
+     id="path3513"
+     inkscape:connector-curvature="0" /><path
+     d="M 86,60 76,55 76,65"
+     id="path3515"
+     inkscape:connector-curvature="0" /><path
+     d="m 153,57 -11,0 0,-2 11,0 0,2 z"
+     id="path3517"
+     inkscape:connector-curvature="0"
+     style="opacity:0.2" /><path
+     d="m 142,57 -6,0 0,-2 6,0 0,2 z"
+     id="path3519"
+     inkscape:connector-curvature="0" /><path
+     d="m 145,60 -6,0 0,-2 6,0 0,2 z"
+     id="path3521"
+     inkscape:connector-curvature="0" /><path
+     d="m 150,63 -6,0 0,-2 6,0 0,2 z"
+     id="path3523"
+     inkscape:connector-curvature="0" /><path
+     d="m 152,66 -6,0 0,-2 6,0 0,2 z"
+     id="path3525"
+     inkscape:connector-curvature="0" /><path
+     d="m 170,67 -2,0 0,-9 2,0 0,9 z"
+     id="path3527"
+     inkscape:connector-curvature="0" /><path
+     d="m 173,67 -2,0 0,-11 2,0 0,11 z"
+     id="path3529"
+     inkscape:connector-curvature="0" /><path
+     d="m 176,67 -2,0 0,-13 2,0 0,13 z"
+     id="path3531"
+     inkscape:connector-curvature="0" /><path
+     d="m 179,67 -2,0 0,-4 2,0 0,4 z"
+     id="path3533"
+     inkscape:connector-curvature="0" /><path
+     d="m 182,67 -2,0 0,-9 2,0 0,9 z"
+     id="path3535"
+     inkscape:connector-curvature="0" /><path
+     d="m 185,67 -2,0 0,-11 2,0 0,11 z"
+     id="path3537"
+     inkscape:connector-curvature="0" /><path
+     d="m 208,57 -10,0 0,-2 10,0 0,2 z"
+     id="path3539"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,57 -5,0 0,-2 5,0 0,2 z"
+     id="path3541"
+     inkscape:connector-curvature="0" /><path
+     d="m 200,61 -2,0 0,-2 2,0 0,2 z"
+     id="path3543"
+     inkscape:connector-curvature="0" /><path
+     d="m 213,61 -10,0 0,-2 10,0 0,2 z"
+     id="path3545"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,61 -2,0 0,-2 2,0 0,2 z"
+     id="path3547"
+     inkscape:connector-curvature="0" /><path
+     d="m 205,65 -7,0 0,-2 7,0 0,2 z"
+     id="path3549"
+     inkscape:connector-curvature="0" /><path
+     d="m 217,65 -8,0 0,-2 8,0 0,2 z"
+     id="path3551"
+     inkscape:connector-curvature="0" /><path
+     d="m 274,64 -7,0 0,-8 7,0 0,8 z m -9,2 14,0 0,-12 -14,0 0,12 z"
+     id="path3553"
+     inkscape:connector-curvature="0" /><path
+     d="m 298,12 c 0,3.31 2.69,6 6,6 3.31,0 6,-2.69 6,-6 0,-3.31 -2.69,-6 -6,-6 -3.31,0 -6,2.69 -6,6"
+     id="path3555"
+     inkscape:connector-curvature="0" /><path
+     d="m 295,36 c 0,4.97 4.03,9 9,9 l 0,0 c 4.97,0 9,-4.03 9,-9 l 0,0 c 0,-4.97 -4.03,-9 -9,-9 l 0,0 c -4.97,0 -9,4.03 -9,9"
+     id="path3557"
+     inkscape:connector-curvature="0"
+     style="fill:url(#A)" /><path
+     d="m 298,36 c 0,3.31 2.69,6 6,6 3.31,0 6,-2.69 6,-6 0,-3.31 -2.69,-6 -6,-6 -3.31,0 -6,2.69 -6,6"
+     id="path3559"
+     inkscape:connector-curvature="0" /><path
+     d="m 239,30 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 1.03,0 1.96,-0.31 2.75,-0.84 L 245.56,43 247,41.56 243.19,37.75 C 243.71,36.96 244,36.02 244,35 c 0,-2.76 -2.24,-5 -5,-5 z m 0,2 c 1.66,0 3,1.34 3,3 0,1.66 -1.34,3 -3,3 -1.66,0 -3,-1.34 -3,-3 0,-1.66 1.34,-3 3,-3 z"
+     id="path3561"
+     inkscape:connector-curvature="0" /><path
+     d="m 233.73,63.76 5.25,-3.23 5.32,2.23 4.95,-4.03"
+     stroke-miterlimit="10"
+     id="path3563"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:1.48000002;stroke-miterlimit:10" /><path
+     d="m 231,67 0,-13 -1,0 0,14 21,0 0,-1 z"
+     id="path3565"
+     inkscape:connector-curvature="0" /><path
+     d="m 237,11 -4,0 0,-4 4,0 0,4 z"
+     id="path3567"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,9 -9,0 0,-2 9,0 0,2 z"
+     id="path3569"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,11 -9,0 0,-1 9,0 0,1 z"
+     id="path3571"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,15 -9,0 0,-2 9,0 0,2 z"
+     id="path3573"
+     inkscape:connector-curvature="0" /><path
+     d="m 237,17 -4,0 0,-4 4,0 0,4 z"
+     id="path3575"
+     inkscape:connector-curvature="0" /><path
+     d="m 247,17 -9,0 0,-1 9,0 0,1 z"
+     id="path3577"
+     inkscape:connector-curvature="0" /><path
+     d="m 176,38.13 c -1.18,0 -2.13,-0.96 -2.13,-2.13 0,-1.18 0.96,-2.13 2.13,-2.13 1.18,0 2.13,0.96 2.13,2.13 0,1.18 -0.96,2.13 -2.13,2.13 m 8,-3.73 -2.93,-0.53 1.72,-2.39 -2.26,-2.26 -2.46,1.79 -0.47,-3 -3.2,0 -0.4,3.13 -2.53,-1.92 -2.26,2.26 1.99,2.59 -3.2,0.33 0,3.2 3.33,0.33 -2.12,2.59 2.26,2.26 2.53,-2.12 0.4,3.33 3.2,0 0.4,-3.2 2.53,1.99 2.26,-2.26 -1.79,-2.45 3,-0.47 0,-3.2 z"
+     id="path3579"
+     inkscape:connector-curvature="0" /><path
+     d="m 268.01,35.99 c 0.61,0.28 1.07,0.9 1.07,1.58 0.11,0.85 -0.05,1.72 0.12,2.57 0.27,0.54 1,0.28 1.43,0.55 0.49,0.24 0.48,1.01 -0.06,1.18 -0.56,0.22 -1.18,0.08 -1.74,-0.05 -0.71,-0.2 -1.41,-0.72 -1.5,-1.5 -0.18,-0.89 0.01,-1.8 -0.16,-2.68 -0.22,-0.64 -0.94,-0.9 -1.57,-0.93 -0.58,-0.1 -0.83,-0.94 -0.35,-1.3 0.51,-0.35 1.26,-0.14 1.69,-0.66 0.44,-0.48 0.29,-1.18 0.32,-1.78 0,-0.81 -0.02,-1.77 0.65,-2.34 0.66,-0.54 1.58,-0.71 2.41,-0.63 0.63,0 0.98,0.87 0.4,1.22 -0.44,0.37 -1.2,0.06 -1.51,0.65 -0.14,0.56 -0.05,1.15 -0.07,1.73 -0.01,0.75 -0.05,1.64 -0.72,2.13 -0.12,0.1 -0.26,0.19 -0.4,0.26"
+     id="path3581"
+     inkscape:connector-curvature="0" /><path
+     d="m 276.98,35.99 c -0.67,-0.3 -1.08,-1.02 -1.08,-1.75 -0.07,-0.76 0.03,-1.52 -0.06,-2.28 -0.24,-0.58 -0.98,-0.4 -1.46,-0.59 -0.59,-0.24 -0.48,-1.18 0.14,-1.31 0.73,-0.15 1.52,-0.01 2.18,0.32 0.56,0.28 0.95,0.86 0.99,1.48 0.13,0.83 -0.03,1.68 0.13,2.5 0.2,0.68 0.94,0.83 1.54,0.9 0.56,0.07 0.86,0.8 0.46,1.21 -0.44,0.46 -1.2,0.2 -1.65,0.66 -0.51,0.46 -0.4,1.21 -0.4,1.83 -0.03,0.78 0.06,1.69 -0.52,2.3 -0.74,0.65 -1.8,0.86 -2.75,0.68 -0.52,-0.16 -0.69,-1.01 -0.15,-1.25 0.44,-0.23 1.02,-0.08 1.41,-0.45 0.26,-0.45 0.09,-0.98 0.14,-1.47 0.01,-0.76 -0.07,-1.63 0.43,-2.26 0.18,-0.21 0.42,-0.37 0.66,-0.51"
+     id="path3583"
+     inkscape:connector-curvature="0" /><path
+     d="m 275,15 -2,0 0,-6 2,0 z m -4,0 -2,0 0,-6 2,0 z m 4,-10 -6,0 -4,4 0,6 4,4 6,0 4,-4.12 0,-5.88 z"
+     id="path3585"
+     inkscape:connector-curvature="0" /><path
+     d="m 139.5,33 9,0 -1.5,10 -6,0"
+     id="path3591"
+     inkscape:connector-curvature="0" /><path
+     d="m 147.5,30 -2,0 0,-1 -3,0 0,1 -2,0 c -0.55,0 -1,0.48 -1,1 l 0,1 1,0 7,0 1,0 0,-1 c 0,-0.52 -0.45,-1 -1,-1"
+     id="path3593"
+     inkscape:connector-curvature="0" /><path
+     d="m 317,69 0,-5 -5,5 5,0 z"
+     id="path3595"
+     inkscape:connector-curvature="0" /><path
+     d="m 23,84 -8,-5 0,10"
+     id="path3597"
+     inkscape:connector-curvature="0" /><path
+     d="m 13,89 -3,0 0,-10 3,0 0,10 z"
+     id="path3599"
+     inkscape:connector-curvature="0" /><path
+     d="m 47,88 -3,0 0,-8 3,0 0,8 z"
+     id="path3601"
+     inkscape:connector-curvature="0" /><path
+     d="m 53,88 -3,0 0,-8 3,0 0,8 z"
+     id="path3603"
+     inkscape:connector-curvature="0" /><path
+     d="m 78.5,89 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3605"
+     inkscape:connector-curvature="0" /><path
+     d="m 79,78 0,4 -3,0 4.5,4 4.5,-4 -3,0 0,-4 -3,0 z"
+     id="path3607"
+     inkscape:connector-curvature="0" /><path
+     d="m 110.5,89 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3609"
+     inkscape:connector-curvature="0" /><path
+     d="m 112.5,78 -4.5,4 3,0 0,4 3,0 0,-4 3,0 -4.5,-4 z"
+     id="path3611"
+     inkscape:connector-curvature="0" /><path
+     d="m 142,86.5 c 0,1.1 0.9,2 2,2 1.1,0 2,-0.9 2,-2 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2"
+     id="path3613"
+     inkscape:connector-curvature="0" /><path
+     d="m 137.25,87.03 c 2.55,-8.43 11.4,-8.73 13.94,0"
+     id="path3615"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2.5" /><path
+     d="m 151.68,89 -4.54,-2.76 6.68,-2.1"
+     id="path3617"
+     inkscape:connector-curvature="0" /><path
+     d="m 12,102 -7,-4 0,8"
+     id="path3619"
+     inkscape:connector-curvature="0" /><path
+     d="m 24,106 4,-7 -8,0"
+     id="path3621"
+     inkscape:connector-curvature="0" /><path
+     d="m 8,111 4,7 -8,0"
+     id="path3623"
+     inkscape:connector-curvature="0" /><path
+     d="m 54,105 0,7 -10,0 0,-7 z m 1,8 0,-11 -12,0 0,11 z"
+     id="path3625"
+     inkscape:connector-curvature="0" /><rect
+     height="3"
+     ry="0"
+     width="12"
+     x="73"
+     y="110"
+     id="rect3627"
+     style="opacity:0.81999984" /><rect
+     height="12"
+     width="14"
+     x="168.5"
+     y="78.5"
+     id="rect3629"
+     style="fill:none;stroke:#000000" /><path
+     d="m 180,84.5 -5,-3.25 0,6.5"
+     id="path3631"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="172"
+     y="78"
+     id="rect3633" /><rect
+     height="12"
+     width="14"
+     x="200.5"
+     y="78.5"
+     id="rect3635"
+     style="fill:none;stroke:#000000" /><path
+     d="m 207,84.5 5,-3.25 0,6.5"
+     id="path3637"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="204"
+     y="78"
+     id="rect3639" /><rect
+     height="12"
+     width="14"
+     x="264.5"
+     y="78.5"
+     id="rect3641"
+     style="fill:none;stroke:#000000" /><path
+     d="m 272,84.5 -5,-3.25 0,6.5"
+     id="path3643"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="274"
+     y="78"
+     id="rect3645" /><rect
+     height="12"
+     width="14"
+     x="296.5"
+     y="78.5"
+     id="rect3647"
+     style="fill:none;stroke:#000000" /><path
+     d="m 299,84.5 5,-3.25 0,6.5"
+     id="path3649"
+     inkscape:connector-curvature="0" /><rect
+     height="13"
+     width="1"
+     x="306"
+     y="78"
+     id="rect3651" /><path
+     d="m 118,96 c -3.87,0 -7,3.13 -7,7 0,3.87 3.13,7 7,7 3.87,0 7,-3.13 7,-7 0,-3.87 -3.13,-7 -7,-7"
+     id="path3653"
+     inkscape:connector-curvature="0"
+     style="fill:url(#m)" /><path
+     d="m 111.5,103 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3655"
+     inkscape:connector-curvature="0"
+     style="fill:#f27d82" /><path
+     d="m 121.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3657"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.36000001" /><path
+     d="m 121.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3659"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 138.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3661"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.23999999" /><path
+     d="m 138.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3663"
+     inkscape:connector-curvature="0"
+     style="fill:#676767" /><path
+     d="m 103,110 c 3.87,0 7,-3.13 7,-7 0,-3.87 -3.13,-7 -7,-7 -3.87,0 -7,3.13 -7,7 0,3.87 3.13,7 7,7"
+     id="path3665"
+     inkscape:connector-curvature="0"
+     style="fill:url(#o)" /><path
+     d="m 103,96.5 c -3.59,0 -6.5,2.91 -6.5,6.5 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5"
+     id="path3667"
+     inkscape:connector-curvature="0"
+     style="fill:url(#n)" /><path
+     d="m 106.5,100.93 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3669"
+     inkscape:connector-curvature="0"
+     style="fill:#993c35" /><path
+     d="m 106.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3671"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 143,102.5 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3673"
+     inkscape:connector-curvature="0"
+     style="fill:#bebebe" /><path
+     d="m 153,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3675"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.37000002" /><path
+     d="M 153,99.93 152.07,99 149.5,101.57 146.93,99 146,99.93 l 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3677"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 160,102.5 c 0,3.59 2.91,6.5 6.5,6.5 3.59,0 6.5,-2.91 6.5,-6.5 0,-3.59 -2.91,-6.5 -6.5,-6.5 -3.59,0 -6.5,2.91 -6.5,6.5"
+     id="path3679"
+     inkscape:connector-curvature="0"
+     style="fill:#9f9f9f" /><path
+     d="m 170,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3681"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.36000001" /><path
+     d="M 170,99.93 169.07,99 166.5,101.57 163.93,99 163,99.93 l 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3683"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 184.5,100.43 -0.93,-0.93 -2.57,2.57 -2.57,-2.57 -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3685"
+     inkscape:connector-curvature="0"
+     style="fill-opacity:0.23999999" /><path
+     d="M 184.5,99.93 183.57,99 181,101.57 178.43,99 l -0.93,0.93 2.57,2.57 -2.57,2.57 0.93,0.93 2.57,-2.57 2.57,2.57 0.93,-0.93 -2.57,-2.57 2.57,-2.57 z"
+     id="path3687"
+     inkscape:connector-curvature="0"
+     style="fill:#676767" /><path
+     d="m 131.65,116.21 -1.44,-2.03 -1.21,1.21 2.55,3.61 6.45,-7.67 -1.12,-1.33 z"
+     id="path3689"
+     inkscape:connector-curvature="0" /><path
+     d="m 195.75,97.75 3.5,3.25 -3.5,3.25"
+     id="path3691"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#367cf1;stroke-width:1.5" /><path
+     d="m 195.75,108.75 3.5,3.25 -3.5,3.25"
+     id="path3693"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#939393;stroke-width:1.5" /><path
+     d="m 209,101 c 0,0.55 0.45,1 1,1 0.55,0 1,-0.45 1,-1 0,-0.55 -0.45,-1 -1,-1 -0.55,0 -1,0.45 -1,1"
+     id="path3695"
+     inkscape:connector-curvature="0"
+     style="fill:#bababa" /><path
+     d="m 208.25,97.75 -3.5,3.25 3.5,3.25"
+     id="path3697"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#bababa;stroke-width:1.5" /><path
+     d="m 218,96 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5"
+     id="path3699"
+     inkscape:connector-curvature="0"
+     style="fill:url(#p)" /><path
+     d="m 213.36,101 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+     id="path3701"
+     inkscape:connector-curvature="0"
+     style="fill:#eb3941" /><path
+     d="m 216,99 4,4"
+     id="path3703"
+     inkscape:connector-curvature="0"
+     style="stroke:#ffffff" /><path
+     d="m 220,99 -4,4"
+     id="path3705"
+     inkscape:connector-curvature="0"
+     style="stroke:#ffffff" /><path
+     d="m 203,116 4,-8 4,8 z"
+     id="path3707"
+     inkscape:connector-curvature="0"
+     style="stroke:#c19600;stroke-width:2;stroke-linejoin:round" /><path
+     d="m 203,116 4,-8 4,8 z"
+     id="path3709"
+     inkscape:connector-curvature="0"
+     style="fill:#f4bd00;stroke:#f5bd00;stroke-width:1.5;stroke-linejoin:round" /><path
+     d="m 205.75,109.75 2.5,0 0,2.5 -0.5,1.75 -1.5,0 -0.5,-1.75 0,-2.5 m 0,5.25 2.5,0 0,1.25 -2.5,0"
+     id="path3711"
+     inkscape:connector-curvature="0"
+     style="fill:#ad8601" /><path
+     d="m 206,110 2,0 0,2.25 -0.5,1.75 -1,0 -0.5,-1.75 0,-2.25 m 0,5 2,0 0,1 -2,0"
+     id="path3713"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     d="m 229,106 c -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 0,2.76 -2.24,5 -5,5 z"
+     id="path3715"
+     inkscape:connector-curvature="0"
+     style="fill:url(#r)" /><path
+     d="m 233.5,101 c 0,2.49 -2.01,4.5 -4.5,4.5 -2.49,0 -4.5,-2.01 -4.5,-4.5 0,-2.49 2.01,-4.5 4.5,-4.5 2.49,0 4.5,2.01 4.5,4.5 z"
+     id="path3717"
+     inkscape:connector-curvature="0"
+     style="fill:#dd0000" /><path
+     d="m 229.03,96.53 c 1.97,0 3.56,1.02 3.56,2.28 0,1.26 -1.59,2.28 -3.56,2.28 -1.97,0 -3.56,-1.02 -3.56,-2.28 0,-1.26 1.59,-2.28 3.56,-2.28 z"
+     id="path3719"
+     inkscape:connector-curvature="0"
+     style="fill:url(#s)" /><path
+     d="m 229.03,105.47 c 1.66,0 3,-0.71 3,-1.59 0,-0.88 -1.34,-1.59 -3,-1.59 -1.66,0 -3,0.71 -3,1.59 0,0.88 1.34,1.59 3,1.59 z"
+     id="path3721"
+     inkscape:connector-curvature="0"
+     style="fill:url(#t)" /><path
+     d="m 239.95,106 c -2.76,-0.03 -4.98,-2.29 -4.95,-5.05 0.03,-2.76 2.29,-4.98 5.05,-4.95 2.76,0.03 4.98,2.29 4.95,5.05 -0.03,2.76 -2.29,4.98 -5.05,4.95 z"
+     id="path3723"
+     inkscape:connector-curvature="0"
+     style="fill:url(#u)" /><path
+     d="m 244.5,101.05 c -0.03,2.49 -2.06,4.48 -4.55,4.45 -2.49,-0.03 -4.48,-2.06 -4.45,-4.55 0.03,-2.49 2.06,-4.48 4.55,-4.45 2.49,0.03 4.48,2.06 4.45,4.55 z"
+     id="path3725"
+     inkscape:connector-curvature="0"
+     style="fill:#00be00" /><path
+     d="m 240.08,96.53 c 1.97,0.02 3.55,1.06 3.54,2.32 -0.01,1.26 -1.62,2.26 -3.59,2.24 -1.97,-0.02 -3.55,-1.06 -3.54,-2.32 0.01,-1.26 1.62,-2.26 3.59,-2.24 z"
+     id="path3727"
+     inkscape:connector-curvature="0"
+     style="fill:url(#v)" /><path
+     d="m 239.98,105.41 c 1.66,0.02 3.01,-0.68 3.02,-1.56 0.01,-0.88 -1.33,-1.61 -2.98,-1.63 -1.66,-0.02 -3.01,0.68 -3.02,1.56 -0.01,0.88 1.33,1.61 2.98,1.63 z"
+     id="path3729"
+     inkscape:connector-curvature="0"
+     style="fill:url(#w)" /><path
+     d="m 251,106 c -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 0,2.76 -2.24,5 -5,5 z"
+     id="path3731"
+     inkscape:connector-curvature="0"
+     style="fill:#e5a600" /><path
+     d="m 255.5,101 c 0,2.49 -2.01,4.5 -4.5,4.5 -2.49,0 -4.5,-2.01 -4.5,-4.5 0,-2.49 2.01,-4.5 4.5,-4.5 2.49,0 4.5,2.01 4.5,4.5 z"
+     id="path3733"
+     inkscape:connector-curvature="0"
+     style="fill:#ffbd00" /><path
+     d="m 251.03,96.53 c 1.97,0 3.56,1.02 3.56,2.28 0,1.26 -1.59,2.28 -3.56,2.28 -1.97,0 -3.56,-1.02 -3.56,-2.28 0,-1.26 1.59,-2.28 3.56,-2.28 z"
+     id="path3735"
+     inkscape:connector-curvature="0"
+     style="fill:url(#x)" /><path
+     d="m 250.99,105.42 c 1.66,0 3,-0.71 3,-1.59 0,-0.88 -1.34,-1.59 -3,-1.59 -1.66,0 -3,0.71 -3,1.59 0,0.88 1.34,1.59 3,1.59 z"
+     id="path3737"
+     inkscape:connector-curvature="0"
+     style="fill:url(#y)" /><rect
+     height="12"
+     rx="0.25"
+     ry="0.25"
+     style="fill-opacity:0.38000016;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:0"
+     width="8"
+     x="268"
+     y="102"
+     id="rect3739" /><path
+     d="m 218,107 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5"
+     id="path3741"
+     inkscape:connector-curvature="0"
+     style="fill:url(#q)" /><path
+     d="m 213.36,112 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+     id="path3743"
+     inkscape:connector-curvature="0"
+     style="fill:#2a53cd" /><path
+     d="m 216.93,109.14 c -0.03,-0.53 0.55,-0.97 1.06,-0.83 0.5,0.12 0.79,0.73 0.56,1.18 -0.2,0.44 -0.79,0.61 -1.2,0.36 -0.26,-0.14 -0.42,-0.42 -0.42,-0.71 z m 1.7,5.46 c 0.22,0 0.45,0 0.67,0 0,0.18 0,0.35 0,0.53 -0.96,0 -1.93,0 -2.89,0 0,-0.18 0,-0.35 0,-0.53 0.22,0 0.44,0 0.66,0 0,-1.2 0,-2.41 0,-3.61 -0.22,0 -0.44,0 -0.66,0 0,-0.18 0,-0.35 0,-0.53 0.74,0 1.48,0 2.22,0 0,1.38 0,2.76 0,4.14 z"
+     id="path3745"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><rect
+     height="8"
+     rx="0.25"
+     ry="0.25"
+     style="fill-opacity:0.38000016;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:0"
+     width="12"
+     x="298"
+     y="104"
+     id="rect3747" /><path
+     d="m 12.25,125 c -0.68,0 -1.25,0.57 -1.25,1.25 l 0,9.69 2,-3.31 0,-5.63 3.38,0 1.19,-2 -5.31,0 z m 8.75,3.06 -2,3.31 0,5.63 -3.38,0 -1.19,2 5.31,0 c 0.68,0 1.25,-0.57 1.25,-1.25 l 0,-9.69 z"
+     id="path3749"
+     inkscape:connector-curvature="0"
+     style="stroke-width:2" /><path
+     d="m 10.75,140.75 10.5,-17.5"
+     id="path3751"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2" /><path
+     d="m 46,128 7,0 0,8 -7,0 0,-8 z m 9,-2 -14,0 0,12 14,0 0,-12 z"
+     id="path3753"
+     inkscape:connector-curvature="0" /><rect
+     height="6"
+     width="3"
+     x="73"
+     y="129"
+     id="rect3755" /><rect
+     height="6"
+     width="3"
+     x="77"
+     y="129"
+     id="rect3757" /><rect
+     height="6"
+     width="3"
+     x="81"
+     y="129"
+     id="rect3759" /><rect
+     height="10"
+     rx="1"
+     ry="1"
+     width="15"
+     x="71"
+     y="127"
+     id="rect3761"
+     style="fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round" /><path
+     d="m 86,129 c 3,0 3,0 3,3 0,3 0,3 -3,3"
+     id="path3763"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2" /><path
+     d="m 227.25,107 c -0.7,0 -1.25,0.5 -1.25,1.25 l 0,7.5 c 0,0.7 0.5,1.25 1.25,1.25 l 3.5,0 c 0.7,0 1.25,-0.5 1.25,-1.25 l 0,-7.5 c 0,-0.7 -0.5,-1.25 -1.25,-1.25 l -3.5,0 z m -0.25,1 4,0 0,7 -4,0 0,-7 z m 2,7.25 c 0.4,0 0.75,0.3 0.75,0.75 0,0.4 -0.3,0.75 -0.75,0.75 -0.4,0 -0.75,-0.3 -0.75,-0.75 0,-0.4 0.3,-0.75 0.75,-0.75 z"
+     id="path3765"
+     inkscape:connector-curvature="0" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 110.49999,127.4989 -1,0 2,-2 2,2 -1,0 c 0,0 -0.0345,4.6379 -0.0345,4.0345 l 4.03448,-0.034 0,-1 2,2 -2,2 0,-1 -4.03449,-0.034 0.0345,4.0346 1,0 -2,2 -2,-2 1,0 0.0345,-4.0346 -4.03448,0.034 0,1 -2,-2 2,-2 0,1 4.03448,0.034 z"
+     id="path3550"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccccccc"
+     inkscape:export-filename="/usr/local/google/home/caseq/aa.png"
+     inkscape:export-xdpi="90"
+     inkscape:export-ydpi="90" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2.77777767;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     id="path3635"
+     sodipodi:cx="50"
+     sodipodi:cy="14"
+     sodipodi:rx="3"
+     sodipodi:ry="3"
+     d="m 53,14 a 3,3 0 1 1 -6,0 3,3 0 1 1 6,0 z"
+     transform="matrix(0.36,0,0,0.36,125.49998,127.46)" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 143.48385,129.5 2.54033,-2 -1.5242,0 0,-2 -2,0 -0.0161,2 -1.54033,0 z"
+     id="path4411-7"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 146.49998,132.5 2,2.5 0,-1.4998 2,-1e-4 0,-2.0002 -2,1e-4 0,-1.5 z"
+     id="path4411-7-7"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 143.49998,135.5 -2.5,2 1.5,0 0,2 2,0 0,-2 1.5,0 z"
+     id="path4411-7-7-3"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     d="m 140.49998,132.5 -2,-2.5 0,1.4999 -2,0 0,2.0002 2,-3e-4 0,1.5002 z"
+     id="path4411-7-7-3-5"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" /><path
+     style="fill:#000000;fill-opacity:1;stroke:none"
+     inkscape:connector-curvature="0"
+     d="m 169.19838,130.1487 c 0.0551,-0.1128 0.15339,-0.22 0.2313,-0.3064 0.54584,-0.6074 1.38893,-1.1974 3.00529,-1.5702 l 0,-2.1715 c -1.29309,0.2523 -2.31462,0.6686 -3.304,1.5597 -0.33248,0.3832 -0.50543,0.6247 -0.514,1.1665 -0.007,0.443 0.17732,0.8863 0.58141,1.3219 z m 6.63093,3.1292 c -1.61635,-0.024 -3.10906,-0.2558 -4.62277,-0.764 -2.69382,-0.9037 -3.02857,-2.1697 -3.17032,-2.5931 -0.0958,1.6897 0.028,2.9573 0.0346,3.0648 0.092,1.5004 1.29179,2.6742 2.15751,3.1151 1.7796,0.9067 3.66137,1.3756 5.60099,1.4151 l 0,2.4842 3.25098,-4.6483 -3.25098,-4.6486 0,2.5748 z m -0.32327,-5.2959 c 1.61636,0.01 3.45286,0.3384 5.2454,1.1131 0.73528,0.3177 1.32751,0.7904 1.80821,1.3048 0.33152,-0.1523 0.80672,-0.7308 0.74126,-1.2923 -0.16163,-1.3879 -1.62637,-2.1912 -1.88014,-2.3045 -1.7704,-0.7908 -3.9751,-1.0356 -5.91473,-1.0589 l 0,-1.7442 -2.01317,2.8787 2.01317,2.8783 0,-1.775 z m 8.42363,1.8658 c -0.0824,0.6478 -0.82676,2.0349 -3.89784,2.9138 l 0,4.5247 c 1.13145,-0.3677 2.46495,-1.2956 3.17873,-2.1988 0.2911,-0.3677 0.46906,-0.875 0.57736,-1.242 0.33216,-1.1229 0.18604,-3.3136 0.14175,-3.9977 z"
+     id="Rotate"
+     sketch:type="MSShapeGroup" /><path
+     inkscape:connector-curvature="0"
+     d="M 233,88.08946 V 91 h 2.91054 L 244.1944,82.71614 241.28385,79.8056 233,88.08946 z m 13.76911,-7.9387 c 0.30785,-0.30785 0.30785,-0.79294 0,-1.10079 l -1.81908,-1.81909 c -0.30785,-0.30784 -0.79295,-0.30784 -1.10078,0 l -1.52058,1.52991 2.91054,2.91054 1.5299,-1.52057 z"
+     id="path4" /><path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.99999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.19999981;stroke-opacity:1;stroke-dasharray:none"
+     d="m 107,33 8,0 0,6 -8,0 z"
+     id="path3963"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" /><g
+     id="g3234"><path
+       style="fill:url(#linearGradient3239)"
+       inkscape:connector-curvature="0"
+       id="path3699-5"
+       d="m 250,107 c -2.76,0 -5,2.24 -5,5 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-2.76 -2.24,-5 -5,-5" /><path
+       id="path3701-0"
+       d="m 245.36,112 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+       inkscape:connector-curvature="0"
+       style="fill:#f4979b;fill-opacity:1" /><path
+       style="fill:#ffffff;fill-opacity:1"
+       id="path3689-2"
+       d="m 248.64912,113.55532 -1.12,-1.57887 -0.94113,0.9411 1.98332,2.80777 5.01668,-5.96555 -0.8711,-1.03445 z"
+       inkscape:connector-curvature="0" /></g><g
+     id="Animations-Toggle"
+     transform="translate(199.99866,124.00442)"><path
+       d="M 6,2 12,8 6,14 0,8"
+       id="path3453"
+       inkscape:connector-curvature="0" /><path
+       d="M 8.5,12.5 10,14 16,8 10,2 8.5,3.5 13,8 8.5,12.5 z"
+       id="path3455"
+       inkscape:connector-curvature="0"
+       style="opacity:0.5" /></g><path
+     inkscape:connector-curvature="0"
+     d="m 240.76701,127 -1.53402,0 0,4.23299 -4.23299,0 0,1.53402 4.23299,0 0,4.23299 1.53402,0 0,-4.23299 4.23299,0 0,-1.53402 -4.23299,0 0,-4.23299 z"
+     id="path3509-0" /><path
+     style="fill:none"
+     inkscape:connector-curvature="0"
+     d="m 228.56466,156.76923 h 48 v 48 h -48 z"
+     id="path3712" /><path
+     inkscape:connector-curvature="0"
+     d="m 310.7696,127.0439 -1.81599,-1.81636 c -0.30331,-0.30338 -0.79716,-0.30338 -1.10048,0 l -2.43038,2.43089 -1.48935,-1.49354 -1.10047,1.1007 1.10437,1.1046 L 297,135.30504 V 139 h 3.69419 l 6.9373,-6.93874 1.10048,1.1046 1.10048,-1.10072 -1.49324,-1.49353 2.43039,-2.43089 c 0.3072,-0.30338 0.3072,-0.79345 0,-1.09682 z m -10.72092,10.40033 -1.49324,-1.49354 6.27235,-6.27365 1.49323,1.49354 -6.27234,6.27365 z"
+     id="path3714" /><g
+     id="Page-1"
+     sketch:type="MSPage"
+     transform="translate(328,28)"
+     style="fill:none;stroke:none"><g
+       id="Replay"
+       sketch:type="MSArtboardGroup"
+       style="fill:#000000"><path
+         d="M 2.5858334,13.890843 C 0.99596482,12.428959 0,10.331325 0,8 0,3.58 3.58,0 8,0 c 4.42,0 8,3.58 8,8 0,4.42 -3.58,8 -8,8 l 0,-1.6 0,0 c 3.528,0 6.4,-2.872 6.4,-6.4 C 14.4,4.472 11.528,1.6 8,1.6 4.472,1.6 1.6,4.472 1.6,8 c 0,1.9357374 0.8646098,3.673987 2.2277938,4.848714 L 5.520254,11.428571 5.5353988,15.891545 1.1428571,15.101644 2.5858334,13.890843 z M 6.5066666,11.428571 11.078095,8 6.5066666,4.5714286 l 0,6.8571424 z"
+         id="Shape"
+         sketch:type="MSShapeGroup"
+         inkscape:connector-curvature="0" /></g></g><path
+     d="m 276,127 1,-1 0,-1 -8,0 0,1 1,1 0,5 -2,1 0,2 4,0 -0.0447,3.9835 L 273,140 l 1,-1 0,-4 4,0 0,-2 -2,-1 0,-5 z"
+     id="path3214"
+     inkscape:connector-curvature="0"
+     style="fill:#010101"
+     sodipodi:nodetypes="ccccccccccccccccccc" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3216"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 328,60 c 0,4.42 3.58,8 8,8 4.42,0 8,-3.58 8,-8 0,-4.42 -3.58,-8 -8,-8 -4.42,0 -8,3.58 -8,8 z m 8,6.4 c -3.528,0 -6.4,-2.872 -6.4,-6.4 0,-3.528 2.872,-6.4 6.4,-6.4 3.528,0 6.4,2.872 6.4,6.4 0,3.528 -2.872,6.4 -6.4,6.4 z M 334.50667,63.428571 339.0781,60 l -4.57143,-3.428571 0,6.857142 z"
+     id="Icon"
+     sketch:type="MSShapeGroup"
+     inkscape:connector-curvature="0" /><path
+     d="m 333.6,15.2 1.6,0 0,-6.4 -1.6,0 0,6.4 0,0 z M 336,4 c -4.42,0 -8,3.58 -8,8 0,4.42 3.58,8 8,8 4.42,0 8,-3.58 8,-8 0,-4.42 -3.58,-8 -8,-8 l 0,0 z m 0,14.4 c -3.528,0 -6.4,-2.872 -6.4,-6.4 0,-3.528 2.872,-6.4 6.4,-6.4 3.528,0 6.4,2.872 6.4,6.4 0,3.528 -2.872,6.4 -6.4,6.4 l 0,0 z m 0.8,-3.2 1.6,0 0,-6.4 -1.6,0 0,6.4 0,0 z"
+     id="path3448"
+     sketch:type="MSShapeGroup"
+     inkscape:connector-curvature="0" /><path
+     inkscape:connector-curvature="0"
+     id="path3871"
+     d="m 115,36 4,-4 0,8" /><path
+     d="M 0,24 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z m 0,0 H 24 V 48 H 0 z"
+     id="path3510"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 208.00365,8.385948 c 2.00818,0 3.63802,1.629832 3.63802,3.638017 0,0.472943 -0.0946,0.916781 -0.26194,1.331515 l 2.1246,2.124602 c 1.09868,-0.91678 1.96453,-2.102774 2.49568,-3.456117 -1.25875,-3.194178 -4.36562,-5.457025 -8.00364,-5.457025 -1.01864,0 -1.99363,0.181901 -2.89586,0.509322 l 1.57162,1.571624 c 0.41474,-0.167349 0.85858,-0.261938 1.33152,-0.261938 z m -7.27604,-1.986357 1.65894,1.658936 0.3347,0.334697 c -1.20782,0.938609 -2.15371,2.190087 -2.72124,3.630741 1.25875,3.19418 4.36562,5.457026 8.00364,5.457026 1.12778,0 2.20464,-0.218281 3.1869,-0.611187 l 0.30559,0.305594 2.13188,2.124602 0.92406,-0.924056 -12.90041,-12.90041 -0.92406,0.924057 z m 4.02365,4.023647 1.12779,1.127785 c -0.0364,0.152797 -0.0582,0.31287 -0.0582,0.472942 0,1.207822 0.97499,2.182811 2.18281,2.182811 0.16007,0 0.32014,-0.02183 0.47294,-0.05821 l 1.12779,1.127785 c -0.4875,0.240109 -1.02593,0.38563 -1.60073,0.38563 -2.00819,0 -3.63802,-1.629832 -3.63802,-3.638018 0,-0.574806 0.14552,-1.113233 0.38563,-1.600727 z m 3.13597,-0.567531 2.29195,2.291951 0.0145,-0.116417 c 0,-1.207821 -0.97498,-2.18281 -2.18281,-2.18281 l -0.12369,0.0073 z"
+     id="path3512"
+     inkscape:connector-curvature="0" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3223"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 111.99999,6.690909 c -3.63635,0 -6.74181,2.261818 -7.99999,5.454546 1.25818,3.192727 4.36364,5.454545 7.99999,5.454545 3.63636,0 6.74182,-2.261818 8,-5.454545 -1.25818,-3.192728 -4.36364,-5.454546 -8,-5.454546 z m 0,9.090909 c -2.00726,0 -3.63635,-1.629091 -3.63635,-3.636363 0,-2.007273 1.62909,-3.636364 3.63635,-3.636364 2.00727,0 3.63636,1.629091 3.63636,3.636364 0,2.007272 -1.62909,3.636363 -3.63636,3.636363 z m 0,-5.818182 c -1.20726,0 -2.18181,0.974546 -2.18181,2.181819 0,1.207272 0.97455,2.181818 2.18181,2.181818 1.20727,0 2.18182,-0.974546 2.18182,-2.181818 0,-1.207273 -0.97455,-2.181819 -2.18182,-2.181819 z"
+     id="path3225"
+     inkscape:connector-curvature="0" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3224"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     d="m 338.33036,76.32322 h -4.57143 v 1.52381 h 4.57143 v -1.52381 z m -3.04762,9.90477 h 1.52381 v -4.57143 h -1.52381 v 4.57143 z m 6.11809,-5.03619 1.08191,-1.08191 c -0.32762,-0.38857 -0.68572,-0.75428 -1.07429,-1.07428 l -1.0819,1.0819 c -1.18095,-0.94476 -2.66667,-1.50857 -4.28191,-1.50857 -3.78667,0 -6.85714,3.07047 -6.85714,6.85714 0,3.78667 3.06285,6.85714 6.85714,6.85714 3.79429,0 6.85715,-3.07047 6.85715,-6.85714 0,-1.61524 -0.56382,-3.10095 -1.50096,-4.27428 z m -5.35619,9.60761 c -2.94857,0 -5.33333,-2.38476 -5.33333,-5.33333 0,-2.94857 2.38476,-5.33333 5.33333,-5.33333 2.94857,0 5.33333,2.38476 5.33333,5.33333 0,2.94857 -2.38476,5.33333 -5.33333,5.33333 z"
+     id="path3226"
+     inkscape:connector-curvature="0" /><path
+     d="m 334,114 10,0 0,-5 -10,0 z m -6,0 5,0 0,-12 -5,0 z m 6,-12 0,6 10,0 0,-6 z"
+     id="path3227"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" /><path
+     d="M 0,24 H 24 V 48 H 0 z"
+     id="path3229"
+     inkscape:connector-curvature="0"
+     style="fill:none" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     id="path3518"
+     sodipodi:cx="208.86168"
+     sodipodi:cy="31.304852"
+     sodipodi:rx="1.0606602"
+     sodipodi:ry="1.0606602"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874996,-12.771743)" /><path
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874986,-7.771742)"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     sodipodi:ry="1.0606602"
+     sodipodi:rx="1.0606602"
+     sodipodi:cy="31.304852"
+     sodipodi:cx="208.86168"
+     id="path4288"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     sodipodi:type="arc" /><path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+     id="path4290"
+     sodipodi:cx="208.86168"
+     sodipodi:cy="31.304852"
+     sodipodi:rx="1.0606602"
+     sodipodi:ry="1.0606602"
+     d="m 209.92234,31.304852 a 1.0606602,1.0606602 0 1 1 -2.12132,0 1.0606602,1.0606602 0 1 1 2.12132,0 z"
+     transform="matrix(1.4142135,0,0,1.4142135,-86.874986,-2.771743)" /><path
+     inkscape:connector-curvature="0"
+     id="path3246"
+     d="M 86,38 83.277778,35 72,35 l 0,6 11.277778,0" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.94679004;stroke-miterlimit:3.5;stroke-opacity:1;stroke-dasharray:none"
+     id="rect4034"
+     width="4.0532098"
+     height="0.053209968"
+     x="85.473381"
+     y="32.473396" /><rect
+     y="30.473396"
+     x="87.473381"
+     height="4.0532098"
+     width="0.053209968"
+     id="rect4036"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.94679004;stroke-miterlimit:3.5;stroke-opacity:1;stroke-dasharray:none" /><path
+     inkscape:connector-curvature="0"
+     d="m 335,138 -3.66666,0 C 330.59667,138 330,137.40333 330,136.66667 l 0,-9.33334 C 330,126.59667 330.59667,126 331.33334,126 l 9.33333,0 c 0.73667,0 1.33333,0.59667 1.33333,1.33333 l 0,3.66667 -2,-0.6 0,-2.4 -8,-3.4e-4 0,8.00017 2.22223,3.4e-4 z m 5.25657,-2.70598 2.40637,-2.40638 L 334,130 l 2.88765,8.66294 2.40637,-2.40638 L 343.03746,140 344,139.03745 z"
+     id="inspect_element"
+     sketch:type="MSShapeGroup"
+     sodipodi:nodetypes="cssssssccccccccccccccc" /><path
+     inkscape:connector-curvature="0"
+     d="M 178.71429,5.0064 172.28571,5 C 171.57857,5 171,5.572727 171,6.272727 l 0,11.454546 c 0,0.7 0.57857,1.272727 1.28571,1.272727 l 6.42858,0 C 179.42143,19 180,18.427273 180,17.727273 l 0,-11.454546 c 0,-0.7 -0.57857,-1.266363 -1.28571,-1.266363 l 0,0 z m 0,11.448182 -6.42858,0 0,-8.909091 6.42858,0 0,8.909091 0,0 z"
+     id="device-mode"
+     sketch:type="MSShapeGroup" /><path
+     d="m 23,157 -2,0 0,2 2,0 z"
+     id="path3288" /><path
+     d="m 23,161 -2,0 0,2 c 1,0 2,-1 2,-2 z"
+     id="path3286" /><path
+     d="m 23,153 -2,0 0,2 2,0 z"
+     id="path3284" /><path
+     d="m 21,149 0,2 2,0 c 0,-1 -1,-2 -2,-2 z"
+     id="path3282" /><path
+     d="m 11,163 4,0 0,-6 -6,0 0,4 c 0,1.1 0.9,2 2,2 z"
+     id="path3280"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="scccss" /><path
+     d="m 11,153 -2,0 0,2 2,0 z"
+     id="path3278" /><path
+     d="m 19,149 -2,0 0,2 2,0 z"
+     id="path3276" /><path
+     d="m 19,161 -2,0 0,2 2,0 z"
+     id="path3274" /><path
+     d="m 11,149 c -1,0 -2,1 -2,2 l 2,0 z"
+     id="path3272" /><path
+     d="m 15,149 -2,0 0,2 2,0 z"
+     id="path3231" /><g
+     id="g4042"><path
+       transform="matrix(1.1939089,0,0,1.1367841,-44.307792,-20.636427)"
+       d="m 80.87534,155.38257 a 4.3973203,4.6182914 0 1 1 -8.794641,0 4.3973203,4.6182914 0 1 1 8.794641,0 z"
+       sodipodi:ry="4.6182914"
+       sodipodi:rx="4.3973203"
+       sodipodi:cy="155.38257"
+       sodipodi:cx="76.47802"
+       id="path4006"
+       style="fill:none;stroke:#000000;stroke-width:1.2875576;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" /><rect
+       ry="0"
+       rx="0.38569456"
+       y="155"
+       x="44"
+       height="2"
+       width="6"
+       id="rect4010"
+       style="fill:#000000;fill-opacity:1;stroke:none" /></g><path
+     d="M 76.94,152 76,152.94 79.05334,156 76,159.06 l 0.94,0.94 4,-4 z"
+     id="path3240"
+     inkscape:connector-curvature="0" /><path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path3242" /><path
+     d="M 80.94,152 80,152.94 83.05334,156 80,159.06 l 0.94,0.94 4,-4 z"
+     id="path3240-4"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
new file mode 100644
index 00000000..decfa62c
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
@@ -0,0 +1,27 @@
+There are many ways, for instance:
+
+
+The `<div>` DOM node:
+
+```js
+document.body.firstElementChild
+// or
+document.body.children[0]
+// or (the first node is space, so we take 2nd)
+document.body.childNodes[1]
+```
+
+The `<ul>` DOM node:
+
+```js
+document.body.lastElementChild
+// or
+document.body.children[1]
+```
+
+The second `<li>` (with Pete):
+
+```js
+// get <ul>, and then get its last element child
+document.body.lastElementChild.lastElementChild
+```
diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md
new file mode 100644
index 00000000..4a9e741a
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# DOM children
+
+For the page:
+
+```html
+<html>
+<body>
+  <div>Users:</div>
+  <ul>
+    <li>John</li>
+    <li>Pete</li>
+  </ul>
+</body>
+</html>
+```
+
+How to access:
+- The `<div>` DOM node?
+- The `<ul>` DOM node?
+- The second `<li>` (with Pete)?
diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
new file mode 100644
index 00000000..e962eb66
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
@@ -0,0 +1,4 @@
+1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`, so if there are children, then yes.
+2. No, wrong, because `elem.children[0]` is the first child among elements. But there may be non-element nodes before it. So `previousSibling` may be a text node.
+
+Please note that for both cases if there are no children, then there will be an error. For instance, if `elem.lastChild` is `null`, we can't access `elem.lastChild.nextSibling`.
diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md
new file mode 100644
index 00000000..235e83a0
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md
@@ -0,0 +1,10 @@
+importance: 5
+
+---
+
+# The sibling question
+
+If `elem` -- is an arbitrary DOM element node...
+
+- Is it true that `elem.lastChild.nextSibling` is always `null`?
+- Is it true that `elem.children[0].previousSibling` is always `null` ?
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md
new file mode 100644
index 00000000..f2aa8630
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md
@@ -0,0 +1 @@
+We'll be using `rows` and `cells` properties to access diagonal table cells.
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.view/index.html b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.view/index.html
new file mode 100644
index 00000000..91e80566
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.view/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+
+    td {
+      border: 1px solid black;
+      padding: 3px 5px;
+    }
+  </style>
+</head>
+
+<body>
+  <table>
+    <tr>
+      <td>1:1</td>
+      <td>2:1</td>
+      <td>3:1</td>
+      <td>4:1</td>
+      <td>5:1</td>
+    </tr>
+    <tr>
+      <td>1:2</td>
+      <td>2:2</td>
+      <td>3:2</td>
+      <td>4:2</td>
+      <td>5:2</td>
+    </tr>
+    <tr>
+      <td>1:3</td>
+      <td>2:3</td>
+      <td>3:3</td>
+      <td>4:3</td>
+      <td>5:3</td>
+    </tr>
+    <tr>
+      <td>1:4</td>
+      <td>2:4</td>
+      <td>3:4</td>
+      <td>4:4</td>
+      <td>5:4</td>
+    </tr>
+    <tr>
+      <td>1:5</td>
+      <td>2:5</td>
+      <td>3:5</td>
+      <td>4:5</td>
+      <td>5:5</td>
+    </tr>
+  </table>
+  <script>
+    let table = document.body.firstElementChild;
+
+    for (let i = 0; i < table.rows.length; i++) {
+      let row = table.rows[i];
+      row.cells[i].style.backgroundColor = 'red';
+    }
+  </script>
+</body>
+</html>
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/source.view/index.html b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/source.view/index.html
new file mode 100644
index 00000000..ad835f9f
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/source.view/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+
+    td {
+      border: 1px solid black;
+      padding: 3px 5px;
+    }
+  </style>
+</head>
+
+<body>
+  <table>
+    <tr>
+      <td>1:1</td>
+      <td>2:1</td>
+      <td>3:1</td>
+      <td>4:1</td>
+      <td>5:1</td>
+    </tr>
+    <tr>
+      <td>1:2</td>
+      <td>2:2</td>
+      <td>3:2</td>
+      <td>4:2</td>
+      <td>5:2</td>
+    </tr>
+    <tr>
+      <td>1:3</td>
+      <td>2:3</td>
+      <td>3:3</td>
+      <td>4:3</td>
+      <td>5:3</td>
+    </tr>
+    <tr>
+      <td>1:4</td>
+      <td>2:4</td>
+      <td>3:4</td>
+      <td>4:4</td>
+      <td>5:4</td>
+    </tr>
+    <tr>
+      <td>1:5</td>
+      <td>2:5</td>
+      <td>3:5</td>
+      <td>4:5</td>
+      <td>5:5</td>
+    </tr>
+  </table>
+  <script>
+    let table = document.body.firstElementChild;
+
+    // your code
+  </script>
+</body>
+</html>
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md
new file mode 100644
index 00000000..23be59fc
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Select all diagonal cells
+
+Write the code to paint all diagonal table cells in red.
+
+You'll need to get all diagonal `<td>` from the `<table>` and paint them using the code:
+
+```js
+// td should be the reference to the table cell
+td.style.backgroundColor = 'red';
+```
+
+The result should be:
+
+[iframe src="solution" height=180]
diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md
new file mode 100644
index 00000000..ab96e5f7
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/article.md
@@ -0,0 +1,325 @@
+libs:
+  - d3
+  - domtree
+
+---
+
+
+# Walking the DOM
+
+DOM allows to do anything with elements and their contents, but first we need to reach the corresponding DOM object, get it into a variable, and then we are able to modify it.
+
+All operations on DOM start with the `document` object. From it we can access any node.
+
+[cut]
+
+Here's a picture of links that allow to travel between DOM nodes:
+
+![](dom-links.png)
+
+Let's discuss them in more detail.
+
+## On top: documentElement and body
+
+The topmost tree nodes are available directly as `document` properties:
+
+`<html>` = `document.documentElement`
+: The topmost document node is `document.documentElement`. That's DOM node of `<html>` tag.
+
+`<body>` = `document.body`
+: Another widely used DOM node is the `<body>` element -- `document.body`.
+
+`<head>` = `document.head`
+: The `<head>` tag is available as `document.head`.
+
+````warn header="There's a catch: `document.body` can be `null`"
+A script cannot access an element that doesn't exist at the moment of running.
+
+In particular, if a script is inside `<head>`, then `document.body` is unavailable, because the browser did not read it yet.
+
+So, in the example below the first `alert` shows `null`:
+
+```html run
+<html>
+
+<head>
+  <script>
+*!*
+    alert( "From HEAD: " + document.body ); // null, there's no <body> yet
+*/!*
+  </script>
+</head>
+
+<body>
+
+  <script>
+    alert( "From BODY: " + document.body ); // HTMLBodyElement, now it exists
+  </script>
+
+</body>
+</html>
+```
+````
+
+```smart header="In the DOM world `null` means \"doesn't exist\""
+In the DOM, the `null` value means "doesn't exist" or "no such node".
+```
+
+## Children: childNodes, firstChild, lastChild
+
+There are two terms that we'll use from now on:
+
+- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `<head>` and `<body>` are children of `<html>` element.
+- **Descendants** -- all elements that are nested in the given one, including children, their children and so on.
+
+For instance, here `<body>` has children `<div>` and `<ul>` (and few blank text nodes):
+
+```html run
+<html>
+<body>
+  <div>Begin</div>
+
+  <ul>
+    <li>
+      <b>Information</b>
+    </li>
+  </ul>
+</body>
+</html>
+```
+
+...And if we ask for all descendants of `<body>`, then we get direct children `<div>`, `<ul>` and also more nested elements like `<li>` (being a child of `<ul>`) and `<b>` (being a child of `<li>`) -- the whole subtree.
+
+**The `childNodes` collection provides access to all child nodes, including text nodes.**
+
+The example below shows children of `document.body`:
+
+```html run
+<html>
+<body>
+  <div>Begin</div>
+
+  <ul>
+    <li>Information</li>
+  </ul>
+
+  <div>End</div>
+
+  <script>
+*!*
+    for (let i = 0; i < document.body.childNodes.length; i++) {
+      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
+    }
+*/!*
+  </script>
+  ...more stuff...
+</body>
+</html>
+```
+
+Please note an interesting detail here. If we run the example above, the last element shown is `<script>`. In fact, the document has more stuff below, but at the moment of the script execution the browser did not read it yet, so the script doesn't see it.
+
+**Properties `firstChild` and `lastChild` give fast access to the first and last children.**
+
+They are just shorthands. If there exist child nodes, then the following is always true:
+```js
+elem.childNodes[0] === elem.firstChild
+elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
+```
+
+There's also a special function `elem.hasChildNodes()` to check whether there are any child nodes.
+
+### DOM collections
+
+As we can see, `childNodes` looks like an array. But actually it's not an array, but rather a *collection* -- a special array-like iterable object.
+
+There are two important consequences:
+
+1. We can use `for..of` to iterate over it:
+  ```js
+  for (let node of document.body.childNodes) {
+    alert(node); // shows all nodes from the collection
+  }
+  ```
+  That's because it's iterable (provides the `Symbol.iterator` property, as required).
+
+2. Array methods won't work, because it's not an array:
+  ```js run
+  alert(document.body.childNodes.filter); // undefined (there's no filter method!)
+  ```
+
+The first thing is nice. The second is tolerable, because we can use `Array.from` to create a "real" array from the collection, if we want array methods:
+
+  ```js run
+  alert( Array.from(document.body.childNodes).filter ); // now it's there
+  ```
+
+```warn header="DOM collections are read-only"
+DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.
+
+We can't replace an child by something else assigning `childNodes[i] = ...`.
+
+Changing DOM needs other methods, we'll see them in the next chapter.
+```
+
+```warn header="DOM collections are live"
+Almost all DOM collections with minor exceptions are *live*. In other words, they reflect the current state of DOM.
+
+If we keep a reference to `elem.childNodes`, and add/remove nodes into DOM, then they appear in the collection automatically.
+```
+
+````warn header="Don't use `for..in` to loop over collections"
+Collections are iterable using `for..of`. Sometimes people try to use `for..in` for that.
+
+Please, don't. The `for..in` loop iterates over all enumerable properties. And collections have some "extra" rarely used properties that we usually do not want to get:
+
+```html run
+<body>
+<script>
+  // shows 0, 1, length, item, values and more.
+  for(let prop in document.body.childNodes) alert(prop);
+</script>
+</body>
+````
+
+## Siblings and the parent
+
+*Siblings* are nodes that are children of the same parent. For instance, `<head>` and `<body>` are siblings:
+
+- `<body>` is said to be the "next" or "right" sibling of `<head>`,
+- `<head>` is said to be the "previous" or "left" sibling of `<body>`.
+
+The parent is available as `parentNode`.
+
+The next node in the same parent (next sibling) is `nextSibling`, and the previous one is `previousSibling`.
+
+For instance:
+
+```html run
+<html><head></head><body><script>
+  // HTML is "dense" to evade extra "blank" text nodes.
+
+  // parent of <body> is <html>
+  alert( document.body.parentNode === document.documentElement ); // true
+
+  // after <head> goes <body>
+  alert( document.head.nextSibling ); // HTMLBodyElement
+
+  // before <body> goes <head>
+  alert( document.body.previousSibling ); // HTMLHeadElement
+</script></body></html>
+```
+
+## Element-only navigation
+
+Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist.
+
+But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page.
+
+So let's see more navigation links that only take *element nodes* into account:
+
+![](dom-links-elements.png)
+
+The links are similar to those given above, just with `Element` word inside:
+
+- `children` -- only those children that are element nodes.
+- `firstElementChild`, `lastElementChild` -- first and last element children.
+- `previousElementSibling`, `nextElementSibling` -- neighbour elements.
+- `parentElement` -- parent element.
+
+````smart header="Why `parentElement`? Can the parent be *not* an element?"
+The `parentElement` property returns the "element" parent, while `parentNode` returns "any node" parent. These properties are usually the same: they both get the parent.
+
+With the one exception of `document.documentElement`:
+
+```js run
+alert( document.documentElement.parentNode ); // document
+alert( document.documentElement.parentElement ); // null
+```
+
+In other words, the `documentElement` (`<html>`) is the root node. Formally, it has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.
+
+Sometimes that matters when we're walking over the chain of parents and call a method on each of them, but `document` doesn't have it, so we exclude it.
+````
+
+Let's modify one of examples above: replace `childNodes` with `children`. Now it shows only elements:
+
+```html run
+<html>
+<body>
+  <div>Begin</div>
+
+  <ul>
+    <li>Information</li>
+  </ul>
+
+  <div>End</div>
+
+  <script>
+*!*
+    for (let elem of document.body.children) {
+      alert(elem); // DIV, UL, DIV, SCRIPT
+    }
+*/!*
+  </script>
+  ...
+</body>
+</html>
+```
+
+## More links: tables [#dom-navigation-tables]
+
+Till now we described the basic navigation properties.
+
+Certain types of DOM elements may provide additional properties, specific to their type, for convenience.
+
+Tables are a great example and important particular case of that.
+
+**`<table>`** element supports (in addition to the given above) these properties:
+- `table.rows` -- the collection of `<tr>` elements of the table.
+- `table.caption/tHead/tFoot` -- references to elements `<caption>`, `<thead>`, `<tfoot>`.
+- `table.tBodies` -- the collection of `<tbody>` elements (can be many according to the standard).
+
+**`<thead>`, `<tfoot>`, `<tbody>`** elements provide the `rows` property:
+- `tbody.rows` -- the collection of `<tr>` inside.
+
+**`<tr>`:**
+- `tr.cells` -- the collection of `<td>` and `<th>` cells inside the given `<tr>`.
+- `tr.sectionRowIndex` -- the number of the given `<tr>` inside the enclosing `<thead>/<tbody>`.
+- `tr.rowIndex` -- the number of the `<tr>` in the table.
+
+**`<td>` and `<th>`:**
+- `td.cellIndex` -- the number of the cell inside the enclosing `<tr>`.
+
+An example of usage:
+
+```html run height=100
+<table id="table">
+  <tr>
+    <td>one</td><td>two</td>
+  </tr>
+  <tr>
+    <td>three</td><td>four</td>
+  </tr>
+</table>
+
+<script>
+  // get the content of the first row, second cell
+  alert( table.*!*rows[0].cells[1]*/!*.innerHTML ) // "two"
+</script>
+```
+
+The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
+
+There are also additional navigation properties for HTML forms. We'll look at them later when start working with forms.
+
+# Summary
+
+Given a DOM node, we can go to its immediate neighbours using navigation properties.
+
+There are two main sets of them:
+
+- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
+- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.
+
+Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content.
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements.png b/2-ui/1-document/03-dom-navigation/dom-links-elements.png
new file mode 100644
index 00000000..f7eef5d1
Binary files /dev/null and b/2-ui/1-document/03-dom-navigation/dom-links-elements.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png
new file mode 100644
index 00000000..cf4e220c
Binary files /dev/null and b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links.png b/2-ui/1-document/03-dom-navigation/dom-links.png
new file mode 100644
index 00000000..25b25b37
Binary files /dev/null and b/2-ui/1-document/03-dom-navigation/dom-links.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links@2x.png b/2-ui/1-document/03-dom-navigation/dom-links@2x.png
new file mode 100644
index 00000000..84cd33d4
Binary files /dev/null and b/2-ui/1-document/03-dom-navigation/dom-links@2x.png differ
diff --git a/2-ui/1-document/03-dom-navigation/head.html b/2-ui/1-document/03-dom-navigation/head.html
new file mode 100644
index 00000000..5d763505
--- /dev/null
+++ b/2-ui/1-document/03-dom-navigation/head.html
@@ -0,0 +1,8 @@
+<style>
+#travel-dom-comment {
+  font-style: italic;
+}
+#travel-dom-control ul {
+  margin: 6px 0;
+}
+</style>
\ No newline at end of file
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
new file mode 100644
index 00000000..0ada42ac
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
@@ -0,0 +1,36 @@
+There are many ways to do it.
+
+Here are some of them:
+
+```js
+// 1. The table with `id="age-table"`.
+let table = document.getElementById('age-table')
+
+// 2. All label elements inside that table
+table.getElementsByTagName('label')
+// or
+document.querySelectorAll('#age-table label')
+
+// 3. The first td in that table (with the word "Age").
+table.rows[0].cells[0]
+// or
+table.getElementsByTagName('td')[0]
+// or
+table.querySelector('td')
+
+// 4. The form with the name "search".
+// assuming there's only one element with name="search"
+let form = document.getElementsByName('search')[0]
+// or, form specifically
+document.querySelector('form[name="search"]')
+
+// 5. The first input in that form.
+form.getElementsByTagName('input')
+// or
+form.querySelector('input')
+
+// 6. The last input in that form.
+// there's no direct query for that
+let inputs = form.querySelectorAll('input') // search all
+inputs[inputs.length-1] // take last
+```
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html
new file mode 100644
index 00000000..5b92c34b
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <form name="search">
+    <label>Search the site:
+      <input type="text" name="search">
+    </label>
+    <input type="submit" value="Search!">
+  </form>
+
+  <hr>
+
+  <form name="search-person">
+    Search the visitors:
+    <table id="age-table">
+      <tr>
+        <td>Age:</td>
+        <td id="age-list">
+          <label>
+            <input type="radio" name="age" value="young">less than 18</label>
+          <label>
+            <input type="radio" name="age" value="mature">18-50</label>
+          <label>
+            <input type="radio" name="age" value="senior">more than 50</label>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Additionally:</td>
+        <td>
+          <input type="text" name="info[0]">
+          <input type="text" name="info[1]">
+          <input type="text" name="info[2]">
+        </td>
+      </tr>
+
+    </table>
+
+    <input type="submit" value="Search!">
+  </form>
+</body>
+</html>
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
new file mode 100644
index 00000000..4d4faeb2
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
@@ -0,0 +1,18 @@
+importance: 4
+
+---
+
+# Search for elements
+
+Here's the document with the table and form.
+
+How to find?
+
+1. The table with `id="age-table"`.
+2. All `label` elements inside that table (there should be 3 of them).
+3. The first `td` in that table (with the word "Age").
+4. The `form` with the name `search`.
+5. The first `input` in that form.
+6. The last `input` in that form.
+
+Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
new file mode 100644
index 00000000..5bb2effa
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
@@ -0,0 +1,19 @@
+Let's make a loop over `<li>`:
+
+```js
+for (let li of document.querySelector('li')) {
+  ...
+}
+```
+
+In the loop we need to get the text inside every `li`. We can read it directly from the first child node, that is the text node:
+
+```js
+for (let li of document.querySelector('li')) {
+  let title = li.firstChild.data;
+
+  // title is the text in <li> before any other nodes
+}
+```
+
+Then we can get the number of descendants `li.getElementsByTagName('li')`.
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html
new file mode 100644
index 00000000..d712bb9d
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <ul>
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    for (let li of document.querySelector('li')) {
+      // get the title from the text node
+      let title = li.firstChild.data;
+
+      title = title.trim(); // remove extra spaces from ends
+
+      // get the descendants count
+      let count = li.getElementsByTagName('li').length;
+
+      alert(title + ': ' + count);
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html b/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html
new file mode 100644
index 00000000..fbfacaa8
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <ul>
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    // ... your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md b/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md
new file mode 100644
index 00000000..f2d9edc6
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Count descendants
+
+There's a tree structured as nested `ul/li`.
+
+Write the code that for each `<li>` shows:
+
+1. What's the text inside it (without the subtree)
+2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
+
+[demo src="solution"]
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
new file mode 100644
index 00000000..9f9e72da
--- /dev/null
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -0,0 +1,380 @@
+# Searching: getElement* and querySelector*
+
+DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
+
+There are additional searching methods for that.
+[cut]
+
+## document.getElementById or just id
+
+If an element has the `id` attribute, then there's a global variable by the name from that `id`.
+
+We can use it to access the element, like this:
+
+```html run
+<div id="*!*elem*/!*">
+  <div id="*!*elem-content*/!*">Element</div>
+</div>
+
+<script>
+  alert(elem); // DOM-element with id="elem"
+  alert(window.elem); // accessing global variable like this also works
+
+  // for elem-content things are a bit more complex
+  // that has a dash inside, so it can't be a variable name
+  alert(window['elem-content']); // ...but accessable using square brackets [...]
+</script>
+```
+
+That's unless we declare the same-named variable by our own:
+
+```html run untrusted height=0
+<div id="elem"></div>
+
+<script>
+  let elem = 5;
+
+  alert(elem); // the variable overrides the element
+</script>
+```
+
+The behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don't have HTML in view, it's not obvious where the variable comes from.
+
+The better alternative is to use a special method `document.getElementById(id)`.
+
+For instance:
+
+```html run
+<div id="elem">
+  <div id="elem-content">Element</div>
+</div>
+
+<script>
+*!*
+  let elem = document.getElementById('elem');
+*/!*
+
+  elem.style.background = 'red';
+</script>
+```
+
+Here in the tutorial we'll often use `id` to directly reference an element, but that's only to keep things short. In real life `document.getElementById` is the preferred method.
+
+```smart header="There can be only one"
+The `id` must be unique. There can be only one element in the document with the given `id`.
+
+If there are multiple elements with the same `id`, then the behavior of corresponding methods is unpredictable. The browser may return any of them at random. So please stick to the rule and keep `id` unique.
+```
+
+```warn header="Only `document.getElementById`, not `anyNode.getElementById`"
+The method `getElementById` that can be called only on `document` object. It looks for the given `id` in the whole document.
+```
+
+## getElementsBy*
+
+There are also other methods to look for nodes:
+
+- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags".
+
+For instance:
+```js
+// get all divs in the document
+let divs = document.getElementsByTagName('div');
+```
+
+This method is callable in the context of any DOM element.
+
+Let's find all `input` inside the table:
+
+```html run height=50
+<table id="table">
+  <tr>
+    <td>Your age:</td>
+
+    <td>
+      <label>
+        <input type="radio" name="age" value="young" checked> less than 18
+      </label>
+      <label>
+        <input type="radio" name="age" value="mature"> from 18 to 50
+      </label>
+      <label>
+        <input type="radio" name="age" value="senior"> more than 60
+      </label>
+    </td>
+  </tr>
+</table>
+
+<script>
+*!*
+  let inputs = table.getElementsByTagName('input');
+*/!*
+
+  for (let input of inputs) {
+    alert( input.value + ': ' + input.checked );
+  }
+</script>
+```
+
+```warn header="Don't forget the `\"s\"` letter!"
+Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of <code>getElement<b>s</b>ByTagName</code>.
+
+The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside.
+```
+
+````warn header="It returns a collection, not an element!"
+Another widespread novice mistake is to write like:
+
+```js
+// doesn't work
+document.getElementsByTagName('input').value = 5;
+```
+
+That won't work, because it takes a *collection* of inputs and assigns the value to it, rather to elements inside it.
+
+We should either iterate over the collection or get an element by the number, and then assign, like this:
+
+```js
+// should work (if there's an input)
+document.getElementsByTagName('input')[0].value = 5;
+```
+````
+
+There are also other rarely used methods of this kind:
+
+- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. Elements may have other classes too.
+- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Exists for historical reasons, very rarely used, we mention it here only for completeness.
+
+For instance:
+
+```html run height=50
+<form name="my-form">
+  <div class="article">Article</div>
+  <div class="long article">Long article</div>
+</form>
+
+<script>
+  // find by name attribute
+  let form = document.getElementsByName('my-form')[0];
+
+  // find by class inside the form
+  let articles = form.getElementsByClassName('article');
+  alert(articles.length); // 2, found two elements with class "article"
+</script>
+```
+
+## querySelectorAll [#querySelectorAll]
+
+Now goes the heavy artillery.
+
+The call to `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. That's the most often used and powerful method.
+
+Here we look for all `<li>` elements that are last children:
+
+```html run
+<ul>
+  <li>The</li>
+  <li>test</li>
+</ul>
+<ul>
+  <li>has</li>
+  <li>passed</li>
+</ul>
+<script>
+*!*
+  let elements = document.querySelectorAll('ul > li:last-child');
+*/!*
+
+  for (let elem of elements) {
+    alert(elem.innerHTML); // "test", "passed"
+  }
+</script>
+```
+
+This method is indeed powerful, because any CSS selector can be used.
+
+```smart header="Can use pseudo-classes as well"
+Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is  over now (in nesting order: from the outmost `<html>` to the most nested one).
+```
+
+
+## querySelector [#querySelector]
+
+The call to `elem.querySelector(css)` returns the first element for the given CSS selector.
+
+In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and shorter to write.
+
+## matches
+
+Previous methods were searching the DOM.
+
+The [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`.
+
+The method comes handy when we are iterating over elements (like in array or something) and trying to filter those that interest us.
+
+For instance:
+
+```html run
+<a href="http://example.com/file.zip">...</a>
+<a href="http://ya.ru">...</a>
+
+<script>
+  // can be any collection instead of document.body.children
+  for (let elem of document.body.children) {
+*!*
+    if (elem.matches('a[href$="zip"]')) {
+*/!*
+      alert("The archive reference: " + elem.href );
+    }
+  }
+</script>
+```
+
+## closest
+
+All elements that are directly above the given one are called its *ancestors*.
+
+In other words, ancestors are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top.
+
+The method `elem.closest(css)` looks the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search.
+
+In other words, the method `closest` goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned.
+
+For instance:
+
+```html run
+<h1>Contents</h1>
+
+<div class="contents">
+  <ul class="book">
+    <li class="chapter">Chapter 1</li>
+    <li class="chapter">Chapter 1</li>
+  </ul>
+</div>
+
+<script>
+  let chapter = document.querySelector('.chapter'); // LI
+
+  alert(chapter.closest('.book')); // UL
+  alert(chapter.closest('.contents')); // DIV
+
+  alert(chapter.closest('h1')); // null (because h1 is not an ancestor)
+</script>
+```
+
+## Live collections
+
+All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document and "auto-update" when it changes.
+
+In the example below, there are two scripts.
+
+1. The first one creates a reference to the collection of `<div>`. As of now, it's length is `1`.
+2. The second scripts runs after the browser meets one more `<div>`, so it's length is `2`.
+
+```html run
+<div>First div</div>
+
+<script>
+  let divs = document.getElementsByTagName('div');
+  alert(divs.length); // 1
+</script>
+
+<div>Second div</div>
+
+<script>
+*!*
+  alert(divs.length); // 2
+*/!*
+</script>
+```
+
+In contrast, `querySelectorAll` returns a *static* collection. It's like a fixed array of elements.
+
+If we use it instead, then both scripts output `1`:
+
+
+```html run
+<div>First div</div>
+
+<script>
+  let divs = document.querySelectorAll('div');
+  alert(divs.length); // 1
+</script>
+
+<div>Second div</div>
+
+<script>
+*!*
+  alert(divs.length); // 1
+*/!*
+</script>
+```
+
+Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document.
+
+Here we used separate scripts to illustrate how the element addition affects the collection, but any DOM manipulations affect them. Soon we'll see more of them.
+
+## Summary
+
+There are 6 main methods to search for nodes in DOM:
+
+<table>
+<thead>
+<tr>
+<td>Method</td>
+<td>Searches by...</td>
+<td>Can call on an element?</td>
+<td>Live?</td>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>getElementById</code></td>
+<td><code>id</code></td>
+<td>-</td>
+<td>-</td>
+</tr>
+<tr>
+<td><code>getElementsByName</code></td>
+<td><code>name</code></td>
+<td>-</td>
+<td>✔</td>
+</tr>
+<tr>
+<td><code>getElementsByTagName</code></td>
+<td>tag or <code>'*'</code></td>
+<td>✔</td>
+<td>✔</td>
+</tr>
+<tr>
+<td><code>getElementsByClassName</code></td>
+<td>class</td>
+<td>✔</td>
+<td>✔</td>
+</tr>
+<tr>
+<td><code>querySelector</code></td>
+<td>CSS-selector</td>
+<td>✔</td>
+<td>-</td>
+</tr>
+<tr>
+<td><code>querySelectorAll</code></td>
+<td>CSS-selector</td>
+<td>✔</td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+
+Please note that methods `getElementById` and `getElementsByName` can only be called in the context of the document: `document.getElementById(...)`. But not on an element: `elem.getElementById(...)` would cause an error.
+
+Other methods can be called on elements too. For instance `elem.querySelectorAll(...)` will search inside `elem` (in the DOM subtree).
+
+Besides that:
+
+- There is `elem.matches(css)` to check if `elem` matches the given CSS selector.
+- There is `elem.closest(css)` to look for a nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked.
+
+And let's mention one more method here to check for the child-parent relationship:
+-  `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
new file mode 100644
index 00000000..52c34640
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
@@ -0,0 +1,17 @@
+There's a catch here.
+
+At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
+
+So the result is `1` (element node).
+
+```html run height=60
+<html>
+
+<body>
+  <script>
+    alert(document.body.lastChild.nodeType);
+  </script>
+</body>
+
+</html>
+```
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
new file mode 100644
index 00000000..596192a1
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# What's in the nodeType?
+
+What the script shows?
+
+```html
+<html>
+
+<body>
+  <script>
+    alert(document.body.lastChild.nodeType);
+  </script>
+</body>
+
+</html>
+```
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
new file mode 100644
index 00000000..89b76cfd
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
@@ -0,0 +1,17 @@
+The answer: **`BODY`**.
+
+```html run
+<script>
+  let body = document.body;
+
+  body.innerHTML = "<!--" + body.tagName + "-->";
+
+  alert( body.firstChild.data ); // BODY
+</script>
+```
+
+What's going on step by step:
+
+1. The content of `<body>` is replaced with the comment. The comment is <code>&lt;!--BODY--&gt;</code>, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
+2. The comment is now the only child node, so we get it in `body.firstChild`.
+3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
new file mode 100644
index 00000000..40bea8a0
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
@@ -0,0 +1,17 @@
+importance: 3
+
+---
+
+# Tag in comment
+
+What this code shows?
+
+```html
+<script>
+  let body = document.body;
+
+  body.innerHTML = "<!--" + body.tagName + "-->";
+
+  alert( body.firstChild.data ); // what's here?
+</script>
+```
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
new file mode 100644
index 00000000..db7ebc9d
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
@@ -0,0 +1,38 @@
+
+We can see which class it belongs by outputting it, like:
+
+```js run
+alert(document); // [object HTMLDocument]
+```
+
+Or:
+
+```js run
+alert(document.constructor.name); // HTMLDocument
+```
+
+So, `document` is an instance of `HTMLDocument` class.
+
+What's its place in the hierarchy?
+
+Yeah, we could browse the specification, but it would be faster to figure out manually.
+
+Let's traverse the prototype chain via `__proto__`.
+
+As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
+
+Also, there's a reference to the constructor function inside the `prototype`:
+
+```js run
+alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
+```
+
+For built-in classes in all prototypes there's a `constructor` reference, and we can get `constructor.name` to see the name of the class. Let's do it for all objects in the `document` prototype chain:
+
+```js run
+alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
+alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
+alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
+```
+
+We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
new file mode 100644
index 00000000..d83602dc
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
@@ -0,0 +1,11 @@
+importance: 4
+
+---
+
+# Where's the "document" in the hierarchy?
+
+Which class the `document` belongs to?
+
+What's its place in the DOM hierarchy?
+
+Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
new file mode 100644
index 00000000..4934ce39
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -0,0 +1,493 @@
+# Node properties: type, tag and contents
+
+Let's get a more in-depth look at DOM nodes.
+
+In this chapter we'll see more into what they are and their most used properties.
+
+[cut]
+
+## DOM node classes
+
+DOM nodes have different properties depending on their class. For instance, element nodes corresponding to tag `<a>` have link-related properties, and those corresponding to `<input>` have input-related and so on.
+
+Text nodes are not the same as element nodes: they have properties of their own.
+
+But there are also common properties and methods between all of them, because of the inheritance. Each DOM node belongs to the corresponding built-in class. These classes form a hierarchy.
+
+The root is [EventTarget](https://dom.spec.whatwg.org/#eventtarget), that is inherited by  [Node](http://dom.spec.whatwg.org/#interface-node), and other DOM nodes inherit from it.
+
+Here's the picture, explanations to follow:
+
+![](dom-class-hierarchy.png)
+
+The classes are:
+
+- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later.
+- [Node](http://dom.spec.whatwg.org/#interface-node) is also an "abstract" class, serving as a base  for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes.
+- [Element](http://dom.spec.whatwg.org/#interface-element) is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. In the browser there may be not only HTML, but also XML and SVG documents. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`.
+- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) is finally the basic class for all HTML elements. It is inherited by various HTML elements:
+    - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `<input>` elements,
+    - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `<body>` elements,
+    - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `<a>` elements
+    - ...and so on, each tag has its own class that may provide specific properties and methods.
+
+So, the full set of properties and methods of a given node comes as the result of the inheritance.
+
+For instance, `<input>` element is of the [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) class:
+- `HTMLInputElement` itself provides input-specific properties.
+- It inherits the common HTML element methods (and getters/setters) from `HTMLElement` class.
+- Then it supports common element methods, because `HTMLElement` inherits from `Element`.
+- Then it supports common DOM node properties, because it inherits from `Node`.
+- Finally, it supports events (to be covered), because it inherits from `EventTarget`.
+- (and for completeness: `EventTarget` inherits from `Object`)
+
+To see the DOM node class name, we can remember that an object usually has the `constructor` property. It references to the class constructor, so the `constructor.name` is what we need:
+
+```js run
+alert( document.body.constructor.name ); // HTMLBodyElement
+```
+
+...Or we can just `toString` it:
+
+```js run
+alert( document.body ); // [object HTMLBodyElement]
+```
+
+We also can use `instanceof` to check the inheritance chain:
+
+```js run
+alert( document.body instanceof HTMLBodyElement ); // true
+alert( document.body instanceof HTMLElement ); // true
+alert( document.body instanceof Element ); // true
+alert( document.body instanceof Node ); // true
+alert( document.body instanceof EventTarget ); // true
+```
+
+As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. That's easy to see by outputting an element with `console.dir(elem)`. There you can see `HTMLElement.prototype`, `Element.prototype` and so on.
+
+```smart header="`console.dir(elem)` versus `console.log(elem)`"
+Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For JavaScript objects these commands usually do the same.
+
+But for DOM elements they are different:
+
+- `console.log(elem)` shows the element DOM tree.
+- `console.dir(elem)` shows the element as a DOM object, good to explore its properties.
+
+Try it on `document.body`.
+```
+
+````smart header="IDL in the spec"
+In the specification classes are described using not JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
+
+The most important difference is that all properties are given with their types. For instance, `DOMString`, `boolean` and so on.
+
+Here's an excerpt from it, with comments:
+
+```js
+// Define HTMLInputElement
+*!*
+// The colon means that it inherits from HTMLElement
+*/!*
+interface HTMLInputElement: HTMLElement {
+
+*!*
+  // "DOMString" means that the property is a string
+*/!*
+  attribute DOMString accept;
+  attribute DOMString alt;
+  attribute DOMString autocomplete;
+  attribute DOMString value;
+
+*!*
+  // boolean property (true/false)
+  attribute boolean autofocus;
+*/!*
+  ...
+*!*
+  // now the method: "void" means that that returns no value
+*/!*
+  void select();
+  ...
+}
+```
+
+Other classes are somewhat similar.
+````
+
+## The "nodeType" property
+
+The `nodeType` property provides an old-fashioned way to get the "type" of a DOM node.
+
+It has a numeric value:
+- `elem.nodeType == 1` for element nodes,
+- `elem.nodeType == 3` for text nodes,
+- `elem.nodeType == 9` for the document object,
+- there are few other values in [the specification](https://dom.spec.whatwg.org/#node).
+
+For instance:
+
+```html run
+<body>
+  <script>  
+  let elem = document.body;
+
+  // let's examine what it is?
+  alert(elem.nodeType); // 1 => element
+
+  // and the first child is...
+  alert(elem.firstChild.nodeType); // 3 => text
+
+  // for the document object, the type is 9
+  alert( document.nodeType ); // 9
+  </script>
+</body>
+```
+
+In modern scripts, we can use `instanceof` and other class-based tests to see the node type, but sometimes `nodeType` may be simpler. We can only read `nodeType`, not change it.
+
+## Tag: nodeName and tagName
+
+Given a DOM node, we can read its tag name from `nodeName` or `tagName` properties:
+
+For instance:
+
+```js run
+alert( document.body.nodeName ); // BODY
+alert( document.body.tagName ); // BODY
+```
+
+Is there any difference between tagName and nodeName?
+
+Actually, yes, the difference is reflected in their names, but is indeed a bit subtle.
+
+- The `tagName` property exists only for `Element` nodes.
+- The `nodeName` is defined for any `Node`:
+    - for elements it means the same as `tagName`.
+    - for other node types (text, comment etc) it has a string with the node type.
+
+So `tagName` can only be used for elements, while `nodeName` can say something about other node types.
+
+For instance let's compare `tagName` and `nodeName` for the `document` and a comment node:
+
+
+```html run
+<body><!-- comment -->
+
+  <script>
+    // for comment
+    alert( document.body.firstChild.tagName ); // undefined (not element)
+    alert( document.body.firstChild.nodeName ); // #comment
+
+    // for document
+    alert( document.tagName ); // undefined (not element)
+    alert( document.nodeName ); // #document
+  </script>
+</body>
+```
+
+If we only deal with elements, then `tagName` is the only thing we should use.
+
+
+```smart header="The tag name is always uppercase except XHTML"
+The browser has two modes of processing documents: HTML and XML. Usually the HTML-mode is used for webpages. XML-mode is enabled when the browser receives an XML-document with the header: `Content-Type: application/xml+xhtml`.
+
+In HTML mode `tagName/nodeName` is always uppercased: it's `BODY` either for `<body>` or `<BoDy>`.
+
+In XML mode the case is kept "as is", but it's rarely used.
+```
+
+
+## innerHTML: the contents
+
+The [innerHTML](https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML) property allows to get the HTML inside the element as a string.
+
+We can also modify it. So it's one of most powerful ways to change the page.
+
+The example shows the contents of `document.body` and then replaces it completely:
+
+```html run
+<body>
+  <p>A paragraph</p>
+  <div>A div</div>
+
+  <script>
+    alert( document.body.innerHTML ); // read the current contents
+    document.body.innerHTML = 'The new BODY!'; // replace it
+  </script>
+
+</body>
+```
+
+We can try to insert an invalid HTML, the browser will fix our errors:
+
+```html run
+<body>
+
+  <script>
+    document.body.innerHTML = '<b>test'; // forgot to close the tag
+    alert( document.body.innerHTML ); // <b>test</b> (fixed)
+  </script>
+
+</body>
+```
+
+```smart header="Scripts don't execute"
+If `innerHTML` inserts a `<script>` tag into the document -- it doesn't execute.
+
+It becomes a part of HTML, just as a script that has already run.
+```
+
+### Beware: "innerHTML+=" does a full overwrite
+
+We can append "more HTML" by using `elem.innerHTML+="something"`.
+
+Like this:
+
+```js
+chatDiv.innerHTML += "<div>Hello<img src='smile.gif'/> !</div>";
+chatDiv.innerHTML += "How goes?";
+```
+
+But we should be very careful about doing it, because what's going on is *not* an addition, but a full overwrite.
+
+Technically, these two lines do the same:
+
+```js
+elem.innerHTML += "...";
+// is a shorter way to write:
+*!*
+elem.innerHTML = elem.HTML + "..."
+*/!*
+```
+
+In other words, `innerHTML+=` does this:
+
+1. The old contents is removed.
+2. The new `innerHTML` is written instead (a concatenation of the old and the new one).
+
+**As the content is "zeroed-out" and rewritten from the scratch, all images and other resources will be reloaded**.
+
+In the `chatDiv` example above the line `chatDiv.innerHTML+="How goes?"` re-creates the HTML content and reloads `smile.gif` (hope it's cached). If `chatDiv` has a lot of other text and images, then the reload becomes clearly visible.
+
+There are other side-effects as well. For instance, if the existing text was selected with the mouse, then most browsers will remove the selection upon rewriting `innerHTML`. And if there was an `<input>` with a text entered by the visitor, then the text will be removed. And so on.
+
+Luckily, there are other ways to add HTML besides `innerHTML`, and we'll study them soon.
+
+## outerHTML: full HTML of the element
+
+The `outerHTML` property contains the full HTML of the element. That's like `innerHTML` plus the element itself.
+
+Here's an example:
+
+```html run
+<div id="elem">Hello <b>World</b></div>
+
+<script>
+  alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
+</script>
+```
+
+Unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it as a whole in the outer context. Yeah, sounds strange, and strange it is. Take a look.
+
+Consider the example:
+
+```html run
+<div>Hello, world!</div>
+
+<script>
+  let div = document.querySelector('div');
+
+*!*
+  // replace div.outerHTML with <p>...</p>
+*/!*
+  div.outerHTML = '<p>A new element!</p>'; // (*)
+
+*!*
+  // Wow! The div is still the same!
+*/!*
+  alert(div.outerHTML); // <div>Hello, world!</div>
+</script>
+```
+
+In the line `(*)` we take the full HTML of `<div>...</div>` and replace it by `<p>...</p>`. In the outer document we can see the new content instead of the `<div>`. But the old `div` variable is still the same.
+
+The `outerHTML` assignment does not modify the DOM element, but extracts it from the outer context and inserts a new piece of HTML instead of it.
+
+Novice developers sometimes make an error here: they modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it.
+
+That's possible with `innerHTML`, but not with `outerHTML`.
+
+We can write to `outerHTML`, but should keep in mind that it doesn't change the element we're writing to. It creates the new content on its place instead. We can get a reference to new elements by querying DOM.
+
+## nodeValue/data: text node content
+
+The `innerHTML` property is only valid for element nodes.
+
+Other node types have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter.
+
+We can read it, like this:
+
+```html run height="50"
+<body>
+  Hello
+  <!-- Comment -->
+  <script>
+    let text = document.body.firstChild;
+*!*
+    alert(text.data); // Hello
+*/!*
+
+    let comment = text.nextSibling;
+*!*
+    alert(comment.data); // Comment
+*/!*
+  </script>
+</body>
+```
+
+For text nodes we can imagine a reason to read or modify them, but why comments? Usually, they are not interesting at all, but sometimes developers embed information into HTML in them, like this:
+
+```html
+<!-- if isAdmin -->
+  <div>Welcome, Admin!</div>
+<!-- /if -->
+```
+
+...Then JavaScript can read it and process embedded instructions.
+
+## textContent: pure text
+
+The `textContent` provides access to the *text* inside the element: only text, minus all `<tags>`.
+
+For instance:
+
+```html run
+<div id="news">
+  <h1>Headline!</h1>
+  <p>Martians attack people!</p>
+</div>
+
+<script>
+  // Headline! Martians attack people!
+  alert(news.textContent);
+</script>
+```
+
+As we can see, only text is returned, as if all `<tags>` were cut out, but the text in them remained.
+
+In practice, reading such text is rarely needed.
+
+**Writing to `textContent` is much more useful, because it allows to write text the "safe way".**
+
+Let's say we have an arbitrary string, for instance entered by a user, and want to show it.
+
+- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags.
+- With `textContent` we'll have it inserted "as text", all symbols are treated literally.
+
+Compare the two:
+
+```html run
+<div id="elem1"></div>
+<div id="elem2"></div>
+
+<script>
+  let name = prompt("What's your name?", "<b>Winnie-the-pooh!</b>");
+
+  elem1.innerHTML = name;
+  elem2.textContent = name;
+</script>
+```
+
+1. The first `<div>` gets the name "as HTML": all tags become tags, so we see the bold name.
+2. The second `<div>` gets the nams "as text", so we literally see `<b>Winnie-the-pooh!</b>`.
+
+In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that.
+
+## The "hidden" property
+
+The "hidden" attribute and the DOM property specifies whether the element is visible or not.
+
+We can use it in HTML or assign using JavaScript, like this:
+
+```html run height="80"
+<div>Both divs below are hidden</div>
+
+<div hidden>With the attribute "hidden"</div>
+
+<div id="elem">JavaScript assigned the property "hidden"</div>
+
+<script>
+  elem.hidden = true;
+</script>
+```
+
+Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write.
+
+Here's a blinking element:
+
+
+```html run height=50
+<div id="elem">A blinking element</div>
+
+<script>
+  setInterval(() => elem.hidden = !elem.hidden, 1000);
+</script>
+```
+
+## More properties
+
+DOM elements also have additional properties, many of them provided by the class:
+
+- `value` -- the value for `<input>`, `<select>` and `<textarea>` (`HTMLInputElement`, `HTMLSelectElement`...).
+- `href` -- the "href" for `<a href="...">` (`HTMLAnchorElement`).
+- `id` -- the value of "id" attribute, for all elements (`HTMLElement`).
+- ...and much more...
+
+For instance:
+
+```html run height="80"
+<input type="text" id="elem" value="value">
+
+<script>
+  alert(elem.type); // "text"
+  alert(elem.id); // "elem"
+  alert(elem.value); // value
+</script>
+```
+
+Most standard HTML attributes have the corresponding DOM property, and we can access it like that.
+
+If we want to know the full list of supported properties for a given class, we can find them in the specification. For instance, HTMLInputElement is documented at <https://html.spec.whatwg.org/#htmlinputelement>.
+
+Or if we'd like to get them fast or interested in the concrete browser -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in Elements tab of the browser developer tools.
+
+## Summary
+
+Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods comes as the result of inheritance.
+
+Main DOM node properties are:
+
+`nodeType`
+: Node type. We can get it from the DOM object class, but often we need just to see is it a text or element node. The `nodeType` property is good for that. It has numeric values, most important are: `1` -- for elements,`3` -- for text nodes. Read-only.
+
+`nodeName/tagName`
+: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what is it. Read-only.
+
+`innerHTML`
+: The HTML content of the element. Can modify.
+
+`outerHTML`
+: The full HTML of the element. A write operation into `elem.outerHTML` does not touch `elem` itself. Instead it gets replaced with the new HTML in the outer context.
+
+`nodeValue/data`
+: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can modify.
+
+`textContent`
+: The text inside the element, basically HTML minus all `<tags>`. Writing into it puts the text inside the element, with all special characters and tags treated exactly as text. Can safely insert user-generated text and protect from unwanted HTML insertions.
+
+`hidden`
+: When set to `true`, does the same as CSS `display:none`.
+
+DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have the corresponding DOM property.
+
+But HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png
new file mode 100644
index 00000000..e48064cc
Binary files /dev/null and b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png differ
diff --git a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png
new file mode 100644
index 00000000..343f4890
Binary files /dev/null and b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png differ
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md
new file mode 100644
index 00000000..5d3fe241
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md
@@ -0,0 +1,20 @@
+
+```html run height=100
+<!DOCTYLE HTML>
+<html>
+<body>
+
+  <div data-widget-name="menu">Choose the genre</div>
+
+  <script>
+    // getting it
+    let elem = document.querySelector('[data-widget-name]');
+
+    // reading the value
+    alert(elem.dataset.widgetName);
+    // or
+    alert(elem.getAttribute('data-widget-name'));
+  </script>
+</body>
+</html>
+```
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
new file mode 100644
index 00000000..0d11ff97
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Get the attribute
+
+Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+
+```html run
+<!DOCTYLE HTML>
+<html>
+<body>
+
+  <div data-widget-name="menu">Choose the genre</div>
+
+  <script>
+    /* your code */
+  </script>
+</body>
+</html>
+```
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
new file mode 100644
index 00000000..726be4c8
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
@@ -0,0 +1,36 @@
+
+First, we need to find all external references.
+
+There are two ways.
+
+The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+
+```js
+let links = document.querySelectorAll('a');
+
+for (let link of links) {
+*!*
+  let href = link.getAttribute('href');
+*/!*
+  if (!href) continue; // no attribute
+
+  if (!href.includes('://')) continue; // no protocol
+
+  if (href.startsWith('http://internal.com')) continue; // internal
+
+  link.style.color = 'orange';
+}
+```
+
+Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+
+...Another, simpler way would be to add the checks to CSS selector:
+
+```js
+// look for all links that have :// in href
+// but href doesn't start with http://internal.com
+let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
+let links = document.querySelectorAll(selector);
+
+links.forEach(link => link.style.color = 'orange');
+```
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
new file mode 100644
index 00000000..4209a5f3
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <a name="list">The list:</a>
+  <ul>
+    <li><a href="http://google.com">http://google.com</a></li>
+    <li><a href="/tutorial">/tutorial.html</a></li>
+    <li><a href="local/path">local/path</a></li>
+    <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+    <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+    <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+  </ul>
+
+  <script>
+    let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
+    let links = document.querySelectorAll(selector);
+
+    links.forEach(link => link.style.color = 'orange');
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html
new file mode 100644
index 00000000..e1204832
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <a name="list">The list:</a>
+  <ul>
+    <li><a href="http://google.com">http://google.com</a></li>
+    <li><a href="/tutorial">/tutorial.html</a></li>
+    <li><a href="local/path">local/path</a></li>
+    <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+    <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+    <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+  </ul>
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
new file mode 100644
index 00000000..f7db9a04
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
@@ -0,0 +1,35 @@
+importance: 3
+
+---
+
+# Make external links orange
+
+Make all external links orange by altering their `style` property.
+
+A link is external if:
+- It's `href` has `://` in it
+- But doesn't start with `http://internal.com`.
+
+Example:
+
+```html run
+<a name="list">the list</a>
+<ul>
+  <li><a href="http://google.com">http://google.com</a></li>
+  <li><a href="/tutorial">/tutorial.html</a></li>
+  <li><a href="local/path">local/path</a></li>
+  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+</ul>
+
+<script>
+  // setting style for a single link
+  let link = document.querySelector('a');
+  link.style.color = 'orange';
+</script>
+```
+
+The result should be:
+
+[iframe border=1 height=180 src="solution"]
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md
new file mode 100644
index 00000000..fbd81803
--- /dev/null
+++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md
@@ -0,0 +1,387 @@
+# Attributes and properties
+
+When the browser loads the page, it "reads" (another word: "parses") HTML text and generates DOM objects from it. For element nodes most standard HTML attributes automatically become properties of DOM objects.
+
+For instance, if the tag is `<body id="page">`, then the DOM object will have `body.id="page"`.
+
+But the mapping is not one-to-one! In this chapter we'll see that DOM properties and attributes are linked, but they may be different.
+
+[cut]
+
+## DOM properties
+
+We've already seen built-in DOM properties. There's a lot. But technically no one limits us, and if it's not enough -- we can add own own.
+
+DOM nodes are regular JavaScript objects. We can alter them.
+
+For instance, let's create a new property in `document.body`:
+
+```js run
+document.body.myData = {
+  name: 'Caesar',
+  title: 'Imperator'
+};
+
+alert(document.body.myData.title); // Imperator
+```
+
+We can add a method as well:
+
+```js run
+document.body.sayHi = function() {
+  alert(this.tagName);
+};
+
+document.body.sayHi(); // BODY (the value of "this" in the method is document.body)
+```
+
+We can also modify built-in prototypes like `Element.prototype` and add new methods to all elements:
+
+```js run
+Element.prototype.sayHi = function() {
+  alert(`Hello, I'm ${this.tagName}`);
+};
+
+document.documentElement.sayHi(); // Hello, I'm HTML
+document.body.sayHi(); // Hello, I'm BODY
+```
+
+So, DOM properties and methods behave just like those of regular JavaScript objects:
+
+- They can have any value.
+- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`).
+
+## HTML attributes
+
+In HTML language, tags may have attributes. When the browser reads HTML text and creates DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
+
+So when an element has `id` or another standard attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard.
+
+For instance:
+```html run
+<body id="test" something="non-standard">
+  <script>
+    alert(document.body.id); // test
+*!*
+    // non-standard attribute does not yield a property
+    alert(document.body.something); // undefined
+*/!*
+  </script>
+</body>
+```
+
+Please note that a standard attribute for one element can be unknown for another one. For instance, `"type"` is standard for `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), but not for `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributes are described in the specification for the corresponding class.
+
+Here we can see it:
+```html run
+<body id="body" type="...">
+  <input id="input" type="text">
+  <script>
+    alert(input.type); // text
+*!*
+    alert(body.type); // undefined: DOM property not created, because it's non-standard
+*/!*
+  </script>
+</body>
+```
+
+So, if an attribute is non-standard, there won't be DOM-property for it. Is there a way to access such attributes?
+
+Sure. All attributes are accessible using following methods:
+
+- `elem.hasAttribute(name)` -- checks for existance.
+- `elem.getAttribute(name)` -- gets the value.
+- `elem.setAttribute(name, value)` -- sets the value.
+- `elem.removeAttribute(name)` -- removes the attribute.
+
+These methods operate exactly with what's written in HTML.
+
+Also one can read all attributes using `elem.attributes`: a collection of objects that belong to a built-in [Attr](https://dom.spec.whatwg.org/#attr) class. It's enough to know that each of them has  `name` and `value` properties.
+
+Here's a demo of reading a non-standard property:
+
+```html run
+<body something="non-standard">
+  <script>
+*!*
+    alert(document.body.getAttribute('something')); // non-standard
+*/!*
+  </script>
+</body>
+```
+
+HTML attributes have following features:
+
+- Their name is case-insensitive (that's HTML: `id` is same as `ID`).
+- They are always strings.
+
+Here's an extended demo of working with attributes:
+
+```html run
+<body>
+  <div id="elem" about="Elephant"></div>
+
+  <script>
+    alert( elem.getAttribute('About') ); // (1) 'Elephant', reading
+
+    elem.setAttribute('Test', 123); // (2), writing
+
+    alert( elem.outerHTML ); // (3), see it's there
+
+    for (let attr of elem.attributes) { // (4) list all
+      alert( attr.name + " = " + attr.value );
+    }
+  </script>
+</body>
+```
+
+Please note:
+
+1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive.
+2. We can assign anything to an attribute, but that becomes a string. So here we have `"123"` as the value.
+3. All attributes including ones that we set are visible in `outerHTML`.
+4. The `attributes` collection is iterable and has all attributes with `name` and `value`.
+
+## Property-attribute synchronization
+
+When a standard attribute changes, the corresponding property is auto-updated, and (with some exceptions) vise-versa.
+
+In the example below `id` is modified as an attribute, and we can see the property change too. And then the same backwards:
+
+```html run
+<input>
+
+<script>
+  let input = document.querySelector('input');
+
+  // attribute => property
+  input.setAttribute('id', 'id');
+  alert(input.id); // id (updated)
+
+  // property => attribute
+  input.id = 'newId';
+  alert(input.getAttribute('id')); // newId (updated)
+</script>
+```
+
+But there are exclusions, for instance `input.value` synchronizes only from attribute to property:
+
+```html run
+<input>
+
+<script>
+  let input = document.querySelector('input');
+
+  // attribute => property
+  input.setAttribute('value', 'text');
+  alert(input.value); // text
+
+*!*
+  // NOT property => attribute
+  input.value = 'newValue';
+  alert(input.getAttribute('value')); // text (not updated!)
+*/!*
+</script>
+```
+
+In the example above:
+- Changing the attribute `value` updates the property.
+- But the property change does not affect the attribute.
+
+That actually can come in handy, because the user may modify `value`, then, if we want to recover the "original" value from HTML, it's in the attribute.
+
+## DOM properties are typed
+
+DOM properties are not always strings. For instance, `input.checked` property (for checkboxes) and other similar properties are boolean:
+
+```html run
+<input id="input" type="checkbox" checked> checkbox
+
+<script>
+  alert(input.getAttribute('checked')); // the attribute value is: empty string
+  alert(input.checked); // the property value is: true
+</script>
+```
+
+There are other examples. The `style` attribute is a string, but `style` property is an object:
+
+```html run
+<div id="div" style="color:red;font-size:120%">Hello</div>
+
+<script>
+  // string
+  alert(div.getAttribute('style')); // color:red;font-size:120%
+
+  // object
+  alert(div.style); // [object CSSStyleDeclaration]
+  alert(div.style.color); // red
+</script>
+```
+
+But even if a DOM property type is a string, it may differ from the attribute.
+
+For instance, the `href` DOM property is always a full URL (by the standard), even if the attribute has a relative URL or just a `#hash`.
+
+Here's an example:
+
+```html height=30 run
+<a id="a" href="#hello">link</a>
+<script>
+  // attribute
+  alert(a.getAttribute('href')); // #hello
+
+  // property
+  alert(a.href ); // full URL in the form http://site.com/page#hello
+</script>
+```
+
+If we need the value of `href` or anything else exactly as written in the HTML, we need to use `getAttribute`.
+
+
+## Non-standard attributes, dataset
+
+When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for?
+
+Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or "mark" elements.
+
+Like this:
+
+```html run
+<!-- mark the div to show "name" here -->
+<div *!*show-info="name"*/!*></div>
+<!-- and age here -->
+<div *!*show-info="age"*/!*></div>
+
+<script>
+  // the code finds an element with the mark and shows what's requested
+  let user = {
+    name: "Pete",
+    age: 25
+  };
+
+  for(let div of document.querySelectorAll('[show-info]')) {
+    // insert the corresponding info into the field
+    let field = div.getAttribute('show-info');
+    div.innerHTML = user[field]; // Pete, then age
+  }
+</script>
+```
+
+Also they can be used to style an element.
+
+For instance, here for the order state the attribute `order-state` is used:
+
+```html run
+<style>
+  /* styles rely on the custom attribute "order-state" */
+  .order[order-state="new"] {
+    color: green;
+  }
+
+  .order[order-state="pending"] {
+    color: blue;
+  }
+
+  .order[order-state="canceled"] {
+    color: red;
+  }
+</style>
+
+<div class="order" order-state="new">
+  A new order.
+</div>
+
+<div class="order" order-state="pending">
+  A pending order.
+</div>
+
+<div class="order" order-state="canceled">
+  A canceled order.
+</div>
+```
+
+Why the attribute was chosen in the example above, not classes like `.order-state-new`, `.order-state-pending`, `order-state-canceled`?
+
+That's because an attribute is more convenient to manage. The state can be changed as easy as:
+
+```js
+div.setAttribute('order-state', 'canceled');
+```
+
+But there may be a possible problem. What if we use a non-standard attribute for our purposes and later the standard introduces it and makes it do something? The HTML language is alive, it grows, more attributes appear to suit the needs of developers. There may be unexpected side-effects in case of such conflict.
+
+To evade conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
+
+**All attributes starting with "data-" are reserved for programmers' use. They are available in `dataset` property.**
+
+For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`.
+
+Like this:
+
+```html run
+<body data-about="Elephants">
+<script>
+  alert(document.body.dataset.about); // Elephants
+</script>
+```
+
+Multiword attributes like `data-order-state` become camel-cased: `dataset.orderState`.
+
+Here's a rewritten "order state" example:
+
+```html run
+<style>
+  .order[data-order-state="new"] {
+    color: green;
+  }
+
+  .order[data-order-state="pending"] {
+    color: blue;
+  }
+
+  .order[data-order-state="canceled"] {
+    color: red;
+  }
+</style>
+
+<div id="order" class="order" data-order-state="new">
+  A new order.
+</div>
+
+<script>
+  // read
+  alert(order.dataset.orderState); // new
+
+  // modify
+  order.dataset.orderState = "pending";
+</script>
+```
+
+Using `data-*` attributes is a valid, safe way to pass custom data.
+
+Please note that we can not only read, but also modify data-attributes. Then CSS updates the view accordingly: in the example above the last line changes the color to blue.
+
+## Summary
+
+- Attributes -- is what's written in HTML.
+- Properties -- is what's in DOM objects.
+
+A small comparison:
+
+|            | Properties | Attributes |
+|------------|------------|------------|
+|Type|Any value, standard properties have types described in the spec|A string|
+|Name|Name is case-sensitive|Name is case-insensitive|
+
+Methods to work with attributes are:
+
+- `elem.hasAttribute(name)` -- to check for existance.
+- `elem.getAttribute(name)` -- to get the value.
+- `elem.setAttribute(name, value)` -- to set the value.
+- `elem.removeAttribute(name)` -- to remove the attribute.
+- `elem.attributes` is a collection of all attributes.
+
+We use attributes when DOM properties do not suit us and we need exactly attributes for some reasons, for instance:
+
+- We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`.
+- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance `href` property is always a full URL, and we may want to get the "original" value.
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
new file mode 100644
index 00000000..93ae862f
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -0,0 +1,18 @@
+Answer: **1 and 3**.
+
+Both commands result in adding the `text` "as text" into the `elem`.
+
+Here's an example:
+
+```html run height=80
+<div id="elem1"></div>
+<div id="elem2"></div>
+<div id="elem3"></div>
+<script>
+  let text = '<b>text</b>';
+
+  elem1.append(document.createTextNode(text));
+  elem2.textContent = text;
+  elem3.innerHTML = text;
+</script>
+```
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
new file mode 100644
index 00000000..e127bc0e
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# createTextNode vs innerHTML vs textContent
+
+We have an empty DOM element `elem` and a string `text`.
+
+Which of these 3 commands do exactly the same?
+
+1. `elem.append(document.createTextNode(text))`
+2. `elem.innerHTML = text`
+3. `elem.textContent = text`
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
new file mode 100644
index 00000000..15238fcf
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -0,0 +1,53 @@
+First, let's make HTML/CSS.
+
+Each component of the time would look great in its own `<span>`:
+
+```html
+<div id="clock">
+  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+</div>
+```
+
+Also we'll need CSS to color them.
+
+The `update` function will refresh the clock, to be called by `setInterval` every second:
+
+```js
+function update() {
+  let clock = document.getElementById('clock');
+*!*
+  let date = new Date(); // (*)
+*/!*
+  let hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+  clock.children[0].innerHTML = hours;
+
+  let minutes = date.getMinutes();
+  if (minutes < 10) minutes = '0' + minutes;
+  clock.children[1].innerHTML = minutes;
+
+  let seconds = date.getSeconds();
+  if (seconds < 10) seconds = '0' + seconds;
+  clock.children[2].innerHTML = seconds;
+}
+```
+
+In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+
+The clock-managing functions:
+
+```js
+let timerId;
+
+function clockStart() { // run the clock
+  timerId = setInterval(update, 1000);
+  update(); // (*)
+}
+
+function clockStop() {
+  clearInterval(timerId);
+  timerId = null;
+}
+```
+
+Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
new file mode 100644
index 00000000..5c0319b6
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    .hour {
+      color: red
+    }
+
+    .min {
+      color: green
+    }
+
+    .sec {
+      color: blue
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  </div>
+
+  <script>
+    let timerId;
+
+    function update() {
+      let clock = document.getElementById('clock');
+      let date = new Date();
+
+      let hours = date.getHours();
+      if (hours < 10) hours = '0' + hours;
+      clock.children[0].innerHTML = hours;
+
+      let minutes = date.getMinutes();
+      if (minutes < 10) minutes = '0' + minutes;
+      clock.children[1].innerHTML = minutes;
+
+      let seconds = date.getSeconds();
+      if (seconds < 10) seconds = '0' + seconds;
+      clock.children[2].innerHTML = seconds;
+    }
+
+    function clockStart() {
+      timerId = setInterval(update, 1000);
+      update(); // <--  start right now, don't wait 1 second till the first setInterval works
+    }
+
+    function clockStop() {
+      clearInterval(timerId);
+    }
+
+    clockStart();
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
new file mode 100644
index 00000000..ecf5df99
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <!-- click on this button calls clockStart() -->
+  <input type="button" onclick="clockStart()" value="Start">
+
+  <!-- click on this button calls clockStop() -->
+  <input type="button" onclick="clockStop()" value="Stop">
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
new file mode 100644
index 00000000..ba6e3a84
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -0,0 +1,9 @@
+importance: 4
+
+---
+
+# Colored clock with setInterval
+
+Create a colored clock like here:
+
+[iframe src="solution" height=60]
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
new file mode 100644
index 00000000..4e77fb5c
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -0,0 +1,8 @@
+
+When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+  
+The solution:
+
+```js
+one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
+```
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
new file mode 100644
index 00000000..543cd3e4
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Insert the HTML in the list
+
+Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+
+```html
+<ul id="ul">
+  <li id="one">1</li>
+  <li id="two">4</li>
+</ul>
+```
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
new file mode 100644
index 00000000..25dd58b0
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -0,0 +1,19 @@
+The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+
+
+```js
+let sortedRows = Array.from(table.rows)
+  .slice(1)
+  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
+
+table.tBodies[0].append(...sortedRows);
+```
+
+1. Get all `<tr>`, like `table.querySelectorAll('tr')`, then make an array from them, cause we need array methods.
+2. The first TR (`table.rows[0]`) is actually a table header, so we take the rest by `.slice(1)`.
+3. Then sort them comparing by the content of the first `<td>` (the name field).
+4. Now insert nodes in the right order by `.append(...sortedRows)`.
+
+    Tables always have an implicit <tbody> element, so we need to take it and insert into it: a simple `table.append(...)` would fail.
+
+    Please note: we don't have to remove them, just "re-insert", they leave the old place automatically.
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
new file mode 100644
index 00000000..81e98574
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+  <table id="table">
+    <tr>
+      <th>Name</th>
+      <th>Surname</th>
+      <th>Age</th>
+    </tr>
+    <tr>
+      <td>John</td>
+      <td>Smith</td>
+      <td>10</td>
+    </tr>
+    <tr>
+      <td>Pete</td>
+      <td>Brown</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Ann</td>
+      <td>Lee</td>
+      <td>5</td>
+    </tr>
+  </table>
+
+  <script>
+    let sortedRows = Array.from(table.rows)
+      .slice(1)
+      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
+
+    table.tBodies[0].append(...sortedRows);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
new file mode 100644
index 00000000..e41eb229
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+  <table id="table">
+    <tr>
+      <th>Name</th>
+      <th>Surname</th>
+      <th>Age</th>
+    </tr>
+    <tr>
+      <td>John</td>
+      <td>Smith</td>
+      <td>10</td>
+    </tr>
+    <tr>
+      <td>Pete</td>
+      <td>Brown</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Ann</td>
+      <td>Lee</td>
+      <td>5</td>
+    </tr>
+  </table>
+
+  <script>
+    // ... your code ...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
new file mode 100644
index 00000000..41d6fca2
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -0,0 +1,39 @@
+importance: 5
+
+---
+
+# Sort the table
+
+There's a table:
+
+<table>
+<tr>
+  <th>Name</th>
+  <th>Surname</th>
+  <th>Age</th>
+</tr>
+<tr>
+  <td>John</td>
+  <td>Smith</td>
+  <td>10</td>
+</tr>
+<tr>
+  <td>Pete</td>
+  <td>Brown</td>
+  <td>15</td>
+</tr>
+<tr>
+  <td>Ann</td>
+  <td>Lee</td>
+  <td>5</td>
+</tr>
+<tr>
+  <td>...</td>
+  <td>...</td>
+  <td>...</td>
+</tr>
+</table>
+
+There may be more rows in it.
+
+Write the code to sort it by the `"name"` column.
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
new file mode 100644
index 00000000..62c3386d
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -0,0 +1,32 @@
+
+First, let's see how *not* to do it:
+
+```js
+function clear(elem) {
+  for (let i=0; i < elem.childNodes.length; i++) {
+      elem.childNodes[i].remove();
+  }
+}
+```
+
+That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+
+The `for..of` loop also does the same.
+
+The right variant could be:
+
+```js
+function clear(elem) {
+  while (elem.firstChild) {
+    elem.firstChild.remove();
+  }
+}
+```
+
+And also there's a simpler way to do the same:
+
+```js
+function clear(elem) {
+  elem.innerHTML = '';
+}
+```
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
new file mode 100644
index 00000000..938d5347
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Clear the element
+
+Create a function `clear(elem)` that removes everything from the element.
+
+```html run height=60
+<ol id="elem">
+  <li>Hello</li>
+  <li>World</li>
+</ol>
+
+<script>
+  function clear(elem) { /* your code */ }
+
+  clear(elem); // clears the list
+</script>
+```
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
new file mode 100644
index 00000000..25c1e819
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -0,0 +1,9 @@
+The HTML in the task is incorrect. That's the reason of the odd thing.
+
+The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `<table>`.
+
+Now it's obvious that when we remove the table, it remains.
+
+The question can be easily answered by exploring DOM using the browser tools. They show `"aaa"` before the `<table>`.
+
+The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
new file mode 100644
index 00000000..aedf8697
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -0,0 +1,23 @@
+importance: 1
+
+---
+
+# Why "aaa" remains?
+
+Run the example. Why `table.remove()` does not delete the text `"aaa"`?
+
+```html height=100 run
+<table id="table">
+  aaa
+  <tr>
+    <td>Test</td>
+  </tr>
+</table>
+
+<script>
+  alert(table); // the table, as it should be
+
+  table.remove();
+  // why there's still aaa in the document?
+</script>
+```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
new file mode 100644
index 00000000..1669be18
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
@@ -0,0 +1 @@
+Please note the usage of `textContent` to assign the `<li>` content.
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
new file mode 100755
index 00000000..071645e8
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <h1>Create a list</h1>
+
+  <script>
+    let ul = document.createElement('ul');
+    document.body.append(ul);
+
+    while (true) {
+      let data = prompt("Enter the text for the list item", "");
+
+      if (!data) {
+        break;
+      }
+
+      let li = document.createElement('li');
+      li.textContent = data;
+      ul.append(li);
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
new file mode 100644
index 00000000..43b0a34a
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -0,0 +1,19 @@
+importance: 4
+
+---
+
+# Create a list
+
+Write an interface to create a list from user input.
+
+For every list item:
+
+1. Ask a user about its content using `prompt`.
+2. Create the `<li>` with it and add it to `<ul>`.
+3. Continue until the user cancels the input (by pressing `key:Esc` or CANCEL in prompt).
+
+All elements should be created dynamically.
+
+If a user types HTML-tags, they should be treated like a text.
+
+[demo src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
new file mode 100755
index 00000000..aec462fe
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+  <div id="container"></div>
+
+  <script>
+    let data = {
+      "Fish": {
+        "trout": {},
+        "salmon": {}
+      },
+
+      "Tree": {
+        "Huge": {
+          "sequoia": {},
+          "oak": {}
+        },
+        "Flowering": {
+          "redbud": {},
+          "magnolia": {}
+        }
+      }
+    };
+
+    function createTree(container, obj) {
+      container.append(createTreeDom(obj));
+    }
+
+    function createTreeDom(obj) {
+      // if there's no children, then the call returns undefined
+      // and the <ul> won't be created
+      if (!Object.keys(obj).length) return;
+
+      let ul = document.createElement('ul');
+
+      for (let key in obj) {
+        let li = document.createElement('li');
+        li.innerHTML = key;
+
+        let childrenUl = createTreeDom(obj[key]);
+        if (childrenUl) {
+          li.append(childrenUl);
+        }
+
+        ul.append(li);
+      }
+
+      return ul;
+    }
+
+    let container = document.getElementById('container');
+    createTree(container, data);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
new file mode 100644
index 00000000..9ba40a6d
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+  <div id="container"></div>
+
+  <script>
+    let data = {
+      "Fish": {
+        "trout": {},
+        "salmon": {}
+      },
+
+      "Tree": {
+        "Huge": {
+          "sequoia": {},
+          "oak": {}
+        },
+        "Flowering": {
+          "redbud": {},
+          "magnolia": {}
+        }
+      }
+    };
+
+    function createTree(container, obj) {
+      container.innerHTML = createTreeText(obj);
+    }
+
+    function createTreeText(obj) { // standalone recursive function
+      let li = '';
+      for (let key in obj) {
+        li += '<li>' + key + createTreeText(obj[key]) + '</li>';
+      }
+      if (li) {
+        let ul = '<ul>' + li + '</ul>'
+      }
+      return ul || '';
+    }
+
+    createTree(container, data);
+  </script>
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
new file mode 100644
index 00000000..d29636ee
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
@@ -0,0 +1,4 @@
+The easiest way to walk the object is to use recursion.
+
+1. [The solution with innerHTML](sandbox:innerhtml).
+2. [The solution with DOM](sandbox:build-tree-dom).
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
new file mode 100755
index 00000000..d035aec6
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div id="tree"></div>
+
+  <!-- The result should be:
+<div id="tree">
+<ul>
+  <li>Fish
+    <ul>
+      <li>trout</li>
+      <li>salmon</li>
+    </ul>
+  </li>
+  <li>Trees
+    <ul>
+      <li>Huge
+        <ul>
+          <li>sequoia</li>
+          <li>oak</li>
+        </ul>
+      </li>
+      <li>Flowering
+        <ul>
+          <li>redbud</li>
+          <li>magnolia</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+</div>
+-->
+
+  <script>
+    let data = {
+      "Fish": {
+        "trout": {},
+        "salmon": {}
+      },
+
+      "Tree": {
+        "Huge": {
+          "sequoia": {},
+          "oak": {}
+        },
+        "Flowering": {
+          "redbud": {},
+          "magnolia": {}
+        }
+      }
+    };
+
+    function createTree(container, data) {
+      /* your code */
+    }
+
+    createTree(document.getElementById('tree'), data);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
new file mode 100644
index 00000000..6b60c096
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -0,0 +1,51 @@
+importance: 5
+
+---
+
+# Create a tree from the object
+
+Write a function `createTree` that creates a nested `ul/li` list from the nested object.
+
+For instance:
+
+```js
+let data = {
+  "Fish": {
+    "trout": {},
+    "salmon": {}
+  },
+
+  "Tree": {
+    "Huge": {
+      "sequoia": {},
+      "oak": {}
+    },
+    "Flowering": {
+      "redbud": {},
+      "magnolia": {}
+    }
+  }
+};
+```
+
+The syntax:
+
+```js
+let container = document.getElementById('container');
+*!*
+createTree(container, data); // creates the tree in the container
+*/!*
+```
+
+The result (tree) should look like this:
+
+[iframe border=1 src="build-tree-dom"]
+
+Choose one of two ways of solving this task:
+
+1. Create the HTML for the tree and then assign to `container.innerHTML`.
+2. Create tree nodes and append with DOM methods.
+
+Would be great if you could do both.
+
+P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
new file mode 100644
index 00000000..43b9a362
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
@@ -0,0 +1 @@
+To append text to each `<li>` we can alter the text node `data`.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
new file mode 100644
index 00000000..ec44bfda
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <ul>
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    let lis = document.getElementsByTagName('li');
+
+    for (let li of lis) {
+      // get the count of all <li> below this <li>
+      let descendantsCount = li.getElementsByTagName('li').length;
+      if (!descendantsCount) continue;
+
+      // add directly to the text node (append to the text)
+      li.firstChild.data += ' [' + descendantsCount + ']';
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
new file mode 100644
index 00000000..542bd937
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <ul>
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    // ... your code ...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
new file mode 100644
index 00000000..d6343bf3
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Show descendants in a tree
+
+There's a tree organized as nested `ul/li`.
+
+Write the code that adds to each `<li>` the number of its descendants. Skip leaves (nodes without children).
+
+The result:
+
+[iframe border=1 src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
new file mode 100644
index 00000000..67bb5e13
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
@@ -0,0 +1,9 @@
+We'll create the table as a string: `"<table>...</table>"`, and then assign it to  `innerHTML`.
+
+The algorithm:
+
+1. Create the table header with `<th>` and weekday names.
+1. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`).
+2. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with `<td></td>`.
+3. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `<td>` to the calendar. If that's a Sunday, then add a newline <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
+4. If the month has finished, but the table row is not yet full, add empty `<td>` into it, to make it square.
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
new file mode 100644
index 00000000..7e211abc
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+
+    td,
+    th {
+      border: 1px solid black;
+      padding: 3px;
+      text-align: center;
+    }
+
+    th {
+      font-weight: bold;
+      background-color: #E6E6E6;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <div id="calendar"></div>
+
+  <script>
+    function createCalendar(elem, year, month) {
+
+      let mon = month - 1; // months in JS are 0..11, not 1..12
+      let d = new Date(year, mon);
+
+      let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>';
+
+      // spaces for the first row
+      // from Monday till the first day of the month
+      // * * * 1  2  3  4
+      for (let i = 0; i < getDay(d); i++) {
+        table += '<td></td>';
+      }
+
+      // <td> with actual dates
+      while (d.getMonth() == mon) {
+        table += '<td>' + d.getDate() + '</td>';
+
+        if (getDay(d) % 7 == 6) { // sunday, last day of week - newline
+          table += '</tr><tr>';
+        }
+
+        d.setDate(d.getDate() + 1);
+      }
+
+      // add spaces after last days of month for the last row
+      // 29 30 31 * * * *
+      if (getDay(d) != 0) {
+        for (let i = getDay(d); i < 7; i++) {
+          table += '<td></td>';
+        }
+      }
+
+      // close the table
+      table += '</tr></table>';
+
+      elem.innerHTML = table;
+    }
+
+    function getDay(date) { // get day number from 0 (monday) to 6 (sunday)
+      let day = date.getDay();
+      if (day == 0) day = 7; // make Sunday (0) the last day
+      return day - 1;
+    }
+
+    createCalendar(calendar, 2012, 9);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
new file mode 100644
index 00000000..e1f4cd6b
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+
+    td,
+    th {
+      border: 1px solid black;
+      padding: 3px;
+      text-align: center;
+    }
+
+    th {
+      font-weight: bold;
+      background-color: #E6E6E6;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <div id="calendar"></div>
+
+  <script>
+    function createCalendar(elem, year, month) {
+      // ...your code that generates the calndar in elem...
+    }
+
+    createCalendar(calendar, 2012, 9);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
new file mode 100644
index 00000000..37b1a60d
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
@@ -0,0 +1,17 @@
+importance: 4
+
+---
+
+# Create a calendar
+
+Write a function `createCalendar(elem, year, month)`.
+
+The call should create a calendar for the given year/month and put it inside `elem`.
+
+The calendar should be a table, where a week is `<tr>`, and a day is `<td>`. The table top should be `<th>` with weekday names: the first day should be Monday, and so on till Sunday.
+
+For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar:
+
+[iframe height=210 src="solution"]
+
+P.S. For this task it's enough to generate the calendar, should not yet be clickable.
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
new file mode 100644
index 00000000..d18a05d9
--- /dev/null
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -0,0 +1,485 @@
+# Modifying the document
+
+DOM modifications is the key to create "live" pages.
+
+Here we'll see how to create new elements "on the fly" and modify the existing page content.
+
+First we'll see a simple example and then explain the methods.
+
+[cut]
+
+## Example: show a message
+
+For the start, let's see how to add a message on the page that looks nicer than `alert`.
+
+Here's how it will look:
+
+```html autorun height="80"
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
+
+*!*
+<div class="alert">
+  <strong>Hi there!</strong> You've read an important message.
+</div>
+*/!*
+```
+
+That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS).
+
+## Creating an element
+
+
+To create DOM nodes, there are two methods:
+
+`document.createElement(tag)`
+: Creates a new element with the given tag:
+
+    ```js
+    let div = document.createElement('div');
+    ```
+
+`document.createTextNode(text)`
+: Creates a new *text node* with the given text:
+
+    ```js
+    let textNode = document.createTextNode('Here I am');
+    ```
+
+### Creating the message
+
+In our case we want to make a `div` with given classes and the message in it:
+
+```js
+let div = document.createElement('div');
+div.className = "alert alert-success";
+div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+```
+
+After that, we have a ready DOM element. Right now it's in the variable, but can not be seen, because not inserted into the page yet.
+
+## Insertion methods
+
+To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`.
+
+There's a special method for that: `document.body.appendChild(div)`.
+
+Here's the full code:
+
+```html run height="80"
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
+
+<script>
+  let div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+
+*!*
+  document.body.appendChild(div);
+*/!*
+</script>
+```
+
+Here's a brief list of methods to insert a node into a parent element (`parentElem` for short):
+
+`parentElem.appendChild(node)`
+: Appends `node` as the last child of `parentElem`.
+
+    The following example adds a new `<li>` to the end of `<ol>`:
+
+    ```html run height=100
+    <ol id="list">
+      <li>0</li>
+      <li>1</li>
+      <li>2</li>
+    </ol>
+
+    <script>
+      let newLi = document.createElement('li');
+      newLi.innerHTML = 'Hello, world!';
+
+      list.appendChild(newLi);
+    </script>
+    ```
+
+`parentElem.insertBefore(node, nextSibling)`
+: Inserts `node` before `nextSibling` into `parentElem`.
+
+    The following code inserts a new list item before the second `<li>`:
+
+    ```html run height=100
+    <ol id="list">
+      <li>0</li>
+      <li>1</li>
+      <li>2</li>
+    </ol>
+    <script>
+      let newLi = document.createElement('li');
+      newLi.innerHTML = 'Hello, world!';
+
+    *!*
+      list.insertBefore(newLi, list.children[1]);
+    */!*
+    </script>
+    ```
+
+    To insert as the first element, we can do like this:
+
+    ```js
+    list.insertBefore(newLi, list.firstChild);
+    ```
+
+`parentElem.replaceChild(node, oldChild)`
+: Replaces `oldChild` with `node` among children of `parentElem`.
+
+All these methods return the inserted node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
+
+These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, there are some tasks that are hard to solve with them.
+
+For instance, how to insert *html* if we have it as a string? Or, given a node, how to insert another node *before* it? Of course, all that is doable, but not in an elegant way.
+
+So there exist two other sets of insertion methods to handle all cases easily.
+
+### prepend/append/before/after
+
+This set of methods provides more flexible insertions:
+
+- `node.append(...nodes or strings)` -- append nodes or strings at the end of `node`,
+- `node.prepend(...nodes or strings)` -- insert nodes or strings into the beginning of `node`,
+- `node.before(...nodes or strings)` –- insert nodes or strings before the `node`,
+- `node.after(...nodes or strings)` –- insert nodes or strings after the `node`,
+- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
+
+Here's an example of using these methods to add more items to a list and the text before/after it:
+
+```html autorun
+<ol id="ol">
+  <li>0</li>
+  <li>1</li>
+  <li>2</li>
+</ol>
+
+<script>
+  ol.before('before');
+  ol.after('after');
+
+  let prepend = document.createElement('li');
+  prepend.innerHTML = 'prepend';
+  ol.prepend(prepend);  
+
+  let append = document.createElement('li');
+  append.innerHTML = 'append';
+  ol.append(append);
+</script>
+```
+
+Here's a small picture what methods do:
+
+![](before-prepend-append-after.png)
+
+So the final list will be:
+
+```html
+before
+<ol id="ol">
+  <li>prepend</li>
+  <li>0</li>
+  <li>1</li>
+  <li>2</li>
+  <li>append</li>
+</ol>
+after
+```
+
+These methods can insert multiple list of nodes and text pieces in a single call.
+
+For instance, here a string and an element are inserted:
+
+```html run
+<div id="div"></div>
+<script>
+  div.before('<p>Hello</p>', document.createElement('hr'));
+</script>
+```
+
+All text is inserted *as text*.
+
+So the final HTML is:
+
+```html run
+*!*
+&lt;p&gt;Hello&lt;/p&gt;
+*/!*
+<hr>
+<div id="div"></div>
+```
+
+In other words, strings are inserted in a safe way, like `elem.textContent` does it.
+
+So, these methods can only be used to insert DOM nodes or text pieces.
+
+But what if we want to insert HTML "as html", with all tags and stuff working, like `elem.innerHTML`?
+
+### insertAdjacentHTML/Text/Element
+
+There's another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
+
+The first parameter is a string, specifying where to insert, must be one of the following:
+
+- `"beforebegin"` -- insert `html` before `elem`,
+- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
+- `"beforeend"` -- insert `html` into `elem`, at the end,
+- `"afterend"` -- insert `html` after `elem`.
+
+The second parameter is an HTML string, inserted "as is".
+
+For instance:
+
+```html run
+<div id="div"></div>
+<script>
+  div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
+  div.insertAdjacentHTML('afterend', '<p>Bye</p>');
+</script>
+```
+
+...Would lead to:
+
+```html run
+<p>Hello</p>
+<div id="div"></div>
+<p>Bye</p>
+```
+
+That's how we can append an arbitrary HTML to our page.
+
+Here's the picture of insertion variants:
+
+![](insert-adjacent.png)
+
+We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.
+
+The method has two brothers:
+
+- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` in inserted "as text" instead of HTML,
+- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+
+They exist mainly to make the syntax "uniform". In practice, most of time only `insertAdjacentHTML` is used, because for elements and text we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+
+So here's an alternative variant of showing a message:
+
+```html run
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
+
+<script>
+  document.body.insertAdjacentHTML("afterbegin", `<div class="alert alert-success">
+    <strong>Hi there!</strong> You've read an important message.
+  </div>`);
+</script>
+```
+
+## Cloning nodes: cloneNode
+
+How to insert one more similar message?
+
+We could do a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
+
+Sometimes when we have a big element, that may be faster and simpler.
+
+- The call `elem.cloneNode(true)` creates a "deep" clone of the element -- with all attributes and subelements. If we call `elem.cloneNode(false)`, then the clone is made without child elements.
+
+An example of copying the message:
+
+```html run height="120"
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
+
+<div class="alert" id="div">
+  <strong>Hi there!</strong> You've read an important message.
+</div>
+
+<script>
+*!*
+  let div2 = div.cloneNode(true); // clone the message
+  div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone
+
+  div.after(div2); // show the clone after the existing div
+*/!*
+</script>
+```
+
+## Removal methods
+
+To remove nodes, there are following methods:
+
+
+`parentElem.removeChild(node)`
+: Removes `elem` from  `parentElem` (assuming it's a child).
+
+`node.remove()`
+: Removes the `node` from its place.
+
+We can easily see that the second method is much shorter. The first one exists for historical reasons.
+
+````smart
+If we want to *move* an element to another place -- there's no need to remove it from the old one.
+
+**All insertion methods automatically remove the node from the old place.**
+
+For instance, let's swap elements:
+
+```html run height=50
+<div id="first">First</div>
+<div id="second">Second</div>
+<script>
+  // no need to call remove
+  second.after(first); // take #second and after it - insert #first
+</script>
+```
+````
+
+Let's make our message disappear after a second:
+
+```html run untrusted
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
+
+<script>
+  let div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+
+  document.body.append(div);
+*!*
+  setTimeout(() => div.remove(), 1000);
+  // or setTimeout(() => document.body.removeChild(div), 1000);
+*/!*
+</script>
+```
+
+## A word about "document.write"
+
+There's one more, very ancient method of adding something to a web-page: `document.write`.
+
+The syntax:
+
+```html run
+<p>Somewhere in the page...</p>
+*!*
+<script>
+  document.write('<b>Hello from JS</b>');
+</script>
+*/!*
+<p>The end</p>
+```
+
+The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
+
+The method comes from times when there were no DOM, no standards... Really old times. It still lives, because there are scripts using it.
+
+In modern scripts we can rarely see it, because of the important limitation.
+
+**The call to `document.write` only works while the page is loading.**
+
+If we call it afterwards, the existing document content is erased.
+
+For instance:
+
+```html run
+<p>After one second the contents of this page will be replaced...</p>
+*!*
+<script>
+  // document.write after 1 second
+  // that's after the page loaded, so it erases the existing content
+  setTimeout(() => document.write('<b>...By this.</b>'), 1000);
+</script>
+*/!*
+```
+
+So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
+
+That was the downside.
+
+Technically, when `document.write` is called while the browser is still reading HTML, it appends something to it, and the browser consumes it just as it were initially there.
+
+That gives us the upside -- it works blazingly fast, because there's *no DOM modification*. It writes directly into the page text, while the DOM is not yet built, and the browser puts it into DOM at generation-time.
+
+So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
+
+## Summary
+
+Methods to create new nodes:
+
+- `document.createElement(tag)` -- creates an element with the given tag,
+- `document.createTextNode(value)` -- creates a text node (rarely used),
+- `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.  
+
+Insertion and removal of nodes:
+
+- From the parent:
+  - `parent.appendChild(node)`
+  - `parent.insertBefore(node, nextSibling)`
+  - `parent.removeChild(node)`
+  - `parent.replaceChild(newElem, node)`
+
+  All these methods return `node`.
+
+- Given a list of nodes and strings:
+  - `node.append(...nodes or strings)` -- insert into `node`, at the end,
+  - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
+  - `node.before(...nodes or strings)` –- insert right before `node`,
+  - `node.after(...nodes or strings)` –- insert right after `node`,
+  - `node.replaceWith(...nodes or strings)` –- replace `node`.
+  - `node.remove()` –- remove the `node`.
+
+  Text strings are inserted "as text".
+
+- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on where:
+  - `"beforebegin"` -- insert `html` right before `elem`,
+  - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
+  - `"beforeend"` -- insert `html` into `elem`, at the end,
+  - `"afterend"` -- insert `html` right after `elem`.
+
+  Also there are similar methods `elem.insertAdjacentText` and `elem.insertAdjacentElement`, they  insert text strings and elements, but they are rarely used.
+
+- To append HTML to the page before it has finished loading:
+  - `document.write(html)`
+
+  After the page is loaded such call erases the document. Mostly seen in old scripts.
diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after.png
new file mode 100644
index 00000000..5bff84d8
Binary files /dev/null and b/2-ui/1-document/07-modifying-document/before-prepend-append-after.png differ
diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png
new file mode 100644
index 00000000..44c369ee
Binary files /dev/null and b/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png differ
diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent.png b/2-ui/1-document/07-modifying-document/insert-adjacent.png
new file mode 100644
index 00000000..08063bc5
Binary files /dev/null and b/2-ui/1-document/07-modifying-document/insert-adjacent.png differ
diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png b/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png
new file mode 100644
index 00000000..60333ad1
Binary files /dev/null and b/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png differ
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/1-clock/solution.md
rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.md
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css
new file mode 100755
index 00000000..e8d9160b
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css
@@ -0,0 +1,14 @@
+.notification {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  font-size: 20px;
+  background: white;
+  text-align: center;
+}
+
+.welcome {
+  background: #b80000;
+  color: yellow;
+}
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
new file mode 100755
index 00000000..5b8a6336
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <h2>Notification is on the right</h2>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
+    magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
+    temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
+  </p>
+
+  <script>
+    function showNotification({top = 0, right = 0, className, html}) {
+
+      let notification = document.createElement('div');
+      notification.className = "notification";
+      if (className) {
+        notification.classList.add(className);
+      }
+
+      notification.style.top = top + 'px';
+      notification.style.right = right + 'px';
+
+      notification.innerHTML = options.html;
+      document.body.append(notification);
+
+      setTimeout(() => notification.remove(), 1500);
+    }
+
+    // test it
+    let i = 1;
+    setInterval(() => {
+      showNotification({
+        top: 10,
+        right: 10,
+        html: 'Hello ' + i++,
+        className: "welcome"
+      });
+    }, 2000);
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css
new file mode 100755
index 00000000..e8d9160b
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css
@@ -0,0 +1,14 @@
+.notification {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  font-size: 20px;
+  background: white;
+  text-align: center;
+}
+
+.welcome {
+  background: #b80000;
+  color: yellow;
+}
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html
new file mode 100755
index 00000000..b5e2f83f
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <h2>Notification is on the right</h2>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
+    magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
+    temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
+  </p>
+
+  <script>
+    function showNotification({top = 0, right = 0, className, html}) {
+      /* your code */
+    }
+
+    // test it
+    let i = 1;
+    setInterval(() => {
+      showNotification({
+        top: 10,
+        right: 10,
+        html: 'Hello ' + i++,
+        className: "welcome"
+      });
+    }, 2000);
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md
new file mode 100644
index 00000000..7df1986c
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Create a notification
+
+Write a function `showNotification(options)` that a notification: `<div class="notification">` with the given content. The notification should automatically disappear after 1.5 seconds.
+
+The options are:
+
+```js
+// shows an element with the text "Hello" near the right-top of the window
+showNotification({
+  top: 10, // 10px from the top of the window (by default 0px)
+  right: 10, // 10px from the right edge of the window (by default 0px)
+  html: "Hello!", // the HTML of notification
+  className: "welcome" // an additional class for the div (optional)
+});
+```
+
+[demo src="solution"]
+
+
+Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles.
diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md
new file mode 100644
index 00000000..fafdf26d
--- /dev/null
+++ b/2-ui/1-document/08-styles-and-classes/article.md
@@ -0,0 +1,304 @@
+# Styles and classes
+
+Before we get to JavaScript ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it.
+
+There are generally two ways to style an element:
+
+1. Create a class in CSS and add it: `<div class="...">`
+2. Write properties directly into `style`: `<div style="...">`.
+
+[cut]
+
+CSS is always the preferred way -- not only for HTML, but in JavaScript as well.
+
+We should only manipulate the `style` property if classes "can't handle it".
+
+For instance, `style` is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this:
+
+```js
+let top = /* complex calculations */;
+let left = /* complex calculations */;
+elem.style.left = left; // e.g '123px'
+elem.style.top = top; // e.g '456px'
+```
+
+For other cases, like making the text red, adding a background icon -- describe that in CSS and then apply the class. That's more flexible and easier to support.
+
+## className and classList
+
+Changing a class is one of the most often actions in scripts.
+
+In the ancient time, there was a limitation in JavaScript: a reserved word like `"class"` could not be an object property. That limitation does not exist now, but at that time it was impossible to have a `"class"` property, like `elem.class`.
+
+So for classes the similar-looking property `"className"` was introduced: the `elem.className` corresponds to the `"class"` attribute.
+
+For instance:
+
+```html run
+<body class="main page">
+  <script>
+    alert(document.body.className); // main page
+  </script>
+</body>
+```
+
+If we assign something to `elem.className`, it replaces the whole strings of classes. Sometimes that's what we need, but often we want to add/remove a single class.
+
+There's another property for that: `elem.classList`.
+
+The `elem.classList` is a special object with methods to `add/remove/toggle` classes.
+
+For instance:
+
+```html run
+<body class="main page">
+  <script>
+*!*
+    // add a class
+    document.body.classList.add('article');
+*/!*
+
+    alert(document.body.className); // main page article
+  </script>
+</body>
+```
+
+So we can operate both on the full class string using `className` or on individual classes using `classList`. What we choose depends on our needs.
+
+Methods of `classList`:
+
+- `elem.classList.add/remove("class")` -- adds/removes the class.
+- `elem.classList.toggle("class")` -- if the class exists, then removes it, otherwise adds it.
+- `elem.classList.contains("class")` -- returns `true/false`, checks for the given class.
+
+Besides that, `classList` is iterable, so we can list all classes like this:
+
+```html run
+<body class="main page">
+  <script>
+    for(let name of document.body.classList) {
+      alert(name); // main, and then page
+    }
+  </script>
+</body>
+```
+
+## Element style
+
+The property `elem.style` is an object that corresponds to what's written in the `"style"` attribute. Setting `elem.style.width="100px"` works as if we had in the attribute `style="width:100px"`.
+
+For multi-word property the camelCase is used:
+
+```js no-beautify
+background-color  => elem.style.backgroundColor
+z-index           => elem.style.zIndex
+border-left-width => elem.style.borderLeftWidth
+```
+
+For instance:
+
+```js run
+document.body.style.backgroundColor = prompt('background color?', 'green');
+```
+
+````smart header="Prefixed properties"
+Browser-prefixed properties like `-moz-border-radius`, `-webkit-border-radius` also follow the same rule, for instance:
+
+```js
+button.style.MozBorderRadius = '5px';
+button.style.WebkitBorderRadius = '5px';
+```
+
+That is: a dash `"-"` becomes an uppercase.
+````
+
+## Resetting the style property
+
+Sometimes we want to assign a style property, and later remove it.
+
+For instance, to hide an element, we can set `elem.style.display = "none"`.
+
+Then later we may want to remove the `style.display` as if it were not set. Instead of `delete elem.style.display` we should assign an empty line to it: `elem.style.display = ""`.
+
+```js run
+// if we run this code, the <body> "blinks"
+document.body.style.display = "none"; // hide
+
+setTimeout(() => document.body.style.display = "", 1000); // back to normal
+```
+
+If we set `display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `style` property at all.
+
+````smart header="Full rewrite with `style.cssText`"
+Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only.
+
+To set the full style as a string, there's a special property `style.cssText`:
+
+```html run
+<div id="div">Button</div>
+
+<script>
+  // we can set special style flags like "important" here
+  div.style.cssText=`color: red !important;
+    background-color: yellow;
+    width: 100px;
+    text-align: center;
+  `;
+
+  alert(div.style.cssText);
+</script>
+```
+
+We rarely use it, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But still can be done for new elements when we know we don't delete something important.
+
+The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`.
+````
+
+## Mind the units
+
+CSS units must be provided in style values.
+
+For instance, we should not set `elem.style.top` to `10`, but rather to `10px`. Otherwise it wouldn't work:
+
+```html run height=100
+<body>
+  <script>
+  *!*
+    // doesn't work!
+    document.body.style.margin = 20;
+    alert(document.body.style.margin); // '' (empty string, the assignment is ignored)
+  */!*
+
+    // now add the CSS unit (px) - and it works
+    document.body.style.margin = '20px';
+    alert(document.body.style.margin); // 20px
+
+    alert(document.body.style.marginTop); // 20px
+    alert(document.body.style.marginLeft); // 20px
+  </script>
+</body>
+```
+
+Please note how the browser "unpacks" the property `style.margin` in the last lines and infers `style.marginLeft` and `style.marginTop` (and other partial margins) from it.
+
+## Computed styles: getComputedStyle
+
+Modifying a style is easy. But how to *read* it?
+
+For instance, we want to know the size, margins, the color of an element. How to do it?
+
+**The `style` property operates only on the value of the `"style"` attribute, without any CSS cascade.**
+
+So we can't read anything that comes from CSS classes using `elem.style`.
+
+For instance, here `style` doesn't see the margin:
+
+```html run height=60 no-beautify
+<head>
+  <style> body { color: red; margin: 5px } </style>
+</head>
+<body>
+
+  The red text
+  <script>
+*!*
+    alert(document.body.style.color); // empty
+    alert(document.body.style.marginTop); // empty
+*/!*
+  </script>
+</body>
+```
+
+...But what if we need, say, increase the margin by 20px? We want the current value for the start.
+
+There's another method for that: `getComputedStyle`.
+
+The syntax is:
+
+```js
+getComputedStyle(element[, pseudo])
+```
+
+element
+: Element to read the value for.
+
+pseudo
+: A pseudo-element if required, for instance `::before`. An empty string or no argument mean the element itself.
+
+The result is an object with style properties, like `elem.style`, but now with respect to all CSS classes.
+
+For instance:
+
+```html run height=100
+<head>
+  <style> body { color: red; margin: 5px } </style>
+</head>
+<body>
+
+  <script>
+    let computedStyle = getComputedStyle(document.body);
+
+    // now we can read the margin and the color from it
+
+    alert( computedStyle.marginTop ); // 5px
+    alert( computedStyle.color ); // rgb(255, 0, 0)
+  </script>
+
+</body>
+```
+
+```smart header="Computed and resolved values"
+There are two concepts in [CSS](https://drafts.csswg.org/cssom/#resolved-values):
+
+1. A *computed* style value is the value after all CSS rules and CSS inheritance is applied, as the  result of the CSS cascade. If can look like `height:1em` or `font-size:125%`.
+2. A *resolved* style value is the one finally applied to the element. Values like `1em` or `125%` are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: `height:20px` or `font-size:16px`. For geometry properties resolved values may have a floating point, like `width:50.5px`.
+
+Long time ago `getComputedStyle` was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed.
+
+So nowadays `getComputedStyle` actually returns the resolved value of the property.
+```
+
+````warn header="`getComputedStyle` requires the full property name"
+We should always ask for the exact property that we want, like `paddingLeft` or `marginTop` or `borderTopWidth`. Otherwise the correct result is not guaranteed.
+
+For instance, if there are properties `paddingLeft/paddingTop`, then what should we get for `getComputedStyle(elem).padding`? Nothing, or maybe a "generated" value from known paddings? There's no standard rule here.
+
+There are other inconsistencies. As an example, some browsers (Chrome) show `10px` in the document below, and some of them (Firefox) --  do not:
+
+```html run
+<style>
+  body {
+    margin: 10px;
+  }
+</style>
+<script>
+  let style = getComputedStyle(document.body);
+  alert(style.margin); // empty string in Firefox
+</script>
+```
+````
+
+```smart header="\"Visited\" links styles are hidden!"
+Visited links may be colored using `:visited` CSS pseudoclass.
+
+But `getComputedStyle` does not give access to that color, because otherwise an arbitrary page could find out whether the user visited a link by creating it on the page and checking the styles.
+
+JavaScript we may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids to apply geometry-changing styles in `:visited`. That's to guarantee that there's no side way for an evil page to test if a link was visited and hence to break the privacy.
+```
+
+## Summary
+
+To manage classes, there are two DOM properties:
+
+- `className` -- the string value, good to manage the whole set of classes.
+- `classList` -- the object with methods `add/remove/toggle/contains`, good for individual classes.
+
+To change the styles:
+
+- The `style` property is an object with camelCased styles. Reading and writing to it has the same meaning as modifying individual properties in the `"style"` attribute. To see how to apply `important` and other rare stuff -- there's a list of methods at [MDN](mdn:api/CSSStyleDeclaration).
+
+- The `style.cssText` property corresponds to the whole `"style"` attribute, the full string of styles.
+
+To read the resolved styles (with respect to all classes, after all CSS is applied and final values are calculated):
+
+- The `getComputedStyles(elem[, pseudo])` returns the style-like object with them. Read-only.
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md
new file mode 100644
index 00000000..01e07365
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md
@@ -0,0 +1,7 @@
+The solution is:
+
+```js
+let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
+```
+
+In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part.
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md
new file mode 100644
index 00000000..b0f1f221
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md
@@ -0,0 +1,11 @@
+importance: 5
+
+---
+
+# What's the scroll from the bottom?
+
+The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get "`scrollBottom`" -- the size from the bottom?
+
+Write the code that works for an arbitrary `elem`.
+
+P.S. Please check your code: if there's no scroll or the element is fully scrolled down, then it should return `0`.
diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md
new file mode 100644
index 00000000..1ba1e5e5
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md
@@ -0,0 +1,20 @@
+To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.
+
+Then the difference between its full width `offsetWidth` and the inner content area width `clientWidth` will be exactly the scrollbar:
+
+```js run
+// create a div with the scroll
+let div = document.createElement('div');
+
+div.style.overflowY = 'scroll';
+div.style.width = '50px';
+div.style.height = '50px';
+
+// must put it in the document, otherwise sizes will be 0
+document.body.append(div);
+let scrollWidth = div.offsetWidth - div.clientWidth;
+
+div.remove();
+
+alert(scrollWidth);
+```
diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md
new file mode 100644
index 00000000..67787894
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md
@@ -0,0 +1,11 @@
+importance: 3
+
+---
+
+# What is the scrollbar width?
+
+Write the code that returns the width of a standard scrollbar.
+
+For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserves any space for it, then it may be `0px`.
+
+P.S. The code should work for any HTML document, do not depend on its content.
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html
new file mode 100755
index 00000000..ca9c4d57
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    #field {
+      width: 200px;
+      border: 10px groove black;
+      background-color: #00FF00;
+      position: relative;
+    }
+    
+    #ball {
+      position: absolute;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <script>
+    let ball = document.getElementById('ball')
+    let field = document.getElementById('field')
+
+    // ball.offsetWidth=0 before image loaded!
+    // to fix: set width
+    ball.style.left = Math.round(field.clientWidth / 2) + 'px'
+    ball.style.top = Math.round(field.clientHeight / 2) + 'px'
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png
new file mode 100644
index 00000000..098f9eb6
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png
new file mode 100644
index 00000000..3ecb2937
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md
new file mode 100644
index 00000000..69dec23c
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md
@@ -0,0 +1,54 @@
+The ball has `position:absolute`. It means that its `left/top` coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
+
+The coordinates start from the inner left-upper corner of the field:
+
+![](field.png)
+
+The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
+
+...But if we set `ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
+
+```js
+ball.style.left = Math.round(field.clientWidth / 2) + 'px';
+ball.style.top = Math.round(field.clientHeight / 2) + 'px';
+```
+
+Here's how it looks:
+
+[iframe height=180 src="ball-half"]
+
+To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
+
+```js
+ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
+ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
+```
+
+**Attention: the pitfall!**
+
+The code won't work reliably while `<img>` has no width/height:
+
+```html
+<img src="ball.png" id="ball">
+```
+
+When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
+
+In real life after the first load browser usually caches the image, and on next loads it will have the size immediately.
+
+But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
+
+We should fix that by adding `width/height` to `<img>`:
+
+```html
+<img src="ball.png" *!*width="40" height="40"*/!* id="ball">
+```
+
+...Or provide the size in CSS:
+
+```css
+#ball {
+  width: 40px;
+  height: 40px;
+}
+```
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html
new file mode 100755
index 00000000..9ebe6001
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    #field {
+      width: 200px;
+      border: 10px groove black;
+      background-color: #00FF00;
+      position: relative;
+    }
+
+    #ball {
+      position: absolute;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <script>
+    // ball.offsetWidth=0 before image loaded! 
+    // to fix: set width
+    ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
+    ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
+  </script>
+
+
+</body>
+
+</html>
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html
new file mode 100755
index 00000000..4f8eea63
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    #field {
+      width: 200px;
+      border: 10px groove black;
+      background-color: #00FF00;
+      position: relative;
+    }
+
+    #ball {
+      position: absolute;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+</body>
+
+</html>
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md
new file mode 100644
index 00000000..57746d92
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Place the ball in the field center
+
+Here's how the source document looks:
+
+[iframe src="source" edit link height=180]
+
+What are coordinates of the field center?
+
+Calculate them and use to place the ball into the center of the field:
+
+[iframe src="solution" height=180]
+
+- The element should be moved by JavaScript, not CSS.
+- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
+
+P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md
new file mode 100644
index 00000000..a011d5a7
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md
@@ -0,0 +1,6 @@
+Differences:
+
+1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end.
+2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element.
+3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner conand sometent area *without paddings*.
+4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved.
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md
new file mode 100644
index 00000000..5378c591
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# The difference: CSS width versus clientWidth
+
+What's the difference between `getComputedStyle(elem).width` and `elem.clientWidth`?
+
+Give at least 3 differences. The more the better.
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
new file mode 100644
index 00000000..b3915c22
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/article.md
@@ -0,0 +1,277 @@
+# Element size and scrolling
+
+There are many JavaScript properties that allow to read information about element width, height and other geometry features.
+
+We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates.
+
+[cut]
+
+
+## Sample element
+
+As a sample element to demonstrate properties we'll use the one given below:
+
+```html no-beautify
+<div id="example">
+  ...Text...
+</div>
+<style>
+  #example {
+    width: 300px;
+    height: 200px;
+    border: 25px solid #E8C48F;
+    padding: 20px;              
+    overflow: auto;             
+  }
+</style>
+```
+
+It has the border, padding and scrolling. The full set of features. There are no margins, as they are not the part of the element itself, and there are no special properties for them.
+
+The element looks like this:
+
+![](metric-css.png)
+
+You can [open the document in the sandbox](sandbox:metric).
+
+```smart header="Mind the scrollbar"
+The picture above demonstrates the most complex case when the element has a scrollbar. Some browsers (not all) reserve the space for it by taking it from the content.
+
+So, without scrollbar the content width would be `300px`, but if the scrollbar is `16px` wide (the width may vary between devices and browsers) then only `300-16 = 284px` remains, and we should take it into account. That's why examples from this chapter assume that there's a scrollbar. If there's no scrollbar, then things are just a bit simpler.
+```
+
+```smart header="The `padding-bottom` may be filled with text"
+Usually paddings are shown empty on illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`, so you can see that in examples. But the padding is still there, unless specified otherwise.
+```
+
+## Geometry
+
+Element properties that provide width, height and other geometry are always numbers. They are assumed to be in pixels.
+
+Here's the overall picture:
+
+![](metric-all.png)
+
+They are many properties, it's difficult to fit them all in the single picture, but their values are simple and easy to understand.
+
+Let's start exploring them from the outside of the element.
+
+## offsetParent, offsetLeft/Top
+
+These properties are rarely needed, but still they are the "most outer" geometry properties, so we'll start with them.
+
+The `offsetParent` is the nearest ancestor that is:
+
+1. CSS-positioned (`position` is `absolute`, `relative` or `fixed`),
+2. or `<td>`, `<th>`, `<table>`,
+2. or `<body>`.
+
+In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner.
+
+In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` are shifts from its left-upper corner (`180`):
+
+```html run height=10
+<main style="position: relative" id="main">
+  <article>
+    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
+  </article>
+</main>
+<script>
+  alert(example.offsetParent.id); // main
+  alert(example.offsetLeft); // 180 (note: a number, not a string "180px")
+  alert(example.offsetTop); // 180
+</script>
+```
+
+![](metric-offset-parent.png)
+
+
+There are several occasions when `offsetParent` is `null`:
+
+1. For not shown elements (`display:none` or not in the document).
+2. For `<body>` and `<html>`.
+3. For elements with `position:fixed` on them.
+
+## offsetWidth/Height
+
+Now let's move to the element itself.
+
+These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders.
+
+![](metric-offset-width-height.png)
+
+For our sample element:
+
+- `offsetWidth = 390` -- the outer width, can be calculated as inner CSS-width (`300px`) plus paddings (`2*20px`) and borders (`2*25px`).
+- `offsetHeight = 290` -- the outer height.
+
+````smart header="Geometry properties for not shown elements are zero/null"
+Geometry properties are calculated only for shown elements.
+
+If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero or `null` depending on what it is.
+
+For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0`.
+
+We can use this to check if an element is hidden, like this:
+
+```js
+function isHidden(elem) {
+  return !elem.offsetWidth && !elem.offsetHeight;
+}
+```
+
+Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes (like an empty `<div>`).
+````
+
+## clientTop/Left
+
+Inside the element we have the borders.
+
+To measure them, there are properties `clientTop` and `clientLeft`.
+
+In our example:
+
+- `clientLeft = 25` -- left border width
+- `clientTop = 25` -- top border width
+
+![](metric-client-left-top.png)
+
+...But to be precise -- they are not borders, but relative coordinates of the inner side from the outer side.
+
+What's the difference?
+
+It becomes visible when the document is right-to-left (the operation system is in arabic or hebrew languages). The scrollbar is then not on the right, but on the left, and then `clientLeft` also includes the scrollbar width.
+
+In that case `clientLeft` in our example would be not `25`, but with the scrollbar width `25+16=41`:
+
+![](metric-client-left-top-rtl.png)
+
+## clientWidth/Height
+
+These properties provide the size of the area inside the element borders.
+
+They include the content width together with paddings, but without the scrollbar:
+
+![](metric-client-width-height.png)
+
+On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2*20px`) total `240px`.
+
+Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`.
+
+**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
+
+![](metric-client-width-nopadding.png)
+
+So when there's no padding we can use `clientWidth/clientHeight` to get the content area size.
+
+## scrollWidth/Height
+
+- Properties `clientWidth/clientHeight` only account for the visible part of the element.
+- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) part:
+
+![](metric-scroll-width-height.png)
+
+On the picture above:
+
+- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out part.
+- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`.
+
+We can use these properties to expand the element wide to its full width/height.
+
+Like this:
+
+```js
+// expand the element to the full content height
+element.style.height = element.scrollHeight + 'px';
+```
+
+```online
+Click the button to expand the element:
+
+<div id="element" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
+
+<button style="padding:0" onclick="element.style.height = element.scrollHeight + 'px'">element.style.height = element.scrollHeight + 'px'</button>
+```
+
+## scrollLeft/scrollTop
+
+Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled out part of the element.
+
+On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
+
+![](metric-scroll-top.png)
+
+In other words, `scrollTop` is "how much is scrolled up".
+
+````smart header="`scrollLeft/scrollTop` can be modified"
+Most geometry properties that are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element.
+
+```online
+If you click the element below, the code `elem.scrollTop+=10` executes. That makes the element content scroll `10px` below.
+
+<div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
+```
+
+Setting `scrollTop` to `0` or `Infinity` will make the element scroll to the very top/bottom respectively.
+````
+
+## Don't take width/height from CSS
+
+We've just covered geometry properties of DOM elements. They are normally used to get widths, heights and calculate distances.
+
+But as we know from the chapter <info:styles-and-classes>, we can read CSS-height and width using `getComputedStyle`.
+
+So why not to read the width of an element like this?
+
+```js run
+let elem = document.body;
+
+alert( getComputedStyle(elem).width ); // show CSS width for elem
+```
+
+Why we should use geometry properties instead? There are two reasons:
+
+1. First, CSS width/height depend on another property: `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for CSS purposes may break such JavaScript.
+2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
+
+    ```html run
+    <span id="elem">Hello!</span>
+
+    <script>
+    *!*
+      alert( getComputedStyle(elem).width ); // auto
+    */!*
+    </script>
+    ```
+
+    From the CSS standpoint, `width:auto` is perfectly normal, but in JavaScript we need an exact size in `px` that we can use in calculations. So here CSS width is useless at all.
+
+And there's one more reason: a scrollbar. Sometimes the code that works fine without a scrollbar starts to bug with it, because a scrollbar takes the space from the content in some browsers. So the real width available for the content is *less* than CSS width. And `clientWidth/clientHeight` take that into account.
+
+...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry propeties.
+
+```online
+If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below.
+
+[iframe src="cssWidthScroll" link border=1]
+
+The element with text has CSS `width:300px`.
+
+On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But  Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width.
+```
+
+Please note that the described difference are only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct.
+
+## Summary
+
+Elements have the following geometry properties:
+
+- `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`.
+- `offsetLeft/offsetTop` -- coordinates relative to the left-upper edge of `offsetParent`.
+- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
+- `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
+- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
+- `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out part. Also includes paddings, but not the scrollbar.
+- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner.
+
+All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed.
diff --git a/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html b/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html
new file mode 100755
index 00000000..2869c7ed
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
+    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
+    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
+    text text text text text text text text text text text text text text text text text text text text text text text text text text
+  </div>
+
+  The element has <code>style="width:300px"</code>
+  <br>
+
+  <button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
+
+</body>
+</html>
diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.png b/2-ui/1-document/09-size-and-scroll/metric-all.png
new file mode 100644
index 00000000..6deec908
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-all.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-all@2x.png b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png
new file mode 100644
index 00000000..e084c257
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png
new file mode 100644
index 00000000..ffb10aa1
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png
new file mode 100644
index 00000000..48510e6e
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png
new file mode 100644
index 00000000..33faf9be
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png
new file mode 100644
index 00000000..a8e170ea
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png
new file mode 100644
index 00000000..ed44652d
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png
new file mode 100644
index 00000000..f31f483e
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png
new file mode 100644
index 00000000..a183c6b3
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png
new file mode 100644
index 00000000..5a73f87a
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.png b/2-ui/1-document/09-size-and-scroll/metric-css.png
new file mode 100644
index 00000000..564c210a
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-css.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-css@2x.png b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png
new file mode 100644
index 00000000..e4fd7bb8
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png
new file mode 100644
index 00000000..5f1e58f9
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png
new file mode 100644
index 00000000..af62ebdc
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png
new file mode 100644
index 00000000..a13075f0
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png
new file mode 100644
index 00000000..7bfb24c2
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png
new file mode 100644
index 00000000..4bc795aa
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png
new file mode 100644
index 00000000..bf0cf711
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png
new file mode 100644
index 00000000..581c2144
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png
new file mode 100644
index 00000000..1e2a20f5
Binary files /dev/null and b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png differ
diff --git a/2-ui/1-document/09-size-and-scroll/metric.view/index.html b/2-ui/1-document/09-size-and-scroll/metric.view/index.html
new file mode 100755
index 00000000..4ac20816
--- /dev/null
+++ b/2-ui/1-document/09-size-and-scroll/metric.view/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style type="text/css">
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    #example {
+      width: 300px;
+      height: 200px;
+      overflow: auto;
+      border: 25px solid #E8C48F;
+      padding: 20px;
+    }
+
+    .key {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  </style>
+
+</head>
+
+<body>
+
+
+  <div id="example">
+    <h3>Introduction</h3>
+    <p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
+      It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the
+      Ecma General Assembly of June 1997.</p>
+
+    <p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep
+      it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
+
+    <p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation
+      of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
+
+  </div>
+
+
+  <div id="mouse-wrap">Mouse coordinates: <span id="mouse">...</span></div>
+  <div id="info"></div>
+
+
+  <script>
+    let props = {
+      geometry: ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
+      scroll: ['scrollLeft', 'scrollTop'],
+      offsetParent: ['offsetParent', 'offsetLeft', 'offsetTop']
+    };
+
+    info.innerHTML = '<h3>Click to see the value:</h3>';
+    for (let k in props) {
+      info.innerHTML += `<h4>${k}</h4>`;
+      let prop = props[k];
+      for (let i = 0; i < prop.length; i++) {
+        info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>' + " "
+        i++;
+        if (i < prop.length) {
+          info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>';
+        }
+        info.innerHTML += "<br/>";
+
+      }
+    }
+
+    document.onclick = function(event) {
+      let target = event.target;
+      if (!target.classList.contains('key')) return;
+
+      let prop = target.innerHTML;
+      let value = example[prop];
+      value = value.tagName || value;
+      document.getElementById(prop).innerHTML = value;
+    };
+
+
+    document.onmousemove = function(e) {
+      document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/1-browser-environment/article.md b/2-ui/1-document/1-browser-environment/article.md
deleted file mode 100644
index c713e303..00000000
--- a/2-ui/1-document/1-browser-environment/article.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Окружение: DOM, BOM и JS
-
-Сам по себе язык JavaScript не предусматривает работы с браузером.
-
-Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
-
-[cut]
-
-
-На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
-
-<img src="windowObjects.png">
-
-Как видно из рисунка, на вершине стоит `window`.
-
-У этого объекта двоякая позиция -- он с одной стороны является глобальным объектом в JavaScript, с другой -- содержит свойства и методы для управления окном браузера, открытия новых окон, например:
-
-```js
-//+ run
-// открыть новое окно/вкладку с URL http://ya.ru
-window.open('http://ya.ru');
-```
-
-## Объектная модель документа (DOM)
-
-Глобальный объект `document` даёт возможность взаимодействовать с содержимым страницы.
-
-Пример использования:
-```js
-//+ run
-document.body.style.background = 'red';
-alert( 'Элемент BODY стал красным, а сейчас обратно вернётся' );
-document.body.style.background = '';
-```
-
-Он и громадное количество его свойств и методов описаны в [стандарте W3C DOM](http://www.w3.org/DOM/DOMTR).
-
-По историческим причинам когда-то появилась первая версия стандарта DOM Level 1, затем придумали ещё свойства и методы, и появился DOM Level 2, на текущий момент поверх них добавили ещё DOM Level 3 и готовится DOM 4.
-
-Современные браузеры также поддерживают некоторые возможности, которые не вошли в стандарты, но де-факто существуют давным-давно и отказываться от них никто не хочет. Их условно называют "DOM Level 0".
-
-Также информацию по работе с элементами страницы можно найти в стандарте [HTML 5](http://www.w3.org/TR/html5/Overview.html).
-
-Мы подробно ознакомимся с DOM далее в этой части учебника.
-
-## Объектная модель браузера (BOM)
-
-BOM -- это объекты для работы с чем угодно, кроме документа.
-
-Например:
-<ul>
-<li>Объект [navigator](https://developer.mozilla.org/en/DOM/window.navigator) содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: `navigator.userAgent` -- содержит информацию о браузере и `navigator.platform` -- содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.</li>
-<li>Объект [location](https://developer.mozilla.org/en-US/docs/Web/API/Window.location) содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.</li>
-<li>Функции `alert/confirm/prompt` -- тоже входят в BOM.</li>
-</ul>
-
-Пример использования:
-```js
-//+ run
-alert( location.href ); // выведет текущий адрес
-```
-
-Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), хотя различные браузеры и предоставляют зачастую что-то своё, в дополнение к стандарту.
-
-## Итого
-
-Итак, у нас есть DOM, BOM и, собственно, язык JavaScript, который даёт возможность управлять всем этим. 
-
-Далее мы приступим к изучению DOM, поскольку именно документ занимает центральную роль в организации интерфейса, и работа с ним -- сложнее всего.
\ No newline at end of file
diff --git a/2-ui/1-document/1-browser-environment/windowObjects.png b/2-ui/1-document/1-browser-environment/windowObjects.png
deleted file mode 100644
index 85fa0118..00000000
Binary files a/2-ui/1-document/1-browser-environment/windowObjects.png and /dev/null differ
diff --git a/2-ui/1-document/1-browser-environment/windowObjects@2x.png b/2-ui/1-document/1-browser-environment/windowObjects@2x.png
deleted file mode 100644
index b8d40220..00000000
Binary files a/2-ui/1-document/1-browser-environment/windowObjects@2x.png and /dev/null differ
diff --git a/2-ui/1-document/10-compare-document-position/article.md b/2-ui/1-document/10-compare-document-position/article.md
deleted file mode 100644
index 91c7934a..00000000
--- a/2-ui/1-document/10-compare-document-position/article.md
+++ /dev/null
@@ -1,170 +0,0 @@
-# Методы contains и compareDocumentPosition
-
-Если есть два элемента, то иногда бывает нужно понять, лежит ли один из них выше другого, то есть является ли его предком.
-
-Обычные поисковые методы здесь не дают ответа, но есть два специальных. Они используются редко, но когда подобная задача встаёт, то знание метода может сэкономить много строк кода.
-
-[cut]
-
-## Метод contains для проверки на вложенность
-
-Синтаксис:
-
-```js
-var result = parent.contains(child);
-```
-
-Возвращает `true`, если `parent` содержит `child` или `parent == child`.
-
-## Метод compareDocumentPosition для порядка узлов
-
-Бывает, что у нас есть два элемента, к примеру, `<li>` в списке, и нужно понять, какой из них выше другого.
-
-Метод `compareDocumentPosition` -- более мощный, чем `contains`, он предоставляет одновременно информацию и о содержании и об относительном порядке элементов.
-
-Синтаксис:
-
-```js
-var result = nodeA.compareDocumentPosition(nodeB);
-```
-
-Возвращаемое значение -- битовая маска (см. [](/bitwise-operators)), биты в которой означают следующее:
-
-<table>
-<thead>
-<tr>
-<th>Биты</th>
-<th>Число</th>
-<th>Значение</th>
-</tr>
-</thead>
-<tbody>
-<tr><td>000000</td><td>0</td><td>`nodeA` и `nodeB` -- один и тот же узел</td></tr>
-<tr><td>000001</td><td>1</td><td>Узлы в разных документах (или один из них не в документе)</td></tr>
-<tr><td>000010</td><td>2</td><td>`nodeB` предшествует `nodeA` (в порядке обхода документа)</td></tr>
-<tr><td>000100</td><td>4</td><td>`nodeA` предшествует `nodeB`</td></tr>
-<tr><td>001000</td><td>8</td><td>`nodeB` содержит `nodeA`</td></tr>
-<tr><td>010000</td><td>16</td><td>`nodeA` содержит `nodeB`</td></tr>
-<tr><td>100000</td><td>32</td><td>Зарезервировано для браузера</td></tr>
-</tbody>
-</table>
-
-Понятие "предшествует" -- означает не только "предыдущий сосед при общем родителе", но и имеет более общий смысл:  "раньше встречается в порядке [прямого обхода](http://algolist.manual.ru/ds/walk.php) дерева документа.
-
-Могут быть и сочетания битов. Примеры реальных значений:
-
-```html
-<!--+ run -->
-<p>...</p>
-<ul>
-  <li>1.1</li>
-</ul>
-
-<script>
-  var p = document.body.children[0];
-  var ul = document.body.children[1];
-  var li = ul.children[0];
-
-  // 1. <ul> находится после <p>
-  alert( ul.compareDocumentPosition(p) ); // 2 = 10
-
-  // 2. <p> находится до <ul>
-  alert( p.compareDocumentPosition(ul) ); // 4 = 100
-
-  // 3. <ul> родитель <li>
-  alert( ul.compareDocumentPosition(li) ); // 20 = 10100
-
-  // 4. <ul> потомок <body>
-  alert( ul.compareDocumentPosition(document.body) ); // 10 = 1010
-</script>
-```
-
-Более подробно:
-<ol>
-<li>Узлы не вложены один в другой, поэтому стоит только бит "предшествования", отсюда `10`.</li>
-<li>То же самое, но обратный порядок узлов, поэтому `100`.</li>
-<li>Здесь стоят сразу два бита: `10100` означает, что `ul` одновременно содержит `li` и является его предшественником, то есть при прямом обходе дерева документа сначала встречается `ul`, а потом `li`.</li>
-<li>Аналогично предыдущему, `1010` означает, что `document.body` содержит `ul` и предшествует ему.</li>
-</ol>
-
-[smart header="Перевод в двоичную систему"]
-Самый простой способ самостоятельно посмотреть, как число выглядит в 2-ной системе -- вызвать для него `toString(2)`, например:
-
-```js
-//+ run
-var x = 20;
-alert( x.toString(2) ); // "10100"
-```
-
-Или так:
-
-```js
-//+ run
-alert( 20..toString(2) );
-```
-
-Здесь после `20` две точки, так как если одна, то JS подумает, что после неё десятичная часть -- будет ошибка.
-[/smart]
-
-Проверить конкретное условие, например, "`nodeA` содержит `nodeB`", можно при помощи битовых операций, в данном случае: `nodeA.compareDocumentPosition(nodeB) & 16`, например:
-
-```html
-<!--+ run -->
-<ul>
-  <li>1</li>
-</ul>
-
-<script>
-  var body = document.body;
-  var li = document.body.children[0].children[0];
-
-*!*
-  if (body.compareDocumentPosition(li) & 16) {
-    alert( body + ' содержит ' + li );
-  }
-*/!*
-</script>
-```
-
-Более подробно о битовых масках:  [](/bitwise-operators).
-
-## Поддержка в IE8-
-
-В IE8- поддерживаются свои, нестандартные, метод и свойство:
-
-<dl>
-<dt>[nodeA.contains(nodeB)](http://msdn.microsoft.com/en-us/library/ms536377.aspx)</dt>
-<dd>Результат: `true`, если `nodeA` содержит `nodeB`, а также в том случае, если `nodeA == nodeB`.</dd>
-<dt>[node.sourceIndex](http://msdn.microsoft.com/en-us/library/ms534635.aspx)</dt>
-<dd>Номер элемента `node` в порядке прямого обхода дерева. Только для узлов-элементов.</dd>
-</dl>
-
-На их основе можно написать полифилл для `compareDocumentPosition`:
-
-```js
-// код с http://compatibility.shwups-cms.ch/en/polyfills/?&id=82
-(function() {
-  var el = document.documentElement;
-  if (!el.compareDocumentPosition && el.sourceIndex !== undefined) {
-
-    Element.prototype.compareDocumentPosition = function(other) {
-      return (this != other && this.contains(other) && 16) +
-        (this != other && other.contains(this) && 8) +
-        (this.sourceIndex >= 0 && other.sourceIndex >= 0 ?
-          (this.sourceIndex < other.sourceIndex && 4) +
-          (this.sourceIndex > other.sourceIndex && 2) : 1
-        ) + 0;
-    }
-  }
-}());
-```
-
-С этим полифиллом метод доступен для элементов во всех браузерах.
-
-## Итого
-
-<ul>
-<li>Для проверки, является ли один узел предком другого, достаточно метода `nodeA.contains(nodeB)`.</li>
-<li>Для расширенной проверки на предшествование есть метод `compareDocumentPosition`.</li>
-<li>Для IE8 нужен полифилл для `compareDocumentPosition`.</li>
-</ul>
diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md
new file mode 100644
index 00000000..ce682c62
--- /dev/null
+++ b/2-ui/1-document/10-size-and-scroll-window/article.md
@@ -0,0 +1,174 @@
+# Window sizes and scrolling
+
+How to find out the width of the browser window? How to get the full height of the document, including the scrolled out part? How to scroll the page using JavaScript?
+
+From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `<html>` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and pecularities important enough to consider.
+
+[cut]
+
+## Width/height of the window
+
+Properties `clientWidth/clientHeight` of `document.documentElement` is exactly what we want here:
+
+![](document-client-width-height.png)
+
+```online
+For instance, this button shows the height of your window:
+
+<button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
+```
+
+````warn header="Not `window.innerWidth/Height`"
+Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So what's the difference?
+
+If there's a scrollbar occupying some space, `clientWidth/clientHeight` provide the width/height inside it. In other words, they return width/height of the visible part of the document, available for the content.
+
+And `window.innerWidth/innerHeight` ignore the scrollbar.
+
+If there's a scrollbar, and it occupies some space, then these two lines show different values:
+```js run
+alert( window.innerWidth ); // full window width
+alert( document.documentElement.clientWidth ); // window width minus the scrollbar
+```
+
+In most cases we need the *available* window width: to draw or position something. That is: inside scrollbars if there are any. So we should use `documentElement.clientHeight/Width`.
+````
+
+```warn header="`DOCTYPE` is important"
+Please note: top-level geometry properties may work a little bit differently when there's no `<!DOCTYPE HTML>` in HTML. Odd things are possible.
+
+In modern HTML we should always write `DOCTYPE`. Generally that's not a JavaScript question, but here it affects JavaScript as well.
+```
+
+## Width/height of the document
+
+Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure its full size as `documentElement.scrollWidth/scrollHeight`.
+
+These properties work well for regular elements. But 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`! For regular elements that's a nonsense.
+
+To have a reliable full window size, we should take the maximum of these properties:
+
+```js run
+let scrollHeight = Math.max(
+  document.body.scrollHeight, document.documentElement.scrollHeight,
+  document.body.offsetHeight, document.documentElement.offsetHeight,
+  document.body.clientHeight, document.documentElement.clientHeight
+);
+
+alert('Full document width, with scrolled out part: ' + scrollHeight);
+```
+
+Why so? Better don't ask. These inconsistencies come from ancient times, not a "smart" logic.
+
+## Get the current scroll [#page-scroll]
+
+Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`.
+
+What's with the page? Most browsers provide `documentElement.scrollLeft/Top` for the document scroll, but Chrome/Safari/Opera have bugs (like [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)) and we should use  `document.body` instead of `document.documentElement` there.
+
+Luckily, we don't have to remember these pecularities at all, because of the special properties `window.pageXOffset/pageYOffset`:
+
+```js run
+alert('Current scroll from the top: ' + window.pageYOffset);
+alert('Current scroll from the left: ' + window.pageXOffset);
+```
+
+These properties are read-only.
+
+## Scrolling: scrollTo, scrollBy, scrollIntoView [#window-scroll]
+
+```warn
+To scroll the page from JavaScript, its DOM must be fully built.
+
+For instance, if we try to scroll the page from the script in `<head>`, it won't work.
+```
+
+Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
+
+We can do the same for the page:
+- For all browsers except Chrome/Safari/Opera: modify  `document.documentElement.scrollTop/Left`.
+- In Chrome/Safari/Opera: use `document.body.scrollTop/Left` instead.
+
+It should work, but smells like cross-browser incompatibilities. Not good. Fortunately, there's a simpler, more universal solution: special methods  [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
+
+- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
+
+    ```online
+    The button below demonstrates this:
+
+    <button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
+    ```
+- The method `scrollTo(pageX,pageY)` scrolls the page relative to the document top-left corner. It's like setting `scrollLeft/scrollTop`.
+
+    To scroll to the very beginning, we can use `scrollTo(0,0)`.
+
+    ```online
+    <button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
+    ```
+
+These methods work for all browsers the same way.
+
+## scrollIntoView
+
+For completeness, let's cover one more method:  [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView).
+
+The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument:
+
+- if `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window. The upper edge of the element is aligned with the window top.
+- if `top=false`, then the page scrolls to make `elem` appear at the bottom. The bottom edge of the element is aligned with the window bottom.
+
+```online
+The button below scrolls the page to make itself show at the window top:
+
+<button onclick="this.scrollIntoView()">this.scrollIntoView()</button>
+
+And this button scrolls the page to show it at the bottom:
+
+<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>
+```
+
+## Forbid the scrolling
+
+Sometimes we need to make the document "unscrollable". For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
+
+To make the document unscrollable, its enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll.
+
+```online
+Try it:
+
+<button onclick="document.body.style.overflow = 'hidden'">`document.body.style.overflow = 'hidden'`</button>
+
+<button onclick="document.body.style.overflow = ''">`document.body.style.overflow = ''`</button>
+
+The first button freezes the scroll, the second one resumes it.
+```
+
+We can use the same technique to "freeze" the scroll for other elements, not just for `document.body`.
+
+The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content "jumps" to fill it.
+
+That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width same.
+
+## Summary
+
+Geometry:
+
+- Width/height of the visible part of the document (content area width/height): `document.documentElement.clientWidth/Height`
+- Width/height of the whole document, with the scrolled out part:
+
+    ```js
+    let scrollHeight = Math.max(
+      document.body.scrollHeight, document.documentElement.scrollHeight,
+      document.body.offsetHeight, document.documentElement.offsetHeight,
+      document.body.clientHeight, document.documentElement.clientHeight
+    );
+    ```
+
+Scrolling:
+
+- Read the current scroll: `window.pageYOffset/pageXOffset`.
+- Change the current scroll:
+
+    - `window.scrollTo(pageX,pageY)` -- absolute coordinates,
+    - `window.scrollBy(x,y)` -- scroll relative the current place,
+    - `elem.scrollIntoView(top)` -- scroll to make `elem` visible (align with the top/bottom of the window).
diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png
new file mode 100644
index 00000000..76a45a7a
Binary files /dev/null and b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png differ
diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png
new file mode 100644
index 00000000..249db0ed
Binary files /dev/null and b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png differ
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
new file mode 100644
index 00000000..f3547096
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
@@ -0,0 +1,42 @@
+# Outer corners
+
+Outer corners are basically what we get from  [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+
+Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+
+```js
+let coords = elem.getBoundingClientRect();
+
+let answer1 = [coords.left, coords.top];
+let answer2 = [coords.right, coords.bottom];
+```
+
+# Left-upper inner corner
+
+That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+
+```js
+let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
+```
+
+# Right-bottom inner corner
+
+In our case we need to substract the border size from the outer coordinates.
+
+We could use CSS way:
+
+```js
+let answer4 = [
+  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
+  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
+];
+```
+
+An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+
+```js
+let answer4 = [
+  coords.left + elem.clientLeft + elem.clientWidth,
+  coords.top + elem.clientTop + elem.clientHeight
+];
+```
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.css
similarity index 100%
rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css
rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.css
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
new file mode 100755
index 00000000..229c8718
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+  <script>
+    document.onclick = function(e) { // shows click coordinates
+      coords.innerHTML = e.clientX + ':' + e.clientY;
+    };
+  </script>
+</head>
+
+<body>
+
+  Click anywhere to get window coordinates.
+  <br> That's for testing, to check the result you get by JavaScript.
+  <br>
+  <div id="coords">(click coordinates show up here)</div>
+
+
+  <div id="field">
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
+  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
+  <div class="triangle-right" style="left:190px;top:-40px">4</div>
+  <div class="triangle-right" style="left:200px;top:-42px">2</div>
+
+  <script>
+    let fieldCoords = field.getBoundingClientRect();
+
+    let answer = [
+      [ // 1
+        fieldCoords.left,
+        fieldCoords.top
+      ],
+      [ // 2
+        fieldCoords.right,
+        fieldCoords.bottom
+      ],
+      [ // 3
+        fieldCoords.left + field.clientLeft,
+        fieldCoords.top + field.clientTop
+      ],
+      [ // 4
+        fieldCoords.left + field.clientLeft + field.clientWidth,
+        fieldCoords.top + field.clientTop + field.clientHeight
+      ]
+    ];
+
+    alert(answer.join('  '));
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css
new file mode 100755
index 00000000..8dea81bd
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css
@@ -0,0 +1,27 @@
+body {
+  padding: 20px 0 0 20px;
+  cursor: pointer;
+}
+
+#field {
+  overflow: hidden;
+  width: 200px;
+  height: 150px;
+  border-top: 10px solid black;
+  border-right: 10px solid gray;
+  border-bottom: 10px solid gray;
+  border-left: 10px solid black;
+  background-color: #00FF00;
+  font: 10px/1.2 monospace;
+}
+
+.triangle-right {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 20px solid red;
+  text-indent: -20px;
+  font: 12px/1 monospace;
+}
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
new file mode 100755
index 00000000..dd168f78
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+  <script>
+    document.onclick = function(e) { // shows click coordinates
+      coords.innerHTML = e.clientX + ':' + e.clientY;
+    };
+  </script>
+</head>
+
+<body>
+
+  Click anywhere to get window coordinates.
+  <br> That's for testing, to check the result you get by JavaScript.
+  <br>
+  <div id="coords">(click coordinates show up here)</div>
+
+
+  <div id="field">
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
+  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
+  <div class="triangle-right" style="left:190px;top:-40px">4</div>
+  <div class="triangle-right" style="left:200px;top:-42px">2</div>
+
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
new file mode 100644
index 00000000..603c8472
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Find window coordinates of the field
+
+In the iframe below you can see a document with the green "field".
+
+Use JavaScript to find window coordinates of corners pointed by with arrows.
+
+There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+
+[iframe border=1 height=360 src="source" link edit]
+
+Your code should use DOM to get window coordinates of:
+
+1. Left-upper outer corner (that's simple).
+2. Right-bottom outer corner (simple too).
+3. Left-upper inner corner (a bit harder).
+4. Right-bottom inner corner (there are several ways, choose one).
+
+The coordinates that you calculate should be the same as those returned by the mouse click.
+
+P.S. The code should also work if the element has another size or border, not bound to any fixed values.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md
new file mode 100644
index 00000000..646245f2
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/2-position-at/solution.md
@@ -0,0 +1,4 @@
+In this task we only need to accuracely calculate the coorindates. See the code for details.
+
+Please note: the elements must be in the document to read `offsetHeight` and other properties.
+A hidden (`display:none`) or out of the document element has no size.
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
similarity index 100%
rename from 2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css
rename to 2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
new file mode 100755
index 00000000..f931fbea
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+  <blockquote>
+    Teacher: Why are you late?
+    Student: There was a man who lost a hundred dollar bill.
+    Teacher: That's nice. Were you helping him look for it?
+    Student: No. I was standing on it.
+  </blockquote>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+
+  <script>
+    /**
+     * Positions elem relative to anchor as said in position.
+     *
+     * @param {Node} anchor     Anchor element for positioning
+     * @param {string} position One of: top/right/bottom
+     * @param {Node} elem       Element to position
+     *
+     * Both elements: elem and anchor must be in the document
+     */
+    function positionAt(anchor, position, elem) {
+
+      let anchorCoords = anchor.getBoundingClientRect();
+
+      switch (position) {
+        case "top":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+          break;
+
+        case "right":
+          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+          elem.style.top = anchorCoords.top + "px";
+          break;
+
+        case "bottom":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+          break;
+      }
+
+    }
+
+    /**
+     * Shows a note with the given html at the given position
+     * relative to the anchor element.
+     */
+    function showNote(anchor, position, html) {
+
+      let note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.append(note);
+
+      positionAt(anchor, position, note);
+    }
+
+    // test it
+    let blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "note above");
+    showNote(blockquote, "right", "note at the right");
+    showNote(blockquote, "bottom", "note below");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
similarity index 100%
rename from 2-ui/1-document/17-coordinates/2-position-at/source.view/index.css
rename to 2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
new file mode 100755
index 00000000..730f815d
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+  <blockquote>
+    Teacher: Why are you late?
+    Student: There was a man who lost a hundred dollar bill.
+    Teacher: That's nice. Were you helping him look for it?
+    Student: No. I was standing on it.
+  </blockquote>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+
+  <script>
+    /**
+     * Positions elem relative to anchor as said in position.
+     *
+     * @param {Node} anchor     Anchor element for positioning
+     * @param {string} position One of: top/right/bottom
+     * @param {Node} elem       Element to position
+     *
+     * Both elements: elem and anchor must be in the document
+     */
+    function positionAt(anchor, position, elem) {
+      // ... your code ...
+    }
+
+    /**
+     * Shows a note with the given html at the given position
+     * relative to the anchor element.
+     */
+    function showNote(anchor, position, html) {
+      // ... your code ...
+    }
+
+    // test it
+    let blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "note above");
+    showNote(blockquote, "right", "note at the right");
+    showNote(blockquote, "bottom", "note below");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md
new file mode 100644
index 00000000..e20238e1
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/2-position-at/task.md
@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# Show a note near the element
+
+Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on  `position` either at the top (`"top"`), right (`"right"`) or bottom (`"bottom"`) of the element `anchor`.
+
+Use it to make a function `showNote(anchor, position, html)` that shows an element with the class `"note"` and the text `html` at the given position near the anchor.
+
+Show the notes like here:
+
+[iframe src="solution" height="350" border="1" link]
+
+P.S. The note should have `position:fixed` for this task.
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
new file mode 100644
index 00000000..0474a061
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
@@ -0,0 +1,4 @@
+The solution is actually pretty simple:
+
+- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
+- Usee the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
similarity index 100%
rename from 2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.css
rename to 2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html
new file mode 100644
index 00000000..d627bee8
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body style="height: 2000px">
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+  <blockquote>
+    Teacher: Why are you late?
+    Student: There was a man who lost a hundred dollar bill.
+    Teacher: That's nice. Were you helping him look for it?
+    Student: No. I was standing on it.
+  </blockquote>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+
+  <script>
+
+    function getCoords(elem) {
+      let box = elem.getBoundingClientRect();
+
+      return {
+        top: box.top + pageYOffset,
+        left: box.left + pageXOffset
+      };
+    }
+
+    function positionAt(anchor, position, elem) {
+
+      let anchorCoords = getCoords(anchor);
+
+      switch (position) {
+        case "top":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+          break;
+
+        case "right":
+          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+          elem.style.top = anchorCoords.top + "px";
+          break;
+
+        case "bottom":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+          break;
+      }
+
+    }
+
+    function showNote(anchor, position, html) {
+
+      let note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.append(note);
+
+      positionAt(anchor, position, note);
+    }
+
+    // test it
+    let blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "note above");
+    showNote(blockquote, "right", "note at the right");
+    showNote(blockquote, "bottom", "note below");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md
new file mode 100644
index 00000000..0554da86
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md
@@ -0,0 +1,11 @@
+importance: 5
+
+---
+
+# Show a note near the element (absolute)
+
+Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
+
+That will prevent its "runaway" from the element when the page scrolls.
+
+Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/solution.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/4-voter/solution.md
rename to 2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md
diff --git a/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.css b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
similarity index 100%
rename from 2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.css
rename to 2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html
new file mode 100644
index 00000000..7e841397
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body style="height: 2000px">
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+  <blockquote>
+    Teacher: Why are you late?
+    Student: There was a man who lost a hundred dollar bill.
+    Teacher: That's nice. Were you helping him look for it?
+    Student: No. I was standing on it.
+  </blockquote>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+    esse sequi officia sapiente.</p>
+
+  <script>
+    function getCoords(elem) {
+      let box = elem.getBoundingClientRect();
+
+      return {
+        top: box.top + pageYOffset,
+        left: box.left + pageXOffset
+      };
+    }
+
+    function showNote(anchor, position, html) {
+
+      let note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.append(note);
+
+      positionAt(anchor, position, note);
+    }
+
+    function positionAt(anchor, position, elem) {
+
+      let anchorCoords = getCoords(anchor);
+
+      switch (position) {
+        case "top-out":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+          break;
+
+        case "right-out":
+          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+          elem.style.top = anchorCoords.top + "px";
+          break;
+
+        case "bottom-out":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+          break;
+
+        case "top-in":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top + "px";
+          break;
+
+        case "right-in":
+          elem.style.width = '150px';
+          elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + "px";
+          elem.style.top = anchorCoords.top + "px";
+          break;
+
+        case "bottom-in":
+          elem.style.left = anchorCoords.left + "px";
+          elem.style.top = anchorCoords.top + anchor.offsetHeight - elem.offsetHeight + "px";
+          break;
+      }
+
+    }
+
+
+    let blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top-in", "note top-in");
+    showNote(blockquote, "top-out", "note top-out");
+    showNote(blockquote, "right-out", "note right-out");
+    showNote(blockquote, "bottom-in", "note bottom-in");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md
new file mode 100644
index 00000000..de45b549
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md
@@ -0,0 +1,28 @@
+importance: 5
+
+---
+
+# Position the note inside (absolute)
+
+Extend the previous task <info:task/position-at-absolute>: teach the function  `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
+
+New values for `position`:
+
+- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
+- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
+
+For instance:
+
+```js
+// shows the note above blockquote
+positionAt(blockquote, "top-out", note);
+
+// shows the note inside blockquote, at the top
+positionAt(blockquote, "top-in", note);
+```
+
+The result:
+
+[iframe src="solution" height="310" border="1" link]
+
+As the source code, take the solution of the task <info:task/position-at-absolute>.
diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md
new file mode 100644
index 00000000..907cca2a
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/article.md
@@ -0,0 +1,211 @@
+# Coordinates
+
+To move elements around we should be familiar with coordinates.
+
+Most JavaScript methods deal with one of two coordinate systems:
+
+1. Relative to the window(or another viewport) top/left.
+2. Relative to the document top/left.
+
+It's important to understand the difference and which type is where.
+
+[cut]
+
+## Window coordinates: getBoundingClientRect
+
+Window coordinates start at the left-upper corner of the window.
+
+The method `elem.getBoundingClientRect()` returns window coordinates for `elem` as an object with properties:
+
+- `top` -- Y-coordinate for the top element edge,
+- `left` -- X-coordinate for the left element edge,
+- `right` -- X-coordinate for the right element edge,
+- `bottom` -- Y-coordinate for the bottom element edge.
+
+Like this:
+
+![](coords.png)
+
+
+Window coordinates do not take the scrolled out part of the document into account, they are calculated from the window left-upper corner.
+
+In other words, when we scroll the page, the element goes up or down, *its window coordinates change*. That's very important.
+
+```online
+Click the button to see its window coordinates:
+
+<input id="brTest" type="button" value="Show button.getBoundingClientRect() for this button" onclick='showRect(this)'/>
+
+<script>
+function showRect(elem) {
+  let r = elem.getBoundingClientRect();
+  alert("{top:"+r.top+", left:"+r.left+", right:"+r.right+", bottom:"+ r.bottom + "}");
+}
+</script>
+
+If you scroll the page, the button position changes, and window coordinates as well.
+```
+
+Also:
+
+- Coordinates may be decimal fractions. That's normal, internally browser uses them for calculations. We don't have to round them when setting to `style.position.left/top`, the browser is fine with fractions.
+- Coordinates may be negative. For instance, if the page is scrolled down and the `elem` top is now above the window then `elem.getBoundingClientRect().top` is negative.
+- Some browsers (like Chrome) also add to the result `getBoundingClientRect` properties `width` and `height`. We can get them also by substraction: `height=bottom-top`, `width=right-left`.
+
+```warn header="Coordinates right/bottom are different from CSS properties"
+If we compare window coordinates versus CSS positioning, then there are obvious similarities to `position:fixed` -- also the position relative to the viewport.
+
+But in CSS the `right` property means the distance from the right edge, and the `bottom` -- from the bottom edge.
+
+If we just look at the picture below, we can see that in JavaScript it is not so. All window coordinates are counted from the upper-left corner, including these ones.
+```
+
+## elementFromPoint(x, y) [#elementFromPoint]
+
+The call to `document.elementFromPoint(x, y)` returns the most nested element at window coordinates `(x, y)`.
+
+The syntax is:
+
+```js
+let elem = document.elementFromPoint(x, y);
+```
+
+For instance, the code below highlights and outputs the tag of the element that is now in the middle of the window:
+
+```js run
+let centerX = document.documentElement.clientWidth / 2;
+let centerY = document.documentElement.clientHeight / 2;
+
+let elem = document.elementFromPoint(centerX, centerY);
+
+elem.style.background = "red";
+alert(elem.tagName);
+```
+
+As it uses window coordinates, the element may be different depending on the current scroll position.
+
+````warn header="For out-of-window coordinates the `elementFromPoint` returns `null`"
+The method `document.elementFromPoint(x,y)` only works if `(x,y)` are inside the visible area.
+
+If any of the coordinates is negative or exceeds the window width/height, then it returns `null`.
+
+In most cases such behavior is not a problem, but we should keep that in mind.
+
+Here's a typical error that may occur if we don't check for it:
+
+```js
+let elem = document.elementFromPoint(x, y);
+// if the coordinates happen to be out of the window, then elem = null
+*!*
+elem.style.background = ''; // Error!
+*/!*
+```
+````
+
+## Using for position:fixed
+
+Most of time we need coordinates to position something. In CSS, to position an element relative to the viewport we use `position:fixed` together with `left/top` (or `right/bottom`).
+
+We can use `getBoundingClientRect` to get coordinates of an element, and then to show something near it.
+
+For instance, the function `createMessageUnder(elem, html)` below shows the message under `elem`:
+
+```js
+let elem = document.getElementById("coords-show-mark");
+
+function createMessageUnder(elem, html) {
+  // create message element
+  let message = document.createElement('div');
+  // better to use a css class for the style here
+  message.style.cssText = "position:fixed; color: red";
+
+*!*
+  // assign coordinates, don't forget "px"!
+  let coords = elem.getBoundingClientRect();
+
+  message.style.left = coords.left + "px";
+  message.style.top = coords.bottom + "px";
+*/!*
+
+  message.innerHTML = html;
+
+  return message;
+}
+
+// Usage:
+// add it for 5 seconds in the document
+let message = createMessageUnder(elem, 'Hello, world!');
+document.body.append(message);
+setTimeout(() => message.remove(), 5000);
+```
+
+```online
+Click the button to run it:
+
+<button id="coords-show-mark">Button with id="coords-show-mark", the message will appear under it</button>
+```
+
+The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on. That's easy, as we have all the coordinates and sizes of the element.
+
+But note the important detail: when the page is scrolled, the message flows away from the button.
+
+The reason is obvious: the message element relies on `position:fixed`, so it remains at the same place of the window while the page scrolls away.
+
+To change that, we need to use document-based coordinates and `position:absolute`.
+
+## Document coordinates
+
+Document-relative coordinates start from the left-upper corner of the document, not the window.
+
+In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` on top.
+
+We can use `position:absolute` and `top/left` to put something at a certain place of the document, so that it remains there during a page scroll. But we need the right coordinates first.
+
+For clarity we'll call window coordinates `(clientX,clientY)` and document coordinates `(pageX,pageY)`.
+
+When the page is not scrolled, then window coordinate and document coordinates are actually the same. Their zero points match too:
+
+![](document-window-coordinates-zero.png)
+
+And if we scroll it, then `(clientX,clientY)` change, because they are relative to the window, but `(pageX,pageY)` remain the same.
+
+Here's the same page after the vertical scroll:
+
+![](document-window-coordinates-scroll.png)
+
+- `clientY` of the header `"From today's featured article"` became `0`, because the element is now on window top.
+- `clientX` didn't change, as we didn't scroll horizontally.
+- `pageX` and `pageY` coordinates of the element are still the same, because they are relative to the document.
+
+## Getting document coordinates [#getCoords]
+
+There's no standard method to get document coordinates of an element. But it's easy to write it.
+
+The two coordinate systems are connected by the formula:
+- `pageY` = `clientY` + height of the scrolled-out vertical part of the document.
+- `pageX` = `clientX` + width of the scrolled-out horizontal part of the document.
+
+The function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them:
+
+```js
+// get document coordinates of the element
+function getCoords(elem) {
+  let box = elem.getBoundingClientRect();
+
+  return {
+    top: box.top + pageYOffset,
+    left: box.left + pageXOffset
+  };
+}
+```
+
+## Summary
+
+Any point on the page has coordinates:
+
+1. Relative to the window -- `elem.getBoundingClientRect()`.
+2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll.
+
+Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`.
+
+Both coordinate systems have their "pro" and "contra", there are times we need one or the other one, just like CSS `position` `absolute` and `fixed`.
diff --git a/2-ui/1-document/11-coordinates/coords.png b/2-ui/1-document/11-coordinates/coords.png
new file mode 100644
index 00000000..05245867
Binary files /dev/null and b/2-ui/1-document/11-coordinates/coords.png differ
diff --git a/2-ui/1-document/11-coordinates/coords@2x.png b/2-ui/1-document/11-coordinates/coords@2x.png
new file mode 100644
index 00000000..777690ed
Binary files /dev/null and b/2-ui/1-document/11-coordinates/coords@2x.png differ
diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png
new file mode 100644
index 00000000..39ddc31c
Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png differ
diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png
new file mode 100644
index 00000000..52e555c4
Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png differ
diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png
new file mode 100644
index 00000000..706b42c1
Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png differ
diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png
new file mode 100644
index 00000000..83f31950
Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png differ
diff --git a/2-ui/1-document/11-coordinates/head.html b/2-ui/1-document/11-coordinates/head.html
new file mode 100644
index 00000000..efc6cd1c
--- /dev/null
+++ b/2-ui/1-document/11-coordinates/head.html
@@ -0,0 +1,27 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+
+  document.getElementById('coords-show-mark').onclick = function() {
+    let elem = document.getElementById("coords-show-mark");
+
+    function createMessageUnder(elem, text) {
+      let coords = elem.getBoundingClientRect();
+      let message = document.createElement('div');
+      message.style.cssText = "position:fixed; color: red";
+
+      message.style.left = coords.left + "px";
+      message.style.top = coords.bottom + "px";
+
+      message.innerHTML = text;
+
+      return message;
+    }
+
+    let message = createMessageUnder(elem, 'Hello, world!');
+    document.body.append(message);
+    setTimeout(() => message.remove(), 5000);
+  }
+
+});
+
+</script>
diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md
deleted file mode 100644
index 9bfaa536..00000000
--- a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ /dev/null
@@ -1,31 +0,0 @@
-Результат выполнения может быть разный: `innerHTML` вставит именно HTML, а `createTextNode` интерпретирует теги как текст.
-
-Запустите следующие примеры, чтобы увидеть разницу:
-<ul>
-<li>`createTextNode` создает текст <code>'&lt;b&gt;текст&lt;/b&gt;'</code>:
-
-```html
-<!--+ run height=50 -->
-<div id="elem"></div>
-<script>
-  var text = '<b>текст</b>';
-
-  elem.appendChild(document.createTextNode(text));
-</script>
-```
-
-</li>
-<li>`innerHTML` присваивает HTML <code>&lt;b&gt;текст&lt;/b&gt;</code>:
-
-```html
-<!--+ run height=50 -->
-<div id="elem"></div>
-<script>
-  var text = '<b>текст</b>';
-
-  elem.innerHTML = text;
-</script>
-```
-
-</li>
-</ul>
diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md
deleted file mode 100644
index eea47737..00000000
--- a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# createTextNode vs innerHTML
-
-[importance 5]
-
-Есть *пустой* узел DOM `elem`. 
-
-**Одинаковый ли результат дадут эти скрипты?**
-
-Первый:
-
-```js
-elem.appendChild(document.createTextNode(text));
-```
-
-Второй:
-
-```js
-elem.innerHTML = text;
-```
-
-Если нет -- дайте пример значения `text`, для которого результат разный.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md
deleted file mode 100644
index d591b6b4..00000000
--- a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md
+++ /dev/null
@@ -1,56 +0,0 @@
-Для начала, придумаем подходящую HTML/CSS-структуру.
-
-Здесь каждый компонент времени удобно поместить в соответствующий `SPAN`:
-
-```html
-<div id="clock">
-  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
-</div>
-```
-
-Каждый `SPAN` раскрашивается при помощи CSS.
-
-Жизнь часам будет обеспечивать функция `update`, вызываемая каждую секунду:
-
-```js
-function update() {
-  var clock = document.getElementById('clock');
-
-*!*
-  var date = new Date(); // (*)
-*/!*
-
-  var hours = date.getHours();
-  if (hours < 10) hours = '0' + hours;
-  clock.children[0].innerHTML = hours;
-
-  var minutes = date.getMinutes();
-  if (minutes < 10) minutes = '0' + minutes;
-  clock.children[1].innerHTML = minutes;
-
-  var seconds = date.getSeconds();
-  if (seconds < 10) seconds = '0' + seconds;
-  clock.children[2].innerHTML = seconds;
-}
-```
-
-В строке `(*)` каждый раз мы получаем текущую дату. Мы должны это сделать, несмотря на то, что, казалось бы, могли бы просто увеличивать счетчик каждую секунду.
-
-На самом деле мы не можем опираться на счетчик для вычисления даты, т.к. `setInterval` не гарантирует точную задержку. Если в другом участке кода будет вызван `alert`, то часы остановятся, как и любые счетчики.
-
-Функция `clockStart` для запуска часов:
-
-```js
-function clockStart() { // запустить часы
-  setInterval(update, 1000);
-  update(); // (*)
-}
-
-function clockStop() {
-  clearInterval(timerId);
-  timerId = null;
-}
-```
-
-Обратите внимание, что вызов `update` не только запланирован, но и тут же производится тут же в строке `(*)`. Иначе посетителю пришлось бы ждать до первого выполнения `setInterval`, то есть целую секунду.
-
diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html
deleted file mode 100644
index 55396e63..00000000
--- a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .hour {
-      color: red
-    }
-    
-    .min {
-      color: green
-    }
-    
-    .sec {
-      color: blue
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="clock">
-    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
-  </div>
-
-  <script>
-    var timerId;
-
-    function update() {
-      var clock = document.getElementById('clock');
-      var date = new Date();
-
-      var hours = date.getHours();
-      if (hours < 10) hours = '0' + hours;
-      clock.children[0].innerHTML = hours;
-
-      var minutes = date.getMinutes();
-      if (minutes < 10) minutes = '0' + minutes;
-      clock.children[1].innerHTML = minutes;
-
-      var seconds = date.getSeconds();
-      if (seconds < 10) seconds = '0' + seconds;
-      clock.children[2].innerHTML = seconds;
-    }
-
-    function clockStart() {
-      setInterval(update, 1000);
-      update(); // <--  начать тут же, не ждать 1 секунду пока setInterval сработает
-    }
-
-    clockStart();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html
deleted file mode 100644
index 9120728f..00000000
--- a/2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-
-  <input type="button" onclick="clockStart()" value="Start">
-
-  <input type="button" onclick="clockStop()" value="Stop">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md
deleted file mode 100644
index e422846b..00000000
--- a/2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Часики с использованием "setInterval"
-
-[importance 4]
-
-Создайте цветные часики как в примере ниже:
-
-[iframe src="solution" height=100]
-
diff --git a/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md b/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md
deleted file mode 100644
index bd99772f..00000000
--- a/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-Родителя `parentNode` можно получить из `elem`.
-
-Вот так выглядит решение:
-```html
-//+ run
-<div>Это</div>
-<div>Все</div>
-<div>Элементы DOM</div>
-
-<script>
-  if (!Element.prototype.remove) {
-    Element.prototype.remove = function remove() {
-      if (this.parentNode) {
-        this.parentNode.removeChild(this);
-      }
-    };
-  }
-
-  var elem = document.body.children[0];
-
-  elem.remove();
-</script>
-```
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md b/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md
deleted file mode 100644
index a212fdc0..00000000
--- a/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Удаление элементов
-
-[importance 5]
-
-Напишите полифилл для метода `remove` для старых браузеров.
-
-Вызов `elem.remove()`:
-<ul>
-<li>Если у `elem` нет родителя -- ничего не делает.</li>
-<li>Если есть -- удаляет элемент из родителя.</li>
-</ul>
-
-```html
-<div>Это</div>
-<div>Все</div>
-<div>Элементы DOM</div>
-
-<script>
-  /* ваш код полифилла */
-
-  var elem = document.body.children[0];
-
-*!*
-  elem.remove(); // <-- вызов должен удалить элемент
-*/!*
-</script>
-```
-
diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/solution.md b/2-ui/1-document/11-modifying-document/3-insert-after/solution.md
deleted file mode 100644
index 4436bdcb..00000000
--- a/2-ui/1-document/11-modifying-document/3-insert-after/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Для того, чтобы добавить элемент *после* `refElem`, мы можем, используя `insertBefore`, вставить его *перед* `refElem.nextSibling`.
-
-Но что если `nextSibling` нет? Это означает, что `refElem` является последним потомком своего родителя и можем использовать `appendChild`.
-
-Код:
-
-```js
-function insertAfter(elem, refElem) {
-  var parent = refElem.parentNode;
-  var next = refElem.nextSibling;
-  if (next) {
-    return parent.insertBefore(elem, next);
-  } else {
-    return parent.appendChild(elem);
-  }
-}
-```
-
-Но код может быть гораздо короче, если вспомнить, что `insertBefore` со вторым аргументом null работает как `appendChild`:
-
-```js
-function insertAfter(elem, refElem) {
-  return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
-}
-```
-
-Если нет `nextSibling`, то второй аргумент `insertBefore` становится `null` и тогда `insertBefore(elem, null)` осуществит вставку в конец, как и требуется.
-
-В решении нет проверки на существование `refElem.parentNode`, поскольку вставка после элемента без родителя -- уже ошибка, пусть она возникнет в функции, это нормально.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/task.md b/2-ui/1-document/11-modifying-document/3-insert-after/task.md
deleted file mode 100644
index d5fa5329..00000000
--- a/2-ui/1-document/11-modifying-document/3-insert-after/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# insertAfter
-
-[importance 5]
-
-Напишите функцию `insertAfter(elem, refElem)`, которая добавит `elem` после узла `refElem`.
-
-```html
-<div>Это</div>
-<div>Элементы</div>
-
-<script>
-  var elem = document.createElement('div');
-  elem.innerHTML = '<b>Новый элемент</b>';
-
-  function insertAfter(elem, refElem) { /* ваш код */ }
-
-  var body = document.body;
-
-  // вставить elem после первого элемента
-  insertAfter(elem, body.firstChild); // <--- должно работать
-
-  // вставить elem за последним элементом
-  insertAfter(elem, body.lastChild); // <--- должно работать
-</script>
-```
-
diff --git a/2-ui/1-document/11-modifying-document/4-remove-children/solution.md b/2-ui/1-document/11-modifying-document/4-remove-children/solution.md
deleted file mode 100644
index 3ca743c4..00000000
--- a/2-ui/1-document/11-modifying-document/4-remove-children/solution.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Неправильное решение 
-
-Для начала рассмотрим забавный пример того, как делать *не надо*:
-
-```js
-function removeChildren(elem) {
-  for (var k = 0; k < elem.childNodes.length; k++) {
-    elem.removeChild(elem.childNodes[k]);
-  }
-}
-```
-
-Если вы попробуете это на практике, то увидите, то это не сработает.
-
-Не сработает потому, что коллекция `childNodes` всегда начинается с индекса 0 и автоматически обновляется, когда первый потомок удален(т.е. тот, что был вторым, станет первым). А переменная `k` в цикле всё время увеличивается, поэтому такой цикл пропустит половину узлов.
-
-# Решение через DOM
-
-Правильное решение:
-
-```js
-function removeChildren(elem) {
-  while (elem.lastChild) {
-    elem.removeChild(elem.lastChild);
-  }
-}
-```
-
-# Альтернатива через innerHTML
-
-Можно и просто обнулить содержимое через `innerHTML`:
-
-```js
-function removeChildren(elem) {
-  elem.innerHTML = '';
-}
-```
-
-Это не будет работать в IE8- для таблиц, так как на большинстве табличных элементов (кроме ячеек `TH/TD`) в старых IE запрещено менять `innerHTML`.
-
-Впрочем, можно завернуть `innerHTML` в `try/catch`:
-
-```js
-function removeChildren(elem) {
-  try {
-    elem.innerHTML = '';
-  } catch (e) {
-    while (elem.firstChild) {
-      elem.removeChild(elem.firstChild);
-    }
-  }
-}
-```
-
diff --git a/2-ui/1-document/11-modifying-document/4-remove-children/task.md b/2-ui/1-document/11-modifying-document/4-remove-children/task.md
deleted file mode 100644
index e6b7cb74..00000000
--- a/2-ui/1-document/11-modifying-document/4-remove-children/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# removeChildren
-
-[importance 5]
-
-Напишите функцию `removeChildren`, которая удаляет всех потомков элемента.
-
-```html
-<table id="table">
-  <tr>
-    <td>Это</td>
-    <td>Все</td>
-    <td>Элементы DOM</td>
-  </tr>
-</table>
-
-<ol id="ol">
-  <li>Вася</li>
-  <li>Петя</li>
-  <li>Маша</li>
-  <li>Даша</li>
-</ol>
-
-<script>
-  function removeChildren(elem) { /* ваш код */ }
-
-  removeChildren(table); // очищает таблицу
-  removeChildren(ol); // очищает список
-</script>
-```
diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md
deleted file mode 100644
index 452540b9..00000000
--- a/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-HTML в задаче некорректен. В этом всё дело. И вопрос легко решится, если открыть отладчик.
-
-В нём видно, что браузер поместил текст `aaa` *перед* таблицей. Поэтому он и остался в документе.
-
-Вообще, в стандарте HTML5 описано, как браузеру обрабатывать некорректный HTML, так что такое действие браузера является правильным.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md b/2-ui/1-document/11-modifying-document/5-why-aaa/task.md
deleted file mode 100644
index d0d6d4df..00000000
--- a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Почему остаётся "ааа" ?
-
-[importance 1]
-
-Запустите этот пример. Почему вызов `removeChild` не удалил текст `"aaa"`?
-
-```html
-<!--+ height=100 run -->
-<table>
-  aaa
-  <tr>
-    <td>Test</td>
-  </tr>
-</table>
-
-<script>
-  var table = document.body.children[0];
-
-  alert( table ); // таблица, пока всё правильно
-
-  document.body.removeChild(table);
-  // почему в документе остался текст?
-</script>
-```
-
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.md b/2-ui/1-document/11-modifying-document/6-create-list/solution.md
deleted file mode 100644
index f3689eb4..00000000
--- a/2-ui/1-document/11-modifying-document/6-create-list/solution.md
+++ /dev/null
@@ -1,4 +0,0 @@
-
-Делаем цикл, пока посетитель что-то вводит -- добавляет `<li>`.
-
-Содержимое в `<li>` присваиваем через `document.createTextNode`, чтобы правильно работали &lt;, &gt; и т.д.
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html
deleted file mode 100755
index 254844e3..00000000
--- a/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <h1>Создание списка</h1>
-
-  <script>
-    var ul = document.createElement('ul');
-    document.body.appendChild(ul);
-
-    while (true) {
-      var data = prompt("Введите текст для пункта списка", "");
-
-      if (!data) {
-        break;
-      }
-
-      var li = document.createElement('li');
-      li.appendChild(document.createTextNode(data));
-      ul.appendChild(li);
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/task.md b/2-ui/1-document/11-modifying-document/6-create-list/task.md
deleted file mode 100644
index f703837f..00000000
--- a/2-ui/1-document/11-modifying-document/6-create-list/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Создать список
-
-[importance 4]
-
-Напишите интерфейс для создания списка.
-
-Для каждого пункта:
-<ol>
-<li>Запрашивайте содержимое пункта у пользователя с помощью `prompt`.</li>
-<li>Создавайте пункт и добавляйте его к `UL`.</li>
-<li>Процесс прерывается, когда пользователь нажимает ESC или вводит пустую строку.</li>
-</ol>
-
-**Все элементы должны создаваться динамически.**
-
-Если посетитель вводит теги -- пусть в списке они показываются как обычный текст.
-
-[demo src="solution"]
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
deleted file mode 100755
index 50428719..00000000
--- a/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="container"></div>
-
-  <script>
-    var data = {
-      "Рыбы": {
-        "Форель": {},
-        "Щука": {}
-      },
-
-      "Деревья": {
-        "Хвойные": {
-          "Лиственница": {},
-          "Ель": {}
-        },
-        "Цветковые": {
-          "Берёза": {},
-          "Тополь": {}
-        }
-
-      }
-    };
-
-    function createTree(container, obj) {
-      container.appendChild(createTreeDom(obj));
-    }
-
-    function createTreeDom(obj) {
-      // если нет детей, то рекурсивный вызов ничего не возвращает
-      // так что вложенный UL не будет создан
-      if (isObjectEmpty(obj)) return;
-
-      var ul = document.createElement('ul');
-
-      for (var key in obj) {
-        var li = document.createElement('li');
-        li.innerHTML = key;
-
-        var childrenUl = createTreeDom(obj[key]);
-        if (childrenUl) li.appendChild(childrenUl);
-
-        ul.appendChild(li);
-      }
-
-      return ul;
-    }
-
-
-    function isObjectEmpty(obj) {
-      for (var key in obj) {
-        return false;
-      }
-      return true;
-    }
-
-    var container = document.getElementById('container');
-    createTree(container, data);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md
deleted file mode 100644
index ff334e70..00000000
--- a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-Решения через рекурсию.
-
-<ol>
-<li>[edit src="solution"]Через innerHTML[/edit].</li>
-<li>[edit src="build-tree-dom"]Через DOM[/edit].</li>
-</ol>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html
deleted file mode 100755
index fc4cae62..00000000
--- a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="container"></div>
-
-  <script>
-    var data = {
-      "Рыбы": {
-        "Форель": {},
-        "Щука": {}
-      },
-
-      "Деревья": {
-        "Хвойные": {
-          "Лиственница": {},
-          "Ель": {}
-        },
-        "Цветковые": {
-          "Берёза": {},
-          "Тополь": {}
-        }
-
-      }
-    };
-
-    function createTree(container, obj) {
-      container.innerHTML = createTreeText(obj);
-    }
-
-    function createTreeText(obj) { // отдельная рекурсивная функция
-      var li = '';
-      for (var key in obj) {
-        li += '<li>' + key + createTreeText(obj[key]) + '</li>';
-      }
-      if (li) {
-        var ul = '<ul>' + li + '</ul>'
-      }
-      return ul || '';
-    }
-
-    var container = document.getElementById('container');
-    createTree(container, data);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html
deleted file mode 100755
index 9a64f587..00000000
--- a/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="tree"></div>
-
-  <!-- Результат должен быть таким:
-<div id="tree">
-<ul>
-  <li>Рыбы
-    <ul>
-      <li>Форель</li>
-      <li>Щука</li>
-    </ul>
-  </li>
-  <li>Деревья
-    <ul>
-      <li>Хвойные
-        <ul>
-          <li>Лиственница</li>
-          <li>Ель</li>
-        </ul>
-      </li>
-      <li>Цветковые
-        <ul>
-          <li>Берёза</li>
-          <li>Тополь</li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-</ul>
-</div>
--->
-
-  <script>
-    var data = {
-      "Рыбы": {
-        "Форель": {},
-        "Щука": {}
-      },
-
-      "Деревья": {
-        "Хвойные": {
-          "Лиственница": {},
-          "Ель": {}
-        },
-        "Цветковые": {
-          "Берёза": {},
-          "Тополь": {}
-        }
-      }
-    };
-
-    /* ваш код */
-
-    createTree(document.getElementById('tree'), data);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md
deleted file mode 100644
index 25eb80be..00000000
--- a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Создайте дерево из объекта
-
-[importance 5]
-
-Напишите функцию, которая создаёт вложенный список `UL/LI` (дерево) из объекта.
-
-Например:
-
-```js
-var data = {
-  "Рыбы": {
-    "Форель": {},
-    "Щука": {}
-  },
-
-  "Деревья": {
-    "Хвойные": {
-      "Лиственница": {},
-      "Ель": {}
-    },
-    "Цветковые": {
-      "Берёза": {},
-      "Тополь": {}
-    }
-  }
-};
-```
-
-Синтаксис:
-
-```js
-var container = document.getElementById('container');
-*!*
-createTree(container, data); // создаёт 
-*/!*
-```
-
-Результат (дерево):
-
-[iframe border=1 src="solution"]
-
-Выберите один из двух способов решения этой задачи:
-<ol>
-<li>Создать строку, а затем присвоить через `container.innerHTML`.</li>
-<li>Создавать узлы через методы DOM.</li>
-</ol>
-
-Если получится -- сделайте оба.
-
-P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/solution.md b/2-ui/1-document/11-modifying-document/8-tree-count/solution.md
deleted file mode 100644
index 539da988..00000000
--- a/2-ui/1-document/11-modifying-document/8-tree-count/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Подсказки
-
-<ol>
-<li>Получить количество вложенных узлов можно через `elem.getElementsByTagName('*').length`.</li>
-<li>Текст в начале `<li>` доступен как `li.firstChild`, его содержимое -- `li.firstChild.data`.</li>
-</ol>
-
-# Решение
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html
deleted file mode 100644
index 736bfa9f..00000000
--- a/2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul>
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var lis = document.getElementsByTagName('li');
-
-    for (i = 0; i < lis.length; i++) {
-      // получить количество детей
-      var childCount = lis[i].getElementsByTagName('li').length;
-      if (!childCount) continue;
-
-      // добавить кол-во детей к текстовому узлу
-      lis[i].firstChild.data += ' [' + childCount + ']';
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html
deleted file mode 100644
index 2f45460c..00000000
--- a/2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul>
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    // .. ваш код ..
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/task.md b/2-ui/1-document/11-modifying-document/8-tree-count/task.md
deleted file mode 100644
index ac6993b7..00000000
--- a/2-ui/1-document/11-modifying-document/8-tree-count/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Дерево
-
-[importance 5]
-
-Есть дерево [edit src="source"]в песочнице[/edit]. 
-
-Напишите код, который добавит каждому элементу списка `<li>` количество вложенных в него элементов. Узлы нижнего уровня, без детей -- пропускайте.
-
-Результат:
-[iframe border=1 src="solution"]
diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/11-modifying-document/9-calendar-table/solution.md
deleted file mode 100644
index a4e1a7f3..00000000
--- a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Для решения задачи сгенерируем таблицу в виде строки: `"<table>...</table>"`, а затем присвоим в `innerHTML`.
-
-Алгоритм:
-<ol>
-<li>Создать объект даты `d = new Date(year, month-1)`. Это первый день месяца `month` (с учетом того, что месяцы в JS начинаются от 0, а не от 1).</li>
-<li>Ячейки первого ряда пустые от начала и до дня недели `d.getDay()`, с которого начинается месяц. Создадим их.</li>
-<li>Увеличиваем день в `d` на единицу: `d.setDate(d.getDate()+1)`, и добавляем в календарь очередную ячейку, пока не достигли следующего месяца. При этом последний день недели означает вставку перевода строки <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.</li>
-<li>При необходимости, если календарь окончился не на воскресенье - добавить пустые `TD` в таблицу, чтобы было все ровно.</li>
-</ol>
-
-[edit src="solution"]Открыть полное решение[/edit]
diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html
deleted file mode 100644
index e0a7443c..00000000
--- a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    
-    td,
-    th {
-      border: 1px solid black;
-      padding: 3px;
-      text-align: center;
-    }
-    
-    th {
-      font-weight: bold;
-      background-color: #E6E6E6;
-    }
-  </style>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-
-  <div id="calendar"></div>
-
-  <script>
-    function createCalendar(id, year, month) {
-      var elem = document.getElementById(id);
-
-      var mon = month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12
-      var d = new Date(year, mon);
-
-      var table = '<table><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>';
-
-      // заполнить первый ряд от понедельника
-      // и до дня, с которого начинается месяц
-      // * * * | 1  2  3  4
-      for (var i = 0; i < getDay(d); i++) {
-        table += '<td></td>';
-      }
-
-      // ячейки календаря с датами
-      while (d.getMonth() == mon) {
-        table += '<td>' + d.getDate() + '</td>';
-
-        if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
-          table += '</tr><tr>';
-        }
-
-        d.setDate(d.getDate() + 1);
-      }
-
-      // добить таблицу пустыми ячейками, если нужно
-      if (getDay(d) != 0) {
-        for (var i = getDay(d); i < 7; i++) {
-          table += '<td></td>';
-        }
-      }
-
-      // закрыть таблицу
-      table += '</tr></table>';
-
-      // только одно присваивание innerHTML
-      elem.innerHTML = table;
-    }
-
-    function getDay(date) { // получить номер дня недели, от 0(пн) до 6(вс)
-      var day = date.getDay();
-      if (day == 0) day = 7;
-      return day - 1;
-    }
-
-
-
-    createCalendar("calendar", 2012, 9)
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html
deleted file mode 100644
index 2eedf93e..00000000
--- a/2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    
-    td,
-    th {
-      border: 1px solid black;
-      padding: 3px;
-      text-align: center;
-    }
-    
-    th {
-      font-weight: bold;
-      background-color: #E6E6E6;
-    }
-  </style>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-
-  <div id="calendar"></div>
-
-  <script>
-    function createCalendar(id, year, month) {
-      var elem = document.getElementById(id)
-
-      // ... ваш код, который генерирует в elem календарь
-    }
-
-    createCalendar('calendar', 2011, 1)
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/task.md b/2-ui/1-document/11-modifying-document/9-calendar-table/task.md
deleted file mode 100644
index 264fcf6c..00000000
--- a/2-ui/1-document/11-modifying-document/9-calendar-table/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Создать календарь в виде таблицы
-
-[importance 4]
-
-Напишите функцию, которая умеет генерировать календарь для заданной пары (месяц, год).
-
-Календарь должен быть таблицей, где каждый день -- это `TD`. У таблицы должен быть заголовок с названиями дней недели, каждый день -- `TH`.
-
-Синтаксис: `createCalendar(id, year, month)`. 
-
-Такой вызов должен генерировать текст для календаря месяца `month` в году `year`, а затем помещать его внутрь элемента с указанным `id`.
-
-Например: `createCalendar("cal", 2012, 9)` сгенерирует в <code>&lt;div id='cal'&gt;&lt;/div&gt;</code> следующий календарь:
-
-[iframe height=210 src="solution"]
-
-P.S. Достаточно сгенерировать календарь, кликабельным его делать не нужно.
-
-
diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/11-modifying-document/article.md
deleted file mode 100644
index d1cf7a43..00000000
--- a/2-ui/1-document/11-modifying-document/article.md
+++ /dev/null
@@ -1,412 +0,0 @@
-# Добавление и удаление узлов
-
-Изменение DOM -- ключ к созданию "живых" страниц. 
-
-В этой главе мы рассмотрим, как создавать новые элементы "на лету" и заполнять их данными.
-
-[cut]
-
-## Пример: показ сообщения
-
-В качестве примера рассмотрим добавление сообщения на страницу, чтобы оно было оформленно красивее чем обычный `alert`.
-
-HTML-код для сообщения:
-
-```html
-<!--+ autorun height="100" -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-*!*
-<div class="alert">
-  <strong>Ура!</strong> Вы прочитали это важное сообщение.
-</div>
-*/!*
-```
-
-## Создание элемента
-
-Для создания элементов используются следующие методы:
-
-<dl>
-<dt>`document.createElement(tag)`</dt>
-<dd>Создает новый элемент с указанным тегом:
-
-```js
-var div = document.createElement('div');
-```
-
-</dd>
-<dt>`document.createTextNode(text)`</dt>
-<dd>Создает новый *текстовый* узел с данным текстом:
-
-```js
-var textElem = document.createTextNode('Тут был я');
-```
-
-</dl>
-
-### Создание сообщения
-
-В нашем случае мы хотим сделать DOM-элемент `div`, дать ему классы и заполнить текстом:
-
-```js
-var div = document.createElement('div');
-div.className = "alert alert-success";
-div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
-```
-
-После этого кода у нас есть готовый DOM-элемент. Пока что он присвоен в переменную `div`, но не виден, так как никак не связан со страницей. 
-
-## Добавление элемента: appendChild, insertBefore
-
-Чтобы DOM-узел был показан на странице, его необходимо вставить в `document`.
-
-Для этого первым делом нужно решить, куда мы будем его вставлять. Предположим, что мы решили, что вставлять будем в некий элемент `parentElem`, например `var parentElem = document.body`.
-
-Для вставки внутрь `parentElem` есть следующие методы:
-
-<dl>
-<dt>`parentElem.appendChild(elem)`</dt>
-<dd>Добавляет `elem` в конец дочерних элементов `parentElem`. 
-
-Следующий пример добавляет новый элемент в конец `<ol>`:
-
-```html
-<!--+ run height=100 -->
-<ol id="list">
-  <li>0</li>
-  <li>1</li>
-  <li>2</li>
-</ol>
-
-<script>
-  var newLi = document.createElement('li');
-  newLi.innerHTML = 'Привет, мир!';
-
-  list.appendChild(newLi);
-</script>
-```
-
-</dd>
-<dt>`parentElem.insertBefore(elem, nextSibling)`</dt>
-<dd>Вставляет `elem` в коллекцию детей `parentElem`, перед элементом `nextSibling`.
-
-Следующий код вставляет новый элемент перед вторым `<li>`:
-
-```html
-<!--+ run height=100 -->
-<ol id="list">
-  <li>0</li>
-  <li>1</li>
-  <li>2</li>
-</ol>
-<script>
-  var newLi = document.createElement('li');
-  newLi.innerHTML = 'Привет, мир!';
-
-*!*
-  list.insertBefore(newLi, list.children[1]);
-*/!*
-</script>
-```
-
-Для вставки элемента в начало достаточно указать, что вставлять будем перед первым потомком:
-
-```js
-list.insertBefore(newLi, list.firstChild);
-```
-
-У читателя, который посмотрит на этот код внимательно, наверняка возникнет вопрос: "А что, если `list` вообще пустой, в этом случае ведь `list.firstChild = null`, произойдёт ли вставка?"
-
-Ответ -- да, произойдёт.
-
-**Дело в том, что если вторым аргументом указать `null`, то `insertBefore` сработает как `appendChild`:**
-
-```js
-parentElem.insertBefore(elem, null);
-// то же, что и:
-parentElem.appendChild(elem)
-```
-
-Так что `insertBefore` универсален.
-</dd>
-</dl>
-
-[smart]
-Все методы вставки возвращают вставленный узел.
-
-Например, `parentElem.appendChild(elem)` возвращает `elem`. 
-[/smart]
-
-
-### Пример использования
-
-Добавим сообщение в конец `<body>`:
-
-```html
-<!--+ height=150 run autorun -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<body>
-  <h3>Моя страница</h3>
-</body>
-
-<script>
-  var div = document.createElement('div');
-  div.className = "alert alert-success";
-  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
-
-*!*
-  document.body.appendChild(div);
-*/!*
-</script>
-```
-
-...А теперь -- в начало `<body>`:
-
-```html
-<!--+ height=150 run autorun -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<body>
-  <h3>Моя страница</h3>
-</body>
-
-<script>
-  var div = document.createElement('div');
-  div.className = "alert alert-success";
-  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
-
-*!*
-  document.body.insertBefore(div, document.body.firstChild);
-*/!*
-</script>
-```
-
-## Клонирование узлов: cloneNode
-
-А как бы вставить второе похожее сообщение?
-
-Конечно, можно сделать функцию для генерации сообщений и поместить туда этот код, но в ряде случаев гораздо эффективнее -- *клонировать* существующий `div`, а потом изменить текст внутри. В частности, если элемент большой, то клонировать его будет гораздо быстрее, чем пересоздавать.
-
-Вызов `elem.cloneNode(true)` создаст "глубокую" копию элемента -- вместе с атрибутами, включая подэлементы. Если же вызвать с аргументом `false`, то копия будет сделана без дочерних элементов. Это нужно гораздо реже.
-
-Пример со вставкой копии сообщения:
-
-```html
-<!--+ height=200 run autorun -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<body>
-  <h3>Моя страница</h3>
-</body>
-
-<script>
-  var div = document.createElement('div');
-  div.className = "alert alert-success";
-  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
-
-  document.body.insertBefore(div, document.body.firstChild);
-
-*!*
-  // создать копию узла
-  var div2 = div.cloneNode(true);
-  // копию можно подправить
-  div2.querySelector('strong').innerHTML = 'Супер!';
-  // вставим её после текущего сообщения
-  div.parentNode.insertBefore(div2, div.nextSibling);
-*/!*
-</script>
-```
-
-Обратите внимание на последнюю строку, которая вставляет `div2` после `div`:
-
-```js
-div.parentNode.insertBefore(div2, div.nextSibling);
-```
-
-<ol>
-<li>Для вставки нам нужен будущий родитель. Мы, возможно, не знаем, где точно находится `div` (или не хотим зависеть от того, где он), но если нужно вставить рядом с `div`, то родителем определённо будет `div.parentNode`.</li>
-<li>Мы хотели бы вставить *после* `div`, но метода `insertAfter` нет, есть только `insertBefore`, поэтому вставляем *перед* его правым соседом `div.nextSibling`.</li>
-</ol>
-
-
-## Удаление узлов: removeChild  
-
-Для удаления узла есть два метода:
-
-<dl>
-<dt>`parentElem.removeChild(elem)`</dt>
-<dd>Удаляет `elem` из списка детей `parentElem`.</dd>
-<dt>`parentElem.replaceChild(newElem, elem)`</dt>
-<dd>Среди детей `parentElem` удаляет `elem` и вставляет на его место `newElem`.</dd>
-</dl>
-
-Оба этих метода возвращают удаленный узел, то есть `elem`. Если нужно, его можно вставить в другое место DOM тут же или в будущем.
-
-[smart]
-Если вы хотите *переместить* элемент на новое место -- не нужно его удалять со старого.
-
-**Все методы вставки автоматически удаляют вставляемый элемент со старого места.**
-
-Конечно же, это очень удобно.
-
-Например, поменяем элементы местами:
-
-```html
-<!--+ run height=150 -->
-<div>Первый</div>
-<div>Второй</div>
-<script>
-  var first = document.body.children[0];
-  var last = document.body.children[1];
-
-  // нет необходимости в предварительном removeChild(last)
-  document.body.insertBefore(last, first); // поменять местами
-</script>
-```
-
-[/smart]
-
-
-[smart header="Метод `remove`"]
-
-В современном стандарте есть также метод [elem.remove()](https://dom.spec.whatwg.org/#dom-childnode-remove), который удаляет элемент напрямую, не требуя ссылки на родителя. Это зачастую удобнее, чем `removeChild`.
-
-Он поддерживается во всех современных браузерах, кроме IE11-. Впрочем, легко подключить или даже сделать полифилл.
-[/smart]
-
-### Удаление сообщения
-
-Сделаем так, что через секунду сообщение пропадёт:
-
-```html
-<!--+ run -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<body>
-  <h3>Сообщение пропадёт через секунду</h3>
-</body>
-
-<script>
-  var div = document.createElement('div');
-  div.className = "alert alert-success";
-  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
-
-  document.body.appendChild(div);
-
-*!*
-  setTimeout(function() {
-    div.parentNode.removeChild(div);
-  }, 1000);
-*/!*
-</script>
-```
-
-## Текстовые узлы для вставки текста
-
-При работе с сообщением мы использовали только узлы-элементы и `innerHTML`. 
-
-Но и текстовые узлы тоже имеют интересную область применения! 
-
-Если текст для сообщения нужно показать именно как текст, а не как HTML, то можно обернуть его в текстовый узел.
-
-Например:
-
-```html
-<!--+ run -->
-<style>
-.alert {
-  padding: 15px;
-  border: 1px solid #d6e9c6;
-  border-radius: 4px;
-  color: #3c763d;
-  background-color: #dff0d8;
-}
-</style>
-
-<script>
-  var div = document.createElement('div');
-  div.className = "alert alert-success";
-  document.body.appendChild(div);
-
-*!*
-  var text = prompt("Введите текст для сообщения", "Жили были <a> и <b>!");
-
-  // вставится именно как текст, без HTML-обработки
-  div.appendChild(document.createTextNode(text));
-*/!*
-</script>
-```
-
-В современных браузерах (кроме IE8-) в качестве альтернативы можно использовать присвоение `textContent`.
-
-
-## Итого
-
-Методы для создания узлов:
-
-<ul>
-<li>`document.createElement(tag)` -- создает элемент</li>
-<li>`document.createTextNode(value)` -- создает текстовый узел</li>
-<li>`elem.cloneNode(deep)` -- клонирует элемент, если `deep == true`, то со всеми потомками, если `false` -- без потомков.</li>
-</ul>
-
-Вставка и удаление узлов:
-<ul>
-<li>`parent.appendChild(elem)`</li>
-<li>`parent.insertBefore(elem, nextSibling)`</li>
-<li>`parent.removeChild(elem)`</li>
-<li>`parent.replaceChild(newElem, elem)`</li>
-</ul>
-
-Все эти методы возвращают `elem`.
-
-Методы для изменения DOM также описаны в спецификации <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1</a>.
-
-
-
-
-
-
-
diff --git a/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md b/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md
deleted file mode 100644
index f8202293..00000000
--- a/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-Решение:
-
-```js
-var ul = document.body.children[0];
-
-ul.insertAdjacentHTML("beforeEnd", "<li>3</li><li>4</li><li>5</li>");
-```
-
diff --git a/2-ui/1-document/12-multi-insert/1-append-to-list/task.md b/2-ui/1-document/12-multi-insert/1-append-to-list/task.md
deleted file mode 100644
index 88c334f6..00000000
--- a/2-ui/1-document/12-multi-insert/1-append-to-list/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Вставьте элементы в конец списка
-
-[importance 5]
-
-Напишите код для вставки текста `html` в конец списка `ul` с использованием метода `insertAdjacentHTML`. Такая вставка, в отличие от присвоения `innerHTML+=`, не будет перезаписывать текущее содержимое. 
-
-Добавьте к списку ниже элементы `<li>3</li><li>4</li><li>5</li>`:
-
-```html
-<ul>
-  <li>1</li>
-  <li>2</li>
-</ul>
-```
-
diff --git a/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.md b/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.md
deleted file mode 100644
index bd110879..00000000
--- a/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Для сортировки нам поможет функция `sort` массива.
-
-Общая идея лежит на поверхности: сделать массив из строк и отсортировать его. Тонкости кроются в деталях.
-
-В ифрейме ниже загружен документ, описывающий и реализующий разные алгоритмы. Обратите внимание: разница в производительности может достигать нескольких раз!
-
-[iframe height=800 border=1 src="solution" link edit]
-
-P.S. Создавать `DocumentFragment` здесь ни к чему. Можно вытащить из документа `TBODY` и иметь дело с ним в отрыве от DOM (алгоритм 4).
-
-P.P.S. Если нужно сделать много узлов, то обычно `innerHTML` работает быстрее, чем удаление и вставка элементов через DOM-вызовы. То есть, сгенерировать таблицу заново эффективнее.
diff --git a/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.view/index.html b/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.view/index.html
deleted file mode 100644
index 9f249c03..00000000
--- a/2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.view/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-
-  <fieldset>
-    <legend>Алгоритм 1.</legend>
-    <ol>
-      <li>Все <code>TR</code> удалить из таблицы, при этом собрав их в JavaScript-массив.</li>
-      <li>Отсортировать этот массив, используя свою функцию в <code>sort(...)</code> для сравнения <code>TR</code></li>
-      <li>Добавить <code>TR</code> из массива в таблицу в нужном порядке</li>
-    </ol>
-    <button onclick="bench(sort1, this)">Померять время</button>
-  </fieldset>
-
-  <fieldset>
-    <legend>Алгоритм 2.</legend>
-    <ol>
-      <li>Скопировать <code>TR</code> в JavaScript-массив.</li>
-      <li>Отсортировать этот массив, используя свою функцию в <code>sort(...)</code> для сравнения <code>TR</code></li>
-      <li>Добавить <code>TR</code> из массива в таблицу в нужном порядке. При добавлении каждый <code>TR</code> сам удалится с предыдущего места.</li>
-    </ol>
-    <button onclick="bench(sort2, this)">Померять время</button>
-  </fieldset>
-
-
-  <fieldset>
-    <legend>Алгоритм 3.</legend>
-    <ol>
-      <li>Создать массив из объектов вида <code>{elem: ссылка на TR, value: содержимое TR}</code>.</li>
-      <li>Отсортировать массив по <code>value</code>. Функция сравнения во время сортировки теперь будет обращаться не к <code>innerHTML</code>, а к свойству объекта, это быстрее. Сортировка может потребовать многократных сравнений одного и того же элемента,
-        отсюда выигрыш.</li>
-      <li>Добавить <code>TR</code> в таблицу в нужном порядке (автоудалятся с предыдущего места).</li>
-    </ol>
-    <button onclick="bench(function(){sortOpt(false)}, this)">Померять время</button>
-  </fieldset>
-
-
-  <fieldset>
-    <legend>Алгоритм 4.</legend>
-    <ol>
-      <li>Выполнить алгоритм 3, но перед этим удалить таблицу из документа, а после - вставить обратно.</li>
-    </ol>
-    <button onclick="bench(function(){sortOpt(true)}, this)">Померять время</button>
-  </fieldset>
-
-  <fieldset>
-    <legend>Алгоритм 5.</legend>
-    <ol>
-      <li>Замерить время генерации таблицы (создаётся строка и пишется в <code>innerHTML</code>).</li>
-    </ol>
-    <button onclick="benchMake(this)">Померять время</button>
-  </fieldset>
-
-  <div id="table-holder"></div>
-
-
-  <script>
-    function makeTable() {
-      var tableHolder = document.getElementById('table-holder');
-
-      var contents = '<thead><th>Имя</th><th>Фамилия</th><th>Отчество</th><th>Возраст</th></thead>';
-      contents += '<tbody>';
-      for (var i = 0; i < 100; i++) {
-        contents += "<tr><td> ... </td><td>Разные</td><td>Данные</td><td>" + ((i + 50) % 30) + "</td></tr>";
-      }
-      contents += '</tbody>';
-
-      tableHolder.innerHTML = '<table>' + contents + '</table>';
-    }
-
-    /* перенести элементы в массив, отсортировать его и перевставить */
-    function sort1() {
-      var tbody = document.getElementsByTagName('tbody')[0];
-      var rows = [];
-
-      for (var i = tbody.children.length - 1; i >= 0; i--) {
-        var child = tbody.removeChild(tbody.children[i]);
-        rows.push(child);
-      }
-
-      rows.sort(function(a, b) {
-        return a.lastChild.innerHTML - b.lastChild.innerHTML;
-      })
-
-      for (var i = 0; i < rows.length; i++) {
-        tbody.appendChild(rows[i]);
-      }
-
-    }
-
-    /* скопировать ссылки в массив, отсортировать его и перевставить */
-    function sort2() {
-      var tbody = document.getElementsByTagName('tbody')[0];
-      var rows = [];
-
-      for (var i = 0; i < tbody.children.length; i++) {
-        rows.push(tbody.children[i]);
-      }
-
-      rows.sort(function(a, b) {
-        return a.lastChild.innerHTML - b.lastChild.innerHTML;
-      })
-
-      for (var i = 0; i < rows.length; i++) {
-        tbody.appendChild(rows[i]);
-      }
-
-    }
-
-
-    /* создать массив из значений и ссылок, отсортировать, перевставить
-      doRemove = предварительно вынуть из документа
-    */
-    function sortOpt(doRemove) {
-      var tbody = document.getElementsByTagName('tbody')[0];
-      var table = tbody.parentNode;
-      if (doRemove) table.removeChild(tbody);
-
-      var rows = [];
-      for (var i = 0; i < tbody.children.length; i++) {
-        var elem = tbody.children[i];
-        rows.push({
-          value: elem.lastChild.innerHTML,
-          elem: elem
-        });
-      }
-
-      rows.sort(function(a, b) {
-        return a.value - b.value;
-      });
-
-      for (var i = 0; i < rows.length; i++) {
-        tbody.appendChild(rows[i].elem);
-      }
-
-      if (doRemove) table.appendChild(tbody);
-    }
-
-
-    function bench(f, elem) {
-      var sum = 0;
-      for (var i = 0; i < 100; i++) {
-        makeTable();
-        var d = new Date;
-        f();
-        sum += new Date - d;
-      }
-      elem.innerHTML = sum + 'мс';
-    }
-
-
-    function benchMake(elem) {
-      var sum = 0;
-      for (var i = 0; i < 100; i++) {
-        var d = new Date;
-        makeTable();
-        sum += new Date - d;
-      }
-      elem.innerHTML = sum + 'мс';
-    }
-  </script>
-
-
-
-  <h3>Содержимое документа для придания "реалистичности"</h3>
-
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-  <div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/2-sort-table-performance/task.md b/2-ui/1-document/12-multi-insert/2-sort-table-performance/task.md
deleted file mode 100644
index 600836e0..00000000
--- a/2-ui/1-document/12-multi-insert/2-sort-table-performance/task.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Отсортировать таблицу
-
-[importance 5]
-
-Есть таблица:
-
-<table>
-<tr>
-  <th>Имя</th>
-  <th>Фамилия</th>
-  <th>Отчество</th>
-  <th>Возраст</th>
-</tr>
-<tr>
-  <td>Вася</td>
-  <td>Петров</td>
-  <td>Александрович</td>
-  <td>10</td>
-</tr>
-<tr>
-  <td>Петя</td>
-  <td>Иванов</td>
-  <td>Петрович</td>
-  <td>15</td>
-</tr>
-<tr>
-  <td>Владимир</td>
-  <td>Ленин</td>
-  <td>Ильич</td>
-  <td>9</td>
-</tr>
-<tr>
-  <td>...</td>
-  <td>...</td>
-  <td>...</td>
-  <td>...</td>
-</tr>
-</table>
-
-Строк в таблице много: может быть 20, 50, 100.. Есть и другие элементы в документе.
-
-Как бы вы предложили отсортировать содержимое таблицы по полю `Возраст`? Обдумайте алгоритм, реализуйте его. 
-
-Как сделать, чтобы сортировка работала как можно быстрее? А если в таблице 10000 строк (бывает и такое)? 
-
-P.S. Может ли здесь помочь `DocumentFragment`?
-
-P.P.S. Если предположить, что у нас заранее есть массив данных для таблицы в JavaScript -- что быстрее: отсортировать эту таблицу или сгенерировать новую?
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/article.md b/2-ui/1-document/12-multi-insert/article.md
deleted file mode 100644
index 80c7576e..00000000
--- a/2-ui/1-document/12-multi-insert/article.md
+++ /dev/null
@@ -1,362 +0,0 @@
-# Мультивставка: insertAdjacentHTML и DocumentFragment
-
-Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.
-[cut]
-## Оптимизация вставки в документ
-
-Рассмотрим задачу: сгенерировать список `UL/LI`. 
-
-Есть две возможных последовательности:
-
-<ol>
-<li>Сначала вставить `UL` в документ, а потом добавить к нему `LI`:
-
-```js
-var ul = document.createElement('ul');
-document.body.appendChild(ul); // сначала в документ
-for (...) ul.appendChild(li); // потом узлы
-```
-
-</li>
-<li>Полностью создать список "вне DOM", а потом -- вставить в документ:
-
-```js
-//+ no-beautify
-var ul = document.createElement('ul');
-for(...) ul.appendChild(li);   // сначала вставить узлы
-document.body.appendChild(ul); // затем в документ
-```
-
-</li>
-</ol>
-
-Как ни странно, между этими последовательностями есть разница. В большинстве браузеров, второй вариант -- быстрее.
-
-Почему же? Иногда говорят: "потому что браузер перерисовывает каждый раз при добавлении элемента". Это не так. Дело вовсе не в перерисовке.
-
-Браузер достаточно "умён", чтобы ничего не перерисовывать понапрасну. В большинстве случаев процессы перерисовки и сопутствующие вычисления будут отложены до окончания работы скрипта, и на тот момент уже совершенно без разницы, в какой последовательности были изменены узлы.
-
-**Тем не менее, при вставке узла происходят разные внутренние события и обновления внутренних структур данных, скрытые от наших глаз.**
-
-Что именно происходит -- зависит от конкретной, внутренней браузерной реализации DOM, но это отнимает время. Конечно, браузеры развиваются и стараются свести лишние действия к минимуму. 
-
-[online]
-### Бенчмарк [#insert-bench-tbody]
-
-Чтобы легко проверить текущее состояние дел -- вот два бенчмарка. 
-
-Оба они создают таблицу 20x20, наполняя <code>TBODY</code> элементами <code>TR/TD</code>. 
-
-При этом первый вставляет все в документ тут же, второй -- задерживает вставку <code>TBODY</code> в документ до конца процесса.
-
-Кликните, чтобы запустить.
-
-<input type="button" onclick="alert(bench(appendFirst,50))" value="TBODY cразу в DOM"/> <input type="button" onclick="alert(bench(appendLast,50))" value="Отложенная вставка TBODY в DOM"/>
-  
-<table id="bench-table"></table>
-
-Код для тестов находится в файле [insert-bench.js](insert-bench.js).
-
-[/online]
-## Добавление множества узлов
-
-Продолжим работать со вставкой узлов. 
-
-Рассмотрим случай, когда в документе *уже есть* большой список `UL`. И тут понадобилось срочно добавить еще 20 элементов `LI`.
-
-Как это сделать?
-
-Если новые элементы пришли в виде строки, то можно попробовать добавить их так:
-
-```js
-ul.innerHTML += "<li>1</li><li>2</li>...";
-```
-
-Но операцию `ul.innerHTML += "..."` можно по-другому переписать как `ul.innerHTML = ul.innerHTML + "..."`. Иначе говоря, она *не прибавляет, а заменяет* всё содержимое списка на дополненную строку. Это и нехорошо с точки зрения производительности, но и будут побочные эффекты. В частности, все внешние ресурсы (картинки) внутри перезаписываемого `innerHTML` будут загружены заново. Если в каких-то переменных были ссылки на элементы списка -- они станут неверны, так как содержимое полностью заменяется.В общем, так лучше не делать.
-
-А если нужно вставить в середину списка? Здесь `innerHTML` вообще не поможет.
-
-Можно, конечно, вставить строку во временный DOM-элемент и перенести оттуда элементы, но есть и гораздо лучший вариант: метод `insertAdjacentHTML`!
-
-## insertAdjacent*
-
-Метод [insertAdjacentHTML](https://developer.mozilla.org/en/DOM/element.insertAdjacentHTML) позволяет вставлять произвольный HTML в любое место документа, в том числе *и между узлами*!
-
-Он поддерживается всеми браузерами, кроме Firefox меньше версии 8, ну а там его можно эмулировать.
-
-Синтаксис:
-
-```js
-elem.insertAdjacentHTML(where, html);
-```
-
-<dl>
-<dt>`html`</dt>
-<dd>Строка HTML, которую нужно вставить</dd>
-<dt>`where`</dt>
-<dd>Куда по отношению к `elem` вставлять строку. Всего четыре варианта:
-<ol>
-<li>`beforeBegin` -- перед `elem`.</li>
-<li>`afterBegin` -- внутрь `elem`, в самое начало.</li>
-<li>`beforeEnd` -- внутрь `elem`, в конец.</li>
-<li>`afterEnd` -- после `elem`.</li>
-</ol>
-</dd>
-
-<img src="insertAdjacentHTML.png">
-
-Например, вставим пропущенные элементы списка *перед* `<li>5</li>`:
-
-```html
-<!--+ run -->
-<ul>
-  <li>1</li>
-  <li>2</li>
-  <li>5</li>
-</ul>
-
-<script>
-  var ul = document.body.children[0];
-  var li5 = ul.children[2];
-
-  li5.insertAdjacentHTML("beforeBegin", "<li>3</li><li>4</li>");
-</script>
-```
-
-Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя [полифилл insertAdjacentHTML для Firefox](insertAdjacentFF.js).
-
-У этого метода есть "близнецы-братья", которые поддерживаются везде, кроме Firefox, но в него они добавляются тем же полифиллом:
-
-<ul>
-<li>[elem.insertAdjacentElement(where, newElem)](http://help.dottoro.com/ljbreokf.php) -- вставляет в произвольное место не строку HTML, а элемент `newElem`.</li>
-<li>[elem.insertAdjacentText(where, text)](http://help.dottoro.com/ljrsluxu.php) -- создаёт текстовый узел из строки `text` и вставляет его в указанное место относительно `elem`.</li>
-</ul>
-
-Синтаксис этих методов, за исключением последнего параметра, полностью совпадает с `insertAdjacentHTML`. Вместе они образуют "универсальный швейцарский нож" для вставки чего угодно куда угодно.
-
-## DocumentFragment
-
-[warn header="Важно для старых браузеров"]
-Оптимизация, о которой здесь идёт речь, важна в первую очередь для старых браузеров, включая IE9-. В современных браузерах эффект от нее, как правило, небольшой, а иногда может быть и отрицательным.
-[/warn]
-
-До этого мы говорили о вставке строки в DOM. А что делать в случае, когда надо в существующий `UL` вставить много *DOM-элементов*?
-
-Можно вставлять их один за другим, вызовом `insertBefore/appendChild`, но при этом получится много операций с большим живым документом. 
-
-**Вставить пачку узлов единовременно поможет `DocumentFragment`. Это особенный *кросс-браузерный* DOM-объект, который похож на обычный DOM-узел, но им не является.**
-
-Синтаксис для его создания:
-
-```js
-var fragment = document.createDocumentFragment();
-```
-
-В него можно добавлять другие узлы.
-
-```js
-fragment.appendChild(node);
-```
-
-Его можно клонировать:
-
-```js
-fragment.cloneNode(true); // клонирование с подэлементами
-```
-
-**У `DocumentFragment` нет обычных свойств DOM-узлов, таких как `innerHTML`, `tagName` и т.п. Это не узел.**
-
-Его "Фишка" заключается в том, что когда `DocumentFragment` вставляется в DOM -- то он исчезает, а вместо него вставляются его дети. Это свойство является уникальной особенностью `DocumentFragment`.
-
-Например, если добавить в него много `LI`, и потом вызвать `ul.appendChild(fragment)`, то фрагмент растворится, и в DOM вставятся именно `LI`, причём в том же порядке, в котором были во фрагменте.
-
-Псевдокод:
-
-```js
-// хотим вставить в список UL много LI
-
-// делаем вспомогательный DocumentFragment
-var fragment = document.createDocumentFragment();
-
-for (цикл по li) {
-  fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment 
-}
-
-ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка
-```
-
-В современных браузерах эффект от такой оптимизации может быть различным, а на небольших документах иногда и отрицательным. 
-
-Понять текущее положение вещей вы можете, запустив следующий [edit src="benchmark"]небольшой бенчмарк[/edit].
-
-## append/prepend, before/after, replaceWith
-
-Сравнительно недавно в [стандарте](https://dom.spec.whatwg.org/) появились методы, которые позволяют вставить что угодно и куда угодно.
-
-Синтаксис:
-
-<ul>
-<li>`node.append(...nodes)` -- вставляет `nodes` в конец `node`,</li>
-<li>`node.prepend(...nodes)` -- вставляет `nodes` в начало `node`,</li>
-<li>`node.after(...nodes)` -- вставляет `nodes` после узла `node`,</li>
-<li>`node.before(...nodes)` -- вставляет `nodes` перед узлом `node`,</li>
-<li>`node.replaceWith(...nodes)` -- вставляет `nodes` вместо `node`.</li>
-</ul>
-
-Эти методы ничего не возвращают.
-
-Во всех этих методах `nodes` -- DOM-узлы или строки, в любом сочетании и количестве. Причём строки вставляются именно как текстовые узлы, в отличие от `insertAdjacentHTML`.
-
-
-Пример (с полифиллом):
-```html
-<!--+ run autorun height=80 -->
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.append,Element.prototype.after"></script>
-</head>
-
-<body>
-  <script>
-    // добавим элемент в конец <body>
-    var p = document.createElement('p');
-    document.body.append(p);
-
-    var em = document.createElement('em');
-    em.append('Мир!');
-
-    // вставить в параграф текстовый и обычный узлы
-    p.append("Привет, ", em);
-
-    // добавить элемент после <p>
-    p.after(document.createElement('hr'))
-  </script>
-
-</body>
-
-</html>
-```
-
-## Итого
-
-<ul>
-<li>Манипуляции, меняющие структуру DOM (вставка, удаление элементов), как правило, быстрее с отдельным маленьким узлом, чем с большим DOM, который находится в документе. 
-
-Конкретная разница зависит от внутренней реализации DOM в браузере.</li>
-<li>Семейство методов для вставки HTML/элемента/текста в произвольное место документа:
-<ul>
-<li>`elem.insertAdjacentHTML(where, html)`</li>
-<li>`elem.insertAdjacentElement(where, node)`</li>
-<li>`elem.insertAdjacentText(where, text)`</li>
-</ul> 
-
-Два последних метода не поддерживаются в Firefox, на момент написания текста, но есть небольшой полифилл  [insertAdjacentFF.js](insertAdjacentFF.js), который добавляет их. Конечно, он нужен только для Firefox.
-</li>
-<li>`DocumentFragment` позволяет минимизировать количество вставок в большой живой DOM. Эта оптимизация особо эффективна в старых браузерах, в новых эффект от неё меньше или наоборот отрицательный.
-
-Элементы сначала вставляются в него, а потом -- он вставляется в DOM. При вставке `DocumentFragment` "растворяется", и вместо него вставляются содержащиеся в нём узлы.
-
-`DocumentFragment`, в отличие от `insertAdjacent*`, работает с коллекцией DOM-узлов.
-</li>
-<li>Современные методы, работают с любым количеством узлов и текста, желателен полифилл:
-<ul>
-<li>`append/prepend` -- вставка в конец/начало.</li>
-<li>`before/after` -- вставка после/перед.</li>
-<li>`replaceWith` -- замена.</li>
-</ul>
-</li>
-</li>
-</ul>
-
-
-[head]
-<script>
-function bench(test, times) {
-   var sum = 0;
-   for(var i = 0; i < times; i++) {
-      if(test.setup) test.setup();
-      var t = new Date();
-      test.work();
-      sum += (new Date() - t);
-      if(test.tearDown) test.tearDown();
-   }
-   return sum;
-}
-/* 1. Вставляет TBODY в документ сразу. а затем элементы */
-var appendFirst = new function() {
-  var benchTable;
-
-  this.setup = function() {
-    // очистить всё
-    benchTable = document.getElementById('bench-table')
-    while(benchTable.firstChild) {
-      benchTable.removeChild(benchTable.firstChild);
-    }
-  }
-
-  this.work = function() {
-    // встаить TBODY и элементы
-    var tbody = document.createElement('TBODY');
-    benchTable.appendChild(tbody);
-
-    for(var i = 0; i < 20; i++) {
-      var tr = document.createElement('TR');
-      tbody.appendChild(tr);
-      for(var j = 0; j < 20; j++) {
-        var td = document.createElement('td');
-        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
-        tr.appendChild(td);
-      }
-    }
-  }
-
-}
-
-/* 2. Полностью делает TBODY, а затем вставляет в документ */
-var appendLast = new function() {
-  var benchTable;
-
-  this.setup = function() {
-    // очистить всё
-    benchTable = document.getElementById('bench-table');
-    while(benchTable.firstChild) {
-      benchTable.removeChild(benchTable.firstChild);
-    }
-  }
-
-  this.work = function() {
-    var tbody = document.createElement('TBODY');
-
-    for(var i = 0; i < 20; i++) {
-      var tr = document.createElement('TR');
-      tbody.appendChild(tr);
-      for(var j = 0; j < 20; j++) {
-        var td = document.createElement('td');
-        tr.appendChild(td);
-        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
-      }
-    }
-
-    benchTable.appendChild(tbody);
-  }
-
-}
-</script>
-
-<style>
-#bench-table td {
-  padding: 0;
-}
-
-#bench-list li {
-  display: inline-block;
-  margin: 0;
-  padding: 2px;
-  list-style-image: none;
-  list-style: none;
-}
-
-</style>
-[/head]
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/benchmark.view/bench.js b/2-ui/1-document/12-multi-insert/benchmark.view/bench.js
deleted file mode 100644
index e06acecb..00000000
--- a/2-ui/1-document/12-multi-insert/benchmark.view/bench.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function bench(test, times) {
-  var sum = 0;
-  for (var i = 0; i < times; i++) {
-    if (test.setup) test.setup();
-    var t = new Date();
-    test.work();
-    sum += (new Date() - t);
-    if (test.tearDown) test.tearDown();
-  }
-  return sum;
-}
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/benchmark.view/documentfragment-bench.js b/2-ui/1-document/12-multi-insert/benchmark.view/documentfragment-bench.js
deleted file mode 100644
index 8e875cf1..00000000
--- a/2-ui/1-document/12-multi-insert/benchmark.view/documentfragment-bench.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var DocumentFragmentTest = new function() {
-  var benchList = document.getElementById('bench-list');
-
-  var items = [];
-  for (var i = 0; i < 100; i++) {
-    var li = document.createElement('li');
-    li.innerHTML = i;
-    items.push(li);
-  }
-
-  this.insertPlain = new function() {
-
-    this.setup = function() {
-      while (benchList.firstChild) {
-        benchList.removeChild(benchList.firstChild);
-      }
-    }
-
-    this.work = function() {
-      for (var i = 0; i < items.length; i++) {
-        benchList.appendChild(items[i]);
-      }
-    }
-
-  };
-
-  this.insertDocumentFragment = new function() {
-
-    this.setup = function() {
-      // очистить всё
-      while (benchList.firstChild) {
-        benchList.removeChild(benchList.firstChild);
-      }
-    }
-
-    this.work = function() {
-      var docFrag = document.createDocumentFragment();
-      for (var i = 0; i < items.length; i++) {
-        docFrag.appendChild(items[i]);
-      }
-      benchList.appendChild(docFrag);
-    }
-
-  };
-}
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/benchmark.view/index.html b/2-ui/1-document/12-multi-insert/benchmark.view/index.html
deleted file mode 100644
index 12fecd91..00000000
--- a/2-ui/1-document/12-multi-insert/benchmark.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  Вставляются 100 элементов LI в пустой UL.
-
-  <input type="button" onclick="alert(bench(DocumentFragmentTest.insertPlain,200))" value="Замерить время на обычную вставку" />
-
-  <input type="button" onclick="alert(bench(DocumentFragmentTest.insertDocumentFragment,200))" value="Замерить время на вставку через DocumentFragment">
-
-  <ul id="bench-list"></ul>
-
-  <script src="bench.js"></script>
-  <script src="documentfragment-bench.js"></script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/documentfragment-bench.js b/2-ui/1-document/12-multi-insert/documentfragment-bench.js
deleted file mode 100755
index 8e875cf1..00000000
--- a/2-ui/1-document/12-multi-insert/documentfragment-bench.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var DocumentFragmentTest = new function() {
-  var benchList = document.getElementById('bench-list');
-
-  var items = [];
-  for (var i = 0; i < 100; i++) {
-    var li = document.createElement('li');
-    li.innerHTML = i;
-    items.push(li);
-  }
-
-  this.insertPlain = new function() {
-
-    this.setup = function() {
-      while (benchList.firstChild) {
-        benchList.removeChild(benchList.firstChild);
-      }
-    }
-
-    this.work = function() {
-      for (var i = 0; i < items.length; i++) {
-        benchList.appendChild(items[i]);
-      }
-    }
-
-  };
-
-  this.insertDocumentFragment = new function() {
-
-    this.setup = function() {
-      // очистить всё
-      while (benchList.firstChild) {
-        benchList.removeChild(benchList.firstChild);
-      }
-    }
-
-    this.work = function() {
-      var docFrag = document.createDocumentFragment();
-      for (var i = 0; i < items.length; i++) {
-        docFrag.appendChild(items[i]);
-      }
-      benchList.appendChild(docFrag);
-    }
-
-  };
-}
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/insert-bench.js b/2-ui/1-document/12-multi-insert/insert-bench.js
deleted file mode 100755
index 95a9c2a6..00000000
--- a/2-ui/1-document/12-multi-insert/insert-bench.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* 1. Вставляет TBODY в документ сразу. а затем элементы */
-var appendFirst = new function() {
-  var benchTable;
-
-  this.setup = function() {
-    // очистить всё
-    benchTable = document.getElementById('bench-table')
-    while (benchTable.firstChild) {
-      benchTable.removeChild(benchTable.firstChild);
-    }
-  }
-
-  this.work = function() {
-    // встаить TBODY и элементы
-    var tbody = document.createElement('TBODY');
-    benchTable.appendChild(tbody);
-
-    for (var i = 0; i < 20; i++) {
-      var tr = document.createElement('TR');
-      tbody.appendChild(tr);
-      for (var j = 0; j < 20; j++) {
-        var td = document.createElement('td');
-        td.appendChild(document.createTextNode('' + i.toString(20) + j.toString(20)));
-        tr.appendChild(td);
-      }
-    }
-  }
-
-}
-
-/* 2. Полностью делает TBODY, а затем вставляет в документ */
-var appendLast = new function() {
-  var benchTable;
-
-  this.setup = function() {
-    // очистить всё
-    benchTable = document.getElementById('bench-table');
-    while (benchTable.firstChild) {
-      benchTable.removeChild(benchTable.firstChild);
-    }
-  }
-
-  this.work = function() {
-    var tbody = document.createElement('TBODY');
-
-    for (var i = 0; i < 20; i++) {
-      var tr = document.createElement('TR');
-      tbody.appendChild(tr);
-      for (var j = 0; j < 20; j++) {
-        var td = document.createElement('td');
-        tr.appendChild(td);
-        td.appendChild(document.createTextNode('' + i.toString(20) + j.toString(20)));
-      }
-    }
-
-    benchTable.appendChild(tbody);
-  }
-
-}
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/insertAdjacentFF.js b/2-ui/1-document/12-multi-insert/insertAdjacentFF.js
deleted file mode 100644
index 5d619e44..00000000
--- a/2-ui/1-document/12-multi-insert/insertAdjacentFF.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// http://learn.javascript.ru/files/tutorial/browser/dom/insertAdjacentFF.js
-// Добавляет поддержку insertAdjacent* в Firefox
-
-if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {
-  HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
-    switch (where) {
-      case 'beforeBegin':
-        this.parentNode.insertBefore(parsedNode, this)
-        break;
-      case 'afterBegin':
-        this.insertBefore(parsedNode, this.firstChild);
-        break;
-      case 'beforeEnd':
-        this.appendChild(parsedNode);
-        break;
-      case 'afterEnd':
-        if (this.nextSibling) this.parentNode.insertBefore(parsedNode, this.nextSibling);
-        else this.parentNode.appendChild(parsedNode);
-        break;
-    }
-  }
-
-  HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
-    var r = this.ownerDocument.createRange();
-    r.setStartBefore(this);
-    var parsedHTML = r.createContextualFragment(htmlStr);
-    this.insertAdjacentElement(where, parsedHTML)
-  }
-
-
-  HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
-    var parsedText = document.createTextNode(txtStr)
-    this.insertAdjacentElement(where, parsedText)
-  }
-}
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png b/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png
deleted file mode 100755
index e9ac590b..00000000
Binary files a/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png and /dev/null differ
diff --git a/2-ui/1-document/13-document-write/article.md b/2-ui/1-document/13-document-write/article.md
deleted file mode 100644
index ae83994f..00000000
--- a/2-ui/1-document/13-document-write/article.md
+++ /dev/null
@@ -1,149 +0,0 @@
-# Метод document.write
-
-Метод `document.write` -- один из наиболее древних методов добавления текста к документу.
-
-У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
-[cut]
-## Как работает document.write   
-
-Метод `document.write(str)` работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
-
-HTML-документ ниже будет содержать `1 2 3`.
-
-```html
-<!--+ run -->
-<body>
-  1
-  <script>
-    document.write(2);
-  </script>
-  3
-</body>
-```
-
-**Нет никаких ограничений на содержимое `document.write`**. 
-
-Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
-
-Например:
-
-```html
-<!--+ run -->
-<script>
-  document.write('<style> td { color: #F40 } </style>');
-</script>
-<table>
-  <tr>
-    <script>
-      document.write('<td>')
-    </script>
-    Текст внутри TD.
-    <script>
-      document.write('</td>')
-    </script>
-  </tr>
-</table>
-```
-
-Также существует метод `document.writeln(str)` -- не менее древний, который добавляет после `str` символ перевода строки `"\n"`.
-
-## Только до конца загрузки
-
-Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идет непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя -- браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.
-
-**Методы `document.write` и `document.writeln` пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.**
-
-Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.
-
-Технически, вызвать `document.write` можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится *"закрытым"*. Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
-
-Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку -- её содержимое удалится:
-
-[pre no-typography]
-  <input type="button" onclick='document.write("Пустая страница!");' value="Запустить document.write('Пустая страница!')">
-[/pre]
-
-Из-за этой особенности `document.write` для загруженных документов не используют.
-
-[warn header="XHTML и `document.write`"]
-В некоторых современных браузерах при получении страницы с заголовком `Content-Type: text/xml` или `Content-Type: text/xhtml+xml` включается "XML-режим" чтения документа. Метод `document.write` при этом не работает. 
-
-Это лишь одна из причин, по которой XML-режим обычно не используют.
-[/warn]
-
-
-## Преимущества перед innerHTML
-
-Метод `document.write` -- динозавр, он существовал десятки <strike>миллионов</strike> лет назад. С тех пор, как появился и стал стандартным метод `innerHTML`, нужда в нём возникает редко, но некоторые преимущества, всё же, есть.
-
-<ul>
-<li>Метод `document.write` работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.
-
-Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.</li>
-<li>Метод `document.write` вставляет любой текст на страницу "как есть", в то время как `innerHTML` может вписать лишь валидный HTML (при попытке подсунуть невалидный -- браузер скорректирует его).</li>
-</ul>
-
-Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
-
-Однако, `document.write` по своей природе уникален: он добавляет текст "в текущее место документа", без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
-
-## Антипример: реклама
-
-Например, `document.write` используют для вставки рекламных скриптов и различных счетчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
-
-```html
-<script>
-  // в url указано текущее разрешение экрана посетителя
-  var url = 'http://ads.com/buyme?screen=' + screen.width + "x" + screen.height;
-
-  // загрузить такой скрипт прямо сейчас
-  document.write('<script src="' + url + '"></scr' + 'ipt>');
-</script>
-```
-
-[smart]
-Закрывающий тег <code>&lt;/script&gt;</code> в строке разделён, чтобы браузер не увидел `</script>` и не посчитал его концом скрипта. 
-
-Также используют запись:
-
-```js
-document.write('<script src="' + url + '"><\/script>');
-```
-
-Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку `</script>`. 
-[/smart]
-
-Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер.
- 
-**Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.**
-
-То есть, дело даже не в самом `document.write`, а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит -- он не будет дальше строить DOM и показывать документ.
-
-Представим на минуту, что сервер `ads.com`, с которого грузится скрипт, работает медленно или вообще завис -- зависнет и наша страница.
-
-Что делать?
-
-В современных браузерах у скриптов есть атрибуты `async` и `defer`, которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать `document.write` именно на этом месте, и браузер не должен двигаться вперёд по документу.
-
-Альтернатива -- использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
-
-Если это невозможно -- применяют всякие хитрые оптимизации, например заменяют метод `document.write` своей функцией, и она уже разбирается со скриптами и баннерами. 
-
-## Итого
-
-Метод `document.write` (или `writeln`) пишет текст прямо в HTML, как будто он там всегда был. 
-
-<ul>
-<li>Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.
-
-Запуск после загрузки приведёт к очистке документа.</li>
-<li>Метод `document.write` очень быстр.
-
-В отличие от установки `innerHTML` и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована. </li>
-<li>Иногда `document.write` используют для добавления скриптов с динамическим URL.
-
-Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница -- тоже. 
-
-Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или `async/defer`. Современные системы рекламы и статистики так и делают.
-</li>
-</ul>
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
deleted file mode 100644
index c78f0136..00000000
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
+++ /dev/null
@@ -1,43 +0,0 @@
-Есть два варианта. 
-
-<ol>
-<li>Можно использовать свойство `elem.style.cssText` и присвоить стиль в текстовом виде. При этом все присвоенные ранее свойства `elem.style` будут удалены.</li>
-<li>Можно назначить подсвойства `elem.style` одно за другим. Этот способ более безопасен, т.к. меняет только явно присваемые свойства.</li>
-</ol>
-
-Мы выберем второй путь.
-
-[edit src="solution"]Открыть решение[/edit] 
-
-**Описание CSS-свойств:**
-
-```css
-.button {
-  -moz-border-radius: 8px;
-  -webkit-border-radius: 8px;
-  border-radius: 8px;
-  border: 2px groove green;
-  display: block;
-  height: 30px;
-  line-height: 30px;
-  width: 100px;
-  text-decoration: none;
-  text-align: center;
-  color: red;
-  font-weight: bold;
-}
-```
-
-<dl>
-<dt>`*-border-radius`</dt>
-<dd>Добавляет скругленные углы. Свойство присваивается в вариантах для Firefox `-moz-...`, Chrome/Safari `-webkit-...` и стандартное CSS3-свойство для тех, кто его поддерживает (Opera).</dd>
-<dt>`display`</dt>
-<dd>По умолчанию, у `A` это свойство имеет значение `display: inline`.</dd>
-<dt>`height`, `line-height`</dt>
-<dd>Устанавливает высоту и делает текст вертикально центрированным путем установки `line-height` в значение, равное высоте. Такой способ центрирования текста работает, если он состоит из одной строки.</dd>
-<dt>`text-align`</dt>
-<dd>Центрирует текст горизонтально.</dd>
-<dt>`color`, `font-weight`</dt>
-<dd>Делает текст красным и жирным.</dd>
-</dl>
-
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
deleted file mode 100755
index bf487e59..00000000
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div>
-    Кнопка:
-    <!-- создайте элемент и расположите его тут -->
-  </div>
-
-  <script>
-    var a = document.createElement('a');
-    a.className = 'button';
-    a.appendChild(document.createTextNode('Нажми меня'));
-    a.href = '/';
-
-    var s = a.style
-    s.MozBorderRadius = s.WebkitBorderRadius = s.borderRadius = '8px';
-    s.border = '2px groove green';
-    s.display = 'block';
-    s.height = '30px';
-    s.lineHeight = '30px';
-    s.width = '100px';
-    s.textDecoration = 'none';
-    s.textAlign = 'center';
-    s.color = 'red';
-    s.fontWeight = 'bold';
-
-    var div = document.body.children[0];
-    div.appendChild(a);
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
deleted file mode 100755
index 3492198b..00000000
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div>
-    Кнопка:
-    <!-- создайте элемент и расположите его тут -->
-  </div>
-
-  <script>
-    // .. ваш код
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
deleted file mode 100644
index 78da0a79..00000000
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Скругленая кнопка со стилями из JavaScript
-
-[importance 3]
-
-Создайте кнопку в виде элемента `<a>` с заданным стилем, используя JavaScript.
-
-В примере ниже такая кнопка создана при помощи HTML/CSS. В вашем решении кнопка должна создаваться, настраиваться и добавляться в документ при помощи *только JavaScript*, без тегов `<style>` и `<a>`.
-
-```html
-<!--+ autorun height="50" -->
-<style>
-  .button {
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    border: 2px groove green;
-    display: block;
-    height: 30px;
-    line-height: 30px;
-    width: 100px;
-    text-decoration: none;
-    text-align: center;
-    color: red;
-    font-weight: bold;
-  }
-</style>
-
-<a class="button" href="/">Нажми меня</a>
-```
-
-**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
-
- 
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css
deleted file mode 100755
index b21a80be..00000000
--- a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.notification {
-  position: fixed;
-  z-index: 1000;
-  padding: 5px;
-  border: 1px solid black;
-  font: normal 20px Georgia;
-  background: white;
-  text-align: center;
-}
-
-.welcome {
-  background: red;
-  color: yellow;
-}
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html
deleted file mode 100755
index 07ba7a03..00000000
--- a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body>
-
-  <h2>Уведомление</h2>
-
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
-    magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
-    temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
-  </p>
-
-  <script>
-    /**
-     * Показывает уведомление, пропадающее через 1.5 сек
-     * 
-     * @param options.top {number} вертикальный отступ, в px
-     * @param options.right {number} правый отступ, в px
-     * @param options.cssText {string} строка стиля
-     * @param options.className {string} CSS-класс 
-     * @param options.html {string} HTML-текст для показа
-     */
-    function showNotification(options) {
-
-      var notification = document.createElement('div');
-      notification.className = "notification";
-      if (options.cssText) {
-        notification.style.cssText = options.cssText;
-      }
-      notification.style.top = (options.top || 0) + 'px'; // can use cssText
-      notification.style.right = (options.right || 0) + 'px'; // can use cssText
-      if (options.className) {
-        notification.classList.add(options.className);
-      }
-
-      notification.innerHTML = options.html;
-      document.body.appendChild(notification); // over cover
-
-      setTimeout(function() {
-        document.body.removeChild(notification);
-      }, 1500);
-    }
-
-    // тест работоспособности
-    var i = 0;
-    setInterval(function() {
-      showNotification({
-        top: 10,
-        right: 10,
-        html: 'Привет ' + ++i,
-        className: "welcome"
-      });
-    }, 2000);
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css
deleted file mode 100755
index b21a80be..00000000
--- a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.notification {
-  position: fixed;
-  z-index: 1000;
-  padding: 5px;
-  border: 1px solid black;
-  font: normal 20px Georgia;
-  background: white;
-  text-align: center;
-}
-
-.welcome {
-  background: red;
-  color: yellow;
-}
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html
deleted file mode 100755
index dd184fce..00000000
--- a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body>
-
-  <h2>Уведомление</h2>
-
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
-    magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
-    temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
-  </p>
-
-  <p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
-
-  <script>
-    /**
-     * Показывает уведомление, пропадающее через 1.5 сек
-     * 
-     * @param options.top {number} вертикальный отступ, в px
-     * @param options.right {number} правый отступ, в px
-     * @param options.cssText {string} строка стиля
-     * @param options.className {string} CSS-класс 
-     * @param options.html {string} HTML-текст для показа
-     */
-    function showNotification(options) {
-      // ваш код
-    }
-
-    // тест работоспособности
-    var i = 0;
-    setInterval(function() {
-      showNotification({
-        top: 10,
-        right: 10,
-        html: 'Привет ' + ++i,
-        className: "welcome"
-      });
-    }, 2000);
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md
deleted file mode 100644
index bc89ddcc..00000000
--- a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Создать уведомление
-
-[importance 5]
-
-Напишите функцию `showNotification(options)`, которая показывает уведомление, пропадающее через 1.5 сек. 
-
-Описание функции:
-
-```js
-/**
- * Показывает уведомление, пропадающее через 1.5 сек
- * 
- * @param options.top {number} вертикальный отступ, в px
- * @param options.right {number} правый отступ, в px
- * @param options.cssText {string} строка стиля
- * @param options.className {string} CSS-класс 
- * @param options.html {string} HTML-текст для показа
- */
-function showNotification(options) {
-  // ваш код
-}
-```
-
-Пример использования:
-
-```js
-// покажет элемент с текстом "Привет" и классом welcome справа-сверху окна
-showNotification({
-  top: 10,
-  right: 10,
-  html: "Привет",
-  className: "welcome"
-});
-```
-
-[demo src="solution"]
-
-Элемент уведомления должен иметь CSS-класс `notification`, к которому добавляется класс из `options.className`, если есть. Исходный документ содержит готовые стили.
-
-
-
diff --git a/2-ui/1-document/14-styles-and-classes/article.md b/2-ui/1-document/14-styles-and-classes/article.md
deleted file mode 100644
index ad9b8893..00000000
--- a/2-ui/1-document/14-styles-and-classes/article.md
+++ /dev/null
@@ -1,319 +0,0 @@
-# Стили, getComputedStyle
-
-Эта глава -- о свойствах стиля, получении о них информации и изменении при помощи JavaScript.
- 	 	
-Перед прочтением убедитесь, что хорошо знакомы с [блочной моделью CSS](http://www.w3.org/TR/CSS2/box.html) и понимаете, что такое `padding`, `margin`, `border`.
- 	 	
-[cut]
-
-## Стили элемента: свойство style   
-
-Объект `element.style` дает доступ к стилю элемента на чтение и запись.
-
-С его помощью можно изменять большинство CSS-свойств, например `element.style.width="100px"` работает так, как будто у элемента в атрибуте прописано `style="width:100px"`. 
-
-[warn header="Единицы измерения обязательны в `style`"]
-Об этом иногда забывают, но в `style` так же, как и в CSS, нужно указывать единицы измерения, например `px`.
-
-Ни в коем случае не просто `elem.style.width = 100` -- работать не будет.
-[/warn]
-
-**Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:**
-
-```js
-//+ no-beautify
-background-color  => elem.style.backgroundColor
-z-index           => elem.style.zIndex
-border-left-width => elem.style.borderLeftWidth
-```
-
-Пример использования `style`:
-
-```js
-//+ run
-document.body.style.backgroundColor = prompt('background color?', 'green');
-```
-
-[warn header="`style.cssFloat` вместо `style.float`"]
-Исключением является свойство `float`. В старом стандарте JavaScript слово `"float"` было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется не `elem.style.float`, а `elem.style.cssFloat`.
-[/warn]
-
-[smart header="Свойства с префиксами"]
-Специфические свойства браузеров, типа `-moz-border-radius`, `-webkit-border-radius`, записываются следующим способом:
-
-```js
-button.style.MozBorderRadius = '5px';
-button.style.WebkitBorderRadius = '5px';
-```
-
-То есть, каждый дефис даёт большую букву.
-[/smart]
-
-**Чтобы сбросить поставленный стиль, присваивают в `style` пустую строку: `elem.style.width=""`.**
-
-При сбросе свойства `style` стиль будет взят из CSS.
-
-Например, для того, чтобы спрятать элемент, можно присвоить: `elem.style.display = "none"`. 
-
-А вот чтобы показать его обратно -- не обязательно явно указывать другой `display`, наподобие `elem.style.display = "block"`. Можно просто снять поставленный стиль: `elem.style.display = ""`.
-
-```js
-//+ run
-// если запустить этот код, то <body> "мигнёт"
-document.body.style.display = "none";
-
-setTimeout(function() {
-  document.body.style.display = "";
-}, 1000);
-```
-
-**Стиль в `style` находится в формате браузера, а не в том, в котором его присвоили.**
-
-Например:
-
-```html
-<!--+ run height=100 -->
-<body>
-  <script>
-*!*
-    document.body.style.margin = '20px';
-    alert( document.body.style.marginTop ); // 20px! 
-*/!*
-
-*!*
-    document.body.style.color = '#abc';
-    alert( document.body.style.color ); // rgb(170, 187, 204) 
-*/!*
-  </script>
-</body>
-```
-
-Обратите внимание на то, как браузер "распаковал" свойство `style.margin`, предоставив для чтения `style.marginTop`. То же самое произойдет и для `border`, `background` и т.д.
-
-
-[warn header="Свойство `style` мы используем лишь там, где не работают классы"]
-В большинстве случаев внешний вид элементов задаётся классами. А JavaScript добавляет или удаляет их. Такой код красив и гибок, дизайн можно легко изменять.
-
-Свойство `style` нужно использовать лишь там, где классы  не подходят, например если точное значение цвета/отступа/высоты вычисляется в JavaScript.
-[/warn]
-
-
-### Строка стилей style.cssText   
-
-Свойство `style` является специальным объектом, ему нельзя присваивать строку. 
-
-Запись `div.style="color:blue"` работать не будет. Но как же, всё-таки, поставить свойство стиля, если хочется задать его строкой?
-
-Можно попробовать использовать атрибут: `elem.setAttribute("style", ...)`, но самым правильным и, главное, кросс-браузерным (с учётом старых IE) решением такой задачи будет использование свойства `style.cssText`. 
-
-**Свойство `style.cssText` позволяет поставить стиль целиком в виде строки.**
-
-Например:
-
-```html
-<!--+ run -->
-<div>Button</div>
-
-<script>
-  var div = document.body.children[0];
- 
-  div.style.cssText="*!*color: red !important;*/!* \
-    background-color: yellow; \
-    width: 100px; \
-    text-align: center; \
-    *!*blabla: 5; \*/!*
-  ";
-
-  alert(div.style.cssText);
-</script>
-```
-
-Браузер разбирает строку `style.cssText` и применяет известные ему свойства. Неизвестные, наподобие `blabla`, большинство браузеров просто проигнорируют.
-
-**При установке `style.cssText` все предыдущие свойства `style` удаляются.** 
-
-Итак, `style.cssText` осуществляет полную перезапись `style`. Если же нужно заменить какое-то конкретно свойство стиля, то обращаются именно к нему: `style.color`, `style.width` и т.п, чтобы не затереть что-то важное по ошибке. 
-
-Свойство `style.cssText` используют, например, для новосозданных элементов, когда старых стилей точно нет.
-
-### Чтение стиля из style
-
-Записать в стиль очень просто. А как прочитать?
-
-Например, мы хотим узнать размер, отступы элемента, его цвет... Как это сделать?
-
-**Свойство `style` содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.**
-
-Вот так `style` уже ничего не увидит:
-
-```html
-<!--+ run height=100  no-beautify -->
-<head>
-  <style> body { color: red; margin: 5px } </style>
-</head>
-<body>
-
-  Красный текст
-  <script> 
-*!*
-    alert(document.body.style.color); //в большинстве браузеров
-    alert(document.body.style.marginTop); //  ничего не выведет
-*/!*
-  </script>
-</body>
-```
-
-## Полный стиль из getComputedStyle   
-
-Итак, свойство `style` дает доступ только к той информации, которая хранится в `elem.style`. 
-
-Он не скажет ничего об отступе, если он появился в результате наложения CSS или встроенных стилей браузера:
-
-А если мы хотим, например, сделать анимацию и плавно увеличивать `marginTop` от текущего значения? Как нам сделать это? Ведь для начала нам надо это текущее значение получить.
-
-**Для того, чтобы получить текущее используемое значение свойства, используется метод `window.getComputedStyle`, описанный в стандарте <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2</a>.**
-
-Его синтаксис таков:
-
-```js
-getComputedStyle(element[, pseudo])
-```
-
-<dl>
-<dt>element</dt>
-<dd>Элемент, значения для которого нужно получить</dd>
-<dt>pseudo</dt>
-<dd>Указывается, если нужен стиль псевдо-элемента, например `"::before"`. Пустая строка или отсутствие аргумента означают сам элемент.</dd>
-</dl>
-
-Поддерживается всеми браузерами, кроме IE8-. Следующий код будет работать во всех не-IE браузерах и в IE9+:
-
-```html
-<!--+ run height=100 -->
-<style>
-  body {
-    margin: 10px
-  }
-</style>
-
-<body>
-
-  <script>
-    var computedStyle = getComputedStyle(document.body);
-    alert( computedStyle.marginTop ); // выведет отступ в пикселях
-    alert( computedStyle.color ); // выведет цвет
-  </script>
-
-</body>
-```
-
-[smart header="Вычисленное (computed) и окончательное (resolved) значения"]
-В CSS есть две концепции:
-<ol>
-<li>*Вычисленное* (computed) значение -- это то, которое получено после применения всех правил CSS и CSS-наследования. Например, `width: auto` или `font-size: 125%`.</li>
-<li>*Окончательное* ([resolved](http://dev.w3.org/csswg/cssom/#resolved-values)) значение -- непосредственно применяемое к элементу. При этом все размеры приводятся к пикселям, например `width: 212px` или `font-size: 16px`. В некоторых браузерах пиксели могут быть дробными.</li>
-</ol>
-Когда-то `getComputedStyle` задумывалось для возврата вычисленного значения, но со временем оказалось, что окончательное гораздо удобнее. 
-
-Поэтому сейчас в целом все значения возвращаются именно окончательные, кроме некоторых небольших глюков в браузерах, которые постепенно вычищаются.
-[/smart]
-
-[warn header="`getComputedStyle` требует полное свойство!"]
-Для правильного получения значения нужно указать точное свойство. Например: `paddingLeft`, `marginTop`, `borderLeftWidth`.
-
-**При обращении к сокращенному: `padding`, `margin`, `border` -- правильный результат не гарантируется.**
-
-Действительно, допустим свойства `paddingLeft/paddingTop` взяты из разных классов CSS. Браузер не обязан объединять их в одно свойство `padding`. Иногда, в простейших случаях, когда свойство задано сразу целиком, `getComputedStyle`  сработает для сокращённого свойства, но не во всех браузерах. 
-
-Например, некоторые браузеры (Chrome) выведут `10px` в документе ниже, а некоторые (Firefox) -- нет:
-
-```html
-<!--+ run -->
-<style>
-  body {
-    margin: 10px;
-  }
-</style>
-<script>
-  var style = getComputedStyle(document.body);
-  alert( style.margin ); // в Firefox пустая строка
-</script>
-```
-
-[/warn]
-
-
-[smart header="Стили посещенных ссылок -- тайна!"]
-У посещенных ссылок может быть другой цвет, фон, чем у обычных. Это можно поставить в CSS с помощью псевдокласса `:visited`. 
-
-Но `getComputedStyle` не дает доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку. 
-
-Кроме того, большинство браузеров запрещают применять к `:visited` CSS-стили, которые могут изменить геометрию элемента, чтобы даже окольным путем нельзя было это понять. В целях безопасности. 
-[/smart]
-
-## currentStyle для IE8-
-
-В IE8- нет `getComputedStyle`, но у элементов есть свойство <a href="http://msdn.microsoft.com/en-us/library/ms536497.aspx">currentStyle</a>, которое возвращает вычисленное (computed) значение: уже с учётом CSS-каскада, но не всегда в окончательном формате.
-
-Чтобы код работал и в старых и новых браузерах, обычно пишут кросс-браузерный код, наподобие такого:
-
-```js
-function getStyle(elem) {
-  return window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
-}
-```
-
-Если вы откроете такой документ в IE8-, то размеры будут в процентах, а в современных браузерах -- в пикселях.
-
-```html
-<!--+ run height=100 -->
-<style>
-  body {
-    margin: 10%
-  }
-</style>
-
-<body>
-  <script>
-    var elem = document.body;
-
-    function getStyle(elem) {
-      return window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
-    }
-
-    var marginTop = getStyle(elem).marginTop;
-    alert( marginTop ); // IE8-: 10%, иначе пиксели
-  </script>
-</body>
-```
-
-[smart header="IE8-: перевод `pt,em,%` из `currentStyle` в пиксели"]
-Эта информация -- дополнительная, она не обязательна для освоения.
-
-В IE для того, чтобы получить из процентов реальное значение в пикселях существует метод "runtimeStyle+pixel", [описанный Дином Эдвардсом](http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291).
-
-Он основан на свойствах `runtimeStyle` и `pixelLeft`, работающих только в IE.
-
-В [edit src="getiecomputedstyle"]песочнице[/edit] вы можете найти функцию `getIEComputedStyle(elem, prop)`, которая получает значение в пикселях для свойства `prop`, используя `elem.currentStyle` и метод Дина Эдвардса, и пример её применения.
-
-Если вам интересно, как он работает, ознакомьтесь со свойствами с <a href="http://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">runtimeStyle</a> и <a href="http://msdn.microsoft.com/en-us/library/ms531129%28VS.85%29.aspx">pixelLeft</a> в MSDN и раскройте код.
-
-Конечно, это актуально только для IE8- и полифиллов.
-[/smart]
-
-
-## Итого
-
-Все DOM-элементы предоставляют следующие свойства.
-
-<ul>
-<li>Свойство `style` -- это объект, в котором CSS-свойства пишутся `вотТакВот`. Чтение и изменение его свойств -- это, по сути, работа с компонентами атрибута `style`.</li>
-<li>`style.cssText` -- строка стилей для чтения или записи. Аналог полного атрибута `style`.</li>
-
-<li>Свойство `currentStyle`(IE8-) и метод `getComputedStyle` (IE9+, стандарт) позволяют получить реальное, применённое сейчас к элементу свойство стиля с учётом CSS-каскада и браузерных стилей по умолчанию.
-
-При этом `currentStyle` возвращает значение из CSS, до окончательных вычислений, а `getComputedStyle` -- окончательное, непосредственно применённое к элементу (как правило).</li>
-</ul>
-
-Более полная информация о свойстве `style`, включающая другие, реже используемые методы работы с ним, доступна [в документации](https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration).
-
diff --git a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js b/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js
deleted file mode 100644
index 12a7e04c..00000000
--- a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js
+++ /dev/null
@@ -1,18 +0,0 @@
-function getIEComputedStyle(elem, prop) {
-  var value = elem.currentStyle[prop] || 0;
-
-  // we use 'left' property as a place holder so backup values
-  var leftCopy = elem.style.left;
-  var runtimeLeftCopy = elem.runtimeStyle.left;
-
-  // assign to runtimeStyle and get pixel value
-  elem.runtimeStyle.left = elem.currentStyle.left;
-  elem.style.left = (prop === "fontSize") ? "1em" : value;
-  value = elem.style.pixelLeft + "px";
-
-  // restore values for left
-  elem.style.left = leftCopy;
-  elem.runtimeStyle.left = runtimeLeftCopy;
-
-  return value;
-}
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html b/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html
deleted file mode 100644
index a757f39f..00000000
--- a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <script src="getiecomputedstyle.js"></script>
-</head>
-
-<body>
-
-  <style>
-    #margin-test {
-      margin: 1%;
-      border: 1px solid black;
-    }
-  </style>
-
-  <div id="margin-test">Тестовый элемент с margin 1%</div>
-
-  <script>
-    var elem = document.getElementById('margin-test');
-    if (!window.getComputedStyle) { // старые IE
-      document.write(getIEComputedStyle(elem, 'marginTop'));
-    } else {
-      document.write('Пример работает только в IE8-');
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md
deleted file mode 100644
index 4d84cf8f..00000000
--- a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Решение: `elem.scrollHeight - elem.scrollTop - elem.clientHeight`.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md
deleted file mode 100644
index d2684e18..00000000
--- a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Найти размер прокрутки снизу
-
-[importance 5]
-
-Свойство `elem.scrollTop` содержит размер прокрученной области при отсчете сверху. А как подсчитать размер прокрутки снизу?
-
-Напишите соответствующее выражение для произвольного элемента `elem`. 
-
-Проверьте: если прокрутки нет вообще или элемент полностью прокручен -- оно должно давать ноль.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md b/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md
deleted file mode 100644
index 9cb7a82d..00000000
--- a/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md
+++ /dev/null
@@ -1,23 +0,0 @@
-Создадим элемент с прокруткой, но без `border` и `padding`. Тогда разница между его полной шириной `offsetWidth` и внутренней `clientWidth` будет равна как раз прокрутке:
-
-```js
-//+ run
-// создадим элемент с прокруткой
-var div = document.createElement('div');
-
-div.style.overflowY = 'scroll';
-div.style.width = '50px';
-div.style.height = '50px';
-
-// при display:none размеры нельзя узнать
-// нужно, чтобы элемент был видим, 
-// visibility:hidden - можно, т.к. сохраняет геометрию
-div.style.visibility = 'hidden';
-
-document.body.appendChild(div);
-var scrollWidth = div.offsetWidth - div.clientWidth;
-document.body.removeChild(div);
-
-alert( scrollWidth );
-```
-
diff --git a/2-ui/1-document/15-metrics/2-scrollbar-width/task.md b/2-ui/1-document/15-metrics/2-scrollbar-width/task.md
deleted file mode 100644
index 77867ac8..00000000
--- a/2-ui/1-document/15-metrics/2-scrollbar-width/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Узнать ширину полосы прокрутки
-
-[importance 3]
-
-Напишите код, который возвращает ширину стандартной полосы прокрутки. Именно самой полосы, где ползунок. Обычно она равна `16px`, в редких и мобильных браузерах может колебаться от `14px` до `18px`, а кое-где даже равна `0px`.
-
-P.S. Ваш код должен работать на любом HTML-документе, независимо от его содержимого.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/solution.md b/2-ui/1-document/15-metrics/3-div-placeholder/solution.md
deleted file mode 100644
index aa685293..00000000
--- a/2-ui/1-document/15-metrics/3-div-placeholder/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Нам нужно создать `div` с такими же размерами и вставить его на место "переезжающего".
-
-Один из вариантов -- это просто клонировать элемент.
-
-Если делать это при помощи `div.cloneNode(true)`, то склонируется все содержимое, которого может быть много. Обычно нам это не нужно, поэтому можно использовать `div.cloneNode(false)` для клонирования элемента со стилями, и потом поправить его `width/height`. 
-
-Можно и просто создать новый `div` и поставить ему нужные размеры. 
-
-**Всё, кроме `margin`, можно получить из свойств DOM-элемента, а `margin` -- только через `getComputedStyle`.**
-
-Причём `margin` мы обязаны поставить, так как иначе наш элемент при вставке будет вести себя иначе, чем исходный.
-
-Код:
-
-```js
-var div = document.getElementById('moving-div');
-
-var placeHolder = document.createElement('div');
-placeHolder.style.height = div.offsetHeight + 'px';
-// можно и width, но в этом примере это не обязательно
-
-// IE || другой браузер
-var computedStyle = div.currentStyle || getComputedStyle(div, '');
-
-placeHolder.style.marginTop = computedStyle.marginTop; // (1)
-placeHolder.style.marginBottom = computedStyle.marginBottom;
-```
-
-В строке `(1)` использование полного название свойства `"marginTop"` гарантирует, что полученное значение будет корректным.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html b/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html
deleted file mode 100755
index fd8f91f0..00000000
--- a/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #moving-div {
-      border: 5px groove green;
-      padding: 5px;
-      margin: 10px;
-      background-color: yellow;
-    }
-  </style>
-</head>
-
-<body>
-
-  Before Before Before
-
-  <div id="moving-div">
-    Text Text Text
-    <br> Text Text Text
-    <br>
-  </div>
-
-  After After After
-
-  <script>
-    var div = document.getElementById('moving-div')
-
-    var placeHolder = document.createElement('div')
-    placeHolder.style.height = div.offsetHeight + 'px'
-
-    var computedStyle = div.currentStyle || getComputedStyle(div, null)
-
-    placeHolder.style.marginTop = computedStyle.marginTop // full prop name
-    placeHolder.style.marginBottom = computedStyle.marginBottom
-
-    // highlight it for demo purposes 
-    placeHolder.style.backgroundColor = '#C0C0C0'
-
-    document.body.insertBefore(placeHolder, div)
-
-    div.style.position = 'absolute'
-    div.style.right = div.style.top = 0
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html b/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html
deleted file mode 100755
index 69e3e504..00000000
--- a/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #moving-div {
-      border: 5px groove green;
-      background-color: yellow;
-      padding: 5px;
-      margin: 10px;
-    }
-  </style>
-</head>
-
-<body>
-
-  Before Before Before
-
-  <div id="moving-div">
-    Text Text Text
-    <br> Text Text Text
-    <br>
-  </div>
-
-  After After After
-
-  <script>
-    // .. Add your code here 
-
-    var div = document.getElementById('moving-div')
-    div.style.position = 'absolute'
-    div.style.right = div.style.top = 0
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/task.md b/2-ui/1-document/15-metrics/3-div-placeholder/task.md
deleted file mode 100644
index 3fa0528f..00000000
--- a/2-ui/1-document/15-metrics/3-div-placeholder/task.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Подменить div на другой с таким же размером
-
-[importance 3]
-
-Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал `div` с зелеными границами:
-
-```html
-<!--+ run  no-beautify -->
-<style> 
-  #moving-div { 
-    border: 5px groove green; 
-    padding: 5px; 
-    margin: 10px;
-    background-color: yellow;
-  }
-</style>
-
-Before Before Before
-
-<div id="moving-div">
-Text Text Text<br>
-Text Text Text<br>
-</div>
-
-After After After
-```
-
-Программист Валера из вашей команды написал код, который позиционирует его абсолютно и смещает в правый верхний угол. Вот этот код:
-
-```js
-var div = document.getElementById('moving-div');
-div.style.position = 'absolute';
-div.style.right = div.style.top = 0;
-```
-
-Побочным результатом явилось смещение текста, который раньше шел после `DIV`. Теперь он поднялся вверх:
-[iframe height=90 src="source"]
-
-**Допишите код Валеры, сделав так, чтобы текст оставался на своем месте после того, как `DIV` будет смещен.**
-
-Сделайте это путем создания вспомогательного `DIV` с теми же `width`, `height`, `border`, `margin`, `padding`, что и у желтого `DIV`. 
-
-Используйте только JavaScript, без CSS.
-
-Должно быть так (новому блоку задан фоновый цвет для демонстрации):
-
-[iframe height=140 src="solution"]
-
-
-
-
-
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
deleted file mode 100755
index 23b8d7b2..00000000
--- a/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #field {
-      width: 200px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-    }
-    
-    #ball {
-      position: absolute;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-  <script>
-    var ball = document.getElementById('ball')
-    var field = document.getElementById('field')
-
-    // ball.offsetWidth=0 before image loaded!
-    // to fix: set width
-    ball.style.left = Math.round(field.clientWidth / 2) + 'px'
-    ball.style.top = Math.round(field.clientHeight / 2) + 'px'
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png b/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png
deleted file mode 100755
index eea8c171..00000000
Binary files a/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md
deleted file mode 100644
index 07ccdf60..00000000
--- a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md
+++ /dev/null
@@ -1,51 +0,0 @@
-При абсолютном позиционировании мяча внутри поля его координаты `left/top` отсчитываются от **внутреннего** угла поля, например верхнего-левого:
-
-<img src="field.png">
-
-Метрики для внутренней зоны поля -- это `clientWidth/Height`.
-
-Центр - это `(clientWidth/2, clientHeight/2)`. 
-
-Но если мы установим мячу такие значения `ball.style.left/top`, то в центре будет не сам мяч, а его левый верхний угол:
-
-```js
-var ball = document.getElementById('ball');
-var field = document.getElementById('field');
-
-ball.style.left = Math.round(field.clientWidth / 2) + 'px';
-ball.style.top = Math.round(field.clientHeight / 2) + 'px';
-```
-
-[iframe hide="Нажмите, чтобы посмотреть текущий результат" height=180 src="ball-half"]
-
-Для того, чтобы центр мяча находился в центре поля, нам нужно сместить мяч на половину его ширины влево и на половину его высоты вверх.
-
-```js
-var ball = document.getElementById('ball');
-var field = document.getElementById('field');
-
-ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
-ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
-```
-
-**Внимание, подводный камень!**
-
-Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
-
-```html
-<img src="ball.png" id="ball">
-```
-
-**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.** 
-
-После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ -- он ничего не знает о картинке, поэтому значение `ball.offsetWidth` равно `0`. Вычислить координаты невозможно.
-
-Чтобы это исправить, добавим `width/height` к картинке:
-
-```html
-<img src="ball.png" *!*width="40" height="40"*/!* id="ball">
-```
-
-Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.
-
-[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html
deleted file mode 100755
index 47694b5a..00000000
--- a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #field {
-      width: 200px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-    }
-    
-    #ball {
-      position: absolute;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-  <script>
-    var ball = document.getElementById('ball')
-    var field = document.getElementById('field')
-
-    // ball.offsetWidth=0 before image loaded! 
-    // to fix: set width
-    ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
-    ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
deleted file mode 100755
index 8b54beed..00000000
--- a/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #field {
-      width: 200px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-    }
-    
-    #ball {
-      position: absolute;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md b/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md
deleted file mode 100644
index 305acfb8..00000000
--- a/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Поместите мяч в центр поля
-
-[importance 5]
-
-Поместите мяч в центр поля.
-
-Исходный документ выглядит так:
-[iframe src="source" edit link height=180]
-
-**Используйте JavaScript, чтобы поместить мяч в центр:**
-[iframe src="solution" height=180]
-
-<ul>
-<li>Менять CSS нельзя, мяч должен переносить в центр ваш скрипт, через установку нужных стилей элемента.</li>
-<li>JavaScript-код должен работать при разных размерах мяча (`10`, `20`, `30` пикселей) без изменений.</li>
-<li>JavaScript-код должен работать при различных размерах и местоположениях поля на странице без изменений. Также он не должен зависеть от ширины рамки поля `border`.</li>
-</ul>
-
-P.S. Да, центрирование можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будут другие темы и более сложные ситуации, когда JavaScript будет уже точно необходим, это -- своего рода "разминка".
diff --git a/2-ui/1-document/15-metrics/5-expand-element/solution.md b/2-ui/1-document/15-metrics/5-expand-element/solution.md
deleted file mode 100644
index a8b2e2ec..00000000
--- a/2-ui/1-document/15-metrics/5-expand-element/solution.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Решение через width: auto
-
-Вначале рассмотрим решение через "умную" установку CSS-свойства.
-
-Они могут быть разными. Самое простое выглядит так:
-
-```js
-elem.style.width = 'auto';
-```
-
-Такой способ работает, так как `<div>` по умолчанию распахивается на всю ширину. 
-
-Конечно, такое решение не будет работать для элементов, которые сами по себе не растягиваются, например в случае со `<span>` или при наличии `position: absolute`.
-
-Обратим внимание, такой вариант был бы неверен:
-```js
-elem.style.width = '100%';
-```
-
-По умолчанию в CSS ширина `width` -- это то, что *внутри `padding`*, а проценты отсчитываются от ширины родителя. То есть, ставя ширину в `100%`, мы говорим: "внутренняя область должна занимать `100%` ширины родителя". А в элементе есть ещё `padding`, которые в итоге вылезут наружу.
-
-Можно бы поменять блочную модель, указав `box-sizing` через свойство `elem.style.boxSizing`, но такое изменение потенциально может затронуть много других свойств, поэтому нежелательно.
-
-# Точное вычисление 
-
-Альтернатива -- вычислить ширину родителя через `clientWidth`.
-
-Доступную внутреннюю ширину родителя можно получить, вычитая из `clientWidth` размеры `paddingLeft/paddingRight`, и затем присвоить её элементу:
-
-```js
-var bodyClientWidth = document.body.clientWidth;
-
-var style = getComputedStyle(elem);
-
-*!*
-var bodyInnerWidth = bodyClientWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
-*/!*
-
-elem.style.width = bodyInnerWidth + 'px';
-```
-
-Такое решение будет работать всегда, вне зависимости от типа элемента. Конечно, при изменении размеров окна браузера ширина не адаптируется к новому размеру автоматически, как с `width:auto`. Это недостаток. Его, конечно, тоже можно обойти при помощи событий (изучим далее), но как общий рецепт -- если CSS может решить задачу -- лучше использовать CSS.
-
diff --git a/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html b/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
deleted file mode 100755
index 6c51d6ad..00000000
--- a/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #elem {
-      width: 200px;
-      height: 150px;
-      background-color: red;
-      padding: 20px;
-      overflow: auto;
-      /* position: absolute */
-    }
-    
-    body {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="elem">
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст
-  </div>
-
-  <script>
-    var elem = document.getElementById("elem");
-
-    // неверно!
-    //elem.style.width = '100%';
-
-    // верно (так как обычный div по умолчанию растягивается во всю ширину)
-    //elem.style.width = 'auto';
-
-    // верно (решение с JS)
-    var bodyWidth = document.body.clientWidth;
-
-    var style = getComputedStyle(elem);
-
-    var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
-
-    elem.style.width = bodyInnerWidth + 'px';
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html b/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html
deleted file mode 100755
index 4bfe7fee..00000000
--- a/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #elem {
-      width: 200px;
-      height: 150px;
-      background-color: red;
-      padding: 20px;
-      overflow: auto;
-    }
-    
-    body {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="elem">
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст
-  </div>
-
-  <script>
-    var elem = document.getElementById("elem");
-
-    // ... ваш код
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/5-expand-element/task.md b/2-ui/1-document/15-metrics/5-expand-element/task.md
deleted file mode 100644
index 88d72e2f..00000000
--- a/2-ui/1-document/15-metrics/5-expand-element/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Расширить элемент
-
-[importance 4]
-
-В `<body>` есть элемент `<div>` с заданной шириной `width`. 
-
-Задача -- написать код, который "распахнет" `<div>` по ширине на всю страницу.
-
-Исходный документ (`<div>` содержит текст и прокрутку): 
-[iframe height=220 src="source"]
-
-P.S. Пользоваться следует исключительно средствами JS, CSS в этой задаче менять нельзя. Также ваш код должен быть универсален и не ломаться, если цифры в CSS станут другими.
-
-P.P.S. При расширении элемент `<div>` не должен вылезти за границу `<body>`.
-
diff --git a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md
deleted file mode 100644
index c1e83eff..00000000
--- a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Отличия:
-
-<ol>
-<li>`getComputedStyle` не работает в IE8-.</li>
-<li>`clientWidth` возвращает число, а `getComputedStyle(...).width` -- строку, на конце `px`.</li>
-<li>`getComputedStyle` не всегда даст ширину, он может вернуть, к примеру, `"auto"` для инлайнового элемента.</li> 
-<li>`clientWidth` соответствует внутренней видимой области элемента, *включая `padding`, а CSS-ширина `width` при стандартном значении `box-sizing` соответствует зоне *внутри `padding`*.</li>
-<li>Если есть полоса прокрутки, то некоторые браузеры включают её ширину в `width`, а некоторые -- нет. 
-
-Свойство `clientWidth`, с другой стороны, полностью кросс-браузерно. Оно всегда обозначает размер *за вычетом прокрутки*, т.е. реально доступный для содержимого.</li>
-</ol>
diff --git a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md
deleted file mode 100644
index 582a2473..00000000
--- a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# В чём отличие "width" и "clientWidth" ?
-
-[importance 5]
-
-В чём отличия между `getComputedStyle(elem).width` и `elem.clientWidth`?
-
-Укажите хотя бы три отличия, лучше -- больше.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/article.md b/2-ui/1-document/15-metrics/article.md
deleted file mode 100644
index 39f78ae3..00000000
--- a/2-ui/1-document/15-metrics/article.md
+++ /dev/null
@@ -1,317 +0,0 @@
-# Размеры и прокрутка элементов 
-
-Для того, чтобы показывать элементы на произвольных местах страницы, необходимо во-первых, знать CSS-позиционирование, а во-вторых -- уметь работать с "геометрией элементов" из JavaScript.
-
-В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и *метриках* -- различных свойствах, которые содержат эту информацию.
-
-[cut]
-
-## Образец документа
-
-Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:
-
-```html
-<!--+ no-beautify -->
-<div id="example">
-  ...Текст...
-</div>
-<style>
-  #example {
-    width: 300px;
-
-    height: 200px;
-
-    border: 25px solid #E8C48F; /* рамка 25px */
-
-    padding: 20px;              /* поля 20px */
-
-    overflow: auto;             /* прокрутка */
-  }
-</style>
-```
-
-У него нет отступов `margin`, в этой главе они не важны, так как метрики касаются именно размеров самого элемента, отступы в них не учитываются.
-
-Результат выглядит так:
-
-<img src="metric-css.png">
-
-Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
-
-[smart header="Внимание, полоса прокрутки!"]
-В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.
-
-В этом случае полоса прокрутки "отодвигает" содержимое вместе с `padding` влево, отбирая у него место.
-
-Именно поэтому ширина содержимого обозначена как `content width` и равна `284px`, а не `300px`, как в CSS. 
-
-Точное значение получено в предположении, что ширина полосы прокрутки равна `16px`, то есть после её вычитания на содержимое остаётся `300 - 16 = 284px`. Конечно, она сильно зависит от браузера, устройства, ОС.
-
-Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.
-[/smart]
-
-[smart header="Поле `padding` заполнено текстом"]
-Обычно поля `padding` изображают пустыми, но так как текста много, то он заполняет нижнее поле `padding-bottom` в примере выше. 
-
-Во избежание путаницы заметим, что `padding` там, всё же, есть. Поля `padding` по CSS в элементе выше одинаковы со всех сторон. А такое заполнение -- нормальное поведение браузера.
-[/smart]
-
-## Метрики
-
-У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их "метриками".
-
-Метрики, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.
-
-Вот общая картина:
-
-
-<img src="metric-all.png">
-
-На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
-
-Будем исследовать их снаружи элемента и вовнутрь.
-
-
-## offsetParent, offsetLeft/Top
-
-Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже. 
-
-Несмотря на то, что эти свойства нужны реже всего, они -- самые "внешние", поэтому начнём с них.
-
-**В `offsetParent` находится ссылка на родительский элемент в смысле отображения на странице.**
-
-Уточним, что имеется в виду.
-
-Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря "дерево геометрии" или "дерево рендеринга", которое содержит всю информацию о размерах.
-
-При этом одни элементы естественным образом рисуются внутри других. Но, к примеру, если у элемента стоит `position:absolute`, то его расположение вычисляется уже не относительно непосредственного родителя `parentNode`, а относительно ближайшего <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">позиционированного элемента</a> (т.е. свойство `position` которого не равно `static`), или `BODY`, если такой отсутствует. 
-
-Получается, что элемент имеет в дополнение к обычному родителю в DOM -- ещё одного "родителя по позиционированию", то есть относительно которого он рисуется. Этот элемент и будет в свойстве `offsetParent`.
-
-**Свойства `offsetLeft/Top` задают смещение относительно `offsetParent`.**
-
-В примере ниже внутренний `<div>` имеет DOM-родителя `<form>`, но `offsetParent` у него `<main>`, и сдвиги относительно его верхнего-левого угла будут в `offsetLeft/Top`:
-
-```html
-<main style="position: relative">
-  <form>
-    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
-  </form>
-</main>
-```
-
-<img src="metric-offset-parent.png">
-
-## offsetWidth/Height
-
-Теперь переходим к самому элементу.
-
-Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
-
-<img src="metric-offset-width-height.png">
-
-Для нашего элемента:
-<ul>
-<li>`offsetWidth = 390` -- внешняя ширина блока, её можно получить сложением CSS-ширины (`300px`, но её часть на рисунке выше отнимает прокрутка, поэтому `284 + 16`), полей(`2*20px`) и рамок (`2*25px`).</li>
-<li>`offsetHeight = 290` -- внешняя высота блока.</li>
-</ul>
-
-
-[smart header="Метрики для невидимых элементов равны нулю."]
-
-Координаты и размеры в JavaScript устанавливаются только для *видимых* элементов.
-
-Для элементов с `display:none` или находящихся вне документа дерево рендеринга не строится. Для них метрики равны нулю. Кстати, и `offsetParent` для таких элементов тоже `null`.
-
-**Это дает нам замечательный способ для проверки, виден ли элемент**:
-
-```js
-function isHidden(elem) {
-  return !elem.offsetWidth && !elem.offsetHeight;
-}
-```
-
-<ul>
-<li>Работает, даже если родителю элемента установлено свойство `display:none`.</li>
-<li>Работает для всех элементов, кроме `TR`, с которым возникают некоторые проблемы в разных браузерах. Обычно, проверяются не `TR`, поэтому всё ок.</li>
-<li>Считает элемент видимым, даже если позиционирован за пределами экрана или  имеет свойство `visibility:hidden`.</li>
-<li>"Схлопнутый" элемент, например пустой `div` без высоты и ширины, будет считаться невидимым.</li>
-</ul>
-[/smart]
-
-
-
-## clientTop/Left
-
-Далее внутри элемента у нас рамки `border`.
-
-Для них есть свойства-метрики `clientTop` и `clientLeft`.
-
-В нашем примере:
-<ul>
-<li>`clientLeft = 25` -- ширина левой рамки</li>
-<li>`clientTop = 25` -- ширина верхней рамки</li>
-</ul>
-
-<img src="metric-client-left-top.png">
-
-...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
-
-В чём же разница? 
-
-Она возникает тогда, когда документ располагается *справа налево* (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство `clientLeft` включает в себя еще и ширину полосы прокрутки.
-
-Получится так:
-
-<img src="metric-client-left-top-rtl.png">
-
-
-## clientWidth/Height
-
-Эти свойства -- размер элемента внутри рамок `border`. 
-
-Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
-
-<img src="metric-client-width-height.png">
-
-На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-высота `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
-
-На рисунке  нижний `padding` заполнен текстом, но это неважно: по правилам он всегда входит в `clientHeight`.
-
-Теперь `clientWidth` -- ширина содержимого здесь не равна CSS-ширине, её часть "съедает" полоса прокрутки. 
-Поэтому в `clientWidth` входит не CSS-ширина, а реальная ширина содержимого `284px` плюс левое и правое поля `padding` (по `20px`), итого `324px`.
-
-
-**Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
-
-<img src="metric-client-width-nopadding.png">
-
-Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
-
-## scrollWidth/Height
-
-Эти свойства -- аналоги `clientWidth/clientHeight`, но с учетом прокрутки.
-
-Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
-
-<img src="metric-scroll-width-height.png">
-
-На рисунке выше:
-<ul>
-<li>`scrollHeight = 723` -- полная внутренняя высота, включая прокрученную область.</li>
-<li>`scrollWidth = 324` -- полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна `clientWidth`.</li>
-</ul>
-
-Эти свойства можно использовать, чтобы "распахнуть" элемент на всю ширину/высоту, таким кодом:
-
-```js
-element.style.height = element.scrollHeight + 'px';
-```
-
-[online]
-[pre no-typography]
-Нажмите на кнопку, чтобы распахнуть элемент:
-
-<div id="scrollOpen" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
-
-<button style="padding:0" onclick="document.getElementById('scrollOpen').style.height = document.getElementById('scrollOpen').scrollHeight + 'px'">element.style.height = element.scrollHeight + 'px'</button>
-[/pre]
-[/online]
-
-## scrollLeft/scrollTop
-
-Свойства `scrollLeft/scrollTop` -- ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
-
-Следующее иллюстрация показывает значения `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
-
-<img src="metric-scroll-top.png">
-
-[smart header="`scrollLeft/scrollTop` можно изменять"]
-В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.
-
-[online]
-При клике на следующий элемент будет выполняться код `elem.scrollTop += 10`. Поэтому он будет прокручиваться на `10px` вниз:
-
-<div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Кликни<br>Меня<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
-[/online]
-[/smart]
-
-
-## Не стоит брать width/height из CSS
-
-Мы рассмотрели метрики -- свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.
-
-Теперь несколько слов о том, как *не* надо делать.
-
-Как мы знаем, CSS-высоту и ширину можно установить с помощью `elem.style` и извлечь, используя `getComputedStyle`, которые в подробностях обсуждаются в главе [](/styles-and-classes).
-
-Получение ширины элемента может быть таким:
-
-```js
-//+ run
-var elem = document.body;
-
-alert( getComputedStyle(elem).width ); // вывести CSS-ширину для elem
-```
-
-Не лучше ли получать ширину так, вместо метрик? Вовсе нет!
-
-<ol>
-<li>Во-первых, CSS-свойства `width/height` зависят от другого свойства -- `box-sizing`, которое определяет, что такое, собственно, эти ширина и высота. Получается, что изменение `box-sizing`, к примеру, для более удобной вёрстки, сломает такой JavaScript.</li>
-<li>Во-вторых, в CSS свойства `width/height` могут быть равны `auto`, например, для инлайн-элемента:
-
-```html
-<!--+ run -->
-<span id="elem">Привет!</span>
-
-<script>
-*!*
-  alert( getComputedStyle(elem).width ); // auto
-*/!*
-</script>
-```
-
-Конечно, с точки зрения CSS размер `auto`  -- совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина `width` из CSS вообще бесполезна.
-</li>
-</ol>
-
-Есть и ещё одна причина.
-
-Полоса прокрутки -- причина многих проблем и недопониманий. Как говорится, "дьявол кроется в деталях". Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал "глючить" с ней. 
-
-Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.
-
-Получается, что реальная ширина содержимого меньше CSS-ширины. И это учитывают свойства `clientWidth/clientHeight`.
-
-...Но при этом некоторые браузеры также учитывают это в результате `getComputedStyle(elem).width`, то есть возвращают реальную внутреннюю ширину, а некоторые -- именно CSS-свойство. Эти кросс-браузерные отличия -- ещё один повод не использовать такой подход, а использовать свойства-метрики.
-
-[online]
-Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
-
-[iframe src="cssWidthScroll" link border=1]
-
-У элемента с текстом в стилях указано `width:300px`.
-
-На момент написания этой главы при тестировании в Chrome под Windows `alert` выводил `283px`, а в Firefox -- `300px`. При этом оба браузера показывали прокрутку. Это из-за того, что Firefox возвращал именно CSS-ширину, а Chrome -- реальную ширину, за вычетом прокрутки. 
-[/online]
-
-Описанные разночтения касаются только чтения свойства `getComputedStyle(...).width` из JavaScript, визуальное отображение корректно в обоих случаях.
-
-## Итого
-
-У элементов есть следующие метрики:
-<ul>
-<li>`offsetParent` -- "родитель по дереву рендеринга" -- ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.</li>
-<li>`offsetLeft/offsetTop` -- позиция в пикселях левого верхнего угла блока, относительно его `offsetParent`.</li>
-<li>`offsetWidth/offsetHeight` -- "внешняя" ширина/высота блока, включая рамки.</li>
-<li>`clientLeft/clientTop` -- отступ области содержимого от левого-верхнего угла элемента. Если операционная система располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, если же слева (ОС на иврите, арабском), то `clientLeft` включает в себя прокрутку.
-</li>
-<li>`clientWidth/clientHeight` -- ширина/высота содержимого вместе с полями `padding`, но без полосы прокрутки.</li>
-<li>`scrollWidth/scrollHeight` -- ширина/высота содержимого, включая прокручиваемую область. Включает в себя `padding` и не включает полосы прокрутки.</li>
-<li>`scrollLeft/scrollTop` -- ширина/высота прокрученной части документа, считается от верхнего левого угла.</li>
-</ul>
-
-Все свойства, доступны только для чтения, кроме `scrollLeft/scrollTop`. Изменение этих свойств заставляет браузер прокручивать элемент.
-
-В этой главе мы считали, что страница находится в режиме соответствия стандартам. В режиме совместимости -- некоторые старые браузеры требуют `document.body` вместо `documentElement`, в остальном всё так же. Конечно, по возможности, стоит использовать только режим соответствия стандарту.
-
diff --git a/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html b/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
deleted file mode 100755
index a29f8a3a..00000000
--- a/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-    текст текст текст текст текст текст текст текст текст текст текст текст текст текст
-  </div>
-
-  <script>
-    // FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE8:200
-  </script>
-
-  У элемента стоит <code>style="width:300px"</code>
-  <br>
-
-  <button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-all.png b/2-ui/1-document/15-metrics/metric-all.png
deleted file mode 100644
index fb7c3b7b..00000000
Binary files a/2-ui/1-document/15-metrics/metric-all.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-all@2x.png b/2-ui/1-document/15-metrics/metric-all@2x.png
deleted file mode 100644
index bb10d86e..00000000
Binary files a/2-ui/1-document/15-metrics/metric-all@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png
deleted file mode 100644
index c934fb23..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png b/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png
deleted file mode 100644
index 4cc5b4a1..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top.png b/2-ui/1-document/15-metrics/metric-client-left-top.png
deleted file mode 100644
index b821043c..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top@2x.png b/2-ui/1-document/15-metrics/metric-client-left-top@2x.png
deleted file mode 100644
index afcdcdf8..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-height.png b/2-ui/1-document/15-metrics/metric-client-width-height.png
deleted file mode 100644
index e2112da6..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-height@2x.png b/2-ui/1-document/15-metrics/metric-client-width-height@2x.png
deleted file mode 100644
index 55168738..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-nopadding.png b/2-ui/1-document/15-metrics/metric-client-width-nopadding.png
deleted file mode 100644
index f715c8ff..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-nopadding.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png b/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png
deleted file mode 100644
index 316bec7b..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-css.png b/2-ui/1-document/15-metrics/metric-css.png
deleted file mode 100644
index d1a219ee..00000000
Binary files a/2-ui/1-document/15-metrics/metric-css.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-css@2x.png b/2-ui/1-document/15-metrics/metric-css@2x.png
deleted file mode 100644
index 28cde46d..00000000
Binary files a/2-ui/1-document/15-metrics/metric-css@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-parent.png b/2-ui/1-document/15-metrics/metric-offset-parent.png
deleted file mode 100644
index a9711549..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-parent.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-parent@2x.png b/2-ui/1-document/15-metrics/metric-offset-parent@2x.png
deleted file mode 100644
index df6799ef..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-parent@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-width-height.png b/2-ui/1-document/15-metrics/metric-offset-width-height.png
deleted file mode 100644
index 84c331e2..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png b/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png
deleted file mode 100644
index 6f3c9c53..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-top.png b/2-ui/1-document/15-metrics/metric-scroll-top.png
deleted file mode 100644
index b65a6406..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-top.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-top@2x.png b/2-ui/1-document/15-metrics/metric-scroll-top@2x.png
deleted file mode 100644
index 539cd979..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-top@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height.png b/2-ui/1-document/15-metrics/metric-scroll-width-height.png
deleted file mode 100644
index cdec4be7..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png b/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png
deleted file mode 100644
index b4b9cb43..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric.view/index.html b/2-ui/1-document/15-metrics/metric.view/index.html
deleted file mode 100755
index 88392ce7..00000000
--- a/2-ui/1-document/15-metrics/metric.view/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style type="text/css">
-    * {
-      margin: 0;
-      padding: 0;
-    }
-    
-    #example {
-      width: 300px;
-      height: 200px;
-      overflow: auto;
-      border: 25px solid #E8C48F;
-      padding: 20px;
-    }
-    
-    .key {
-      cursor: pointer;
-      text-decoration: underline;
-    }
-  </style>
-
-</head>
-
-<body>
-
-
-  <div id="example">
-    <h3>Introduction</h3>
-    <p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
-      It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the
-      Ecma General Assembly of June 1997.</p>
-
-    <p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep
-      it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
-
-    <p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation
-      of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
-
-  </div>
-
-
-  <div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
-  <div id="info"></div>
-
-
-  <script>
-    var example = document.getElementById('example')
-
-    var info = document.getElementById('info')
-
-    var props = {
-      'размеры': ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
-      'прокрутка': ['scrollLeft', 'scrollTop'],
-      'позиционирование по рендерингу': ['offsetParent', 'offsetLeft', 'offsetTop']
-    }
-
-    info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
-    for (var k in props) {
-      info.innerHTML += '<h4>' + k + '</h4>';
-      var prop = props[k];
-      for (var i = 0; i < prop.length; i++) {
-        info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>' + " "
-        i++;
-        if (i < prop.length) {
-          info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>';
-        }
-        info.innerHTML += "<br/>";
-
-      }
-    }
-
-    document.onclick = function(event) {
-      var target = event.target;
-      if (!target.classList.contains('key')) return;
-
-      var prop = target.innerHTML;
-      var value = example[prop];
-      value = value.tagName || value;
-      document.getElementById(prop).innerHTML = value;
-    };
-
-
-    document.onmousemove = function(e) {
-      document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
-    };
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/solution.md b/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/solution.md
deleted file mode 100644
index 9ed5a847..00000000
--- a/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/solution.md
+++ /dev/null
@@ -1,39 +0,0 @@
-В стандартном режиме IE8 можно получить текущую прокрутку так:
-
-```js
-//+ run
-alert( document.documentElement.scrollTop );
-```
-
-Самым простым, но неверным было бы такое решение:
-```js
-//+ run
-// "полифилл"
-window.pageYOffset = document.documentElement.scrollTop;
-
-// использование "полифилла"
-alert( window.pageYOffset );
-```
-
-Код выше не учитывает текущую прокрутку. Он присваивает `window.pageYOffset` текущую прокрутку, но при её изменении -- не обновляет это свойство автоматически, а поэтому -- бесполезен. 
-
-Более правильное решение -- сделать это свойство геттером. При этом в IE8 для DOM-объектов работает `Object.defineProperty`:
-
-```js
-//+ run
-// полифилл
-Object.defineProperty(window, 'pageYOffset', {
-  get: function() {
-    return document.documentElement.scrollTop;
-  }
-});
-
-// использование полифилла
-alert( window.pageYOffset );
-```
-
-
-
-
-
-
diff --git a/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/task.md b/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/task.md
deleted file mode 100644
index 7fe0ca65..00000000
--- a/2-ui/1-document/16-metrics-window/1-pageyoffset-polyfill/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Полифилл для pageYOffset в IE8
-
-[importance 3]
-
-Обычно в IE8 не поддерживается свойство `pageYOffset`. Напишите полифилл для него.
-
-При подключённом полифилле такой код должен работать в IE8:
-
-```js
-// текущая прокрутка страницы в IE8
-alert( window.pageYOffset );
-```
diff --git a/2-ui/1-document/16-metrics-window/article.md b/2-ui/1-document/16-metrics-window/article.md
deleted file mode 100644
index 3236343f..00000000
--- a/2-ui/1-document/16-metrics-window/article.md
+++ /dev/null
@@ -1,213 +0,0 @@
-# Размеры и прокрутка страницы
-
-Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки?
-Как прокрутить её из JavaScript?
-
-
-С точки зрения HTML, документ -- это `document.documentElement`. У этого элемента, соответствующего тегу `<html>`, есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.
-
-[cut]
-
-## Ширина/высота видимой части окна
-
-Свойства `clientWidth/Height` для элемента `document.documentElement` -- это как раз ширина/высота видимой области окна.
-
-<img src="document-client-width-height.png">
-
-[online]
-Например, кнопка ниже выведет размер такой области для этой страницы:
-
-<button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
-[/online]
-
-[warn header="Не `window.innerWidth/Height`"]
-Все браузеры, кроме IE8-, также поддерживают свойства `window.innerWidth/innerHeight`. Они хранят текущий размер *окна браузера*.
-
-В чём отличие? Оно небольшое, но чрезвычайно важное.
-
-Свойства `clientWidth/Height`, если есть полоса прокрутки, возвращают именно ширину/высоту внутри неё, доступную для документа, а `window.innerWidth/Height` -- игнорируют её наличие.
-
-Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:
-```js
-//+ run
-alert( window.innerWidth ); // вся ширина окна
-alert( document.documentElement.clientWidth ); // ширина минус прокрутка
-```
-
-Обычно нам нужна именно *доступная* ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем `documentElement.clientWidth`.
-[/warn]
-
-## Ширина/высота страницы с учётом прокрутки
-
-Теоретически, видимая часть страницы -- это `documentElement.clientWidth/Height`, а полный размер с учётом прокрутки -- по аналогии, `documentElement.scrollWidth/scrollHeight`. 
-
-Это верно для обычных элементов.
-
-А вот для страницы с этими свойствами возникает проблема, когда *прокрутка то есть, то нет*. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение `documentElement.scrollHeight` в этом случае может быть даже меньше, чем `documentElement.clientHeight`, что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.
-
-Эта проблема возникает именно для `documentElement`, то есть для всей страницы. 
-
-Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:
-
-```js
-//+ run
-var scrollHeight = Math.max(
-  document.body.scrollHeight, document.documentElement.scrollHeight,
-  document.body.offsetHeight, document.documentElement.offsetHeight,
-  document.body.clientHeight, document.documentElement.clientHeight
-);
-
-alert( 'Высота с учетом прокрутки: ' + scrollHeight );
-```
-
-Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.
-
-## Получение текущей прокрутки [#page-scroll]
-
-У обычного элемента текущую прокрутку можно получить в `scrollLeft/scrollTop`.
-
-Что же со страницей?
-
-Большинство браузеров корректно обработает запрос к `documentElement.scrollLeft/Top`, однако Safari/Chrome/Opera есть ошибки (к примеру [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)), из-за которых следует использовать `document.body`. 
-
-Чтобы вообще обойти проблему, можно использовать специальные свойства `window.pageXOffset/pageYOffset`:
-
-```js
-//+ run
-alert( 'Текущая прокрутка сверху: ' + window.pageYOffset );
-alert( 'Текущая прокрутка слева: ' + window.pageXOffset );
-```
-
-Эти свойства:
-<ul>
-<li>Не поддерживаются IE8-</li>
-<li>Их можно только читать, а менять нельзя.</li>
-</ul>
-
-Если IE8- не волнует, то просто используем эти свойства.
-
-Кросс-браузерный вариант с учётом IE8 предусматривает откат на `documentElement`:
-
-```js
-//+ run
-var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-
-alert( "Текущая прокрутка: " + scrollTop );
-```
-
-## Изменение прокрутки: scrollTo, scrollBy, scrollIntoView [#window-scroll]
-
-[warn]
-Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.
-[/warn]
-
-На обычных элементах свойства `scrollTop/scrollLeft` можно изменять, и при этом элемент будет прокручиваться.
-
-Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой `document.documentElement.scrollTop`, а в указанных -- использовать для этого `document.body.scrollTop`. И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.
-
-Но есть и другое, простое и универсальное решение -- специальные методы прокрутки страницы [window.scrollBy(x,y)](https://developer.mozilla.org/en/Window.scrollBy) и [window.scrollTo(pageX,pageY)](https://developer.mozilla.org/en/Window.scrollTo). 
-
-<ul>
-<li>Метод `scrollBy(x,y)` прокручивает страницу относительно текущих координат.
-[online]
-Например, кнопка ниже прокрутит страницу на `10px` вниз:
-
-<button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
-[/online]
-</li>
-<li>Метод `scrollTo(pageX,pageY)` прокручивает страницу к указанным координатам относительно документа.
-
-Он эквивалентен установке свойств `scrollLeft/scrollTop`.
-
-Чтобы прокрутить в начало документа, достаточно указать координаты `(0,0)`.
-[online]
-<button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
-[/online]
-</li>
-</ul>
-
-## scrollIntoView
-
-Для полноты картины рассмотрим также метод [elem.scrollIntoView(top)](https://developer.mozilla.org/en/DOM/element.scrollIntoView).
-
-Метод `elem.scrollIntoView(top)` вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр `top` равен `true`, и внизу, если `top` равен `false`. Причем, если параметр `top` не указан, то он считается равным `true`.
-
-Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:
-
-<button onclick="this.scrollIntoView()">this.scrollIntoView()</button>
-
-А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:
-
-<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>
-
-## Запрет прокрутки
-
-Иногда бывает нужно временно сделать документ "непрокручиваемым". Например, при показе большого диалогового окна над документом -- чтобы посетитель мог прокручивать это окно, но не документ.
-
-**Чтобы запретить прокрутку страницы, достаточно поставить `document.body.style.overflow = "hidden"`.**
-
-При этом страница замрёт в текущем положении. 
-
-[online]
-Попробуйте сами:
-
-<button onclick="document.body.style.overflow = 'hidden'">`document.body.style.overflow = 'hidden'`</button>
-
-<button onclick="document.body.style.overflow = ''">`document.body.style.overflow = ''`</button>
-
-При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю -- прокрутка возобновится. 
-[/online]
-
-Вместо `document.body` может быть любой элемент, прокрутку которого необходимо запретить. 
-
-Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст "прыгнет", заняв освободившееся место. 
-
-Это может быть не очень красиво, но легко обходится, если вычислить размер прокрутки и добавить такой же по размеру `padding`.
-
-## Итого
-
-Размеры:
-
-<ul>
-<li>Для получения размеров видимой части окна: `document.documentElement.clientWidth/Height`
-</li>
-<li>Для получения размеров страницы с учётом прокрутки:
-
-```js
-var scrollHeight = Math.max(
-  document.body.scrollHeight, document.documentElement.scrollHeight,
-  document.body.offsetHeight, document.documentElement.offsetHeight,
-  document.body.clientHeight, document.documentElement.clientHeight
-);
-```
-
-</li>
-</ul>
-
-**Прокрутка окна:**
-
-<ul>
-<li>Прокрутку окна можно *получить* как `window.pageYOffset` (для горизонтальной -- `window.pageXOffset`) везде, кроме IE8-. 
-
-На всякий случай -- вот самый кросс-браузерный способ, учитывающий IE7- в том числе:
-
-```js
-//+ run
-var html = document.documentElement;
-var body = document.body;
-
-var scrollTop = html.scrollTop || body && body.scrollTop || 0;
-scrollTop -= html.clientTop; // в IE7- <html> смещён относительно (0,0)
-
-alert( "Текущая прокрутка: " + scrollTop );
-```
-
-</li>
-<li>Установить прокрутку можно при помощи специальных методов:
-<ul>
-<li>`window.scrollTo(pageX,pageY)` -- абсолютные координаты,</li>
-<li>`window.scrollBy(x,y)` -- прокрутить относительно текущего места.</li><li>`elem.scrollIntoView(top)` -- прокрутить, чтобы элемент `elem` стал виден.</li>
-</ul>
-</li>
-</ul>
-
diff --git a/2-ui/1-document/16-metrics-window/document-client-width-height.png b/2-ui/1-document/16-metrics-window/document-client-width-height.png
deleted file mode 100644
index 49360367..00000000
Binary files a/2-ui/1-document/16-metrics-window/document-client-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/16-metrics-window/document-client-width-height@2x.png b/2-ui/1-document/16-metrics-window/document-client-width-height@2x.png
deleted file mode 100644
index 7f3584f2..00000000
Binary files a/2-ui/1-document/16-metrics-window/document-client-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md
deleted file mode 100644
index 1d911709..00000000
--- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Координаты внешних углов
-
-Координаты элемента возвращаются функцией [elem.getBoundingClientRect](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). Она возвращает все координаты относительно окна в виде объекта со свойствами `left`, `top`, `right`, `bottom`.  Некоторые браузеры также добавляют `width`, `height`.
-
-Так что координаты верхнего-левого `coords1` и правого-нижнего `coords4` внешних углов:
-
-```js
-var coords = elem.getBoundingClientRect();
-
-var coords1 = [coords.left, coords.top];
-var coords2 = [coords.right, coords.bottom];
-```
-
-# Левый-верхний угол внутри
-
-Этот угол отстоит от наружных границ на размер рамки, который доступен через `clientLeft/clientTop`:
-
-```js
-var coords3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
-```
-
-# Правый-нижний угол внутри
-
-Этот угол отстоит от правой-нижней наружной границы на размер рамки. Так как нужная рамка находится справа-внизу, то специальных свойств для нее нет, но мы можем получить этот размер из CSS:
-
-```js
-var coords4 = [
-  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
-  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
-]
-```
-
-Можно получить их альтернативным путем, прибавив `clientWidth/clientHeight` к координатам левого-верхнего внутреннего угла. Получится то же самое, пожалуй даже быстрее и изящнее.
-
-```js
-var coords4 = [
-  coords.left + elem.clientLeft + elem.clientWidth,
-  coords.top + elem.clientTop + elem.clientHeight
-]
-```
-
-[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html
deleted file mode 100755
index b0daa0ef..00000000
--- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-  <script>
-    document.onclick = function(e) { // выводит текущие координаты при клике
-      document.getElementById('coords').innerHTML = e.clientX + ':' + e.clientY;
-    };
-  </script>
-</head>
-
-<body>
-
-  Кликните на любое место, чтобы получить координаты относительно окна.
-  <br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
-  <br>
-  <div id="coords">(координаты появятся тут)</div>
-
-
-  <div id="field">
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
-  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
-  <div class="triangle-right" style="left:190px;top:-40px">4</div>
-  <div class="triangle-right" style="left:200px;top:-42px">2</div>
-
-
-  <script>
-    var field = document.getElementById('field');
-
-    // полное решение - в массиве result
-
-    var fieldCoords = field.getBoundingClientRect();
-
-    var result = [
-      [ // 1
-        fieldCoords.left,
-        fieldCoords.top
-      ],
-      [ // 2
-        fieldCoords.right,
-        fieldCoords.bottom
-      ],
-      [ // 3
-        fieldCoords.left + field.clientLeft,
-        fieldCoords.top + field.clientTop
-      ],
-      [ // 4
-        fieldCoords.left + field.clientLeft + field.clientWidth,
-        fieldCoords.top + field.clientTop + field.clientHeight
-      ]
-    ];
-
-    alert(result.join('  '));
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css
deleted file mode 100755
index 74a22c20..00000000
--- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css
+++ /dev/null
@@ -1,27 +0,0 @@
-body {
-  padding: 20px 0 0 20px;
-  cursor: pointer;
-}
-
-#field {
-  overflow: hidden;
-  width: 200px;
-  height: 150px;
-  border-top: 10px solid black;
-  border-right: 10px solid gray;
-  border-bottom: 10px solid gray;
-  border-left: 10px solid black;
-  background-color: #00FF00;
-  font: 10px/1.2 monospace;
-}
-
-.triangle-right {
-  position: relative;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 20px solid red;
-  text-indent: -20px;
-  font: 12px/1 monospace;
-}
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html
deleted file mode 100755
index bcd35954..00000000
--- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-  <script>
-    document.onclick = function(e) { // выводит текущие координаты при клике
-      document.getElementById('coords').innerHTML = e.clientX + ':' + e.clientY;
-    };
-  </script>
-</head>
-
-<body>
-
-  Кликните на любое место, чтобы получить координаты относительно окна.
-  <br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
-  <br>
-  <div id="coords">(координаты появятся тут)</div>
-
-
-  <div id="field">
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
-  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
-  <div class="triangle-right" style="left:190px;top:-40px">4</div>
-  <div class="triangle-right" style="left:200px;top:-42px">2</div>
-
-
-  <script>
-    var field = document.getElementById('field');
-
-    // ваш код...
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md
deleted file mode 100644
index a653c27f..00000000
--- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Найдите координаты точки в документе
-
-[importance 5]
-
-В ифрейме ниже вы видите документ с зеленым "полем".
-
-При помощи JavaScript найдите координаты указанных стрелками углов относительно окна браузера.
-
-Для тестирования в документ добавлено удобство: клик в любом месте отображает координаты мыши относительно окна.
-
-[iframe border=1 height=360 src="source" link edit]
-
-Ваш код должен при помощи DOM получить четыре пары координат: 
-<ol>
-<li>Левый-верхний угол снаружи, это просто.</li>
-<li>Правый-нижний угол снаружи, это тоже просто.</li>
-<li>Левый-верхний угол внутри, это чуть сложнее.</li>
-<li>Правый-нижний угол внутри, это ещё сложнее, но можно сделать даже несколькими способами.</li>
-</ol>
-
-Они должны совпадать с координатами, которые вы получите кликом по полю.
-
-P.S. Код не должен быть как-то привязан к конкретным размерам элемента, стилям, наличию или отсутствию рамки.
-
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html
deleted file mode 100755
index 82d38dde..00000000
--- a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <blockquote>
-    - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
-  </blockquote>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <script>
-    /**
-     * Позиционирует элемент elem относительно элемента anchor, как указано в
-     * в position.
-     *
-     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
-     * @param {string} position Позиция: одно из (top/right/bottom)
-     * @param {Node} elem       Элемент, который будет позиционирован
-     *
-     * Оба элемента elem && anchor должны быть видимы в документе.
-     */
-    function positionAt(anchor, position, elem) {
-
-      var anchorCoords = anchor.getBoundingClientRect();
-
-      switch (position) {
-        case "top":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
-          break;
-
-        case "right":
-          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
-          elem.style.top = anchorCoords.top + "px";
-          break;
-
-        case "bottom":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
-          break;
-      }
-
-    }
-
-    /** 
-     * Показывает заметку с текстом html на позиции position
-     * относительно элемента anchor
-     */
-    function showNote(anchor, position, html) {
-
-      var note = document.createElement('div');
-      note.className = "note";
-      note.innerHTML = html;
-      document.body.appendChild(note);
-
-      positionAt(anchor, position, note);
-    }
-
-    // проверка работоспособности
-    var blockquote = document.querySelector('blockquote');
-
-    showNote(blockquote, "top", "заметка сверху");
-    showNote(blockquote, "right", "заметка справа");
-    showNote(blockquote, "bottom", "заметка снизу");
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html
deleted file mode 100755
index 2439a7e2..00000000
--- a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <blockquote>
-    - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
-  </blockquote>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <script>
-    /**
-     * Позиционирует элемент elem относительно элемента anchor, как указано в
-     * в position.
-     *
-     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
-     * @param {string} position Позиция: одно из top/right/bottom
-     * @param {Node} elem       Элемент, который будет позиционирован
-     */
-    function positionAt(anchor, position, elem) {
-      // ваш код...
-    }
-
-    /** 
-     * Показывает заметку с текстом html на позиции position
-     * относительно элемента anchor
-     */
-    function showNote(anchor, position, html) {
-      // ваш код ...      
-    }
-
-    // проверка работоспособности
-    var blockquote = document.querySelector('blockquote');
-
-    showNote(blockquote, "top", "заметка сверху");
-    showNote(blockquote, "right", "заметка справа");
-    showNote(blockquote, "bottom", "заметка снизу");
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/2-position-at/task.md b/2-ui/1-document/17-coordinates/2-position-at/task.md
deleted file mode 100644
index d580742f..00000000
--- a/2-ui/1-document/17-coordinates/2-position-at/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Разместить заметку рядом с элементом
-
-[importance 5]
-
-Создайте функцию `positionAt(anchor, position, elem)`, которая позиционирует элемент `elem`, в зависимости от `position`, сверху (`"top"`), справа (`"right"`) или снизу (`"bottom"`) от элемента `anchor`.
-
-Используйте её, чтобы сделать функцию `showNote(anchor, position, html)`, которая показывает элемент с классом `note` и текстом `html` на позиции `position` рядом с элементом `anchor`.
-
-Выведите заметки как здесь:
-
-[iframe src="solution" height="450" border="1" link]
-
-
diff --git a/2-ui/1-document/17-coordinates/article.md b/2-ui/1-document/17-coordinates/article.md
deleted file mode 100644
index 777421a2..00000000
--- a/2-ui/1-document/17-coordinates/article.md
+++ /dev/null
@@ -1,201 +0,0 @@
-# Координаты в окне
-
-Для того, чтобы поместить один элемент рядом с другим на странице, а также двигать его произвольным образом, к примеру, рядом с указателем мыши -- используются координаты.
-
-*Координатная система относительно окна браузера* начинается в левом-верхнем углу текущей видимой области окна.
-
-Мы будем называть координаты в ней `clientX/clientY`.
-
-
-## getBoundingClientRect()
-
-Метод `elem.getBoundingClientRect()` возвращает координаты элемента, под которыми понимаются размеры "воображаемого прямоугольника", который охватывает весь элемент.
-
-Координаты возвращаются в виде объекта со свойствами:
-<ul>
-<li>`top` -- Y-координата верхней границы элемента,</li>
-<li>`left` -- X-координата левой границы,</li>
-<li>`right` -- X-координата правой границы,</li>
-<li>`bottom` -- Y-координата нижней границы.</li>
-</ul>
-
-Например:
-
-<img src="coords.png">
-
-**Координаты относительно окна не учитывают прокрутку, они высчитываются от границ текущей видимой области.**
-
-Иначе говоря, если страницу прокрутить, то элемент поднимется выше или опустится ниже -- его координаты относительно окна изменятся.
-
-[online]
-Например, кликните на кнопку, чтобы увидеть её координаты:
-
-<input id="brTest" type="button" value="Показать button.getBoundingClientRect() для этой кнопки" onclick='showRect(this)'/>
-
-<script>
-function showRect(elem) {
-  var r = elem.getBoundingClientRect()
-  alert("{top:"+r.top+", left:"+r.left+", right:"+r.right+", bottom:"+ r.bottom + "}");
-}
-</script>
-
-Если вы прокрутите эту страницу, то положение кнопки в окне изменится, и её координаты, соответственно, тоже. 
-[/online]
-
-<ul>
-<li>Координаты могут быть дробными -- это нормально, так как они возвращаются из внутренних структур браузера.</li>
-<li>Координаты могут быть и отрицательными, например если прокрутить страницу так, что верх элемента будет выходить за верхнуюю границу окна, то его `top`-координата будет меньше нуля.</li>
-<li>Некоторые современные браузеры также добавляют к результату `getBoundingClientRect` свойства для ширины и высоты: `width/height`, но их можно получить и простым вычитанием: `height = bottom - top`, `width = right - left`.</li>
-</ul>
-
-[warn header="Координаты right/bottom отличаются от CSS-свойств"]
-Если рассмотреть позиционирование элементов при помощи CSS-свойства `position`, то там тоже указываются `left`, `right`, `top`, `bottom`.
-
-Однако, по CSS свойство `right` задаёт расстояние от правой границы, а `bottom` -- от нижней.
-
-Если вы взглянете на иллюстрацию выше, то увидите, что в JavaScript это не так. Все координаты отсчитываются слева/сверху, в том числе и эти.
-[/warn]
-
-
-[smart header="Метод `elem.getBoundingClientRect()` изнутри"]
-
-Браузер отображает любое содержимое, используя прямоугольники. 
-
-В случае с блочным элементом, таким как `DIV`, элемент сам по себе образует прямоугольник. Но если элемент строчный и содержит в себе длинный текст, то каждая строка будет отдельным прямоугольником, с одинаковой высотой но разной длиной (у каждой строки -- своя длина).
-
-Более подробно это описано в: <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">спецификации</a>.
-
-Если обобщить, содержимое элемента может отображаться в одном прямоугольнике или в нескольких.
-
-Все эти прямоугольники можно получить с помощью [elem.getClientRects()](https://developer.mozilla.org/en/DOM/element.getClientRects). А метод [elem.getBoundingClientRect()](https://developer.mozilla.org/en/DOM/element.getBoundingClientRect) возвращает один охватывающий прямоугольник для всех `getClientRects()`.
-[/smart]
-
-
-## elementFromPoint(x, y) [#elementFromPoint]
-
-Возвращает элемент, который находится на координатах `(x, y)` относительно окна.
-
-Синтаксис:
-
-```js
-var elem = document.elementFromPoint(x, y);
-```
-
-Например, код ниже ниже выделяет и выводит тег у элемента, который сейчас в середине окна:
-
-```js
-//+ run
-var centerX = document.documentElement.clientWidth / 2;
-var centerY = document.documentElement.clientHeight / 2;
-
-var elem = document.elementFromPoint(centerX, centerY);
-
-elem.style.background = "red";
-alert( elem.tagName );
-elem.style.background = "";
-```
-
-Аналогично предыдущему методу, используются координаты относительно окна, так что, в зависимости от прокрутки страницы, в центре может быть разный элемент.
-
-[warn header="Для координат вне окна `elementFromPoint` возвращает `null`"]
-Метод `document.elementFromPoint(x,y)` работает только если координаты `(x,y)` находятся в пределах окна.
-
-Если одна из них отрицательна или больше чем ширина/высота окна -- он возвращает `null`.
-
-В большинстве сценариев использования это не является проблемой, но нужно проверять, что результат -- не `null`.
-[/warn] 
-
-
-## Координаты для position:fixed
-
-Координаты обычно требуются не просто так, а, например, чтобы переместить элемент на них.
-
-В CSS для позиционирования элемента относительно окна используется свойство `position:fixed`. Как правило, вместе с ним идут и координаты, например `left/top`.
-
-Например, функция `createMessageUnder` из кода ниже покажет сообщение под элементом `elem`:
-
-```js
-var elem = document.getElementById("coords-show-mark");
-
-function createMessageUnder(elem, text) {
-  // получить координаты
-  var coords = elem.getBoundingClientRect();
-
-  // создать элемент для сообщения
-  var message = document.createElement('div');
-  // стиль лучше задавать классом
-  message.style.cssText = "position:fixed; color: red";
-
-*!*
-  // к координатам обязательно добавляем "px"!
-  message.style.left = coords.left + "px";
-  message.style.top = coords.bottom + "px";
-*/!*
-
-  message.innerHTML = text;
-
-  return message;
-}
-
-// Использование
-// добавить на 5 сек в документ
-var message = createMessageUnder(elem, 'Привет, мир!');
-document.body.appendChild(message);
-setTimeout(function() {
-  document.body.removeChild(message);
-}, 5000);
-```
-
-[online]
-Нажмите на кнопку, чтобы запустить его:
-
-<button id="coords-show-mark">кнопка с id="coords-show-mark"</button>
-[/online]
-
-Этот код можно модифицировать, чтобы показывать сообщение слева, справа, сверху, делать это вместе с CSS-анимацией и так далее. Для этого нужно всего лишь понимать, как получить координаты.
-
-**Заметим, однако, важную деталь: при прокрутке страницы сообщение будет визуально отдаляться от кнопки.**
-
-Причина очевидна, ведь оно использует `position: fixed`, так что при прокрутке остаётся на месте, а страница скроллируется. 
-
-Как сделать, чтобы сообщение было именно на конкретном месте документа, а не окна, мы рассмотрим в следующей главе.
-
-
-[head]
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-
-document.getElementById('coords-show-mark').onclick = function() {
-var elem = document.getElementById("coords-show-mark");
-
-function createMessageUnder(elem, text) {
-  // получить координаты
-  var coords = elem.getBoundingClientRect();
-
-  // создать элемент для сообщения
-  var message = document.createElement('div');
-  // стиль лучше задавать классом
-  message.style.cssText = "position:fixed; color: red";
-
-  // к координатам обязательно добавляем "px"!
-  message.style.left = coords.left + "px";
-  message.style.top = coords.bottom + "px";
-
-  message.innerHTML = text;
-
-  return message;
-}
-
-// Использование
-// добавить на 5 сек в документ
-var message = createMessageUnder(elem, 'Привет, мир!');
-document.body.appendChild(message);
-setTimeout(function() {
-  document.body.removeChild(message);
-}, 5000);
-}
-
-});
-
-</script>
-[/head]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/coords.png b/2-ui/1-document/17-coordinates/coords.png
deleted file mode 100644
index 9d828d07..00000000
Binary files a/2-ui/1-document/17-coordinates/coords.png and /dev/null differ
diff --git a/2-ui/1-document/17-coordinates/coords@2x.png b/2-ui/1-document/17-coordinates/coords@2x.png
deleted file mode 100644
index bedadcd1..00000000
Binary files a/2-ui/1-document/17-coordinates/coords@2x.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md
deleted file mode 100644
index d5d0d41c..00000000
--- a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-<ul>
-<li>`top` -- это `pageYOffset`.</li>
-<li>`bottom` -- это `pageYOffset` плюс высота видимой части `documentElement.clientHeight`.</li>
-<li>`height` -- полная высота документа, её вычисление дано в главе [](/metrics-window).</li>
-</ul>
-
-Итого:
-
-```js
-function getDocumentScroll() {
-  var scrollHeight = Math.max(
-    document.body.scrollHeight, document.documentElement.scrollHeight,
-    document.body.offsetHeight, document.documentElement.offsetHeight,
-    document.body.clientHeight, document.documentElement.clientHeight
-  );
-
-  return {
-    top: pageYOffset,
-    bottom: pageYOffset + document.documentElement.clientHeight,
-    height: scrollHeight
-  };
-}
-```
-
diff --git a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md
deleted file mode 100644
index d82bc669..00000000
--- a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Область видимости для документа
-
-[importance 5]
-
-Напишите функцию `getDocumentScroll()`, которая возвращает объект с информацией о текущей прокрутке и области видимости.
-
-Свойства объекта-результата:
-
-<ul>
-<li>`top` -- координата верхней границы видимой части (относительно документа).</li>
-<li>`bottom` -- координата нижней границы видимой части (относительно документа).</li>
-<li>`height` -- полная высота документа, включая прокрутку.</li>
-</ul>
-
-В этой задаче учитываем только вертикальную прокрутку: горизонтальная делается аналогично, а нужна сильно реже.
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html
deleted file mode 100644
index 6b28fea1..00000000
--- a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body style="height:2000px">
-
-  <p>Исправления два:</p>
-
-  <ol>
-    <li>Использование функции <code>getCoords()</code> из учебника для получения абсолютных координат.</li>
-    <li>Изменение <code>position:fixed</code> на <code>position:absolute</code> в стилях.</li>
-  </ol>
-
-  <blockquote>
-    - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
-  </blockquote>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <script>
-    /**
-     * Вспомогательная функция для координат относительно документа
-     */
-
-    function getCoords(elem) {
-      var box = elem.getBoundingClientRect();
-
-      var body = document.body;
-      var docEl = document.documentElement;
-
-      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-      var clientTop = docEl.clientTop || body.clientTop || 0;
-      var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
-      var top = box.top + scrollTop - clientTop;
-      var left = box.left + scrollLeft - clientLeft;
-
-      return {
-        top: top,
-        left: left
-      };
-    }
-
-
-    function positionAt(anchor, position, elem) {
-
-      var anchorCoords = getCoords(anchor);
-
-      switch (position) {
-        case "top":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
-          break;
-
-        case "right":
-          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
-          elem.style.top = anchorCoords.top + "px";
-          break;
-
-        case "bottom":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
-          break;
-      }
-
-    }
-
-    /** 
-     * Показывает заметку с текстом html на позиции position
-     * относительно элемента anchor
-     */
-    function showNote(anchor, position, html) {
-
-      var note = document.createElement('div');
-      note.className = "note";
-      note.innerHTML = html;
-      document.body.appendChild(note);
-      positionAt(anchor, position, note);
-    }
-
-    // проверка работоспособности
-    var blockquote = document.querySelector('blockquote');
-
-    showNote(blockquote, "top", "заметка сверху");
-    showNote(blockquote, "right", "заметка справа");
-    showNote(blockquote, "bottom", "заметка снизу");
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/task.md b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/task.md
deleted file mode 100644
index 5e229a89..00000000
--- a/2-ui/1-document/18-coordinates-document/2-position-at-absolute/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Разместить заметку рядом с элементом (absolute)
-
-[importance 5]
-
-Модифицируйте решение задачи [](/task/position-at), чтобы при прокрутке страницы заметка не убегала от элемента.
-
-Используйте для этого координаты относительно документа и `position:absolute` вместо `position:fixed`.
-
-В качестве исходного документа используйте решение задачи [](/task/position-at), для тестирования прокрутки добавьте стиль `<body style="height: 2000px">`.
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html b/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html
deleted file mode 100644
index df1b2820..00000000
--- a/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="index.css">
-</head>
-
-<body style="height:2000px">
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <blockquote>
-    - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
-  </blockquote>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
-    esse sequi officia sapiente.</p>
-
-
-  <script>
-    function getCoords(elem) {
-      var box = elem.getBoundingClientRect();
-
-      var body = document.body;
-      var docEl = document.documentElement;
-
-      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-      var clientTop = docEl.clientTop || body.clientTop || 0;
-      var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
-      var top = box.top + scrollTop - clientTop;
-      var left = box.left + scrollLeft - clientLeft;
-
-      return {
-        top: top,
-        left: left
-      };
-    }
-
-    function showNote(anchor, position, html) {
-
-      var note = document.createElement('div');
-      note.className = "note";
-      note.innerHTML = html;
-      document.body.appendChild(note);
-
-      positionAt(anchor, position, note);
-    }
-
-    /**
-     * Позиционирует элемент elem относительно элемента anchor, как указано в
-     * в position.
-     *
-     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
-     * @param {string} position вне элемента top-out/right-out/bottom-out, внутри элемента *-in
-     * @param {Node} elem       Элемент, который будет позиционирован
-     *
-     * Оба элемента elem && anchor должны быть видимы в документе.
-     */
-    function positionAt(anchor, position, elem) {
-
-      var anchorCoords = getCoords(anchor);
-
-      switch (position) {
-        case "top-out":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
-          break;
-
-        case "right-out":
-          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
-          elem.style.top = anchorCoords.top + "px";
-          break;
-
-        case "bottom-out":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
-          break;
-
-        case "top-in":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top + "px";
-          break;
-
-        case "right-in":
-          elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + "px";
-          elem.style.top = anchorCoords.top + "px";
-          break;
-
-        case "bottom-in":
-          elem.style.left = anchorCoords.left + "px";
-          elem.style.top = anchorCoords.top + anchor.offsetHeight - elem.offsetHeight + "px";
-          break;
-      }
-
-    }
-
-
-    var blockquote = document.querySelector('blockquote');
-
-    showNote(blockquote, "top-in", "заметка top-in");
-    showNote(blockquote, "top-out", "заметка top-out");
-    showNote(blockquote, "right-out", "заметка right-out");
-    showNote(blockquote, "bottom-in", "заметка bottom-in");
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/3-position-at-2/task.md b/2-ui/1-document/18-coordinates-document/3-position-at-2/task.md
deleted file mode 100644
index f81c127f..00000000
--- a/2-ui/1-document/18-coordinates-document/3-position-at-2/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Разместить заметку внутри элемента
-
-[importance 5]
-
-Расширьте предыдущую задачу [](/task/position-at-absolute): научите функцию `positionAt(anchor, position, elem)` вставлять `elem` внутрь `anchor`. 
-
-Новые значения `position`:
-<ul>
-<li>`top-out`, `right-out`, `bottom-out` -- работают так же, как раньше, то есть вставляют `elem` над/справа/под `anchor`.</li>
-<li>`top-in`, `right-in`, `bottom-in` -- вставляют `elem` внутрь `anchor`: к верхней границе/правой/нижней.</li>
-</ul>
-
-Например:
-
-```js
-// покажет note сверху blockquote
-positionAt(blockquote, "top-out", note);
-
-// покажет note сверху-внутри blockquote
-positionAt(blockquote, "top-in", note);
-```
-
-Пример результата:
-
-[iframe src="solution" height="500" border="1" link]
-
-В качестве исходного документа возьмите решение задачи [](/task/position-at-absolute).
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/article.md b/2-ui/1-document/18-coordinates-document/article.md
deleted file mode 100644
index 9e25fc76..00000000
--- a/2-ui/1-document/18-coordinates-document/article.md
+++ /dev/null
@@ -1,226 +0,0 @@
-# Координаты в документе
-
-*Система координат относительно страницы* или, иначе говоря, *относительно документа*, начинается в левом-верхнем углу, но не окна, а именно страницы.
-
-И координаты в ней означают позицию по отношению не к окну браузера, а к документу в целом.
-
-Если провести аналогию с CSS, то координаты относительно окна -- это `position:fixed`, а относительно документа -- `position:absolute` (при позиционировании вне других элементов, естественно).
-
-Мы будем называть координаты в ней `pageX/pageY`.
-
-[cut]
-
-Они нужны в первую очередь для того, чтобы показывать элемент в определённом месте страницы, а не окна.
-
-## Сравнение систем координат
-
-Когда страница не прокручена, точки начала координат относительно окна `(clientX,clientY)` и документа `(pageX,pageY)` совпадают:
-
-<img src="pagewindow0.png">
-
-Например, координаты элемента с надписью "STANDARDS" равны расстоянию от верхней/левой границы окна:
-
-<img src="standards.png">
-
-**Прокрутим страницу, чтобы элемент был на самом верху:**
-
-Посмотрите на рисунок ниже, на нём -- та же страница, только прокрученная, и тот же элемент "STANDARDS".
-
-<ul>
-<li>Координата `clientY` изменилась. Она была `175`, а стала `0`, так как элемент находится вверху окна.</li>
-<li>Координата `pageY` осталась такой же, так как отсчитывается от левого-верхнего угла *документа*.</li>
-</ul>
-
-<img src="standards-scroll.png">
-
-Итак, координаты `pageX/pageY` не меняются при прокрутке, в отличие от  `clientX/clientY`.
-
-## Получение координат [#getCoords]
-
-К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.
-
-Эти две системы координат жёстко связаны: `pageY = clientY + текущая вертикальная прокрутка`.
-
-Наша функция `getCoords(elem)` будет брать результат `elem.getBoundingClientRect()` и прибавлять текущую прокрутку документа.
-
-Результат `getCoords`: объект с координатами `{left: .., top: ..}`
-
-```js
-function getCoords(elem) { // кроме IE8-
-  var box = elem.getBoundingClientRect();
-
-  return {
-    top: box.top + pageYOffset,
-    left: box.left + pageXOffset
-  };
-
-}
-```
-
-Если нужно поддерживать более старые IE, то вот альтернативный, самый кросс-браузерный вариант:
-
-```js
-//+ autorun
-function getCoords(elem) {
-  // (1)
-  var box = elem.getBoundingClientRect();
-
-  var body = document.body;
-  var docEl = document.documentElement;
-
-  // (2)
-  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-  var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-  // (3)
-  var clientTop = docEl.clientTop || body.clientTop || 0;
-  var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
-  // (4)
-  var top = box.top + scrollTop - clientTop;
-  var left = box.left + scrollLeft - clientLeft;
-
-  return {
-    top: top,
-    left: left
-  };
-}
-```
-
-Разберем что и зачем, по шагам:
-
-<ol>
-<li>Получаем прямоугольник.</li>
-<li>Считаем прокрутку страницы. Все браузеры, кроме IE8- поддерживают свойство `pageXOffset/pageYOffset`. В более старых IE, когда установлен DOCTYPE, прокрутку можно получить из `documentElement`, ну и наконец если DOCTYPE некорректен -- использовать `body`.</li>
-<li>В IE документ может быть смещен относительно левого верхнего угла. Получим это смещение.</li>
-<li>Добавим прокрутку к координатам окна и вычтем смещение `html/body`, чтобы получить координаты всего документа.</li>
-</ol>
-
-### Устаревший метод: offset*
-
-Есть альтернативный способ нахождения координат -- это пройти всю цепочку `offsetParent` от элемента вверх и сложить отступы `offsetLeft/offsetTop`.
-
-Мы разбираем его здесь с учебной целью, так как он используется лишь в старых браузерах.
-
-Вот функция, реализующая такой подход.
-
-```js
-//+ autorun
-function getOffsetSum(elem) {
-  var top = 0,
-    left = 0;
-
-  while (elem) {
-    top = top + parseInt(elem.offsetTop);
-    left = left + parseInt(elem.offsetLeft);
-    elem = elem.offsetParent;
-  }
-
-  return {
-    top: top,
-    left: left
-  };
-}
-```
-
-Казалось бы, код нормальный. И он как-то работает, но разные браузеры преподносят "сюрпризы", включая или выключая размер рамок и прокруток из `offsetTop/Left`, некорректно учитывая позиционирование. В итоге результат не всегда верен. Можно, конечно, разобрать эти проблемы и посчитать действительно аккуратно и правильно этим способом, но зачем? Ведь есть `getBoundingClientRect`.
-
-[online]
-Вы можете увидеть разницу между вычислением координат через `offset*` и `getBoundingClientRect` на примере.
-
-В прямоугольнике ниже есть 3 вложенных `DIV`. Все они имеют `border`, кое-кто из них имеет `position/margin/padding`.
-
-Кликните по внутреннему (жёлтому) элементу, чтобы увидеть результаты обоих методов: `getOffsetSum` и `getCoords`, а также реальные координаты курсора -- `event.pageX/pageY` (мы обсудим их позже в статье [](/fixevent)).
-
-[pre]
-<div style="position:relative;padding:10px;height:80px;width:380px;border:7px red solid">
-  <div style="border:10px blue solid;padding:2px;position:absolute;left:20%;top:20%">
-  <div id="getBoundingClientRectEx" style="background-color:yellow;font-size:14px;border:4px solid black;margin:2px;cursor:pointer">Кликните, чтобы получить координаты getOffsetSum и getCoords</div>
-  </div>
-</div>
-<div id="getBoundingClientRectExRes">
-<div><b>getOffsetSum</b>:<span>значение getOffsetSum()</span></div>
-<div><b>getCoords</b>:<span>значение getCoords()</span></div>
-<div><b>mouse</b>:<span>координаты мыши</span></div>
-</div>
-
-<script>
-document.getElementById('getBoundingClientRectEx').onclick = function(event) {
-  var o = getOffsetSum(this);
-  var orect = getCoords(this);
-  
-  if ( event.pageX == null && event.clientX != null ) {
-    var html = document.documentElement, body = document.body;
-    event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
-    event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
-  }
-
-  var list = document.getElementById('getBoundingClientRectExRes').getElementsByTagName('SPAN')
-  list[0].innerHTML = '{left:'+o.left+', top:'+o.top+'}'
-  list[1].innerHTML = '{left:'+orect.left+', top:'+orect.top+'}'
-  list[2].innerHTML = 'pageX='+event.pageX+' pageY='+event.pageY
-}
-</script>
-[/pre]
-
-**При клике на любом месте желтого блока вы легко увидите разницу между `getOffsetSum(elem)` и `getCoords(elem)`.**
-
-Для того, чтобы узнать, какой же результат верный, кликните в левом-верхнем углу жёлтого блока, причём обратите внимание -- кликать нужно не на жёлтом, а на чёрном, это рамка, она тоже входит в элемент. Будут видны точные координаты мыши, так что вы можете сравнить их с `getOffsetSum/getCoords`.
-
-Пример клика в правильном месте (обратите внимание на разницу координат):
-
-<img src="getcoords-compare.png">
-
-Именно `getCoords` всегда возвращает верное значение.
-[/online]
-
-## Координаты на экране screenX/screenY
-
-Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.
-
-*Координаты относительно экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
-
-<img src="screen.png">
-
-Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом [window.open](https://developer.mozilla.org/en-US/docs/DOM/window.open).
-
-<ul>
-<li>Размеры экрана хранятся в глобальной переменной [screen](https://developer.mozilla.org/en/DOM/window.screen):
-
-```js
-//+ run
-// общая ширина/высота
-alert( screen.width + ' x ' + screen.height );
-
-// доступная ширина/высота (за вычетом таскбара и т.п.)
-alert( screen.availWidth + ' x ' + screen.availHeight );
-
-// есть и ряд других свойств screen (см. документацию)
-```
-
-</li>
-<li>Координаты левого-верхнего угла браузера на экране хранятся в `window.screenX,` `window.screenY` (не поддерживаются IE8-):
-
-```js
-//+ run
-alert( "Браузер находится на " + window.screenX + "," + window.screenY );
-```
-
-Они могут быть и меньше нуля, если окно частично вне экрана. </li>
-</ul>
-
-Заметим, что общую информацию об экране и браузере получить можно, а вот координаты конкретного элемента на экране -- нельзя, нет аналога `getBoundingClientRect` или иного метода для этого. 
-
-## Итого  
-
-У любой точки в браузере есть координаты:
-<ol>
-<li>Относительно окна `window` -- `elem.getBoundingClientRect()`.</li>
-<li>Относительно документа `document` -- добавляем прокрутку, во всех фреймворках есть готовая функция.</li>
-<li>Относительно экрана `screen` -- можно узнать координаты браузера, но не элемента.</li>
-</ol>
-
-Иногда в старом коде можно встретить использование `offsetTop/Left` для подсчёта координат. Это очень старый и неправильный способ, не стоит его использовать.
-
-Координаты будут нужны нам далее, при работе с событиями мыши (координаты клика) и элементами (перемещение).
-
diff --git a/2-ui/1-document/18-coordinates-document/getcoords-compare.png b/2-ui/1-document/18-coordinates-document/getcoords-compare.png
deleted file mode 100755
index bc0890a2..00000000
Binary files a/2-ui/1-document/18-coordinates-document/getcoords-compare.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png b/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png
deleted file mode 100755
index 94d9b4a9..00000000
Binary files a/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/pagewindow0.png b/2-ui/1-document/18-coordinates-document/pagewindow0.png
deleted file mode 100755
index bb44df35..00000000
Binary files a/2-ui/1-document/18-coordinates-document/pagewindow0.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/screen.png b/2-ui/1-document/18-coordinates-document/screen.png
deleted file mode 100755
index a92cf655..00000000
Binary files a/2-ui/1-document/18-coordinates-document/screen.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/standards-scroll.png b/2-ui/1-document/18-coordinates-document/standards-scroll.png
deleted file mode 100755
index e212238b..00000000
Binary files a/2-ui/1-document/18-coordinates-document/standards-scroll.png and /dev/null differ
diff --git a/2-ui/1-document/18-coordinates-document/standards.png b/2-ui/1-document/18-coordinates-document/standards.png
deleted file mode 100755
index a76de32e..00000000
Binary files a/2-ui/1-document/18-coordinates-document/standards.png and /dev/null differ
diff --git a/2-ui/1-document/19-dom-cheatsheet/article.md b/2-ui/1-document/19-dom-cheatsheet/article.md
deleted file mode 100644
index 4e5fbf9b..00000000
--- a/2-ui/1-document/19-dom-cheatsheet/article.md
+++ /dev/null
@@ -1,187 +0,0 @@
-# Итого
-
-В этой главе кратко перечислены основные свойства и методы DOM, которые мы изучили. Их уже довольно много.
-
-Используйте её, чтобы по-быстрому вспомнить и прокрутить в голове то, что изучали ранее. Все ли эти свойства вам знакомы?
-
-Кое-где стоит ограничение на версии IE, но на все свойства можно найти или сделать или найти полифилл, с которым их можно использовать везде.
-
-[cut]
-
-## Создание
-
-<dl>
-<dt>`document.createElement(tag)`</dt><dd>Создать элемент с тегом `tag`</dd>
-<dt>`document.createTextNode(txt)`</dt><dd>Создать текстовый узел с текстом `txt`</dd>
-<dt>`node.cloneNode(deep)`</dt><dd>Клонировать существующий узел, если `deep=false`, то без потомков.</dd>
-</dl>
-
-## Свойства узлов
-
-<dl>
-<dt>`node.nodeType`</dt><dd>Тип узла: 1(элемент) / 3(текст) / другие.</dd>
-<dt>`elem.tagName`</dt><dd>Тег элемента.</dd>
-<dt>`elem.innerHTML`</dt><dd>HTML внутри элемента.</dd>
-<dt>`elem.outerHTML`</dt><dd>Весь HTML элемента, включая сам тег. На запись использовать с осторожностью, так как не модифицирует элемент, а вставляет новый вместо него.</dd>
-<dt>`node.data` / `node.nodeValue`</dt><dd>Содержимое узла любого типа, кроме элемента.</dd>
-<dt>`node.textContent`</dt><dd>Текстовое содержимое узла, для элементов содержит текст с вырезанными тегами (IE9+).</dd>
-<dt>`elem.hidden`</dt><dd>Если поставить `true`, то элемент будет скрыт (IE10+).</dd>
-</dl>
-
-## Атрибуты
-
-<dl>
-<dt>`elem.getAttribute(name)`, `elem.hasAttribute(name)`, `elem.setAttribute(name, value)`</dt>
-<dd>Чтение атрибута, проверка наличия и запись.</dd>
-<dt>`elem.dataset.*`</dt><dd>Значения атрибутов вида `data-*` (IE10+).</dd>
-</dl>
-
-## Ссылки
-
-<dl>
-<dt>`document.documentElement`</dt>
-<dd>Элемент `<HTML>`</dd>
-<dt>`document.body`</dt>
-<dd>Элемент `<BODY>`</dd>
-<dt>`document.head`</dt>
-<dd>Элемент `<HEAD>` (IE9+)</dd>
-</dl>
-
-По всем узлам:
-<ul>
-<li>`parentNode`</li>
-<li>`nextSibling` `previousSibling`</li>
-<li>`childNodes` `firstChild` `lastChild`</li>
-</ul>
-
-Только по элементам:
-
-<ul>
-<li>`parentElement`</li>
-<li>`nextElementSibling` `previousElementSibling`</li>
-<li>`children`, `firstElementChild` `lastElementChild`</li>
-</ul>
-
-Все они IE9+, кроме `children`, который работает в IE8-, но содержит не только элементы, но и комментарии (ошибка в браузере).
-
-Дополнительно у некоторых типов элементов могут быть и другие ссылки, свойства, коллекции для навигации,
-например для таблиц:
-
-<dl>
-<dt>`table.rows[N]`</dt>
-<dd>строка `TR` номер `N`.</dd>
-<dt>`tr.cells[N]`</dt>
-<dd>ячейка `TH/TD` номер `N`.</dd>
-<dt>`tr.sectionRowIndex`</dt>
-<dd>номер строки в таблице в секции `THEAD/TBODY`.<dd>
-<dt>`td.cellIndex`</dt>
-<dd>номер ячейки в строке.</dd>
-</dl>
-
-## Поиск
-
-
-<dl>
-<dt>`*.querySelector(css)`</dt>
-<dd>По селектору, только первый элемент</dd>
-<dt>`*.querySelectorAll(css)`</dt>
-<dd>По селектору CSS3, в IE8 по CSS 2.1</dd>
-<dt>`document.getElementById(id)`</dt>
-<dd>По уникальному `id`</dd>
-<dt>`document.getElementsByName(name)`</dt>
-<dd>По атрибуту `name`,  в IE9- работает только для элементов, где `name` предусмотрен стандартом.</dd>
-<dt>`*.getElementsByTagName(tag)`</dt>
-<dd>По тегу `tag`</dd>
-<dt>`*.getElementsByClassName(class)`</dt>
-<dd>По классу, IE9+, корректно работает с элементами, у которых несколько классов.</dd>
-</dl>
-
-Вообще, обычно можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
-
-Дополнительно есть методы:
-<dl>
-<dt>`elem.matches(css)`</dt>
-<dd>Проверяет, подходит ли элемент под CSS-селектор.</dd.
-<dt>`elem.closest(css)`</dt>
-<dd>Ищет ближайший элемент сверху по иерархии DOM, подходящий под CSS-селектор. Первым проверяется сам `elem`. Этот элемент возвращается.</dd>
-<dt>`elemA.contains(elemB)`</dt>
-<dd>Возвращает `true`, если `elemA` является предком (содержит) `elemB`.</dd>
-<dt>`elemA.compareDocumentPosition(elemB)`</dt>
-<dd>Возвращает битовую маску, которая включает в себя отношение вложенности между `elemA` и `elemB`, а также -- какой из элементов появляется в DOM первым.</dd>
-
-</dl>
-
-
-## Изменение
-
-<ul>
-<li>`parent.appendChild(newChild)`</li>
-<li>`parent.removeChild(child)`</li>
-<li>`parent.insertBefore(newChild, refNode)`</li>
-<li>`parent.insertAdjacentHTML("beforeBegin|afterBegin|beforeEnd|afterEnd", html)`</li>
-<li>`parent.insertAdjacentElement("beforeBegin|...|afterEnd", text)` (кроме FF)</li>
-<li>`parent.insertAdjacentText("beforeBegin|...|afterEnd", text)` (кроме FF)</li>
-<li>`document.write(...)`</li>
-</ul>
-
-Скорее всего, понадобятся полифиллы для:
-
-<ul>
-<li>`node.append(...nodes)`</li>
-<li>`node.prepend(...nodes)`</li>
-<li>`node.after(...nodes)`,</li>
-<li>`node.before(...nodes)`</li>
-<li>`node.replaceWith(...nodes)`</li>
-</ul>
-
-## Классы и стили
-
-<dl>
-<dt>`elem.className`</dt>
-<dd>Атрибут `class`</dt>
-<dt>`elem.classList.add(class) remove(class) toggle(class) contains(class)`</dt>
-<dd>Управление классами, для IE9- есть [эмуляция](https://github.com/eligrey/classList.js/blob/master/classList.js).</dd>
-<dt>`elem.style`</dt>
-<dd>Стили в атрибуте `style` элемента</dd>
-<dt>`getComputedStyle(elem, "")`</dd>
-<dd>Стиль, с учётом всего каскада, вычисленный и применённый (только чтение)</dd>
-</dl>
-
-## Размеры и прокрутка элемента
-
-<dl>
-<dt>`clientLeft/Top`</dt>
-<dd>Ширина левой/верхней рамки `border`</dd>
-<dt>`clientWidth/Height`</dt>
-<dd>Ширина/высота внутренней части элемента, включая содержимое и `padding`, не включая полосу прокрутки (если есть).</dd>
-<dt>`scrollWidth/Height`</dt>
-<dd>Ширина/высота внутренней части элемента, с учетом прокрутки.</dd>
-<dt>`scrollLeft/Top`</dt>
-<dd>Ширина/высота прокрученной области.</dd>
-<dt>`offsetWidth/Height`</dt>
-<dd>Полный размер элемента: ширина/высота, включая `border`.</dd>
-</dl>
-
-## Размеры и прокрутка страницы
-
-<ul>
-<li>ширина/высота видимой области: `document.documentElement.clientHeight`</li>
-<li>прокрутка(чтение): `window.pageYOffset || document.documentElement.scrollTop`</li>
-<li>прокрутка(изменение):
-<ul>
-<li>`window.scrollBy(x,y)`: на x,y относительно текущей позиции.</li>
-<li>`window.scrollTo(pageX, pageY)`: на координаты в документе.</li>
-<li>`elem.scrollIntoView(true/false)`: прокрутить, чтобы `elem` стал видимым и оказался вверху окна(`true`) или внизу(`false`)</li>
-</ul>
-</li>
-</ul>
-
-## Координаты
-
-<ul>
-<li>относительно окна: `elem.getBoundingClientRect()`</li>
-<li>относительно документа: `elem.getBoundingClientRect()` + прокрутка страницы</li>
-<li>получить элемент по координатам: `document.elementFromPoint(clientX, clientY)`</li>
-</ul>
-
-Список намеренно сокращён, чтобы было проще найти то, что нужно.
diff --git a/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md b/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md
deleted file mode 100644
index 399d66bc..00000000
--- a/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Выведет `null`, так как на момент выполнения скрипта тег `<body>` ещё не обработан браузером.
-
-Попробуйте в действии:
-
-```html
-<!--+ run -->
-<html>
-
-<head>
-  <script>
-    alert( document.body ); // null
-  </script>
-</head>
-
-<body>
-  Привет, мир!
-</body>
-
-</html>
-```
-
diff --git a/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md b/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md
deleted file mode 100644
index ef89617c..00000000
--- a/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Что выведет этот alert?
-
-[importance 5]
-
-Что выведет `alert`?
-
-```html
-<html>
-
-<head>
-*!*
-  <script>
-    alert( document.body ); // ?
-  </script>
-*/!*
-</head>
-
-<body>
-  Привет, мир!
-</body>
-
-</html>
-```
-
diff --git a/2-ui/1-document/2-dom-nodes/article.md b/2-ui/1-document/2-dom-nodes/article.md
deleted file mode 100644
index aed95c16..00000000
--- a/2-ui/1-document/2-dom-nodes/article.md
+++ /dev/null
@@ -1,269 +0,0 @@
-# Дерево DOM
-
-Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) -- объектная модель, используемая для XML/HTML-документов.
-
-
-[cut]
-Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом "элемент". Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом "текст".
-
-DOM -- это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
-
-## Пример DOM
-
-Построим, для начала, дерево DOM для следующего документа.
-
-```html
-<!--+ run  no-beautify -->
-<!DOCTYPE HTML>
-<html>
-<head>
-  <title>О лосях</title>
-</head>
-<body>
-  Правда о лосях
-</body>
-</html>
-```
-
-Его вид:
-
-<div class="domtree"></div>
-<script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"О лосях"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n     Правда о лосях\n   \n\n"}]}]}
-
-drawHtmlTree(node, 'div.domtree', 690, 350);
-</script>
-
-В этом дереве выделено два типа узлов.
-
-<ol>
-<li>Теги образуют *узлы-элементы* (element node). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.</li>
-<li>Текст внутри элементов образует *текстовые узлы* (text node), обозначенные как `#text`. Текстовый узел содержит исключительно строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне.</li>
-</ol>
-
-[online]
-**На рисунке выше синие узлы-элементы можно кликать, при этом их дети будут скрываться-раскрываться.**
-[/online]
-
-Обратите внимание на специальные символы в текстовых узлах:
-<ul>
-<li>перевод строки: `↵`</li>
-<li>пробел: `␣`</li>
-</ul>
-
-**Пробелы и переводы строки -- это тоже текст, полноправные символы, которые учитываются в DOM.**
-
-В частности, в примере выше тег `<html>` содержит не только узлы-элементы `<head>` и `<body>`, но и `#text` (пробелы, переводы строки) между ними.
-
-Впрочем, как раз на самом верхнем уровне из этого правила есть исключения: пробелы до `<head>` по стандарту игнорируются, а любое содержимое после `</body>` не создаёт узла, браузер переносит его внутрь, в конец `body`.
-
-В остальных случаях всё честно -- если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:
-
-```html
-<!--+ no-beautify -->
-<!DOCTYPE HTML>
-<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
-```
-
-<div class="domtree"></div>
-<script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"О лосях"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Правда о лосях\n"}]}]}
-
-drawHtmlTree(node, 'div.domtree', 690, 300);
-</script>
-
-## Автоисправление
-
-При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM.
-
-В частности, всегда будет верхний тег `<html>`. Даже если в тексте нет -- в DOM он будет, браузер создаст его самостоятельно. 
-
-То же самое касается и тега `<body>`. 
-
-Например, если файл состоит из одного слова `"Привет"`, то браузер автоматически обернёт его в `<html>` и `<body>`. 
-
-**При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.**
-
-Такой документ:
-
-```html
-<!--+ no-beautify -->
-<p>Привет
-<li>Мама
-<li>и
-<li>Папа
-```
-
-...Превратится вот во вполне респектабельный DOM, браузер сам закроет теги:
-
-<div class="domtree"></div>
-<script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Привет\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Мама\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"и\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Папа\n"}]}]}]}
-
-drawHtmlTree(node, 'div.domtree', 690, 400);
-</script>
-
-[warn header="Таблицы всегда содержат `<tbody>`"]
-Важный "особый случай" при работе с DOM -- таблицы. По стандарту DOM они обязаны иметь `<tbody>`, однако в HTML их можно написать без него. В этом случае браузер добавляет `<tbody>` самостоятельно.
-
-Например, для такого HTML:
-
-```html
-<!--+ no-beautify -->
-<table id="table">
-  <tr><td>1</td></tr>
-</table>
-```
-
-DOM-структура будет такой:
-<div class="domtree"></div>
-<script>
-var node = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]},{"name":"#text","nodeType":3,"content":"\n"}]}]}]};
-
-drawHtmlTree(node,  'div.domtree', 600, 200);
-</script>
-
-Вы видите? Появился `<tbody>`, как будто документ был таким:
-
-```html
-<!--+ no-beautify -->
-<table>
-*!*
-  <tbody>
-*/!*
-    <tr><td>1</td></tr>
-*!*
-  </tbody>
-*/!*
-</table>
-```
-
-Важно знать об этом, иначе при работе с таблицами возможны сюрпризы.
-[/warn]
-
-
-## Другие типы узлов
-
-Дополним страницу новыми тегами и комментарием:
-
-```html
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  Правда о лосях
-  <ol>
-    <li>Лось — животное хитрое</li>
-*!*
-    <!-- комментарий -->
-*/!*
-    <li>...и коварное!</li>
-  </ol>
-</body>
-
-</html>
-```
-
-<div class="domtree"></div>
-<script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    Правда о лосях\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Лось — животное хитрое"}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":" комментарий "},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...и коварное!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n\n"}]}]};
-
-drawHtmlTree(node, 'div.domtree', 690, 550);
-</script>
-
-**В этом примере тегов уже больше, и даже появился узел нового типа -- *комментарий*.**
-
-Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML -- обязан присутствовать в DOM-дереве.
-
-**Всё, что есть в HTML, находится и в DOM.** 
-
-Даже директива `<!DOCTYPE...>`, которую мы ставим в начале HTML, тоже является DOM-узлом, и находится в дереве DOM непосредственно перед `<html>`. На иллюстрациях выше этот факт скрыт, поскольку мы с этим узлом работать не будем, он никогда не нужен. 
-
-Даже сам объект `document`, формально, является DOM-узлом, самым-самым корневым.
-
-Всего различают 12 типов узлов, но на практике мы работаем с четырьмя из них:
-<ol>
-<li>Документ -- точка входа в DOM.</li>
-<li>Элементы -- основные строительные блоки.</li>
-<li>Текстовые узлы -- содержат, собственно, текст.</li>
-<li>Комментарии -- иногда в них можно включить информацию, которая не будет показана, но доступна из JS.</li>
-</ol>
-
-## Возможности, которые дает DOM
-
-Зачем, кроме красивых рисунков, нужна иерархическая модель DOM? 
-
-**DOM нужен для того, чтобы манипулировать страницей -- читать информацию из HTML, создавать и изменять элементы.** 
-
-Узел `HTML`  можно получить как `document.documentElement`, а `BODY` -- как `document.body`. 
-
-Получив узел, мы можем что-то сделать с ним.
-
-Например, можно поменять цвет `BODY` и вернуть обратно:
-
-```js
-//+ run
-document.body.style.backgroundColor = 'red';
-alert( 'Поменяли цвет BODY' );
-
-document.body.style.backgroundColor = '';
-alert( 'Сбросили цвет BODY' );
-```
-
-DOM предоставляет возможность делать со страницей всё, что угодно.
-
-Позже мы более подробно рассмотрим различные свойства и методы DOM-узлов.
-
-
-## Особенности IE8-
-
-IE8- не генерирует текстовые узлы, если они состоят только из пробелов.
-
- То есть, такие два документа дадут идентичный DOM:
-
-```html
-<!--+ no-beautify -->
-<!DOCTYPE HTML>
-<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
-```
-
-И такой:
-
-```html
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>О лосях</title>
-</head>
-
-<body>
-  Правда о лосях
-</body>
-
-</html>
-```
-
-Эта, с позволения сказать, "оптимизация" не соответствует стандарту и IE9+ уже работает как нужно, то есть как описано ранее.
-
-Но, по большому счёту, для нас это отличие должно быть без разницы, ведь при работе с DOM/HTML мы в любом случае не должны быть завязаны на то, есть пробел между тегами или его нет. Мало ли, сегодня он есть, а завтра решили переформатировать HTML и его не стало.
-
-К счастью, свойства и методы DOM, которые мы пройдём далее, вполне позволяют писать код, который будет работать корректно во всех версиях браузеров. Так что знать об этом отличии надо, если вы хотите поддерживать старые IE, но проблем оно нам создавать не будет.
-
-## Итого
-
-<ul>
-<li>DOM-модель -- это внутреннее представление HTML-страницы в виде дерева.</li>
-<li>Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.</li>
-<li>У элементов DOM есть свойства и методы, которые позволяют изменять их.</li>
-<li>IE8- не генерирует пробельные узлы.</li>
-</ul>
-
-Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.
-
-В следующих главах мы познакомимся с DOM более плотно.
-
-[libs]
-d3
-domtree
-[/libs]
\ No newline at end of file
diff --git a/2-ui/1-document/3-dom-console/1.png b/2-ui/1-document/3-dom-console/1.png
deleted file mode 100644
index 6ba0e56d..00000000
Binary files a/2-ui/1-document/3-dom-console/1.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/1@2x.png b/2-ui/1-document/3-dom-console/1@2x.png
deleted file mode 100755
index ef193506..00000000
Binary files a/2-ui/1-document/3-dom-console/1@2x.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/2.png b/2-ui/1-document/3-dom-console/2.png
deleted file mode 100644
index 260e183c..00000000
Binary files a/2-ui/1-document/3-dom-console/2.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/2@2x.png b/2-ui/1-document/3-dom-console/2@2x.png
deleted file mode 100755
index 4159c07b..00000000
Binary files a/2-ui/1-document/3-dom-console/2@2x.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/3.png b/2-ui/1-document/3-dom-console/3.png
deleted file mode 100644
index 2be09128..00000000
Binary files a/2-ui/1-document/3-dom-console/3.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/3@2x.png b/2-ui/1-document/3-dom-console/3@2x.png
deleted file mode 100755
index 2d9a6bd3..00000000
Binary files a/2-ui/1-document/3-dom-console/3@2x.png and /dev/null differ
diff --git a/2-ui/1-document/3-dom-console/article.md b/2-ui/1-document/3-dom-console/article.md
deleted file mode 100644
index 0d7951b3..00000000
--- a/2-ui/1-document/3-dom-console/article.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Работа с DOM из консоли
-
-Исследовать и изменять DOM можно с помощью инструментов разработки, встроенных в браузер. Посмотрим средства для этого на примере Google Chrome.
-[cut]
-
-## Доступ к элементу
-
-Откройте документ [losi.html](losi.html) и, в инструментах разработчика, перейдите во вкладку Elements.
-
-Чтобы проанализировать любой элемент:
-<ul>
-<li>Выберите его во вкладке Elements.</li>
-<li>...Либо внизу вкладки Elements есть лупа, при нажатии на которую можно выбрать элемент кликом.</li>
-<li>...Либо, что обычно удобнее всего, просто кликните на нужном месте на странице правой кнопкой и выберите в меню "Проверить Элемент".</li>
-</ul>
-
-<img src="1.png">
-
-Справа будет различная информация об элементе:
-<dl>
-<dt>Computed Style</dt>
-<dd>Итоговые свойства CSS элемента, которые он приобрёл в результате применения всего каскада стилей, включая внешние CSS-файлы и атрибут `style`.</dd>
-<dt>Style</dt>
-<dd>Каскад стилей, применённый к элементу. Каждое стилевое правило отдельно, здесь же можно менять стили кликом.</dd>
-<dt>Metrics</dt>
-<dd>Размеры элемента.</dd>
-<dt>...</dt>
-<dd>И еще некоторые реже используемые вкладки, которые станут понятны по мере изучения DOM.</dd>
-</dl>
-
-[warn header="DOM в Elements не совсем соответствует реальному"]
-Отображение DOM во вкладке Elements не совсем соответствует реальному. В частности, там не отображаются пробельные узлы. Это сделано для удобства просмотра. Но мы-то знаем, что они есть. 
-
-С другой стороны, в Elements можно увидеть CSS-псевдоэлементы, такие как `::before`, `::after`. Это также сделано для удобства, в DOM их не существует.
-[/warn]
-
-
-## Выбранные элементы $0 $1...
-
-Зачастую бывает нужно выбрать элемент DOM и сделать с ним что-то на JavaScript. 
-
-Находясь во вкладке Elements, откройте консоль нажатием Esc (или перейдите на вкладку Console).
-
-**Последний элемент, выбранный во вкладке Elements, доступен в консоли как `$0`, предыдущий -- `$1` и так далее.**
-
-Запустите на элементе команду, которая делает его красным:
-
-```js
-$0.style.backgroundColor = 'red';
-```
-
-В браузере это может выглядеть примерно так:
-
-<img src="2.png">
-
-Мы выделили элемент, применили к нему JavaScript в консоли, тут же увидели изменения в браузере.
-
-Есть и обратная дорожка. Любой элемент из JS-переменной можно посмотреть во вкладке Elements, для этого:
-
-<ol>
-<li>Выведите эту переменную в консоли, например при помощи `console.log`.</li>
-<li>Кликните на выводе в консоли правой кнопкой мыши.</li>
-<li>Выберите соответствующий пункт меню.</li>
-</ol>
-
-<img src="3.png">
-
-Таким образом, можно легко перемещаться из Elements в консоль и обратно.
-
-## Ещё методы консоли
-
-Для поиска элементов в консоли есть два специальных метода:
-<ul>
-<li>`$$("div.my")` -- ищет все элементы в DOM по данному CSS-селектору.</li>
-<li>`$("div.my")` -- ищет первый элемент в DOM по данному CSS-селектору.</li>
-</ul>
-
-Более полная документация по методам консоли доступна на страницах [Console API Reference для Chrome](https://developers.google.com/chrome-developer-tools/docs/console-api) и [Command Line API для Firebug](https://getfirebug.com/wiki/index.php/Command_Line_API), а также на [firebug.ru](http://firebug.ru).
-
-Другие браузеры реализуют похожий функционал, освоив Chrome/Firebug, вы легко с ними разберётесь.
diff --git a/2-ui/1-document/3-dom-console/losi.html b/2-ui/1-document/3-dom-console/losi.html
deleted file mode 100644
index 06f8da0d..00000000
--- a/2-ui/1-document/3-dom-console/losi.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  Правда о лосях
-  <ol>
-    <li>Лось — животное хитрое</li>
-    <!-- комментарий -->
-    <li>..И коварное!</li>
-  </ol>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md b/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md
deleted file mode 100644
index e620832e..00000000
--- a/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# HEAD
-
-Два способа:
-
-```js
-document.documentElement.children[0]
-document.documentElement.firstChild
-```
-
-Второй способ работает, так как пробелы перед `<head>` игнорируются.
-
-Также в современных браузерах доступен `document.head`.
-
-# UL
-
-Например, так:
-
-```js
-document.body.children[1]
-```
-
-# LI
-
-Можно так:
-
-```js
-document.body.children[1].children[1]; // LI
-```
-
-Может возникнуть проблема с комментарием в IE8-, так как он станет одним из `children`, в результате последний код станет работать некорректно.
-
-В последующих разделах учебника мы рассмотрим другие методы поиска по DOM, которые позволят эту проблему обойти.
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/task.md b/2-ui/1-document/4-traversing-dom/1-dom-children/task.md
deleted file mode 100644
index 21e85842..00000000
--- a/2-ui/1-document/4-traversing-dom/1-dom-children/task.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# DOM children
-
-[importance 5]
-
-Для страницы:
-
-```html
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <div>Пользователи:</div>
-  <ul>
-    <li>Маша</li>
-    <li>Вовочка</li>
-  </ul>
-
-  <!-- комментарий -->
-
-  <script>
-    // ... ваш код
-  </script>
-
-</body>
-
-</html>
-```
-
-<ul>
-<li>Напишите код, который получит элемент `HEAD`.</li>
-<li>Напишите код, который получит `UL`.</li>
-<li>Напишите код, который получит второй `LI`. Будет ли ваш код работать в IE8-, если комментарий переместить *между* элементами `LI`?</li>
-</ul>
-
diff --git a/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md b/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md
deleted file mode 100644
index 07ee2da5..00000000
--- a/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Вначале нерабочие способы, которые могут прийти на ум:
-
-```js
-//+ no-beautify
-if (!elem) { .. }
-```
-
-Это не работает, так как `elem` всегда есть, и является объектом. Так что проверка `if (elem)` всегда верна, вне зависимости от того, есть ли у `elem` потомки.
-
-```js
-//+ no-beautify
-if (!elem.childNodes) { ... }
-```
-
-Тоже не работает, так как псевдо-массив `childNodes` всегда существует. Он может быть пуст или непуст, но он всегда является объектом, так что проверка `if (elem.childNodes)` всегда верна.
-
-Несколько рабочих способов:
-
-```js
-//+ no-beautify
-if (!elem.childNodes.length) { ... }
-
-if (!elem.firstChild) { ... }
-
-if (!elem.lastChild) { ... }
-```
-
-Также существует метод [hasChildNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node.hasChildNodes), который позволяет вызовом `elem.hasChildNodes()` определить наличие детей. Он работает так же, как проверка `elem.childNodes.length != 0`.
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md b/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md
deleted file mode 100644
index 7532f1fc..00000000
--- a/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Проверка существования детей
-
-[importance 5]
-
-Придумайте самый короткий код для проверки, пуст ли элемент `elem`. 
-
-"Пустой" -- значит нет дочерних узлов, даже текстовых.
-
-```js
-//+ no-beautify
-if (/*...ваш код проверки elem... */) { узел elem пуст }
-```
-
-Что написать в условии `if` ?
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md
deleted file mode 100644
index ca09870b..00000000
--- a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-<ol>
-<li>Да, верно, с оговоркой. Элемент `elem.lastChild` последний, у него нет правого соседа. 
-
-**Оговорка:** `elem.lastChild.nextSibling` выдаст ошибку если `elem` не имеет детей.
-</li>
-<LI>Нет, неверно, это может быть текстовый узел. Значением `elem.children[0]` является первый узел-элемент, перед ним может быть текст.
-
-Аналогично предыдущему случаю, если у `elem` нет детей-элементов -- будет ошибка.
-</li>
-</ul>
diff --git a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md
deleted file mode 100644
index 993d7d8b..00000000
--- a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Вопрос по навигационным ссылкам
-
-[importance 5]
-
-Если `elem` -- это произвольный узел DOM...
-
-Верно ли, что `elem.lastChild.nextSibling` всегда `null`?
-
-Верно ли, что `elem.children[0].previousSibling` всегда `null` ?
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.md b/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.md
deleted file mode 100644
index 27da4a11..00000000
--- a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Для удобства работы с таблицей используем специальные свойства `rows` и `cells`.
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.view/index.html b/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.view/index.html
deleted file mode 100644
index fc03772e..00000000
--- a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.view/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    
-    td {
-      border: 1px solid black;
-      padding: 3px 5px;
-    }
-  </style>
-</head>
-
-<body>
-  <table>
-    <tr>
-      <td>1:1</td>
-      <td>2:1</td>
-      <td>3:1</td>
-      <td>4:1</td>
-      <td>5:1</td>
-    </tr>
-    <tr>
-      <td>1:2</td>
-      <td>2:2</td>
-      <td>3:2</td>
-      <td>4:2</td>
-      <td>5:2</td>
-    </tr>
-    <tr>
-      <td>1:3</td>
-      <td>2:3</td>
-      <td>3:3</td>
-      <td>4:3</td>
-      <td>5:3</td>
-    </tr>
-    <tr>
-      <td>1:4</td>
-      <td>2:4</td>
-      <td>3:4</td>
-      <td>4:4</td>
-      <td>5:4</td>
-    </tr>
-    <tr>
-      <td>1:5</td>
-      <td>2:5</td>
-      <td>3:5</td>
-      <td>4:5</td>
-      <td>5:5</td>
-    </tr>
-  </table>
-  <script>
-    var table = document.body.children[0];
-
-    for (var i = 0; i < table.rows.length; i++) {
-      var row = table.rows[i];
-      row.cells[i].style.backgroundColor = 'red';
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/source.view/index.html b/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/source.view/index.html
deleted file mode 100644
index d9b40920..00000000
--- a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/source.view/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    
-    td {
-      border: 1px solid black;
-      padding: 3px 5px;
-    }
-  </style>
-</head>
-
-<body>
-  <table>
-    <tr>
-      <td>1:1</td>
-      <td>2:1</td>
-      <td>3:1</td>
-      <td>4:1</td>
-      <td>5:1</td>
-    </tr>
-    <tr>
-      <td>1:2</td>
-      <td>2:2</td>
-      <td>3:2</td>
-      <td>4:2</td>
-      <td>5:2</td>
-    </tr>
-    <tr>
-      <td>1:3</td>
-      <td>2:3</td>
-      <td>3:3</td>
-      <td>4:3</td>
-      <td>5:3</td>
-    </tr>
-    <tr>
-      <td>1:4</td>
-      <td>2:4</td>
-      <td>3:4</td>
-      <td>4:4</td>
-      <td>5:4</td>
-    </tr>
-    <tr>
-      <td>1:5</td>
-      <td>2:5</td>
-      <td>3:5</td>
-      <td>4:5</td>
-      <td>5:5</td>
-    </tr>
-  </table>
-  <script>
-    var table = document.body.children[0];
-
-    /* ваш код */
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/task.md b/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/task.md
deleted file mode 100644
index 92034c40..00000000
--- a/2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Выделите ячейки по диагонали
-
-[importance 5]
-
-Напишите код, который выделит все ячейки в таблице по диагонали.
-
-Вам нужно будет получить из таблицы `table` все диагональные `td` и выделить их, используя код:
-
-```js
-// в переменной td DOM-элемент для тега <td>
-td.style.backgroundColor = 'red';
-```
-
-Должно получиться так:
-[iframe src="solution" height=180]
-
-
diff --git a/2-ui/1-document/4-traversing-dom/article.md b/2-ui/1-document/4-traversing-dom/article.md
deleted file mode 100644
index 13ef881a..00000000
--- a/2-ui/1-document/4-traversing-dom/article.md
+++ /dev/null
@@ -1,433 +0,0 @@
-# Навигация по DOM-элементам
-
-DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала нужный элемент получить.
-
-Доступ к DOM начинается с объекта `document`. Из него можно добраться до любых узлов.
-
-[cut]
-
-Так выглядят основные ссылки, по которым можно переходить между узлами DOM:
-
-<img src="dom-links.png">
-
-Посмотрим на них повнимательнее.
-
-## Сверху documentElement и body   
-
-Самые верхние элементы дерева доступны напрямую из `document`.
-
-<dl>
-<dt>`<HTML>` = `document.documentElement`</dt>
-<dd>Первая точка входа -- `document.documentElement`. Это свойство ссылается на DOM-объект для тега `<html>`.</dd>
-<dt>`<BODY>` = `document.body`</dt>
-<dd>Вторая точка входа -- `document.body`, который соответствует тегу `<body>`.</dd>
-</dl>
-
-В современных браузерах (кроме IE8-) также есть `document.head` -- прямая ссылка на `<head>`
-
-[warn header="Есть одна тонкость: `document.body` может быть равен `null`"]
-Нельзя получить доступ к элементу, которого еще не существует в момент выполнения скрипта.
-
-В частности, если скрипт находится в `<head>`, то в нём недоступен `document.body`.
-
-Поэтому в следующем примере первый `alert` выведет `null`:
-
-```html
-<!--+ run -->
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <script>
-*!*
-    alert( "Из HEAD: " + document.body ); // null, body ещё нет
-*/!*
-  </script>
-</head>
-
-<body>
-
-  <script>
-    alert( "Из BODY: " + document.body ); // body есть
-  </script>
-
-</body>
-
-</html>
-```
-[/warn]
-
-[smart header="В DOM активно используется `null`"]
-В мире DOM в качестве значения, обозначающего "нет такого элемента" или "узел не найден", используется не `undefined`, а `null`.
-[/smart]
-
-
-## Дети: childNodes, firstChild, lastChild
-
-Здесь и далее мы будем использовать два принципиально разных термина.
-
-<ul>
-<li>**Дочерние элементы (или дети)** -- элементы, которые лежат *непосредственно* внутри данного. Например, внутри `<HTML>` обычно лежат `<HEAD>` и `<BODY>`.</li>
-<li>**Потомки** -- все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM.</li>
-</ul>
-
-Псевдо-массив `childNodes` хранит все дочерние элементы, включая текстовые.
-
-Пример ниже последовательно выведет дочерние элементы `document.body`:
-
-```html
-<!--+ run -->
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  <div>Начало</div>
-
-  <ul>
-    <li>Информация</li>
-  </ul>
-
-  <div>Конец</div>
-
-  <script>
-*!* 
-    for (var i = 0; i < document.body.childNodes.length; i++) {
-      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
-    }
-*/!*
-  </script>
-  ...
-</body>
-
-</html>
-```
-
-Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент `<script>`. На самом-то деле в документе есть ещё текст (обозначенный троеточием), но на момент выполнения скрипта браузер ещё до него не дошёл.
-
-Пробельный узел будет в *итоговом документе*, но его еще нет на момент выполнения скрипта.
-
-[warn header="Список детей -- только для чтения!"]
-Скажем больше -- все навигационные свойства, которые перечислены в этой главе -- только для чтения. Нельзя просто заменить элемент присвоением `childNodes[i] = ...`. 
-
-Изменение DOM осуществляется другими методами, которые мы рассмотрим далее, все навигационные ссылки при этом обновляются автоматически.
-[/warn]
-
-Свойства `firstChild` и `lastChild` обеспечивают быстрый доступ к первому и последнему элементу.
-
-При наличии дочерних узлов всегда верно:
-```js
-elem.childNodes[0] === elem.firstChild
-elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
-```
-
-## Коллекции -- не массивы
-
-DOM-коллекции, такие как `childNodes` и другие, которые мы увидим далее, не являются JavaScript-массивами.
-
-В них нет методов массивов, таких как `forEach`, `map`, `push`, `pop` и других.
-
-```js
-//+ run
-var elems = document.documentElement.childNodes;
-
-*!*
-elems.forEach(function(elem) { // нет такого метода!
-*/!*
-  /* ... */
-});
-```
-
-Именно поэтому `childNodes` и называют "коллекция" или "псевдомассив".
-
-Можно для перебора коллекции использовать обычный цикл `for(var i=0; i<elems.length; i++) ...` Но что делать, если уж очень хочется воспользоваться методами массива?
-
-Это возможно, основных варианта два:
-
-<ol>
-<li>Применить метод массива через `call/apply`:
-
-```js
-//+ run
-var elems = document.documentElement.childNodes;
-
-*!*
-[].forEach.call(elems, function(elem) {
-*/!*
-  alert( elem ); // HEAD, текст, BODY
-});
-```
-
-</li>
-<li>При помощи [Array.prototype.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) сделать из коллекции массив.
-
-Обычно вызов `arr.slice(a, b)` делает новый массив и копирует туда элементы `arr` с индексами от `a` до `b-1` включительно. Если же вызвать его без аргументов `arr.slice()`, то он делает новый массив и копирует туда все элементы  `arr`. 
-
-Это работает и для коллекции:
-
-```js
-//+ run
-var elems = document.documentElement.childNodes;
-*!*
-elems = Array.prototype.slice.call(elems); // теперь elems - массив
-*/!*
-
-elems.forEach(function(elem) {
-  alert( elem.tagName ); // HEAD, текст, BODY
-});
-```
-
-</li>
-</ol>
-
-
-[warn header="Нельзя перебирать коллекцию через `for..in`"]
-Ранее мы говорили, что не рекомендуется использовать для перебора массива цикл `for..in`.
-
-**Коллекции -- наглядный пример, почему нельзя. Они похожи на массивы, но у них есть свои свойства и методы, которых в массивах нет.**
-
-К примеру, код ниже должен перебрать все дочерние элементы `<html>`. Их, естественно, два: `<head>` и `<body>`. Максимум, три, если взять ещё и текст между ними.
-
-Но в примере ниже `alert` сработает не три, а целых 5 раз!
-
-```js
-//+ run
-var elems = document.documentElement.childNodes;
-
-for (var key in elems) {
-  alert( key ); // 0, 1, 2, length, item
-}
-```
-
-Цикл `for..in` выведет не только ожидаемые индексы `0`, `1`, `2`, по которым лежат узлы в коллекции, но и свойство `length` (в коллекции оно enumerable), а также функцию `item(n)` -- она никогда не используется, возвращает `n-й` элемент коллекции, проще обратиться по индексу `[n]`. 
-
-В реальном коде нам нужны только элементы, мы же будем работать с ними, а служебные свойства -- не нужны. Поэтому желательно использовать `for(var i=0; i<elems.length; i++)`.
-[/warn]
-
-
-## Соседи и родитель
-
-Доступ к элементам слева и справа данного можно получить по ссылкам `previousSibling` / `nextSibling`.
-
-Родитель доступен через `parentNode`. Если долго идти от одного элемента к другому, то рано или поздно дойдёшь до корня DOM, то есть до `document.documentElement`, а затем и `document`.
-
-
-## Навигация только по элементам
-
-Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в `childNodes` сосуществуют и текстовые узлы и узлы-элементы и узлы-комментарии, если есть.
-
-Но для большинства задач текстовые узлы нам не интересны.
-
-Поэтому посмотрим на дополнительный набор ссылок, которые их не учитывают:
-
-<img src="dom-links-elements.png">
-
-Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово `Element`:
-
-<ul>
-<li>`children` -- только дочерние узлы-элементы, то есть соответствующие тегам.</li>
-<li>`firstElementChild`, `lastElementChild` -- соответственно, первый и последний дети-элементы.</li>
-<li>`previousElementSibling`, `nextElementSibling` -- соседи-элементы.</li>
-<li>`parentElement` -- родитель-элемент.</li>
-</ul>
- 
-[smart header="Зачем `parentElement`? Неужели бывают родители не-элементы?"]
-Свойство `elem.parentNode` возвращает родитель элемента. 
-
-Оно всегда равно `parentElement`, кроме одного исключения:
-
-```js
-//+ run
-alert( document.documentElement.parentNode ); // document
-alert( document.documentElement.parentElement ); // null
-```
-
-Иногда это имеет значение, если хочется перебрать всех предков и вызвать какой-то метод, а на документе его нет.
-[/smart]
-
-Модифицируем предыдущий пример, применив `children` вместо `childNodes`. 
-
-Теперь он будет выводить не все узлы, а только узлы-элементы:
-
-
-```html
-<!--+ run -->
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  <div>Начало</div>
-
-  <ul>
-    <li>Информация</li>
-  </ul>
-
-  <div>Конец</div>
-
-  <script>
-*!* 
-    for (var i = 0; i < document.body.children.length; i++) {
-      alert( document.body.children[i] ); // DIV, UL, DIV, SCRIPT
-    }
-*/!*
-  </script>
-  ...
-</body>
-
-</html>
-```
-
-Всегда верны равенства:
-
-```js
-elem.firstElementChild === elem.children[0]
-elem.lastElementChild === elem.children[elem.children.length - 1]
-```
-
-
-[warn header="В IE8- поддерживается только `children`"]
-Других навигационных свойств в этих браузерах нет. Впрочем, как мы увидим далее, можно легко сделать полифилл, и они, всё же, будут.
-[/warn]
-
-
-[warn header="В IE8- в `children` присутствуют узлы-комментарии"]
-С точки зрения стандарта это ошибка, но IE8- также включает в `children` узлы, соответствующие HTML-комментариям.
-
-Это может привести к сюрпризам при использовании свойства `children`, поэтому HTML-комментарии либо убирают либо используют фреймворк, к примеру, jQuery, который даёт свои методы перебора и отфильтрует их.
-[/warn]
-
-## Особые ссылки для таблиц [#dom-navigation-tables]
-
-У конкретных элементов DOM могут быть свои дополнительные ссылки для большего удобства навигации.
-
-Здесь мы рассмотрим таблицу, так как это важный частный случай и просто для примера. 
-
-В списке ниже выделены наиболее полезные:
-
-<dl>
-<dt>`TABLE`</dt>
-<dd>
-<ul>
-<li>**`table.rows`** -- коллекция строк `TR` таблицы.</li>
-<li>`table.caption/tHead/tFoot` -- ссылки на элементы таблицы `CAPTION`, `THEAD`, `TFOOT`.</li>
-<li>`table.tBodies` -- коллекция элементов таблицы `TBODY`, по спецификации их может быть несколько.</li>
-</ul></dd>
-<dt>`THEAD/TFOOT/TBODY`</dt>
-<dd>
-<ul>
-<li>`tbody.rows` -- коллекция строк `TR` секции.</li>
-</ul></dd>
-<dt>`TR`</dt>
-<dd>
-<ul>
-<li>**`tr.cells`** -- коллекция ячеек `TD/TH`</li>
-<li>**`tr.sectionRowIndex`** -- номер строки в текущей секции `THEAD/TBODY`</li>
-<li>`tr.rowIndex` -- номер строки в таблице</li>
-</ul>
-</dd>
-<dt>`TD/TH`</dt>
-<dd>
-<ul>
-<li>**`td.cellIndex`** -- номер ячейки в строке</li>
-</ul>
-</dd>
-</dl>
-
-Пример использования:
-
-```html
-<!--+ run height=100 -->
-<table>
-  <tr> 
-    <td>один</td> <td>два</td>    
-  </tr>
-  <tr> 
-    <td>три</td>  <td>четыре</td> 
-  </tr>
-</table>
-
-<script>
-var table = document.body.children[0];
-
-alert( table.*!*rows[0].cells[0]*/!*.innerHTML ) // "один"
-</script>
-```
-
-Спецификация: [HTML5: tabular data](http://www.w3.org/TR/html5/tabular-data.html).
-
-Даже если эти свойства не нужны вам прямо сейчас, имейте их в виду на будущее, когда понадобится пройтись по таблице.
-
-Конечно же, таблицы -- не исключение. 
-
-Аналогичные полезные свойства есть у HTML-форм, они позволяют из формы получить все её элементы, а из них -- в свою очередь, форму. Мы рассмотрим их позже.
-
-[online]
-# Интерактивное путешествие
-
-Для того, чтобы убедиться, что вы разобрались с навигацией по DOM-ссылкам -- вашему вниманию предлагается интерактивное путешествие по DOM.
-
-Ниже вы найдёте документ (в ифрейме), и кнопки для перехода по нему. 
-
-Изначальный элемент -- `<html>`. Попробуйте по ссылкам найти "информацию". Или ещё чего-нибудь.
-
-Вы также можете открыть документ [в отдельном окне](travel/) и походить по нему в браузерной консоли разработчика, чтобы лучше понять разницу между показанным там DOM и реальным.
-
-Разметка:
-
-[html src="travel/index.html"/]
-
-Документ:
-
-[iframe samedomain id="travel-dom-iframe" src="travel" height=150]
-
-<div id="travel-dom-control">
-
-Навигация:
-<ul>
-<li><input type="button" data-travel-dir="parentNode" value="Вверх (parentNode)">
-  <ul>
-    <li><input type="button" data-travel-dir="previousSibling" value="previousSibling"></li>
-    <li><b>Здесь стоите вы <code data-travel-prop="nodeText"></code></b>
-      <ul>
-        <li><input type="button" data-travel-dir="firstChild" value="firstChild"></li>
-        <li><input type="button" data-travel-dir="lastChild" value="lastChild"></li>
-      </ul>
-    </li>
-    <li><input type="button" data-travel-dir="nextSibling" value="nextSibling"></li>
-  </ul>
-</li>
-</ul>
-
-<div id="travel-dom-comment"></div>
-
-
-</div>
-
-<script src="/script/travel.js"></script>
-[/online]
-
-# Итого
-
-В DOM доступна навигация по соседним узлам через ссылки:
-<ul>
-<li>По любым узлам.</li>
-<li>Только по элементам.</li>
-</ul>
-
-Также некоторые виды элементов предоставляют дополнительные ссылки для большего удобства, например у таблиц есть свойства для доступа к строкам/ячейкам.
-
-[libs]
-d3
-domtree
-[/libs]
-[head]
-
-<style>
-#travel-dom-comment { 
-  font-style: italic;
-}
-#travel-dom-control ul {
-  margin: 6px 0;
-}
-</style>
-[/head]
-
diff --git a/2-ui/1-document/4-traversing-dom/dom-links-elements.png b/2-ui/1-document/4-traversing-dom/dom-links-elements.png
deleted file mode 100644
index c1d1a0fe..00000000
Binary files a/2-ui/1-document/4-traversing-dom/dom-links-elements.png and /dev/null differ
diff --git a/2-ui/1-document/4-traversing-dom/dom-links-elements@2x.png b/2-ui/1-document/4-traversing-dom/dom-links-elements@2x.png
deleted file mode 100644
index 2f2b8313..00000000
Binary files a/2-ui/1-document/4-traversing-dom/dom-links-elements@2x.png and /dev/null differ
diff --git a/2-ui/1-document/4-traversing-dom/dom-links.png b/2-ui/1-document/4-traversing-dom/dom-links.png
deleted file mode 100644
index d7a3ec1a..00000000
Binary files a/2-ui/1-document/4-traversing-dom/dom-links.png and /dev/null differ
diff --git a/2-ui/1-document/4-traversing-dom/dom-links@2x.png b/2-ui/1-document/4-traversing-dom/dom-links@2x.png
deleted file mode 100644
index d800f76e..00000000
Binary files a/2-ui/1-document/4-traversing-dom/dom-links@2x.png and /dev/null differ
diff --git a/2-ui/1-document/4-traversing-dom/travel.view/index.html b/2-ui/1-document/4-traversing-dom/travel.view/index.html
deleted file mode 100644
index 80e28414..00000000
--- a/2-ui/1-document/4-traversing-dom/travel.view/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Документ</title>
-  </head>
-  <body>
-    <div id="header">Шапка</div>
-
-    <ul>
-      <li> 
-        <span style="background-color:red">Осторожно</span>
-      </li>
-      <li class="info"><input type="text" value="Информация"></li>
-
-    </ul>
-    <div id="footer">Подвал. &copy; javascript.ru</div>
-    <!-- комментарий -->
-  </body>
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/5-searching-elements-dom/1-find-elements/solution.md
deleted file mode 100644
index 210933da..00000000
--- a/2-ui/1-document/5-searching-elements-dom/1-find-elements/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Есть много вариантов решения, вот некоторые из них:
-
-```js
-// 1
-document.getElementById('age-table').getElementsByTagName('label');
-
-// 2
-document.getElementById('age-table').getElementsByTagName('td')[0];
-// в современных браузерах можно одним запросом:
-var result = document.querySelector('#age-table td');
-
-// 3
-document.getElementsByTagName('form')[1];
-
-// 4
-document.querySelector('form[name="search"]');
-
-// 5
-document.querySelector('form[name="search"] input')
-
-// 6
-document.getElementsByName("info[0]")[0];
-
-// 7
-document.querySelector('form[name="search-person"] [name="info[0]"]');
-```
diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html b/2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html
deleted file mode 100644
index 3484bc0c..00000000
--- a/2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <form name="search">
-    <label>Поиск по сайту:
-      <input type="text" name="search">
-    </label>
-    <input type="submit" value="Искать!">
-  </form>
-
-  <hr>
-
-  <form name="search-person">
-    Поиск по посетителям:
-    <table id="age-table">
-      <tr>
-        <td>Возраст:</td>
-        <td id="age-list">
-          <label>
-            <input type="radio" name="age" value="young">до 18</label>
-          <label>
-            <input type="radio" name="age" value="mature">18-50</label>
-          <label>
-            <input type="radio" name="age" value="senior">более 50</label>
-        </td>
-      </tr>
-
-      <tr>
-        <td>Дополнительно:</td>
-        <td>
-          <input type="text" name="info[0]">
-          <input type="text" name="info[1]">
-          <input type="text" name="info[2]">
-        </td>
-      </tr>
-
-    </table>
-
-    <input type="submit" value="Искать!">
-  </form>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/5-searching-elements-dom/1-find-elements/task.md
deleted file mode 100644
index fa959a95..00000000
--- a/2-ui/1-document/5-searching-elements-dom/1-find-elements/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Поиск элементов
-
-[importance 4]
-
-Ниже находится документ с таблицей и формой.
-
-Найдите (получите в переменную) в нём: 
-
-<ol>
-<li>Все элементы `label` внутри таблицы. Должно быть 3 элемента.</li>
-<li>Первую ячейку таблицы (со словом `"Возраст"`).</li>
-<li>Вторую форму в документе.</li>
-<li>Форму с именем `search`, без использования её позиции в документе.</li>
-<li>Элемент `input` в форме с именем `search`. Если их несколько, то нужен первый.</li>
-<li>Элемент с именем `info[0]`, без точного знания его позиции в документе.</li> 
-<li>Элемент с именем `info[0]`, внутри формы с именем `search-person`.</li>
-</ol>
-
-Используйте для этого консоль браузера, открыв страницу [table.html](table.html) в отдельном окне.
-
diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md b/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md
deleted file mode 100644
index 55b45737..00000000
--- a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Сделаем цикл по узлам `<li>`:
-
-```js
-var lis = document.getElementsByTagName('li');
-
-for (i = 0; i < lis.length; i++) {
-  ...
-}
-```
-
-В цикле для каждого `lis[i]` можно получить текст, используя свойство `firstChild`. Ведь первым в `<li>` является как раз текстовый узел, содержащий текст названия. 
-
-Также можно получить количество потомков, используя `lis[i].getElementsByTagName('li')`.
-
-Напишите код с этой подсказкой.
-
-Если уж не выйдет -- тогда откройте решение.
-
diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html b/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html
deleted file mode 100644
index e9b5d644..00000000
--- a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul>
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var lis = document.getElementsByTagName('li');
-
-    for (i = 0; i < lis.length; i++) {
-      // получить название из текстового узла
-      var title = lis[i].firstChild.data;
-
-      title = title.trim(); // убрать лишние пробелы с концов
-
-      // получить количество детей
-      var childCount = lis[i].getElementsByTagName('li').length;
-
-      alert(title + ': ' + childCount);
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html b/2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html
deleted file mode 100644
index 2f45460c..00000000
--- a/2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul>
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    // .. ваш код ..
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md b/2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md
deleted file mode 100644
index 5ffd808d..00000000
--- a/2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Дерево
-
-[importance 5]
-
-Есть дерево из тегов `<ul>/<li>`.
-
-Напишите код, который для каждого элемента `<li>` выведет:
-<ol>
-<li>Текст непосредственно в нём (без подразделов).</li>
-<li>Количество вложенных в него элементов `<li>` -- всех, с учётом вложенных.</li>
-</ol>
-
-[demo src="solution"]
-
diff --git a/2-ui/1-document/5-searching-elements-dom/article.md b/2-ui/1-document/5-searching-elements-dom/article.md
deleted file mode 100644
index d9faf1d1..00000000
--- a/2-ui/1-document/5-searching-elements-dom/article.md
+++ /dev/null
@@ -1,382 +0,0 @@
-# Поиск: getElement* и querySelector* и не только
-
-Прямая навигация от родителя к потомку удобна, если элементы рядом. А если нет?
-
-Как достать произвольный элемент откуда-то из глубины документа?
-
-Для этого в DOM есть дополнительные методы поиска.
-
-[cut]
-
-## document.getElementById или просто id
-
-Если элементу назначен специальный атрибут `id`, то можно получить его прямо по переменной с именем из значения `id`.
-
-Например:
-
-```html
-<!--+ run -->
-<div id="*!*content-holder*/!*">
-  <div id="*!*content*/!*">Элемент</div>
-</div>
-
-<script>
-*!*
-  alert( content ); // DOM-элемент
-  alert( window['content-holder'] ); // в имени дефис, поэтому через [...]
-*/!*
-</script>
-```
-
-Это поведение соответствует [стандарту](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem). Оно существует, в первую очередь, для совместимости, как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные переменные.  Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при этом возможны конфликты.
-
-**Более правильной и общепринятой практикой является доступ к элементу вызовом `document.getElementById("идентификатор")`.**
-
-Например:
-
-
-```html
-<!--+ run -->
-<div id="*!*content*/!*">Выделим этот элемент</div>
-
-<script>
-*!*
-  var elem = document.getElementById('content');
-
-  elem.style.background = 'red';
-
-  alert( elem == content ); // true
-
-  content.style.background = ""; // один и тот же элемент
-*/!*
-</script>
-```
-
-[smart header="Должен остаться только один"]
-По стандарту значение `id` должно быть уникально, то есть в документе может быть только один элемент с данным `id`. И именно он будет возвращён.
-
-Если в документе есть несколько элементов с уникальным `id`, то поведение неопределено. То есть, нет гарантии, что браузер вернёт именно первый или последний -- вернёт случайным образом. 
-
-Поэтому стараются следовать правилу уникальности `id`.
-[/smart]
-
-
-Далее в примерах я часто буду использовать прямое обращение через переменную, чтобы было меньше букв и проще было понять происходящее. Но предпочтительным методом является `document.getElementById`.
-
-
-## getElementsByTagName   
-
-Метод `elem.getElementsByTagName(tag)` ищет все элементы с заданным тегом `tag` внутри элемента `elem` и возвращает их в виде списка.
-
-Регистр тега не имеет значения.
-
-Например:
-```js
-// получить все div-элементы
-var elements = document.getElementsByTagName('div');
-```
-
-**Обратим внимание: в отличие от `getElementById`, который существует только в контексте `document`, метод `getElementsByTagName` может искать внутри любого элемента.**
-
-Например, найдём все элементы `input` внутри таблицы:
-
-```html
-<!--+ run height=50 -->
-<table id="age-table">
-  <tr>
-    <td>Ваш возраст:</td>
-
-    <td>
-      <label>
-        <input type="radio" name="age" value="young" checked> младше 18
-      </label>
-      <label>
-        <input type="radio" name="age" value="mature"> от 18 до 50
-      </label>
-      <label>
-        <input type="radio" name="age" value="senior"> старше 60
-      </label>
-    </td>
-  </tr>
-
-</table>
-
-<script>
-*!*
-  var tableElem = document.getElementById('age-table');
-  var elements = tableElem.getElementsByTagName('input');
-*/!*
-
-  for (var i = 0; i < elements.length; i++) {
-    var input = elements[i];
-    alert( input.value + ': ' + input.checked );
-  }
-</script>
-```
-
-**Можно получить всех потомков, передав звездочку `'*'` вместо тега:**
-
-```js
-// получить все элементы документа
-document.getElementsByTagName('*');
-
-// получить всех потомков элемента elem:
-elem.getElementsByTagName('*');
-```
-
-[warn header="Не забываем про букву `\"s\"`!"]
-Одна из самых частых ошибок начинающих (впрочем, иногда и не только) -- это забыть букву `"s"`, то есть пробовать вызывать метод `getElementByTagName` вместо <code>getElement<b>s</b>ByTagName</code>.
-
-Буква `"s"` не нужна там, где элемент только один, то есть в `getElementById`, в остальных методах она обязательна.
-[/warn]
-
-[warn header="Возвращается коллекция, а не элемент"]
-Другая частая ошибка -- это код вида:
-
-```js
-// не работает
-document.getElementsByTagName('input').value = 5;
-```
-
-То есть, вместо элемента присваивают значение коллекции. Работать такое не будет.
-
-Коллекцию нужно или перебрать в цикле или получить элемент по номеру и уже ему присваивать `value`, например так:
-
-```js
-// работает
-document.getElementsByTagName('input')[0].value = 5;
-```
-
-[/warn]
-
-## getElementsByName   
-
-Вызов `document.getElementsByName(name)` позволяет получить все элементы с данным атрибутом `name`.
-
-Например, все элементы с именем `age`:
-
-```js
-var elems = document.getElementsByName('age');
-```
-
-До появления стандарта HTML5 этот метод возвращал только те элементы, в которых предусмотрена поддержка атрибута `name`, в частности: `iframe`, `a`, `input` и другими. В современных браузерах (IE10+) тег не имеет значения.
-
-Используется этот метод весьма редко.
-
-## getElementsByClassName   
-
-Вызов `elem.getElementsByClassName(className)` возвращает коллекцию элементов с классом `className`. Находит элемент и в том случае, если у него несколько классов, а искомый - один из них.
-
-Поддерживается всеми современными браузерами, кроме IE8-.
-
-Например:
-
-```html
-<!--+ run height=50 -->
-<div class="article">Статья</div>
-<div class="long article">Длинная статья</div>
-
-<script>
-  var articles = document.getElementsByClassName('article');
-  alert( articles.length ); // 2, найдёт оба элемента
-</script>
-```
-
-Как и `getElementsByTagName`, этот метод может быть вызван и в контексте DOM-элемента и в контексте документа.
-
-
-## querySelectorAll [#querySelectorAll]
-
-Вызов `elem.querySelectorAll(css)` возвращает все элементы внутри `elem`, удовлетворяющие CSS-селектору `css`.
-
-Это один из самых часто используемых и полезных методов при работе с DOM.
-
-Он есть во всех современных браузерах, включая IE8+ (в режиме соответствия стандарту).
-
-Следующий запрос получает все элементы `LI`, которые являются последними потомками в `UL`:
-
-```html
-<!--+ run -->
-<ul>
-  <li>Этот</li>
-  <li>тест</li>
-</ul>
-<ul>
-  <li>полностью</li>
-  <li>пройден</li>
-</ul>
-<script>
-*!*
-  var elements = document.querySelectorAll('ul > li:last-child');
-*/!*
-
-  for (var i = 0; i < elements.length; i++) {
-    alert( elements[i].innerHTML ); // "тест", "пройден"
-  }
-</script>
-```
-
-## querySelector [#querySelector]
-
-Вызов `elem.querySelector(css)` возвращает не все, а только первый элемент, соответствующий CSS-селектору `css`.
-
-Иначе говоря, результат -- такой же, как и при `elem.querySelectorAll(css)[0]`, но в последнем вызове сначала ищутся все элементы, а потом берётся первый, а в `elem.querySelector(css)` ищется только первый, то есть он эффективнее.
-
-## matches
-
-Предыдущие методы искали по DOM.
-
-Метод [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) ничего не ищет, а проверяет, удовлетворяет ли `elem` селектору `css`. Он возвращает `true` либо `false`. 
-
-Не поддерживается в IE8-.
-
-Этот метод бывает полезным, когда мы перебираем элементы (в массиве или по обычным навигационным ссылкам) и пытаемся отфильтровать те из них, которые нам интересны.
-
-Ранее в спецификации он назывался `matchesSelector`, и большинство браузеров поддерживают его под этим старым именем, либо с префиксами `ms/moz/webkit`.
-
-Например:
-
-```html
-<!--+ run -->
-<a href="http://example.com/file.zip">...</a>
-<a href="http://ya.ru">...</a>
-
-<script>
-  var elems = document.body.children;
-
-  for (var i = 0; i < elems.length; i++) {
-*!*
-    if (elems[i].matches('a[href$="zip"]')) {
-*/!*
-      alert( "Ссылка на архив: " + elems[i].href );
-    }
-  }
-</script>
-```
-
-## closest
-
-Метод `elem.closest(css)` ищет ближайший элемент выше по иерархии DOM, подходящий под CSS-селектор `css`. Сам элемент тоже включается в поиск.
-
-Иначе говоря, метод `closest` бежит от текущего элемента вверх по цепочке родителей и проверяет, подходит ли элемент под указанный CSS-селектор. Если подходит -- останавливается и возвращает его.
-
-Он самый новый из методов, рассмотренных в этой главе, поэтому старые браузеры его слабо поддерживают. Это, конечно, легко поправимо, как мы увидим позже в главе [](/dom-polyfill).
-
-Пример использования (браузер должен поддерживать `closest`):
-
-```html
-<!--+ run -->
-<ul>
-  <li class="chapter">Глава I
-    <ul>
-      <li class="subchapter">Глава <span class="num">1.1</span></li>
-      <li class="subchapter">Глава <span class="num">1.2</span></li>
-    </ul>
-  </li>
-</ul>
-
-
-<script>
-  var numberSpan = document.querySelector('.num');
-
-  // ближайший элемент сверху подходящий под селектор li
-  alert(numberSpan.closest('li').className) // subchapter
-
-  // ближайший элемент сверху подходящий под селектор .chapter
-  alert(numberSpan.closest('.chapter').tagName) // LI
-
-  // ближайший элемент сверху, подходящий под селектор span
-  // это сам numberSpan, так как поиск включает в себя сам элемент
-  alert(numberSpan.closest('span') === numberSpan) // true
-</script>
-```
-
-## XPath в современных браузерах  
-
-Для полноты картины рассмотрим ещё один способ поиска, который обычно используется в XML. Это <a href="http://www.w3.org/TR/xpath/">язык запросов XPath</a>. 
-
-Он очень мощный, во многом мощнее CSS, но сложнее. Например, запрос для поиска элементов `H2`, содержащих текст `"XPath"`, будет выглядеть так: `//h2[contains(., "XPath")]`.
-
-Все современные браузеры, кроме IE, поддерживают XPath с синтаксисом, близким к [описанному в MDN](https://developer.mozilla.org/en/XPath).
-
-Найдем заголовки с текстом `XPath` в текущем документе:
-
-```js
-//+ run no-beautify
-var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null, 
-  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-for (var i = 0; i < result.snapshotLength; i++) {
-  alert( result.snapshotItem(i).outerHTML );
-}
-```
-
-IE тоже поддерживает XPath, но эта поддержка не соответствует стандарту и работает только для XML-документов, например, полученных с помощью `XMLHTTPRequest` (AJAX).  Для обычных же HTML-документов XPath в IE не поддерживается. 
-
-Так как XPath сложнее и длиннее CSS, то используют его очень редко.
-
-## Итого
-
-Есть 6 основных методов поиска элементов DOM:
-<table>
-<thead>
-<tr>
-<td>Метод</td>
-<td>Ищет по...</td>
-<td>Ищет внутри элемента?</td>
-<td>Поддержка</td>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>`getElementById`</td>
-<td>`id`</td>
-<td>-</td>
-<td>везде</td>
-</tr>
-<tr>
-<td>`getElementsByName`</td>
-<td>`name`</td>
-<td>-</td>
-<td>везде</td>
-</tr>
-<tr>
-<td>`getElementsByTagName`</td>
-<td>тег или `'*'`</td>
-<td>✔</td>
-<td>везде</td>
-</tr>
-<tr>
-<td>`getElementsByClassName`</td>
-<td>классу</td>
-<td>✔</td>
-<td>кроме IE8-</td>
-</tr>
-<tr>
-<td>`querySelector`</td>
-<td>CSS-селектор</td>
-<td>✔</td>
-<td>везде</td>
-</tr>
-<tr>
-<td>`querySelectorAll`</td>
-<td>CSS-селектор</td>
-<td>✔</td>
-<td>везде</td>
-</tr>
-</tbody>
-</table>
-
-Практика показывает, что в 95% ситуаций достаточно `querySelector/querySelectorAll`. Хотя более специализированные методы `getElement*` работают чуть быстрее, но разница в миллисекунду-другую редко играет роль.
-
-Кроме того:
-<ul>
-<li>Есть метод `elem.matches(css)`, который проверяет, удовлетворяет ли элемент CSS-селектору. Он поддерживается большинством браузеров в префиксной форме (`ms`, `moz`, `webkit`).</li>
-<li>Язык запросов XPath поддерживается большинством браузеров, кроме IE, даже 9й версии, но `querySelector` удобнее. Поэтому XPath используется редко. </li>
-</ul>
-
-
-
-
-
-
diff --git a/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/solution.md b/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/solution.md
deleted file mode 100644
index 90507daa..00000000
--- a/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/solution.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Ответ на первый вопрос 
-
-Ответ: 0, пустая коллекция.
-
-```html
-<!--+ run -->
-<ul id="menu">
-  <li>Главная страница</li>
-  <li>Форум</li>
-  <li>Магазин</li>
-</ul>
-<script>
-  var lis = document.body.getElementsByTagName('li');
-
-  document.body.innerHTML = "";
-
-  alert( lis.length );
-</script>
-```
-
-Это потому, что все элементы из `BODY` удаляются, а коллекция - *живая*.
-
-# Ответ на второй вопрос
-
-Ответ на второй вопрос зависит от браузера. В большинстве браузеров будет 3, коллекция не изменилась, так как она теперь привязана не к `BODY`, а к элементу, на котором идёт поиск, т.е. к `menu`.
-
-Но элемент `menu` находится в переменной, и поэтому должен быть жив, а значит и его дети тоже. Но некоторые браузеры (IE10) используют агрессивный подход при работе с памятью и очищают все элементы, кроме тех, которые непосредственно хранятся в переменных. 
-
-Поэтому результат кода ниже в большинстве браузеров: `3`, а в IE10: `0`.
-
-```html
-<!--+ run -->
-<ul id="menu">
-  <li>Главная страница</li>
-  <li>Форум</li>
-  <li>Магазин</li>
-</ul>
-<script>
-  var menu = document.getElementById('menu');
-  var lis = menu.getElementsByTagName('li');
-
-  document.body.innerHTML = "";
-
-  alert( lis.length );
-</script>
-```
-
diff --git a/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/task.md b/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/task.md
deleted file mode 100644
index 79d31016..00000000
--- a/2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/task.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Длина коллекции после удаления элементов
-
-[importance 5]
-
-Вот небольшой документ:
-
-```html
-<ul id="menu">
-  <li>Главная страница</li>
-  <li>Форум</li>
-  <li>Магазин</li>
-</ul>
-```
-
-1. Что выведет следующий код (простой вопрос)?
-
-```js
-var lis = document.body.getElementsByTagName('li');
-
-document.body.innerHTML = "";
-
-alert( lis.length );
-```
-
-2. А такой код (вопрос посложнее)?
-
-```js
-var menu = document.getElementById('menu');
-var lis = menu.getElementsByTagName('li');
-
-document.body.innerHTML = "";
-
-alert( lis.length );
-```
-
diff --git a/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/solution.md b/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/solution.md
deleted file mode 100644
index 8a39f575..00000000
--- a/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Значение `aList1` изменится, потому что `getElementsByTagName` - *живая* коллекция. Она автоматически дополнится новым элементом `a` и ее длина увеличится на 1.
-
-А вот `querySelector`, наоборот, возвращает статичный список узлов. Он ссылается на те же самые элементы, что бы не происходило с документом. Поэтому длина `aList2.length` останется неизменной.
-
-
diff --git a/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/task.md b/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/task.md
deleted file mode 100644
index 8076c8f9..00000000
--- a/2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Сравнение количества элементов
-
-[importance 5]
-
-Для любого документа сделаем следующее:
-
-```js
-var aList1 = document.getElementsByTagName('a');
-var aList2 = document.querySelectorAll('a');
-```
-
-Что произойдёт со значениями `aList1.length`, `aList2.length`, если в документе вдруг появится ещё одна ссылка `<a href="#">...</a>`?
-
diff --git a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.md b/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.md
deleted file mode 100644
index c4ca86c7..00000000
--- a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.md
+++ /dev/null
@@ -1,31 +0,0 @@
-Для бенчмаркинга будем использовать функцию `bench(f, times)`, которая запускает функцию `f` `times` раз и возвращает разницу во времени:
-
-```js
-function bench(f, times) {
-  var d = new Date();
-  for (var i = 0; i < times; i++) f();
-  return new Date() - d;
-}
-```
-
-Первый вариант (неверный) -- замерять разницу между функциями `runGet/runQuery`, вот так:
-
-```js
-function runGet() {
-  var results = document.getElementsByTagName('p');
-}
-
-function runQuery() {
-  var results = document.querySelectorAll('p');
-}
-
-alert( bench(runGet, 10000) ); // вывести время 1000*runGet
-```
-
-Он даст неверные результаты, т.к. `getElementsByTagName` является "живым поисковым запросом". Если не обратиться к его результатам, то поиска не произойдет вообще, т.е. `runGet` ничего по сути не ищет.
-
-...А `querySelectorAll` всегда производит поиск и формирует список элементов.
-
-Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни.
-
-
diff --git a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html b/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html
deleted file mode 100644
index ca1cfb81..00000000
--- a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html
+++ /dev/null
@@ -1,207 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    p {
-      display: inline-block;
-      margin: 0;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-
-
-  <script>
-    function bench(f, times) {
-      var d = new Date();
-      for (var i = 0; i < times; i++) f();
-      return new Date() - d;
-    }
-
-
-    function runGetList() {
-      var results = document.getElementsByTagName('p');
-      var len = results.length;
-      for (var i = 0; i < len; i++) {
-        var elem = results[i];
-      }
-    }
-
-    function runQueryList() {
-      var results = document.querySelectorAll('p');
-      var len = results.length;
-      for (var i = 0; i < len; i++) {
-        var elem = results[i];
-      }
-    }
-
-
-    function log(msg) {
-      alert(msg);
-    }
-
-
-    log('getElementsByTagName: ' + bench(runGetList, 10000));
-    log('querySelectorAll: ' + bench(runQueryList, 10000));
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/source.view/index.html b/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/source.view/index.html
deleted file mode 100644
index 4275fa0b..00000000
--- a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/source.view/index.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-  <p>1</p>
-  <p>2</p>
-  <p>3</p>
-  <p>4</p>
-  <p>5</p>
-  <p>6</p>
-  <p>7</p>
-  <p>8</p>
-  <p>9</p>
-
-  <script>
-    // ...
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/task.md b/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/task.md
deleted file mode 100644
index 8b368b49..00000000
--- a/2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Бенчмаркинг методов поиска в DOM
-
-[importance 2]
-
-Какой метод поиска элементов работает быстрее: `getElementsByTagName(tag)` или `querySelectorAll(tag)`?
-
-Напишите код, который измеряет разницу между ними. 
-
-
-
-*P.S. В задаче есть подвох, все не так просто. Если разница больше 10 раз -- вы решили ее неверно. Тогда подумайте, почему такое может быть.*
diff --git a/2-ui/1-document/6-searching-elements-internals/4-get-second-li/solution.md b/2-ui/1-document/6-searching-elements-internals/4-get-second-li/solution.md
deleted file mode 100644
index 930f4120..00000000
--- a/2-ui/1-document/6-searching-elements-internals/4-get-second-li/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Можно так:
-
-```js
-var li = ul.getElementsByTagName('li')[1];
-```
-
-Или так:
-
-```js
-var li = ul.querySelector('li:nth-child(2)');
-```
-
-Оба этих вызова будут перебирать детей `UL` и остановят перебор на найденном элементе.
-
-А вот так -- браузер найдет все элементы, а затем выберет второй. Это дольше:
-
-```js
-var li = ul.querySelectorAll('li')[1];
-```
-
-На практике разница в производительности будет видна только для действительно больших списков, либо при частом выполнении запроса. Браузер перебирает элементы весьма шустро.
diff --git a/2-ui/1-document/6-searching-elements-internals/4-get-second-li/task.md b/2-ui/1-document/6-searching-elements-internals/4-get-second-li/task.md
deleted file mode 100644
index 6dbecfe4..00000000
--- a/2-ui/1-document/6-searching-elements-internals/4-get-second-li/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Получить второй LI
-
-[importance 5]
-
-Есть длинный список `ul`:
-
-```html
-<ul>
-  <li>...</li>
-  <li>...</li>
-  <li>...</li>
-  ...
-</ul>
-```
-
-Как наиболее эффективно получить второй `LI`?
diff --git a/2-ui/1-document/6-searching-elements-internals/article.md b/2-ui/1-document/6-searching-elements-internals/article.md
deleted file mode 100644
index d2935b7c..00000000
--- a/2-ui/1-document/6-searching-elements-internals/article.md
+++ /dev/null
@@ -1,172 +0,0 @@
-# Внутреннее устройство поисковых методов 
-
-Эта глава не обязательна при первом чтении учебника.
-
-Если вы хотите действительно глубоко понимать, что происходит при поиске, то посмотрите эту главу. Если нет -- её можно пропустить.
-
-[cut]
-
-Несмотря на схожесть в синтаксисе, поисковые методы `get*` и `querySelector*` внутри устроены очень по-разному. 
-
-## document.getElementById(id)
-
-Браузер поддерживает у себя внутреннее соответствие `id -> элемент`. Поэтому нужный элемент возвращается сразу. Это очень быстро.
-
-## elem.querySelector(query), elem.querySelectorAll(query)
-
-Чтобы найти элементы, удовлетворяющие поисковому запросу, браузер не использует никаких сложных структур данных.
-
-Он просто перебирает все подэлементы внутри элемента `elem`(или по всему документу, если вызов в контексте документа) и проверяет каждый элемент на соответствие запросу `query`. 
-
-Вызов `querySelector` прекращает перебор после первого же найденного элемента, а `querySelectorAll` собирает найденные элементы в "псевдомассив": внутреннюю структуру данных, по сути аналогичную массиву JavaScript.
-
-Этот перебор происходит очень быстро, так как осуществляется непосредственно движком браузера, а не JavaScript-кодом. 
-
-Оптимизации:
-<ul>
-<li>В случае поиска по ID: `elem.querySelector('#id')`, большинство браузеров оптимизируют поиск, используя вызов `getElementById`.</li>
-<li>Последние результаты поиска сохраняются в кеше. Но это до тех пор, пока документ как-нибудь не изменится.</li>
-</ul>
-
-
-## elem.getElementsBy*(...)
-
-Результаты поиска `getElementsBy*` --  живые!  При изменении документа -- изменяется и результат запроса.
-
-Например, найдём все `div` при помощи `querySelectorAll` и `getElementsByTagName`, а потом изменим документ:
-
-```html
-<!--+ run height=50 -->
-<div></div>
-<script>
-  var resultGet = document.getElementsByTagName('div');
-  var resultQuery = document.querySelectorAll('div');
-
-  alert( resultQuery.length + ', ' + resultGet.length ); // 1, 1 
-
-  document.body.innerHTML = ''; // удалить всё содержимое BODY
-
-*!*
-  alert( resultQuery.length + ', ' + resultGet.length ); // 1, 0
-*/!*
-</script>
-```
-
-Как видно, длина коллекции, найденной через `querySelectorAll`, осталась прежней. А длина коллекции, возвращённой `getElementsByTagName`, изменилась.
-
-Дело в том, что результат запросов `getElementsBy*` -- это не массив, а специальный объект, имеющий тип <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177">NodeList</a> или <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a>. Он похож на массив, так как имеет нумерованные элементы и длину, но внутри это не готовая коллекция, а "живой поисковой запрос". 
-
-Собственно поиск выполняется только при обращении к элементам коллекции или к её длине.
-
-## Алгоритмы getElementsBy*
-
-Поиск `getElementsBy*` наиболее сложно сделать эффективно, так как его результат -- "живая" коллекция, она должна быть всегда актуальной для текущего состояния документа.
-
-```js
-var elems = document.getElementsByTagName('div');
-alert( elems[0] );
-*!*
-// изменили документ
-*/!*
-alert( elems[0] ); // результат может быть уже другой
-```
-
-Можно искать заново при каждой попытке получить элемент из `elems`. Тогда результат будет всегда актуален, но поиск будет работать уж слишком медленно. Да и зачем? Ведь, скорее всего, документ не поменялся. 
-
-**Чтобы производительность `getElementsBy*` была достаточно хорошей, активно используется кеширование результатов поиска.**
-
-Для этого есть два основных способа: назовём их условно "Способ Firefox" (Firefox, IE) и "Способ WebKit" (Chrome, Safari, Opera).
-
-Для примера, рассмотрим поиск в произвольном документе, в котором есть 1000 элементов `div`.
-
-Посмотрим, как будут работать браузеры, если нужно выполнить следующий код:
-
-```js
-// вместо document может быть любой элемент
-var elems = document.getElementsByTagName('div');
-alert( elems[0] );
-alert( elems[995] );
-alert( elems[500] );
-alert( elems.length );
-```
-
-<dl>
-<dt>Способ Firefox</dt>
-<dd>Перебрать подэлементы `document.body` в порядке их появления в поддереве. Запоминать *все найденные элементы* во внутренней структуре данных, чтобы при повторном обращении обойтись без поиска.
-
-Разбор действий браузера при выполнении кода выше:
-<ol><li>Браузер создаёт пустую "живую коллекцию" `elems`. Пока ничего не ищет.</li>
-<li>Перебирает элементы, пока не найдёт первый `div`. Запоминает его и возвращает.</li>
-<li>Перебирает элементы дальше, пока не найдёт элемент с индексом `995`. Запоминает все найденные.</li>
-<li>Возвращает ранее запомненный элемент с индексом `500`, без дополнительного поиска!</li>
-<li>Продолжает обход поддерева с элемента, на котором остановился (`995`) и до конца. Запоминает найденные элементы и возвращает их количество.</li>
-</ol>
-</dd>
-<dt>Способ WebKit</dt>
-<dd>Перебирать подэлементы `document.body`. Запоминать только один, *последний найденный*, элемент, а также, по окончании перебора -- длину коллекции.
-
-Здесь кеширование используется меньше.
-
-Разбор действий браузера по строкам:
-<ol><li>Браузер создаёт пустую "живую коллекцию" `elems`. Пока ничего не ищет.</li>
-<li>Перебирает элементы, пока не найдёт первый `div`. Запоминает его и возвращает.</li>
-<li>Перебирает элементы дальше, пока не найдёт элемент с индексом `995`. Запоминает его и возвращает.</li>
-<li>Браузер запоминает только последний найденный, поэтому не помнит об элементе `500`. Нужно найти его перебором поддерева. Этот перебор можно начать либо с начала -- вперед по поддереву, 500й по счету) либо с элемента `995` --  назад по поддереву, 495й по счету. Так как назад разница в индексах меньше, то браузер выбирает второй путь и идёт от 995го назад 495 раз. Запоминает теперь уже 500й элемент и возвращает его.</li>
-<li>Продолжает обход поддерева с 500го (не 995го!) элемента и до конца. Запоминает число найденных элементов и возвращает его.</li>
-</ol>
-</dd>
-</dl>
-
-Основное различие -- в том, что Firefox запоминает все найденные, а Webkit -- только последний. Таким образом, "метод Firefox" требует больше памяти, но гораздо эффективнее при повторном доступе к предыдущим элементам. 
-
-А "метод Webkit" ест меньше памяти и при этом работает не хуже в самом важном и частом случае -- последовательном переборе коллекции, без возврата к ранее выбранным.
-
-**Запомненные элементы сбрасываются при изменениях DOM.**
-
-Документ может меняться. При этом, если изменение может повлиять на результаты поиска, то запомненные элементы необходимо сбросить. Например, добавление нового узла `div` сбросит запомненные элементы коллекции `elem.getElementsByTagName('div')`. 
-
-Сбрасывание запомненных элементов при изменении документа выполняется интеллектуально.
-<ol>
-<li>Во-первых, при добавлении элемента будут сброшены только те коллекции, которые могли быть затронуты обновлением. Например, если в документе есть два независимых раздела `<section>`, и поисковая коллекция привязана к первому из них, то при добавлении во второй -- она сброшена не будет. 
-
-Если точнее -- будут сброшены все коллекции, привязанные к элементам вверх по иерархии от непосредственного родителя нового `div` и выше, то есть такие, которые потенциально могли измениться. И только они.
-</li>
-<li>Во-вторых, если добавлен только `div`, то не будут сброшены запомненные элементы для поиска по другим тегам, например `elem.getElementsByTagName('a')`.</li>
-<li>...И, конечно же, не любые изменения DOM приводят к сбросу кешей, а только те, которые могут повлиять на коллекцию. Если где-то добавлен новый атрибут элементу --  с кешем для `getElementsByTagName` ничего не произойдёт, так как атрибут никак не может повлиять на результат поиска по тегу.</li>
-</ol>
-
-Прочие поисковые методы, такие как `getElementsByClassName` тоже сбрасывают кеш при изменениях интеллектуально.
-
-Разницу в алгоритмах поиска легко "пощупать". Посмотрите сами:
-
-```html
-<!--+ run -->
-<script>
-  for (var i = 0; i < 10000; i++) document.write('<span> </span>');
-
-  var elements = document.body.getElementsByTagName('span');
-  var len = elements.length;
-
-  var d = new Date;
-*!*
-  for (var i = 0; i < len; i++) elements[i];
-*/!*
-  alert( "Последовательно: " + (new Date - d) + "мс" ); // (1)
-
-  var d = new Date;
-*!*
-  for (var i = 0; i < len; i += 2) elements[i], elements[len - i - 1];
-*/!*
-  alert( "Вразнобой: " + (new Date - d) + "мс" ); // (2)
-</script>
-```
-
-В примере выше первый цикл проходит элементы последовательно. А второй -- идет по шагам: один с начала, потом один с конца, потом ещё один с начала, ещё один -- с конца, и так далее.
-
-Количество обращений к элементам одинаково.
-
-<ul>
-<li>В браузерах, которые запоминают все найденные (Firefox, IE) -- скорость будет одинаковой.</li>
-<li>В браузерах, которые запоминают только последний (Webkit) -- разница будет порядка 100 и более раз, так как браузер вынужден бегать по дереву при каждом запросе заново.</li>
-</ul>
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png b/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png
deleted file mode 100644
index 715f8ed3..00000000
Binary files a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png and /dev/null differ
diff --git a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png b/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png
deleted file mode 100644
index 3256dea5..00000000
Binary files a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png and /dev/null differ
diff --git a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md b/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md
deleted file mode 100644
index 0b7e7714..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-**Однозначно правильный ответ невозможен.**
-
-В консоли не выводятся пробельные узлы. Если перед `<h1>` находится пробельный узел, то будет `undefined`, а если нет -- то текст внутри `<h1>`.
-
-Пример с `undefined`:
-
-```html
-<!--+ run -->
-<body>
-  <h1>Привет, мир!</h1>
-
-  <script>
-    alert( document.body.firstChild.innerHTML ); // undefined
-  </script>
-</body>
-```
-
-Если убрать из него перевод строки перед `<h1>`, то было бы `"Привет, мир!"`.
\ No newline at end of file
diff --git a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md b/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md
deleted file mode 100644
index e5bab48c..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Что выведет код в консоли?
-
-[importance 5]
-
-В браузере Chrome открыт HTML-документ.
-
-Вы зашли во вкладку Elements и видите такую картинку:
-<img src="console-innerhtml.png">
-
-В настоящий момент выбран элемент `<body>`.
-
-Что выведет код `$0.firstChild.innerHTML` в консоли?
\ No newline at end of file
diff --git a/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
deleted file mode 100644
index 0c8dc882..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Небольшой подвох -- в том, что во время выполнения скрипта последним тегом является `SCRIPT`. Браузер не может обработать страницу дальше, пока не выполнит скрипт.
-
-Так что результат будет `1` (узел-элемент).
-
-```html
-<!--+ run height=60 -->
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  <script>
-    alert( document.body.lastChild.nodeType );
-  </script>
-</body>
-
-</html>
-```
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
deleted file mode 100644
index 279b0784..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# В инлайн скрипте lastChild.nodeType 
-
-[importance 5]
-
-Что выведет скрипт на этой странице?
-
-```html
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  <script>
-    alert( document.body.lastChild.nodeType );
-  </script>
-</body>
-
-</html>
-```
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/solution.md
deleted file mode 100644
index 6301505b..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Ответ: **`BODY`**.
-
-```html
-<!--+ run -->
-<script>
-  var body = document.body;
-
-  body.innerHTML = "<!--" + body.tagName + "-->";
-
-  alert( body.firstChild.data ); // BODY
-</script>
-```
-
-Происходящее по шагам:
-<ol>
-<li>Заменяем содержимое `<body>` на комментарий. Он будет иметь вид <code>&lt;!--BODY--&gt;</code>, так как `body.tagName == "BODY"`. Как мы помним, свойство `tagName` в HTML всегда находится в верхнем регистре.</li>
-<li>Этот комментарий теперь является первым и единственным потомком `body.firstChild`.</li>
-<li>Получим значение `data` для комментария `body.firstChild`. Оно равно содержимому узла для всех узлов, кроме элементов. Содержимое комментария: `"BODY"`.</li>
-</ol>
\ No newline at end of file
diff --git a/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/task.md
deleted file mode 100644
index e2cc5b02..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Тег в комментарии
-
-[importance 3]
-
-Что выведет этот код?
-
-```html
-<script>
-  var body = document.body;
-
-  body.innerHTML = "<!--" + body.tagName + "-->";
-
-  alert( body.firstChild.data ); // что выведет?
-</script>
-```
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
deleted file mode 100644
index d27accb7..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
+++ /dev/null
@@ -1,72 +0,0 @@
-
-Объектом какого класса является `document`, можно выяснить так:
-```js
-//+ run
-alert(document); // [object HTMLDocument]
-```
-
-Или так:
-```js
-//+ run
-alert(document.constructor); // function HTMLDocument() { ... }
-```
-
-Итак, `document` -- объект класса `HTMLDocument`.
-
-Какое место `HTMLDocument` занимает в иерархии? 
-
-Можно поискать в документации. Но попробуем выяснить это самостоятельно.
-
-Вопрос не такой простой и требует хорошего понимания [прототипного наследования](/class-inheritance).
-
-Вспомним, как оно устроено:
-<ul>
-<li>Методы объекта `document` находятся в `prototype` конструктора, в данном случае -- `HTMLDocument.prototype`.</li>
-<li>У `HTMLDocument.prototype` есть ссылка `__proto__` на прототип-родитель.</li>
-<li>У прототипа-родителя может быть ссылка `__proto__` на его родитель, и так далее.</li>
-</ul>
-
-При поиске свойства в `document`, если его там нет, оно ищется в `document.__proto__`, затем в `document.__proto__.__proto__` и так далее, пока не найдём, или пока цепочка `__proto__` не закончится. Это обычное устройство класса, без наследования.
-
-Нам нужно лишь узнать, что находится в этих самых `__proto__`.
-
-Строго говоря, там могут быть любые объекты. Вовсе не обязательно, чтобы объектам из цепочки прототипов соответствовали какие-то конструкторы.
-
-Вполне может быть цепочка, где родители -- просто обычные JS-объекты:
-```js
-document -> HTMLDocument.prototype -> obj1 -> obj2 -> ...
-```
-
-Однако, здесь мы знаем, что наследование -- "на классах", то есть, эти объекты `obj1`, `obj2` являются `prototype` неких функций-конструкторов:
-
-```js
-document -> HTMLDocument.prototype -> F1.prototype -> F2.prototype -> ...
-```
-
-Что стоит на месте `F1`, `F2`?
-
-Опять же, если говорить про некие абстрактные объекты, то откуда нам знать, какие функции на них ссылаются через `prototype`? Ниоткуда. Один объект может быть в `prototype` хоть у десятка функций.
-
-Но в стандартном прототипном наследовании один объект является `prototype` ровно у одной функции. Причём при создании функции в её `prototype` уже есть объект со свойством `constructor`, которое ссылается обратно на функцию:
-```js
-F.prototype = { constructor: F }
-```
-
-Это свойство `constructor`, если конечно его не удалить или не перезаписать нечаянно (чего делать не следует), и позволяет из прототипа узнать соответствующий ему конструктор.
-
-```js
-//+ run
-// цепочка наследования:
-alert(HTMLDocument.prototype.constructor); // function HTMLDocument
-alert(HTMLDocument.prototype.__proto__.constructor); // function Document
-alert(HTMLDocument.prototype.__proto__.__proto__.constructor); // function Node
-```
-
-При выводе объекта через `console.dir(document)` в Google Chrome, мы тоже можем, раскрывая `__proto__`, увидеть эти названия (`HTMLDocument`, `Document`, `Node`).
-
-Браузерная консоль их берёт как раз из свойства `constructor`.
-
-
-
-
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
deleted file mode 100644
index 517eeb3a..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Где в DOM-иерархии document?
-
-[importance 4]
-Объектом какого класса является `document`?
-
-Какое место он занимает в DOM-иерархии? 
-
-Наследует ли он `Node` или `Element`?
-
-Воспользуйтесь для решения тем фактом, что DOM-узлы образуют стандартную прототипную иерархию классов. 
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/article.md b/2-ui/1-document/7-basic-dom-node-properties/article.md
deleted file mode 100644
index 0bb288f2..00000000
--- a/2-ui/1-document/7-basic-dom-node-properties/article.md
+++ /dev/null
@@ -1,555 +0,0 @@
-# Свойства узлов: тип, тег и содержимое
-
-В этой главе мы познакомимся с основными, самыми важными свойствами, которые отвечают за тип DOM-узла, тег и содержимое.
-
-[cut]
-
-## Классы, иерархия DOM
-
-Самое главное различие между DOM-узлами -- разные узлы являются объектами различных классов.
-
-Поэтому, к примеру, у узла, соответствующего тегу `<td>` -- одни свойства, у `<form>` -- другие, у `<a>` -- третьи. 
-
-Есть и кое-что общее, за счёт наследования.
-
-Классы DOM образуют иерархию.
-
-Основной объект в ней: [Node](http://dom.spec.whatwg.org/#interface-node), от которого наследуют остальные:
-
-<img src="hierarchy.png">
-
-На рисунке выше изображены основные классы:
-<ul>
-<li>Прямо от `Node` наследуют текстовые узлы `Text`, комментарии `Comment` и элементы `Element`.</li>
-<li>Элементы `Element` -- это ещё не HTML-элементы, а более общий тип, который используется в том числе в XML. От него наследует `SVGElement` для SVG-графики и, конечно, `HTMLElement`.</li>
-<li>От `HTMLElement` уже наследуют разнообразные узлы HTML:
-<ul>
-<li>Для `<input>` -- `HTMLInputElement`</li>
-<li>Для `<body>` -- `HTMLBodyElement`</li>
-<li>Для `<a>` -- `HTMLAnchorElement`... и так далее.</li>
-</ul>
-</li>
-</ul>
-
-Узнать класс узла очень просто -- достаточно привести его к строке, к примеру, вывести:
-
-```js
-//+ run
-alert( document.body ); // [object HTMLBodyElement]
-```
-
-Можно и проверить при помощи `instanceof`:
-
-```js
-//+ run
-alert( document.body instanceof HTMLBodyElement ); // true
-alert( document.body instanceof HTMLElement ); // true
-alert( document.body instanceof Element ); // true
-alert( document.body instanceof Node ); // true
-```
-
-Как видно, DOM-узлы -- обычные JavaScript-объекты. Их классы заданы в прототипном стиле. В этом легко убедиться, если вывести в консоли любой элемент через `console.dir(elem)`. Или даже можно напрямую обратиться к методам, которые хранятся в `Node.prototype`, `Element.prototype` и так далее.
-
-[smart header="`console.dir(elem)` против `console.log(elem)`"]
-Вывод `console.log(elem)` и `console.dir(elem)` различен.
-
-<ul>
-<li>`console.log` выводит элемент в виде, удобном для исследования HTML-структуры.</li>
-<li>`console.dir` выводит элемент в виде JavaScript-объекта, удобно для анализа его свойств.</li>
-</ul>
-Попробуйте сами на `document.body`.
-[/smart]
-
-Детальное описание свойств и методов каждого DOM-класса дано в [спецификации](https://html.spec.whatwg.org/multipage/).
-
-Например, [The input element](https://html.spec.whatwg.org/multipage/forms.html#the-input-element) описывает класс, соответствующий `<input>`, включая [interface HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement), который нас как раз и интересует.
-
-При описании свойств и методов используется не JavaScript, а специальный язык [IDL](https://ru.wikipedia.org/wiki/%D0%AF%D0%B7%D1%8B%D0%BA_%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D1%8F_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%BE%D0%B2) (Interface Definition Language), который достаточно легко понять "с ходу".
-
-Вот из него выдержка, с комментариями:
-
-```js
-// Объявлен HTMLInputElement
-// двоеточие означает, что он наследует от HTMLElement
-interface HTMLInputElement: HTMLElement { 
-
-  // у всех таких элементов есть строковые свойства 
-  // accept, alt, autocomplete, value
-  attribute DOMString accept;
-  attribute DOMString alt;
-  attribute DOMString autocomplete;
-  attribute DOMString value;
-  
-  // и логическое свойство autofocus
-  attribute boolean autofocus;
-  ...
-  // а также метод select, который значение не возвращает (void)
-  void select();
-  ...
-}
-```
-
-Далее в этом разделе мы поговорим о самых главных свойствах узлов DOM, которые используются наиболее часто.
-
-## Тип: nodeType   
-
-Тип узла содержится в его свойстве `nodeType`.
-
-Как правило, мы работаем всего с двумя типами узлов:
-<ul>
-<li>Элемент.</li>
-<li>Текстовый узел.</li>
-</ul>
-
-На самом деле типов узлов гораздо больше. Строго говоря, их 12, и они описаны в спецификации с древнейших времён, см. <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247">DOM Уровень 1</a>:
-
-```js
-interface Node {
-  // Всевозможные значения nodeType
-  const unsigned short ELEMENT_NODE = 1;
-  const unsigned short ATTRIBUTE_NODE = 2;
-  const unsigned short TEXT_NODE = 3;
-  const unsigned short CDATA_SECTION_NODE = 4;
-  const unsigned short ENTITY_REFERENCE_NODE = 5;
-  const unsigned short ENTITY_NODE = 6;
-  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
-  const unsigned short COMMENT_NODE = 8;
-  const unsigned short DOCUMENT_NODE = 9;
-  const unsigned short DOCUMENT_TYPE_NODE = 10;
-  const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
-  const unsigned short NOTATION_NODE = 12;
-  ...
-}
-```
-
-В частности, тип "Элемент" `ELEMENT_NODE` имеет номер 1, а "Текст" `TEXT_NODE` -- номер 3.
-
-Например, выведем все узлы-потомки `document.body`, *являющиеся элементами*:
-
-```html
-<!--+ run -->
-<body>
-  <div>Читатели:</div>
-  <ul>
-    <li>Вася</li>
-    <li>Петя</li>
-  </ul>
-
-  <!-- комментарий -->
-
-  <script>
-    var childNodes = document.body.childNodes;
-
-    for (var i = 0; i < childNodes.length; i++) {
-
-*!*
-      // отфильтровать не-элементы  
-      if (childNodes[i].nodeType != 1) continue;
-*/!*
-
-      alert( childNodes[i] );
-
-    }
-  </script>
-</body>
-```
-
-Тип узла можно только читать, изменить его невозможно.
-
-
-## Тег: nodeName и tagName   
-
-Существует целых два свойства: `nodeName` и `tagName`, которые содержат название(тег) элемента узла. 
-
-**Название HTML-тега всегда находится в верхнем регистре.**
-
-Например, для `document.body`:
-
-```js
-//+ run
-alert( document.body.nodeName ); // BODY
-alert( document.body.tagName ); // BODY
-```
-
-[smart header="В XHTML `nodeName` может быть не в верхнем регистре"]
-У браузера есть два режима обработки документа: HTML и XML-режим. Обычно используется режим HTML.
-
-XML-режим включается, когда браузер получает XML-документ через `XMLHttpRequest`(технология AJAX) или при наличии заголовка `Content-Type: application/xml+xhtml`.
-
-В XML-режиме сохраняется регистр и `nodeName` может выдать "body" или даже "bOdY" -- в точности как указано в документе. XML-режим используют очень редко.
-[/smart]
-
-### Какая разница между tagName и nodeName ?
-
-Разница отражена в названиях свойств, но неочевидна. 
-
-<ul>
-<li>Свойство `tagName` есть только у элементов `Element` (в IE8- также у комментариев, но это ошибка в браузере).</li>
-<li>Свойство `nodeName` определено для любых узлов `Node`, для элементов оно равно `tagName`, а для не-элементов обычно содержит строку с типом узла.</li>
-</ul>
-
-Таким образом, при помощи `tagName` мы можем работать только с элементами, а `nodeName` может что-то сказать и о других типах узлов.
-
-Например, сравним `tagName` и `nodeName` на примере узла-комментария и объекта `document`:
-
-```html
-<!--+ run -->
-<body>
-  <!-- комментарий -->
-
-  <script>
-    // для комментария
-    alert( document.body.firstChild.nodeName ); // #comment
-    alert( document.body.firstChild.tagName ); // undefined (в IE8- воскл. знак "!")
-
-    // для документа
-    alert( document.nodeName ); // #document, т.к. корень DOM -- не элемент
-    alert( document.tagName ); // undefined
-  </script>
-</body>
-```
-
-При работе с элементами, как это обычно бывает, имеет смысл использовать свойство `tagName` -- оно короче.
-
-## innerHTML: содержимое элемента
-
-Свойство `innerHTML` описано в спецификации HTML 5 -- <a href="http://www.w3.org/TR/html5/embedded-content-0.html">embedded content</a>.
-
-Оно позволяет получить HTML-содержимое элемента в виде строки. В `innerHTML` можно и читать и писать. 
-
-Пример выведет на экран все содержимое `document.body`, а затем заменит его на другое:
-
-```html
-<!--+ run -->
-<body>
-  <p>Параграф</p>
-  <div>Div</div>
-
-  <script>
-    alert( document.body.innerHTML ); // читаем текущее содержимое
-    document.body.innerHTML = 'Новый BODY!'; // заменяем содержимое
-  </script>
-
-</body>
-```
-
-Значение, возвращаемое `innerHTML` -- всегда валидный HTML-код. При записи можно попробовать записать  что угодно, но браузер исправит ошибки:
-
-```html
-<!--+ run -->
-<body>
-
-  <script>
-    document.body.innerHTML = '<b>тест'; // незакрытый тег
-    alert( document.body.innerHTML ); // <b>тест</b> (исправлено)
-  </script>
-
-</body>
-```
-
-Свойство `innerHTML` -- одно из самых часто используемых. 
-
-### Тонкости innerHTML   
-
-`innerHTML` не так прост, как может показаться, и таит в себе некоторые тонкости, которые могут сбить с толку новичка, а иногда и опытного программиста.
-
-Ознакомьтесь с ними. Даже если этих сложностей у вас *пока* нет, эта информация отложится где-то в голове и поможет, когда проблема появится.
-
-[warn header="Для таблиц в IE9- -- `innerHTML` только для чтения"]
-В Internet Explorer версии 9 и ранее, <a href="http://msdn.microsoft.com/en-us/library/ms533897.aspx">innerHTML</a> доступно только для чтения для элементов `COL`, `COLGROUP`, `FRAMESET`, `HEAD`, `HTML`, `STYLE`, `TABLE`, `TBODY`, `TFOOT`, `THEAD`, `TITLE`, `TR`. 
-
-В частности, в IE9- запрещена запись в `innerHTML` для любых табличных элементов, кроме ячеек (`TD/TH`).
-[/warn]
-
-[warn header="Добавление `innerHTML+=` осуществляет перезапись"]
-Синтаксически, можно добавить текст к `innerHTML` через `+=`:
-
-```js
-chatDiv.innerHTML += "<div>Привет<img src='smile.gif'/> !</div>";
-chatDiv.innerHTML += "Как дела?";
-```
-
-На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись:
-<ol>
-<li>Удаляется старое содержание</li>
-<li>На его место становится новое значение `innerHTML`.</li>
-</ol>
-
-Так как новое значение записывается с нуля, то **все изображения и другие ресурсы будут перезагружены**. В примере выше вторая строчка перезагрузит `smile.gif`, который был до неё. Если в `chatDiv` много текста, то эта перезагрузка будет очень заметна. 
-
-Есть и другие побочные эффекты, например если существующий текст был выделен мышкой, то в большинстве браузеров это выделение пропадёт. Если в HTML был `<input>`, в который посетитель что-то ввёл, то введённое значение пропадёт. И тому подобное.
-
-К счастью, есть и другие способы добавить содержимое, не использующие `innerHTML`.
-[/warn]
-
-[warn header="Скрипты не выполняются"]
-Если в `innerHTML` есть тег `script` -- он не будет выполнен. 
-
-К примеру:
-
-```html
-<!--+ run -->
-<div id="my"></div>
-
-<script>
-  var elem = document.getElementById('my');
-  elem.innerHTML = 'ТЕСТ<script>alert( 1 );</scr' + 'ipt>';
-</script>
-```
-
-В примере закрывающий тег `</scr'+'ipt>` разбит на две строки, т.к. иначе браузер подумает, что это конец скрипта. Вставленный скрипт не выполнится.
-
-Исключение -- IE9-, в нем вставляемый скрипт выполняются, если у него есть атрибут `defer`. Но это нестандартная возможность, которой не следует пользоваться.
-
-[/warn]
-
-[warn header="IE8- обрезает `style` и `script` в начале `innerHTML`"]
-Если в начале `innerHTML` находятся стили `<style>`, то старый IE проигнорирует их. То есть, иными словами, они не применятся.
-
-Смотрите также [innerHTML на MSDN](http://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx) на эту тему.
-[/warn]
-
-## outerHTML: HTML элемента целиком
-
-Свойство `outerHTML` содержит HTML элемента целиком.
-
-Пример чтения `outerHTML`:
-
-```html
-<!--+ run -->
-<div>Привет <b>Мир</b></div>
-
-<script>
-  var div = document.body.children[0];
-
-  alert( div.outerHTML ); // <div>Привет <b>Мир</b></div>
-</script>
-```
-
-**Изменить `outerHTML` элемента невозможно.**
-
-Здесь мы остановимся чуть подробнее. Дело в том, что технически свойство `outerHTML` доступно на запись. Но при этом элемент не меняется, а *заменяется на новый*, который тут же создаётся из нового `outerHTML`.
-
-При этом переменная, в которой изначально был старый элемент, и в которой мы "перезаписали" `outerHTML`, остаётся со старым элементом.
-
-Это легко может привести к ошибкам, что видно на примере:
-
-```html
-<!--+ run -->
-<div>Привет, Мир!</div>
-
-<script>
-  var div = document.body.children[0];
-
-*!*
-  // заменяем div.outerHTML на <p>...</p>
-*/!*
-  div.outerHTML = '<p>Новый элемент!</p>';
-
-*!*
-  // ... но содержимое div.outerHTML осталось тем же, несмотря на "перезапись"
-*/!*
-  alert( div.outerHTML ); // <div>Привет, Мир!</div>
-</script>
-```
-
-То, что произошло в примере выше -- так это замена `div` в документе на новый узел `<p>...</p>`. При этом переменная `div` не получила этот новый узел! Она сохранила старое значение, чтение из неё это отлично показывает.
-
-[warn header="Записал `outerHTML`? Понимай последствия!"]
-Иногда начинающие делают здесь ошибку: сначала заменяют `div.outerHTML`, а потом продолжают работать с `div`, как будто это изменившийся элемент. Такое возможно с `innerHTML`, но не с `outerHTML`.
-
-Записать новый HTML в `outerHTML` можно, но нужно понимать, что это никакое не изменение свойств узла, а создание нового. 
-
-Новосозданный узел не доступен сразу в переменной, хотя его, конечно, можно получить из DOM.
-[/warn]
-
-## nodeValue/data: содержимое текстового узла   
-
-Свойство `innerHTML` есть только у узлов-элементов. 
-
-**Содержимое других узлов, например, текстовых или комментариев, доступно на чтение и запись через свойство `data`.**
-
-Его тоже можно читать и обновлять. Следующий пример демонстрирует это:
-
-```html
-<!--+ run height="50" -->
-<body>
-  Привет
-  <!-- Комментарий -->
-  <script>
-    for (var i = 0; i < document.body.childNodes.length; i++) {
-*!*
-      alert( document.body.childNodes[i].data );
-*/!*
-    }
-  </script>
-  Пока
-</body>
-```
-
-Если вы запустите этот пример, то увидите, как выводятся последовательно:
-<ol>
-<li>`Привет` -- это содержимое первого узла (текстового).</li>
-<li>`Комментарий` -- это содержимое второго узла (комментария).</li>
-<li>`Пробелы` -- это содержимое небольшого пробельного узла после комментария до скрипта.</li>
-<li>`undefined` -- далее цикл дошёл до <code>&lt;script&gt;</code>, но это узел-элемент, у него нет `data`.</li>
-</ol>
-
-Вообще говоря, после <code>&lt;script&gt;...&lt;/script&gt;</code> и до закрытия `</body>` в документе есть еще один текстовый узел. Однако, на момент работы скрипта браузер ещё не знает о нём, поэтому не выведет.
-
-**Свойство `nodeValue` мы использовать не будем.**
-
-Оно работает так же, как `data`, но на некоторых узлах, где `data` нет, `nodeValue` есть и имеет значение `null`. Как-то использовать это тонкое отличие обычно нет причин. 
-
-**Два свойства существуют по историческим причинам, мы будем использовать лишь `data`, поскольку оно короче.**
-
-## Текст: textContent
-
-Свойство `textContent` содержит только текст внутри элемента, за вычетом всех `<тегов>`.
-
-Оно поддерживается везде, кроме IE8-.
-
-Например:
-
-```html
-<!--+ run -->
-<div>
-  <h1>Срочно в номер!</h1>
-  <p>Марсиане атакуют людей!</p>
-</div>
-
-<script>
-  var news = document.body.children[0];
-
-  // \n  Срочно в номер!\n  Марсиане атакуют людей!\n
-  alert( news.textContent );
-</script>
-```
-
-Как видно из примера выше, возвращается в точности весь текст, включая переводы строк и пробелы, но без тегов.
-
-**Иными словами, `elem.textContent` возвращает конкатенацию всех текстовых узлов внутри `elem`.**
-
-Не сказать, чтобы эта информация была часто востребована.
-
-**Гораздо полезнее возможность записать текст в элемент, причём именно как текст!**
-
-В этом примере имя посетителя попадёт в первый `div` как `innerHTML`, а во второй -- как текст:
-
-```html
-<!--+ run -->
-<div></div>
-<div></div>
-
-<script>
-  var name = prompt("Введите имя?", "<b>Винни-пух</b>");
-
-  document.body.children[0].innerHTML = name;
-  document.body.children[1].textContent = name;
-</script>
-```
-
-При запуске примера мы увидим, что в первый `DIV` текст от посетителя вставился в именно как HTML, то есть теги стали именно тегами, а во второй -- как обычный текст. 
-
-Вряд ли мы *действительно* хотим, чтобы посетители вставляли в наш сайт произвольный HTML-код. Присваивание через `textContent` -- один из способов от этого защититься.
-
-[warn header="Нестандартное свойство `innerText`"]
-Всеми браузерами, кроме Firefox, поддерживается нестандартное свойство [innerText](http://msdn.microsoft.com/en-us/library/ie/ms533899.aspx). 
-
-У него, в некотором роде, преимущество перед `textContent` в том, что оно по названию напоминает `innerHTML`, его проще запомнить.
-
-Однако, свойство `innerText` не следует использовать, так как оно не стандартное и не будет стандартным.
-
-Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден -- как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. Это довольно странная особенность существует по историческим причинам и скорее мешает, чем помогает.
-
-Впрочем, при записи значения `innerText` работает так же, как и `textContent`.
-[/warn]
-
-## Свойство hidden
-
-Как правило, видим или невидим узел, определяется через CSS, свойствами `display` или `visibility`.
-
-В стандарте HTML5 предусмотрен специальный атрибут и свойство для этого: `hidden`.
-
-Его поддерживают все современные браузеры, кроме IE10-.
-
-В примере ниже второй и третий `<div>` скрыты:
-
-```html
-<!--+ run height="80" -->
-<div>Текст</div>
-<div hidden>С атрибутом hidden</div>
-<div>Со свойством hidden</div>
-
-<script>
-  var lastDiv = document.body.children[2];
-  lastDiv.hidden = true;
-</script>
-```
-
-Технически, атрибут `hidden` работает так же, как `style="display:none"`. Но его проще поставить через JavaScript (меньше букв), и могут быть преимущества для скринридеров и прочих нестандартных браузеров.
-
-Для старых IE тоже можно сделать, чтобы свойство поддерживалось, мы ещё вернёмся к этому далее в учебнике.
-
-
-## Исследование элементов
-
-У DOM-узлов есть и другие свойства, зависящие от типа, например:
-
-<ul>
-<li>`value` -- значение для `INPUT`, `SELECT` или `TEXTAREA`</li>
-<li>`id` -- идентификатор</li>
-<li>`href` -- адрес ссылки</li>
-<li>...многие другие...</li>
-</ul>
-
-Например:
-
-```html
-<!--+ run height="80" -->
-<input type="text" value="значение">
-
-<script>
-  var input = document.body.children[0];
-
-  alert( input.type ); // "text"
-  alert( input.id ); // "input"
-  alert( input.value ); // значение
-</script>
-```
-
-Как узнать, какие свойства есть у данного типа элементов?
-
-Это просто. Нужно либо посмотреть [список элементов HTML5](http://dev.w3.org/html5/markup/elements.html) и найти в нём интересующий вас элемент и прочитать секцию с `interface`.
-
-Если же недосуг или интересуют особенности конкретного браузера -- элемент всегда можно вывести в консоль вызовом `console.dir(элемент)`.
-
-Метод `console.dir` выводит аргумент не в "красивом" виде, а как объект, который можно развернуть и исследовать.
-
-Например:
-
-```js
-//+ run
-// в консоли можно будет увидеть все свойства DOM-объекта document 
-console.dir(document);
-```
-
-## Итого
-
-Основные свойства DOM-узлов:
-
-<dl>
-<dt>`nodeType`</dt>
-<dd>Тип узла. Самые популярные типы: `"1"` - для элементов и `"3"` - для текстовых узлов. Только для чтения.</dd>
-<dt>`nodeName/tagName`</dt>
-<dd>Название тега заглавными буквами. `nodeName` имеет специальные значения для узлов-неэлементов. Только для чтения.</dd>
-<dt>`innerHTML`</dt>
-<dd>Внутреннее содержимое узла-элемента в виде HTML. Можно изменять.</dd>
-<dt>`outerHTML`</dt>
-<dd>Полный HTML узла-элемента. При записи в `elem.outerHTML` переменная `elem` сохраняет старый узел.</dd>
-<dt>`nodeValue/data`</dt>
-<dd>Содержимое текстового узла или комментария. Свойство `nodeValue` также определено и для других типов узлов. Можно изменять.</dd>
-</dl>
-
-Узлы DOM также имеют другие свойства, в зависимости от тега. Например, у `INPUT` есть свойства `value` и `checked`, а у `A` есть `href` и т.д. Мы рассмотрим их далее.
-
diff --git a/2-ui/1-document/7-basic-dom-node-properties/hierarchy.png b/2-ui/1-document/7-basic-dom-node-properties/hierarchy.png
deleted file mode 100644
index 4f83d654..00000000
Binary files a/2-ui/1-document/7-basic-dom-node-properties/hierarchy.png and /dev/null differ
diff --git a/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/solution.md b/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/solution.md
deleted file mode 100644
index 384b50de..00000000
--- a/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Код для полифилла здесь особенно прост. 
-
-Реализовывать ничего не надо, просто записать нужный метод в `Element.prototype.matches`, если его там нет:
-
-```js
-(function() {
-
-  // проверяем поддержку
-  if (!Element.prototype.matches) {
-
-    // определяем свойство
-    Element.prototype.matches = Element.prototype.matchesSelector ||
-      Element.prototype.webkitMatchesSelector ||
-      Element.prototype.mozMatchesSelector ||
-      Element.prototype.msMatchesSelector,
-
-  }
-
-})();
-```
-
diff --git a/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/task.md b/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/task.md
deleted file mode 100644
index dab0ad9b..00000000
--- a/2-ui/1-document/8-dom-polyfill/1-polyfill-matches/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Полифилл для matches
-
-[importance 5]
-
-Метод `elem.matches(css)` в некоторых старых браузерах поддерживается под старым именем `matchesSelector` или с префиксами, то есть: `webkitMatchesSelector` (старый Chrome, Safari), `mozMatchesSelector` (старый Firefox) или `Element.prototype.msMatchesSelector` (старый IE).
-
-Создайте полифилл, который гарантирует стандартный синтаксис `elem.matches(css)` для всех браузеров.
diff --git a/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/solution.md b/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/solution.md
deleted file mode 100644
index 96eb0543..00000000
--- a/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/solution.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Код для этого полифилла имеет стандартный вид:
-
-```js
-(function() {
-
-  // проверяем поддержку
-  if (!Element.prototype.closest) {
-
-    // реализуем
-    Element.prototype.closest = function(css) {
-      var node = this;
-
-      while (node) {
-        if (node.matches(css)) return node;
-        else node = node.parentElement;
-      }
-      return null;
-    };
-  }
-
-})();
-```
-
-Обратим внимание, что код этого полифилла использует `node.matches`, то есть может в свою очередь потребовать полифилла для него. Это типичная ситуация -- один полифилл тянет за собой другой. Именно поэтому сервисы и библиотеки полифиллов очень полезны.
\ No newline at end of file
diff --git a/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/task.md b/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/task.md
deleted file mode 100644
index b3683487..00000000
--- a/2-ui/1-document/8-dom-polyfill/2-polyfill-closest/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Полифилл для closest
-
-[importance 5]
-
-Метод `elem.closest(css)` для поиска ближайшего родителя, удовлетворяющего селектору `css`, не поддерживается некоторыми браузерами, например IE11-.
-
-Создайте для него полифилл. 
\ No newline at end of file
diff --git a/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/solution.md b/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/solution.md
deleted file mode 100644
index 3ed97c04..00000000
--- a/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Код для полифилла здесь имеет стандартный вид:
-
-```js
-(function() {
-
-  // проверяем поддержку
-  if (document.documentElement.textContent === undefined) {
-
-    // определяем свойство
-    Object.defineProperty(HTMLElement.prototype, "textContent", {
-      get: function() {
-        return this.innerText;
-      },
-      set: function(value) {
-        this.innerText = value;
-      }
-    });
-  }
-
-})();
-```
-
-Единственный тонкий момент -- в проверке поддержки.
-
-Мы часто можем использовать уже существующий элемент. В частности, при проверке `firstElementChild` мы можем проверить его наличие в `document.documentElement`. 
-
-Однако, в данном случае попытка получить `document.documentElement.textContent` при поддержке этого свойства приведёт к совершенно лишним затратам времени и памяти, так как браузер будет динамически генерировать строку из содержимого документа.
-
-Поэтому лучше бы использовать пустой DOM-элемент. Но это лишь оптимизация, общий подход верен.
diff --git a/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/task.md b/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/task.md
deleted file mode 100644
index 80c1152e..00000000
--- a/2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Полифилл для textContent
-
-[importance 3]
-
-Свойство `textContent` не поддерживается IE8. Однако, там есть свойство `innerText`.
-
-Создаёте полифилл, который проверяет поддержку свойства `textContent`, и если её нет -- создаёт его, используя `innerText`. Получится, что в IE8 "новое" свойство `textContent` будет "псевдонимом" для `innerText`.
-
-Хотя свойство `innerText` и работает по-иному, нежели `textContent`, но в некоторых ситуациях они могут быть взаимозаменимы. Именно на них направлен полифилл.
diff --git a/2-ui/1-document/8-dom-polyfill/article.md b/2-ui/1-document/8-dom-polyfill/article.md
deleted file mode 100644
index a12678a1..00000000
--- a/2-ui/1-document/8-dom-polyfill/article.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Современный DOM: полифиллы
-
-В старых IE, особенно в IE8 и ниже, ряд стандартных DOM-свойств не поддерживаются или поддерживаются плохо.
-
-Если говорить о современных браузерах, то они тоже не все идут "в ногу", всегда какие-то современные возможности реализуются сначала в одном, потом в другом.
-
-Но это не значит, что нужно ориентироваться на самый старый браузер из поддерживаемых!
-
-Для того, чтобы не думать об устаревших браузерах, а писать современный код, который при этом работает везде, используют полифиллы.
-[cut]
-
-## Полифиллы
-
-"Полифилл" (англ. polyfill) -- это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными.
-
-Один полифилл мы уже видели, когда изучали собственно JavaScript -- это библиотека [ES5 shim](https://github.com/es-shims/es5-shim). Если её подключить, то в IE8- начинают работать многие возможности ES5. Работает она через модификацию стандартных объектов и их прототипов. Это типично для полифиллов.
-
-В работе с DOM несовместимостей гораздо больше, как и способов их обхода.
-
-## Что делает полифилл?
-
-Для примера добавим в DOM поддержку свойства `firstElementChild`, если её нет. Здесь речь, конечно, об IE8, в других браузерах оно и так поддерживается, но пример типовой.
-
-Вот код для такого полифилла:
-
-```js
-*!*
-if (document.documentElement.firstElementChild === undefined) { // (1)
-*/!*
-
-*!*
-  Object.defineProperty(Element.prototype, 'firstElementChild', { // (2)
-*/!*
-    get: function() {
-      var el = this.firstChild;
-      do {
-        if (el.nodeType === 1) {
-          return el;
-        }
-        el = el.nextSibling;
-      } while (el);
-
-      return null;
-    }
-  });
-}
-```
-
-Если этот код запустить, то `firstElementChild` появится у всех элементов в IE8.
-
-Общий вид этого полифилла довольно типичен. Обычно полифилл состоит из двух частей:
-<ol>
-<li>Проверка, есть ли встроенная возможность.</li>
-<li>Эмуляция, если её нет.</li>
-</ol>
-
-## Проверка встроенного свойства
-
-Для проверки встроенной поддержки `firstElementChild` мы можем просто обратиться к `document.documentElement.firstElementChild`.
-
-Если DOM-свойство `firstElementChild` поддерживается, то его значение не может быть `undefined`. Если детей нет  -- свойство равно `null`, но не `undefined`. 
-
-Сравним:
-
-```js
-//+ run
-alert( document.head.previousSibling ); // null, поддержка есть
-alert( document.head.blabla ); // undefined, поддержки нет
-```
-
-За счёт этого работает проверка в первой строке полифилла.
-
-**Важная тонкость -- элемент, который мы тестируем, должен *по стандарту* поддерживать такое свойство.**
-
-Попытаемся, к примеру, проверить "поддержку" свойства `value`. У `input` оно есть, у `div` такого свойства нет:
-
-```js
-//+ run
-var div = document.createElement('div');
-var input = document.createElement('input');
-
-alert( input.value ); // пустая строка, поддержка есть
-alert( div.value ); // undefined, поддержки нет
-```
-
-[smart header="Поддержка значений свойств"]
-Если мы хотим проверить поддержку не свойства целиком, а некоторых его значений, то ситуация сложнее.
-
-Например, нам интересно, поддерживает ли браузер `<input type="range">`. То есть, понятно, что свойство `type` у `input`, в целом, поддерживается, а вот конкретный тип `<input>`?
-
-Для этого можно создать `<input>` с таким `type` и посмотреть, подействовал ли он. 
-
-Например:
-
-```html
-<!--+ run -->
-<input type="radio">
-<input type="no-such-type">
-
-<script>
-  alert( document.body.children[0].type ); // radio, поддерживается
-  alert( document.body.children[1].type ); // text, не поддерживается
-</script>
-```
-
-<ol>
-<li>Первый `input` имеет `type="radio"`. Этот тип точно поддерживается, поэтому `input.type` имеет значение `"radio"`, как и указано.
-</li>
-<li>Второй `input` имеет `type="no-such-type"`. В качестве типа, для примера, специально указано заведомо неподдерживаемое значение. При этом `input.type` равен `"text"`, таково значение по умолчанию. Мы можем прочитать его и увидеть, что поддержки нет.</li>
-</ol>
-
-Эта проверка работает, так как хоть в HTML-атрибут `type` и можно присвоить любую строку, но DOM-свойство `type` [по стандарту](http://www.w3.org/TR/html-markup/input.html) хранит реальный тип `input'а`.
-[/smart]
-
-## Добавляем поддержку свойства
-
-Если мы осуществили проверку и видим, что встроенной поддержки нет -- полифилл должен её добавить.
-
-Для этого вспомним, что DOM элементы описываются соответствующими JS-классами.
-
-Например:
-<ul>
-<li>`<li>` -- [HTMLLiElement](http://www.w3.org/TR/html5/grouping-content.html#the-li-element)</li>
-<li>`<a>` -- [HTMLAnchorElement](http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element)</li>
-<li>`<body>` -- [HTMLBodyElement](http://www.w3.org/TR/html5/sections.html#the-body-element)</li>
-</ul>
-
-Они наследуют, как мы видели ранее, от [HTMLElement](http://www.w3.org/TR/html5/dom.html#htmlelement), который является общим родительским классом для HTML-элементов.
-
-А `HTMLElement`, в свою очередь, наследует от [Element](http://www.w3.org/TR/dom/#interface-element), который является общим родителем не только для HTML, но и для других DOM-структур, например для XML и SVG.
-
-**Для добавления нужной возможности берётся правильный класс и модифицируется его `prototype`.**
-
-Например, можно добавить всем элементам в прототип функцию:
-
-```js
-//+ run
-Element.prototype.sayHi = function() {
-  alert( "Привет от " + this );
-}
-
-document.body.sayHi(); // Привет от [object HTMLBodyElement]
-```
-
-Сложнее -- добавить свойство, но это тоже возможно, через `Object.defineProperty`:
-
-```js
-//+ run
-Object.defineProperty(Element.prototype, 'lowerTag', {
-  get: function() {
-    return this.tagName.toLowerCase();
-  }
-});
-
-alert( document.body.lowerTag ); // body
-```
-
-[warn header="Геттер-сеттер и IE8"]
-В IE8 современные методы для работы со свойствами, такие как [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) и другие не поддерживаются для произвольных объектов, но отлично работают для DOM-элементов.
-
-Чем полифиллы и пользуются, "добавляя" в IE8 многие из современных методов DOM.
-[/warn]
-
-
-## Какова поддержка свойства?
-
-А нужен ли вообще полифилл? Какие браузеры поддерживают интересное нам свойство или метод?
-
-Зачастую такая информация есть в справочнике MDN, например для метода `remove()`: [](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove) -- табличка совместимости внизу.
-
-Также бывает полезен сервис [](http://caniuse.com), например для `elem.matches(css)`: [](http://caniuse.com/#feat=matchesselector).
-
-## Итого
-
-Если вы поддерживаете устаревшие браузеры -- и здесь речь идёт не только про старые IE, другие браузеры тоже обновляются не у всех мгновенно -- не обязательно ограничивать себя в использовании современных возможностей.
-
-Многие из них легко полифиллятся добавлением на страницу соответствующих библиотек.
-
-Для поиска полифилла обычно достаточно ввести в поисковике `"polyfill"`, и нужное свойство либо метод. Как правило, полифиллы идут в виде коллекций скриптов.
-
-**Полифиллы хороши тем, что мы просто подключаем их и используем везде современный DOM/JS, а когда старые браузеры окончательно отомрут -- просто выкинем полифилл, без изменения кода.**
-
-Типичная схема работы полифилла DOM-свойства или метода:
-
-<ul>
-<li>Создаётся элемент, который его, в теории, должен поддерживать.</li>
-<li>Соответствующее свойство сравнивается с `undefined`.</li>
-<li>Если его нет -- модифицируется прототип, обычно это `Element.prototype` -- в него дописываются новые геттеры и функции.</li>
-</ul>
-
-Другие полифиллы сделать сложнее. Например, полифилл, который хочет добавить в браузер поддержку элементов вида `<input type="range">`, может найти все такие элементы на странице и обработать их, меняя внешний вид и работу через JavaScript. Это возможно. Но если уже существующему `<input>` поменять `type` на `range` -- полифилл не "подхватит" его автоматически.
-
-Описанная ситуация нормальна. Не всегда полифилл обеспечивает идеальную поддержку наравне с родными свойствами. Но если мы не собираемся так делать, то подобный полифилл вполне подойдёт. 
-
-Один из лучших сервисов для полифиллов: [polyfill.io](http://polyfill.io). Он даёт возможность вставлять на свою страницу скрипт с запросом к сервису, например:
-
-```html
-<script src="//cdn.polyfill.io/v1/polyfill.js?features=es6"></script>
-```
-
-При запросе сервис анализирует заголовки, понимает, какая версия какого браузера к нему обратилась и возвращает скрипт-полифилл, добавляющий в браузер возможности, которых там нет. В параметре `features` можно указать, какие именно возможности нужны, в примере выше это функции стандарта ES6. Подробнее -- см. [примеры](http://polyfill.webservices.ft.com/v1/docs/examples) и [список возможностей](http://polyfill.webservices.ft.com/v1/docs/features/).
-
-Также есть и другие коллекции, как правило, полифиллы организованы в виде коллекции, из которой можно как выбрать отдельные свойства и функции, так и подключить всё вместе, пачкой.
-
-Примеры полифиллов:
-<ul>
-<li>[](https://github.com/jonathantneal/polyfill) -- ES5 вместе с DOM</li>
-<li>[](https://github.com/termi/ES5-DOM-SHIM) -- ES5 вместе с DOM</li>
-<li>[](https://github.com/inexorabletash/polyfill) -- ES5+ вместе с DOM</li>
-</ul>
-
-Более мелкие библиотеки, а также коллекции ссылок на них:
-
-<ul>
-<li>[](http://compatibility.shwups-cms.ch/en/polyfills/)</li>
-<li>[](http://html5please.com/#polyfill)</li>
-<li>[](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)</li>
-</ul>
-
-Конечно, можно собрать и свою библиотеку полифиллов самостоятельно из различных коллекций, которые перечислены выше, а при необходимости и написать самому. В этой части учебника мы изучим ещё много методов работы с DOM, которые в этом помогут.
-
-
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.md b/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.md
deleted file mode 100644
index 90412265..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-```html
-<!--+ run height=100 -->
-<body>
-
-  <div id="widget" data-widget-name="menu">Выберите жанр</div>
-
-  <script>
-    var div = document.getElementById('widget');
-
-    var widgetName = div.getAttribute('data-widget-name');
-    // или так, кроме IE10-
-    var widgetName = div.dataset.widgetName;
-
-    alert( widgetName ); // "menu"
-  </script>
-</body>
-```
-
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html b/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html
deleted file mode 100644
index 1bb9eecc..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYLE HTML>
-<html>
-
-<body>
-
-  <div id="widget" data-widget-name="menu">Выберите жанр</div>
-
-  <script>
-    // ваш код
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/task.md b/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/task.md
deleted file mode 100644
index 8eb90666..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Получите пользовательский атрибут
-
-[importance 5]
-
-<ol>
-<li>Получите `div` в переменную.</li>
-<li>Получите значение атрибута `"data-widget-name"` в переменную.</li>
-<li>Выведите его.</li>
-</ol>
-
-Документ:
-
-```html
-<body>
-
-  <div id="widget" data-widget-name="menu">Выберите жанр</div>
-
-  <script>
-    /* ... */
-  </script>
-</body>
-```
-
-[edit src="solution" task/]
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md
deleted file mode 100644
index 0a69fa3a..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md
+++ /dev/null
@@ -1,56 +0,0 @@
-
-Сначала можно найти ссылки, например, при помощи `document.querySelectorAll('a')`, а затем выбрать из них нужные.
-
-Затем определимся -- что использовать для проверки адреса ссылки: свойство `href` или атрибут `getAttribute('href')`?
-
-Различие между ними заключается в том, что свойство будет содержать полный путь ссылки, а атрибут -- значение, указанное в HTML.
-
-Если открыть страницу локально, на диске, то для `<a href="/tutorial">` значения будут такими:
-<ul>
-<li>`a.getAttribute('href') == "/tutorial"`.</li>
-<li>`a.href == "file:///tutorial"` (возможно, в пути будет также буква диска).</li>
-</ul>
-
-Здесь нужен именно атрибут, хотя бы потому, что в свойстве все ссылки уже с хостом и протоколом, а нам надо понять, был ли протокол в `href` или нет.
-
-Правила определения:
-<ul>
-<li>Cсылки без `href` и без протокола `://` являются заведомо внутренними.</li>
-<li>Там, где протокол есть -- проверяем, начинается ли адрес с `http://internal.com`.</li>
-</ul>
-
-Итого, код может быть таким:
-```js
-var links = document.querySelectorAll('a');
-
-for (var i = 0; i < links.length; i++) {
-
-  var a = links[i];
-
-  var href = a.getAttribute('href');
-
-  if (!href) continue; // нет атрибута
-
-  if (href.indexOf('://') == -1) continue; // без протокола 
-
-  if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
-
-  a.classList.add('external');
-}
-```
-
-...Но, как это часто бывает, знание CSS может упростить задачу. Удобнее и эффективнее здесь -- указать проверки для `href` прямо в CSS-селекторе: 
-
-```js
-// ищем все ссылки, у которых в href есть протокол, 
-// но адрес начинается не с http://internal.com
-var css = 'a[href*="://"]:not([href^="http://internal.com"])';
-var links = document.querySelectorAll(css);
-
-for (var i = 0; i < links.length; i++) {
-  links[i].classList.add('external');
-}
-```
-
-
-
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html
deleted file mode 100644
index 28f0790f..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .external {
-      background-color: yellow;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <a name="list">список</a>
-  <ul>
-    <li><a href="http://google.com">http://google.com</a></li>
-    <li><a href="/tutorial">/tutorial.html</a></li>
-    <li><a href="local/path">local/path</a></li>
-    <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
-    <li><a href="http://nodejs.org">http://nodejs.org</a></li>
-    <li><a href="http://internal.com/test">http://internal.com/test</a></li>
-  </ul>
-
-
-  <script>
-    var css = 'a[href*="://"]:not([href^="http://internal.com"])';
-    var links = document.querySelectorAll(css);
-
-    for (var i = 0; i < links.length; i++) {
-      links[i].classList.add('external');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md
deleted file mode 100644
index 30a6af59..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Поставьте класс ссылкам
-
-[importance 3]
-
-Сделайте желтыми внешние ссылки, добавив им класс `external`.
-
-Все ссылки без `href`, без протокола и начинающиеся с `http://internal.com` считаются внутренними.
-
-```html
-<!--+ run -->
-<style>
-  .external {
-    background-color: yellow
-  }
-</style>
-
-<a name="list">список</a>
-<ul>
-  <li><a href="http://google.com">http://google.com</a></li>
-  <li><a href="/tutorial">/tutorial.html</a></li>
-  <li><a href="local/path">local/path</a></li>
-  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
-  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
-  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
-</ul>
-```
-
-
-Результат: 
-[iframe border=1 height=180 src="solution"]
-
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/article.md b/2-ui/1-document/9-attributes-and-custom-properties/article.md
deleted file mode 100644
index e695b11b..00000000
--- a/2-ui/1-document/9-attributes-and-custom-properties/article.md
+++ /dev/null
@@ -1,555 +0,0 @@
-# Атрибуты и DOM-свойства
-
-При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. 
-
-Например, если тег выглядит как `<body id="page">`, то у объекта будет свойство `body.id = "page"`. 
-
-Но это преобразование -- не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство -- другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
-
-Если коротко -- HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.
-
-[cut]
-## Свои DOM-свойства
-
-Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.
-
-**Узел DOM -- это объект, поэтому, как и любой объект в JavaScript, он может содержать  пользовательские свойства и методы.**
-
-Например, создадим в `document.body` новое свойство и запишем в него объект:
-
-```js
-//+ run
-document.body.myData = {
-  name: 'Петр',
-  familyName: 'Петрович'
-};
-
-alert( document.body.myData.name ); // Петр
-```
-
-Можно добавить и новую функцию:
-
-```js
-//+ run
-document.body.sayHi = function() {
-  alert( this.nodeName );
-}
-
-document.body.sayHi(); // BODY, выполнилась с правильным this
-```
-
-Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.
-
-Обратим внимание, пользовательские DOM-свойства:
-
-<ul>
-<li>Могут иметь любое значение.</li>
-<li>Названия свойств *чувствительны* к регистру.</li>
-<li>Работают за счет того, что DOM-узлы являются объектами JavaScript.</li>
-</ul>
-
-## Атрибуты
-
-Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.
-
-Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.
-
-Доступ к атрибутам осуществляется при помощи стандартных методов:
-<ul>
-<li>`elem.hasAttribute(name)` - проверяет наличие атрибута</li>
-<li>`elem.getAttribute(name)` - получает значение атрибута</li>
-<li>`elem.setAttribute(name, value)` - устанавливает атрибут</li>
-<li>`elem.removeAttribute(name)` - удаляет атрибут</li>
-</ul>
-
-Эти методы возвращают именно то значение, которое находится в HTML.
-
-Также все атрибуты элемента можно получить с помощью свойства `elem.attributes`, которое содержит псевдо-массив объектов типа [Attr](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-637646024).
-
-В отличие от свойств, атрибуты:
-
-<ul>
-<li>Всегда являются строками.</li>
-<li>Их имя *нечувствительно* к регистру (ведь это HTML)</li>
-<li>Видны в `innerHTML` (за исключением старых IE)</li>
-</ul>
-
-Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:
-
-```html
-<body>
-  <div id="elem" about="Elephant" class="smiling"></div>
-</body>
-```
-
-Пример ниже устанавливает атрибуты и демонстрирует их особенности.
-
-```html
-<!--+ run -->
-<body>
-  <div id="elem" about="Elephant"></div>
-
-  <script>
-    alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен
-
-    elem.setAttribute('Test', 123); // (2) атрибут Test установлен
-    alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты!
-
-    var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов
-    for (var i = 0; i < attrs.length; i++) {
-      alert( attrs[i].name + " = " + attrs[i].value );
-    }
-  </script>
-</body>
-```
-
-При запуске кода выше обратите внимание:
-<ol>
-<li>`getAttribute('About')` -- первая буква имени атрибута `About` написана в верхнем регистре, а в HTML -- в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.</li>
-<li>Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут  автоматически преобразованы.</li>
-<li>После добавления атрибута его можно увидеть в `innerHTML` элемента.</li>
-<li>Коллекция `attributes` содержит все атрибуты в виде объектов со свойствами `name` и `value`.</li>
-</ol>
-
-## Когда полезен доступ к атрибутам?
-
-Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех *стандартных* атрибутов.
-
-Например, свойства тега `'A'` описаны в спецификации DOM: <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-48250443">HTMLAnchorElement</a>.
-
-Например, у него есть свойство `"href"`. Кроме того, он имеет `"id"` и другие свойства, общие для всех элементов, которые описаны в спецификации в <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-58190037">HTMLElement</a>.
-
-Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.
-
-Рассмотрим несколько примеров.
-
-### Ссылка "как есть" из атрибута href   
-
-Синхронизация не гарантирует одинакового значения в атрибуте и свойстве. 
-
-Для примера, посмотрим, что произойдет с атрибутом `"href"` при изменении свойства:
-
-```html
-<!--+ height=30 run -->
-<a id="a" href="#"></a>
-<script>
-*!*
-  a.href = '/';
-*/!*
-
-  alert( 'атрибут:' + a.getAttribute('href') ); // '/'
-  alert( 'свойство:' + a.href );  // *!*полный URL*/!* 
-
-</script>
-```
-
-Это происходит потому, что атрибут может быть любым, а свойство `href`, <a href="http://www.w3.org/TR/REC-html40/struct/links.html#adef-href">в соответствии со спецификацией W3C</a>, должно быть полной ссылкой.
-
-Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.
-
-[smart header="Есть и другие подобные атрибуты"]
-
-Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство `input.checked` имеет логическое значение `true/false`, а HTML-атрибут `checked` -- любое строковое, важно лишь его наличие.
-
-Работа с `checked` через атрибут и свойство:
-
-```html
-<!--+ run -->
-<input id="input" type="checkbox" checked>
-
-<script>
-*!*
-  // работа с checked через атрибут
-*/!*
-  alert( input.getAttribute('checked') ); // пустая строка
-  input.removeAttribute('checked'); // снять галочку 
-
-*!*  
-  // работа с checked через свойство
-*/!*
-  alert( input.checked ); // false <-- может быть только true/false
-  input.checked = true; // поставить галочку
-</script>
-```
-[/smart]
-
-### Исходное значение value
-
-Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.
-
-**Чаще синхронизация -- односторонняя: свойство зависит от атрибута, но не наоборот.**
-
-Например, при изменении свойства `input.value` атрибут `input.getAttribute('value')` не меняется:
-
-```html
-<!--+ height=30 run -->
-<body>
-  <input id="input" type="text" value="markup">
-  <script>
-*!*
-    input.value = 'new'; // поменяли свойство
-
-    alert( input.getAttribute('value') ); // 'markup', не изменилось!
-*/!*
-  </script>
-</body>
-```
-
-То есть, изменение DOM-свойства `value` на атрибут не влияет, он остаётся таким же.
-
-А вот изменение атрибута обновляет свойство:
-
-```html
-<!--+ height=30 run -->
-<body>
-  <input id="input" type="text" value="markup">
-  <script>
-*!*
-    input.setAttribute('value', 'new'); // поменяли атрибут
-
-    alert( input.value ); // 'new', input.value изменилось!
-*/!*
-  </script>
-</body>
-```
-
-Эту особенность можно красиво использовать.
-
-Получается, что атрибут `input.getAttribute('value')` хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось. 
-
-Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.
-
-## Классы в виде строки: className
-
-Атрибуту `"class"` соответствует свойство `className`.
-
-Так как слово `"class"` является зарезервированным словом в Javascript, то при проектировании DOM решили, что соответствующее свойство будет называться `className`.
-
-Например:
-
-```html
-<!--+ run -->
-<body class="main page">
-  <script>
-    // прочитать класс элемента
-    alert( document.body.className ); // main page
-
-    // поменять класс элемента
-    document.body.className = "class1 class2";
-  </script>
-</body>
-```
-
-Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту `for` (`<label for="...">`) соответствует свойство с названием `htmlFor`.
-
-## Классы в виде объекта: classList   
-
-Атрибут `class` -- уникален. Ему соответствует аж целых два свойства!
-
-Работать с классами как со строкой неудобно. Поэтому, кроме `className`, в современных браузерах есть свойство `classList`.
-
-**Свойство `classList` -- это объект для работы с классами.**
-
-Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку [classList.js](https://github.com/eligrey/classList.js).
-
-Методы `classList`:
-<ul>
-<li>`elem.classList.contains("class")` -- возвращает `true/false`, в зависимости от того, есть ли у элемента класс `class`.</li>
-<li>`elem.classList.add/remove("class")` -- добавляет/удаляет класс `class`</li>
-<li>`elem.classList.toggle("class")` -- если класса `class` нет, добавляет его, если есть -- удаляет.</li>
-</ul>
-
-Кроме того, можно перебрать классы через `for`, так как `classList` -- это псевдо-массив.
-
-Например:
-
-```html
-<!--+ run -->
-<body class="main page">
-  <script>
-    var classList = document.body.classList;
-
-    classList.remove('page'); // удалить класс
-    classList.add('post'); // добавить класс
-
-    for (var i = 0; i < classList.length; i++) { // перечислить классы
-      alert( classList[i] ); // main, затем post
-    }
-
-    alert( classList.contains('post') ); // проверить наличие класса
-
-    alert( document.body.className ); // main post, тоже работает
-  </script>
-</body>
-```
-
-
-## Нестандартные атрибуты
-
-У каждого элемента есть некоторый набор стандартных свойств, например для `<a>` это будут `href`, `name`, `title`, а для `<img>` это будут `src`, `alt`, и так далее. 
-
-Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие -- нет. 
-
-Для нестандартных атрибутов DOM-свойство не создаётся.
-
-Например:
-
-```html
-<!--+ run -->
-<div id="elem" href="http://ya.ru" about="Elephant"></div>
-
-<script>
-  alert( elem.id ); // elem
-*!*
-  alert( elem.about ); // undefined
-*/!*
-</script>
-```
-
-Стандартным свойство является, лишь если оно описано в стандарте именно для этого элемента.
-
-То есть, если назначить элементу `<img>` атрибут `href`, то свойство `img.href` от этого не появится. Как, впрочем, и если назначить ссылке `<a>` атрибут `alt`:
-
-```html
-<!--+ run -->
-<img id="img" href="test">
-<a id="link" alt="test"></a>
-
-<script>
-  alert( img.href ); // undefined
-  alert( link.alt ); // undefined
-</script>
-```
-
-Нестандартные атрибуты иногда используют для CSS.
-
-В примере ниже для показа "состояния заказа" используется атрибут `order-state`:
-
-```html
-<!--+ run -->
-<style>
-  .order[order-state="new"] {
-    color: green;
-  }
-  
-  .order[order-state="pending"] {
-    color: blue;
-  }
-  
-  .order[order-state="canceled"] {
-    color: red;
-  }
-</style>
-
-<div class="order" order-state="new">
-  Новый заказ.
-</div>
-
-<div class="order" order-state="pending">
-  Ожидающий заказ.
-</div>
-
-<div class="order" order-state="canceled">
-  Заказ отменён.
-</div>
-```
-
-Почему именно атрибут? Разве нельзя было сделать классы `.order-state-new`, `.order-state-pending`, `order-state-canceled`?
-
-Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще. 
-
-Например, если нужно отменить заказ, неважно в каком он состоянии сейчас -- это сделает код:
-```js
-div.setAttribute('order-state', 'canceled');
-```
-
-Для классов -- нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:
-
-```js
-div.classList.remove('order-state-new');
-div.classList.add('order-state-canceled');
-```
-
-...То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.
-
-Проще говоря, значение атрибута -- произвольная строка, значение класса -- это "есть" или "нет", поэтому естественно, что атрибуты "мощнее" и бывают удобнее классов как в JS так и в CSS.
-
-## Свойство dataset, data-атрибуты
-
-С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.
-
-Как правило, это делается при помощи атрибутов с названиями, начинающимися на `data-`, например:
-
-```html
-<!--+ run -->
-<div id="elem" *!*data-about*/!*="Elephant" *!*data-user-location*/!*="street">
-  По улице прошёлся слон. Весьма красив и толст был он.
-</div>
-<script>
-  alert( elem.getAttribute('data-about') ); // Elephant
-  alert( elem.getAttribute('data-user-location') ); // street
-</script>
-```
-
-[Стандарт HTML5](http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes) специально разрешает атрибуты `data-*` и резервирует их для пользовательских данных.
-
-При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства `dataset`:
-
-```html
-<!--+ run -->
-<div id="elem" data-about="Elephant" data-user-location="street">
-  По улице прошёлся слон. Весьма красив и толст был он.
-</div>
-<script>
-*!*
-  alert( elem.dataset.about ); // Elephant
-  alert( elem.dataset.userLocation ); // street
-*/!*
-</script>
-```
-
-Обратим внимание -- название `data-user-location` трансформировалось в `dataset.userLocation`. Дефис превращается в большую букву.
-
-## Полифилл для атрибута hidden
-
-Для старых браузеров современные атрибуты иногда нуждаются в полифилле. Как правило, такой полифилл включает в себя не только JavaScript, но и CSS.
-
-Например, свойство/атрибут hidden не поддерживается в IE11.
-
-Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
-
-```html
-<!--+ run height="80"  no-beautify -->
-<style>
-*!*
-  [hidden] { display: none }
-*/!*
-</style>
-
-<div>Текст</div>
-<div hidden>С атрибутом hidden</div>
-<div id="last">Со свойством hidden</div>
-
-<script>
-  last.hidden = true;
-</script>
-```
-
-Если запустить в IE11- пример выше, то `<div hidden>` будет скрыт, а вот последний `div`, которому поставили свойство `hidden` в JavaScript -- по-прежнему виден.
-
-Это потому что CSS "не видит" присвоенное свойство, нужно синхронизировать его в атрибут.
-
-Вот так -- уже работает:
-
-
-```html
-<!--+ run height="80"  no-beautify -->
-<style>
-*!*
-  [hidden] { display: none }
-*/!*
-</style>
-
-<script>
-*!*
-  if (document.documentElement.hidden === undefined) {
-    Object.defineProperty(Element.prototype, "hidden", {
-      set: function(value) {
-        this.setAttribute('hidden', value);
-      },
-      get: function() {
-        return this.getAttribute('hidden');
-      }
-    });
-  }
-*/!*
-</script>
-
-<div>Текст</div>
-<div hidden>С атрибутом hidden</div>
-<div id="last">Со свойством hidden</div>
-
-<script>
-  last.hidden = true;
-</script>
-```
-
-
-## "Особенности" IE8
-
-Если вам нужна поддержка этих версий IE -- есть пара нюансов.
-
-
-<ol>
-<li>Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
-
-```js
-//+ run
-document.body.setAttribute('my', 123);
-
-alert( document.body.my ); // 123 в IE8-
-```
-
-При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено. 
-</li>
-<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className`, вызов `setAttribute('class', ...)` не сработает.</li>
-</ol>
-
-Вывод из этого довольно прост -- чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
-
-## Итого   
-
-<ul>
-<li>Атрибуты -- это то, что написано в HTML.</li>
-<li>Свойство -- это то, что находится в свойстве DOM-объекта.</li>
-</ul>
-
-Таблица сравнений для атрибутов и свойств:
-
-<table>
-<thead>
-<tr>
-<th>Свойства</th>
-<th>Атрибуты</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Любое значение</td>
-<td>Строка</td>
-</tr>
-<tr>
-<td>Названия регистрозависимы</td>
-<td>Не чувствительны к регистру</td>
-</tr>
-<tr>
-<td>Не видны в `innerHTML`</td>
-<td>Видны в `innerHTML`</td>
-</tr>
-</tbody>
-</table>
-
-Синхронизация между атрибутами и свойствами:
-<ul>
-<li>Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.</li>
-<li>Бывает так, что свойство не совсем соответствует атрибуту. Например, "логические" свойства вроде `checked`, `selected` всегда имеют значение `true/false`, а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например `href`.</li>
-</ul>
-
-Нестандартные атрибуты:
-<ul>
-<li>Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать `getAttribute`.</li>
-<li>Атрибуты, название которых начинается с `data-`, можно прочитать через `dataset`. Эта возможность не поддерживается  IE10-.</li>
-</ul>
-
-Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты -- только там, где это *действительно* нужно.
-
-А *действительно* нужны атрибуты очень редко - лишь в следующих трёх случаях:
-<ol>
-<li>Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.</li>
-<li>Когда нужно получить "оригинальное значение" стандартного HTML-атрибута, например, `<input value="...">`.
-</li>
-<li>Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция `attributes`.</li>
-</ol>
-
-Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на `data-` валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство `dataset`.
-
diff --git a/2-ui/1-document/index.md b/2-ui/1-document/index.md
index ebc4cf6f..1b60cdf2 100644
--- a/2-ui/1-document/index.md
+++ b/2-ui/1-document/index.md
@@ -1,3 +1,3 @@
-# Документ и объекты страницы
+# Document
 
-При помощи JavaScript получаем и меняем существующие элементы на странице, а также создаём новые.
\ No newline at end of file
+Here we'll learn to manipulate a web-page using JavaScript.
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
deleted file mode 100755
index 6e44472b..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
-
-  <div id="text">Текст</div>
-
-  <script>
-    // в этой задаче неважно, как именно прятать элемент
-    // например через style.display:
-    document.getElementById('hider').onclick = function() {
-      document.getElementById('text').style.display = 'none';
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
deleted file mode 100755
index 1c50e998..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
-
-  <div id="text">Текст</div>
-
-  <script>
-    /* ваш код */
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md
deleted file mode 100644
index 5f810a38..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Спрятать при клике
-
-[importance 5]
-
-Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с `id="text"`. 
-
-Демо:
-[iframe border=1 src="solution" height=80]
-
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md
deleted file mode 100644
index 77d9ca35..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Решение задачи заключается в использовании `this` в обработчике.
-
-```html
-<!--+ run height=50 -->
-<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать" />
-```
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md
deleted file mode 100644
index c601137c..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Спрятаться
-
-[importance 5]
-
-Создайте кнопку, при клике на которую, она будет скрывать сама себя.
-
-[online]
-Как эта:
-<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать"/>
-[/online]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md
deleted file mode 100644
index b6a9dbb2..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Ответ: будет выведено `1` и `2`.
-
-Первый обработчик сработает, так как он не убран вызовом `removeEventListener`. Для удаления обработчика нужно передать в точности ту же функцию (ссылку на нее), что была назначена, а в коде передается такая же с виду функция, но, тем не менее, это другой объект. 
-
-Для того, чтобы удалить функцию-обработчик, нужно где-то сохранить ссылку на неё, например так:
-
-```js
-function handler() {
-  alert( "1" );
-}
-
-button.addEventListener("click", handler);
-button.removeEventListener("click", handler);
-```
-
-Обработчик `button.onclick` сработает независимо и в дополнение к назначенному в `addEventListener`.
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md
deleted file mode 100644
index 04acb251..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Какие обработчики сработают?
-
-[importance 5]
-
-В переменной `button` находится кнопка. 
-
-Изначально обработчиков на ней нет.
- 
-Что будет выведено при клике после выполнения кода?
-
-```js
-//+ no-beautify
-button.addEventListener("click", function() { alert("1"); });
-
-button.removeEventListener("click", function() { alert("1"); });
-
-button.onclick = function() { alert(2); };
-```
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md
deleted file mode 100644
index 1496f3f8..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md
+++ /dev/null
@@ -1,67 +0,0 @@
-
-Для начала, зададим структуру HTML/CSS.
-
-Меню является отдельным графическим компонентом, его лучше поместить в единый DOM-элемент.
-
-Элементы меню с точки зрения семантики являются списком `UL/LI`. Заголовок должен быть отдельным кликабельным элементом.
-
-Получаем структуру:
-
-```html
-<div class="menu">
-  <span class="title">Сладости (нажми меня)!</span>
-  <ul>
-    <li>Пирог</li>
-    <li>Пончик</li>
-    <li>Мед</li>
-  </ul>
-</div>
-```
-
-Для заголовка лучше использовать именно `SPAN`, а не `DIV`, так как `DIV` постарается занять 100% ширины, и мы не сможем ловить `click` только на тексте:
-
-```html
-<!--+ autorun height=50 -->
-<div style="border: solid red 1px">[Сладости (нажми меня)!]</div>
-```
-
-...А `SPAN` -- это элемент с `display: inline`, поэтому он занимает ровно столько места, сколько занимает текст внутри него:
-
-```html
-<!--+ autorun height=50 -->
-<span style="border: solid red 1px">[Сладости (нажми меня)!]</span>
-```
-
-Раскрытие/закрытие сделаем путём добавления/удаления класса `.menu-open` к меню, которые отвечает за стрелочку и отображение `UL`.
-
-Обычно меню будет закрыто:
-
-```css
-.menu ul {
-  margin: 0;
-  list-style: none;
-  padding-left: 20px;
-  display: none;
-}
-
-.menu .title::before {
-  content: '▶ ';
-  font-size: 80%;
-  color: green;
-}
-```
-
-Если же меню раскрыто, то есть имеет класс `.menu-open`, то стрелочка слева заголовка меняется и список детей показывается:
-
-```css
-.menu.open .title::before {
-  content: '▼ ';
-}
-
-.menu.open ul {
-  display: block;
-}
-```
-
-Для JavaScript остался минимум работы -- только добавить/удалить класс при клике.
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
deleted file mode 100755
index 1585fbd2..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .menu ul {
-      margin: 0;
-      list-style: none;
-      padding-left: 20px;
-      display: none;
-    }
-    
-    .menu .title {
-      font-size: 18px;
-      cursor: pointer;
-    }
-    
-    .menu .title::before {
-      content: '▶ ';
-      font-size: 80%;
-      color: green;
-    }
-    
-    .menu.open .title::before {
-      content: '▼ ';
-    }
-    
-    .menu.open ul {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="sweeties" class="menu">
-    <span class="title">Сладости (нажми меня)!</span>
-    <ul>
-      <li>Торт</li>
-      <li>Пончик</li>
-      <li>Пирожное</li>
-    </ul>
-
-  </div>
-
-  <script>
-    var menuElem = document.getElementById('sweeties');
-    var titleElem = menuElem.querySelector('.title');
-
-    titleElem.onclick = function() {
-      menuElem.classList.toggle('open');
-    };
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
deleted file mode 100755
index a868d472..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  ▶ ▼ Сладости (нажми меня)!
-  <ul>
-    <li>Торт</li>
-    <li>Пончик</li>
-    <li>Пирожное</li>
-  </ul>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md
deleted file mode 100644
index 7d87d886..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Раскрывающееся меню
-
-[importance 5]
-
-Создайте меню, которое раскрывается/сворачивается при клике:
-
-[iframe border=1 height=100 src="solution"]
-
-P.S. HTML/CSS исходного документа понадобится изменить.
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md
deleted file mode 100644
index 4b1699b6..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-<ol>
-<li>Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей.
-
-Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
-
-Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.
-
-С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.</li>
-<li>Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.</li>
-</ol>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
deleted file mode 100755
index 517cb83e..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="stylesheet" href="messages.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="messages-container">
-    <div class="pane">
-      <h3>Лошадь</h3>
-      <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
-      <button class="remove-button">[x]</button>
-    </div>
-    <div class="pane">
-      <h3>Осёл</h3>
-      <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
-      <button class="remove-button">[x]</button>
-    </div>
-    <div class="pane">
-      <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
-      <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
-        тёлками.
-      </p>
-      <button class="remove-button">[x]</button>
-    </div>
-  </div>
-
-
-
-  <script>
-    var buttons = document.querySelectorAll('#messages-container .remove-button');
-
-    for (var i = 0; i < buttons.length; i++) {
-      var button = buttons[i];
-
-      button.onclick = function() {
-        var el = this.parentNode;
-        el.parentNode.removeChild(el);
-      };
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css
deleted file mode 100755
index 54d6f5e2..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css
+++ /dev/null
@@ -1,36 +0,0 @@
-body {
-  margin: 10px auto;
-  width: 470px;
-}
-
-h3 {
-  margin: 0;
-  padding-bottom: .3em;
-  padding-right: 20px;
-  font-size: 1.1em;
-}
-
-p {
-  margin: 0;
-  padding: 0 0 .5em;
-}
-
-.pane {
-  background: #edf5e1;
-  padding: 10px 20px 10px;
-  border-top: solid 2px #c4df9b;
-  position: relative;
-}
-
-.remove-button {
-  position: absolute;
-  font-size: 110%;
-  top: 0;
-  color: darkred;
-  right: 10px;
-  display: block;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
deleted file mode 100755
index c50a409a..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="stylesheet" type="text/css" href="messages.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Кнопка для удаления:
-  <button class="remove-button">[x]</button>
-
-  <div>
-    <div class="pane">
-      <h3>Лошадь</h3>
-      <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
-    </div>
-    <div class="pane">
-      <h3>Осёл</h3>
-      <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
-    </div>
-    <div class="pane">
-      <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
-      <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
-        тёлками.
-      </p>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css
deleted file mode 100755
index d58d4208..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css
+++ /dev/null
@@ -1,31 +0,0 @@
-body {
-  margin: 10px auto;
-  width: 470px;
-}
-
-h3 {
-  margin: 0;
-  padding-bottom: .3em;
-  font-size: 1.1em;
-}
-
-p {
-  margin: 0;
-  padding: 0 0 .5em;
-}
-
-.pane {
-  background: #edf5e1;
-  padding: 10px 20px 10px;
-  border-top: solid 2px #c4df9b;
-}
-
-.remove-button {
-  font-size: 110%;
-  color: darkred;
-  right: 10px;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md
deleted file mode 100644
index a7d6c477..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Спрятать сообщение
-
-[importance 5]
-
-Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.
-
-Результат:
-[iframe src="solution" height=450]
-
-P.S. Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float:right`? Почему?
-
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png
deleted file mode 100644
index fd663ca3..00000000
Binary files a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1@2x.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1@2x.png
deleted file mode 100644
index d906e5b5..00000000
Binary files a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png
deleted file mode 100644
index a51acd6e..00000000
Binary files a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2@2x.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2@2x.png
deleted file mode 100644
index 22412326..00000000
Binary files a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
deleted file mode 100644
index 7804dc3c..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Лента изображений в разметке должна быть представлена как список `<ul>` тегов `<img>`.
-
-Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
-
-<img src="carousel1.png">
-
-Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.
-
-Главное -- не использовать `display:inline`, так как такие элементы имеют дополнительные отступы снизу для возможных "хвостов букв".
-
-В частности, для `<img>` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
-
-Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:
-
-<img src="carousel2.png">
-
-У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.
-
-Снаружи окошка находятся стрелки и внешний контейнер.
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
deleted file mode 100755
index 25e60dc3..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="carousel" class="carousel">
-    <button class="arrow prev">⇦</button>
-    <div class="gallery">
-      <ul class="images">
-        <li><img src="https://js.cx/carousel/1.png"></li>
-        <li><img src="https://js.cx/carousel/2.png"></li>
-        <li><img src="https://js.cx/carousel/3.png"></li>
-        <li><img src="https://js.cx/carousel/4.png"></li>
-        <li><img src="https://js.cx/carousel/5.png"></li>
-        <li><img src="https://js.cx/carousel/6.png"></li>
-        <li><img src="https://js.cx/carousel/7.png"></li>
-        <li><img src="https://js.cx/carousel/8.png"></li>
-        <li><img src="https://js.cx/carousel/9.png"></li>
-        <li><img src="https://js.cx/carousel/10.png"></li>
-      </ul>
-    </div>
-    <button class="arrow next">⇨</button>
-  </div>
-
-  <script>
-    /* этот код помечает картинки, для удобства разработки */
-    var lis = document.getElementsByTagName('li');
-    for (var i = 0; i < lis.length; i++) {
-      lis[i].style.position = 'relative';
-      var span = document.createElement('span');
-      // обычно лучше использовать CSS-классы,
-      // но этот код - для удобства разработки, так что не будем трогать стили
-      span.style.cssText = 'position:absolute;left:0;top:0';
-      span.innerHTML = i + 1;
-      lis[i].appendChild(span);
-    }
-
-    /* конфигурация */
-    var width = 130; // ширина изображения
-    var count = 3; // количество изображений
-
-    var carousel = document.getElementById('carousel');
-    var list = carousel.querySelector('ul');
-    var listElems = carousel.querySelectorAll('li');
-
-    var position = 0; // текущий сдвиг влево
-
-    carousel.querySelector('.prev').onclick = function() {
-      // сдвиг влево
-      // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
-      position = Math.min(position + width * count, 0)
-      list.style.marginLeft = position + 'px';
-    };
-
-    carousel.querySelector('.next').onclick = function() {
-      // сдвиг вправо
-      // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
-      position = Math.max(position - width * count, -width * (listElems.length - count));
-      list.style.marginLeft = position + 'px';
-    };
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
deleted file mode 100755
index 9ff8a831..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
+++ /dev/null
@@ -1,72 +0,0 @@
-body {
-  padding: 10px;
-}
-
-.carousel {
-  position: relative;
-  width: 398px;
-  padding: 10px 40px;
-  border: 1px solid #CCC;
-  border-radius: 15px;
-  background: #eee;
-}
-
-.carousel img {
-  width: 130px;
-  height: 130px;
-  /* по умолчанию inline, в ряде браузеров это даст лишнее пространство вокруг элементов */
-  
-  display: block;
-}
-
-.arrow {
-  position: absolute;
-  top: 60px;
-  padding: 0;
-  background: #ddd;
-  border-radius: 15px;
-  border: 1px solid gray;
-  font-size: 24px;
-  line-height: 24px;
-  color: #444;
-  display: block;
-}
-
-.arrow:focus {
-  outline: none;
-}
-
-.arrow:hover {
-  background: #ccc;
-  cursor: pointer;
-}
-
-.prev {
-  left: 7px;
-}
-
-.next {
-  right: 7px;
-}
-
-.gallery {
-  width: 390px;
-  overflow: hidden;
-}
-
-.gallery ul {
-  height: 130px;
-  width: 9999px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  transition: margin-left 250ms;
-  /* remove white-space between inline-block'ed li */
-  /* http://davidwalsh.name/remove-whitespace-inline-block */
-  
-  font-size: 0;
-}
-
-.gallery li {
-  display: inline-block;
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
deleted file mode 100755
index 59e72f15..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <!-- ваша верстка виджета, ваши стили -->
-
-  <button class="arrow">⇦</button>
-  <button class="arrow">⇨</button>
-
-
-  <ul>
-    <li><img src="https://js.cx/carousel/1.png"></li>
-    <li><img src="https://js.cx/carousel/2.png"></li>
-    <li><img src="https://js.cx/carousel/3.png"></li>
-    <li><img src="https://js.cx/carousel/4.png"></li>
-    <li><img src="https://js.cx/carousel/5.png"></li>
-    <li><img src="https://js.cx/carousel/6.png"></li>
-    <li><img src="https://js.cx/carousel/7.png"></li>
-    <li><img src="https://js.cx/carousel/8.png"></li>
-    <li><img src="https://js.cx/carousel/9.png"></li>
-    <li><img src="https://js.cx/carousel/10.png"></li>
-  </ul>
-
-
-  <script>
-    // этот код помечает картинки цифрами, для удобства разработки
-    // его можно убрать, если не нужен
-    var lis = document.getElementsByTagName('li');
-    for (var i = 0; i < lis.length; i++) {
-      lis[i].style.position = 'relative';
-      var span = document.createElement('span');
-      span.style.cssText = 'position:absolute;left:0;top:0';
-      span.innerHTML = i + 1;
-      lis[i].appendChild(span);
-    }
-  </script>
-
-  <script>
-    // ваш код..
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
deleted file mode 100644
index 430a725e..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.arrow {
-  padding: 0;
-  background: #ddd;
-  border-radius: 15px;
-  border: 1px solid gray;
-  font-size: 24px;
-  line-height: 24px;
-  color: #444;
-  display: block;
-}
-
-.arrow:focus {
-  outline: none;
-}
-
-.arrow:hover {
-  background: #ccc;
-  cursor: pointer;
-}
-
-ul {
-  height: 130px;
-  width: 9999px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  /* убрать между inline-block li лишние пробелы, которые есть в HTML */
-  /* http://davidwalsh.name/remove-whitespace-inline-block */
-  
-  font-size: 0;
-}
-
-ul img {
-  width: 130px;
-  height: 130px;
-  /* по умолчанию inline, но в ряде браузеров это даст лишнее пространство вокруг элементов */
-  
-  display: block;
-}
-
-ul li {
-  /* если в HTML между элементами <li>..</li> есть пробелы, то они будут видны на странице,
-  чтобы их избежать, нужно либо писать <li>..</li><li>..</li> вплотную, либо не ставить закрывающие </li> */
-  
-  display: inline-block;
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md
deleted file mode 100644
index 0d1abc93..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Карусель
-
-[importance 4]
-
-Напишите "Карусель" -- ленту изображений, которую можно листать влево-вправо нажатием на стрелочки.
-
-[iframe height=200 src="solution"]
-
-В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.
-
-P.S. В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md
deleted file mode 100644
index 3e573e2a..00000000
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md
+++ /dev/null
@@ -1,503 +0,0 @@
-# Введение в браузерные события 
-
-Для реакции на действия посетителя и внутреннего взаимодействия скриптов существуют *события*. 
-
-[cut]
-
-*Событие* -- это сигнал от браузера о том, что что-то произошло. Существует много видов событий. Посмотрим список самых часто используемых, пока просто для ознакомления:
-
-<dl>
-<dt>События мыши</dt>
-<dd>
-<ul>
-<li>`click` -- происходит, когда кликнули на элемент левой кнопкой мыши</li>
-<li>`contextmenu` -- происходит, когда кликнули на элемент правой кнопкой мыши</li>
-<li>`mouseover` -- возникает, когда на элемент наводится мышь</li>
-<li>`mousedown` и `mouseup` -- когда кнопку мыши нажали или отжали</li>
-<li>`mousemove` -- при движении мыши</li>
-</ul>
-</dd>
-<dt>События на элементах управления</dt>
-<dd>
-<ul>
-<li>`submit` -- посетитель отправил форму `<form>`</li>
-<li>`focus` --  посетитель фокусируется на элементе, например нажимает на `<input>`</li>
-</ul>
-<dt>Клавиатурные события</dt>
-<dd>
-<ul>
-<li>`keydown` -- когда посетитель нажимает клавишу</li>
-<li>`keyup` -- когда посетитель отпускает клавишу</li>
-</ul>
-</dd>
-<dt>События документа</dt>
-<dd>
-<ul>
-<li>`DOMContentLoaded` -- когда HTML загружен и обработан, DOM документа полностью построен и доступен.</li>
-</ul></dd>
-<dt>События CSS</dt>
-<dd>
-<ul>
-<li>`transitionend` -- когда CSS-анимация завершена.</li>
-</ul></dd>
-</dl>
-
-Также есть и много других событий.
-
-## Назначение обработчиков событий  
-
-Событию можно назначить *обработчик*, то есть функцию, которая сработает, как только событие произошло.
-
-Именно благодаря обработчикам JavaScript-код может реагировать на действия посетителя.
-
-Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная от самого простого.
- 
-### Использование атрибута HTML   
-
-Обработчик может быть назначен прямо в разметке, в атрибуте, который называется `on<событие>`.
-
-Например, чтобы прикрепить `click`-событие к `input` кнопке, можно присвоить обработчик `onclick`, вот так:
-
-```html
-<input value="Нажми меня" *!*onclick="alert('Клик!')"*/!* type="button">
-```
-
-При клике мышкой на кнопке выполнится код, указанный в атрибуте `onclick`.
-
-[online]
-В действии: <input value="Нажми меня" onclick="alert('Клик!');" type="button">
-[/online]
-
-Обратите внимание, для содержимого атрибута `onclick` используются *одинарные кавычки*, так как сам атрибут находится в двойных. 
-
-Частая ошибка новичков в том, что они забывают, что код находится внутри атрибута. Запись вида `onclick="alert("Клик!")"`, с двойными кавычки внутри, не будет работать. Если вам действительно нужно использовать именно двойные кавычки, то это можно сделать, заменив их на `&quot;`, то есть так: <code>onclick="alert(&amp;quot;Клик!&amp;quot;)"</code>.
-
-Однако, обычно этого не требуется, так как прямо в разметке пишутся только очень простые обработчики. Если нужно сделать что-то сложное, то имеет смысл описать это в функции, и в обработчике вызвать уже её.
-
-Следующий пример по клику запускает функцию `countRabbits()`.
-
-```html
-<!--+ run height=80 -->
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta charset="utf-8">
-
-  <script>
-    function countRabbits() {
-      for(var i=1; i<=3; i++) {
-        alert("Кролик номер " + i);
-      }
-    }
-  </script>
-</head>
-<body>
-  <input type="button" *!*onclick="countRabbits()"*/!* value="Считать кроликов!"/>
-</body>
-</html>
-```
-
-Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому `ONCLICK` будет работать так же, как `onClick` или `onCLICK`... Но, как правило, атрибуты пишут в нижнем регистре: `onclick`.
-
-### Использование свойства DOM-объекта   
-
-Можно назначать обработчик, используя свойство DOM-элемента `on<событие>`. 
-
-Пример установки обработчика `click`:
-
-```html
-<input id="elem" type="button" value="Нажми меня" />
-<script>
-*!*
-  elem.onclick = function() {
-    alert( 'Спасибо' );
-  };
-*/!*
-</script>
-```
-
-Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство `onclick`.
-
-**Этот способ, по сути, аналогичен предыдущему.**
-
-Обработчик хранится именно в DOM-свойстве, а атрибут -- лишь один из способов его инициализации.
-
-Эти два примера кода работают одинаково:
-
-<ol>
-<li>Только HTML:
-
-```html
-<!--+ run height=50 -->
-<input type="button" *!*onclick="alert('Клик!')"*/!* value="Кнопка"/>
-```
-
-</li>
-<li>HTML + JS:
-
-```html
-<!--+ run height=50 -->
-<input type="button" id="button" value="Кнопка" />
-<script>
-*!*
-  button.onclick = function() {
-    alert( 'Клик!' );
-  };
-*/!*
-</script>
-```
-
-</li>
-</ol>
-
-**Так как DOM-свойство `onclick`, в итоге, одно, то назначить более одного обработчика так нельзя.** 
-
-В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
-
-```html
-<!--+ run height=50 autorun -->
-<input type="button" id="elem" onclick="alert('До')" value="Нажми меня" />
-<script>
-*!*
-  elem.onclick = function() { // перезапишет существующий обработчик
-    alert( 'После' ); // выведется только это
-  };
-*/!*
-</script>
-```
-
-Кстати, обработчиком можно назначить и уже существующую функцию:
-
-```js
-function sayThanks() {
-  alert( 'Спасибо!' );
-}
-
-elem.onclick = sayThanks;
-```
-
-Если обработчик надоел -- его всегда можно убрать назначением `elem.onclick = null`.
-
-## Доступ к элементу через this
-
-Внутри обработчика события `this` ссылается на текущий элемент, то есть на тот, на котором он сработал. 
-
-Это можно использовать, чтобы получить свойства или изменить элемент.
-
-В коде ниже `button` выводит свое содержимое, используя `this.innerHTML`:
-
-```html
-<button onclick="alert(this.innerHTML)">Нажми меня</button>
-```
-
-[online]
-В действии: <button onclick="alert(this.innerHTML)">Нажми меня</button>
-[/online]
-
-## Частые ошибки
-
-Если вы только начинаете работать с событиями -- обратите внимание на следующие особенности.
-
-<dl>
-<dt>Функция должна быть присвоена как `sayThanks`, а не `sayThanks()`.</dt>
-<dd>
-
-```js
-button.onclick = sayThanks;
-```
-
-Если добавить скобки, то `sayThanks()` --  будет уже *результат* выполнения функции (а так как в ней нет `return`, то в `onclick` попадёт `undefined`). Нам же нужна именно функция.
-
-...А вот в разметке как раз скобки нужны:
-
-```html
-<input type="button" id="button" onclick="sayThanks()" />
-```
-
-Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что:
-
-```js
-button.onclick = function() {
-*!*
-  sayThanks(); // содержимое атрибута
-*/!*
-};
-```
-
-</dd>
-<dt>Используйте именно функции, а не строки.</dt>
-<dd>
-Назначение обработчика строкой `elem.onclick = "alert(1)"` можно иногда увидеть в древнем коде. Это будет работать, но не рекомендуется, могут быть проблемы при сжатии JavaScript Да и вообще, передавать код в виде строки по меньшей мере странно в языке, который поддерживает Function Expressions. Это возможно лишь по соображениям совместимости, не делайте так.
-</dd>
-<dt>Не используйте `setAttribute`.</dt>
-<dd>
-Такой вызов работать не будет:
-
-```js
-//+ run no-beautify
-// при нажатии на body будут ошибки 
-// потому что при назначении в атрибут функция будет преобразована в строку
-document.body.setAttribute('onclick', function() { alert(1) });
-```
-
-</dd>
-<dt>Регистр DOM-свойства имеет значение.</dt>
-<dd>При назначении через DOM нужно использовать свойство `onclick`, а не `ONCLICK`.</dd>
- </dl>
-
-
-## Недостаток назначения через свойство
-
-Фундаментальный недостаток описанных выше способов назначения обработчика -- невозможность повесить *несколько* обработчиков на одно событие.
-
-Например, одна часть кода хочет при клике на кнопку делать ее подсвеченной, а другая -- выдавать сообщение. Нужно в разных местах два обработчика повесить.
-
-При этом новый обработчик будет затирать предыдущий. Например, следующий код на самом деле назначает один обработчик -- последний:
-
-```js
-//+ no-beautify
-input.onclick = function() { alert(1); }
-// ...
-input.onclick = function() { alert(2); } // заменит предыдущий обработчик
-```
-
-Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов, которые свободны от указанного недостатка.
-
-## addEventListener и removeEventListener 
-
-Методы `addEventListener` и `removeEventListener` являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков.
-
-Назначение обработчика осуществляется вызовом `addEventListener` с тремя аргументами:
-
-```js
-element.addEventListener(event, handler[, phase]);
-```
-
-<dl>
-<dt>`event`</dt>
-<dd>Имя события, например `click`</dd>
-<dt>`handler`</dt>
-<dd>Ссылка на функцию, которую надо поставить обработчиком.</dd>
-<dt>`phase`</dt>
-<dd>Необязательный аргумент, "фаза", на которой обработчик должен сработать. Этот аргумент редко нужен, мы его рассмотрим позже.</dd>
-</dl>
-
-Удаление обработчика осуществляется вызовом `removeEventListener`:
-
-```js
-// передать те же аргументы, что были у addEventListener
-element.removeEventListener(event, handler[, phase]);
-```
-
-[warn header="Удаление требует именно ту же функцию"]
-Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
-
-Вот так `removeEventListener` не сработает:
-
-```js
-//+ no-beautify
-elem.addEventListener( "click" , function() {alert('Спасибо!')});
-// .... 
-elem.removeEventListener( "click", function() {alert('Спасибо!')});
-```
-
-В `removeEventListener` передана не та же функция, а другая, с одинаковым кодом, но это не важно.
-
-Вот так правильно:
-
-```js
-function handler() {
-  alert( 'Спасибо!' );
-}
-
-input.addEventListener("click", handler);
-// .... 
-input.removeEventListener("click", handler);
-```
-
-Обратим внимание -- если функцию не сохранить где-либо, а просто передать в `addEventListener`, как в предыдущем коде, то потом получить её обратно, чтобы снять обработчик, будет невозможно. Нет метода, который позволяет считать обработчики событий, назначенные через `addEventListener`.
-[/warn]
-
-Метод `addEventListener` позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
-
-```html
-<!--+ run  no-beautify -->
-<input id="elem" type="button" value="Нажми меня"/>
-
-<script>
-  function handler1() {
-    alert('Спасибо!');
-  };
- 
-  function handler2() {
-    alert('Спасибо ещё раз!');
-  }
-
-*!*
-  elem.onclick = function() { alert("Привет"); };
-  elem.addEventListener("click", handler1); // Спасибо! 
-  elem.addEventListener("click", handler2); // Спасибо ещё раз!
-*/!*
-</script>
-```
-
-Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через `addEventListener`. Однако, во избежание путаницы, рекомендуется выбрать один способ.
-
-[warn header="`addEventListener` работает всегда, а DOM-свойство -- нет"]
-У специальных методов есть ещё одно перимущество перед DOM-свойствами.
-
-Есть некоторые события, которые нельзя назначить через DOM-свойство, но можно через `addEventListener`. 
-
-Например, таково событие `transitionend`, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через `addEventListener`.
-
-Вы можете проверить это, запустив код в примере ниже. Как правило, сработает лишь второй обработчик, но не первый.
-
-```html
-<!--+ run -->
-<style>
-  button {
-    transition: width 1s;
-    width: 100px;
-  }
-  
-  .wide {
-    width: 300px;
-  }
-</style>
-
-<button id="elem" onclick="this.classList.toggle('wide');">
-  Нажми меня
-</button>
-
-<script>
-  elem.ontransitionend = function() {
-    alert( "ontransitionend" ); // не сработает
-  };
-
-*!*
-  elem.addEventListener("transitionend", function() {
-    alert( "addEventListener" ); // сработает по окончании анимации
-  });
-*/!*
-</script>
-```
-
-[/warn]
-
-## Отличия IE8-
-
-При работе с событиями в IE8- есть много отличий. Как правило, они формальны -- некое свойство или метод называются по-другому. Начиная с версии 9, также работают и стандартные свойства и методы.
-
-**В IE8- вместо `addEventListener/removeEventListener` используются свои методы.**
-
-Назначение обработчика осуществляется вызовом `attachEvent`:
-
-```js
-element.attachEvent("on" + event, handler);
-```
-
-Удаление обработчика -- вызовом `detachEvent`:
-
-```js
-element.detachEvent("on" + event, handler);
-```
-
-Например:
-
-```js
-function handler() {
-  alert( 'Спасибо!' );
-}
-button.attachEvent("onclick", handler) // Назначение обработчика
-  // .... 
-button.detachEvent("onclick", handler) // Удаление обработчика
-```
-
-Как видите, почти то же самое, только событие должно включать префикс `on`.
-
-[warn header="У обработчиков, назначенных с `attachEvent`, нет `this`"]
-Обработчики, назначенные с `attachEvent` не получают `this`!
-
-Это важная особенность и подводный камень старых IE.
-[/warn]
-
-Чтобы ваш код работал в старом IE, нужно либо использовать DOM-свойства, то есть `onclick`, либо подключить полифилл для современных методов, например [такой](https://gist.github.com/jonathantneal/3748027) или с сервиса [polyfill.io](http://polyfill.webservices.ft.com/v1/docs/features/) или какой-то другой.
-
-
-## Итого
-
-Есть три способа назначения обработчиков событий:
-
-<ol>
-<li>Атрибут HTML: `onclick="..."`.</li>
-<li>Свойство: <code>elem.onclick = function</code>.</li>
-<li>Специальные методы:
-<ul>
-<li>Современные: `elem.addEventListener( событие, handler[, phase])`, удаление через `removeEventListener`.</li>
-<li>Для старых IE8-: `elem.attachEvent( on+событие, handler )`, удаление через `detachEvent`.</li>
-</ul>
-</li>
-</ol>
-
-Сравнение `addEventListener` и `onclick`:
-[compare]
-+Некоторые события можно назначить только через `addEventListener`.
-+Метод `addEventListener` позволяет назначить много обработчиков на одно событие.
--Обработчик, назначенный через `onclick`, проще удалить или заменить.
--Метод `onclick` кросс-браузерный.
-[/compare]
-
-Этим введением мы только открывает работу с событиями, но вы уже можете решать разнообразные задачи с их использованием.
-
-
-[head]
-<style type="text/css">
-.d0 { text-align:center;margin:auto; }
-.d1 p { margin: 0 }
-.d1 {
-margin:2em;
-background-color:green;
-width:13em;
-height:13em;
-text-align:center;
-}
-.d1 .number {
-  line-height: 2em;
-}
-.d2 {
-text-align:center;
-margin:auto;
-background-color:blue;
-width:9em;
-height:9em;
-}
-.d1 .d2 ,number {
-  line-height: 2em;
-}
-.d3 {
-text-align:center;
-margin:auto;
-background-color:red;
-width:5em;
-height:5em;
-}
-.d1 .d2 .d3 .number {
-  line-height: 5em;
-}
-.d1 .d2 .d2a {
-  color:white;
-  line-height: 2em;
-}
-</style>
-<script type="text/javascript">
-function highlightMe(elem) {
-    elem.style.backgroundColor='yellow'
-    alert(elem.className)
-    elem.style.backgroundColor = ''
-}
-
-function highlightMe2(e) {
-    highlightMe(e.currentTarget);
-}
-</script>
-[/head]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md b/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md
deleted file mode 100644
index abee7371..00000000
--- a/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md
+++ /dev/null
@@ -1,180 +0,0 @@
-# Порядок обработки событий
-
-События могут возникать не только по очереди, но и "пачкой" по много сразу. Возможно и такое, что во время обработки одного события возникают другие, например пока выполнялся код для `onclick` -- посетитель нажал кнопку на клавиатуре (событие `keydown`).
-
-Здесь мы разберём, как браузер обычно работает с одновременно возникающими событиями и какие есть исключения из общего правила. 
-
-[cut]
-## Главный поток
-
-В каждом окне выполняется только один *главный* поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM. 
-
-Он выполняет команды последовательно, может делать только одно дело одновременно и блокируется при выводе модальных окон, таких как `alert`. 
-
-
-[smart header="Дополнительные потоки тоже есть"]
-Есть и другие, служебные потоки, например, для сетевых коммуникаций. 
-
-Поэтому скачивание файлов может продолжаться пока главный поток ждёт реакции на `alert`. Но управлять служебными потоками мы не можем.
-[/smart]
-
-[smart header="Web Workers"]
-Существует спецификация <a href="http://www.w3.org/TR/workers/">Web Workers</a>, которая позволяет запускать дополнительные JavaScript-процессы(workers). 
-
-Они могут обмениваться сообщениями с главным процессом, но у них свои переменные, и работают они также сами по себе.
-
-Такие дополнительные процессы не имеют доступа к DOM, поэтому они полезны, преимущественно, при вычислениях, чтобы загрузить несколько ядер/процессоров одновременно.
-[/smart]
-
-## Очередь событий
-
-Произошло одновременно несколько событий или во время работы одного случилось другое -- как главному потоку обработать это?
-
-Если главный поток прямо сейчас занят, то он не может срочно выйти из середины одной функции и прыгнуть в другую. А потом третью. Отладка при этом могла бы превратиться в кошмар, потому что пришлось бы разбираться с совместным состоянием нескольких функций сразу. 
-
-Поэтому используется альтернативный подход.
-
-**Когда происходит событие, оно попадает в очередь.**
-
-Внутри браузера непрерывно работает "главный внутренний цикл", который следит за состоянием очереди и обрабатывает события, запускает соответствующие обработчики и т.п. 
-
-**Иногда события добавляются в очередь сразу пачкой.**
-
-Например, при клике на элементе генерируется несколько событий: 
-<ol>
-<li>Сначала `mousedown` -- нажата кнопка мыши.</li>
-<li>Затем `mouseup` -- кнопка мыши отпущена и, так как это было над одним элементом, то дополнительно генерируется `click` (два события сразу).</li>
-</ol>
-
-[online]
-В действии:
-
-```html
-<!--+ autorun height=150 no-beautify -->
-<textarea rows="8" cols="40" id="area">Кликни меня
-</textarea>
-
-<script>
-  area.onmousedown = function(e) { this.value += "mousedown\n"; this.scrollTop = this.scrollHeight; };
-  area.onmouseup = function(e) { this.value += "mouseup\n"; this.scrollTop = this.scrollHeight; };
-  area.onclick = function(e) { this.value += "click\n"; this.scrollTop = this.scrollHeight; };
-</script>
-```
-[/online]
-
-Таким образом, при нажатии кнопки мыши в очередь попадёт событие `mousedown`, а при отпускании -- сразу два события: `mouseup` и `click`. Браузер обработает их строго одно за другим: `mousedown` -> `mouseup` -> `click`.
-
-При этом каждое событие из очереди обрабатывается полностью отдельно от других.
-
-## Вложенные (синхронные) события   
-
-Обычно возникающие события "становятся в очередь".
-
-Но в тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас.
-
-Рассмотрим в качестве примера событие `onfocus`.
-
-### Пример: событие onfocus
-
-Когда посетитель фокусируется на элементе, возникает событие `onfocus`. Обычно оно происходит, когда посетитель кликает на поле ввода, например:
-
-```html
-<!--+ run height=80 autorun -->
-<p>При фокусе на поле оно изменит значение.</p>
-<input type="text" onfocus="this.value = 'Фокус!'" value="Кликни меня">
-```
-
-Но ту же фокусировку можно вызвать и явно, вызовом метода `elem.focus()`:
-
-```html
-<!--+ run -->
-<input type="text" id="elem" onfocus="this.value = 'Фокус!'">
-
-<script>
-*!*
-  // сфокусируется на input и вызовет обработчик onfocus
-  elem.focus();
-*/!*
-</script>
-```
-
-В главе [](/focus-blur) мы познакомимся с этим событием подробнее, а пока -- нажмите на кнопку в примере ниже. 
-
-При этом обработчик `onclick` вызовет метод `focus()` на текстовом поле `text`. Код обработчика `onfocus`, который при этом запустится, сработает синхронно, прямо сейчас, до завершения `onclick`.
-
-```html
-<!--+ autorun height=80 no-beautify -->
-<input type="button" id="button" value="Нажми меня">
-<input type="text" id="text" size="60">
-
-<script>
-
-  button.onclick = function() {
-    text.value += ' ->в onclick ';
-
-    text.focus(); // вызов инициирует событие onfocus
-   
-    text.value += ' из onclick-> ';
-  };
- 
-  text.onfocus = function() {
-    text.value += ' !focus! ';
-  };
-</script>
-```
-
-При клике на кнопке в примере выше будет видно, что управление вошло в `onclick`, затем перешло в `onfocus`, затем вышло из `onclick`. 
-
-[warn header="Исключение в IE"]
-Так ведут себя все браузеры, кроме IE.
-
-В нём событие `onfocus` -- всегда асинхронное, так что будет сначала полностью обработан клик, а потом -- фокус. В остальных -- фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу.
-[/warn]
-
-## Делаем события асинхронными через setTimeout(...,0)
-
-А что, если мы хотим, чтобы *сначала* закончилась обработка `onclick`, а потом уже произошла обработка `onfocus` и связанные с ней действия?
-
-Можно добиться и этого.
-
-Один вариант -- просто переместить строку `text.focus()` вниз кода обработчика `onclick`.
-
-Если это неудобно, можно запланировать `text.focus()` чуть позже через `setTimeout(..., 0)`, вот так
-
-```html
-<!--+ autorun height=80 -->
-<input type="button" id="button" value="Нажми меня">
-<input type="text" id="text" size="60">
-
-<script>
-  button.onclick = function() {
-    text.value += ' ->в onclick ';
-
-*!*
-    setTimeout(function() {
-      text.focus(); // сработает после onclick
-    }, 0);
-*/!*
-
-    text.value += ' из onclick-> ';
-  };
-
-  text.onfocus = function() {
-    text.value += ' !focus! ';
-  };
-</script>
-```
-
-Такой вызов обеспечит фокусировку через минимальный "тик" таймера, по стандарту равный 4мс. Обычно такая задержка не играет роли, а необходимую асинхронность мы получили.
-
-## Итого
-
-<ul>
-<li>JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы <a href="http://www.w3.org/TR/workers/">Web Workers</a>, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM.</li>
-<li>Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.</li>
-<li>Синхронными являются вложенные события,  инициированные из кода.</li>
-<li>Чтобы сделать событие гарантированно асинхронным, используется вызов через `setTimeout(func, 0)`.</li>
-</ul>
-
-Отложенный вызов через `setTimeout(func, 0)` используется не только в событиях, а вообще -- всегда, когда мы хотим, чтобы некая функция `func` сработала после того, как текущий скрипт завершится.
-
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md
deleted file mode 100644
index 30031d16..00000000
--- a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Мяч под курсор мыши
-
-Основная сложность первого этапа -- сдвинуть мяч под курсор, т.к. координаты клика `e.clientX/Y` -- относительно окна, а мяч позиционирован абсолютно внутри поля, его координаты `left/top` нужно ставить относительно левого-верхнего внутреннего (внутри рамки!) угла поля.
-
-Чтобы правильно вычислить координаты мяча, нужно получить координаты угла поля и вычесть их из `clientX/Y`:
-
-```js
-var field = document.getElementById('field');
-var ball = document.getElementById('ball');
-
-field.onclick = function(e) {
-
-*!*
-  var fieldCoords = field.getBoundingClientRect();
-  var fieldInnerCoords = {
-    top: fieldCoords.top + field.clientTop,
-    left: fieldCoords.left + field.clientLeft
-  };
-
-  ball.style.left = e.clientX - fieldInnerCoords.left + 'px';
-  ball.style.top = e.clientY - fieldInnerCoords.top + 'px';
-*/!*
-
-};
-```
-
-Далее мяч нужно сдвинуть на половину его ширины и высоты `ball.clientWidth/clientHeight`, чтобы он оказался центром под курсором. 
-
-Здесь есть важный "подводный камень" -- размеры мяча в исходном документе не прописаны. Там просто стоит `<img>`. Но на момент выполнения JavaScript картинка, возможно, ещё не загрузилась, так что высота и ширина мяча будут неизвестны (а они необходимы для центрирования).
-
-Нужно добавить `width/height` в тег `<img>` или задать размеры в CSS, тогда на момент выполнения JavaScript будет знать их и передвинет мяч правильно.
-
-Код, который полностью центрирует мяч, вы найдете в полном решении:
-
-[iframe border="1" src="solution" height="260" link edit]
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
deleted file mode 100755
index ac089d88..00000000
--- a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #field {
-      width: 200px;
-      height: 150px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    
-    #ball {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 40px;
-      height: 40px;
-      -webkit-transition: all 1s;
-      -moz-transition: all 1s;
-      -o-transition: all 1s;
-      -ms-transition: all 1s;
-      transition: all 1s;
-    }
-  </style>
-</head>
-
-<body style="height:2000px">
-
-  Кликните на любое место поля, чтобы мяч перелетел туда.
-  <br>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-  <script>
-    var field = document.getElementById('field');
-    var ball = document.getElementById('ball');
-
-
-    field.onclick = function(event) {
-
-      // координаты поля относительно окна
-      var fieldCoords = this.getBoundingClientRect();
-
-      // координаты левого-верхнего внутреннего угла поля
-      var fieldInnerCoords = {
-        top: fieldCoords.top + field.clientTop,
-        left: fieldCoords.left + field.clientLeft
-      };
-
-      // разместить по клику,
-      // но сдвинув относительно поля (т.к. position:relative) 
-      // и сдвинув на половину ширины/высоты
-      // (!) используются координаты относительно окна clientX/Y, как и в fieldCoords
-      var ballCoords = {
-        top: event.clientY - fieldInnerCoords.top - ball.clientHeight / 2,
-        left: event.clientX - fieldInnerCoords.left - ball.clientWidth / 2
-      };
-
-      // вылезает за верхнюю границу - разместить по ней
-      if (ballCoords.top < 0) ballCoords.top = 0;
-
-      // вылезает за левую границу - разместить по ней
-      if (ballCoords.left < 0) ballCoords.left = 0;
-
-
-      // вылезает за правую границу - разместить по ней
-      if (ballCoords.left + ball.clientWidth > field.clientWidth) {
-        ballCoords.left = field.clientWidth - ball.clientWidth;
-      }
-
-      // вылезает за нижнюю границу - разместить по ней
-      if (ballCoords.top + ball.clientHeight > field.clientHeight) {
-        ballCoords.top = field.clientHeight - ball.clientHeight;
-      }
-
-      ball.style.left = ballCoords.left + 'px';
-      ball.style.top = ballCoords.top + 'px';
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
deleted file mode 100755
index d1e6132a..00000000
--- a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #field {
-      width: 200px;
-      height: 150px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-      overflow: hidden;
-    }
-    
-    #ball {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-left: -20px;
-      margin-top: -20px;
-    }
-  </style>
-</head>
-
-<body style="height:2000px">
-
-  Кликните на любое место поля, чтобы мяч перелетел туда.
-  <br> Мяч никогда не вылетит за границы поля.
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md
deleted file mode 100644
index f746c96d..00000000
--- a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Передвигать мяч по полю
-
-[importance 5]
-
-Сделайте так, что при клике по полю мяч перемещался на место клика.
-
-[iframe src="solution" height="260" link]
-
-Требования:
-<ul>
-<li>Мяч после перелёта должен становиться центром ровно под курсор мыши, если это возможно без вылета за край поля.</li>
-<li>CSS-анимация не обязательна, но желательна.</li>
-<li>Мяч должен останавливаться у границ поля, ни в коем случае не вылетать за них.</li>
-<li>При прокрутке страницы с полем ничего не должно ломаться.</li>
-</ul>
-
-Замечания:
-<ul>
-<li>Код не должен зависеть от конкретных размеров мяча и поля.</li>
-<li>Вам пригодятся свойства `event.clientX/event.clientY`</li>
-</ul>
-
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md
deleted file mode 100644
index d54cdaf0..00000000
--- a/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md
+++ /dev/null
@@ -1,110 +0,0 @@
-# Объект события
-
-Чтобы хорошо обработать событие, недостаточно знать о том, что это -- "клик" или "нажатие клавиши". Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
-
-Детали произошедшего браузер записывает в "объект события", который передаётся первым аргументом в обработчик.
-[cut]
-
-## Свойства объекта события   
-
-Пример ниже демонстрирует использование объекта события:
-
-```html
-<!--+ run -->
-<input type="button" value="Нажми меня" id="elem">
-
-<script>
-  elem.onclick = function(*!*event*/!*) {
-    // вывести тип события, элемент и координаты клика
-    alert(event.type + " на " + event.currentTarget); 
-    alert(event.clientX + ":" + event.clientY); 
-  }
-</script>
-```
-
-Свойства объекта `event`:
-<dl>
-<dt>`event.type`</dt>
-<dd>Тип события, в данном случае `click`</dd>
-<dt>`event.currentTarget`</dt>
-<dd>Элемент, на котором сработал обработчик. Значение -- в точности такое же, как и у `this`, но бывают ситуации, когда обработчик является методом объекта и его `this` при помощи `bind` привязан к этому объекту, тогда мы можем использовать `event.currentTarget`.</dd>
-<dt>`event.clientX / event.clientY`</dt>
-<dd>Координаты курсора в момент клика (относительно окна)</dd>
-</dl>
-
-Есть также и ряд других свойств, в зависимости от событий, которые мы разберём в дальнейших главах, когда будем подробно знакомиться с событиями мыши, клавиатуры и так далее.
-
-[smart header="Объект события доступен и в HTML"]
-При назначении обработчика в HTML, тоже можно использовать переменную `event`, это будет работать кросс-браузерно:
-
-```html
-<!--+ autorun height=60 -->
-<input type="button" onclick="*!*alert(event.type)*/!*" value="Тип события">
-```
-
-Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: `function(event) { alert(event.type) }`. То есть, её первый аргумент называется `"event"`.
-[/smart]
-
-## Особенности IE8-
-
-IE8- вместо передачи параметра обработчику создаёт глобальный объект `window.event`. Обработчик может обратиться к нему.
-
-Работает это так:
-
-```js
-elem.onclick = function() {
-  // window.event - объект события
-  alert( window.event.clientX );
-};
-```
-
-### Кроссбраузерное решение   
-
-Универсальное решение для получения объекта события:
-
-```js
-element.onclick = function(event) {
-  event = event || window.event; // (*)
-
-  // Теперь event - объект события во всех браузерах.
-};
-```
-
-Строка `(*)`, в случае, если функция не получила `event` (IE8-), использует `window.event`.-событие `event`.
-
-Можно написать и иначе, если мы сами не используем переменную `event` в замыкании:
-
-```js
-element.onclick = function(e) {
-  e = e || event;
-
-  // Теперь e - объект события во всех браузерах.
-};
-```
-
-## Итого
-
-<ul>
-<li>Объект события содержит ценную информацию о деталях события.</li>
-<li>Он передается первым аргументом `event` в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная `window.event`.</li>
-</ul>
-
-Кросс-браузерно для JavaScript-обработчика получаем объект события так:
-
-```js
-element.onclick = function(event) {
-  event = event || window.event;
-
-  // Теперь event - объект события во всех браузерах.
-};
-```
-
-Еще вариант:
-
-```js
-element.onclick = function(e) {
-  e = e || event; // если нет другой внешней переменной event
-  ...
-};
-```
-
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
deleted file mode 100644
index c5c7b147..00000000
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
+++ /dev/null
@@ -1,261 +0,0 @@
-# Всплытие и перехват
-
-Давайте сразу начнём с примера. 
-
-Этот обработчик для `<div>` сработает, если вы кликните по вложенному тегу `<em>` или `<code>`:
-
-```html
-<!--+ autorun height=60 -->
-<div onclick="alert('Обработчик для Div сработал!')">
-  <em>Кликните на <code>EM</code>, сработает обработчик на <code>DIV</code></em>
-</div>
-```
-
-Вам не кажется это странным? Почему же сработал обработчик на `<div>`, если клик произошёл на `<em>`?
-
-## Всплытие
-
-Основной принцип всплытия:
-
-**При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.**
-
-Например, есть 3 вложенных элемента `FORM > DIV > P`, с обработчиком на каждом:
-
-```html
-<!--+ run autorun -->
-<style>
-  body * {
-    margin: 10px;
-    border: 1px solid blue;
-  }
-</style>
-
-<form onclick="alert('form')">FORM
-  <div onclick="alert('div')">DIV
-    <p onclick="alert('p')">P</p>
-  </div>
-</form>
-```
-
-Всплытие гарантирует, что клик по внутреннему `<p>` вызовет обработчик `onclick` (если есть) сначала на самом `<p>`, затем на элементе `<div>` далее на элементе `<form>`, и так далее вверх по цепочке родителей до самого `document`.
-
-<img src="event-order-bubbling.png" alt="Порядок всплытия событий">
-
-Поэтому если в примере выше кликнуть на `P`, то последовательно выведутся `alert`: `p` -> `div` -> `form`.
-
-Этот процесс называется *всплытием*, потому что события "всплывают" от внутреннего элемента вверх через родителей, подобно тому, как всплывает пузырек воздуха в воде.
-
-[warn header="Всплывают *почти* все события."]
-Ключевое слово в этой фразе -- "почти". 
-
-Например, событие `focus` не всплывает. В дальнейших главах мы будем детально знакомиться с различными событиями и увидим ещё примеры.
-[/warn]
-
-## Целевой элемент event.target   
-
-На каком бы элементе мы ни поймали событие, всегда можно узнать, где конкретно оно произошло.
-
-**Самый глубокий элемент, который вызывает событие, называется *"целевым"* или *"исходным"* элементом и доступен как `event.target`.**
-
-Отличия от `this` (=`event.currentTarget`):
-<ul>
-<li>`event.target` -- это **исходный элемент**, на котором произошло событие, в процессе всплытия он неизменен.</li>
-<li>`this` -- это **текущий элемент**, до которого дошло всплытие, на нём сейчас выполняется обработчик.</li>
-</ul>
-
-Например, если стоит только один обработчик `form.onclick`, то он "поймает" все клики внутри формы. Где бы ни был клик внутри -- он всплывёт до элемента `<form>`, на котором сработает обработчик.
-
-При этом:
-
-<ul>
-<li>`this` (`=event.currentTarget`) всегда будет сама форма, так как обработчик сработал на ней.</li>
-<li>`event.target` будет содержать ссылку на конкретный элемент внутри формы, самый вложенный, на котором произошёл клик.</li>
-</ul>
-
-[codetabs height=220 src="bubble-target"]
-
-Возможна и ситуация, когда `event.target` и `this` -- один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе `<form>`.
-
-## Прекращение всплытия   
-
-Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document`, а иногда даже до `window`, вызывая все обработчики на своем пути.
-
-**Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.**
-
-Для остановки всплытия нужно вызвать метод `event.stopPropagation()`.
-
-Например, здесь при клике на кнопку обработчик `body.onclick` не сработает:
-
-```html
-<!--+ run autorun height=60 -->
-<body onclick="alert('сюда обработка не дойдёт')">
-  <button onclick="event.stopPropagation()">Кликни меня</button>
-</body>
-```
-
-[smart header="event.stopImmediatePropagation()"] 
-Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены. 
-
-То есть, `stopPropagation` препятствует продвижению события дальше, но на текущем элементе все обработчики отработают.
-
-Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод `event.stopImmediatePropagation()`. Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.
-[/smart]
-
-[warn header="Не прекращайте всплытие без необходимости!"]
-Всплытие -- это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной. 
-
-Зачастую прекращение всплытия создаёт свои подводные камни, которые потом приходится обходить. 
-
-Например:
-<ol>
-<li>Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для них `stopPropagation`. Вроде бы, всё работает.</li>
-<li>Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики -- где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.</li>
-<li>Над областью, где клики убиваются `stopPropagation`, статистика работать не будет! Получилась "мёртвая зона".</li>
-</ol>
-
-Проблема в том, что `stopPropagation` убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь "эдакого", что к меню отношения совсем не имеет.
-[/warn]
-
-## Погружение
-
-В современном стандарте, кроме "всплытия" событий, предусмотрено ещё и "погружение".
-
-Оно гораздо менее востребовано, но иногда, очень редко, знание о нём может быть полезным.
-
-Строго говоря, стандарт выделяет целых три стадии прохода события:
-
-<ol>
-<li>Событие сначала идет сверху вниз. Эта стадия называется *"стадия перехвата"* (capturing stage).</li>
-<li>Событие достигло целевого элемента. Это -- *"стадия цели"* (target stage).</li>
-<li>После этого событие начинает всплывать. Это -- *"стадия всплытия"* (bubbling stage).</li>
-</ol>
-
-В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так:
-
-<img src="eventflow.png">
-
-То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики.
-
-**Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.**
-
-Обработчики, добавленные через `on...`-свойство, ничего не знают о стадии перехвата, а начинают работать со всплытия.
-
-Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:
-
-<ul>
-<li>Если аргумент `true`, то событие будет перехвачено по дороге вниз.</li>
-<li>Если аргумент `false`, то событие будет поймано при всплытии.</li>
-</ul>
-
-Стадия цели, обозначенная на рисунке цифрой `(2)`, особо не обрабатывается, так как обработчики, назначаемые обоими этими способами, срабатывают также на целевом элементе.
-
-[smart header="Есть события, которые не всплывают, но которые можно перехватить"]
-Бывают события, которые можно поймать только на стадии перехвата, а на стадии всплытия -- нельзя.. 
-
-Например, таково событие фокусировки на элементе [onfocus](/focus-blur). Конечно, это большая редкость, такое исключение существует по историческим причинам.
-[/smart]
-
-## Примеры
-
-В примере ниже на `<form>`, `<div>`, `<p>` стоят те же обработчики, что и раньше, но на этот раз -- на стадии погружения. Чтобы увидеть перехват в действии, кликните в нём на элементе `<p>`:
-
-[codetabs height=220 src="capture"]
-
-Обработчики сработают в порядке "сверху-вниз": `FORM` -> `DIV` -> `P`.
-
-JS-код здесь такой:
-
-```js
-var elems = document.querySelectorAll('form,div,p');
-
-// на каждый элемент повесить обработчик на стадии перехвата
-for (var i = 0; i < elems.length; i++) {
-  elems[i].addEventListener("click", highlightThis, true);
-}
-```
-
-Никто не мешает назначить обработчики для обеих стадий, вот так:
-
-```js
-var elems = document.querySelectorAll('form,div,p');
-
-for (var i = 0; i < elems.length; i++) {
-  elems[i].addEventListener("click", highlightThis, true);
-  elems[i].addEventListener("click", highlightThis, false);
-}
-```
-
-Кликните по внутреннему элементу `<p>`, чтобы увидеть порядок прохода события:
-
-[codetabs height=220 src="both"]
-
-Должно быть `FORM` -> `DIV` -> `P` -> `P` -> `DIV` -> `FORM`. Заметим, что элемент `<p>` участвует в обоих стадиях.
-
-Как видно из примера, один и тот же обработчик можно назначить на разные стадии. При этом номер текущей стадии он, при необходимости, может получить из свойства `event.eventPhase` (=1, если погружение, =3, если всплытие).
-
-
-## Отличия IE8-
-
-Чтобы было проще ориентироваться, я собрал отличия IE8-, которые имеют отношение ко всплытию, в одну секцию. 
- 
-Их знание понадобится, если вы решите писать на чистом JS, без фреймворков и вам понадобится поддержка IE8-.
-
-<dl>
-<dt>Нет свойства `event.currentTarget`</dt>
-<dd>Обратим внимание, что при назначении обработчика через `onсвойство` у нас есть `this`, поэтому `event.currentTarget`, как правило, не нужно, а вот при назначении через `attachEvent` обработчик не получает `this`, так что текущий элемент, если нужен, можно будет взять лишь из замыкания.</dd>
-<dt>Вместо `event.target` в IE8- используется `event.srcElement`</dt>
-<dd>Если мы пишем обработчик, который будет поддерживать и IE8- и современные браузеры, то можно начать его так:
-
-```js
-elem.onclick = function(event) {
-  event = event || window.event;
-  var target = event.target || event.srcElement;
-
-  // ... теперь у нас есть объект события и target
-  ...
-}
-```
-
-</dd>
-<dt>Для остановки всплытия используется код `event.cancelBubble=true`.</dt>
-<dd>Кросс-браузерно остановить всплытие можно так:
-
-```js
-//+ no-beautify
-event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
-```
-
-</dd>
-</dl>
-
-Далее в учебнике мы будем использовать стандартные свойства и вызовы, поскольку добавление этих строк, обеспечивающих совместимость -- достаточно простая и очевидная задача. Кроме того, никто не мешает подключить полифилл.
-
-Ещё раз хотелось бы заметить -- эти отличия нужно знать при написании JS-кода с поддержкой IE8- без фреймворков. Почти все JS-фреймворки обеспечивают кросс-браузерную поддержку `target`, `currentTarget` и `stopPropagation()`.
-
-## Итого
-
-Алгоритм:
-<ul>
-<li>При наступлении события -- элемент, на котором оно произошло, помечается как "целевой" (`event.target`).</li>
-<li>Далее событие сначала двигается вниз от корня документа к `event.target`, по пути вызывая обработчики, поставленные через `addEventListener(...., true)`.</li>
-<li>Далее событие двигается от `event.target` вверх к корню документа, по пути вызывая обработчики, поставленные через `on*` и `addEventListener(...., false)`.</li>
-</ul>
-
-Каждый обработчик имеет доступ к свойствам события:
-<ul>
-<li>`event.target` -- самый глубокий элемент, на котором прозошло событие.</li>
-<li>`event.currentTarget` (=`this`) -- элемент, на котором в данный момент сработал обработчик (до которого "доплыло" событие).</li>
-<li>`event.eventPhase` -- на какой фазе он сработал (погружение =1, всплытие = 3).</li>
-</ul>
-
-Любой обработчик может остановить событие вызовом `event.stopPropagation()`, но делать это не рекомендуется, так как в дальнейшем это событие может понадобиться, иногда для самых неожиданных вещей.
-
-В современной разработке стадия погружения используется очень редко. 
-
-Этому есть две причины:
-<ol>
-<li>Историческая -- так как IE лишь с версии 9 в полной мере поддерживает современный стандарт.</li>
-<li>Разумная -- когда происходит событие, то разумно дать возможность первому сработать обработчику на самом элементе, поскольку он наиболее конкретен. Код, который поставил обработчик именно на этот элемент, знает максимум деталей о том, что это за элемент, чем он занимается.
-
-Далее имеет смысл передать обработку события родителю -- он тоже понимает, что происходит, но уже менее детально, далее -- выше, и так далее, до самого объекта `document`, обработчик на котором реализовывает самую общую функциональность уровня документа.</li>
-</ol>
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
deleted file mode 100755
index 260ce841..00000000
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
+++ /dev/null
@@ -1,12 +0,0 @@
-var elems = document.querySelectorAll('form,div,p');
-
-for (var i = 0; i < elems.length; i++) {
-  elems[i].addEventListener("click", highlightThis, true);
-  elems[i].addEventListener("click", highlightThis, false);
-}
-
-function highlightThis() {
-  this.style.backgroundColor = 'yellow';
-  alert(this.tagName);
-  this.style.backgroundColor = '';
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
deleted file mode 100755
index 61aabfa6..00000000
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="example.css">
-</head>
-
-<body>
-  Клик выведет <code>event.target</code> и <code>this</code>:
-
-  <form id="form">FORM
-    <div>DIV
-      <p>P</p>
-    </div>
-  </form>
-
-  <script src="script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js
deleted file mode 100755
index ea78d357..00000000
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var form = document.querySelector('form');
-
-form.onclick = function(event) {
-  event.target.style.backgroundColor = 'yellow';
-
-  alert("target = " + event.target.tagName + ", this=" + this.tagName);
-
-  event.target.style.backgroundColor = '';
-};
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js
deleted file mode 100755
index 1b385858..00000000
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var elems = document.querySelectorAll('form,div,p');
-
-for (var i = 0; i < elems.length; i++) {
-  elems[i].addEventListener("click", highlightThis, true);
-}
-
-function highlightThis() {
-  this.style.backgroundColor = 'yellow';
-  alert(this.tagName);
-  this.style.backgroundColor = '';
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png
deleted file mode 100644
index cdf5835e..00000000
Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling@2x.png b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling@2x.png
deleted file mode 100644
index 668abfdb..00000000
Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png
deleted file mode 100644
index e9527ccb..00000000
Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow@2x.png b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow@2x.png
deleted file mode 100644
index 71b918b6..00000000
Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md
deleted file mode 100644
index 226224eb..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`.
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
deleted file mode 100755
index e5b2fd28..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="stylesheet" href="messages.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div id="messages-container">
-    <div class="pane">
-      <h3>Лошадь</h3>
-      <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
-      <button class="remove-button">[x]</button>
-    </div>
-    <div class="pane">
-      <h3>Осёл</h3>
-      <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
-      <button class="remove-button">[x]</button>
-    </div>
-    <div class="pane">
-      <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
-      <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
-        тёлками.
-      </p>
-      <button class="remove-button">[x]</button>
-    </div>
-  </div>
-
-
-
-  <script>
-    var container = document.getElementById('messages-container');
-
-    container.onclick = function(event) {
-      if (!event.target.classList.contains('remove-button')) return;
-
-      event.target.parentNode.hidden = !event.target.parentNode.hidden;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
deleted file mode 100755
index c50a409a..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="stylesheet" type="text/css" href="messages.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Кнопка для удаления:
-  <button class="remove-button">[x]</button>
-
-  <div>
-    <div class="pane">
-      <h3>Лошадь</h3>
-      <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
-    </div>
-    <div class="pane">
-      <h3>Осёл</h3>
-      <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
-    </div>
-    <div class="pane">
-      <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
-      <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
-        тёлками.
-      </p>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css
deleted file mode 100755
index 6588f729..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css
+++ /dev/null
@@ -1,32 +0,0 @@
-body {
-  margin: 10px auto;
-  width: 470px;
-}
-
-h3 {
-  margin: 0;
-  padding-bottom: .3em;
-  font-size: 1.1em;
-}
-
-p {
-  margin: 0;
-  padding: 0 0 .5em;
-}
-
-.pane {
-  background: #edf5e1;
-  padding: 10px 20px 10px;
-  border-top: solid 2px #c4df9b;
-}
-
-.remove-button {
-  font-size: 110%;
-  color: darkred;
-  right: 10px;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md
deleted file mode 100644
index db194e0d..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Скрытие сообщения с помощью делегирования
-
-[importance 5]
-
-Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления.
-
-**Используйте делегирование событий. Один обработчик для всего.**
-
-В результате, должно работать вот так(кликните на крестик):
-[iframe src="solution" height=420]
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md
deleted file mode 100644
index 2dd5aae6..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Схема решения
-
-Дерево устроено как вложенный список.
-
-Клики на все элементы можно поймать, повесив единый обработчик `onclick` на внешний `UL`. 
-
-Как поймать клик на заголовке? Элемент `LI` является блочным, поэтому нельзя понять, был ли клик на *тексте*, или справа от него.
-
-Например, ниже -- участок дерева с выделенными рамкой узлами. Кликните справа от любого заголовка. Видите, клик ловится? А лучше бы такие клики (не на тексте) игнорировать.
-
-```html
-<!--+ autorun height=190 untrusted -->
-<style>
-  li {
-    border: 1px solid green;
-  }
-</style>
-
-<ul onclick="alert(event.target)">
-  <li>Млекопетающие
-    <ul>
-      <li>Коровы</li>
-      <li>Ослы</li>
-      <li>Собаки</li>
-      <li>Тигры</li>
-    </ul>
-  </li>
-</ul>
-```
-
-В примере выше видно, что проблема в верстке, в том что `LI` занимает всю ширину. Можно кликнуть справа от текста, это все еще `LI`.
-
-Один из способов это поправить -- обернуть заголовки в дополнительный элемент `SPAN`, и обрабатывать только клики внутри `SPAN'ов`, получать по `SPAN'у` его родителя `LI` и ставить ему класс открыт/закрыт.
-
-Напишите для этого JavaScript-код.
-
-# Оборачиваем заголовки в SPAN
-
-Следующий код ищет все `LI` и оборачивает текстовые узлы в `SPAN`.
-
-```js
-var treeUl = document.getElementsByTagName('ul')[0];
-
-var treeLis = treeUl.getElementsByTagName('li');
-
-for (var i = 0; i < treeLis.length; i++) {
-  var li = treeLis[i];
-
-  var span = document.createElement('span');
-  li.insertBefore(span, li.firstChild); // добавить пустой SPAN
-  span.appendChild(span.nextSibling); // переместить в него заголовок
-}
-```
-
-Теперь можно отслеживать клики *на заголовках*.
-
-Так выглядит дерево с обёрнутыми в `SPAN` заголовками и делегированием:
-
-```html
-<!--+ autorun height=190 untrusted -->
-<style>
-  span {
-    border: 1px solid red;
-  }
-</style>
-
-<ul onclick="alert(event.target.tagName)">
-  <li><span>Млекопетающие</span>
-    <ul>
-      <li><span>Коровы</span></li>
-      <li><span>Ослы</span></li>
-      <li><span>Собаки</span></li>
-      <li><span>Тигры</span></li>
-    </ul>
-  </li>
-</ul>
-```
-
-Так как `SPAN` -- инлайновый элемент, он всегда такого же размера как текст. Да здравствует `SPAN`!
-
-В реальной жизни дерево, скорее всего, будет сразу со `SPAN`: если HTML-код дерева генерируется на сервере, то это несложно, если дерево генерируется в JavaScript -- тем более просто.
-
-# Итоговое решение
-
-Для делегирования нужно по клику понять, на каком узле он произошел.
-
-В нашем случае у `SPAN` нет детей-элементов, поэтому не нужно подниматься вверх по цепочке родителей. Достаточно просто проверить `event.target.tagName == 'SPAN'`, чтобы понять, где был клик, и спрятать потомков.
-
-```js
-var tree = document.getElementsByTagName('ul')[0];
-
-tree.onclick = function(event) {
-  var target = event.target;
-
-  if (target.tagName != 'SPAN') {
-    return; // клик был не на заголовке
-  }
-
-  var li = target.parentNode; // получить родительский LI
-
-  // получить UL с потомками -- это первый UL внутри LI
-  var childrenContainer = li.getElementsByTagName('ul')[0];
-
-  if (!childrenContainer) return; // потомков нет -- ничего не надо делать
-
-  // спрятать/показать (можно и через CSS-класс)
-  childrenContainer.hidden = !childrenContainer.hidden;
-}
-```
-
-Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
deleted file mode 100755
index 98d6c644..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    .tree span:hover {
-      font-weight: bold;
-    }
-    
-    .tree span {
-      cursor: pointer;
-    }
-  </style>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul class="tree">
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var tree = document.getElementsByTagName('ul')[0];
-
-    var treeLis = tree.getElementsByTagName('li');
-
-    /* wrap all textNodes into spans */
-    for (var i = 0; i < treeLis.length; i++) {
-      var li = treeLis[i];
-
-      var span = document.createElement('span');
-      li.insertBefore(span, li.firstChild);
-      span.appendChild(span.nextSibling);
-    }
-
-    /* catch clicks on whole tree */
-    tree.onclick = function(event) {
-      var target = event.target;
-
-      if (target.tagName != 'SPAN') {
-        return;
-      }
-
-      /* now we know the SPAN is clicked */
-      var childrenContainer = target.parentNode.getElementsByTagName('ul')[0];
-      if (!childrenContainer) return; // no children
-
-      childrenContainer.hidden = !childrenContainer.hidden;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
deleted file mode 100755
index 82042a9b..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul class="tree">
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md
deleted file mode 100644
index 6ca1a392..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Раскрывающееся дерево
-
-[importance 5]
-
-Создайте дерево, которое по клику на заголовок скрывает-показывает детей: 
-
-[iframe border=1 src="solution"]
-
-
-Требования:
-<ul>
-<li>Использовать делегирование.</li>
-<li>Клик вне текста заголовка (на пустом месте) ничего делать не должен.</li>
-<li>При наведении на заголовок -- он становится жирным, реализовать через CSS.</li>
-</ul>
-
-P.S. При необходимости HTML/CSS дерева можно изменить.
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md
deleted file mode 100644
index 3d4c08c6..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Подсказка (обработчик)
-
-<ol>
-<li>Обработчик `onclick` можно повесить один, на всю таблицу или `THEAD`. Он будет игнорировать клики не на `TH`.</li>
-<li>При клике на `TH` обработчик будет получать номер из `TH`, на котором кликнули (`TH.cellIndex`) и вызывать функцию `sortColumn`, передавая ей номер колонки и тип.</li>
-<li>Функция `sortColumn(colNum, type)` будет сортировать.</li>
-</ol>
-
-# Подсказка (сортировка)
-
-Функция сортировки:
-
-<ol>
-<li>Переносит все `TR` из `TBODY` в массив `rowsArr`</li>
-<li>Сортирует массив, используя `rowsArr.sort(compare)`, функция `compare` зависит от типа столбца.</li>
-<li>Добавляет `TR` из массива обратно в `TBODY`</li>
-</ol>
-
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
deleted file mode 100755
index aea9ccf1..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    th {
-      cursor: pointer;
-    }
-    
-    th:hover {
-      background: yellow;
-    }
-  </style>
-</head>
-
-<body>
-
-  <table id="grid">
-    <thead>
-      <tr>
-        <th data-type="number">Возраст</th>
-        <th data-type="string">Имя</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>5</td>
-        <td>Вася</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Петя</td>
-      </tr>
-      <tr>
-        <td>12</td>
-        <td>Женя</td>
-      </tr>
-      <tr>
-        <td>9</td>
-        <td>Маша</td>
-      </tr>
-      <tr>
-        <td>1</td>
-        <td>Илья</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <script>
-    // сортировка таблицы
-    // использовать делегирование!
-    // должно быть масштабируемо:
-    // код работает без изменений при добавлении новых столбцов и строк
-
-    var grid = document.getElementById('grid');
-
-    grid.onclick = function(e) {
-      if (e.target.tagName != 'TH') return;
-
-      // Если TH -- сортируем
-      sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
-    };
-
-    function sortGrid(colNum, type) {
-      var tbody = grid.getElementsByTagName('tbody')[0];
-
-      // Составить массив из TR
-      var rowsArray = [].slice.call(tbody.rows);
-
-      // определить функцию сравнения, в зависимости от типа
-      var compare;
-
-      switch (type) {
-        case 'number':
-          compare = function(rowA, rowB) {
-            return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
-          };
-          break;
-        case 'string':
-          compare = function(rowA, rowB) {
-            return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
-          };
-          break;
-      }
-
-      // сортировать
-      rowsArray.sort(compare);
-
-      // Убрать tbody из большого DOM документа для лучшей производительности
-      grid.removeChild(tbody);
-
-      // добавить результат в нужном порядке в TBODY
-      // они автоматически будут убраны со старых мест и вставлены в правильном порядке
-      for (var i = 0; i < rowsArray.length; i++) {
-        tbody.appendChild(rowsArray[i]);
-      }
-
-      grid.appendChild(tbody);
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
deleted file mode 100755
index f71b83c4..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    th {
-      cursor: pointer;
-    }
-    
-    th:hover {
-      background: yellow;
-    }
-  </style>
-</head>
-
-<body>
-
-  <table id="grid">
-    <thead>
-      <tr>
-        <th data-type="number">Возраст</th>
-        <th data-type="string">Имя</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>5</td>
-        <td>Вася</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Петя</td>
-      </tr>
-      <tr>
-        <td>12</td>
-        <td>Женя</td>
-      </tr>
-      <tr>
-        <td>9</td>
-        <td>Маша</td>
-      </tr>
-      <tr>
-        <td>1</td>
-        <td>Илья</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <script>
-    /* ваш код */
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md
deleted file mode 100644
index e07508fd..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Сортировка таблицы
-
-[importance 4]
-
-Сделать сортировку таблицы при клике на заголовок.
-
-Демо:
-[iframe border=1 src="solution" height=180]
-
-Требования:
-<ul>
-<li>Использовать делегирование.</li>
-<li>Код не должен меняться при увеличении количества столбцов или строк.</li>
-</ul>
-
-
-
-P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать.
-
-P.P.S. Вам помогут дополнительные [навигационные ссылки по таблицам](#dom-navigation-tables).
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/article.md b/2-ui/2-events-and-interfaces/5-event-delegation/article.md
deleted file mode 100644
index c35bd8b5..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/article.md
+++ /dev/null
@@ -1,239 +0,0 @@
-# Делегирование событий
-
-Всплытие событий позволяет реализовать один из самых важных приёмов разработки -- *делегирование*.
-
-Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому -- мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент `event.target`, понять на каком именно потомке произошло событие и обработать его.
-
-## Пример "Ба Гуа" 
-
-Рассмотрим пример -- <a href="http://en.wikipedia.org/wiki/Ba_gua">диаграмму "Ба Гуа"</a>. Это таблица, отражающая древнюю китайскую философию.
-
-Вот она:
-[iframe height=350 src="bagua" edit link]
-
-Её HTML (схематично):
-
-```html
-<table>
-  <tr>
-    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
-  </tr>
-  <tr>
-    <td>...<strong>Northwest</strong>...</td>
-    <td>...</td>
-    <td>...</td>
-  </tr>
-  <tr>...еще 2 строки такого же вида...</tr>
-  <tr>...еще 2 строки такого же вида...</tr>
-</table>
-```
-
-В этой таблице всего 9 ячеек, но могло быть и 99, и даже 9999, не важно.
-
-**Наша задача -- реализовать подсветку ячейки `<td>` при клике.**
-
-Вместо того, чтобы назначать обработчик для каждой ячейки, которых может быть очень много -- мы повесим *единый обработчик* на элемент `<table>`. 
-
-Он будет использовать `event.target`, чтобы получить элемент, на котором произошло событие, и подсветить его.
-
-Код будет таким:
-
-```js
-var selectedTd;
-
-*!*
-table.onclick = function(event) { 
-  var target = event.target; // где был клик?
-
-  if (target.tagName != 'TD') return; // не на TD? тогда не интересует
-
-  highlight(target); // подсветить TD
-};
-*/!*
-
-function highlight(node) {
-  if (selectedTd) {
-    selectedTd.classList.remove('highlight');
-  }
-  selectedTd = node;
-  selectedTd.classList.add('highlight');
-}
-```
-
-Такому коду нет разницы, сколько ячеек в таблице. Обработчик всё равно один. Я могу добавлять, удалять `<td>` из таблицы, менять их количество -- моя подсветка будет стабильно работать, так как обработчик стоит на `<table>`.
-
-Однако, у текущей версии кода есть недостаток.
-
-**Клик может быть не на том теге, который нас интересует, а внутри него.**
-
-В нашем случае, если взглянуть на HTML таблицы внимательно, видно, что ячейка содержит вложенные теги, например `<strong>`:
-
-```html
-<td>
-*!*
-  <strong>Northwest</strong>
-*/!*
-  ...Metal..Silver..Elders...
-</td>
-```
-
-Естественно, клик может произойти внутри `<td>`, на элементе `<strong>`. Такой клик будет пойман единым обработчиком, но `target` у него будет не `<td>`, а `<strong>`:
-
-<img src="bagua-bubble.png">
-
-Внутри обработчика `table.onclick` мы должны по `event.target` разобраться, в каком именно `<td>` был клик.
-
-Для этого мы, используя ссылку `parentNode`, будем идти вверх по иерархии родителей от `event.target` и выше и проверять:
-<ul>
-<li>Если нашли `<td>`, значит это то что нужно.</li>
-<li>Если дошли до элемента `table` и при этом `<td>` не найден, то наверное клик был вне `<td>`, например на элементе заголовка таблицы.</li>
-</ul>
-  
-Улучшенный обработчик `table.onclick` с циклом `while`,  который этот делает:
-
-```js
-table.onclick = function(event) {
-  var target = event.target;
-
-  // цикл двигается вверх от target к родителям до table
-  while (target != table) {
-    if (target.tagName == 'TD') {
-      // нашли элемент, который нас интересует!
-      highlight(target);
-      return;
-    }
-    target = target.parentNode;
-  }
-
-  // возможна ситуация, когда клик был вне <td>
-  // если цикл дошёл до table и ничего не нашёл, 
-  // то обработчик просто заканчивает работу
-}
-```
-
-[smart]
-Кстати, в проверке `while` можно бы было использовать `this` вместо `table`:
-
-```js
-while (target != this) {
-  // ...
-}
-```
-
-Это тоже будет работать, так как в обработчике `table.onclick` значением `this` является текущий элемент, то есть `table`.
-[/smart]
-
-Можно для этого использовать и метод `closest`, при поддержке браузером:
-
-```js
-table.onclick = function(event) {
-  var target = event.target;
-
-  var td = target.closest('td');
-  if (!td) return; // клик вне <td>, не интересует
-
-  // если клик на td, но вне этой таблицы (возможно при вложенных таблицах)
-  // то не интересует
-  if (!table.contains(td)) return;
-
-  // нашли элемент, который нас интересует!
-  highlight(td);
-}
-```
-
-
-
-## Применение делегирования: действия в разметке  
-
-Обычно делегирование -- это средство оптимизации интерфейса. Мы используем один обработчик для *схожих* действий на однотипных элементах.
-
-Выше мы это делали для обработки кликов на `<td>`.
-
-**Но делегирование позволяет использовать обработчик и для абсолютно разных действий.** 
-
-Например, нам нужно сделать меню с разными кнопками: "Сохранить", "Загрузить", "Поиск" и т.д. И есть объект с соответствующими методами: `save`, `load`, `search` и т.п...
-
-Первое, что может прийти в голову -- это найти каждую кнопку и назначить ей свой обработчик среди методов объекта.
-
-Но более изящно решить задачу можно путем добавления одного обработчика на всё меню, а для каждой кнопки в специальном атрибуте, который мы назовем `data-action` (можно придумать любое название, но `data-*` является валидным в HTML5), укажем, что она должна вызывать:
-
-```html
-<button *!*data-action="save"*/!*>Нажмите, чтобы Сохранить</button>
-```
-
-Обработчик считывает содержимое атрибута и выполняет метод. Взгляните на рабочий пример:
-
-```html
-<!--+ autorun height=60 -->
-<div id="menu">
-  <button data-action="save">Сохранить</button>
-  <button data-action="load">Загрузить</button>
-  <button data-action="search">Поиск</button>
-</div>
-
-<script>
-  function Menu(elem) {
-    this.save = function() {
-      alert( 'сохраняю' );
-    };
-    this.load = function() {
-      alert( 'загружаю' );
-    };
-    this.search = function() {
-      alert( 'ищу' );
-    };
-
-    var self = this;
-
-    elem.onclick = function(e) {
-      var target = e.target;
-*!*
-      var action = target.getAttribute('data-action');
-      if (action) {
-        self[action]();
-      }
-*/!*
-    };
-  }
-
-  new Menu(menu);
-</script>
-```
-
-Обратите внимание, как используется трюк с `var self = this`, чтобы сохранить ссылку на объект `Menu`. Иначе обработчик просто бы не смог вызвать методы `Menu`, потому что его собственный `this` ссылается на элемент.
-
-Что в этом случае нам дает использование делегирования событий?
-[compare]
-+Не нужно писать код, чтобы присвоить обработчик каждой кнопке. Меньше кода, меньше времени, потраченного на инициализацию.
-+Структура HTML становится по-настоящему гибкой. Мы можем добавлять/удалять кнопки в любое время.
-+Данный подход является семантичным. Также можно использовать классы `.action-save`, `.action-load` вместо атрибута `data-action`.
-[/compare]
-
-
-## Итого
-
-Делегирование событий -- это здорово! Пожалуй, это один из самых полезных приёмов для работы с DOM. Он отлично подходит, если есть много элементов, обработка которых очень схожа.
-
-Алгоритм:
-<ol>
-<li>Вешаем обработчик на контейнер.</li>
-<li>В обработчике: получаем `event.target`.</li>
-<li>В обработчике: если `event.target` или один из его родителей в контейнере (`this`) -- интересующий нас элемент -- обработать его.</li>
-</ol>
-Зачем использовать:
-[compare]
-+Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
-+Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
-+Удобство изменений: можно массово добавлять или удалять элементы путём изменения `innerHTML`. 
-[/compare]
-
-Конечно, у делегирования событий есть свои ограничения.
-
-[compare]
--Во-первых, событие должно всплывать. Нельзя, чтобы какой-то промежуточный обработчик вызвал `event.stopPropagation()` до того, как событие доплывёт до нужного элемента.
--Во-вторых, делегирование создает дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, не обязательно на элементах, которые нам  интересны. Но обычно эта нагрузка настолько пустяковая, её даже не стоит принимать во внимание.
-[/compare]
-
-
-
-
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.png b/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.png
deleted file mode 100644
index 67872b9e..00000000
Binary files a/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble@2x.png b/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble@2x.png
deleted file mode 100644
index 98fb51ac..00000000
Binary files a/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
deleted file mode 100755
index 3eff92bc..00000000
--- a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  <link type="text/css" rel="stylesheet" href="bagua.css">
-
-
-  <table id="bagua-table">
-    <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
-    </tr>
-    <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
-      </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
-      </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
-      </td>
-    </tr>
-    <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
-      </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
-      </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
-      </td>
-    </tr>
-    <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
-      </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
-      </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
-      </td>
-    </tr>
-
-  </table>
-
-  <script>
-    var table = document.getElementById('bagua-table');
-
-    var selectedTd;
-
-    table.onclick = function(event) {
-      var target = event.target;
-
-      while (target != this) {
-        if (target.tagName == 'TD') {
-          highlight(target);
-          return;
-        }
-        target = target.parentNode;
-      }
-    }
-
-    function highlight(node) {
-      if (selectedTd) {
-        selectedTd.classList.remove('highlight');
-      }
-      selectedTd = node;
-      selectedTd.classList.add('highlight');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html b/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html
deleted file mode 100644
index 7ad90f55..00000000
--- a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    
-    .tooltip {
-      position: fixed;
-      padding: 10px 20px;
-      /* красивости... */
-      
-      border: 1px solid #b3c9ce;
-      border-radius: 4px;
-      text-align: center;
-      font: italic 14px/1.3 arial, sans-serif;
-      color: #333;
-      background: #fff;
-      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-
-  <button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
-  <button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
-
-  <p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
-
-
-  <script>
-    var showingTooltip;
-
-    document.onmouseover = function(e) {
-      var target = e.target;
-
-      var tooltip = target.getAttribute('data-tooltip');
-      if (!tooltip) return;
-
-      var tooltipElem = document.createElement('div');
-      tooltipElem.className = 'tooltip';
-      tooltipElem.innerHTML = tooltip;
-      document.body.appendChild(tooltipElem);
-
-      var coords = target.getBoundingClientRect();
-
-      var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
-      if (left < 0) left = 0; // не вылезать за левую границу окна
-
-      var top = coords.top - tooltipElem.offsetHeight - 5;
-      if (top < 0) { // не вылезать за верхнюю границу окна
-        top = coords.top + target.offsetHeight + 5;
-      }
-
-      tooltipElem.style.left = left + 'px';
-      tooltipElem.style.top = top + 'px';
-
-      showingTooltip = tooltipElem;
-    };
-
-    document.onmouseout = function(e) {
-
-      if (showingTooltip) {
-        document.body.removeChild(showingTooltip);
-        showingTooltip = null;
-      }
-
-    };
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/source.view/index.html b/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/source.view/index.html
deleted file mode 100644
index 3af0269a..00000000
--- a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/source.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    /* ваши стили */
-  </style>
-</head>
-
-<body>
-
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-
-  <button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
-  <button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
-
-  <p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
-
-
-  <script>
-    // ваш код
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/task.md b/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/task.md
deleted file mode 100644
index 15f87e57..00000000
--- a/2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/task.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Поведение "подсказка"
-
-[importance 5]
-
-При наведении мыши на элемент, на нём возникает событие `mouseover`, при удалении мыши с элемента -- событие `mouseout`.
-
-Зная это, напишите JS-код, который будет делать так, что при наведении на элемент, если у него есть атрибут `data-tooltip` -- над ним будет показываться подсказка с содержимым этого атрибута.
-
-Например, две кнопки:
-
-```html
-<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
-<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
-```
-
-Результат в ифрейме с документом:
-
-[iframe src="solution" height=200 border=1]
-
-В этой задаче можно полагать, что в элементе с атрибутом `data-tooltip` -- только текст, то есть нет подэлементов. 
-
-Детали оформления:
-
-<ul>
-<li>Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.</li>
-<li>Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML.</li>
-<li>Оформление подсказки должно задаваться CSS.</li>
-<li>Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента.</li>
-</ul>
-
-Важно: нужно использовать приём разработки "поведение", то есть поставить обработчик (точнее два) на `document`, а не на каждый элемент. 
-
-Плюс этого подхода -- динамически добавленные в DOM позже элементы автоматически получат этот функционал.
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/6-behavior/article.md b/2-ui/2-events-and-interfaces/6-behavior/article.md
deleted file mode 100644
index 247bde13..00000000
--- a/2-ui/2-events-and-interfaces/6-behavior/article.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Приём проектирования "поведение"
-
-Шаблон проектирования "поведение" (behavior) позволяет задавать хитрые обработчики на элементе *декларативно*, установкой специальных HTML-атрибутов и классов.
-
-[cut]
-
-## Описание
-
-Приём проектирования "поведение" состоит из двух частей:
-<ol>
-<li>Элементу ставится атрибут, описывающий его поведение.</li>
-<li>При помощи делегирования ставится обработчик на документ, который ловит все клики и, если элемент имеет нужный атрибут, производит нужное действие.
-</ol>
-
-## Пример
-
-Например, добавим "поведение", которое всем элементам, у которых стоит атрибут `data-counter`, будет при клике увеличивать значение на `1`:
-
-```html
-<!--+ run autorun height=60 -->
-Счётчик:
-<button data-counter>1</button>
-Ещё счётчик:
-<button data-counter>2</button>
-
-<script>
-  document.onclick = function(event) {
-    if (!event.target.hasAttribute('data-counter')) return;
-
-    var counter = event.target;
-
-    counter.innerHTML++;
-  };
-</script>
-```
-
-Если запустить HTML-код выше, то при клике на каждую кнопку -- её значение будет увеличиваться.
-
-Конечно, нам важны не счётчики, а общий подход, который они демонстрируют.
-
-Элементов `data-counter` может быть сколько угодно. Новые могут добавляться в HTML в любой момент. При помощи делегирования мы, фактически, добавили новый "псевдо-стандартный" атрибут в HTML, который добавляет элементу новую возможность ("поведение").
-
-
-## Ещё пример
-
-Добавим ещё поведение. 
-
-Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`:
-
-```html
-<!--+ autorun run height=60 -->
-<button *!*data-toggle-id="subscribe-mail"*/!*>
-  Показать форму подписки
-</button>
- 
-<form id="subscribe-mail" hidden>
-  Ваша почта: <input type="email">
-</form>
-
-<script>
-*!*
-  document.onclick = function(event) {
-    var target = event.target;
-
-    var id = target.getAttribute('data-toggle-id');
-    if (!id) return;
-
-    var elem = document.getElementById(id);
-
-    elem.hidden = !elem.hidden;
-  };
-*/!*
-</script>
-```
-
-Ещё раз заметим, что мы сделали. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу -- даже не надо знать JavaScript, можно просто написать атрибут `data-toggle-id`. 
-
-Это бывает очень удобно -- не нужно писать JavaScript-код для каждого элемента, который должен служить такой кнопкой. Просто используем поведение.
-
-Обратите внимание: обработчик поставлен на `document`, клик на любом элементе страницы пройдёт через него, так что поведение определено глобально.
-
-[smart header="Не только атрибут"]
-Для своих целей мы можем использовать в HTML любые атрибуты, но стандарт рекомендует для своих целей называть атрибуты `data-*`.
-
-В обработчике `document.onclick` мы могли бы проверять не атрибут, а класс или что-то ещё, но с атрибутом -- проще и понятнее всего.
-
-Также для добавления обработчиков на `document` рекомендуется использовать `addEventListener`, чтобы можно было добавить более одного обработчика для типа события.
-[/smart]
-
-
-## Итого
-
-Шаблон "поведение" удобен тем, что сколь угодно сложное JavaScript-поведение можно "навесить" на элемент одним лишь атрибутом. А можно -- несколькими атрибутами на связанных элементах.
-
-Здесь мы рассмотрели базовый пример, который можно как угодно модифицировать и масштабировать. Важно не переусердствовать.
-
-Приём разработки "поведение" рекомендуется использовать для расширения возможностей разметки, как альтернативу мини-фрагментам JavaScript.
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md
deleted file mode 100644
index 27e91612..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md
+++ /dev/null
@@ -1,42 +0,0 @@
-Дело в том, что обработчик из атрибута `onclick` делается браузером как функция с заданным телом. 
-
-То есть, в данном случае он будет таким:
-
-```js
-function(event) {
-  handler() // тело взято из атрибута onclick
-}
-```
-
-При этом возвращаемое `handler` значение никак не используется и не влияет на результат.
-
-Рабочий вариант:
-
-```html
-<!--+ run -->
-<script>
-  function handler() {
-    alert("...");
-    return false;
-  }
-</script>
-
-<a href="http://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
-```
-
-Также можно использовать объект события для вызова `event.preventDefault()`, например:
-
-```html
-<!--+ run -->
-<script>
-*!*
-  function handler(event) {
-    alert("...");
-    event.preventDefault();
-  }
-*/!*
-</script>
-
-<a href="http://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
-```
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md
deleted file mode 100644
index a2ef7979..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Почему не работает return false?
-
-[importance 3]
-
-Почему в этом документе `return false` не работает?
-
-```html
-<!--+ autorun run -->
-<script>
-  function handler() {
-    alert( "..." );
-    return false;
-  }
-</script>
-
-<a href="http://w3.org" onclick="handler()">w3.org</a>
-```
-
-По замыслу, переход на `w3.org` при клике должен отменяться. Однако, на самом деле он происходит.
-
-В чём дело и как поправить?
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md
deleted file mode 100644
index a10433d7..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Это -- классическая задача на тему делегирования.
-
-В реальной жизни, мы можем перехватить событие и создать AJAX-запрос к серверу, который сохранит информацию о том, по какой ссылке ушел посетитель.
-
-Мы перехватываем событие на `contents` и поднимаемся до `parentNode` пока не получим `A` или не упремся в контейнер.
-
-```js
-contents.onclick = function(evt) {
-  var target = evt.target;
-
-  function handleLink(href) {
-    var isLeaving = confirm('Уйти на ' + href + '?');
-    if (!isLeaving) return false;
-  }
-
-  while (target != this) {
-    if (target.nodeName == 'A') {
-*!*
-      return handleLink(target.getAttribute('href')); // (*)
-*/!*
-    }
-    target = target.parentNode;
-  }
-};
-```
-
-В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html
deleted file mode 100755
index fccc602c..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #contents {
-      padding: 5px;
-      border: 1px green solid;
-    }
-  </style>
-</head>
-
-<body>
-
-  <fieldset id="contents">
-    <legend>#contents</legend>
-    <p>
-      Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
-    </p>
-  </fieldset>
-
-  <script>
-    document.getElementById('contents').onclick = function(event) {
-
-      function handleLink(href) {
-        var isLeaving = confirm('Уйти на ' + href + '?');
-        if (!isLeaving) return false;
-      }
-
-      var target = event.target;
-
-      while (target != this) {
-        if (target.nodeName == 'A') {
-          return handleLink(target.getAttribute('href'));
-        }
-        target = target.parentNode;
-      }
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html
deleted file mode 100755
index c606819f..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #contents {
-      padding: 5px;
-      border: 1px green solid;
-    }
-  </style>
-</head>
-
-<body>
-
-  <fieldset id="contents">
-    <legend>#contents</legend>
-    <p>
-      Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
-    </p>
-  </fieldset>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md
deleted file mode 100644
index ba124ce5..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Поймайте переход по ссылке
-
-[importance 5]
-
-Сделайте так, чтобы при клике на ссылки внутри элемента `#contents` пользователю выводился вопрос о том, действительно ли он хочет покинуть страницу и если он не хочет, то прерывать переход по ссылке.
-
-Так это должно работать:
-
-[iframe height=100 border=1 src="solution"]
-
-Детали:
-<ul>
-<li>Содержимое `#contents` может быть загружено динамически и присвоено при помощи  `innerHTML`. Так что найти все ссылки и поставить на них обработчики нельзя. Используйте делегирование.</li>
-<li>Содержимое может содержать вложенные теги, *в том числе внутри ссылок*, например, `<a href=".."><i>...</i></a>`.</li>
-</ul>
-
-
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md
deleted file mode 100644
index 40f8e09c..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md
+++ /dev/null
@@ -1,55 +0,0 @@
-Решение состоит в том, чтобы добавить обработчик на контейнер `#thumbs` и отслеживать клики на ссылках. 
-
-Когда происходит событие, обработчик должен изменять `src` `#largeImg` на `href` ссылки и заменять `alt` на ее `title`.
-
-Код решения:
-
-```js
-var largeImg = document.getElementById('largeImg');
-
-document.getElementById('thumbs').onclick = function(e) {
-  var target = e.target;
-
-  while (target != this) {
-
-    if (target.nodeName == 'A') {
-      showThumbnail(target.href, target.title);
-      return false;
-    }
-
-    target = target.parentNode;
-  }
-
-}
-
-function showThumbnail(href, title) {
-  largeImg.src = href;
-  largeImg.alt = title;
-}
-```
-
-**Предзагрузка картинок**
-
-Для того, чтобы картинка загрузилась, достаточно создать новый элемент `IMG` и указать ему `src`, вот так:
-
-```js
-var imgs = thumbs.getElementsByTagName('img');
-for (var i = 0; i < imgs.length; i++) {
-  var url = imgs[i].parentNode.href;
-
-*!*
-  var img = document.createElement('img');
-  img.src = url;
-*/!*
-}
-```
-
-Как только элемент создан и ему назначен `src`, браузер сам начинает скачивать файл картинки.  
-
-При правильных настройках сервера как-то использовать этот элемент не обязательно -- картинка уже закеширована. 
-
-
-**Семантичная верстка**
-
-Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
deleted file mode 100755
index 8b6bc894..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Галерея</title>
-  <link rel="stylesheet" href="gallery.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
-
-  <ul id="thumbs">
-    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
-    <li>
-      <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
-    </li>
-    <li>
-      <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
-    </li>
-    <li>
-      <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
-    </li>
-    <li>
-      <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
-    </li>
-    <li>
-      <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
-    </li>
-  </ul>
-
-  <script>
-    var largeImg = document.getElementById('largeImg');
-
-    var thumbs = document.getElementById('thumbs');
-
-    thumbs.onclick = function(e) {
-      var target = e.target;
-
-      while (target != this) {
-
-        if (target.nodeName == 'A') {
-          showThumbnail(target.href, target.title);
-          return false;
-        }
-
-        target = target.parentNode;
-      }
-
-    }
-
-    function showThumbnail(href, title) {
-      largeImg.src = href;
-      largeImg.alt = title;
-    }
-
-
-    /* предзагрузка */
-    var imgs = thumbs.getElementsByTagName('img');
-    for (var i = 0; i < imgs.length; i++) {
-      var url = imgs[i].parentNode.href;
-      var img = document.createElement('img');
-      img.src = url;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
deleted file mode 100755
index cb22595c..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Галерея</title>
-  <link rel="stylesheet" href="gallery.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
-
-  <div id="thumbs">
-    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
-    <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md
deleted file mode 100644
index 5c59a124..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Галерея изображений
-
-[importance 5]
-
-Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.
-
-Результат должен выглядеть так:
-
-[iframe src="solution" height=600]
-
-Для обработки событий используйте делегирование, т.е. не более одного обработчика.
-
-P.S. Обратите внимание -- клик может быть как на маленьком изображении `IMG`, так и на `A` вне него. При этом `event.target` будет, соответственно, либо `IMG`, либо `A`.
-
-Дополнительно:
-
-<ul>
-<li>Если получится -- сделайте предзагрузку больших изображений, чтобы при клике они появлялись сразу.</li>
-<li>Всё ли в порядке с семантической вёрсткой в HTML исходного документа? Если нет -- поправьте, чтобы было, как нужно.</li>
-</ul>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/article.md b/2-ui/2-events-and-interfaces/7-default-browser-action/article.md
deleted file mode 100644
index 4527ba1f..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/article.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# Действия браузера по умолчанию
-
-Многие события автоматически влекут за собой действие браузера.
-
-Например:
-<ul>
-<li>Клик по ссылке инициирует переход на новый URL.</li>
-<li>Нажатие на кнопку "отправить" в форме -- отсылку ее на сервер.</li>
-<li>Двойной клик на тексте -- инициирует его выделение.</li>
-</ul>
-
-Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.
-
-[cut]
-
-## Отмена действия браузера
-
-Есть два способа отменить действие браузера:
-<ul>
-<li>**Основной способ -- это воспользоваться объектом события. Для отмены действия браузера существует стандартный метод `event.preventDefault()`.**</li>
-<li>Если же обработчик назначен через `onсобытие` (не через `addEventListener`), то можно просто вернуть `false` из обработчика.</li>
-</ul>
-
-В следующем примере при клике по ссылке переход не произойдет:
-
-```html
-<!--+ autorun height=60  no-beautify -->
-<a href="/" onclick="return false">Нажми здесь</a>
-или
-<a href="/" onclick="event.preventDefault()">здесь</a>
-```
-
-[warn header="Возвращать `true` не нужно"]
-Обычно значение, которое возвращает обработчик события, игнорируется.
-
-Единственное исключение -- это `return false` из обработчика, назначенного через `onсобытие`. 
-
-Иногда в коде начинающих разработчиков можно увидеть `return` других значений. Но они не нужны и никак не обрабатываются. 
-[/warn]
-
-### Пример: меню
-
-Рассмотрим задачу, когда нужно создать меню для сайта, например такое:
-
-```html
-<ul id="menu" class="menu">
-  <li><a href="/php">PHP</a></li>
-  <li><a href="/html">HTML</a></li>
-  <li><a href="/javascript">JavaScript</a></li>
-  <li><a href="/flash">Flash</a></li>
-</ul>
-```
-
-Данный пример при помощи CSS может выводиться так:
-
-[iframe height=70 src="menu" link edit]
-
-HTML-разметка сделана так, что все элементы меню являются не кнопками, а ссылками, то есть тегами `<a>`. 
-
-Это потому, что некоторые посетители очень любят сочетание "правый клик - открыть в новом окне".  Да, мы можем использовать и `<button>` и `<span>`, но если правый клик не работает -- это их огорчает. Кроме того, если на сайт зайдёт поисковик, то по ссылке из `<a href="...">` он перейдёт, а выполнить сложный JavaScript и получить результат -- вряд ли захочет.
-
-Поэтому в разметке мы используем именно `<a>`, но обычно клик будет обрабатываться полностью в JavaScript, а стандартное действие браузера (переход по ссылке) -- отменяться.
-
-Например, вот так:
-
-```js
-menu.onclick = function(event) {
-  if (event.target.nodeName != 'A') return;
-
-  var href = event.target.getAttribute('href');
-  alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п.
-
-*!*
-  return false; // отменить переход по url
-*/!*
-};
-```
-
-В конце `return false`, иначе браузер перейдёт по адресу из `href`.
-
-Так как мы применили делегирование, то меню может увеличиваться, можно добавить вложенные списки `ul/li`, стилизовать их при помощи CSS -- обработчик не потребует изменений.
-
-## Другие действия браузера
-
-Действий браузера по умолчанию достаточно много. 
-
-Вот некоторые примеры событий, которые вызывают действие браузера:
-<ul>
-<li>`mousedown` -- нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.</li>
-<li>`click` на `<input type="checkbox">` -- ставит или убирает галочку.</li>
-<li>`submit` -- при нажатии на `<input type="submit">`  в форме данные отправляются на сервер.</li>
-<li>`wheel` -- движение колёсика мыши инициирует прокрутку.</li>
-<li>`keydown` -- при нажатии клавиши в поле ввода появляется символ.</li>
-<li>`contextmenu` -- при правом клике показывается контекстное меню браузера.</li>
-<li>...</li>
-</ul>
-
-Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.
-
-[warn header="События могут быть связаны между собой"]
-Некоторые события естественным образом вытекают друг из друга.
-
-Например, нажатие мышкой `mousedown` на поле ввода `<input>` приводит к фокусировке внутрь него. Если отменить действие `mousedown`, то и фокуса не будет.
-
-Попробуйте нажать мышкой на первый `<input>` -- произойдёт событие `onfocus`. Это обычная ситуация.
-
-Но если нажать на второй, то фокусировки не произойдёт.
-
-```html
-<!--+ run autorun -->
-<input value="Фокус работает" onfocus="this.value=''">
-<input *!*onmousedown="return false"*/!* onfocus="this.value=''" value="Кликни меня">
-```
-
-Это потому, что отменено стандартное действие при `onmousedown`.
-
-...С другой стороны, во второй `<input>` можно перейти с первого нажатием клавиши [key Tab], и тогда фокусировка сработает. То есть, дело здесь именно в `onmousedown="return false"`.
-[/warn]
-
-## Особенности IE8-
-
-В IE8- для отмены действия по умолчанию нужно назначить свойство `event.returnValue = false`.
-
-Кроссбраузерный код для отмены действия по умолчанию:
-
-```js
-element.onclick = function(event) {
-  event = event || window.event;
-
-  if (event.preventDefault) { // если метод существует
-    event.preventDefault(); // то вызвать его
-  } else { // иначе вариант IE8-:
-    event.returnValue = false;
-  }
-}
-```
-
-Можно записать в одну строку:
-
-```js
-//+ no-beautify
-...
-event.preventDefault ? event.preventDefault() : (event.returnValue=false);
-...
-```
-
-## Итого
-
-<ul>
-<li>Браузер имеет встроенные действия при ряде событий -- переход по ссылке, отправка формы и т.п. Как правило, их можно отменить.</li>
-<li>Есть два способа отменить действие по умолчанию: первый -- использовать `event.preventDefault()` (IE8-: `event.returnValue=false`), второй -- `return false` из обработчика. Второй способ работает только если обработчик назначен через `onсобытие`.</li>
-</ul>
-
-
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html
deleted file mode 100755
index 1489498b..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css" />
-</head>
-
-<body>
-
-  <ul id="menu" class="menu">
-    <li><a href="/php">PHP</a></li>
-    <li><a href="/html">HTML</a></li>
-    <li><a href="/javascript">JavaScript</a></li>
-    <li><a href="/flash">Flash</a></li>
-  </ul>
-
-  <script src="menu.js"></script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js
deleted file mode 100755
index 1fe06216..00000000
--- a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js
+++ /dev/null
@@ -1,8 +0,0 @@
-menu.onclick = function(event) {
-  if (event.target.nodeName != 'A') return;
-
-  var href = event.target.getAttribute('href');
-  alert(href);
-
-  return false; // prevent url change
-};
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/8-dispatch-events/article.md b/2-ui/2-events-and-interfaces/8-dispatch-events/article.md
deleted file mode 100644
index c0659deb..00000000
--- a/2-ui/2-events-and-interfaces/8-dispatch-events/article.md
+++ /dev/null
@@ -1,452 +0,0 @@
-# Генерация событий на элементах
-
-Можно не только назначать обработчики на события, но и генерировать их самому.
-
-Мы будем использовать это позже для реализации компонентной архитектуры, при которой элемент, представляющий собой, к примеру, меню, генерирует события, к этому меню относящиеся -- `select` (выбран пункт меню) или `open` (меню раскрыто), и другие.
-
-Кроме того, события можно генерировать для целей автоматического тестирования.
-
-[cut]
-
-## Конструктор Event
-
-Вначале рассмотрим современный способ генерации событий, по стандарту [DOM 4](http://www.w3.org/TR/dom/#introduction-to-dom-events). Он поддерживается всеми браузерами, кроме IE11-. А далее рассмотрим устаревшие варианты, поддерживаемые IE.
-
-Объект события в нём создаётся при помощи встроенного конструктора [Event](http://www.w3.org/TR/dom/#event).
-
-Синтаксис:
-
-```js
-var event = new Event(тип события[, флаги]);
-```
-
-Где:
-<ul>
-<li>*Тип события* -- может быть как своим, так и встроенным, к примеру `"click"`.</li>
-<li>*Флаги* -- объект вида `{ bubbles: true/false, cancelable: true/false }`, где свойство `bubbles` указывает, всплывает ли событие, а `cancelable` -- можно ли отменить действие по умолчанию. 
-
-Флаги по умолчанию: `{bubbles: false, cancelable: false}`.</li>
-</ul>
-
-## Метод dispatchEvent
-
-Затем, чтобы инициировать событие, запускается `elem.dispatchEvent(event)`. 
-
-При этом событие срабатывает наравне с браузерными, то есть обычные браузерные обработчики на него отреагируют. Если при создании указан флаг `bubbles`, то оно будет всплывать.
-
-При просмотре примера ниже кнопка обработчик `onclick` на кнопке сработает сам по себе, событие генерируется скриптом:
-
-```html
-<!--+ run  no-beautify -->
-<button id="elem" onclick="alert('Клик');">Автоклик</button>
-
-<script>
-  var event = new Event("click");
-  elem.dispatchEvent(event);
-</script>
-```
-
-## Отмена действия по умолчанию
-
-На сгенерированном событии, как и на встроенном браузерном, обработчик может вызвать метод `event.preventDefault()`. Тогда `dispatchEvent` возвратит `false`.
-
-Остановимся здесь подробнее. Обычно `preventDefault()` вызов предотвращает действие браузера. В случае, если событие придумано нами, имеет нестандартное имя -- никакого действия браузера, конечно, нет.
-
-Но код, который генерирует событие, может предусматривать какие-то ещё действия после `dispatchEvent`. 
-
-Вызов `event.preventDefault()` является возможностью для обработчика события сообщить в сгенерировавший событие код, что эти действия продолжать не надо.
-
-В примере ниже есть функция `hide()`, которая при вызове генерирует событие `hide` на элементе `#rabbit`, уведомляя всех интересующихся, что кролик собирается спрятаться. 
-
-Любой обработчик может узнать об этом, подписавшись на событие через `rabbit.addEventListener('hide',...)` и, при желании, отменить действие по умолчанию через `event.preventDefault()`. Тогда кролик не исчезнет:
-
-```html
-<!--+ run -->
-<pre id="rabbit">
-  |\   /|
-   \|_|/
-   /. .\
-  =\_Y_/=
-   {>o<}
-</pre>
-
-
-<script>
-  
-  function hide() {
-    var event = new Event("hide", {
-      cancelable: true
-    });
-    if (!rabbit.dispatchEvent(event)) {
-      alert( 'действие отменено обработчиком' );
-    } else {
-      rabbit.hidden = true;
-    }
-  }
-
-  rabbit.addEventListener('hide', function(event) {
-    if (confirm("Вызвать preventDefault?")) {
-      event.preventDefault();
-    }
-  });
-
-  // прячемся через 2 секунды
-  setTimeout(hide, 2000);
-
-</script>
-```
-
-[smart header="Как отличить реальное нажатие от скриптового?"]
-В целях безопасности иногда хорошо бы знать -- инициировано ли действие посетителем или это кликнул скрипт. 
-
-Единственный способ, которым код может отличить реальное нажатие от программного, является проверка свойства `event.isTrusted`. 
-
-Оно на момент написания статьи поддерживается IE и Firefox и равно `true`, если посетитель кликнул сам, и всегда `false` -- если событие инициировал скрипт.
-[/smart]
-
-## Другие свойства событий
-
-При создании события браузер автоматически ставит следующие свойства:
-
-<ul>
-<li>`isTrusted: false` -- означает, что событие сгенерировано скриптом,  это свойство изменить невозможно.</li>
-<li>`target: null` --  это свойство ставится автоматически позже при `dispatchEvent`.</li>
-<li>`type: тип события` -- первый аргумент `new Event`.</li>
-<li>`bubbles`, `cancelable` -- по второму аргументу `new Event`.</li>
-</ul>
-
-Другие свойства события, если они нужны, например координаты для события мыши -- можно присвоить в объект события позже, например:
-
-```js
-//+ no-beautify
-var event = new Event("click", {bubbles: true, cancelable: false});
-event.clientX = 100;
-event.clientY = 100;
-```
-
-## Пример со всплытием 
-
-Сгенерируем совершенно новое событие `"hello"` и поймаем его на `document`. 
-
-Всё, что для этого нужно -- это флаг `bubbles`:
-
-```html
-<!--+ run  no-beautify -->
-<h1 id="elem">Привет от скрипта!</h1>
-
-<script>
-  document.addEventListener("hello", function(event) { // (1)
-    alert("Привет");
-    event.preventDefault();  // (2)
-  }, false);
-
-  var event = new Event("hello", {bubbles: true, cancelable: true}); // (3)
-  if (elem.dispatchEvent(event) === false) {
-    alert('Событие было отменено preventDefault');
-  }
-</script>
-```
-
-Обратите внимание:
-<ol>
-<li>Обработчик события `hello` стоит на `document`. Мы его поймаем на всплытии.</li>
-<li>Вызов `event.preventDefault()` приведёт к тому, что `dispatchEvent` вернёт `false`.</li>
-<li>Чтобы событие всплывало и его можно было отменить, указан второй аргумент `new Event`.</li>
-</ol>
-
-Никакой разницы между встроенными событиями (`click`) и своими (`hello`) здесь нет, их можно сгенерировать и запустить совершенно одинаково.
-
-## Конструкторы MouseEvent, KeyboardEvent и другие
-
-Для некоторых конкретных типов событий есть свои, специфические, конструкторы.
-
-Вот список конструкторов для различных событий интерфейса которые можно найти в спецификации [UI Event](http://www.w3.org/TR/uievents/):
-<ul>
-<li>`UIEvent`</li>
-<li>`FocusEvent`</li>
-<li>`MouseEvent`</li>
-<li>`WheelEvent`</li>
-<li>`KeyboardEvent`</li>
-<li>`CompositionEvent`</li>
-</ul>
-
-Вместо `new Event("click")` можно вызвать `new MouseEvent("click")`.
-
-**Специфический конструктор позволяет указать стандартные свойства для данного типа события.**
-
-Например, `clientX/clientY` для события мыши:
-
-```js
-//+ run
-var e = new MouseEvent("click", {
-  bubbles: true,
-  cancelable: true,
-  clientX: 100,
-  clientY: 100
-});
-
-*!*
-alert( e.clientX ); // 100
-*/!*
-```
-
-Это нельзя было бы сделать с обычным конструктором `Event`:
-
-```js
-//+ run
-var e = new Event("click", {
-  bubbles: true,
-  cancelable: true,
-  clientX: 100,
-  clientY: 100
-});
-
-*!*
-alert( e.clientX ); // undefined, свойство не присвоено!
-*/!*
-```
-
-Обычный конструктор `Event` не знает про "мышиные" свойства, поэтому их игнорирует.
-
-Впрочем, использование конкретного конструктора не является обязательным, можно обойтись `Event`, а свойства записать в объект отдельно, после конструктора. Здесь это скорее вопрос удобства и желания следовать правилам. События, которые генерирует браузер, всегда имеют правильный тип.
-
-Полный список свойств по типам событий вы найдёте в спецификации, например для `MouseEvent`: [MouseEvent Constructor](http://www.w3.org/TR/uievents/#constructor-mouseevent).
-
-## Свои события
-
-Для генерации своих, нестандартных, событий, хоть и можно использовать конструктор `Event`, но существует и специфический конструктор [CustomEvent](http://www.w3.org/TR/dom/#customevent).
-
-Технически, он абсолютно идентичен `Event`, кроме небольшой детали: у второго аргумента-объекта есть дополнительное свойство `detail`, в котором можно указывать информацию для передачи в событие.
-
-Например:
-
-```html
-<!--+ run -->
-<h1 id="elem">Привет для Васи!</h1>
-
-<script>
-  elem.addEventListener("hello", function(event) { 
-    alert( *!*event.detail.name*/!* );
-  }, false);
-
-  var event = new CustomEvent("hello", { 
-*!*
-    detail: { name: "Вася" }
-*/!*
-  }); 
-
-  elem.dispatchEvent(event);
-</script>
-```
-
-Надо сказать, что никто не мешает и в обычное `Event` записать любые свойства. Но `CustomEvent` более явно говорит, что событие не встроенное, а своё, и выделяет отдельно "информационное" поле `detail`, в которое можно записать что угодно без конфликта со стандартными свойствами объекта.
-
-## Старое API для IE9+
-
-Способ генерации событий, описанный выше, не поддерживается в IE11-, там нужен другой, более старый способ, описанный в стандарте [DOM 3 Events](http://www.w3.org/TR/DOM-Level-3-Events). 
-
-В нём была предусмотрена [иерархия событий](http://www.w3.org/TR/DOM-Level-3-Events/#event-interfaces), с различными методами инициализации.
-
-Она поддерживается как современными браузерами, так и IE9+. Там используется немного другой синтаксис, но по возможностям -- всё то же самое, что и в современном стандарте. 
-
-Можно использовать этот немного устаревший способ, если нужно поддерживать IE9+. Далее мы на его основе создадим полифилл.
-
-Объект события создаётся вызовом `document.createEvent`:
-
-```js
-var event = document.createEvent(eventInterface);
-```
-
-Аргументы:
-<ul>
-<li>`eventInterface` -- это тип события, например `MouseEvent`, `FocusEvent`, `KeyboardEvent`. В [секции 5 DOM 3 Events](http://www.w3.org/TR/DOM-Level-3-Events/#events-module) есть подробный список, какое событие к какому интерфейсу относится.
-</li>
-</ul>
-
-На практике можно всегда использовать самый общий интерфейс: `document.createEvent("Event")`.
-
-Далее событие нужно инициализовать:
-
-```js
-event.initEvent(type, boolean bubbles, boolean cancelable);
-```
-
-Аргументы:
-<ul>
-<li>`type` -- тип события, например `"click"`.</li>
-<li>`bubbles` -- всплывает ли событие.</li>
-<li>`cancelable` -- можно ли отменить событие.</li>
-</ul>
-
-Эти два кода аналогичны:
-
-```js
-// современный стандарт
-var event = new Event("click", {
-  bubbles: true,
-  cancelable: true
-});
-
-// старый стандарт
-var event = document.createEvent("Event");
-event.initEvent("click", true, true);
-```
-
-Единственная разница -- старый стандарт поддерживается IE9+.
-
-Этот пример с событием `hello` будет работать во всех браузерах, кроме IE8-:
-
-```html
-<!--+ run -->
-<h1 id="elem">Привет от скрипта!</h1>
-
-<script>
-  document.addEventListener("hello", function(event) {
-    alert( "Привет" );
-    event.preventDefault();
-  }, false);
-
-*!*
-  var event = document.createEvent("Event");
-  event.initEvent("hello", true, true);
-*/!*
-
-  if (elem.dispatchEvent(event) === false) {
-    alert( 'Событие было отменено preventDefault' );
-  }
-</script>
-```
-
-[smart header="`initMouseEvent`, `initKeyboardEvent` и другие..."]
-У конкретных типов событий, например `MouseEvent`, `KeyboardEvent`, есть методы, которые позволяют указать стандартные свойства.
-
-Они называются по аналогии: `initMouseEvent`, `initKeyboardEvent`. 
-
-Их можно использовать вместо базового `initEvent`, если хочется, чтобы свойства событий соответствовали встроенным браузерным.
-
-Выглядят они немного страшновато, например (взято из [спецификации](http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers)):
-
-```js
-void initMouseEvent(
-  DOMString typeArg, // тип
-  boolean bubblesArg, // всплывает?
-  boolean cancelableArg, // можно отменить?
-  AbstractView ? viewArg, // объект window, null означает текущее окно
-  long detailArg, // свойство detail и другие...
-  long screenXArg,
-  long screenYArg,
-  long clientXArg,
-  long clientYArg,
-  boolean ctrlKeyArg,
-  boolean altKeyArg,
-  boolean shiftKeyArg,
-  boolean metaKeyArg,
-  unsigned short buttonArg,
-  EventTarget ? relatedTargetArg);
-};
-```
-
-Для инициализации мышиного события нужно обязательно указать *все* аргументы, например:
-
-```html
-<!--+ run -->
-<button id="elem">Автоклик</button>
-
-<script>
-  elem.onclick = function(e) {
-    alert( 'Клик на координатах ' + e.clientX + ':' + e.clientY );
-  };
-
-  var event = document.createEvent("MouseEvent");
-*!*
-  event.initMouseEvent("click", true, true, null, 0, 0, 0, 100, 100, true, true, true, null, 1, null);
-*/!*
-  elem.dispatchEvent(event);
-</script>
-```
-
-Браузер, по стандарту, может сгенерировать отсутствующие свойства самостоятельно, например `pageX`, но это нужно проверять в конкретных случаях, иногда это не работает или работает некорректно, так что лучше указать все.
-[/smart]
-
-## Полифилл CustomEvent
-
-Для поддержки `CustomEvent` в IE9+ можно сделать небольшой полифилл:
-
-```js
-try {
-  new CustomEvent("IE has CustomEvent, but doesn't support constructor");
-} catch (e) {
-
-  window.CustomEvent = function(event, params) {
-    var evt;
-    params = params || {
-      bubbles: false,
-      cancelable: false,
-      detail: undefined
-    };
-    evt = document.createEvent("CustomEvent");
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  };
-
-  CustomEvent.prototype = Object.create(window.Event.prototype);
-}
-```
-
-Здесь мы сначала проверяем -- в IE9-11 есть `CustomEvent`, но его нельзя создать через `new`, будет ошибка. В этом случае заменяем браузерную реализацию на свою, совместимую.
-
-
-## Антистандарт: IE8-
-
-В совсем старом IE были "свои" методы `document.createEventObject()` и `elem.fireEvent()`.
-
-Пример с ними для IE8:
-
-```html
-<!--+ run -->
-<button id="elem">Автоклик</button>
-
-<script>
-  document.body.onclick = function() {
-    alert( "Клик, event.type=" + event.type );
-    return false;
-  };
-
-*!*
-  var event = document.createEventObject();
-  if (!elem.fireEvent("onclick", event)) {
-    alert( 'Событие было отменено' );
-  }
-*/!*
-</script>
-```
-
-**При помощи `fireEvent` можно сгенерировать только встроенные события.**
-
-Если указать `"hello"` вместо `"onclick"` в примере выше -- будет ошибка.
-
-Параметры `bubbles` и `cancelable` настраивать нельзя, браузер использует стандартные для данного типа событий.
-
-Существуют полифиллы для генерации произвольных событий и для IE8-, но они, по сути, полностью подменяют встроенную систему обработки событий браузером. И кода это требует тоже достаточно много. 
-
-Альтернатива -- фреймворк, например jQuery, который также реализует свою мощную систему работы с событиями, доступную через методы jQuery.
-
-
-## Итого
-
-<ul>
-<li>Все браузеры, кроме IE9-11, позволяют генерировать любые события, следуя стандарту DOM4.</li>
-<li>В IE9+ поддерживается более старый стандарт, можно легко сделать полифилл, например для `CustomEvent` он рассмотрен в этой главе.</li>
-<li>IE8- может генерировать только встроенные события.</li>
-</ul>
-
-Несмотря на техническую возможность генерировать встроенные браузерные события типа `click` или `keydown` -- пользоваться ей стоит с большой осторожностью.
-
-В 98% случаев, когда разработчик начинающего или среднего уровня хочет сгенерировать *встроенное* событие -- это вызвано "кривой" архитектурой кода, и взаимодействие нужно на уровне выше. 
-
-Как правило события имеет смысл генерировать:
-<ul>
-<li>Либо как явный и грубый хак, чтобы заставить работать сторонние библиотеки, в которых не предусмотрены другие средства взаимодействия.</li>
-<li>Либо для автоматического тестирования, чтобы скриптом "нажать на кнопку" и посмотреть, произошло ли нужное действие.</li>
-<li>Либо при создании своих "элементов интерфейса". Например, никто не мешает при помощи JavaScript создать из `<div class="calendar">` красивый календарь и генерировать на нём событие `change` при выборе даты. Эту тему мы разовьём позже.</li>
-</ul>
diff --git a/2-ui/2-events-and-interfaces/index.md b/2-ui/2-events-and-interfaces/index.md
deleted file mode 100644
index a4fa3992..00000000
--- a/2-ui/2-events-and-interfaces/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Основы работы с событиями
-
-Введение в браузерные события, общие свойства всех событий и приёмы работы с ними.
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.md
rename to 2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.md
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
new file mode 100644
index 00000000..7228a45d
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <input type="button" id="hider" value="Click to hide the text" />
+
+  <div id="text">Text</div>
+
+  <script>
+    // Here it doesn't matter how we hide the text,
+    // could also use style.display:
+    document.getElementById('hider').onclick = function() {
+      document.getElementById('text').hidden = true;
+    }
+  </script>
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
new file mode 100644
index 00000000..17c5be6d
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <input type="button" id="hider" value="Click to hide the text" />
+
+  <div id="text">Text</div>
+
+  <script>
+    /* your code */
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
new file mode 100644
index 00000000..7cb0cb0c
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
@@ -0,0 +1,11 @@
+importance: 5
+
+---
+
+# Hide on click
+
+Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+
+The demo:
+
+[iframe border=1 src="solution" height=80]
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
new file mode 100644
index 00000000..ec280669
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -0,0 +1,5 @@
+Can use `this` in the handler to reference "itself" here:
+
+```html run height=50
+<input type="button" onclick="this.hidden=true" value="Click to hide">
+```
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
new file mode 100644
index 00000000..9ee8f18e
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# Hide self
+
+Create a button that hides itself on click.
+
+```online
+Like this:
+<input type="button" onclick="this.hidden=true" value="Click to hide">
+```
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
new file mode 100644
index 00000000..2355e535
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -0,0 +1,16 @@
+The answer: `1` and `2`.
+
+The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+
+To remove a function object, we need to store a reference to it, like this:
+
+```js
+function handler() {
+  alert(1);
+}
+
+button.addEventListener("click", handler);
+button.removeEventListener("click", handler);
+```
+
+The handler `button.onclick` works independantly and in addition to `addEventListener`.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
new file mode 100644
index 00000000..f8cd75d5
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -0,0 +1,17 @@
+importance: 5
+
+---
+
+# Which handlers run?
+
+There's a button in the variable. There are no handlers on it.
+
+Which handlers run on click after the following code? Which alerts show up?
+
+```js no-beautify
+button.addEventListener("click", () => alert("1"));
+
+button.removeEventListener("click", () => alert("1"));
+
+button.onclick = () => alert(2);
+```
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png
new file mode 100644
index 00000000..871acdc7
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png
new file mode 100644
index 00000000..923bfc82
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
new file mode 100644
index 00000000..8312f039
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
@@ -0,0 +1,51 @@
+
+First we need to choose a method of positioning the ball.
+
+We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
+
+So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
+
+Then the ball will be positioned relatively to the field:
+
+```css
+#field {
+  width: 200px;
+  height: 150px;
+  position: relative;
+}
+
+#ball {
+  position: absolute;
+  left: 0; /* relative to the closest positioned ancestor (field) */
+  top: 0;
+  transition: 1s all; /* CSS animation for left/top makes the ball fly */
+}
+```
+
+Next we need to assign the correct `ball.style.position.left/top`. They contain field-relative coordinates now.
+
+Here's the picture:
+
+![](move-ball-coords.png)
+
+We have `event.clientX/clientY` -- window-relative coordinates of the click.
+
+To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
+
+```js
+let left = event.clientX - fieldInnerCoords.left - field.clientLeft;
+```
+
+Normally, `ball.style.position.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge would be under the mouse cursor.
+
+We need to move the ball half-width left and half-height up to make it center.
+
+So the final `left` would be:
+
+```js
+let left = event.clientX - fieldInnerCoords.left - field.clientLeft - ball.offsetWidth/2;
+```
+
+The vertical coordinate is calculated using the same logic.
+
+Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
new file mode 100644
index 00000000..a483ccb1
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #field {
+      width: 200px;
+      height: 150px;
+      border: 10px solid black;
+      background-color: #00FF00;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    #ball {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 40px;
+      height: 40px;
+      transition: all 1s;
+    }
+  </style>
+</head>
+
+<body style="height:2000px">
+
+  Click on a field to move the ball there.
+  <br>
+
+
+  <div id="field">
+    <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+  <script>
+    field.onclick = function(event) {
+
+      // window-relative field coordinates
+      let fieldCoords = this.getBoundingClientRect();
+
+      // the ball has position:absolute, the field: position:relative
+      // so ball coordinates are relative to the field inner left-upper corner
+      let ballCoords = {
+        top: event.clientY - fieldInnerCoords.top - field.clientTop - ball.clientHeight / 2,
+        left: event.clientX - fieldInnerCoords.left - field.clientLeft - ball.clientWidth / 2
+      };
+
+      // prevent crossing the top field boundary
+      if (ballCoords.top < 0) ballCoords.top = 0;
+
+      // prevent crossing the left field boundary
+      if (ballCoords.left < 0) ballCoords.left = 0;
+
+
+      // // prevent crossing the right field boundary
+      if (ballCoords.left + ball.clientWidth > field.clientWidth) {
+        ballCoords.left = field.clientWidth - ball.clientWidth;
+      }
+
+      // prevent crossing the bottom field boundary
+      if (ballCoords.top + ball.clientHeight > field.clientHeight) {
+        ballCoords.top = field.clientHeight - ball.clientHeight;
+      }
+
+      ball.style.left = ballCoords.left + 'px';
+      ball.style.top = ballCoords.top + 'px';
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
new file mode 100644
index 00000000..34f9c88a
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #field {
+      width: 200px;
+      height: 150px;
+      border: 10px solid black;
+      background-color: #00FF00;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body style="height:2000px">
+
+  Click on a field to move the ball there.
+  <br> The ball should never leave the field.
+
+
+  <div id="field">
+    <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
new file mode 100644
index 00000000..d5269147
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Move the ball across the field
+
+Move the ball across the field to a click. Like this:
+
+[iframe src="solution" height="260" link]
+
+Requirements:
+
+- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
+- CSS-animation is welcome.
+- The ball must not cross field boundaries.
+- When the page is scrolled, nothing should break.
+
+Notes:
+
+- The code should also work with different ball and field sizes, not be bound to any fixed values.
+- Use properties `event.clientX/event.clientY` for click coordinates.
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
new file mode 100644
index 00000000..f4c10594
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
@@ -0,0 +1,71 @@
+
+# HTML/CSS
+First let's create HTML/CSS.
+
+A menu is a standalone graphical component on the page, so its better to put it into a single DOM element.
+
+A list of menu items can be layed out as a list `ul/li`.
+
+Here's the example structure:
+
+```html
+<div class="menu">
+  <span class="title">Sweeties (click me)!</span>
+  <ul>
+    <li>Cake</li>
+    <li>Donut</li>
+    <li>Honey</li>
+  </ul>
+</div>
+```
+
+We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
+
+Like this:
+
+```html autorun height=50
+<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
+```
+
+So if we set `onclick` on it, then it will catch clicks to the right of the text.
+
+...but `<span>` has an implicit `display: inline`, so it occupies exactly enough place to fit all the text:
+
+```html autorun height=50
+<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
+```
+
+# Toggling the menu
+
+Toggling the menu should change the arrow and show/hide the menu list.
+
+All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
+
+Without it, the menu will be closed:
+
+```css
+.menu ul {
+  margin: 0;
+  list-style: none;
+  padding-left: 20px;
+  display: none;
+}
+
+.menu .title::before {
+  content: '▶ ';
+  font-size: 80%;
+  color: green;
+}
+```
+
+...And with `.open` the arrow changes and the list shows up:
+
+```css
+.menu.open .title::before {
+  content: '▼ ';
+}
+
+.menu.open ul {
+  display: block;
+}
+```
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html
new file mode 100644
index 00000000..0c1996a7
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .menu ul {
+      margin: 0;
+      list-style: none;
+      padding-left: 20px;
+      display: none;
+    }
+
+    .menu .title {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .menu .title::before {
+      content: '▶ ';
+      font-size: 80%;
+      color: green;
+    }
+
+    .menu.open .title::before {
+      content: '▼ ';
+    }
+
+    .menu.open ul {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="sweeties" class="menu">
+    <span class="title">Sweeties (click me)!</span>
+    <ul>
+      <li>Cake</li>
+      <li>Donut</li>
+      <li>Honey</li>
+    </ul>
+
+  </div>
+
+  <script>
+    let menuElem = document.getElementById('sweeties');
+    let titleElem = menuElem.querySelector('.title');
+
+    titleElem.onclick = function() {
+      menuElem.classList.toggle('open');
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html
new file mode 100644
index 00000000..03dded0c
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+  ▶ ▼ Sweeties (click me)!
+  <ul>
+    <li>Cake</li>
+    <li>Donut</li>
+    <li>Honey</li>
+  </ul>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
new file mode 100644
index 00000000..05af13cc
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
@@ -0,0 +1,11 @@
+importance: 5
+
+---
+
+# Create a menu sliding menu
+
+Create a menu that opens/collapses on click:
+
+[iframe border=1 height=100 src="solution"]
+
+P.S. HTML/CSS of the source document is to be modified.
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
new file mode 100644
index 00000000..022a0d97
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
@@ -0,0 +1,13 @@
+
+To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
+
+Then for each pane the code can be like:
+```js
+pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
+```
+
+Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
+
+```js
+pane.firstChild.onclick = () => pane.remove();
+```
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
new file mode 100644
index 00000000..ff9d8cc2
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link rel="stylesheet" href="messages.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div>
+    <div class="pane">
+      <h3>Horse</h3>
+      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+    </div>
+    <div class="pane">
+      <h3>Donkey</h3>
+      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+    </div>
+    <div class="pane">
+      <h3>Cat</h3>
+      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      </p>
+    </div>
+  </div>
+
+
+  <script>
+    let panes = document.querySelectorAll('.pane');
+
+    for(let pane of panes) {
+      pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
+      // button becomes the first child of pane
+      pane.firstChild.onclick = () => pane.remove();
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/messages.css b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/messages.css
new file mode 100644
index 00000000..b5ee9877
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/messages.css
@@ -0,0 +1,37 @@
+body {
+  margin: 10px auto;
+  width: 470px;
+}
+
+h3 {
+  margin: 0;
+  padding-bottom: .3em;
+  padding-right: 20px;
+  font-size: 1.1em;
+}
+
+p {
+  margin: 0;
+  padding: 0 0 .5em;
+}
+
+.pane {
+  background: #edf5e1;
+  padding: 10px 20px 10px;
+  border-top: solid 2px #c4df9b;
+  position: relative;
+}
+
+.remove-button {
+  position: absolute;
+  font-size: 110%;
+  top: 0;
+  color: darkred;
+  right: 10px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html
new file mode 100644
index 00000000..07adbf98
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link rel="stylesheet" type="text/css" href="messages.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  The button code (may need to adjust CSS):
+  <button class="remove-button">[x]</button>
+
+  <div>
+    <div class="pane">
+      <h3>Horse</h3>
+      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+    </div>
+    <div class="pane">
+      <h3>Donkey</h3>
+      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+    </div>
+    <div class="pane">
+      <h3>Cat</h3>
+      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      </p>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/messages.css b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/messages.css
new file mode 100644
index 00000000..c56b40ce
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/messages.css
@@ -0,0 +1,32 @@
+body {
+  margin: 10px auto;
+  width: 470px;
+}
+
+h3 {
+  margin: 0;
+  padding-bottom: .3em;
+  font-size: 1.1em;
+}
+
+p {
+  margin: 0;
+  padding: 0 0 .5em;
+}
+
+.pane {
+  background: #edf5e1;
+  padding: 10px 20px 10px;
+  border-top: solid 2px #c4df9b;
+}
+
+.remove-button {
+  font-size: 110%;
+  color: darkred;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
new file mode 100644
index 00000000..152cf41f
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Add a closing button
+
+There's a list of messages.
+
+Use JavaScript to add a closing button to the right-upper corner of each message.
+
+The result should look like this:
+
+[iframe src="solution" height=450]
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png
new file mode 100644
index 00000000..22a8ab6b
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png
new file mode 100644
index 00000000..9d2ff7e5
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png
new file mode 100644
index 00000000..bb2c6219
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png
new file mode 100644
index 00000000..37aa58cc
Binary files /dev/null and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png differ
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
new file mode 100644
index 00000000..25d83ab6
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
@@ -0,0 +1,17 @@
+The images ribbon can be represented as `ul/li` list of images `<img>`.
+
+Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
+
+![](carousel1.png)
+
+To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+
+For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
+
+To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
+
+![](carousel2.png)
+
+The outer `<div>` has a fixed width, so "extra" images are cut.
+
+The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
new file mode 100644
index 00000000..2c607331
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div id="carousel" class="carousel">
+    <button class="arrow prev">⇦</button>
+    <div class="gallery">
+      <ul class="images">
+        <li><img src="https://en.js.cx/carousel/1.png"></li>
+        <li><img src="https://en.js.cx/carousel/2.png"></li>
+        <li><img src="https://en.js.cx/carousel/3.png"></li>
+        <li><img src="https://en.js.cx/carousel/4.png"></li>
+        <li><img src="https://en.js.cx/carousel/5.png"></li>
+        <li><img src="https://en.js.cx/carousel/6.png"></li>
+        <li><img src="https://en.js.cx/carousel/7.png"></li>
+        <li><img src="https://en.js.cx/carousel/8.png"></li>
+        <li><img src="https://en.js.cx/carousel/9.png"></li>
+        <li><img src="https://en.js.cx/carousel/10.png"></li>
+      </ul>
+    </div>
+    <button class="arrow next">⇨</button>
+  </div>
+
+  <script>
+    /* label the images, just for convenience, to visually track them */
+    let i = 1;
+    for(let li of carousel.querySelectorAll('li')) {
+      li.style.position = 'relative';
+      li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
+      i++;
+    }
+
+    /* configuration */
+    let width = 130; // image width
+    let count = 3; // visible images count
+
+    let list = carousel.querySelector('ul');
+    let listElems = carousel.querySelectorAll('li');
+
+    let position = 0; // ribbon scroll position
+
+    carousel.querySelector('.prev').onclick = function() {
+      // shift left
+      position += width * count;
+      // can't move to the left too much, end of images
+      position = Math.min(position, 0)
+      list.style.marginLeft = position + 'px';
+    };
+
+    carousel.querySelector('.next').onclick = function() {
+      // shift right
+      position -= width * count;
+      // can only shift the ribbbon for (total ribbon length - visible count) images
+      position = Math.max(position, -width * (listElems.length - count));
+      list.style.marginLeft = position + 'px';
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
new file mode 100644
index 00000000..bbbc6327
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
@@ -0,0 +1,70 @@
+body {
+  padding: 10px;
+}
+
+.carousel {
+  position: relative;
+  width: 398px;
+  padding: 10px 40px;
+  border: 1px solid #CCC;
+  border-radius: 15px;
+  background: #eee;
+}
+
+.carousel img {
+  width: 130px;
+  height: 130px;
+  /* make it block to remove space around images */
+  display: block;
+}
+
+.arrow {
+  position: absolute;
+  top: 60px;
+  padding: 0;
+  background: #ddd;
+  border-radius: 15px;
+  border: 1px solid gray;
+  font-size: 24px;
+  line-height: 24px;
+  color: #444;
+  display: block;
+}
+
+.arrow:focus {
+  outline: none;
+}
+
+.arrow:hover {
+  background: #ccc;
+  cursor: pointer;
+}
+
+.prev {
+  left: 7px;
+}
+
+.next {
+  right: 7px;
+}
+
+.gallery {
+  width: 390px;
+  overflow: hidden;
+}
+
+.gallery ul {
+  height: 130px;
+  width: 9999px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  transition: margin-left 250ms;
+  /* remove white-space between inline-block'ed li */
+  /* http://davidwalsh.name/remove-whitespace-inline-block */
+  font-size: 0;
+}
+
+.gallery li {
+  display: inline-block;
+}
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
new file mode 100644
index 00000000..e9a9bc8d
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <!-- create your markup and styles -->
+
+  <button class="arrow">⇦</button>
+  <button class="arrow">⇨</button>
+
+
+  <ul>
+    <li><img src="https://en.js.cx/carousel/1.png"></li>
+    <li><img src="https://en.js.cx/carousel/2.png"></li>
+    <li><img src="https://en.js.cx/carousel/3.png"></li>
+    <li><img src="https://en.js.cx/carousel/4.png"></li>
+    <li><img src="https://en.js.cx/carousel/5.png"></li>
+    <li><img src="https://en.js.cx/carousel/6.png"></li>
+    <li><img src="https://en.js.cx/carousel/7.png"></li>
+    <li><img src="https://en.js.cx/carousel/8.png"></li>
+    <li><img src="https://en.js.cx/carousel/9.png"></li>
+    <li><img src="https://en.js.cx/carousel/10.png"></li>
+  </ul>
+
+
+  <script>
+    // label the images to visually track them, just for convenience,
+    // this code can be removed
+    let i = 1;
+    for(let li of carousel.querySelectorAll('li')) {
+      li.style.position = 'relative';
+      li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
+      i++;
+    }
+
+    // ...your code to make carousel alive!
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
new file mode 100644
index 00000000..75c68f01
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
@@ -0,0 +1,38 @@
+.arrow {
+  padding: 0;
+  background: #ddd;
+  border-radius: 15px;
+  border: 1px solid gray;
+  font-size: 24px;
+  line-height: 24px;
+  color: #444;
+  display: block;
+}
+
+.arrow:focus {
+  outline: none;
+}
+
+.arrow:hover {
+  background: #ccc;
+  cursor: pointer;
+}
+
+ul {
+  height: 130px;
+  width: 9999px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0; 
+}
+
+ul img {
+  width: 130px;
+  height: 130px;
+  display: block; /* removes extra space near images */
+}
+
+ul li {
+  display: inline-block; /* removes extra space between list items
+}
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
new file mode 100644
index 00000000..a6adbffa
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
@@ -0,0 +1,13 @@
+importance: 4
+
+---
+
+# Carousel
+
+Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows.
+
+[iframe height=200 src="solution"]
+
+Later we can add more features to it: infinite scrolling, dynamic loading etc.
+
+P.S. For this task HTML/CSS structure is actually 90% of the solution.
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
new file mode 100644
index 00000000..855e48d0
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -0,0 +1,388 @@
+# Introduction to browser events
+
+*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM).
+
+[cut]
+
+Here's a list of the most useful DOM events, just to take a look at:
+
+**Mouse events:**
+- `click` -- when the mouse clicks on an element (touchscreen devices generate it on a tap).
+- `contextmenu` -- when the mouse right-clicks on an element.
+- `mouseover` -- when the mouse cursor comes over an element.
+- `mousedown` and `mouseup` -- when the mouse button is pressed and released over an element.
+- `mousemove` -- when the mouse is moved.
+
+**Form element events:**
+- `submit` -- when the visitor submits a `<form>`.
+- `focus` --  when the visitor focuses on an element, e.g. on an `<input>`.
+
+**Keyboard events:**
+- `keydown` and `keyup` -- when the visitor presses and then releases the button.
+
+**Document events**
+- `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built.
+
+**CSS events:**
+- `transitionend` -- when a CSS-animation finishes.
+
+There are many other events.
+
+## Event handlers
+
+To react on events we can assign a *handler* -- a function that runs in case of an event.
+
+Handlers is a way to run JavaScript code in case of user actions.
+
+There are several ways to assign a handler. Let's see them, starting from the simplest one.
+
+### HTML-attribute
+
+A handler can be set in HTML with an attribute named `on<event>`.
+
+For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here:
+
+```html run
+<input value="Click me" *!*onclick="alert('Click!')"*/!* type="button">
+```
+
+On mouse click, the code inside `onclick` runs.
+
+Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this:  `onclick="alert("Click!")"`, then it won't work right.
+
+An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
+
+Here a click runs the function `countRabbits()`:
+
+```html autorun height=50
+<script>
+  function countRabbits() {
+    for(let i=1; i<=3; i++) {
+      alert("Rabbit number " + i);
+    }
+  }
+</script>
+
+<input type="button" *!*onclick="countRabbits()"*/!* value="Count rabbits!">
+```
+
+As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`.
+
+### DOM property
+
+We can assign a handler using a DOM property `on<event>`.
+
+For instance, `elem.onclick`:
+
+```html autorun
+<input id="elem" type="button" value="Click me">
+<script>
+*!*
+  elem.onclick = function() {
+    alert('Thank you');
+  };
+*/!*
+</script>
+```
+
+If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property.
+
+So this way is actually the same as the previous one.
+
+**The handler is always in the DOM property: the HTML-attribute is just one of the ways to initialize it.**
+
+These two code pieces work the same:
+
+1. Only HTML:
+
+    ```html autorun height=50
+    <input type="button" *!*onclick="alert('Click!')"*/!* value="Button">
+    ```
+2. HTML + JS:
+
+    ```html autorun height=50
+    <input type="button" id="button" value="Button">
+    <script>
+    *!*
+      button.onclick = function() {
+        alert('Click!');
+      };
+    */!*
+    </script>
+    ```
+
+**As there's only one `onclick` property, we can't assign more than one event handler.**
+
+In the example below adding a handler with JavaScript overwrites the existing handler:
+
+```html run height=50 autorun
+<input type="button" id="elem" onclick="alert('Before')" value="Click me">
+<script>
+*!*
+  elem.onclick = function() { // overwrites the existing handler
+    alert('After'); // only this will be shown
+  };
+*/!*
+</script>
+```
+
+By the way, we can assign an existing function as a handler directly:
+
+```js
+function sayThanks() {
+  alert('Thanks!');
+}
+
+elem.onclick = sayThanks;
+```
+
+To remove a handler -- assign `elem.onclick = null`.
+
+## Accessing the element: this
+
+The value of `this` inside a handler is the element. The one which has the handler on it.
+
+In the code below `button` shows its contents using `this.innerHTML`:
+
+```html height=50 autorun
+<button onclick="alert(this.innerHTML)">Click me</button>
+```
+
+## Possible mistakes
+
+If you're starting to work with event -- please note some subtleties.
+
+**The function should be assigned as `sayThanks`, not `sayThanks()`.**
+
+```js
+// right
+button.onclick = sayThanks;
+
+// wrong
+button.onclick = sayThanks();
+```
+
+If we add brackets, then `sayThanks()` --  will be the *result* of the function execution, so `onclick` in the last code becomes `undefined` (the function returns nothing). That won't work.
+
+...But in the markup we do need the brackets:
+
+```html
+<input type="button" id="button" onclick="sayThanks()">
+```
+
+The difference is easy to explain. When the browser reads the attribute, it creates a handler function with the body from its content.
+
+So the last example is the same as:
+```js
+button.onclick = function() {
+*!*
+  sayThanks(); // the attribute content
+*/!*
+};
+```
+
+**Use functions, not strings.**
+
+The assignment `elem.onclick = "alert(1)"` would work too. It works for compatibility reasons, but strongly not recommended.
+
+**Don't use `setAttribute` for handlers.**
+
+Such a call won't work:
+
+```js run no-beautify
+// a click on <body> will generate errors,
+// because attributes are always strings, function becomes a string
+document.body.setAttribute('onclick', function() { alert(1) });
+```
+
+**DOM-property case matters.**
+
+Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive.
+
+## addEventListener
+
+The fundamental problem of the aforementioned ways to assign handlers -- we can't assign multiple handlers to one event.
+
+For instance, one part of our code wants to highlight a button on click, and another one wants to show a message.
+
+We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one:
+
+```js no-beautify
+input.onclick = function() { alert(1); }
+// ...
+input.onclick = function() { alert(2); } // replaces the previous handler
+```
+
+Web-standard developers understood that long ago and suggested an alternative way of managing handlers using special methods `addEventListener` and `removeEventListener`. They are free of such a problem.
+
+The syntax to add a handler:
+
+```js
+element.addEventListener(event, handler[, phase]);
+```
+
+`event`
+: Event name, e.g. `"click"`.
+
+`handler`
+: The handler function.
+
+`phase`
+: An optional argument, the "phase" for the handler to work. To be covered later. Usually we don't use it.
+
+To remove the handler, use `removeEventListener`:
+
+
+```js
+// exactly the same arguments as addEventListener
+element.removeEventListener(event, handler[, phase]);
+```
+
+````warn header="Removal requires the same function"
+To remove a handler we should pass exactly the same function as was assigned.
+
+That doesn't work:
+
+```js no-beautify
+elem.addEventListener( "click" , () => alert('Thanks!'));
+// ....
+elem.removeEventListener( "click", () => alert('Thanks!'));
+```
+
+The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter.
+
+Here's the right way:
+
+```js
+function handler() {
+  alert( 'Thanks!' );
+}
+
+input.addEventListener("click", handler);
+// ....
+input.removeEventListener("click", handler);
+```
+
+Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`.
+````
+
+Multiple calls to `addEventListener` allow to add multiple handlers, like this:
+
+```html run no-beautify
+<input id="elem" type="button" value="Click me"/>
+
+<script>
+  function handler1() {
+    alert('Thanks!');
+  };
+
+  function handler2() {
+    alert('Thanks again!');
+  }
+
+*!*
+  elem.onclick = () => alert("Hello");
+  elem.addEventListener("click", handler1); // Thanks!
+  elem.addEventListener("click", handler2); // Thanks again!
+*/!*
+</script>
+```
+
+As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways.
+
+````warn header="For some events handlers only work with `addEventListener`"
+There exist events that can't be assigned via a DOM-property. Must use `addEventListener`.
+
+For instance, the event `transitionend` (CSS animation finished) is like that.
+
+Try the code below. In most browsers only the second handler works, not the first one.
+
+```html run
+<style>
+  input {
+    transition: width 1s;
+    width: 100px;
+  }
+
+  .wide {
+    width: 300px;
+  }
+</style>
+
+<input type="button" id="elem" onclick="this.classList.toggle('wide')" value="Click me">
+
+<script>
+  elem.ontransitionend = function() {
+    alert("DOM property"); // doesn't work
+  };
+
+*!*
+  elem.addEventListener("transitionend", function() {
+    alert("addEventListener"); // shows up when the animation finishes
+  });
+*/!*
+</script>
+```
+````
+
+
+## Event object
+
+To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keypress", but what were the pointer coordinates? Which key was pressed? And so on.
+
+When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler.
+
+Here's an example of getting mouse coordinates from the event object:
+
+```html run
+<input type="button" value="Click me" id="elem">
+
+<script>
+  elem.onclick = function(*!*event*/!*) {
+    // show event type, element and coordinates of the click
+    alert(event.type + " at " + event.currentTarget);
+    alert(event.clientX + ":" + event.clientY);
+  };
+</script>
+```
+
+Some properties of `event` object:
+
+`event.type`
+: Event type, here it's `"click"`.
+
+`event.currentTarget`
+: Element that handled the event. That's exactly the same as `this`, unless you bind `this` to something else, and then `event.currentTarget` becomes useful.
+
+`event.clientX / event.clientY`
+: Window-relative coordinates of the cursor, for mouse events.
+
+There are more properties. They depend on the event type, so we'll study them later when come to different events in details.
+
+````smart header="The event object is also accessible from HTML"
+If we assign a handler in HTML, we can also use the `event` object, like this:
+
+```html autorun height=60
+<input type="button" onclick="*!*alert(event.type)*/!*" value="Event type">
+```
+
+That's possible because when the browser reads the attribute, it creates a handler like this:  `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute.
+````
+
+## Summary
+
+There are 3 ways to assign event handlers:
+
+1. HTML attribute: `onclick="..."`.
+2. DOM property: `elem.onclick = function`.
+3. Methods `elem.addEventListener(event, handler[, phase])`, to remove: `removeEventListener`.
+
+HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there.
+
+DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing.
+
+The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transtionend` and `DOMContentLoaded` (to be covered).
+
+When a handler is called, it gets an event objects as the first argument. It contains details about what's happened. We'll see more of them later.
+
+As of now we're just starting to work with events. More details in the next chapters.
diff --git a/2-ui/2-events/01-introduction-browser-events/head.html b/2-ui/2-events/01-introduction-browser-events/head.html
new file mode 100644
index 00000000..4b6810e5
--- /dev/null
+++ b/2-ui/2-events/01-introduction-browser-events/head.html
@@ -0,0 +1,53 @@
+<style>
+/*
+.d0 { text-align:center;margin:auto; }
+.d1 p { margin: 0 }
+.d1 {
+margin:2em;
+background-color:green;
+width:13em;
+height:13em;
+text-align:center;
+}
+.d1 .number {
+  line-height: 2em;
+}
+.d2 {
+text-align:center;
+margin:auto;
+background-color:blue;
+width:9em;
+height:9em;
+}
+.d1 .d2 ,number {
+  line-height: 2em;
+}
+.d3 {
+text-align:center;
+margin:auto;
+background-color:red;
+width:5em;
+height:5em;
+}
+.d1 .d2 .d3 .number {
+  line-height: 5em;
+}
+.d1 .d2 .d2a {
+  color:white;
+  line-height: 2em;
+}
+*/
+</style>
+<script>
+/*
+function highlightMe(elem) {
+    elem.style.backgroundColor='yellow'
+    alert(elem.className)
+    elem.style.backgroundColor = ''
+}
+
+function highlightMe2(e) {
+    highlightMe(e.currentTarget);
+}
+*/
+</script>
diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
new file mode 100644
index 00000000..a3ee986d
--- /dev/null
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -0,0 +1,207 @@
+# Bubbling and capturing
+
+Let's start with an example.
+
+This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+
+```html autorun height=60
+<div onclick="alert('The handler !')">
+  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
+</div>
+```
+
+Isn't it a bit strange? Why the handler on `<div>` runs if the actual click was on `<em>`?
+
+## Bubbling
+
+The bubbling principle is simple.
+
+**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+
+Let's say, we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+
+```html run autorun
+<style>
+  body * {
+    margin: 10px;
+    border: 1px solid blue;
+  }
+</style>
+
+<form onclick="alert('form')">FORM
+  <div onclick="alert('div')">DIV
+    <p onclick="alert('p')">P</p>
+  </div>
+</form>
+```
+
+A click on the inner `<p>` first runs `onclick`:
+1. On that `<p>`.
+2. Then on the outer `<div>`.
+3. Then on the outer `<form>`.
+4. And so on upwards till the `document` object.
+
+![](event-order-bubbling.png)
+
+So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+
+The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+
+```warn header="*Almost* all events bubble."
+The key word in this phrase is "almost".
+
+For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather then a rule, most events do bubble.
+```
+
+## event.target
+
+A handler on a parent element can always get the details about where it actually happened.
+
+**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+
+Note the differences from `this` (=`event.currentTarget`):
+
+- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
+- `this` -- is the "current" element, the one that has a currently running handler on it.
+
+For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.
+
+In `form.onclick` handler:
+
+- `this` (`=event.currentTarget`) is the `<form>` element, because the handler runs on it.
+- `event.target` is the concrete element inside the form that actually was clicked.
+
+Check it out:
+
+[codetabs height=220 src="bubble-target"]
+
+It's possible that `event.target` equals `this` -- when the click is made directly on the `<form>` element.
+
+## Stopping bubbling
+
+A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document` object, and some events even reach `window`, calling all handlers on the path.
+
+But any handler may decide that the event has been fully processed and stop the bubbling.
+
+The method for it is `event.stopPropagation()`.
+
+For instance, here `body.onclick` doesn't work if you click on `<button>`:
+
+```html run autorun height=60
+<body onclick="alert(`the bubbling doesn't reach here`)">
+  <button onclick="event.stopPropagation()">Click me</button>
+</body>
+```
+
+```smart header="event.stopImmediatePropagation()"
+If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+
+In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+
+To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
+```
+
+```warn header="Don't stop bubbling without a need!"
+Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well-thought.
+
+Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+
+For instance:
+
+1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that outer parts don't trigger.
+2. Later we decide to catch clicks inside the whole window, to track users' behavior (where people click). Some counters do that. Usually a counter code does that by `document.addEventListener('click'…)`.
+3. Our counter won't work over the area where clicks are stopped by `stopPropagation`. We've got a "dead zone".
+
+There's usually no real need to prevent the bubbling. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
+```
+
+
+## Capturing
+
+There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+
+The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+
+1. Capturing phase -- the event goes down to the element.
+2. Target phase -- the event reached the target element.
+3. Bubbling phase -- the event bubbles up from the element.
+
+Here's the picture of a click on `<td>` inside a table, taken from the specification:
+
+![](eventflow.png)
+
+That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing), then it reaches the target, and then it goes up (bubbles), calling handlers on its way.
+
+**Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.**
+
+Handlers added using `on<event>`-property or using HTML attributes or using `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
+
+To catch an event on the capturing phase, we need to set the 3rd argument of `addEventListener` to `true`.
+
+Actually, there are two possible values for that optional last argument:
+
+- If it's `false` (default), then the handler is set on the bubbling phase.
+- If it's `true`, then the handler is set on the capturing phase.
+
+Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
+
+Handlers on the target element trigger last on the capturing state, and then trigger first on the bubbling stage.
+
+Let's see it in action:
+
+```html run autorun height=140 edit
+<style>
+  body * {
+    margin: 10px;
+    border: 1px solid blue;
+  }
+</style>
+
+<form>FORM
+  <div>DIV
+    <p>P</p>
+  </div>
+</form>
+
+<script>
+  for(let elem of document.querySelectorAll('*')) {
+    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
+    elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
+  }
+</script>
+```
+
+The code sets click handlers on *every* element in the document to see which ones are working.
+
+If you click on `<p>`, then the sequence is:
+
+1. `HTML` -> `BODY` -> `FORM` -> `DIV` -> `P` (capturing phase, the first listener), and then:
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+
+Please note that `P` shows up two times: at the end of capturing and at the start of bubbling.
+
+There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
+
+## Summary
+
+The event handling process:
+
+- When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
+- Then the event first moves from the document root down the `event.target`, calling handlers assigned with `addEventListener(...., true)` on the way.
+- Then the event moves from `event.target` up to the root, calling handlers assigned using  `on<event>` and `addEventListener` without the 3rd argument or with the 3rd argument `false`.
+
+Each handler can access `event` object properties:
+
+- `event.target` -- the deepest element that originated the event.
+- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
+- `event.eventPhase` -- the current phase (capturing=1, bubbling=3).
+
+Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
+
+The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
+
+In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
+
+The same for event handlers. The code that set the handler on a particular element knows maximum  details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last.
+
+Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css b/2-ui/2-events/02-bubbling-and-capturing/both.view/example.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css
rename to 2-ui/2-events/02-bubbling-and-capturing/both.view/example.css
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html b/2-ui/2-events/02-bubbling-and-capturing/both.view/index.html
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
rename to 2-ui/2-events/02-bubbling-and-capturing/both.view/index.html
diff --git a/2-ui/2-events/02-bubbling-and-capturing/both.view/script.js b/2-ui/2-events/02-bubbling-and-capturing/both.view/script.js
new file mode 100644
index 00000000..c3475f5c
--- /dev/null
+++ b/2-ui/2-events/02-bubbling-and-capturing/both.view/script.js
@@ -0,0 +1,12 @@
+let elems = document.querySelectorAll('form,div,p');
+
+for (let i = 0; i < elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+  elems[i].addEventListener("click", highlightThis, false);
+}
+
+function highlightThis() {
+  this.style.backgroundColor = 'yellow';
+  alert(this.tagName);
+  this.style.backgroundColor = '';
+}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/example.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css
rename to 2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/example.css
diff --git a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
new file mode 100644
index 00000000..8313ec29
--- /dev/null
+++ b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="example.css">
+</head>
+
+<body>
+  A click shows both <code>event.target</code> and <code>this</code> to compare:
+
+  <form id="form">FORM
+    <div>DIV
+      <p>P</p>
+    </div>
+  </form>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js
new file mode 100644
index 00000000..35997b04
--- /dev/null
+++ b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js
@@ -0,0 +1,9 @@
+let form = document.querySelector('form');
+
+form.onclick = function(event) {
+  event.target.style.backgroundColor = 'yellow';
+
+  alert("target = " + event.target.tagName + ", this=" + this.tagName);
+
+  event.target.style.backgroundColor = '';
+};
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css b/2-ui/2-events/02-bubbling-and-capturing/capture.view/example.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css
rename to 2-ui/2-events/02-bubbling-and-capturing/capture.view/example.css
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html b/2-ui/2-events/02-bubbling-and-capturing/capture.view/index.html
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html
rename to 2-ui/2-events/02-bubbling-and-capturing/capture.view/index.html
diff --git a/2-ui/2-events/02-bubbling-and-capturing/capture.view/script.js b/2-ui/2-events/02-bubbling-and-capturing/capture.view/script.js
new file mode 100644
index 00000000..d67a496a
--- /dev/null
+++ b/2-ui/2-events/02-bubbling-and-capturing/capture.view/script.js
@@ -0,0 +1,11 @@
+let elems = document.querySelectorAll('form,div,p');
+
+for (let i = 0; i < elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+}
+
+function highlightThis() {
+  this.style.backgroundColor = 'yellow';
+  alert(this.tagName);
+  this.style.backgroundColor = '';
+}
\ No newline at end of file
diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png
new file mode 100644
index 00000000..30f25780
Binary files /dev/null and b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png differ
diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png
new file mode 100644
index 00000000..3077050a
Binary files /dev/null and b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png differ
diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow.png b/2-ui/2-events/02-bubbling-and-capturing/eventflow.png
new file mode 100644
index 00000000..95c5c08e
Binary files /dev/null and b/2-ui/2-events/02-bubbling-and-capturing/eventflow.png differ
diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png b/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png
new file mode 100644
index 00000000..d52c4f70
Binary files /dev/null and b/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png differ
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.md
rename to 2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.md
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
new file mode 100644
index 00000000..6f8ed9c4
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link rel="stylesheet" href="messages.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div id="container">
+    <div class="pane">
+      <h3>Horse</h3>
+      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+      <button class="remove-button">[x]</button>
+    </div>
+    <div class="pane">
+      <h3>Donkey</h3>
+      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+      <button class="remove-button">[x]</button>
+    </div>
+    <div class="pane">
+      <h3>Cat</h3>
+      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      </p>
+      <button class="remove-button">[x]</button>
+    </div>
+  </div>
+
+  <script>
+    container.onclick = function(event) {
+      if (event.target.className != 'remove-button') return;
+
+      let pane = event.target.closest('.pane');
+      pane.remove();
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/messages.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css
rename to 2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/messages.css
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
new file mode 100644
index 00000000..8a9ed9a0
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link rel="stylesheet" href="messages.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div id="container">
+    <div class="pane">
+      <h3>Horse</h3>
+      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+      <button class="remove-button">[x]</button>
+    </div>
+    <div class="pane">
+      <h3>Donkey</h3>
+      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+      <button class="remove-button">[x]</button>
+    </div>
+    <div class="pane">
+      <h3>Cat</h3>
+      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      </p>
+      <button class="remove-button">[x]</button>
+    </div>
+  </div>
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/messages.css
new file mode 100644
index 00000000..b5ee9877
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/messages.css
@@ -0,0 +1,37 @@
+body {
+  margin: 10px auto;
+  width: 470px;
+}
+
+h3 {
+  margin: 0;
+  padding-bottom: .3em;
+  padding-right: 20px;
+  font-size: 1.1em;
+}
+
+p {
+  margin: 0;
+  padding: 0 0 .5em;
+}
+
+.pane {
+  background: #edf5e1;
+  padding: 10px 20px 10px;
+  border-top: solid 2px #c4df9b;
+  position: relative;
+}
+
+.remove-button {
+  position: absolute;
+  font-size: 110%;
+  top: 0;
+  color: darkred;
+  right: 10px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
new file mode 100644
index 00000000..62c0a8ab
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Hide messages with delegation
+
+There's a list of messages with removal buttons `[x]`. Make the buttons work.
+
+Like this:
+
+[iframe src="solution" height=420]
+
+P.S. Should be only one event listener on the container, use event delegation.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
new file mode 100644
index 00000000..09c14a08
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
@@ -0,0 +1,4 @@
+The solution has two parts.
+
+1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
+2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
new file mode 100644
index 00000000..6e266dd3
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    .tree span:hover {
+      font-weight: bold;
+    }
+
+    .tree span {
+      cursor: pointer;
+    }
+  </style>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <ul class="tree" id="tree">
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    // move all text into <span>
+    // they occupy exactly the place necessary for the text,
+    for (let li of tree.querySelectorAll('li')) {
+      let span = document.createElement('span');
+      li.prepend(span);
+      span.append(span.nextSibling); // move the text node into span
+    }
+
+    // catch clicks on whole tree
+    tree.onclick = function(event) {
+
+      if (event.target.tagName != 'SPAN') {
+        return;
+      }
+
+      let childrenContainer = target.parentNode.querySelector('ul');
+      if (!childrenContainer) return; // no children
+
+      childrenContainer.hidden = !childrenContainer.hidden;
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html
new file mode 100644
index 00000000..8572517f
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+  <ul class="tree" id="tree">
+    <li>Animals
+      <ul>
+        <li>Mammals
+          <ul>
+            <li>Cows</li>
+            <li>Donkeys</li>
+            <li>Dogs</li>
+            <li>Tigers</li>
+          </ul>
+        </li>
+        <li>Other
+          <ul>
+            <li>Snakes</li>
+            <li>Birds</li>
+            <li>Lizards</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Fishes
+      <ul>
+        <li>Aquarium
+          <ul>
+            <li>Guppy</li>
+            <li>Angelfish</li>
+          </ul>
+        </li>
+        <li>Sea
+          <ul>
+            <li>Sea trout</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
new file mode 100644
index 00000000..bdcf2a51
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Tree menu
+
+Create a tree that shows/hides node children on click:
+
+[iframe border=1 src="solution"]
+
+Requirements:
+
+- Only one event handler (use delegation)
+- A click outside the node title (on an empty space) should not do anything.
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.md b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.md
similarity index 100%
rename from 2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.md
rename to 2-ui/2-events/03-event-delegation/3-sortable-table/solution.md
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html
new file mode 100644
index 00000000..d5d2d640
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    table {
+       border-collapse: collapse;
+     }
+     th, td {
+       border: 1px solid black;
+       padding: 4px;
+     }
+     th {
+       cursor: pointer;
+     }
+     th:hover {
+       background: yellow;
+     }
+  </style>
+</head>
+
+<body>
+
+  <table id="grid">
+    <thead>
+      <tr>
+        <th data-type="number">Age</th>
+        <th data-type="string">Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>5</td>
+        <td>John</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Pete</td>
+      </tr>
+      <tr>
+        <td>12</td>
+        <td>Ann</td>
+      </tr>
+      <tr>
+        <td>9</td>
+        <td>Eugene</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Ilya</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <script>
+
+    grid.onclick = function(e) {
+      if (e.target.tagName != 'TH') return;
+
+      let th = e.target;
+      // if TH, then sort
+      // cellIndex is the number of th:
+      //   0 for the first column
+      //   1 for the second column, etc
+      sortGrid(th.cellIndex, th.dataset.type);
+    };
+
+    function sortGrid(colNum, type) {
+      let tbody = grid.querySelector('tbody');
+
+      let rowsArray = Array.from(tbody.rows);
+
+      // compare(a, b) compares two rows, need for sorting
+      let compare;
+
+      switch (type) {
+        case 'number':
+          compare = function(rowA, rowB) {
+            return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
+          };
+          break;
+        case 'string':
+          compare = function(rowA, rowB) {
+            return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
+          };
+          break;
+      }
+
+      // sort
+      rowsArray.sort(compare);
+
+      tbody.append(...rowsArray);
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html
new file mode 100644
index 00000000..8fac0624
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    table {
+       border-collapse: collapse;
+     }
+     th, td {
+       border: 1px solid black;
+       padding: 4px;
+     }
+     th {
+       cursor: pointer;
+     }
+     th:hover {
+       background: yellow;
+     }
+  </style>
+</head>
+
+<body>
+
+  <table id="grid">
+    <thead>
+      <tr>
+        <th data-type="number">Age</th>
+        <th data-type="string">Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>5</td>
+        <td>John</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Pete</td>
+      </tr>
+      <tr>
+        <td>12</td>
+        <td>Ann</td>
+      </tr>
+      <tr>
+        <td>9</td>
+        <td>Eugene</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Ilya</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
new file mode 100644
index 00000000..ec85a473
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
@@ -0,0 +1,43 @@
+importance: 4
+
+---
+
+# Sortable table
+
+Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+
+Each `<th>` has the type in the attribute, like this:
+
+```html
+<table id="grid">
+  <thead>
+    <tr>
+*!*
+      <th data-type="number">Age</th>
+      <th data-type="string">Name</th>
+*/!*
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>5</td>
+      <td>John</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Ann</td>
+    </tr>
+    ...
+  </tbody>
+</table>
+```
+
+In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+
+Only `"string"` and `"number"` types should be supported.
+
+The working example:
+
+[iframe border=1 src="solution" height=190]
+
+P.S. The table can be big, with any number of rows and columns.
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.md
similarity index 100%
rename from 2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md
rename to 2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.md
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
new file mode 100644
index 00000000..31d0d46b
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      height: 2000px;
+      /* make body scrollable, the tooltip should work after the scroll */
+    }
+
+    .tooltip {
+      position: fixed;
+      padding: 10px 20px;
+      border: 1px solid #b3c9ce;
+      border-radius: 4px;
+      text-align: center;
+      font: italic 14px/1.3 arial, sans-serif;
+      color: #333;
+      background: #fff;
+      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
+    }
+  </style>
+</head>
+
+<body>
+
+  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+
+  <button data-tooltip="the tooltip is longer than the element">Short button</button>
+  <button data-tooltip="HTML<br>tooltip">One more button</button>
+
+  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
+
+
+  <script>
+    let tooltipElem;
+
+    document.onmouseover = function(event) {
+      let target = event.target;
+
+      // if we have tooltip HTML...
+      let tooltipHtml = target.dataset.tooltip;
+      if (!tooltipHtml) return;
+
+      // ...create the tooltip element
+
+      tooltipElem = document.createElement('div');
+      tooltipElem.className = 'tooltip';
+      tooltipElem.innerHTML = tooltipHtml;
+      document.body.append(tooltipElem);
+
+      // position it above the annotated element (top-center)
+      let coords = target.getBoundingClientRect();
+
+      let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
+      if (left < 0) left = 0; // don't cross the left window edge
+
+      let top = coords.top - tooltipElem.offsetHeight - 5;
+      if (top < 0) { // if crossing the top window edge, show below instead
+        top = coords.top + target.offsetHeight + 5;
+      }
+
+      tooltipElem.style.left = left + 'px';
+      tooltipElem.style.top = top + 'px';
+    };
+
+    document.onmouseout = function(e) {
+
+      if (tooltipElem) {
+        tooltipElem.remove();
+        tooltipElem = null;
+      }
+
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
new file mode 100644
index 00000000..57a19d01
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      height: 2000px;
+      /* make body scrollable, the tooltip should work after the scroll */
+    }
+
+    .tooltip {
+      /* some styles for the tooltip, you can use your own instead */
+      position: fixed;
+      padding: 10px 20px;
+      border: 1px solid #b3c9ce;
+      border-radius: 4px;
+      text-align: center;
+      font: italic 14px/1.3 arial, sans-serif;
+      color: #333;
+      background: #fff;
+      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
+    }
+  </style>
+</head>
+
+<body>
+
+  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+
+  <button data-tooltip="the tooltip is longer than the element">Short button</button>
+  <button data-tooltip="HTML<br>tooltip">One more button</button>
+
+  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
+
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git 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
new file mode 100644
index 00000000..fc246228
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
@@ -0,0 +1,36 @@
+importance: 5
+
+---
+
+# Tooltip behavior
+
+Create JS-code for the tooltip behavior.
+
+When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+
+An example of annotated HTML:
+```html
+<button data-tooltip="the tooltip is longer than the element">Short button</button>
+<button data-tooltip="HTML<br>tooltip">One more button</button>
+```
+
+Should work like this:
+
+[iframe src="solution" height=200 border=1]
+
+In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags.
+
+Details:
+
+- 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.
+
+You'll need two events here:
+- `mouseover` triggers when a pointer comes over an element.
+- `mouseout` triggers when a pointer leaves an element.
+
+Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+
+After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+
+P.S. To keep things natural and simple: only one tooltip may show up at a time.
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
new file mode 100644
index 00000000..c999751d
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/article.md
@@ -0,0 +1,272 @@
+
+# Event delegation
+
+Capturing and bubbling allow to implement one of most powerful event handling patterns called *event delegation*.
+
+The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor.
+
+In the handler we get `event.target`, see where the event actually happened and handle it.
+
+Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy.
+
+Here it is:
+
+[iframe height=350 src="bagua" edit link]
+
+The HTML is like this:
+
+```html
+<table>
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+    <td>...<strong>Northwest</strong>...</td>
+    <td>...</td>
+    <td>...</td>
+  </tr>
+  <tr>...2 more lines of this kind...</tr>
+  <tr>...2 more lines of this kind...</tr>
+</table>
+```
+
+The table has 9 cells, but there could be 99 or 9999, doesn't matter.
+
+**Our task is to highlight a cell `<td>` on click.**
+
+Instead of assign an `onclick` handler to each `<td>` (can be many) -- we'll setup the "catch-all" handler on `<table>` element.
+
+It will use `event.target` to get the clicked element and highlight it.
+
+The code:
+
+```js
+let selectedTd;
+
+*!*
+table.onclick = function(event) {
+  let target = event.target; // where was the click?
+
+  if (target.tagName != 'TD') return; // not on TD? Then we're not interested
+
+  highlight(target); // highlight it
+};
+*/!*
+
+function highlight(td) {
+  if (selectedTd) { // remove the existing highlight if any
+    selectedTd.classList.remove('highlight');
+  }
+  selectedTd = td;
+  selectedTd.classList.add('highlight'); // highlight the new td
+}
+```
+
+Such a code doesn't care how many cells there are in the table. We can add/remove `<td>` dynamically at any time and the highlighting will still work.
+
+Still, there's a drawback.
+
+The click may occur not on the `<td>`, but inside it.
+
+In our case if we take a look inside the HTML, we can see nested tags inside `<td>`, like `<strong>`:
+
+```html
+<td>
+*!*
+  <strong>Northwest</strong>
+*/!*
+  ...
+</td>
+```
+
+Naturally, if a click happens on that `<strong>` then it becomes the value of `event.target`.
+
+![](bagua-bubble.png)
+
+In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `<td>` or not.
+
+Here's the improved code:
+
+```js
+table.onclick = function(event) {
+  let td = event.target.closest('td'); // (1)
+
+  if (!td) return; // (2)
+
+  if (!table.contains(td)) return; // (3)
+
+  highlight(td); // (4)
+};
+```
+
+Explanations:
+1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `<td>` on the way up from the source element.
+2. If `event.target` is not inside any `<td>`, then the call returns `null`, and we don't have to do anything.
+3. In case of nested tables, `event.target` may be a `<td>` outside of the current table. So we check if that's actually *our* `<td>`.
+4. And, if it is so, highlight it.
+
+## Delegation example: actions in markup
+
+The event delegation may be used to optimize event handling. We use a single handler for similar actions on many elements. Like we did it for highlighting `<td>`.
+
+But we can also use a single handler as an entry point for many different things.
+
+For instance, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`....
+
+The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call:
+
+```html
+<button *!*data-action="save"*/!*>Click to Save</button>
+```
+
+The handler reads the attribute and executes the method. Take a look at the working example:
+
+```html autorun height=60 run
+<div id="menu">
+  <button data-action="save">Save</button>
+  <button data-action="load">Load</button>
+  <button data-action="search">Search</button>
+</div>
+
+<script>
+  class Menu {
+    constructor(elem) {
+      this._elem = elem;
+      elem.onclick = this.onClick.bind(this); // (*)
+    }
+
+    save() {
+      alert('saving');
+    }
+
+    load() {
+      alert('loading');
+    }
+
+    search() {
+      alert('searching');
+    }
+
+    onClick(event) {
+*!*
+      let action = event.target.dataset.action;
+      if (action) {
+        this[action]();
+      }
+*/!*
+    };
+  }
+
+  new Menu(menu);
+</script>
+```
+
+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?
+
+```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.
++ The HTML structure is flexible, we can add/remove buttons at any time.
+```
+
+We could also use classes `.action-save`, `.action-load`, but an attribute `data-action` is better semantically. And we can use it in CSS rules too.
+
+## The "behavior" pattern
+
+We can also use event delegation to add "behaviors" to elements *declaratively*, with special attributes and classes.
+
+The pattern has two parts:
+1. We add a special attribute to an element.
+2. A document-wide handler tracks events, and if an event happens on an attributed element -- performs the action.
+
+### Counter
+
+For instance, here the attribute `data-counter` adds a behavior: "increase on click" to buttons:
+
+```html run autorun height=60
+Counter: <input type="button" value="1" data-counter>
+One more counter: <input type="button" value="2">
+
+<script>
+  document.addEventListener('click', function(event) {
+
+    if (event.target.dataset.counter != undefined) { // if the attribute exists...
+      event.target.value++;
+    }
+
+  });
+</script>
+```
+
+If we click a button -- its value is increased. Not buttons, but the general approach is important here.
+
+There can be as many attributes with `data-counter` as we want. We can add new ones to HTML at any moment. Using the event delegation we "extended" HTML, added an attribute that describes a new behavior.
+
+```warn header="For document-level handlers -- always `addEventListener`"
+When we assign an event handler to the `document` object, we should always use `addEventListener`, not `document.onclick`, because the latter will cause conflicts: new handlers overwrite old ones.
+
+For real projects it's normal that there are many handlers on `document` set by different parts of the code.
+```
+
+### Toggler
+
+One more example. A click on an element with the attribute `data-toggle-id` will show/hide the element with the given `id`:
+
+```html autorun run height=60
+<button *!*data-toggle-id="subscribe-mail"*/!*>
+  Show the subscription form
+</button>
+
+<form id="subscribe-mail" hidden>
+  Your mail: <input type="email">
+</form>
+
+<script>
+*!*
+  document.addEventListener('click', function(event) {
+    let id = event.target.dataset.toggleId;
+    if (!id) return;
+
+    let elem = document.getElementById(id);
+
+    elem.hidden = !elem.hidden;
+  });
+*/!*
+</script>
+```
+
+Let's note once again what we did. Now, to add toggling functionality to an element -- there's no need to know JavaScript, just use the attribute `data-toggle-id`.
+
+That may become really convenient -- no need to write JavaScript for every such element. Just use the behavior. The document-level handler makes it work for any element of the page.
+
+We can combine multiple behaviors on a single element as well.
+
+The "behavior" pattern can be an alternative of 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.
+
+The algorithm:
+
+1. Put a single handler on the container.
+2. In the handler -- check the source element `event.target`.
+3. If the event happened inside an element that interests us, then handle the event.
+
+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.
+```
+
+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.
+```
diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble.png b/2-ui/2-events/03-event-delegation/bagua-bubble.png
new file mode 100644
index 00000000..795a6a50
Binary files /dev/null and b/2-ui/2-events/03-event-delegation/bagua-bubble.png differ
diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png b/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png
new file mode 100644
index 00000000..9d7c862d
Binary files /dev/null and b/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/bagua.css b/2-ui/2-events/03-event-delegation/bagua.view/bagua.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/bagua.css
rename to 2-ui/2-events/03-event-delegation/bagua.view/bagua.css
diff --git a/2-ui/2-events/03-event-delegation/bagua.view/index.html b/2-ui/2-events/03-event-delegation/bagua.view/index.html
new file mode 100644
index 00000000..685b35f9
--- /dev/null
+++ b/2-ui/2-events/03-event-delegation/bagua.view/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+
+<body>
+  <link type="text/css" rel="stylesheet" href="bagua.css">
+
+
+  <table id="bagua-table">
+    <tr>
+      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+    </tr>
+    <tr>
+      <td class="nw"><strong>Northwest</strong>
+        <br>Metal
+        <br>Silver
+        <br>Elders
+      </td>
+      <td class="n"><strong>North</strong>
+        <br>Water
+        <br>Blue
+        <br>Change
+      </td>
+      <td class="ne"><strong>Northeast</strong>
+        <br>Earth
+        <br>Yellow
+        <br>Direction
+      </td>
+    </tr>
+    <tr>
+      <td class="w"><strong>West</strong>
+        <br>Metal
+        <br>Gold
+        <br>Youth
+      </td>
+      <td class="c"><strong>Center</strong>
+        <br>All
+        <br>Purple
+        <br>Harmony
+      </td>
+      <td class="e"><strong>East</strong>
+        <br>Wood
+        <br>Blue
+        <br>Future
+      </td>
+    </tr>
+    <tr>
+      <td class="sw"><strong>Southwest</strong>
+        <br>Earth
+        <br>Brown
+        <br>Tranquility
+      </td>
+      <td class="s"><strong>South</strong>
+        <br>Fire
+        <br>Orange
+        <br>Fame
+      </td>
+      <td class="se"><strong>Southeast</strong>
+        <br>Wood
+        <br>Green
+        <br>Romance
+      </td>
+    </tr>
+
+  </table>
+
+  <script>
+    let table = document.getElementById('bagua-table');
+
+    let selectedTd;
+
+    table.onclick = function(event) {
+      let target = event.target;
+
+      while (target != this) {
+        if (target.tagName == 'TD') {
+          highlight(target);
+          return;
+        }
+        target = target.parentNode;
+      }
+    }
+
+    function highlight(node) {
+      if (selectedTd) {
+        selectedTd.classList.remove('highlight');
+      }
+      selectedTd = node;
+      selectedTd.classList.add('highlight');
+    }
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git 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
new file mode 100644
index 00000000..2862e600
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md
@@ -0,0 +1,39 @@
+When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content.
+
+For `onclick="handler()"` the function will be:
+
+```js
+function(event) {
+  handler() // the content of onclick
+}
+```
+
+Now we can see that the value returned by `handler()` is not used and does not affect the result.
+
+The fix is simple:
+
+```html run
+<script>
+  function handler() {
+    alert("...");
+    return false;
+  }
+</script>
+
+<a href="http://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
+```
+
+Also we can use `event.preventDefault()`, like this:
+
+```html run
+<script>
+*!*
+  function handler(event) {
+    alert("...");
+    event.preventDefault();
+  }
+*/!*
+</script>
+
+<a href="http://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
+```
diff --git 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
new file mode 100644
index 00000000..8fa4fb29
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md
@@ -0,0 +1,22 @@
+importance: 3
+
+---
+
+# Why "return false" doesn't work?
+
+Why in the code below `return false` doesn't work at all?
+
+```html autorun run
+<script>
+  function handler() {
+    alert( "..." );
+    return false;
+  }
+</script>
+
+<a href="http://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.
+
+How to fix?
diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md
new file mode 100644
index 00000000..25079cb8
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md
@@ -0,0 +1,5 @@
+That's a great use of the event delegation pattern.
+
+In real life instead of asking we can send a "logging" request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable).
+
+All we need is to catch the `contents.onclick` and use `confirm` to ask the user. A good idea would be to use `link.getAttribute('href')` instead of `link.href` for the URL. See the solution for details.
diff --git 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
new file mode 100644
index 00000000..90aecd9d
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #contents {
+      padding: 5px;
+      border: 1px green solid;
+    }
+  </style>
+</head>
+
+<body>
+
+  <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?
+    </p>
+  </fieldset>
+
+  <script>
+    contents.onclick = function(event) {
+
+      function handleLink(href) {
+        let isLeaving = confirm(`Leave for ${href}?`);
+        if (!isLeaving) return false;
+      }
+
+      let target = event.target.closest('a');
+
+      if (target && contents.contains(target)) {
+        return handleLink(target.getAttribute('href'));
+      }
+    };
+  </script>
+  
+</body>
+</html>
diff --git 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
new file mode 100644
index 00000000..b88834c9
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #contents {
+      padding: 5px;
+      border: 1px green solid;
+    }
+  </style>
+</head>
+
+<body>
+
+  <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?
+    </p>
+  </fieldset>
+
+</body>
+</html>
diff --git 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
new file mode 100644
index 00000000..c03e5f8e
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# Catch links in the element
+
+Make all links inside the element with `id="contents"` ask the user if he really wants to leave. And if he doesn't then don't follow.
+
+Like this:
+
+[iframe height=100 border=1 src="solution"]
+
+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.
+- The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md
new file mode 100644
index 00000000..5ff60b5c
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md
@@ -0,0 +1 @@
+The solution is to assign the handler to the container and track clicks. If a click is on the `<a>` link, then change `src` of `#largeImg` to the `href` of the thumbnail.
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/gallery.css b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/gallery.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/gallery.css
rename to 2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/gallery.css
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html
new file mode 100644
index 00000000..e0de1563
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Gallery</title>
+  <link rel="stylesheet" href="gallery.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+
+  <ul id="thumbs">
+    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
+    <li>
+      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
+    </li>
+  </ul>
+
+  <script>
+    thumbs.onclick = function(event) {
+      let thumbnail = event.target.closest('a');
+
+      if (!thumbnail) return;
+      showThumbnail(target.href, target.title);
+      event.preventDefault();
+    }
+
+    function showThumbnail(href, title) {
+      largeImg.src = href;
+      largeImg.alt = title;
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/gallery.css b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/gallery.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/gallery.css
rename to 2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/gallery.css
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html
new file mode 100644
index 00000000..c488ddcc
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Gallery</title>
+  <link rel="stylesheet" href="gallery.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+
+  <ul id="thumbs">
+    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
+    <li>
+      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
+    </li>
+  </ul>
+
+</body>
+</html>
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
new file mode 100644
index 00000000..f7571cc8
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Image gallery
+
+Create an image gallery where the main image changes by the click on a thumbnail.
+
+Like this:
+
+[iframe src="solution" height=600]
+
+P.S. Use event delegation.
diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md
new file mode 100644
index 00000000..cb5c6ce9
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/article.md
@@ -0,0 +1,221 @@
+# Browser default actions
+
+Many events automatically lead to browser actions.
+
+For instance:
+
+- A click on a link -- initiates going to its URL.
+- A click on submit button inside a form -- 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, often we don't want browser actions. Fortunately, it can be prevented.
+
+[cut]
+
+## Preventing browser actions
+
+There are two ways to tell the browser we don't want it to act:
+
+- The main way is to use the `event` object. There's a method `event.preventDefault()`.
+- If the handler is assigned using `on<event>` (not by `addEventListener`), then we can just return `false` from it.
+
+In the example below there a click to links don't lead to URL change:
+
+```html autorun height=60 no-beautify
+<a href="/" onclick="return false">Click here</a>
+or
+<a href="/" onclick="event.preventDefault()">here</a>
+```
+
+```warn header="Not necessary to return `true`"
+The value returned by an event handler is usually ignored.
+
+The only exception -- is `return false` from a handler assigned using `on<event>`.
+
+In all other cases, the return is not needed and it's not processed anyhow.
+```
+
+### Example: the menu
+
+Consider a site menu, like this:
+
+```html
+<ul id="menu" class="menu">
+  <li><a href="/html">HTML</a></li>
+  <li><a href="/javascript">JavaScript</a></li>
+  <li><a href="/css">CSS</a></li>
+</ul>
+```
+
+Here's how it looks with some CSS:
+
+[iframe height=70 src="menu" link edit]
+
+Menu items are links `<a>`, not buttons. There are several benefits, for instance:
+
+- Many people like to use "right click" -- "open in a new window". If we use `<button>` or `<span>`, that doesn't work.
+- Search engines follow `<a href="...">` links while indexing.
+
+So we use `<a>` in the markup. But normally we intend to handle clicks in JavaScript. So we should prevent the default browser action.
+
+Like here:
+
+```js
+menu.onclick = function(event) {
+  if (event.target.nodeName != 'A') return;
+
+  let href = event.target.getAttribute('href');
+  alert( href ); // ...can be loading from the server, UI generation etc
+
+*!*
+  return false; // prevent browser action (don't go to the URL)
+*/!*
+};
+```
+
+If we omit `return false`, then after our code executes the browser will do its "default action" -- following to the URL in `href`.
+
+By the way, using event delegation here makes our menu flexible. We can add nested lists and style them using CSS to "slide down".
+
+
+## Prevent futher events
+
+Certain events flow one into another. If we prevent the first event, there will be no second.
+
+For instance, `mousedown` on an `<input>` field leads to focusing in it, and the `focus` event. If we prevent the `mousedown` event, there's no focus.
+
+Try to click on the first `<input>` below -- the `focus` event happens. That's normal.
+
+But if you click the second one, there's no focus.
+
+```html run autorun
+<input value="Focus works" onfocus="this.value=''">
+<input *!*onmousedown="return false"*/!* onfocus="this.value=''" value="Click me">
+```
+
+That's because the browser action is canceled on `mousedown`. The focusing is still possible if we use another way to enter the input. For instance, the `key:Tab` key to switch from the 1st input into the 2nd. But not with the mouse click any more.
+
+
+## event.defaultPrevented
+
+The property `event.defaultPrevented` is `true` if the default action was prevented, and `false` otherwise.
+
+There's an interesting use case for it.
+
+You remember in the chapter <info:bubbling-and-capturing> we talked about `event.stopPropagation()`  and why stopping bubbling is bad?
+
+Sometimes we can use `event.defaultPrevented` instead.
+
+Let's see a practical example where stopping the bubbling looks necessary, but actually we can do well without it.
+
+By default the browser on `contextmenu` event (right mouse click) shows a context menu with standard options. We can prevent it and show our own, like this:
+
+```html autorun height=50 no-beautify run
+<button>Right-click for browser context menu</button>
+
+<button *!*oncontextmenu="alert('Draw our menu'); return false"*/!*>
+  Right-click for our context menu
+</button>
+```
+
+Now let's say we want to implement our own document-wide context menu, with our options. And inside the document we may have other elements with their own context menus:
+
+```html autorun height=80 no-beautify run
+<p>Right-click here for the document context menu</p>
+<button id="elem">Right-click here for the button context menu</button>
+
+<script>
+  elem.oncontextmenu = function(event) {
+    event.preventDefault();
+    alert("Button context menu");
+  };
+
+  document.oncontextmenu = function(event) {
+    event.preventDefault();
+    alert("Document context menu");
+  };
+</script>
+```
+
+The problem is that when we click on `elem`, we get two menus: the button-level and (the event bubbles up) the document-level menu.
+
+How to fix it? One of solutions is to think like: "We fully handle the event in the button handler, let's stop it" and use `event.stopPropagation()`:
+
+```html autorun height=80 no-beautify run
+<p>Right-click for the document menu</p>
+<button id="elem">Right-click for the button menu (fixed with event.stopPropagation)</button>
+
+<script>
+  elem.oncontextmenu = function(event) {
+    event.preventDefault();
+*!*
+    event.stopPropagation();
+*/!*
+    alert("Button context menu");
+  };
+
+  document.oncontextmenu = function(event) {
+    event.preventDefault();
+    alert("Document context menu");
+  };
+</script>
+```
+
+Now the button-level menu works as intended. But the price is high. We forever deny access to information about right-clicks for any outer code, including counters that gather statistics and so on. That's quite unwise.
+
+An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it.
+
+
+```html autorun height=80 no-beautify run
+<p>Right-click for the document menu (fixed with event.defaultPrevented)</p>
+<button id="elem">Right-click for the button menu</button>
+
+<script>
+  elem.oncontextmenu = function(event) {
+    event.preventDefault();
+    alert("Button context menu");
+  };
+
+  document.oncontextmenu = function(event) {
+*!*
+    if (event.defaultPrevented) return;
+*/!*
+
+    event.preventDefault();
+    alert("Document context menu");
+  };
+</script>
+```
+
+Now everything also works correctly. If we have nested elements, and each of them has a context menu of its own, that would also work. Just make sure to check for `event.defaultPrevented` in each `contextmenu` handler.
+
+```smart header="event.stopPropagation() and event.preventDefault()"
+As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (also known as `return false`) are two different things. They are not related to each other.
+```
+
+```smart header="Nested context menus architecture"
+There are also alternative ways to implement nested context menus. One of them is to have a special global object with a method that handles `document.oncontextmenu`, and also methods that allow to store various "lower-level" handlers in it.
+
+The object will catch any right-click, look through stored handlers and run the appropriate one.
+
+But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler.
+```
+
+
+## Summary
+
+There are many default browser actions:
+
+- `mousedown` -- starts the selection (move the mouse to select).
+- `click` on `<input type="checkbox">` -- checks/unchecks the `input`.
+- `submit` -- clicking an `<input type="submit">` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it.
+- `wheel` -- rolling a mouse wheel event has scrolling as the default action.
+- `keydown` -- pressing a key may lead to adding a character into a field, or other actions.
+- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu.
+- ...there are more...
+
+All the default actions can be prevented if we want to handle the event exclusively by JavaScript.
+
+To prevent a default action -- use either `event.preventDefault()` or  `return false`. The second method works only for handlers assigned with `on<event>`.
+
+If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`.
diff --git a/2-ui/2-events/04-default-browser-action/menu.view/index.html b/2-ui/2-events/04-default-browser-action/menu.view/index.html
new file mode 100644
index 00000000..48a0bf5e
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/menu.view/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css" />
+</head>
+
+<body>
+
+  <ul id="menu" class="menu">
+    <li><a href="/html">HTML</a></li>
+    <li><a href="/javascript">JavaScript</a></li>
+    <li><a href="/css">CSS</a></li>
+  </ul>
+
+  <script src="menu.js"></script>
+
+</body>
+
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.css b/2-ui/2-events/04-default-browser-action/menu.view/menu.css
old mode 100755
new mode 100644
similarity index 100%
rename from 2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.css
rename to 2-ui/2-events/04-default-browser-action/menu.view/menu.css
diff --git a/2-ui/2-events/04-default-browser-action/menu.view/menu.js b/2-ui/2-events/04-default-browser-action/menu.view/menu.js
new file mode 100644
index 00000000..69025c13
--- /dev/null
+++ b/2-ui/2-events/04-default-browser-action/menu.view/menu.js
@@ -0,0 +1,8 @@
+menu.onclick = function(event) {
+  if (event.target.nodeName != 'A') return;
+
+  let href = event.target.getAttribute('href');
+  alert(href);
+
+  return false; // prevent url change
+};
diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
new file mode 100644
index 00000000..25f2fcec
--- /dev/null
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -0,0 +1,289 @@
+# Dispatching custom events
+
+We can not only assign handlers, but also generate events form JavaScript.
+
+Custom events can be used to create "graphical components". For instance, a root element of the menu may trigger events telling what happens with the menu: `open` (menu open),  `select` (an item is selected) and so on.
+
+Also we can generate built-in events like `click`, `mousedown` etc, that may be good for testing.
+
+[cut]
+
+## Event constructor
+
+Events form a hierarchy, just like DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class.
+
+We can create `Event` objects like this:
+
+```js
+let event = new Event(event type[, options]);
+```
+
+Arguments:
+
+- *event type* -- may be any string, like `"click"` or our own like `"hey-ho!"`.
+- *options* -- the object with two optional properties:
+  - `bubbles: true/false` -- if `true`, then the event bubbles.
+  - `cancelable: true/false` -- if `true`, then the "default action"  may be prevented. Later we'll see what it means for custom events.
+
+  By default both are false: `{bubbles: false, cancelable: false}`.
+
+## dispatchEvent
+
+After an event object is created, we should "run" it on an element using the call  `elem.dispatchEvent(event)`.
+
+Then handlers react on it as if it were a regular built-in event. If the event was created with the `bubbles` flag, then it bubbles.
+
+In the example below the `click` event is initiated in JavaScript. The handler works same way as if the button was clicked:
+
+```html run no-beautify
+<button id="elem" onclick="alert('Click!');">Autoclick</button>
+
+<script>
+  let event = new Event("click");
+  elem.dispatchEvent(event);
+</script>
+```
+
+```smart header="event.isTrusted"
+There is a way to tell a "real" user event from a script-generated one.
+
+The property `event.isTrusted` is `true` for events that come from real user actions and `false` for script-generated events.
+```
+
+## Bubbling example
+
+We can create a bubbling event with the name `"hello"` and catch it on `document`.
+
+All we need is to set `bubbles` to `true`:
+
+```html run no-beautify
+<h1 id="elem">Hello from the script!</h1>
+
+<script>
+  // catch on document...
+  document.addEventListener("hello", function(event) { // (1)
+    alert("Hello from " + event.target.tagName); // Hello from H1
+  });
+
+  // ...dispatch on elem!
+  let event = new Event("hello", {bubbles: true}); // (2)
+  elem.dispatchEvent(event);
+</script>
+```
+
+Notes:
+
+1. We should use `addEventListener` for our custom events, because `on<event>` only exists for built-in events, `document.onhello` doesn't work.
+2. Must set `bubbles:true`, otherwise the event won't bubble up.
+
+The bubbling mechanics is the same for built-in (`click`) and custom (`hello`) events. There are also capturing and bubbling stages.
+
+## MouseEvent, KeyboardEvent and others
+
+Here's a short list of classes for UI Events from the [UI Event specification](https://www.w3.org/TR/uievents):
+
+- `UIEvent`
+- `FocusEvent`
+- `MouseEvent`
+- `WheelEvent`
+- `KeyboardEvent`
+- ...
+
+We should use them instead of `new Event` if we want to create such events. For instance, `new MouseEvent("click")`.
+
+The right constructor allows to specify standard properties for that type of event.
+
+Like `clientX/clientY` for a mouse event:
+
+```js run
+let event = new MouseEvent("click", {
+  bubbles: true,
+  cancelable: true,
+  clientX: 100,
+  clientY: 100
+});
+
+*!*
+alert(event.clientX); // 100
+*/!*
+```
+
+Please note: the generic `Event` constructor does not allow that.
+
+Let's try:
+
+```js run
+let event = new Event("click", {
+  bubbles: true, // only bubbles and cancelable
+  cancelable: true, // work in the Event constructor
+  clientX: 100,
+  clientY: 100
+});
+
+*!*
+alert(event.clientX); // undefined, the unknown property is ignored!
+*/!*
+```
+
+Technically, we can work around that by assigning directly `event.clientX=100` after creation. So that's a matter of convenience and following the rules. Browser-generated events always have the right type.
+
+The full list of properties for different UI events is in the specification, for instance  [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+
+## Custom events
+
+For our own, custom events like `"hello"` we should use `new CustomEvent`. Technically [CustomEvent](https://dom.spec.whatwg.org/#customevent) is the same as `Event`, with one exception.
+
+In the second argument (object) we can add an additional property `detail` for any custom information that we want to pass with the event.
+
+For instance:
+
+```html run refresh
+<h1 id="elem">Hello for John!</h1>
+
+<script>
+  // additional details come with the event to the handler
+  elem.addEventListener("hello", function(event) {
+    alert(*!*event.detail.name*/!*);
+  });
+
+  elem.dispatchEvent(new CustomEvent("hello", {
+*!*
+    detail: { name: "John" }
+*/!*
+  });
+</script>
+```
+
+The `detail` property can have any data. Technically we could live without, because we can assign any properties into a regular `new Event` object after its creation. But `CustomEvent` provides the special `detail` field for it to evade conflicts with other event properties.
+
+The event class tells something about "what kind of event" it is, and if the event is custom, then we should use `CustomEvent` just to be clear about what it is.
+
+## event.preventDefault()
+
+We can call `event.preventDefault()` on a script-generated event if `cancelable:true` flag is specified.
+
+Of course, if the event has a non-standard name, then it's not known to the browser, and there's no "default browser action" for it.
+
+But the event-generating code may plan some actions after `dispatchEvent`.
+
+The call of `event.preventDefault()` is a way for the handler to send a signal that those actions shouldn't be performed.
+
+In that case the call to `elem.dispatchEvent(event)` returns `false`. And the event-generating code knows that the processing shouldn't continue.
+
+For instance, in the example below there's a `hide()` function. It generates the `"hide"` event on the element `#rabbit`, notifying all interested parties that the rabbit is going to hide.
+
+A handler set by `rabbit.addEventListener('hide',...)` will learn about that and, if it wants, can prevent that action by calling `event.preventDefault()`. Then the rabbit won't hide:
+
+```html run refresh
+<pre id="rabbit">
+  |\   /|
+   \|_|/
+   /. .\
+  =\_Y_/=
+   {>o<}
+</pre>
+
+<script>
+  // hide() will be called automatically in 2 seconds
+  function hide() {
+    let event = new CustomEvent("hide", {
+      cancelable: true // without that flag preventDefault doesn't work
+    });
+    if (!rabbit.dispatchEvent(event)) {
+      alert('the action was prevented by a handler');
+    } else {
+      rabbit.hidden = true;
+    }
+  }
+
+  rabbit.addEventListener('hide', function(event) {
+    if (confirm("Call preventDefault?")) {
+      event.preventDefault();
+    }
+  });
+
+  // hide in 2 seconds
+  setTimeout(hide, 2000);
+
+</script>
+```
+
+
+## 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.
+
+The exception is when one event is initiated from within another one.
+
+Then the control jumps to the nested event handler, and after it goes back.
+
+For instance, here the nested `menu-open` event is processed synchronously, during the `onclick`:
+
+```html run
+<button id="menu">Menu (click me)</button>
+
+<script>
+  // 1 -> nested -> 2
+  menu.onclick = function() {
+    alert(1);
+
+    // alert("nested")
+    menu.dispatchEvent(new CustomEvent("menu-open", {
+      bubbles: true
+    }));
+
+    alert(2);
+  };
+
+  document.addEventListener('menu-open', () => alert('nested'))
+</script>
+```    
+
+Please note that the nested event `menu-open` bubbles up and is handled on the `document`. The propagation of the nested event is fully finished before the processing gets back to the outer code (`onclick`).
+
+That's not only about `dispatchEvent`, there are other cases. JavaScript in an event handler can call methods that lead to other events -- they are too processed synchronously.
+
+If we don't like it, we can either put the `dispatchEvent` (or other event-triggering call) at the end of `onclick` or, if inconvenient, wrap it in `setTimeout(...,0)`:
+
+```html run
+<button id="menu">Menu (click me)</button>
+
+<script>
+  // 1 -> 2 -> nested
+  menu.onclick = function() {
+    alert(1);
+
+    // alert(2)
+    setTimeout(() => menu.dispatchEvent(new CustomEvent("menu-open", {
+      bubbles: true
+    })), 0);
+
+    alert(2);
+  };
+
+  document.addEventListener('menu-open', () => alert('nested'))
+</script>
+```    
+
+## Summary
+
+To generate an event, we first need to create an event object.
+
+The generic `Event(name, options)` constructor accepts an arbitrary event name and the `options` object with two properties:
+  - `bubbles: true` if the event should bubble.
+  - `cancelable: true` is the `event.preventDefault()` should work.
+
+Other constructors of native events like `MouseEvent`, `KeyboardEvent` and so on accept properties specific to that event type. For instance, `clientX` for mouse events.
+
+For custom events we should use `CustomEvent` constructor. It has an additional option named `detail`, we should assign the event-specific data to it. Then all handlers can access it as `event.detail`.
+
+Despite the technical possibility to generate browser events like `click` or `keydown`, we should use with the great care.
+
+We shouldn't generate browser events as a hacky way to run handlers. That's a bad architecture most of the time.
+
+Native events might be generated:
+
+- As a dirty hack to make 3rd-party libraries work the needed way, if they don't provide other means of interaction.
+- For automated testing, to "click the button" in the script and see if the interface reacts correctly.
+
+Custom events with our own names are often generated for architectural purposes, to signal what happens inside our menus, sliders, carousels etc.
diff --git a/2-ui/2-events/index.md b/2-ui/2-events/index.md
new file mode 100644
index 00000000..07f06fdd
--- /dev/null
+++ b/2-ui/2-events/index.md
@@ -0,0 +1,3 @@
+# Introduction into Events
+
+An introduction to browser events, event properties and handling patterns.
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html
deleted file mode 100755
index 2e6a903f..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .selected {
-      background: #0f0;
-    }
-    
-    li {
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  Клик на элементе выделяет только его.
-  <br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
-  <br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
-  <br>
-
-  <ul>
-    <li>Кристофер Робин</li>
-    <li>Винни-Пух</li>
-    <li>Ослик Иа</li>
-    <li>Мудрая Сова</li>
-    <li>Кролик. Просто кролик.</li>
-  </ul>
-
-  <script>
-    var ul = document.querySelector('ul');
-
-    var lastClickedLi = null;
-
-    // --- обработчики ---
-
-    ul.onclick = function(event) {
-      var target = event.target;
-
-      // возможно, клик был внутри списка UL, но вне элементов LI
-      if (target.tagName != "LI") return;
-
-      // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
-      if (event.metaKey || event.ctrlKey) {
-        toggleSelect(target);
-      } else if (event.shiftKey) {
-        selectFromLast(target);
-      } else {
-        selectSingle(target);
-      }
-
-      lastClickedLi = target;
-    }
-
-    ul.onmousedown = function() {
-      return false;
-    };
-
-    // --- функции для выделения ---
-
-    function toggleSelect(li) {
-      li.classList.toggle('selected');
-    }
-
-    function selectFromLast(target) {
-      var startElem = lastClickedLi || ul.children[0];
-
-      var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
-
-      if (isLastClickedBefore) {
-        for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
-          elem.classList.add('selected');
-        }
-      } else {
-        for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
-          elem.classList.add('selected');
-        }
-      }
-      elem.classList.add('selected');
-    }
-
-
-
-
-    function deselectAll() {
-      for (var i = 0; i < ul.children.length; i++) {
-        ul.children[i].classList.remove('selected');
-      }
-    }
-
-    function selectSingle(li) {
-      deselectAll();
-      li.classList.add('selected');
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html
deleted file mode 100755
index f4459f34..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .selected {
-      background: #0f0;
-    }
-    
-    li {
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  Клик на элементе выделяет только его.
-  <br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
-  <br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
-  <br>
-
-  <ul>
-    <li>Кристофер Робин</li>
-    <li>Винни-Пух</li>
-    <li>Ослик Иа</li>
-    <li>Мудрая Сова</li>
-    <li>Кролик. Просто кролик.</li>
-  </ul>
-
-  <script>
-    // ... ваш код
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md
deleted file mode 100644
index e77f7e00..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Список с выделением
-
-[importance 5]
-
-Эта задача состоит из трёх частей.
-
-<ol>
-<li>Сделайте список, элементы которого можно выделять кликом.</li>
-<li>Добавьте мульти-выделение. Если клик с нажатым <code class="key">Ctrl</code> (<code class="key">Cmd</code> под Mac), то элемент добавляется-удаляется из выделенных.</li>
-<li>Добавьте выделение промежутков. Если происходит клик с нажатым <code class="key">Shift</code>, то к выделению добавляется промежуток элементов от предыдущего кликнутого до этого. При этом не важно, какое именно действие делал предыдущий клик.
-Это похоже на то, как работает файловый менеджер в ряде ОС, но чуть проще, так как конкретная реализация выделений различается у разных ОС, и её точное воспроизведение не входит в эту задачу.</li>
-</ol>
-
-Демо:
-[iframe border="1" src="solution"]
-
-
-
-P.S. В этой задаче можно считать, что в элементах списка может быть только текст, без вложенных тегов. 
-P.P.S. Обработка одновременного нажатия <code class="key">Ctrl</code>(<code class="key">Cmd</code>) и <code class="key">Shift</code> может быть любой.
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md
deleted file mode 100644
index 236d687d..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Подсказка
-
-У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.
-
-Самый глубокий узел на координатах можно получить вызовом [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint).
-
-...Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?
-
-# Подсказка 2
-
-Можно при клике на `LI` сделать временный `SPAN` и переместить в него текстовый узел-заголовок.
-
-После этого проверить, попал ли клик в него и вернуть всё как было.
-
-```js
-// 1) заворачиваем текстовый узел в SPAN
-
-// 2) проверяем
-var elem = document.elementFromPoint(e.clientX, e.clientY);
-var isClickOnTitle = (elem == span);
-
-// 3) возвращаем текстовый узел обратно из SPAN
-```
-
-На шаге 3 текстовый узел вынимается обратно из `SPAN`, всё возвращается в исходное состояние.
-
-# Решение
-
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html
deleted file mode 100755
index abbd7c96..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .tree li {
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="tree" id="tree">
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var tree = document.getElementById('tree');
-
-    /* проверить на попадание события в заголовок LI */
-    function isOverTitle(evt, li) {
-      /* обернуть заголовок в span */
-      var titleWrapper = document.createElement('span');
-      var titleTextNode = li.firstChild; // <li>TITLE...
-      li.insertBefore(titleWrapper, titleTextNode); // <li><span></span>TITLE
-      titleWrapper.appendChild(titleTextNode); // <li><span>TITLE</span>
-
-      /* определить, был ли клик по координатам - в SPAN ?*/
-      var isClickOnTitle = (document.elementFromPoint(evt.clientX, evt.clientY) == titleWrapper);
-
-      /* в любом случае вернуть заголовок в текст обратно перед тем как идти дальше */
-      titleWrapper.removeChild(titleWrapper.firstChild); // <li><span></span>
-      li.replaceChild(titleTextNode, titleWrapper); // <li>TITLE...
-
-      return isClickOnTitle;
-    }
-
-    /* отслеживаем клики на всём дереве */
-    tree.onclick = function(evt) {
-      var evt = evt || event;
-      var target = evt.target || evt.srcElement;
-
-
-      if (!isOverTitle(evt, target)) {
-        return; // клик не на заголовке
-      }
-
-      /* раскрыть-закрыть детей */
-      var node = target.getElementsByTagName('ul')[0];
-      if (!node) return; // нет детей
-
-      node.style.display = node.style.display ? '' : 'none';
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html
deleted file mode 100755
index 9fe42c47..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .tree li {
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="tree" id="tree">
-    <li>Животные
-      <ul>
-        <li>Млекопитающие
-          <ul>
-            <li>Коровы</li>
-            <li>Ослы</li>
-            <li>Собаки</li>
-            <li>Тигры</li>
-          </ul>
-        </li>
-        <li>Другие
-          <ul>
-            <li>Змеи</li>
-            <li>Птицы</li>
-            <li>Ящерицы</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Рыбы
-      <ul>
-        <li>Аквариумные
-          <ul>
-            <li>Гуппи</li>
-            <li>Скалярии</li>
-          </ul>
-
-        </li>
-        <li>Морские
-          <ul>
-            <li>Морская форель</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    var tree = document.getElementById('tree');
-
-    tree.onclick = function(evt) {
-      var evt = evt || event;
-      var target = evt.target || evt.srcElement;
-
-      /* раскрыть-закрыть детей */
-      var node = target.getElementsByTagName('ul')[0];
-      if (!node) return; // нет детей
-
-      node.style.display = node.style.display ? '' : 'none';
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md
deleted file mode 100644
index da95559f..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Дерево: проверка клика на заголовке
-
-[importance 3]
-
-Есть кликабельное JavaScript-дерево UL/LI (см. задачу [](/task/sliding-tree)).
-
-```html
-<ul>
-  <li>Млекопитающие
-    <ul>
-      <li>Коровы</li>
-      <li>Ослы</li>
-      <li>Собаки</li>
-      <li>Тигры</li>
-    </ul>
-  </li>
-</ul>
-```
-
-При клике на заголовке его список его детей скрывается-раскрывается.
-Выглядит это так: (кликайте на заголовки)
-
-[iframe edit link border="1" src="source"]
-
-Однако, проблема в том, что скрытие-раскрытие происходит даже при клике *вне заголовка*, на пустом пространстве справа от него.
-
-**Как скрывать/раскрывать детей только при клике на заголовок?**
-
-В задаче [](/task/sliding-tree) это решено так: заголовки завёрнуты в элементы `SPAN` и проверяются клики только на них. Представим на минуту, что мы не хотим оборачивать текст в `SPAN`, а хотим оставить как есть. Например, по соображениям производительности, если дерево и так очень большое, ведь оборачивание всех заголовков в `SPAN` увеличит количество DOM-узлов в 2 раза.
-
-**Решите задачу без обёртывания заголовков в `SPAN`, используя работу с координатами.**
-
-Исходный документ содержит кликабельное дерево.
-
-
-
-P.S. Задача -- скорее на сообразительность, однако подход может быть полезен в реальной жизни.
diff --git a/2-ui/3-event-details/1-mouse-clicks/article.md b/2-ui/3-event-details/1-mouse-clicks/article.md
deleted file mode 100644
index 6bd920e0..00000000
--- a/2-ui/3-event-details/1-mouse-clicks/article.md
+++ /dev/null
@@ -1,327 +0,0 @@
-# Мышь: клики, кнопка, координаты
-
-В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие  свойства, а также те события, которые связаны с кликом.
-[cut]
-## Типы событий мыши  
-
-Условно можно разделить события на два типа: "простые" и "комплексные". 
-
-### Простые события   
-
-<dl>
-<dt>`mousedown`</dt>
-<dd>Кнопка мыши нажата над элементом.</dd>
-<dt>`mouseup`</dt>
-<dd>Кнопка мыши отпущена над элементом.</dd>
-<dt>`mouseover`</dt>
-<dd>Мышь появилась над элементом.</dd>
-<dt>`mouseout`</dt>
-<dd>Мышь ушла с элемента.</dd>
-<dt>`mousemove`</dt>
-<dd>Каждое движение мыши над элементом генерирует это событие.</dd>
-</dl>
-
-### Комплексные события   
-
-<dl>
-<dt>`click`</dt>
-<dd>Вызывается при клике мышью, то есть при `mousedown`, а затем `mouseup` на одном элементе</dd>
-<dt>`contextmenu`</dt>
-<dd>Вызывается при клике правой кнопкой мыши на элементе.</dd>
-<dt>`dblclick`</dt>
-<dd>Вызывается при двойном клике по элементу.</dd>
-</dl>
-
-Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.
-
-### Порядок срабатывания событий
-
-Одно действие может вызывать несколько событий. 
-
-Например, клик вызывает сначала `mousedown` при нажатии, а затем `mouseup` и `click` при отпускании кнопки.
-
-В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке `mousedown` -> `mouseup` -> `click`.  
-
-[online]
-Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик. 
-
-На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства `which/button`, по которым можно определить кнопку мыши. Мы их рассмотрим далее.
-[pre no-typography]
-<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Кликни меня левой или правой кнопкой мыши" type="button" /> <input onclick="logClear('test')" value="Очистить" type="button" /> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
-[/pre]
-[/online]
-**Каждое событие обрабатывается независимо.**
-
-Например, при клике события `mouseup + click` возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка `mouseup`, затем запускается `click`.
-
-
-## Получение информации о кнопке: which   
-
-При обработке событий, связанных с кликами мыши, бывает важно знать, какая кнопка нажата. 
-
-**Для получения кнопки мыши в объекте `event` есть свойство `which`.** 
-
-На практике оно используется редко, т.к. обычно обработчик вешается либо  `onclick` -- только на левую кнопку мыши, либо `oncontextmenu` -- только на правую. 
-
-Возможны следующие значения:
-<ul>
-<li>`event.which == 1` - левая кнопка</li>
-<li>`event.which == 2` - средняя кнопка</li>
-<li>`event.which == 3` - правая кнопка</li>
-</ul>
-
-Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.
-
-## Правый клик: oncontextmenu   
-
-Это событие срабатывает при клике правой кнопкой мыши:
-
-```html
-<!--+ autorun height=80  no-beautify -->
-<div>Правый клик на этой кнопке выведет "Клик".</div>
-<button oncontextmenu="alert('Клик!');">Правый клик сюда</button>
-```
-
-При клике на кнопку выше после обработчика `oncontextmenu` будет показано обычное контекстное меню, которое браузер всегда показывает при клике правой кнопкой. Это является его действием по умолчанию.
-
-Если мы не хотим, чтобы показывалось встроенное меню, например потому что показываем своё, специфичное для нашего приложения, то можно отменить действие по умолчанию.
-
-В примере ниже встроенное меню показано не будет:
-
-```html
-<!--+ autorun height=60  no-beautify -->
-<button oncontextmenu="alert('Клик!');return false">Правый клик сюда</button>
-```
-
-## Модификаторы shift, alt, ctrl и meta
-
-Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.
-
-Соответствующие свойства:
-<ul>
-<li>`shiftKey`</li>
-<li>`altKey`</li>
-<li>`ctrlKey`</li>
-<li>`metaKey` (для Mac)</li>
-</ul>
-
-Например, кнопка ниже сработает только на Alt+Shift+Клик:
-
-```html
-<!--+ autorun height=60 -->
-<button>Alt+Shift+Кликни меня!</button>
-
-<script>
-  document.body.children[0].onclick = function(e) {
-*!*
-    if (!e.altKey || !e.shiftKey) return;
-*/!*
-    alert( 'Ура!' );
-  }
-</script>
-```
-
-[warn header="Внимание: на Mac вместо `Ctrl` используется `Cmd`"]
-На компьютерах под управлением Windows и Linux есть специальные клавиши [key Alt], [key Shift] и [key Ctrl]. На Mac есть ещё одна специальная клавиша: [key Cmd], которой соответствует свойство `metaKey`.
-
-В большинстве случаев там, где под Windows/Linux используется [key Ctrl], на Mac используется [key Cmd]. Там, где пользователь Windows нажимает [key Ctrl+Enter] или [key Ctrl+A], пользователь Mac нажмёт [key Cmd+Enter] или [key Cmd+A], и так далее, почти всегда [key Cmd] вместо [key Ctrl].
-
-Поэтому, если мы хотим поддерживать сочетание [key Ctrl]+click или другие подобные, то под Mac имеет смысл использовать [key Cmd]+click. Пользователям Mac это будет гораздо комфортнее.
-
-Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно [key Ctrl]+click -- это было бы затруднительно. Дело в том, что обычный клик с зажатым [key Ctrl] под Mac работает как *правый клик* и генерирует событие `oncontextmenu`, а вовсе не `onclick`, как под Windows/Linux.
-
-Решение -- чтобы пользователи обоих операционных систем работали с комфортом, в паре с `ctrlKey` нужно обязательно использовать `metaKey`.
-
-В JS-коде это означает, что для удобства пользователей Mac нужно проверять `if (event.ctrlKey || event.metaKey)`. 
-[/warn]
-
-## Координаты в окне: clientX/Y
-
-Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.
-
-Пара свойств `clientX/clientY` содержит координаты курсора относительно текущего окна.
-
-При этом, например, если ваше окно размером 500x500, а мышь находится в центре, тогда и `clientX` и `clientY` будут равны 250.
-
-Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора `clientX/clientY` не изменятся, потому что они считаются относительно окна, а не документа.
-
-[online]
-Проведите мышью над полем ввода, чтобы увидеть `clientX/clientY`:
-
-```html
-<input onmousemove="this.value = event.clientX+':'+event.clientY">
-```
-
-<input onmousemove="this.value = event.clientX+':'+event.clientY">
-[/online]
-
-В той же системе координат работает и метод `elem.getBoundingClientRect()`, возвращающий координаты элемента, а также `position:fixed`.
-
-### Относительно документа: pageX/Y     
-
-Координаты курсора относительно документа находятся в свойствах `pageX/pageY`.
- 
-Так как эти координаты -- относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора `pageX/pageY` изменятся на величину прокрутки, они привязаны к конкретной точке в документе.
-
-В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы. 
-
-[online]
-Проведите мышью над полем ввода, чтобы увидеть `pageX/pageY` (кроме IE8-):
-
-```html
-<input onmousemove="this.value = event.pageX+':'+event.pageY">
-```
-
-<input onmousemove="this.value = event.pageX+':'+event.pageY">
-[/online]
-
-В той же системе координат работает `position:absolute`, если элемент позиционируется относительно документа.
-
-[warn header="Устарели: `x, y, layerX, layerY`"]
-Некоторые браузеры поддерживают свойства  `event.x/y`, `event.layerX/layerY`.  
-
-Эти свойства устарели, они нестандартные и не добавляют ничего к описанным ваше. Использовать их не стоит.
-[/warn]
-
-
-## Особенности IE8-
-
-### Двойной клик
-
-Все браузеры, кроме IE8-, генерируют `dblclick` *в дополнение* к другим событиям. 
-
-То есть, обычно:
-<ul>
-<li>`mousedown` (нажал)</li>
-<li>`mouseup+click` (отжал) </li>
-<li>`mousedown` (нажал)</li>
-<li>`mouseup+click+dblclick` (отжал).</li>
-</ul>
-
-**IE8- на втором клике не генерирует `mousedown` и `click`.**
-
-Получается:
-<ul>
-<li>`mousedown` (нажал)</li>
-<li>`mouseup+click` (отжал)</li>
-<li>(нажал второй раз, без события)</li>
-<li>`mouseup+dblclick` (отжал).</li>
-</ul>
-
-Поэтому отловить двойной клик в IE8-, отслеживая только `click`, нельзя, ведь при втором нажатии его нет. Нужно именно событие `dblclick`.
-
-### Свойство which/button
-
-
-В старых IE8- не поддерживалось свойство `which`, а вместо него использовалось свойство `button`, которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.
-
-Чтобы его расшифровать -- нужна [побитовая операция](/bitwise-operators) `&` ("битовое И"):
-
-<ul>
-<li>`!!(button & 1) == true` (1й бит установлен), если нажата левая кнопка,</li>
-<li>`!!(button & 2) == true` (2й бит установлен), если нажата правая кнопка,</li>
-<li>`!!(button & 4) == true` (3й бит установлен), если нажата средняя кнопка.</li>
-</ul>
-
-Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный `which` такой возможности не даёт. Так что, в некотором смысле, свойство `button` -- более мощное. 
-
-Можно легко сделать функцию, которая будет ставить свойство `which` из `button`, если его нет:
-
-```js
-function fixWhich(e) {
-  if (!e.which && e.button) { // если which нет, но есть button... (IE8-)
-    if (e.button & 1) e.which = 1; // левая кнопка
-    else if (e.button & 4) e.which = 2; // средняя кнопка
-    else if (e.button & 2) e.which = 3; // правая кнопка
-  }
-}
-```
-
-### Свойства pageX/pageY [#fixPageXY]
-
-В IE до версии 9 не поддерживаются свойства `pageX/pageY`, но их можно получить, прибавив к `clientX/clientY` величину прокрутки страницы. 
-
-Более подробно о её вычислении вы можете прочитать в разделе [прокрутка страницы](#page-scroll). 
-
-Мы же здесь приведем готовый вариант, который позволяет нам получить `pageX/pageY` для старых и совсем старых IE:
-
-```js
-function fixPageXY(e) {
-  if (e.pageX == null && e.clientX != null) { // если нет pageX..
-    var html = document.documentElement;
-    var body = document.body;
-
-    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
-    e.pageX -= html.clientLeft || 0;
-
-    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
-    e.pageY -= html.clientTop || 0;
-  }
-}
-```
-
-## Итого
-
-События мыши имеют следующие свойства:
-
-<ul>
-<li>Кнопка мыши: `which` (для IE8-: нужно ставить из `button`)</li>
-<li>Элемент, вызвавший событие: `target`</li>
-<li>Координаты, относительно окна: `clientX/clientY`</li>
-<li>Координаты, относительно документа: `pageX/pageY` (для IE8-: нужно ставить по `clientX/Y` и прокрутке)</li>
-<li>Если зажата спец. клавиша, то стоит соответствующее свойство: `altKey`, `ctrlKey`, `shiftKey` или `metaKey` (Mac).</li>
-<li>Для поддержки [key Ctrl]+`click` не забываем проверить `if (e.metaKey || e.ctrlKey)`, чтобы пользователи `Mac` тоже были довольны.</li>
-</ul>
-
-
-
-
-[head]
-<script>
-!function() {
-  var timer = 0;
-
-  function showmesg(t, form) {
-
-     if (timer==0) timer = new Date()
-
-     var tm = new Date()
-     if (tm-timer > 300) {
-  	t = '------------------------------\n'+t
-     }
-
-     var area = document.forms[form+'form'].getElementsByTagName('textarea')[0]
-
-     area.value += t + '\n';
-     area.scrollTop = area.scrollHeight
-
-     timer = tm
-  }
-
-  function logMouse(e) {
-     var evt = e.type
-     while (evt.length < 11) evt += ' '
-     showmesg(evt+" which="+e.which+" button="+e.button, 'test')
-     return false
-  }
-
-  function keyval(n) {
-     if (n == null) return 'undefined';
-     var s = '' + n;
-     if (n >= 32 && n < 127) s += ' ' + String.fromCharCode(n);
-     while (s.length < 6) s += ' ';
-     return s;
-  }
-
-
-  function logClear(form) {
-  	timer = 0
-  	document.forms[form+'form'].getElementsByTagName('textarea')[0].value ='';
-  	lines=0
-  }
-
-  window.logClear = logClear;
-  window.logMouse = logMouse;
-}();
-</script>
-[/head]
\ No newline at end of file
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.md
similarity index 100%
rename from archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md
rename to 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.md
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html
new file mode 100644
index 00000000..56756633
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .selected {
+      background: #0f0;
+    }
+
+    li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  Click on a list item to select it.
+  <br>
+
+  <ul id="ul">
+    <li>Christopher Robin</li>
+    <li>Winnie-the-Pooh</li>
+    <li>Tigger</li>
+    <li>Kanga</li>
+    <li>Rabbit. Just rabbit.</li>
+  </ul>
+
+  <script>
+    ul.onclick = function(event) {
+      if (event.target.tagName != "LI") return;
+
+      if (event.ctrlKey || event.metaKey) {
+        toggleSelect(event.target);
+      } else {
+        singleSelect(event.target);
+      }
+
+    }
+
+    // prevent unneeded selection of list elements on clicks
+    ul.onmousedown = function() {
+      return false;
+    };
+
+    function toggleSelect(li) {
+      li.classList.toggle('selected');
+    }
+
+    function singleSelect(li) {
+      let selected = ul.querySelector('.selected');
+      if (selected) {
+        selected.classList.remove('selected');
+      }
+      li.classList.add('selected');
+    }
+
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html
new file mode 100644
index 00000000..e18d4a99
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .selected {
+      background: #0f0;
+    }
+
+    li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  Click on a list item to select it.
+  <br>
+
+  <ul id="ul">
+    <li>Christopher Robin</li>
+    <li>Winnie-the-Pooh</li>
+    <li>Tigger</li>
+    <li>Kanga</li>
+    <li>Rabbit. Just rabbit.</li>
+  </ul>
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md
new file mode 100644
index 00000000..f358616e
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md
@@ -0,0 +1,17 @@
+importance: 5
+
+---
+
+# Selectable list
+
+Create a list where elements are selectable, like in file-managers.
+
+- A click on a list element selects only that element (adds the class `.selected`), deselects all others.
+- If a click is made with `key:Ctrl` (`key:Cmd` for Mac), then the selection is toggled on the element, but other elements are not modified.
+
+The demo:
+
+[iframe border="1" src="solution" height=180]
+
+P.S. For this task we can assume that list items are text-only. No nested tags.
+P.P.S. Prevent the native browser selection of the text on clicks.
diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md
new file mode 100644
index 00000000..fd1c6322
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-events-basics/article.md
@@ -0,0 +1,245 @@
+# Mouse events basics
+
+In this chapter we'll get into more details about mouse events and their properties.
+
+[cut]
+
+## Mouse event types
+
+We can split mouse events into two categories: "simple" and "complex"
+
+### Simple events
+
+The most used simple events are:
+
+`mousedown/mouseup`
+: Mouse button is clicked/released over an element.
+
+`mouseover/mouseout`
+: Mouse pointer comes over/out from an element.
+
+`mousemove`
+: Every mouse move over an element triggers that event.
+
+...There are several other event types too, we'll cover them later.
+
+### Complex events
+
+`click`
+: Triggers after `mousedown` and then `mouseup` over the same element.
+
+`contextmenu`
+: Triggers after `mousedown` if the right mouse button was used.
+
+`dblclick`
+: Triggers after a double click over an element.
+
+Complex events are made of simple ones, so in theory we could live without them. But they exist, and that's good, because they are convenient.
+
+For touchscreen and touchpad devices mouse events also happen, they are emulated.
+
+### Events order
+
+An action may trigger multiple events.
+
+For instance, a click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released.
+
+In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. Events are handled in the same sequence:  `onmouseup` finishes before `onclick` runs.
+
+```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.
+
+Also we can see the `which` property that allows to detect the mouse button.
+
+<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Click me with the right or the left mouse button" type="button"> <input onclick="logClear('test')" value="Clear" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
+```
+
+## Getting the button: which
+
+Click-related events always have the `which` property that allows to get the button.
+
+It is not used for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click.
+
+But if we track `mousedown` and `mouseup`, then we need it, because these events trigger on any button, so `which` allows to distinguish between "right-mousedown" and "left-mousedown".
+
+There are the three possible values:
+
+- `event.which == 1` -- the left button
+- `event.which == 2` - the middle button
+- `event.which == 3` - the right button
+
+The middle button is somewhat exotic right now and is very rarely used.
+
+## Modifiers: shift, alt, ctrl and meta
+
+All mouse events include the information about pressed modifier keys.
+
+The properties are:
+
+- `shiftKey`
+- `altKey`
+- `ctrlKey`
+- `metaKey` (`key:Cmd` for Mac)
+
+For instance, the button below only works on `key:Alt+Shift`+click:
+
+```html autorun height=60
+<button id="button">Alt+Shift+Click on me!</button>
+
+<script>
+  button.onclick = function(event) {
+*!*
+    if (event.altKey && event.shiftKey) {
+*/!*
+      alert('Hooray!');
+    }
+  };
+</script>
+```
+
+```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`"
+On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, it corresponds to the property `metaKey`.
+
+In most cases when Windows/Linux uses `key:Ctrl`, on Mac people use `key:Cmd`. So where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on, most apps use `key:Cmd` instead of `key:Ctrl`.
+
+So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use  `key:Cmd`+click. That's more comfortable for Mac users.
+
+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 Mac, 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 use `metaKey`.
+
+For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`.
+```
+
+```warn header="There are also mobile devices"
+Keyboard combinations are good as an addition to the workflow. So that if the visitor has a
+ keyboard -- it works. And if your device doesn't have it -- then there's another way to do the same.
+```
+
+## Coordinates: clientX/Y, pageX/Y
+
+All mouse events have coordinates in two flavours:
+
+1. Window-relative: `clientX` and `clientY`.
+2. Document-relative: `pageX` and `pageY`.
+
+For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`. And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed`.
+
+````online
+Move the mouse over the input field to see `clientX/clientY` (it's in the `iframe`, so coordinates are relative to that `iframe`):
+
+```html autorun height=50
+<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Mouse over me">
+```
+````
+
+Document-relative coordinates are counted from the left-upper corner of the document, not the window.
+Coordinates `pageX`, `pageY` are similar to `position:absolute` on the document level.
+
+You can read more about coordinates in the chapter <info:coordinates>.
+
+## No selection on mousedown
+
+Mouse clicks have a side-effect that may be disturbing. A double click selects the text.
+
+If we want to handle click events ourselves, then the "extra" selection doesn't look good.
+
+For instance, a double-click on the text below selects it in addition to our handler:
+
+```html autorun height=50
+<b ondblclick="alert('dblclick')">Double-click me</b>
+```
+
+There's a CSS way to stop the selection: the `user-select` property from [CSS UI Draft](https://www.w3.org/TR/css-ui-4/).
+
+Most browsers support it with prefixes:
+
+```html autorun height=50
+<style>
+  b {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+</style>
+
+Before...
+<b ondblclick="alert('Test')">
+  Unselectable
+</b>
+...After
+```
+
+Now if you double-click on "Unselectable", it doesn't get selected. Seems to work.
+
+...But there is a potential problem! The text became truly unselectable. Even if a user starts the selection from "Before" and ends with "After", the selection skips "Unselectable" part. Do we really want to make our text unselectable?
+
+Most of time, we don't. A user may have valid reasons to select the text, for copying or other needs. That may be disturbing if we don't allow him to do it. So the solution is not that good.
+
+What we want is to prevent the selection on double-click, that's it.
+
+A text selection is the default browser action on `mousedown` event. So the alternative solution would be to handle `mousedown` and prevent it, like this:
+
+```html autorun height=50
+Before...
+<b ondblclick="alert('Click!')" *!*onmousedown="return false"*/!*>
+  Double-click me
+</b>
+...After
+```
+
+Now the bold element is not selected on double clicks.
+
+From the other hand, the text inside it is still selectable. The selection should start not on the text itself, but before or after it. Usually that's fine.
+
+````smart header="Canceling the selection"
+Instead of *preventing* the selection, we can cancel it "post-factum" in the event handler.
+
+Here's how:
+
+```html autorun height=50
+Before...
+<b ondblclick="*!*getSelection().removeAllRanges()*/!*">
+  Double-click me
+</b>
+...After
+```
+
+If you double-click on the bold element, then the selection appears and then is immediately removed. That doesn't look nice though.
+````
+
+````smart header="Preventing copying"
+If we want to disable selection to protect our content from copy-pasting, then we can use another event: `oncopy`.
+
+```html autorun height=80 no-beautify
+<div *!*oncopy="alert('Copying forbidden!');return false"*/!*>
+  Dear user,
+  The copying is forbidden for you.
+  If you know JS or HTML, then you can get everything from the page source though.
+</div>
+```
+If you try to copy a piece of text in the `<div>`, that won't work, because the default action `oncopy` is prevented.
+
+Surely that can't stop the user from opening HTML-source, but not everyone knows how to do it.
+````
+
+## Summary
+
+Mouse events have following properties:
+
+- Button: `which`.
+- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac).
+  - If you want to handle `key:Ctrl`, then don't forget Mac users, they use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`.
+
+- Window-relative coordinates: `clientX/clientY`.
+- Document-relative coordinates: `pageX/clientX`.
+
+In the tasks below it's also important to deal with the selection as an unwanted side-effect of clicks.
+
+There are several ways, for instance:
+1. CSS-property `user-select:none` (with browser prefixes) completely disables it.
+2. Cancel the selection post-factum using `getSelection().removeAllRanges()`.
+3. Handle `mousedown` and prevent the default action (usually the best).
diff --git a/2-ui/3-event-details/1-mouse-events-basics/head.html b/2-ui/3-event-details/1-mouse-events-basics/head.html
new file mode 100644
index 00000000..461f0e85
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-events-basics/head.html
@@ -0,0 +1,47 @@
+<script>
+{
+  let timer = 0;
+
+  function showmesg(t, form) {
+
+     if (timer==0) timer = new Date()
+
+     let tm = new Date()
+     if (tm-timer > 300) {
+  	t = '------------------------------\n'+t
+     }
+
+     let area = document.forms[form+'form'].getElementsByTagName('textarea')[0]
+
+     area.value += t + '\n';
+     area.scrollTop = area.scrollHeight
+
+     timer = tm
+  }
+
+  function logMouse(e) {
+     let evt = e.type;
+     while (evt.length < 11) evt += ' ';
+     showmesg(evt+" which="+e.which, 'test')
+     return false;
+  }
+
+  function keyval(n) {
+     if (n == null) return 'undefined';
+     let s = '' + n;
+     if (n >= 32 && n < 127) s += ' ' + String.fromCharCode(n);
+     while (s.length < 6) s += ' ';
+     return s;
+  }
+
+
+  function logClear(form) {
+  	timer = 0;
+  	document.forms[form+'form'].getElementsByTagName('textarea')[0].value ='';
+  	lines = 0;
+  }
+
+  window.logClear = logClear;
+  window.logMouse = logMouse;
+}
+</script>
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
index 2d69e04b..1e3ba766 100644
--- a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
@@ -1,40 +1,40 @@
-# Загрузка документа: DOMContentLoaded, load, beforeunload, unload
+# Page lifecycle: DOMContentLoaded, load, beforeunload, unload
 
-Процесс загрузки HTML-документа, условно, состоит из трёх стадий:
-<ul>
-<li>`DOMContentLoaded` -- браузер полностью загрузил HTML, и построил DOM-дерево.</li>
-<li>`load` -- браузер загрузил все ресурсы.</li>
-<li>`beforeunload/unload` -- уход со страницы.</li>
-</ul>
+The lifecycle of an HTML page has three important events:
 
-Все эти стадии очень важны. На каждую можно повесить обработчик, чтобы совершить полезные действия:
-<ul>
-<li>`DOMContentLoaded` -- означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.</li>
-<li>`load` -- страница и все ресурсы загружены, используется редко, обычно нет нужды ждать этого момента.</li>
-<li>`beforeunload/unload` -- можно проверить, сохранил ли посетитель изменения, уточнить, действительно ли он хочет покинуть страницу.</li>
-</ul>
+- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `<img>` and stylesheets may be not yet loaded.  
+- `load` -- the browser loaded all resources (images, styles etc).
+- `beforeunload/unload` -- when the user is leaving the page.
 
-Далее мы рассмотрим важные детали этих событий.
+Each event may be useful:
+
+- `DOMContentLoaded` event -- DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
+- `load` event -- additional resources are loaded, we can get image sizes (if not specified in HTML/CSS) etc.
+- `beforeunload/unload` event -- the user is leaving: we can check if the user saved the changes and  ask him whether he really wants to leave.
+
+Let's explore the details of these events.
 
 [cut]
 
 ## DOMContentLoaded
-Событие `DOMContentLoaded` поддерживается во всех браузерах, кроме IE8-. Про поддержку аналогичного функционала в старых IE мы поговорим в конце главы.
- 
-Обработчик на него вешается только через `addEventListener`:
+
+The `DOMContentLoaded` event happens on the `document` object.
+
+We must use `addEventListener` to catch it:
 
 ```js
 document.addEventListener("DOMContentLoaded", ready);
 ```
 
-Пример:
+For instance:
 
-```html
-<!--+ run height=150 -->
+```html run height=200 refresh
 <script>
   function ready() {
-    alert( 'DOM готов' );
-    alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight );
+    alert('DOM is ready');
+
+    // image is not yet loaded (unless was cached), so the size is 0x0
+    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
   }
 
 *!*
@@ -42,172 +42,205 @@ document.addEventListener("DOMContentLoaded", ready);
 */!*
 </script>
 
-<img id="img" src="https://js.cx/clipart/yozhik.jpg?speed=1">
+<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
 ```
 
-В примере выше размеры обработчик `DOMContentLoaded` сработает сразу после загрузки документа, не дожидаясь получения картинки. 
+In the example the `DOMContentLoaded` handler runs when the document is loaded, not waits for the page load. So `alert` shows zero sizes.
+
+At the first sight `DOMContentLoaded` event is very simple. The DOM tree is ready -- here's the event. But there are few pecularities.
+
+### DOMContentLoaded and scripts
+
+When the browser initially loads HTML and comes across a `<script>...</script>` in the text, it can't continue building DOM. It must execute the script right now. So `DOMContentLoaded` may only happen after all such scripts are executed.
+
+External scripts (with `src`) also put DOM building to pause while the script is loading and executing. So `DOMContentLoaded` waits for external scripts as well.
 
-Поэтому на момент вывода `alert` и сама картинка будет невидна и её размеры -- неизвестны (кроме случая, когда картинка взята из кеша браузера). 
+The only exception are external scripts with `async` and `defer` attributes. They tell the browser to continue processing without waiting for the scripts. So the user can see the page before scripts finish loading, good for performance.
 
-В своей сути, событие `onDOMContentLoaded` -- простое, как пробка. Полностью создано DOM-дерево -- и вот событие. Но с ним связан ряд существенных тонкостей.
+```smart header="A word about `async` and `defer`"
+Attributes `async` and `defer` work only for external scripts. They are ignored if there's no `src`.
 
-### DOMContentLoaded и скрипты
+Both of them tell the browser that it may go on working with the page, and load the script "in background", then run the script when it loads. So the script doesn't block DOM building and page rendering.
 
-Если в документе есть теги `<script>`, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие `DOMContentLoaded` ждёт загрузки и выполнения таких скриптов.
+There are two differences between them.
 
-Исключением являются скрипты с атрибутами `async` и `defer`, которые подгружаются асинхронно.
+|         | `async` | `defer` |
+|---------|---------|---------|
+| Order | Scripts with `async` execute *in the load-first order*. Their document order doesn't matter -- which loads first runs first. | Scripts with `defer` always execute *in the document order* (as they go in the document). |
+| `DOMContentLoaded` | Scripts with `async` may load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. | Scripts with `defer` execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. |
 
-**Побочный эффект: если на странице подключается скрипт с внешнего ресурса (к примеру, реклама), и он тормозит, то событие `DOMContentLoaded` и связанные с ним действия могут сильно задержаться.**
+So `async` is used for totally independent scripts.
 
-Современные системы рекламы используют атрибут `async`, либо вставляют скрипты через DOM: `document.createElement('script')...`, что работает так же как `async`: такой скрипт выполняется полностью независимо от страницы и от других скриптов -- сам ничего не ждёт и ничего не блокирует.
+```
 
-### DOMContentLoaded и стили
+### DOMContentLoaded and styles
 
-Внешние стили никак не влияют на событие `DOMContentLoaded`. Но есть один нюанс. 
+External style sheets don't affect DOM, and so `DOMContentLoaded` does not wait for them.
 
-**Если после стиля идёт скрипт, то этот скрипт обязан дождаться, пока стиль загрузится:**
+But there's a pitfall: if we have a script after the style, then that script must wait for the stylesheet to execute:
 
 ```html
 <link type="text/css" rel="stylesheet" href="style.css">
 <script>
-  // сработает после загрузки style.css
+  // the script doesn't not execute until the stylesheet is loaded
+  alert(getComputedStyle(document.body).marginTop);
 </script>
 ```
 
-Такое поведение прописано в стандарте. Его причина -- скрипт может захотеть получить информацию со страницы, зависящую от стилей, например, ширину элемента, и поэтому обязан дождаться загрузки `style.css`.
+The reason is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load.
 
-**Побочный эффект -- так как событие `DOMContentLoaded` будет ждать выполнения скрипта, то оно подождёт и загрузки стилей, которые идут перед `<script>`.**
+As `DOMContentLoaded` waits for scripts, it now waits for styles before them as well.
 
-### Автозаполнение
+### Built-in browser autofill
 
-Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoaded`.
+Firefox, Chrome and Opera autofill forms on `DOMContentLoaded`.
 
-Это означает, что если на странице есть форма для ввода логина-пароля, то браузер введёт в неё запомненные значения только по `DOMContentLoaded`.
+For instance, if the page has a form with login and password, and the browser remembered the values, then on `DOMContentLoaded` it may try to autofill them (if approved by the user).
 
-**Побочный эффект: если `DOMContentLoaded` ожидает множества скриптов и стилей, то автозаполнение не сработает до полной их загрузки.**
+So if `DOMContentLoaded` is postponed by long-loading scripts, then autofill also awaits. You probably saw that on some sites (if you use browser autofill) -- the login/password fields don't get autofilled immediately, but there's a delay till the page fully loads. That's actually the delay until the `DOMContentLoaded` event.
 
-Конечно, это довод в пользу того, чтобы не задерживать `DOMContentLoaded`, в частности -- использовать у скриптов атрибуты `async` и `defer`. 
+One of minor benefits in using `async` and `defer` for external scripts -- they don't block `DOMContentLoaded` and don't delay browser autofill.
 
 ## window.onload [#window-onload]
 
-Обработчик `window.onload` срабатывает, когда загружается *вся* страница, включая ресурсы на ней -- стили, картинки, ифреймы и т.п.
+The `load` event on the `window` object triggers when the whole page is loaded including styles, images and other resources.
 
-Пример ниже выведет `alert` лишь после полной загрузки окна, включая `IFRAME` и картинку:
+The example below correctly shows image sizes, because `window.onload` waits for all images:
 
-```html
-<!--+ run -->
+```html run height=200 refresh
 <script>
-*!*
   window.onload = function() {
-    alert( 'Документ и все ресурсы загружены' );
+    alert('Page loaded');
+
+    // image is loaded at this time
+    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
   };
-*/!*
 </script>
-<iframe src="https://example.com/" style="height:60px"></iframe>
-<img src="https://js.cx/clipart/yozhik.jpg?speed=1">
+
+<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
 ```
 
 ## window.onunload
 
-Когда человек уходит со страницы или закрывает окно, срабатывает `window.unload`. В нём можно сделать что-то, не требующее ожидания, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя. 
+When a visitor leaves the page, the `unload` event triggers on `window`. We can do something there that doesn't involve a delay, like closing related popup windows. But we can't cancel the transition to another page.
 
-Это позволяет другое событие -- `window.onbeforeunload`, которое поэтому используется гораздо чаще.
+For that we should use another event -- `onbeforeunload`.
 
 ## window.onbeforeunload [#window.onbeforeunload]
 
-Если посетитель инициировал переход на другую страницу или нажал "закрыть окно", то обработчик `onbeforeunload` может приостановить процесс и спросить подтверждение.
+If a visitor initiated leaving the page or tries to close the window, the `beforeunload` handler can ask for additional confirmation.
 
-Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая -- нужно ли переходить. 
+It needs to return the string with the question. The browser will show it.
 
-Например:
+For instance:
 
 ```js
 window.onbeforeunload = function() {
-  return "Данные не сохранены. Точно перейти?";
+  return "There are unsaved changes. Leave now?";
 };
 ```
 
-[warn header="Firefox игнорирует текст, он показывает своё сообщение"]
-Firefox игнорирует текст, а всегда показывает своё сообщение. Это сделано в целях большей безопасности посетителя, чтобы его нельзя было ввести в заблуждение сообщением.
-[/warn]
+```online
+Click on the button in `<iframe>` below to set the handler, and then click the link to see it in action:
 
-[online]
-Кликните на кнопку в `IFRAME'е` ниже, чтобы поставить обработчик, а затем по ссылке, чтобы увидеть его в действии:
+[iframe src="window-onbeforeunload" border="1" height="80" link edit]
+```
 
-[iframe src="window-onbeforeunload" border="1" height="80" link]
-[/online]
+```warn header="Some browsers ignore the text and show their own message instead"
+Some browsers like Chrome and Firefox ignore the string and shows its own message instead. That's for sheer safety, to protect the user from potentially misleading and hackish messages.
+```
 
-## Эмуляция DOMContentLoaded для IE8-
+## readyState
 
-Прежде чем что-то эмулировать, заметим, что альтернативой событию `onDOMContentLoaded` является вызов функции `init` из скрипта в самом конце `BODY`, когда основная часть DOM уже готова:
+What happens if we set the `DOMContentLoaded` handler after the document is loaded?
 
-```html
-<body>
-  ...
-  <script>
-    init();
-  </script>
-</body>
-```
+Naturally, it never runs.
 
-Причина, по которой обычно предпочитают именно событие -- одна: удобство. Вешается обработчик и не надо ничего писать в конец `BODY`.
+There are cases when we are not sure whether the document is ready or not, for instance an external script with `async` attribute loads and runs asynchronously. Depending on the network, it may load and execute before the document is complete or after that, we can't be sure. So we should be able to know the current state of the document.
 
-### Мини-скрипт documentReady
-Если вы всё же хотите использовать `onDOMContentLoaded` кросс-браузерно, то нужно либо подключить какой-нибудь фреймворк -- почти все предоставляют такой функционал, либо использовать функцию из мини-библиотеки [jquery.documentReady.js](https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js).
+The `document.readyState` property gives us information about it. There are 3 possible values:
 
-Несмотря на то, что в названии содержится слово "jquery", эта библиотечка не требует [jQuery](http://jquery.com). Наоборот, она представляет собой единственную функцию с названием `$`, вызов которой `$(callback)` добавляет обработчик `callback` на `DOMContentLoaded` (можно вызывать много раз), либо, если документ уже загружен -- выполняет его тут же.
+- `"loading"` -- the document is loading.
+- `"interactive"` -- the document was fully read.
+- `"complete"` -- the document was fully read and all resources (like images) are loaded too.
 
-Пример использования:
+So we can check `document.readyState` and setup a handler or execute the code immediately if it's ready.
 
-```html
-<!--+ run -->
-<script src="https://js.cx/script/jquery.documentReady.js"></script>
+Like this:
 
-<script>
-*!*
-  $(function() {
-    alert( "DOMContentLoaded" );
-  });
-*/!*
-</script>
+```js
+function work() { /*...*/ }
 
-<img src="https://js.cx/clipart/yozhik.jpg?speed=1">
-<div>Текст страницы</div>
+if (document.readyState == 'loading') {
+  document.addEventListener('DOMContentLoaded', work);
+} else {
+  work();
+}
 ```
 
-Здесь `alert` сработает до загрузки картинки, но после создания DOM, в частности, после появления текста. И так будет для всех браузеров, включая даже очень старые IE.
-
-[smart header="Как именно эмулируется `DOMContentLoaded`?"]
-Технически, эмуляция `DOMContentLoaded` для старых IE осуществляется очень забавно.
+There's a `readystatechange` event that triggers when the state changes, so we can print all these states like this:
 
-Основной приём -- это попытка прокрутить документ вызовом:
+```js run
+// current state
+console.log(document.readyState);
 
-```js
-document.documentElement.doScroll("left");
+// print state changes
+document.addEventListener('readystatechange', () => console.log(document.readyState));
 ```
 
-Метод `doScroll` работает только в IE и "методом тыка" было обнаружено, что он бросает исключение, если DOM не полностью создан.
+The `readystatechange` event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used, but let's cover it for completeness.
 
-Поэтому библиотека пытается вызвать прокрутку, если не получается -- через `setTimeout(.., 1)` пытается прокрутить его ещё раз, и так до тех пор, пока действие не перестанет вызывать ошибку. На этом этапе документ считается загрузившимся.
+What is the place of `readystatechange` among other events?
 
-Внутри фреймов и в очень старых браузерах такой подход может ошибаться, поэтому дополнительно ставится резервный обработчик на `onload`, чтобы уж точно сработал.
-[/smart]
+To see the timing, here's a document with `<iframe>`, `<img>` and handlers that log events:
+
+```html
+<script>
+  function log(text) { /* output the time and message */ }
+  log('initial readyState:' + document.readyState);
+
+  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
+  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));
+
+  window.onload = () => log('window onload');
+</script>
+
+<iframe src="iframe.html" onload="log('iframe onload')"></iframe>
+
+<img src="http://en.js.cx/clipart/train.gif" id="img">
+<script>
+  img.onload = () => log('img onload');
+</script>
+```
 
+The working example is [in the sandbox](sandbox:readystate).
 
-## Итого
+The typical output:
+1. [1] initial readyState:loading
+2. [2] readyState:interactive
+3. [2] DOMContentLoaded
+4. [3] iframe onload
+5. [4] readyState:complete
+6. [4] img onload
+7. [4] window onload
 
-<ul>
-<li>Самое востребованное событие из описанных -- без сомнения, `DOMContentLoaded`. Многие страницы сделаны так, что инициализуют интерфейсы именно по этому событию.
+The numbers in square brackets denote the approximate time of when it happens. The real time is a bit greater, but events labeled with the same digit happen approximately at the same time (+- a few ms).
 
-Это удобно, ведь можно в `<head>` написать скрипт, который будет запущен в момент, когда все DOM-элементы доступны.
+- `document.readyState` becomes `interactive` right before `DOMContentLoaded`. These two events actually mean the same.
+- `document.readyState` becomes `complete` when all resources (`iframe` and `img`) are loaded. Here we can see that it happens in about the same time as `img.onload` (`img` is the last resource) and `window.onload`. Switching to `complete` state means the same as `window.onload`. The difference is that `window.onload` always works after all other `load` handlers.
 
-С другой стороны, следует иметь в виду, что событие `DOMContentLoaded` будет ждать не только, собственно, HTML-страницу, но и внешние скрипты, подключенные тегом `<script>` без атрибутов `defer/async`, а также стили перед такими скриптами.
 
-Событие `DOMContentLoaded` не поддерживается в IE8-, но почти все фреймворки умеют его эмулировать. Если нужна отдельная функция только для кросс-браузерного аналога `DOMContentLoaded` -- можно использовать [jquery.documentReady.js](https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js).
-</li>
-<li>Событие `window.onload` используют редко, поскольку обычно нет нужды ждать подгрузки *всех* ресурсов. Если же нужен конкретный ресурс (картинка или ифрейм), то можно поставить событие `onload` непосредственно на нём, мы посмотим, как это сделать, далее.</li>
-<li>Событие `window.onunload` почти не используется, как правило, оно бесполезно -- мало что можно сделать, зная, что окно браузера прямо сейчас закроется.</li>
-<li>Гораздо чаще применяется `window.onbeforeunload` -- это де-факто стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу. В системах редактирования документов оно используется повсеместно.</li>
-</ul>
+## Summary
 
+Page lifecycle events:
 
+- `DOMContentLoaded` event triggers on `document` when DOM is ready. We can apply JavaScript to elements at this stage.
+  - All scripts are executed except those that are external with `async` or `defer`
+  - Images and other resources may still continue loading.
+- `load` event on `window` triggers when the page and all resources are loaded. We rarely use it, because there's usually no need to wait for so long.
+- `beforeload` event on `window` triggers when the user wants to leave the page. If it returns a string, the browser shows a question whether the user really wants to leave or not.
+- `unload` event on `window` triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it's rarely used.
+- `document.readyState` is the current state of the document, changes can be tracked in the `readystatechange` event:
+  - `loading` -- the document is loading.
+  - `interactive` -- the document is parsed, happens at about the same time as `DOMContentLoaded`, but before it.
+  - `complete` -- the document and resources are loaded, happens at about the same time as `window.onload`, but before it.
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/iframe.html b/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/iframe.html
new file mode 100644
index 00000000..90b7fe0c
--- /dev/null
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/iframe.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  test iframe
+</body>
+</html>
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/index.html b/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/index.html
new file mode 100644
index 00000000..a4685a71
--- /dev/null
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/readystate.view/index.html
@@ -0,0 +1,10844 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <!-- the sequence should be like this:
+  [10] initial readyState:loading
+  [20] readyState:interactive
+  [21] DOMContentLoaded
+  [30] iframe onload
+  [40] readyState:complete
+  [40] img onload
+  [40] window onload
+  -->
+
+  <div id="events"></div>
+
+  <script>
+    function log(txt) {
+      events.insertAdjacentHTML('beforeend', `<div>[${Math.floor(performance.now())}] ${txt}</div>`);
+    }
+
+    log('initial readyState:' + document.readyState);
+
+    document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
+    document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));
+
+    window.onload = () => log('window onload');
+  </script>
+
+  <iframe src="iframe.html?speed=1&cache=0" style="visibility:hidden" onload="log('iframe onload')"></iframe>
+
+  <img src="http://en.js.cx/clipart/train.gif?speed=1&cache=0" id="img" style="position:absolute;right:0;top:0">
+  <script>
+    img.onload = () => log('img onload');
+  </script>
+
+  <div style="visibility:hidden">
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+    text to make the document load longer text to make the document load longer
+  </div>
+</body>
+</html>
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html b/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html
index e29bf72b..eacfda1f 100755
--- a/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
 </head>
-
 <body>
   <script>
     function setHandler() {
       window.onbeforeunload = function() {
-        return "Данные не сохранены. Точно перейти?";
+        return "There are unsaved changes. Leave now?";
       };
     }
   </script>
 
-  <button onclick="setHandler()">Поставить window.onbeforeunload</button>
+  <button onclick="setHandler()">Set window.onbeforeunload</button>
 
-  <a href="http://example.com">Уйти на EXAMPLE.COM</a>
+  <a href="http://example.com">Leave for EXAMPLE.COM</a>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.md
new file mode 100644
index 00000000..4b8fe50b
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.md
@@ -0,0 +1,6 @@
+
+The algorithm:
+1. Make `img` for every source.
+2. Add `onload/onerror` for every image.
+3. Increase the counter when either `onload` or `onerror` triggers.
+4. When the counter value equals to the sources count -- we're done: `callback()`.
diff --git a/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.view/index.html
new file mode 100644
index 00000000..c1624d03
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/solution.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+  <script>
+    function preloadImages(sources, callback) {
+      let counter = 0;
+
+      function onLoad() {
+        counter++;
+        if (counter == sources.length) callback();
+      }
+
+      for(let source of sources) {
+        let img = document.createElement('img');
+        img.onload = img.onerror = onLoad;
+        img.src = source;
+      }
+    }
+
+    // ---------- The test ----------
+
+    let sources = [
+      "https://en.js.cx/images-load/1.jpg",
+      "https://en.js.cx/images-load/2.jpg",
+      "https://en.js.cx/images-load/3.jpg"
+    ];
+
+    // add random characters to prevent browser caching
+    for (let i = 0; i < sources.length; i++) {
+      sources[i] += '?' + Math.random();
+    }
+
+    // for each image,
+    // let's create another img with the same src and check that we have its width immediately
+    function testLoaded() {
+      let widthSum = 0;
+      for (let i = 0; i < sources.length; i++) {
+        let img = document.createElement('img');
+        img.src = sources[i];
+        widthSum += img.width;
+      }
+      alert(widthSum);
+    }
+
+    // should output 300
+    preloadImages(sources, testLoaded);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/source.view/index.html
new file mode 100644
index 00000000..79935023
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/source.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+  <script>
+    function preloadImages(sources, callback) {
+      /* your code */
+    }
+
+    // ---------- The test ----------
+
+    let sources = [
+      "https://en.js.cx/images-load/1.jpg",
+      "https://en.js.cx/images-load/2.jpg",
+      "https://en.js.cx/images-load/3.jpg"
+    ];
+
+    // add random characters to prevent browser caching
+    for (let i = 0; i < sources.length; i++) {
+      sources[i] += '?' + Math.random();
+    }
+
+    // for each image,
+    // let's create another img with the same src and check that we have its width immediately
+    function testLoaded() {
+      let widthSum = 0;
+      for (let i = 0; i < sources.length; i++) {
+        let img = document.createElement('img');
+        img.src = sources[i];
+        widthSum += img.width;
+      }
+      alert(widthSum);
+    }
+
+    // every image is 100x100, the total width should be 300
+    preloadImages(sources, testLoaded);
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/task.md b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/task.md
new file mode 100644
index 00000000..bc742ab1
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-load-img-callback/task.md
@@ -0,0 +1,36 @@
+importance: 4
+
+---
+
+# Load images with a callback
+
+Normally, images are loaded when they are created. So i when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
+
+To show an image immediately, we can create it "in advance", like this:
+
+```js
+let img = document.createElement('img');
+img.src = 'my.jpg';
+```
+
+The browser starts loading the image and remembers it in the cache. Later, when the same image appears in the document (no matter how), it shows up immediately.
+
+**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
+
+For instance, this will show an `alert` after the images are loaded:
+
+```js
+function loaded() {
+  alert("Images loaded")
+}
+
+preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
+```
+
+In case of an error, the function should still assume the picture "loaded".
+
+In other words, the `callback` is executed when all images are either loaded or errored out.
+
+The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
+
+In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md
deleted file mode 100644
index 4d870d13..00000000
--- a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Подсказка
-
-Текст на странице пусть будет изначально `DIV`, с классом `img-replace` и атрибутом `data-src` для картинки. 
-
-Функция `replaceImg()` должна искать такие `DIV` и загружать изображение с указанным `src`. По `onload` осуществляется замена `DIV` на картинку.
-
-# Решение
-
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
deleted file mode 100755
index 4935f238..00000000
--- a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .img-replace {
-      float: left;
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
-  <hr>
-  <div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="https://js.cx/search/google.png" class="img-replace">
-    <span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
-  </div>
-
-  <div style="width:101px;height:40px;font-size:32px" data-src="https://js.cx/search/yandex.png" class="img-replace">
-    <span style="color:#F00">Я</span>ндекс
-  </div>
-
-  <div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
-
-
-  <script>
-    function replaceImg() {
-      var divs = document.querySelectorAll('div.img-replace');
-      for (var i = 0; i < divs.length; i++)(function(i) {
-        var img = document.createElement('img');
-        img.src = divs[i].getAttribute('data-src');
-        img.className = 'img-replace';
-
-        img.onload = function() {
-          divs[i].parentNode.replaceChild(img, divs[i]);
-        }
-
-      }(i))
-    }
-
-    setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
deleted file mode 100755
index eba12fd0..00000000
--- a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .img-replace {
-      float: left;
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <!-- Google -->
-
-  <div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
-    <span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
-  </div>
-
-  <!-- Яндекс -->
-  <div style="width:101px;height:40px;font-size:32px" class="img-replace">
-    <span style="color:#F00">Я</span>ндекс
-  </div>
-
-  <!-- Bing -->
-  <div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
-
-  <hr>
-  <!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
-
-  <img src="https://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
-  <img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
-  <img src="https://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md
deleted file mode 100644
index 0ba08c24..00000000
--- a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Красивый "ALT"
-
-[importance 5]
-
-Обычно, до того как изображение загрузится (или при отключенных картинках), посетитель видит пустое место с текстом из "ALT". Но этот атрибут не допускает HTML-форматирования.
-
-При мобильном доступе скорость небольшая, и хочется, чтобы посетитель сразу видел красивый текст.
-
-**Реализуйте "красивый" (HTML) аналог `alt` при помощи CSS/JavaScript, который затем будет заменён картинкой сразу же как только она загрузится.** А если загрузка не состоится -- то не заменён.
-
-Демо: (нажмите "перезагрузить", чтобы увидеть процесс загрузки и замены)
-[iframe src="solution" height="100"]
-
-Картинки для `bing` специально нет, так что текст остается "как есть".
-
-Исходный документ содержит разметку текста и ссылки на изображения.
-
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md
deleted file mode 100644
index 3c873dea..00000000
--- a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Подсказка
-
-Создайте переменную-счетчик для подсчёта количества загруженных картинок, и увеличивайте при каждом `onload/onerror`.
-
-Когда счетчик станет равен количеству картинок -- вызывайте `callback`.
-
-# Решение
-
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
deleted file mode 100755
index 23825080..00000000
--- a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    function preloadImages(sources, callback) {
-      var counter = 0;
-
-      function onLoad() {
-        counter++;
-        if (counter == sources.length) callback();
-      }
-
-      for (var i = 0; i < sources.length; i++) {
-        var img = document.createElement('img');
-        // сначала onload/onerror, затем src - важно для IE8-
-        img.onload = img.onerror = onLoad;
-        img.src = sources[i];
-      }
-
-    }
-
-    // ---------- Проверка ----------
-
-    var sources = [
-      "https://js.cx/images-load/1.jpg",
-      "https://js.cx/images-load/2.jpg",
-      "https://js.cx/images-load/3.jpg"
-    ];
-    for (var i = 0; i < sources.length; i++) {
-      sources[i] += '?' + Math.random();
-    }
-
-    function testLoaded() {
-      var widthSum = 0;
-      for (var i = 0; i < sources.length; i++) {
-        var img = document.createElement('img');
-        img.src = sources[i];
-        widthSum += img.width;
-      }
-      alert(widthSum); // 300!
-    }
-
-    // до загрузки - 0
-    testLoaded();
-    // после загрузки - 300
-    preloadImages(sources, testLoaded);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
deleted file mode 100755
index 1e3afe5a..00000000
--- a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    function preloadImages(sources, callback) {
-      /* ваш код */
-    }
-
-    // ---------- Проверка ----------
-
-    /* файлы для загрузки */
-    var sources = [
-      "https://js.cx/images-load/1.jpg",
-      "https://js.cx/images-load/2.jpg",
-      "https://js.cx/images-load/3.jpg"
-    ];
-    for (var i = 0; i < sources.length; i++) {
-      sources[i] += '?' + Math.random(); // добавляем параметр, чтобы без кеша (для теста)
-    }
-
-    /** если картинка загружена, то можно будет сразу получить её ширину
-     * создадим все картинки и проверим, есть ли у них ширина
-     */
-    function testLoaded() {
-      var widthSum = 0;
-      for (var i = 0; i < sources.length; i++) {
-        var img = document.createElement('img');
-        img.src = sources[i];
-        widthSum += img.width;
-      }
-      // каждое изображение 100x100, общая ширина должна быть 300px
-      alert(widthSum);
-    }
-
-    // до загрузки - выведет 0
-    testLoaded();
-
-    // после загрузки - выведет 300
-    preloadImages(sources, testLoaded);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md
deleted file mode 100644
index d21fe6a6..00000000
--- a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Загрузить изображения с коллбэком
-
-[importance 4]
-
-Создайте функцию `preloadImages(sources, callback)`, которая предзагружает изображения из массива `sources`, и после загрузки вызывает функцию `callback`.
-
-Пример использования:
-
-```js
-addScripts(["1.jpg", "2.jpg", "3.jpg"], callback);
-```
-
-Если вдруг возникает ошибка при загрузке -- считаем такое изображение загруженным, чтобы не ломать поток выполнения.
-
-Такая функция может полезна, например, для фоновой загрузки картинок в онлайн-галерею.
-
-В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить "0", затем "300".
-
- 
-
-
-
-
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md
deleted file mode 100644
index 753fe747..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Подсказка
-
-Добавляйте `SCRIPT` при помощи методов `DOM`:
-
-```js
-var script = document.createElement('script');
-script.src = src;
-
-// в документе может не быть HEAD или BODY,
-// но хотя бы один (текущий) SCRIPT в документе есть
-var s = document.getElementsByTagName('script')[0];
-s.parentNode.insertBefore(script, s); // перед ним и вставим
-```
-
-На скрипт повесьте обработчики `onload/onreadystatechange`.
-
-# Решение
-
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js
deleted file mode 100755
index 1729e58f..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function go() {
-  alert("ok");
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html
deleted file mode 100755
index e840c12d..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    function addScript(src, callback) {
-      var script = document.createElement('script');
-      script.src = src;
-      var s = document.getElementsByTagName('script')[0]
-      s.parentNode.insertBefore(script, s);
-
-      var loaded = false;
-
-      function onload() {
-        if (loaded) return; // повторный вызов
-        loaded = true;
-        callback();
-      }
-
-      script.onload = onload; // все браузеры, IE с версии 9
-
-      script.onreadystatechange = function() { // IE8-
-        if (this.readyState == 'loaded' || this.readyState == 'complete') {
-          setTimeout(onload, 0);
-        }
-      };
-
-    }
-
-    addScript("go.js", function() {
-      go();
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js
deleted file mode 100755
index 1729e58f..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function go() {
-  alert("ok");
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html
deleted file mode 100755
index fb498558..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    function addScript(src, callback) {
-      /* ваш код */
-    }
-
-    addScript("go.js", function() {
-      go();
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md b/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md
deleted file mode 100644
index e20c2320..00000000
--- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Скрипт с коллбэком
-
-[importance 4]
-
-Создайте функцию `addScript(src, callback)`, которая загружает скрипт с данным `src`, и после его загрузки и выполнения вызывает функцию `callback`.
-
-Скрипт может быть любым, работа функции не должна зависеть от его содержимого.
-
-Пример использования:
-
-```js
-// go.js содержит функцию go()
-addScript("go.js", function() {
-  go();
-});
-```
-
-Ошибки загрузки обрабатывать не нужно.
-
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md
deleted file mode 100644
index cfe4d03f..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Подсказки
-
-Создайте переменную-счетчик для подсчёта количества загруженных скриптов.
-
-Чтобы один скрипт не учитывался два раза (например, `onreadystatechange` запустился при `loaded` и `complete`), учитывайте его состояние в объекте `loaded`. Свойство `loaded[i] = true`  означает что `i`-й скрипт уже учтён.
-
-# Решение
-
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js
deleted file mode 100755
index 9d6742cd..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function a() {
-  b();
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js
deleted file mode 100755
index ce1689f2..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function b() {
-  c();
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js
deleted file mode 100755
index e343ee11..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function c() {
-  alert('ok');
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html
deleted file mode 100755
index a98093ad..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    function addScript(src) {
-      var script = document.createElement('script');
-      script.src = src;
-      var s = document.getElementsByTagName('script')[0]
-      s.parentNode.insertBefore(script, s);
-      return script;
-    }
-
-    function addScripts(scripts, callback) {
-      var loaded = {}; // Для загруженных файлов loaded[i] = true
-      var counter = 0;
-
-      function onload(i) {
-        if (loaded[i]) return; // лишний вызов onload/onreadystatechange
-        loaded[i] = true;
-        counter++;
-        if (counter == scripts.length) callback();
-      }
-
-      for (var i = 0; i < scripts.length; i++)(function(i) {
-        var script = addScript(scripts[i]);
-
-        script.onload = function() {
-          onload(i);
-        };
-
-        script.onreadystatechange = function() { // IE8-
-          if (this.readyState == 'loaded' || this.readyState == 'complete') {
-            setTimeout(this.onload, 0); // возможны повторные вызовы onload
-          }
-        };
-
-      }(i));
-
-    }
-
-    addScripts(["a.js", "b.js", "c.js"], function() {
-      a()
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js
deleted file mode 100755
index 9d6742cd..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function a() {
-  b();
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js
deleted file mode 100755
index ce1689f2..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function b() {
-  c();
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js
deleted file mode 100755
index e343ee11..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function c() {
-  alert('ok');
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html
deleted file mode 100755
index cff5595f..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <script>
-    /* ваш код */
-
-    // функция a() сработает только если загружены a.js, b.js, c.js
-    addScripts(["a.js", "b.js", "c.js"], function() {
-      a()
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md
deleted file mode 100644
index f286dfc2..00000000
--- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Скрипты с коллбэком
-
-[importance 5]
-
-Создайте функцию `addScripts(scripts, callback)`, которая загружает скрипты из массива `scripts`, и *после загрузки и выполнения их всех* вызывает функцию `callback`.
-
-Скрипт может быть любым, работа функции не должна зависеть от его содержимого.
-
-Пример использования:
-
-```js
-//+ no-beautify
-addScripts(["a.js", "b.js", "c.js"], function() { a() });
-/* функция a() описана в a.js и использует b.js,c.js */
-```
-
-<ul>
-<li>Ошибки загрузки обрабатывать не нужно.</li>
-<li>Один скрипт не ждёт другого. Они все загружаются, а по окончании вызывается обработчик `callback`.</li>
-
-Исходный содержит скрипты `a.js`, `b.js`, `c.js`: 
-
-
-
diff --git a/2-ui/3-event-details/11-onload-onerror/article.md b/2-ui/3-event-details/11-onload-onerror/article.md
index 03b4bb41..d9bcfa13 100644
--- a/2-ui/3-event-details/11-onload-onerror/article.md
+++ b/2-ui/3-event-details/11-onload-onerror/article.md
@@ -1,241 +1,91 @@
-# Загрузка скриптов, картинок, фреймов: onload и onerror
+# Resource loading: onload and onerror
 
-Браузер позволяет отслеживать загрузку внешних ресурсов -- скриптов, ифреймов, картинок и других.
+The browser allows to track the loading of external resources -- scripts, iframes, pictures and so on.
 
-Для этого есть два события:
-<ul>
-<li>`onload` -- если загрузка успешна.</li>
-<li>`onerror` -- если при загрузке произошла ошибка.</li>
-</ul>
+There are two events for it:
 
-## Загрузка SCRIPT
+- `onload` -- successful load,
+- `onerror` -- an error occured.
 
-Рассмотрим следующую задачу. 
+## Loading a script
 
-В браузере работает сложный интерфейс и, чтобы создать очередной компонент, нужно загрузить скрипт с сервера.
+Let's say we need to call a function that resides in an external script.
 
-Подгрузить внешний скрипт -- достаточно просто:
+We can load it dynamically, like this:
 
 ```js
-var script = document.createElement('script');
+let script = document.createElement('script');
 script.src = "my.js";
 
-document.body.appendChild(script);
+document.head.append(script);
 ```
 
-...Но как после подгрузки выполнить функцию, которая объявлена в этом скрипте? Для этого нужно отловить момент окончания загрузки и выполнения тега `<script>`.
+...But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
 
-### script.onload 
+### script.onload
 
-Главным помощником станет событие `onload`. Оно сработает, когда скрипт загрузился и выполнился.
+The main helper is the `load` event. It triggers after the script was loaded and executed.
 
-Например:
+For instance:
 
-```js
-//+ run
-var script = document.createElement('script');
-script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"
-document.body.appendChild(script);
+```js run untrusted
+let script = document.createElement('script');
+
+// can load any script, from any domain
+script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
+document.head.append(script);
 
 *!*
 script.onload = function() {
-    // после выполнения скрипта становится доступна функция _
-    alert( _ ); // её код
-  }
+  // the script creates a helper function "_"
+  alert(_); // the function is available
+};
 */!*
 ```
 
-Это даёт возможность, как в примере выше, получить переменные из скрипта и выполнять объявленные в нём функции.
+So in `onload` we can use script variables, run functions etc.
 
-...А что, если загрузка скрипта не удалась? Например, такого скрипта на сервере нет (ошибка 404) или сервер "упал" (ошибка 500). 
+...And what if the loading failed? For instance, there's no such script (error 404) or the server or the server is down (unavailable).
 
-Такую ситуацию тоже нужно как-то обрабатывать, хотя бы сообщить посетителю о возникшей проблеме.
+### script.onerror
 
-### script.onerror 
+Errors that occur during the loading (but not execution) of the script can be tracked on `error` event.
 
-Любые ошибки загрузки (но не выполнения) скрипта отслеживаются обработчиком `onerror`.
+For instance, let's request a script that doesn't exist:
 
-Например, сделаем запрос заведомо отсутствующего скрипта:
-
-```js
-//+ run
-var script = document.createElement('script');
-script.src = "https://example.com/404.js"
-document.body.appendChild(script);
+```js run
+let script = document.createElement('script');
+script.src = "https://example.com/404.js"; // no such script
+document.head.append(script);
 
 *!*
 script.onerror = function() {
-  alert( "Ошибка: " + this.src );
+  alert("Error loading " + this.src); // Error loading https://example.com/404.js
 };
 */!*
 ```
 
-### IE8-: script.onreadystatechange [#onreadystatechange]
-
-Примеры выше работают во всех браузерах, кроме IE8-.
-
-В IE для отслеживания загрузки есть другое событие: `onreadystatechange`. Оно срабатывает многократно, при каждом обновлении состояния загрузки.
-
-Текущая стадия процесса находится в `script.readyState`:
-<dl>
-<dt>`loading`</dt>
-<dd>В процессе загрузки.</dd>
-<dt>`loaded`</dt>
-<dd>Получен ответ с сервера -- скрипт или ошибка. Скрипт на фазе `loaded` может быть ещё не выполнен.</dd>
-<dt>`complete`</dt>
-<dd>Скрипт выполнен.</dd>
-</dl>
-
-Например, рабочий скрипт:
-
-```js
-//+ run no-beautify
-var script = document.createElement('script');
-script.src = "https://code.jquery.com/jquery.js";
-document.documentElement.appendChild(script);
-
-*!*
-script.onreadystatechange = function() {
-  alert(this.readyState); // loading -> loaded -> complete
-}
-*/!*
-```
-
-Скрипт с ошибкой:
-
-```js
-//+ run no-beautify
-var script = document.createElement('script');
-script.src = "http://ajax.googleapis.com/404.js";
-document.documentElement.appendChild(script);
-
-*!*
-script.onreadystatechange = function() {
-  alert(this.readyState);  // loading -> loaded
-}
-*/!*
-```
-
-Обратим внимание на две особенности:
-<ul>
-<li>**Стадии могут пропускаться.** 
-
-Если скрипт в кэше браузера -- он сразу даст `complete`. Вы можете увидеть это, если несколько раз запустите первый пример.</li>
-<li>**Нет особой стадии для ошибки.** 
-
-В примере выше это видно, обработка останавливается на `loaded`.
-</li>
-</ul>
-
-Итак, самое надёжное средство для IE8- поймать загрузку (или ошибку загрузки) -- это повесить обработчик на событие `onreadystatechange`, который будет срабатывать и на стадии `complete` и на стадии `loaded`. Так как скрипт может быть ещё не выполнен к этому моменту, то вызов функции лучше сделать через `setTimeout(.., 0)`. 
-
-Пример ниже вызывает `afterLoad` после загрузки скрипта и работает только в IE:
-
-```js
-//+ run no-beautify
-var script = document.createElement('script');
-script.src = "https://code.jquery.com/jquery.js";
-document.documentElement.appendChild(script);
-
-function afterLoad() {
-  alert("Загрузка завершена: " + typeof(jQuery));
-}
-
-*!*
-script.onreadystatechange = function() {
-  if (this.readyState == "complete") { // на случай пропуска loaded
-    afterLoad(); // (2)
-  }
-
-  if (this.readyState == "loaded") {
-    setTimeout(afterLoad, 0);  // (1)
-    
-    // убираем обработчик, чтобы не сработал на complete
-    this.onreadystatechange = null; 
-  }
-}
-*/!*
-```
-
-Вызов `(1)` выполнится при первой загрузке скрипта, а `(2)` -- при второй, когда он уже будет в кеше, и стадия станет сразу `complete`.
+Please note that we can't get error details here. We don't know was it error 404 or 500 or something else. Just that the loading failed.
 
-Функция `afterLoad` может и не обнаружить `jQuery`, если при загрузке была ошибка, причём не важно какая -- файл не найден или синтаксис скрипта ошибочен.
+## Other resources
 
-### Кросс-браузерное решение
+The `load` and `error` events also work for other resources. There may be minor differences though.
 
-Для кросс-браузерной обработки загрузки скрипта или её ошибки поставим обработчик на все три события: `onload`, `onerror`, `onreadystatechange`.
+For instance:
 
-Пример ниже выполняет функцию `afterLoad` после загрузки скрипта *или* при ошибке. 
+`<img>`, `<link>` (external stylesheets)
+: Both `load` and `error` events work as expected.
 
-Работает во всех браузерах:
+`<iframe>`
+: Only `load` event when the iframe loading finished. It triggers both for successful load and in case of an error. That's for historical reasons.
 
-```js
-//+ run
-var script = document.createElement('script');
-script.src = "https://code.jquery.com/jquery.js";
-document.documentElement.appendChild(script);
-
-function afterLoad() {
-  alert( "Загрузка завершена: " + typeof(jQuery) );
-}
-
-script.onload = script.onerror = function() {
-  if (!this.executed) { // выполнится только один раз
-    this.executed = true;
-    afterLoad();
-  }
-};
+## Summary
 
-script.onreadystatechange = function() {
-  var self = this;
-  if (this.readyState == "complete" || this.readyState == "loaded") {
-    setTimeout(function() {
-      self.onload()
-    }, 0); // сохранить "this" для onload
-  }
-};
-```
-
-## Загрузка других ресурсов
-
-Поддержка этих событий для других типов ресурсов различна:
-
-<dl>
-<dt>`<img>`, `<link>` (стили)</dt>
-<dd>Поддерживает `onload/onerror` во всех браузерах.</dd>
-<dt>`<iframe>`</dt>
-<dd>Поддерживает `onload` во всех браузерах. Это событие срабатывает как при успешной загрузке, так и при ошибке. 
-
-Обратим внимание, что если `<iframe>` загружается с того же домена, то можно, используя `iframe.contentWindow.document` получить ссылку на документ и поставить обработчик `DOMContentLoaded`. А вот если `<iframe>` -- с другого домена, то так не получится, однако сработает `onload`. 
-</dd>
-</dl>
-
-## Итого
-
-В этой статье мы рассмотрели события `onload/onerror` для ресурсов.
-
-Их можно обобщить, разделив на рецепты:
-
-<dl>
-<dt>Отловить загрузку скрипта (включая ошибку)</dt>
-<dd>Ставим обработчики на `onload` + `onerror` + (для IE8-) `onreadystatechange`, как указано в рецепте выше</dd>
-<dt>Отловить загрузку картинки `<img>` или стиля `<link>`</dt>
-<dd>Ставим обработчики на `onload` + `onerror`
-
-```js
-//+ no-beautify
-var img = document.createElement('img');
-img.onload = function() { alert("Успех "+this.src };
-img.onerror = function() { alert("Ошибка "+this.src };
-img.src = ...
-```
+Pictures `<img>`, external styles, scripts and other resources provide `load` and `error` events to track their loading:
 
-Изображения начинают загружаться сразу при создании, не нужно их для этого вставлять в HTML.
+- `load` triggers on a successful load,
+- `error` triggers on a failed load.
 
-**Чтобы работало в IE8-, `src` нужно ставить *после* `onload/onerror`.**
-</dd>
-<dt>Отловить загрузку `<iframe>`</dt>
-<dd>Поддерживается только обработчик `onload`. Он сработает, когда `IFRAME` загрузится, со всеми подресурсами, а также в случае ошибки.
-</dd>
-</dl>
+The only exception is `<iframe>`: for historical reasons it always triggers `load`, for any load completion, even if the page is not found.
 
+The `readystatechange` event also works for resources, but is rarely used, because `load/error` events are simpler.
diff --git a/2-ui/3-event-details/2-unselectable/article.md b/2-ui/3-event-details/2-unselectable/article.md
deleted file mode 100644
index 66133de3..00000000
--- a/2-ui/3-event-details/2-unselectable/article.md
+++ /dev/null
@@ -1,186 +0,0 @@
-# Мышь: отмена выделения, невыделяемые элементы
-
-У кликов мыши есть неприятная особенность.
-
-Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.
-
-Если мы хотим обрабатывать эти события сами, то такое выделение -- некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым. 
-
-Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.
-
-[cut]
-
-## Способ 1: отмена mousedown/selectstart
-
-Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.
-
-Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является *выделение текста браузером*.
-
-```html
-<!--+ autorun height=60 -->
-<span ondblclick="alert('двойной клик!')">Текст</span>
-```
-
-Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события [selectstart](http://msdn.microsoft.com/en-us/library/ms536969%28VS.85%29.aspx) в IE и `mousedown` в других браузерах.
-
-Полный код элемента, который обрабатывает двойной клик без выделения:
-
-```html
-<!--+ autorun height=60 -->
-<div ondblclick="alert('Тест')" *!*onselectstart="return false" onmousedown="return false"*/!*>
-  Двойной клик сюда выведет "Тест", без выделения
-</div>
-```
-
-При установке на родителя -- все его потомки станут невыделяемыми:
-
-```html
-<!--+ autorun height=140 -->
-Элементы списка не выделяются при клике:
-<ul onmousedown="return false" onselectstart="return false">
-  <li>Винни-Пух</li>
-  <li>Ослик Иа</li>
-  <li>Мудрая Сова</li>
-  <li>Кролик. Просто кролик.</li>
-</ul>
-```
-
-[smart header="Выделение, всё же, возможно"]
-Отмена действия браузера при `mousedown/selectstart` отменяет выделение при клике, но не запрещает его полностью.
-
-Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это. 
-
-Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.
-[/smart]
-
-## Способ 2: снятие выделения пост-фактум
-
-Вместо *предотвращения* выделения, можно его снять в обработчике события, *после* того, как оно уже произошло.
-
-Для этого мы используем методы работы с выделением, которые описаны в отдельной главе [](/range-textrange-selection). Здесь нам понадобится всего лишь одна функция `clearSelection`, которая будет снимать выделение.
-
-Пример со снятием выделения при двойном клике на элемент списка:
-
-```html
-<!--+ autorun height=60 -->
-<ul>
-  <li ondblclick="clearSelection()">Выделение отменяется при двойном клике.</li>
-</ul>
-
-<script>
-  function clearSelection() {
-    if (window.getSelection) {
-      window.getSelection().removeAllRanges();
-    } else { // старый IE
-      document.selection.empty();
-    }
-  }
-</script>
-```
-
-У этого подхода есть две особенности, на которые стоит обратить внимание:
-
-<ul>
-<li>Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.</li>
-<li>Выделение при помощи передвижения зажатой мыши всё еще работает, так что посетитель имеет возможность выделить содержимое элемента.</li>
-</ul>
-
-
-
-## Способ 3: свойство user-select
-
-Существует нестандартное CSS-свойство `user-select`, которые делает элемент невыделяемым.
-
-Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.
-
-Это свойство работает (с префиксом) везде, кроме IE9-:
-
-```html
-<!--+ autorun height=auto -->
-<style>
-  b {
-    -webkit-user-select: none;
-    /* user-select -- это нестандартное свойство */
-    
-    -moz-user-select: none;
-    /* поэтому нужны префиксы */
-    
-    -ms-user-select: none;
-  }
-</style>
-
-Строка до..
-<div ondblclick="alert('Тест')">
-  <b>Этот текст нельзя выделить (кроме IE9-)</b>
-</div>
-.. Строка после
-```
-
-Читайте на эту тему также [Controlling Selection with CSS user-select](http://blogs.msdn.com/b/ie/archive/2012/01/11/controlling-selection-with-css-user-select.aspx).
-
-
-### IE9-: атрибут unselectable="on"
-
-В IE9- нет `user-select`, но есть атрибут [unselectable](http://msdn.microsoft.com/en-us/library/ms534706%28v=vs.85%29.aspx). 
-
-Он отменяет выделение, но у него есть особенности:
-<ol>
-<li>Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.</li>
-<li>Во-вторых, текст, в отличие от `user-select`, всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.</li>
-</ol>
-
-```html
-<div ondblclick="alert('Тест')" *!*unselectable="on"*/!* style="border:1px solid black">
-  Этот текст невыделяем в IE, <em>кроме дочерних элементов</em>
-</div>
-```
-
-Левая часть текста в IE не выделяется при двойном клике. Правую часть (`em`) можно выделить, т.к. на ней нет атрибута `unselectable`. 
-
-[online]
-В действии:
-<div ondblclick="alert('Тест')" unselectable="on" style="border:1px solid black">
-  Этот текст невыделяем в IE, <em>кроме дочерних элементов</em>
-</div>
-[/online]
-
-
-## Итого
-
-Для отмены выделения есть несколько способов:
-
-<ol>
-<li>CSS-свойство `user-select` -- везде кроме IE9- (нужен префикс, нестандарт).</li>
-<li>Атрибут `unselectable="on"` -- работает для любых IE (должен быть у всех потомков)</li>
-<li>Отмена действий на `mousedown` и `selectstart`:
-
-```js
-elem.onmousedown = elem.onselectstart = function() {
-  return false;
-};
-```
-
-</li>
-<li>Отмена выделения пост-фактум через функцию `clearSelection()`, описанную выше.</li>
-</ol>
-
-Какой же способ выбирать?
-
-Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают. 
-
-Недостаток `user-select` -- в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
-
-В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
-
-Если уж хочется запретить копирование -- можно использовать событие `oncopy`:
-
-```html
-<!--+ autorun height=80  no-beautify -->
-<div oncopy="alert('Копирование запрещено');return false">
-  Уважаемый копирователь, 
-  почему-то автор хочет заставить вас покопаться в исходном коде этой страницы.
-  Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, 
-  ну а если нет, то увы...
-</div>
-```
-
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
index ffa2aad8..8fbae4c7 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -6,17 +6,15 @@
   <style>
     body {
       height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
+      /* the tooltip should work after page scroll too */
     }
-    
+
     .tooltip {
       position: fixed;
       z-index: 100;
-      /* подсказка должна перекрывать другие элементы */
-      
+
       padding: 10px 20px;
-      /* красивости... */
-      
+
       border: 1px solid #b3c9ce;
       border-radius: 4px;
       text-align: center;
@@ -25,13 +23,13 @@
       background: #fff;
       box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
     }
-    
+
     #house {
       margin-top: 50px;
       width: 400px;
       border: 1px solid brown;
     }
-    
+
     #roof {
       width: 0;
       height: 0;
@@ -40,7 +38,7 @@
       border-bottom: 20px solid brown;
       margin-top: -20px;
     }
-    
+
     p {
       text-align: justify;
       margin: 10px 3px;
@@ -51,70 +49,64 @@
 <body>
 
 
-  <div data-tooltip="Это – внутренность дома" id="house">
-    <div data-tooltip="Это – крыша" id="roof"></div>
+  <div data-tooltip="Here is the house interior" id="house">
+    <div data-tooltip="Here is the roof" id="roof"></div>
 
-    <p>Жили-были на свете три поросёнка. Три брата.</p>
+    <p>Once upon a time there was a mother pig who had three little pigs.</p>
 
-    <p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
+    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
 
-    <p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
+    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
 
-    <p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше&hellip;">Наведи на меня</a></p>
+    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
 
   </div>
 
   <script>
-    var showingTooltip;
-
-    document.onmouseover = function(e) {
-      var target = e.target;
+    let tooltip;
 
-      // ВАЖНО: mouseover может сработать сразу на потомке
-      // минуя родителя (при быстром движении мышью)
+    document.onmouseover = function(event) {
+      // important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
+      // so mouseover may happen on a child.
 
-      // пройти вверх до первого элемента с data-tooltip
-      while (target !== this) {
-        var tooltip = target.getAttribute('data-tooltip');
-        if (tooltip) break;
-        target = target.parentNode;
-      }
+      let anchorElem = event.target.closest('[data-tooltip]');
 
-      if (!tooltip) return;
+      if (!anchorElem) return;
 
-      // показать и запомнить подсказку
-      showingTooltip = showTooltip(tooltip, target);
+      // show tooltip and remember it
+      tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
     }
 
     document.onmouseout = function() {
-      // возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
-      // но в этом случае сразу же будет и mouseover, 
-      // то есть подсказка будет уничтожена и тут же показана заново
-      // 
-      // это лишние расходы, их можно избежать дополнительными проверками
-      if (showingTooltip) {
-        document.body.removeChild(showingTooltip);
-        showingTooltip = false;
+      // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling)
+      // but in this case we'll have an immediate mouseover,
+      // so the tooltip will be destroyed and shown again
+      //
+      // that's an overhead, but here it's not visible
+      // can be fixed with additional checks
+      if (tooltip) {
+        tooltip.remove();
+        tooltip = false;
       }
 
     }
 
 
-    function showTooltip(text, elem) {
-      var tooltipElem = document.createElement('div');
+    function showTooltip(anchorElem, html) {
+      let tooltipElem = document.createElement('div');
       tooltipElem.className = 'tooltip';
-      tooltipElem.innerHTML = text;
-      document.body.appendChild(tooltipElem);
+      tooltipElem.innerHTML = html;
+      document.body.append(tooltipElem);
 
-      var coords = elem.getBoundingClientRect();
+      let coords = anchorElem.getBoundingClientRect();
 
-      var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth) / 2;
-      if (left < 0) left = 0; // не вылезать за левую границу экрана
+      // position the tooltip over the center of the element
+      let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
+      if (left < 0) left = 0;
 
-      // не вылезать за верхнюю границу окна
-      var top = coords.top - tooltipElem.offsetHeight - 5;
+      let top = coords.top - tooltipElem.offsetHeight - 5;
       if (top < 0) {
-        top = coords.top + elem.offsetHeight + 5;
+        top = coords.top + anchorElem.offsetHeight + 5;
       }
 
       tooltipElem.style.left = left + 'px';
@@ -124,9 +116,7 @@
     }
 
 
-
   </script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
index 44216810..8abb923d 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -6,15 +6,30 @@
   <style>
     body {
       height: 2000px;
-      /* подсказка должна работать при прокрутке */
+      /* the tooltip should work after page scroll too */
     }
-    
+
+    .tooltip {
+      position: fixed;
+      z-index: 100;
+
+      padding: 10px 20px;
+
+      border: 1px solid #b3c9ce;
+      border-radius: 4px;
+      text-align: center;
+      font: italic 14px/1.3 arial, sans-serif;
+      color: #333;
+      background: #fff;
+      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
+    }
+
     #house {
       margin-top: 50px;
       width: 400px;
       border: 1px solid brown;
     }
-    
+
     #roof {
       width: 0;
       height: 0;
@@ -23,7 +38,7 @@
       border-bottom: 20px solid brown;
       margin-top: -20px;
     }
-    
+
     p {
       text-align: justify;
       margin: 10px 3px;
@@ -34,19 +49,22 @@
 <body>
 
 
-  <div data-tooltip="Это – внутренность дома" id="house">
-    <div data-tooltip="Это – крыша" id="roof"></div>
+  <div data-tooltip="Here is the house interior" id="house">
+    <div data-tooltip="Here is the roof" id="roof"></div>
 
-    <p>Жили-были на свете три поросёнка. Три брата.</p>
+    <p>Once upon a time there was a mother pig who had three little pigs.</p>
 
-    <p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
+    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
 
-    <p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
+    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
 
-    <p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше&hellip;">Наведи на меня</a></p>
+    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
 
   </div>
 
-</body>
+  <script>
+    // ...your code...
+  </script>
 
-</html>
\ No newline at end of file
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
index d2ed652e..435bac0f 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -1,25 +1,25 @@
-# Поведение "вложенная подсказка"
+importance: 5
 
-[importance 5]
+---
 
-Напишите JS-код, который будет показывать всплывающую подсказку над элементом, если у него есть атрибут `data-tooltip`. 
+# Improved tooltip behavior
 
-Условие аналогично задаче [](/task/behavior-tooltip), но здесь необходима поддержка вложенных элементов. При наведении показывается самая вложенная подсказка.
+Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
 
-Например:
+That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
+
+For instance:
 
 ```html
-<div data-tooltip="Это – внутренность дома" id="house">
-  <div data-tooltip="Это – крыша" id="roof"></div>
+<div data-tooltip="Here – is the house interior" id="house">
+  <div data-tooltip="Here – is the roof" id="roof"></div>
   ...
-  <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше">Наведи на меня</a>
+  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
 </div>
 ```
 
-Результат в ифрейме с документом:
+The result in iframe:
 
 [iframe src="solution" height=300 border=1]
 
-Вы можете использовать как заготовку решение задачи [](/task/behavior-tooltip).
-
-
+P.S. Hint: only one tooltip may show up at the same time.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
index ecea5df5..c4af78b1 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
@@ -1,19 +1,18 @@
-Будем замерять скорость движения курсора. 
 
-Для этого можно запустить `setInterval`, который каждые 100мс (или другой интервал) будет сравнивать текущие координаты курсора с предыдущими и, если расстояние пройдено маленькое, считаем, что посетитель "навёл указатель на элемент", вызвать `options.over`. 
+The algorithm looks simple:
+1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
+2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
+3. If the speed is slow, then run `over`.
+4. Later if we're out of the element, and `over` was executed, run `out`.
 
-В браузере нет способа "просто получить" текущие координаты. Это может сделать обработчик события, в данном случае `mousemove`. Поэтому нужно будет поставить обработчик на `mousemove` и при каждом движении запоминать текущие координаты, чтобы `setInterval` мог раз в 100мс сравнивать их.
+The question is: "How to measure the speed?"
 
-Можно обойтись и без `setInterval` -- сравнивать координаты при каждом срабатывании `mousemove`. Если передвинулись на маленькое расстояние с последнего `mousemove` -- это "наведение на элемент", а на большое -- игнорируем. Вариант с `setInterval` лучше с точки зрения производительности -- `mousemove` происходит уж очень часто, но если проверка несложная, то и `mousemove` подойдёт.
-
-Имеет смысл начинать анализ координат и отслеживание `mousemove` при заходе на элемент, а заканчивать -- при выходе с него.
-
-Чтобы точно отловить момент входа и выхода, без учёта подэлементов (во избежание мигания), можно использовать `mouseenter/mouseleave`. 
-
-В решении, предложенном ниже, однако, используется `mouseover/mouseout`, так как это позволит легко "прикрутить" к такому объекту делегирование, если потребуется. А, чтобы не было лишних срабатываний, лишние переходы отфильтровываются.
-
-При этом при обнаружении "наведения на элемент" это запоминается в переменной `isHover` и вызывается `options.over`, а затем, при выходе с элемента, если было "наведение", вызывается `options.out`.
+The first idea would be: to run our function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
 
+Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
 
+The only way to get coordinates is to listen to mouse events, like `mousemove`.
 
+So we can set a handler on `mousemove` to track coordinates and remember them. Then we can compare them, once per `100ms`.
 
+P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
index 0a9e90f8..a78c7c55 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
@@ -1,75 +1,106 @@
-function HoverIntent(options) {
+'use strict';
 
-  options = Object.create(options); // not to modify the object
-  options.interval = options.interval || 100;
+class HoverIntent {
 
-  // скорость меньше 1px/ms  считается остановкой над элементом
-  options.sensitivity = options.sensitivity || 0.1;
-  var elem = options.elem;
+  constructor({
+    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
+    interval = 100,    // measure mouse speed once per 100ms
+    elem,
+    over,
+    out
+  }) {
+    this.sensitivity = sensitivity;
+    this.interval = interval;
+    this.elem = elem;
+    this.over = over;
+    this.out = out;
 
-  // instantiate variables
-  // cX, cY = current X and Y position of mouse, updated by mousemove event
-  // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
-  var cX, cY, pX, pY, cTime, pTime;
-  var checkSpeedInterval;
-  var isOverElement;
-  var isHover;
+    // make sure "this" is the object in event handlers.
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseOver = this.onMouseOver.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
 
-  // A private function for handling mouse 'hovering'
-  elem.addEventListener("mouseover", function(event) {
+    // and in time-measuring function (called from setInterval)
+    this.trackSpeed = this.trackSpeed.bind(this);
 
-    if (isOverElement) {
-      // если мы и так над элементом, то это всплывший переход внутри него
-      // мы и так уже замеряем скорость, поэтому этот переход лишний
+    elem.addEventListener("mouseover", this.onMouseOver);
+
+    elem.addEventListener("mouseout", this.onMouseOut);
+
+  }
+
+  onMouseOver(event) {
+
+    if (this.isOverElement) {
+      // if we're over the element, then ignore the event
+      // we are already measuring the speed
       return;
     }
 
-    isOverElement = true;
-
-    // при каждом движении мыши mousemove мы будем вычислять расстояние между
-    // предыдущими и текущими координатами курсора 
-    // если оно меньше sensivity, то скорость маленькая и это наведение на элемент
-    // pX, pY - "предыдущие" координаты
-    pX = event.pageX;
-    pY = event.pageY;
-    pTime = Date.now();
-
-    elem.addEventListener('mousemove', onMouseMove);
-  });
-
-  elem.addEventListener("mouseout", function(event) {
-    // если ушли вовне элемента
-    if (event.relatedTarget && !elem.contains(event.relatedTarget)) {
-      isOverElement = false;
-      elem.removeEventListener('mousemove', onMouseMove);
-      if (isHover) {
-        // если была остановка над элементом
-        options.out.call(elem, event);
-        isHover = false;
+    this.isOverElement = true;
+
+    // after every mousemove we'll be check the distance
+    // between the previous and the current mouse coordinates
+    // if it's less than sensivity, then the speed is slow
+
+    this.prevX = event.pageX;
+    this.prevY = event.pageY;
+    this.prevTime = Date.now();
+
+    elem.addEventListener('mousemove', this.onMouseMove);
+    this.checkSpeedInterval = setInterval(this.trackSpeed, this.interval);
+  }
+
+  onMouseOut(event) {
+    // if left the element
+    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
+      this.isOverElement = false;
+      this.elem.removeEventListener('mousemove', this.onMouseMove);
+      clearInterval(this.checkSpeedInterval);
+      if (this.isHover) {
+        // if there was a stop over the element
+        this.out.call(this.elem, event);
+        this.isHover = false;
       }
     }
-  });
+  }
+
+  onMouseMove(event) {
+    this.lastX = event.pageX;
+    this.lastY = event.pageY;
+    this.lastTime = Date.now();
+  }
 
-  function onMouseMove(event) {
-    cX = event.pageX;
-    cY = event.pageY;
-    cTime = Date.now();
+  trackSpeed() {
 
-    if (pTime == cTime) return; // когда mousemove вместе с mouseover
+    let speed;
 
-    var speed = Math.sqrt(Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2)) / (cTime - pTime);
+    if (!this.lastTime || this.lastTime == this.prevTime) {
+      // cursor didn't move
+      speed = 0;
+    } else {
+      speed = Math.sqrt(
+        Math.pow(this.prevX - this.lastX, 2) +
+        Math.pow(this.prevY - this.lastY, 2)
+      ) / (this.lastTime - this.prevTime);
+    }
 
-    if (speed < options.sensitivity) {
-      // если с предыдущей позиции меньше sensivity дистанция, то "остановка на элементе"
-      elem.removeEventListener("mousemove", onMouseMove);
-      isHover = true;
-      options.over.call(elem, event);
+    if (speed < this.sensitivity) {
+      clearInterval(this.checkSpeedInterval);
+      this.isHover = true;
+      this.over.call(this.elem, event);
     } else {
-      // следующее измерение с текущей точки
-      pX = cX;
-      pY = cY;
-      pTime = cTime;
+      // speed fast, remember new coordinates as the previous ones
+      this.prevX = this.lastX;
+      this.prevY = this.lastY;
+      this.prevTime = this.lastTime;
     }
   }
 
-}
\ No newline at end of file
+  destroy() {
+    elem.removeEventListener('mousemove', this.onMouseMove);
+    elem.removeEventListener('mouseover', this.onMouseOver);
+    elem.removeEventListener('mouseout', this.onMouseOut);
+  };
+
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
index f6db3438..df0f1365 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
@@ -1,43 +1,40 @@
 <!doctype html>
-<html lang="en">
+<html>
 
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <script src="hoverIntent.js"></script>
+  <script src="https://en.js.cx/test/libs.js"></script>
+  <script src="test.js"></script>
 </head>
 
 <body>
 
-
   <div id="elem" class="clock">
     <span class="hours">12</span> :
     <span class="minutes">30</span> :
     <span class="seconds">00</span>
   </div>
 
-  <script>
-    var tooltip = document.createElement('div');
-    tooltip.className = "tooltip";
-    tooltip.innerHTML = "Подсказка";
+  <div id="tooltip" hidden>Tooltip</div>
 
-    new HoverIntent({
-      elem: elem,
-      over: function() {
-        tooltip.style.left = this.getBoundingClientRect().left + 'px';
-        tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
-        document.body.appendChild(tooltip);
-      },
-      out: function() {
-        document.body.removeChild(tooltip);
-      }
-    });
+  <script>
+    // for the demo
+    setTimeout(function() {
+      new HoverIntent({
+        elem,
+        over() {
+          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+          tooltip.hidden = false;
+        },
+        out() {
+          tooltip.hidden = true;
+        }
+      });
+    }, 2000);
   </script>
 
-
-
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css
index a04e5f9d..2fcd035e 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css
@@ -2,6 +2,10 @@
   color: red;
 }
 
+body#mocha {
+  margin: 0;
+}
+
 .minutes {
   color: green;
 }
@@ -14,13 +18,21 @@
   border: 1px dashed black;
   padding: 5px;
   display: inline-block;
-  margin: 30px;
   background: yellow;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-.tooltip {
+#tooltip {
   position: absolute;
-  background: #eee;
-  border: 1px brown solid;
-  padding: 3px;
-}
\ No newline at end of file
+  padding: 10px 20px;
+  border: 1px solid #b3c9ce;
+  border-radius: 4px;
+  text-align: center;
+  font: italic 14px/1.3 arial, sans-serif;
+  color: #333;
+  background: #fff;
+  z-index: 100000;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js
new file mode 100644
index 00000000..7c7f6d23
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js
@@ -0,0 +1,98 @@
+'use strict';
+
+describe("hoverIntent", function() {
+
+  function mouse(eventType, x, y, options) {
+    let eventOptions = Object.assign({
+      bubbles: true,
+      clientX: x,
+      clientY: y,
+      pageX: x,
+      pageY: y,
+      target: elem
+    }, options || {});
+
+    elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
+  }
+
+
+  let isOver;
+  let hoverIntent;
+
+
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+
+  beforeEach(function() {
+    isOver = false;
+
+    hoverIntent = new HoverIntent({
+      elem: elem,
+      over: function() {
+        isOver = true;
+      },
+      out: function() {
+        isOver = false;
+      }
+    });
+  })
+
+  afterEach(function() {
+    if (hoverIntent) {
+      hoverIntent.destroy();
+    }
+  })
+
+  it("mouseover -> immediately no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    assert.isFalse(isOver);
+  });
+
+  it("mouseover -> pause shows tooltip", function() {
+    mouse('mouseover', 10, 10);
+    this.clock.tick(100);
+    assert.isTrue(isOver);
+  });
+
+  it("mouseover -> fast mouseout no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    setTimeout(
+      () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
+      30
+    );
+    this.clock.tick(100);
+    assert.isFalse(isOver);
+  });
+
+
+  it("mouseover -> slow move -> tooltips", function() {
+    mouse('mouseover', 10, 10);
+    for(let i=10; i<200; i+= 10) {
+      setTimeout(
+        () => mouse('mousemove', i/5, 10),
+        i
+      );
+    }
+    this.clock.tick(200);
+    assert.isTrue(isOver);
+  });
+
+  it("mouseover -> fast move -> no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    for(let i=10; i<200; i+= 10) {
+      setTimeout(
+        () => mouse('mousemove', i, 10),
+        i
+      );
+    }
+    this.clock.tick(200);
+    assert.isFalse(isOver);
+  });
+
+});
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
index 8bcfe61a..29198d8e 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
@@ -1,3 +1,50 @@
-function HoverIntent(options) {
-  /* ваш код */
-}
\ No newline at end of file
+'use strict';
+
+// Here's a brief sketch of the class
+// with things that you'll need anyway
+class HoverIntent {
+
+  constructor({
+    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
+    interval = 100, // measure mouse speed once per 100ms: calculate the distance between previous and next points
+    elem,
+    over,
+    out
+  }) {
+    this.sensitivity = sensitivity;
+    this.interval = interval;
+    this.elem = elem;
+    this.over = over;
+    this.out = out;
+
+    // make sure "this" is the object in event handlers.
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseOver = this.onMouseOver.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
+
+    // assign the handlers
+    elem.addEventListener("mouseover", this.onMouseOver);
+    elem.addEventListener("mouseout", this.onMouseOut);
+
+    // continue from this point
+
+  }
+
+  onMouseOver(event) {
+    /* ... */
+  }
+
+  onMouseOut(event) {
+    /* ... */
+  }
+
+  onMouseMove(event) {
+    /* ... */
+  }
+
+
+  destroy() {
+    /* your code to "disable" the functionality, remove all handlers */
+  };
+
+}
diff --git 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
index f6db3438..702b79f9 100644
--- 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
@@ -6,38 +6,34 @@
   <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="test.js"></script>
 </head>
 
 <body>
 
-
   <div id="elem" class="clock">
     <span class="hours">12</span> :
     <span class="minutes">30</span> :
     <span class="seconds">00</span>
   </div>
 
-  <script>
-    var tooltip = document.createElement('div');
-    tooltip.className = "tooltip";
-    tooltip.innerHTML = "Подсказка";
+  <div id="tooltip" hidden>Tooltip</div>
 
-    new HoverIntent({
-      elem: elem,
-      over: function() {
-        tooltip.style.left = this.getBoundingClientRect().left + 'px';
-        tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
-        document.body.appendChild(tooltip);
-      },
-      out: function() {
-        document.body.removeChild(tooltip);
-      }
-    });
+  <script>
+    // for the demo
+    setTimeout(function() {
+      new HoverIntent({
+        elem,
+        over() {
+          tooltip.hidden = false;
+        },
+        out() {
+          tooltip.hidden = true;
+        }
+      });
+    }, 2000);
   </script>
 
-
-
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git 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
index a04e5f9d..980e9457 100644
--- 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
@@ -14,8 +14,10 @@
   border: 1px dashed black;
   padding: 5px;
   display: inline-block;
-  margin: 30px;
   background: yellow;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 .tooltip {
@@ -23,4 +25,4 @@
   background: #eee;
   border: 1px brown solid;
   padding: 3px;
-}
\ No newline at end of file
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js
new file mode 100644
index 00000000..44369d8c
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js
@@ -0,0 +1,98 @@
+'use strict';
+
+describe("hoverIntent", function() {
+
+  function mouse(eventType, x, y, options) {
+    let eventOptions = Object.assign({ 
+      bubbles: true,
+      clientX: x,
+      clientY: y,
+      pageX: x,
+      pageY: y,
+      target: elem
+    }, options || {});
+    
+    elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
+  }
+
+
+  let isOver;
+  let hoverIntent;
+  
+  
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+  
+  
+  beforeEach(function() {
+    isOver = false;
+    
+    hoverIntent = new HoverIntent({
+      elem: elem,
+      over: function() {
+        isOver = true;
+      },
+      out: function() {
+        isOver = false;
+      }
+    });
+  })
+
+  afterEach(function() {
+    if (hoverIntent) {
+      hoverIntent.destroy();
+    }
+  })
+
+  it("mouseover -> immediately no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    assert.isFalse(isOver);
+  });
+  
+  it("mouseover -> pause shows tooltip", function() {
+    mouse('mouseover', 10, 10);
+    this.clock.tick(100);
+    assert.isTrue(isOver);
+  });
+
+  it("mouseover -> fast mouseout no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    setTimeout(
+      () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
+      30
+    );
+    this.clock.tick(100);
+    assert.isFalse(isOver);
+  });
+
+
+  it("mouseover -> slow move -> tooltips", function() {
+    mouse('mouseover', 10, 10);
+    for(let i=10; i<200; i+= 10) {
+      setTimeout(
+        () => mouse('mousemove', i/5, 10),
+        i
+      );
+    }
+    this.clock.tick(200);
+    assert.isTrue(isOver);
+  });
+
+  it("mouseover -> fast move -> no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    for(let i=10; i<200; i+= 10) {
+      setTimeout(
+        () => mouse('mousemove', i, 10),
+        i
+      );
+    }
+    this.clock.tick(200);
+    assert.isFalse(isOver);
+  });
+  
+});
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
index 426d4d7d..5c1846a9 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
@@ -1,47 +1,47 @@
-# Подсказка при замедлении над элементом
+importance: 5
 
-[importance 5]
+---
 
-Нужно написать функцию, которая показывает подсказку при *наведении* на элемент, но не при *быстром проходе* над ним.
+# "Smart" tooltip
 
-То есть, если посетитель именно навёл курсор мыши на элемент и почти остановился -- подсказку показать, а если быстро провёл над ним, то не надо, зачем излишнее мигание?
+Write a function that shows a tooltip over an element only if the visitor moves the mouse *over it*, but not *through it*.
 
-Технически -- можно измерять скорость движения мыши над элементом, если она маленькая, то считаем, что это "наведение на элемент" (показать подсказку), если большая -- "быстрый проход мимо элемента" (не показывать).
+In other words, if the visitor moves the mouse on the element and stopped -- show the tooltip. And if he just moved the mouse through fast, then no need, who wants extra blinking?
 
-Реализуйте это через универсальный объект `new HoverIntent(options)`, с параметрами `options`:
-<ul>
-<li>`elem` -- элемент, наведение на который нужно отслеживать.</li>
-<li>`over` -- функция-обработчик наведения на элемент.</li>
-<li>`out` -- функция-обработчик ухода с элемента (если было наведение).</li>
-</ul>
+Technically, we can measure the mouse speed over the element, and if it's slow then we assume that it comes "over the element" and show the tooltip, if it's fast -- then we ignore it.
+
+Make a universal object `new HoverIntent(options)` for it. With `options`:
+
+- `elem` -- element to track.
+- `over` -- a function to call if the mouse is slowly moving the element.
+- `out` -- a function to call when the mouse leaves the element (if `over` was called).
+
+An example of using such object for the tooltip:
 
-Пример использования такого объекта для подсказки:
 ```js
-// образец подсказки
-var tooltip = document.createElement('div');
+// a sample tooltip
+let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
-tooltip.innerHTML = "Подсказка";
+tooltip.innerHTML = "Tooltip";
 
-// при "наведении на элемент" показать подсказку
+// the object will track mouse and call over/out
 new HoverIntent({
-  elem: elem,
-  over: function() {
-    tooltip.style.left = this.getBoundingClientRect().left + 'px';
-    tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
-    document.body.appendChild(tooltip);
+  elem,
+  over() {
+    tooltip.style.left = elem.getBoundingClientRect().left + 'px';
+    tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+    document.body.append(tooltip);
   },
-  out: function() {
-    document.body.removeChild(tooltip);
+  out() {
+    tooltip.remove();
   }
 });
 ```
 
-Демо этого кода:
-
-[iframe src="solution" height=110]
-
-Если провести мышкой над "часиками" быстро, то ничего не будет, а если медленно или остановиться на них, то появится подсказка.
+The demo:
 
-Обратите внимание -- подсказка не "мигает" при проходе мыши внутри "часиков", по подэлементам.
+[iframe src="solution" height=140]
 
+If you move the mouse over the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
 
+Please note: the tooltip doesn't "blink" when the cursor between the clock subelements.
diff --git 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
index 6f58e29c..3b6f7277 100644
--- 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
@@ -1,229 +1,187 @@
-# Мышь: движение mouseover/out, mouseenter/leave
+# Moving: mouseover/out, mouseenter/leave
 
-В этой главе мы рассмотрим события, возникающие при движении мыши над элементами.
+Let's dive into more details about events that happen when mouse moves between elements.
 
 [cut]
 
-## События mouseover/mouseout, свойство relatedTarget   
+## Mouseover/mouseout, relatedTarget
 
-Событие `mouseover` происходит, когда мышь появляется над элементом, а `mouseout` -- когда уходит из него.
+The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
 
-<img src="mouseover-mouseout.png">
+![](mouseover-mouseout.png)
 
-При этом мы можем узнать, с какого элемента пришла (или на какой ушла) мышь, используя дополнительное свойство объекта события `relatedTarget`.
+These events are special, because they have a `relatedTarget`.
 
-Например, в обработчике события `mouseover`:
-<ul>
-<li>`event.target` -- элемент, на который пришла мышь, то есть на котором возникло событие.</li>
-<li>`event.relatedTarget` -- элемент, с которого пришла мышь.</li>
-</ul>
+For `mouseover`:
 
-Для `mouseout` всё наоборот:
+- `event.target` -- is the element where the mouse came over.
+- `event.relatedTarget` -- is the element from which the mouse came.
 
+For `mouseout` the reverse:
 
-<ul>
-<li>`event.target` -- элемент, с которого ушла мышь, то есть на котором возникло событие.</li>
-<li>`event.relatedTarget` -- элемент, на который перешла мышь.</li>
-</ul>
+- `event.target` -- is the element that mouse left.
+- `event.relatedTarget` -- is the new under-the-pointer element (that mouse left for).
 
-В примере ниже, если у вас есть мышь, вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах. 
-[codetabs src="mouseoverout" height=220]
+```online
+In the example below each face feature is an element. When you move the mouse, you can see mouse events in the text area.
 
-[warn header="`relatedTarget` может быть `null`"]
-Свойство `relatedTarget` может быть равно `null`. 
+Each event has the information about where the element came and where it came from.
 
-Это вполне нормально и означает, что мышь пришла не с другого элемента, а из-за пределов окна (или ушла за окно). Мы обязательно должны иметь в виду такую возможность, когда пишем код, который обращается к свойствам `event.relatedTarget`.
-[/warn]
-
-## Частота событий 
-
-Событие `mousemove` срабатывает при передвижении мыши. Но это не значит, что каждый пиксель экрана порождает отдельное событие!
-
-События `mousemove` и `mouseover/mouseout` срабатывают так часто, насколько это позволяет внутренняя система взаимодействия с мышью браузера.
-
-Это означает, что если посетитель двигает мышью быстро, то DOM-элементы, через которые мышь проходит на большой скорости, могут быть пропущены.
-
-<img src="mouseover-mouseout-over-elems.png">
-
-При быстром движении с элемента `#FROM` до элемента `#TO`, как изображено на картинке выше -- промежуточные `<DIV>` будут пропущены. Сработает только событие `mouseout` на `#FROM` и `mouseover` на `#TO`.
+[codetabs src="mouseoverout" height=280]
+```
 
-На практике это полезно, потому что таких промежуточных элементов может быть много, и если обрабатывать заход и уход с каждого -- дополнительные вычислительные затраты.
+```warn header="`relatedTarget` can be `null`"
+The `relatedTarget` property can be `null`.
 
-С другой стороны, мы должны это понимать и не рассчитывать на то, что мышь аккуратно пройдёт с одного элемента на другой и так далее. Нет, она "прыгает".
+That's normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window.
 
-В частности, возможна ситуация, когда курсор прыгает в середину страницы, и при этом `relatedTarget=null`, то есть он пришёл "ниоткуда" (на самом деле извне окна):
+We should keep that possibility in mind when using `event.relatedTarget` in our code. If we access `event.relatedTarget.tagName`, then there will be an error.
+```
 
-<img src="mouseover-mouseout-from-outside.png">
+## Events frequency
 
-Обратим внимание ещё на такую деталь. При быстром движении курсор окажется над `#TO` сразу, даже если этот элемент глубоко в DOM. Его родители при движении сквозь них события не поймают.
+The `mousemove` event triggers when the mouse moves. But that doesn't mean that every pixel leads to an event.
 
-[online]
-Попробуйте увидеть это "вживую" на тестовом стенде ниже.
+The browser checks the mouse position from time to time. And if he notices changes then triggers the events.
 
-Его HTML представляет собой два вложенных `div'а`.
+That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped:
 
-Молниеносно проведите мышью над вложенными элементами. При этом может не быть ни одного события или их получит только красный `div`, а может быть только зеленый.
+![](mouseover-mouseout-over-elems.png)
 
-А еще попробуйте зайти курсором мыши на красный `div` и потом быстро вывести мышь из него куда-нибудь сквозь зеленый. Если движение мыши достаточно быстрое, то родительский элемент будет проигнорирован.
+If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `<div>` (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`.
 
-[codetabs height=360 src="mouseoverout-fast"]
-[/online]
+In practice that's helpful, because if there may be many intermediate elements. We don't really want to process in and out of each one.
 
-Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами. В остальном это вполне удобно.
+From the other side, we should keep in mind that we can't assume that the mouse slowly moves from one event to another. No, it can "jump".
 
-## "Лишний" mouseout при уходе на потомка
+In particular it's possible that the cursor jumps right inside the middle of the page from out of the window. And `relatedTarget=null`, because it came from "nowhere":
 
-Представьте ситуацию -- курсор зашёл на элемент. Сработал `mouseover` на нём. Потом курсор идёт на дочерний... И, оказывается, на элементе-родителе при этом происходит `mouseout`! Как будто курсор с него ушёл, хотя он всего лишь перешёл на потомка.
+![](mouseover-mouseout-from-outside.png)
 
-**При переходе на потомка срабатывает `mouseout` на родителе.**
+<div style="display:none">
+In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it.
+</div>
 
-<img src="mouseover-to-child.png">
+```online
+Check it out "live" on a teststand below.
 
-Это кажется странным, но легко объяснимо.
+The HTML is two nested `<div>` elements. If you move the mouse fast over them, then there may be no events at all, or maybe only the red div triggers events, or maybe the green one.
 
-**Согласно браузерной логике, курсор мыши может быть только над *одним* элементом -- самым глубоким в DOM (и верхним по z-index).**
+Also try to move the pointer over the red `div`, and then move it out quickly down through the green one. If the movement is fast enough then the parent element is ignored.
 
-Так что если он перешел куда-нибудь, то автоматически ушёл с предыдущего элемента. Всё просто.
+[codetabs height=360 src="mouseoverout-fast"]
+```
 
-Самое забавное начинается чуть позже.
+## "Extra" mouseout when leaving for a child
 
-Ведь события `mouseover` и `mouseout` всплывают.
+Imagine -- a mouse pointer entered an element. The `mouseover` triggered. Then the cursor goes into a child element. The interesting fact is that `mouseout` triggers in that case. The cursor is still in the element, but we have a `mouseout` from it!
 
-Получается, что если поставить обработчики `mouseover` и `mouseout` на `#FROM` и `#TO`, то последовательность срабатывания при переходе `#FROM` -> `#TO` будет следующей:
+![](mouseover-to-child.png)
 
-<ol>
-<li>`mouseout` на `#FROM` (с `event.target=#FROM`, `event.relatedTarget=#TO`).</li>
-<li>`mouseover` на `#TO` (с `event.target=#TO`, `event.relatedTarget=#FROM`).</li>
-<li>Событие `mouseover` после срабатывания на `#TO` всплывает выше, запуская обработчики `mouseover` на родителях. Ближайший родитель -- как раз `#FROM`, то есть сработает обработчик `mouseover` на нём, с теми же значениями `target/relatedTarget`.</li>
-</ol>
+That seems strange, but can be easily explained.
 
-Если посмотреть на `1)` и `3)`, то видно, что на `#FROM` сработает сначала `mouseout`, а затем с `#TO` всплывёт `mouseover`.
+**According to the browser logic, the mouse cursor may be only over a *single* element at any time -- the most nested one (and top by z-index).**
 
-Если по `mouseover` мы что-то показываем, а по `mouseout` -- скрываем, то получится "мигание".
+So if it goes to another element (even a descendant), then it leaves the previous one. That simple.
 
-**У обработчиков создаётся впечатление, что курсор ушёл `mouseout` с родителя, а затем тут же перешёл `mouseover` на него (за счёт всплытия `mouseover` с потомка).**
+There's a funny consequence that we can see on the example below.
 
-[online]
-Это можно увидеть в примере ниже. В нём красный `div` вложен в синий. На синем стоит обработчик, который записывает его `mouseover/mouseout`.
+The red `<div>` is nested inside the blue one. The blue `<div>` has `mouseover/out` handlers that log all events in the textarea below.
 
-Зайдите на синий элемент, а потом переведите мышь на красный -- и наблюдайте за событиями:
+Try entering the blue element and then moving the mouse on the red one -- and watch the events:
 
 [codetabs height=360 src="mouseoverout-child"]
 
-<ol>
-<li>При заходе на синий -- на нём сработает `mouseover [target: blue]`.</li>
-<li>При переходе с синего на красный -- будет `mouseout [target: blue]` -- уход с родителя.</li>
-<li>...И тут же `mouseover [target: red]` -- как ни странно, "обратный переход" на родителя.</li>
-</ol> 
+1. On entering the blue one -- we get `mouseover [target: blue]`.
+2. Then after moving from the blue to the red one -- we get `mouseout [target: blue]` (left the parent).
+3. ...And immediately `mouseover [target: red]`.
 
-На самом деле, обратного перехода нет. Событие `mouseover` сработало на потомке (видно по `target: red`), а затем всплыло.
-[/online]
+So, for a handler that does not take `target` into account, it looks like we left the parent in `mouseout` in `(2)` and returned back to it by `mouseover` in `(3)`.
 
-Если действия при наведении и уходе курсора с родителя простые, например скрытие/показ подсказки, то можно вообще ничего не заметить. Ведь события происходят сразу одно за другим, подсказка будет скрыта по `mouseout` и тут же показана по `mouseover`.
+If we perform some actions on entering/leaving the element, then we'll get a lot of extra "false" runs. For simple stuff may be unnoticeable. For complex things that may bring unwanted side-effects.
 
-Если же происходит что-то более сложное, то бывает важно отследить момент "настоящего" ухода, то есть понять, когда элемент зашёл на родителя, а когда ушёл -- без учёта переходов по дочерним элементам.
+We can fix it by using `mouseenter/mouseleave` events instead.
 
-Для этого можно использовать события `mouseenter/mouseleave`, которые мы рассмотрим далее.
+## Events mouseenter and mouseleave
 
-## События mouseenter и mouseleave
+Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They also trigger when the mouse pointer enters/leaves the element.
 
-События `mouseenter/mouseleave` похожи на `mouseover/mouseout`. Они тоже срабатывают, когда курсор заходит на элемент и уходит с него, но с двумя отличиями.
+But there are two differences:
 
-<ol>
-<li>Не учитываются переходы внутри элемента.</li>
-<li>События `mouseenter/mouseleave` не всплывают.</li>
-</ol>
+1. Transitions inside the element are not counted.
+2. Events `mouseenter/mouseleave` do not bubble.
 
-Эти события более интуитивно понятны. 
+These events are intuitively very clear.
 
-Курсор заходит на элемент -- срабатывает `mouseenter`, а затем -- неважно, куда он внутри него переходит, `mouseleave` будет, когда курсор окажется за пределами элемента.
+When the pointer enters an element -- the `mouseenter` triggers, and then doesn't matter where it goes while inside the element. The `mouseleave` event only triggers when the cursor leaves it.
 
-[online]
-
-Вы можете увидеть, как они работают проведя курсором над голубым `DIV'ом` ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание -- лишних событий при переходе на красного потомка нет!
+If we make the same example, but put `mouseenter/mouseleave` on the blue `<div>`, and do the same -- we can see that events trigger only on entering and leaving the blue `<div>`. No extra events when going to the red one and back. Children are ignored.
 
 [codetabs height=340 src="mouseleave"]
-[/online]
 
-## Делегирование 
+## Event delegation
 
-События `mouseenter/leave` более наглядны и понятны, но они не всплывают, а значит с ними нельзя использовать делегирование.
+Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them.
 
-Представим, что нам нужно обработать вход/выход мыши для ячеек таблицы. А в таблице таких ячеек тысяча. 
+Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells.
 
-Естественное решение -- поставить обработчик на верхний элемент `<table>` и ловить все события в нём. Но события `mouseenter/leave` не всплывают, они срабатывают именно на том элементе, на котором стоит обработчик и только на нём. 
+The natural solution would be -- to set the handler on `<table>` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on `<td>`, then only a handler on that `<td>` can catch it.
 
-Если обработчики `mouseenter/leave` стоят на `<table>`, то они сработают при входе-выходе из таблицы, но получить из них какую-то информацию о переходах по её ячейкам невозможно.
+Handlers for `mouseenter/leave` on `<table>` only trigger on entering/leaving the whole table. It's impossible to get any information about transitions inside it.
 
-Не беда -- воспользуемся `mouseover/mouseout`.
+Not a problem -- let's use `mouseover/mouseout`.
 
-Простейший вариант обработчиков выглядит так:
+A simple handler may look like this:
 
 ```js
+// let's highlight cells under mouse
 table.onmouseover = function(event) {
-  var target = event.target;
+  let target = event.target;
   target.style.background = 'pink';
 };
 
 table.onmouseout = function(event) {
-  var target = event.target;
+  let target = event.target;
   target.style.background = '';
 };
 ```
-[online]
 
+```online
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
+```
 
-[/online]
-
-В таком виде они срабатывают при переходе с любого элемента на любой. Нас же интересуют переходы строго с одной ячейки `<td>` на другую.
-
-Нужно фильтровать события.
-
-Один из вариантов:
-<ul>
-<li>Запоминать текущий подсвеченный `<td>` в переменной.</li>
-<li>При `mouseover` проверять, остались ли мы внутри того же `<td>`, если да -- игнорировать.</li>
-<li>При `mouseout` проверять, если мы ушли с текущего `<td>`, а не перешли куда-то внутрь него, то игнорировать.</li>
-</ul>
+These handlers work when going from any element to any inside the table.
 
-[offline]
-Детали кода вы можете посмотреть в [edit src="mouseenter-mouseleave-delegation-2"]полном примере[/edit].
-[/offline]
+But we'd like to handle only transitions in and out of `<td>` as a whole. And highlight the cells as a whole. We don't want to handle transitions that happen between the children of `<td>`.
 
-[online]
-Детали кода вы можете посмотреть в примере ниже, который демонстрирует этот подход:
+One of solutions:
 
-[codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
+- Remember the currently highlighted `<td>` in a variable.
+- On `mouseover` -- ignore the event if we're still inside the current `<td>`.
+- On `mouseout` -- ignore if we didn't leave the current `<td>`.
 
-Попробуйте по-разному, быстро или медленно заходить и выходить в ячейки таблицы. Обработчики `mouseover/mouseout` стоят на `table`, но при помощи делегирования корректно обрабатывают вход-выход.[/online]
+That filters out "extra" events when we are moving between the children of `<td>`.
 
-## Особенности IE8-
+```offline
+The details are in the [full example](sandbox:mouseenter-mouseleave-delegation-2).
+```
 
-В IE8- нет свойства `relatedTarget`. Вместо него используется `fromElement` для `mouseover` и `toElement` для `mouseout`.
+```online
+Here's the full example with all details:
 
-Можно "исправить" несовместимость с `relatedTarget` так:
+[codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
 
-```js
-function fixRelatedTarget(e) {
-  if (e.relatedTarget === undefined) {
-    if (e.type == 'mouseover') e.relatedTarget = e.fromElement;
-    if (e.type == 'mouseout') e.relatedTarget = e.toElement;
-  }
-}
+Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't better. Only `<td>` as a whole is highlighted unlike the example before.
 ```
 
-## Итого
-
-У `mouseover, mousemove, mouseout` есть следующие особенности:
-<ul>
-<li>При быстром движении мыши события `mouseover, mousemove, mouseout` могут пропускать промежуточные элементы.</li>
-<li>События `mouseover` и `mouseout` -- единственные, у которых есть вторая цель: `relatedTarget` (`toElement/fromElement` в IE).</li>
-<li>События `mouseover/mouseout` подразумевают, что курсор находится над одним, самым глубоким элементом. Они срабатывают при переходе с родительского элемента на дочерний.</li>
-</ul>
-
-События `mouseenter/mouseleave` не всплывают и не учитывают переходы внутри элемента. 
 
+## Summary
 
+We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
 
+Things that are good to note:
 
+- A fast mouse move can make `mouseover, mousemove, mouseout` to skip intermediate elements.
+- Events `mouseover/out` and `mouseenter/leave` have an additional target: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`.
+- Events `mouseover/out` trigger even when we go from the parent element to a child element. They assume that the mouse can be only over one element at one time -- the deepest one.
+- Events `mouseenter/leave` do not bubble and do not trigger when the mouse goes to a child element. They only track whether the mouse comes inside and outside the element as a whole.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
index 7de45fc4..e129ee6a 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
@@ -70,5 +70,4 @@
   <script src="script.js"></script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
index c35051a0..9f6bf1b5 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -1,46 +1,38 @@
-// элемент TD, внутри которого сейчас курсор
-var currentElem = null;
+// <td> under the mouse right now (if any)
+let currentElem = null;
 
 table.onmouseover = function(event) {
   if (currentElem) {
-    // перед тем, как зайти в новый элемент, курсор всегда выходит из предыдущего
-    // 
-    // если мы еще не вышли, значит это переход внутри элемента, отфильтруем его
+    // before entering a new element, the mouse always leaves the previous one
+    // if we didn't leave <td> yet, then we're still inside it, so can ignore the event
     return;
   }
 
-  // посмотрим, куда пришёл курсор
-  var target = event.target;
+  let target = event.target.closest('td');
+  if (!target || !table.contains(target)) return;
 
-  // уж не на TD ли?
-  while (target != this) {
-    if (target.tagName == 'TD') break;
-    target = target.parentNode;
-  }
-  if (target == this) return;
-
-  // да, элемент перешёл внутрь TD!
+  // yeah we're inside <td> now
   currentElem = target;
   target.style.background = 'pink';
 };
 
 
 table.onmouseout = function(event) {
-  // если курсор и так снаружи - игнорируем это событие
+  // if we're outside of any <td> now, then ignore the event
   if (!currentElem) return;
 
-  // произошёл уход с элемента - проверим, куда, может быть на потомка?
-  var relatedTarget = event.relatedTarget;
-  if (relatedTarget) { // может быть relatedTarget = null
+  // we're leaving the element -- where to? Maybe to a child element?
+  let relatedTarget = event.relatedTarget;
+  if (relatedTarget) { // possible: relatedTarget = null
     while (relatedTarget) {
-      // идём по цепочке родителей и проверяем, 
-      // если переход внутрь currentElem - игнорируем это событие
+      // go up the parent chain and check -- if we're still inside currentElem
+      // then that's an internal transition -- ignore it
       if (relatedTarget == currentElem) return;
       relatedTarget = relatedTarget.parentNode;
     }
   }
 
-  // произошло событие mouseout, курсор ушёл
+  // we left the element. really.
   currentElem.style.background = '';
   currentElem = null;
-};
\ No newline at end of file
+};
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
index 472120e4..eedd3871 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
@@ -69,11 +69,9 @@
 
   <textarea id="text"></textarea>
 
-  <input type="button" onclick="text.value=''" value="Очистить">
-
+  <input type="button" onclick="text.value=''" value="Clear">
 
   <script src="script.js"></script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
index f0fa2d35..4700d686 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
@@ -1,12 +1,12 @@
 table.onmouseover = function(event) {
-  var target = event.target;
+  let target = event.target;
   target.style.background = 'pink';
   text.value += "mouseover " + target.tagName + "\n";
   text.scrollTop = text.scrollHeight;
 };
 
 table.onmouseout = function(event) {
-  var target = event.target;
+  let target = event.target;
   target.style.background = '';
   text.value += "mouseout " + target.tagName + "\n";
   text.scrollTop = text.scrollHeight;
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
index 472120e4..209d9e6b 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
@@ -69,11 +69,11 @@
 
   <textarea id="text"></textarea>
 
-  <input type="button" onclick="text.value=''" value="Очистить">
+  <input type="button" onclick="text.value=''" value="Clear">
 
 
   <script src="script.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
index 205c3d70..87fc5c63 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
@@ -13,10 +13,10 @@
   </div>
 
   <textarea id="text"></textarea>
-  <input type="button" onclick="text.value=''" value="Очистить">
+  <input type="button" onclick="text.value=''" value="Clear">
 
   <script src="script.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png
index ffc5c06b..ea572330 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png
index a0154d63..6a17ca99 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png
index e3bef0ed..babbea50 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png
index e64afd24..e61891a5 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png
index c72dd275..628aa330 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png
index c60b440d..c320e2cc 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png
index 63377d1c..627f9584 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png
index 05bc2c4b..51a917d8 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
index 7d68579d..20c96c0a 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
@@ -12,12 +12,11 @@
     <div class="red"></div>
   </div>
 
-  <textarea id="text">mouseover [target: blue] mouseout [target: blue] mouseover [target: red]
-  </textarea>
-  <input type="button" onclick="text.value=''" value="Очистить">
+  <textarea id="text"></textarea>
+  <input type="button" onclick="text.value=''" value="Clear">
 
   <script src="script.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
index b0320251..1e38d693 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
@@ -9,10 +9,10 @@
 <body>
 
   <div id="green">
-    <div id="red">Тест</div>
+    <div id="red">Test</div>
   </div>
 
-  <input onclick="clearText()" value="Очистить" type="button">
+  <input onclick="clearText()" value="Clear" type="button">
 
   <textarea id="text"></textarea>
 
@@ -20,4 +20,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
index 4a411513..63ec8cdc 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
@@ -1,7 +1,7 @@
  green.onmouseover = green.onmouseout = green.onmousemove = handler;
 
  function handler(event) {
-   var type = event.type;
+   let type = event.type;
    while (type < 11) type += ' ';
 
    log(type + " target=" + event.target.id)
@@ -14,14 +14,14 @@
    lastMessage = "";
  }
 
- var lastMessageTime = 0;
- var lastMessage = "";
- var repeatCounter = 1;
+ let lastMessageTime = 0;
+ let lastMessage = "";
+ let repeatCounter = 1;
 
  function log(message) {
    if (lastMessageTime == 0) lastMessageTime = new Date();
 
-   var time = new Date();
+   let time = new Date();
 
    if (time - lastMessageTime > 500) {
      message = '------------------------------\n' + message;
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
index 5ebbc305..022fd00d 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
@@ -8,30 +8,30 @@
 
 <body>
 
-  <div class="smiley-green">
-    <div class="left-eye"></div>
-    <div class="right-eye"></div>
-    <div class="smile"></div>
+  <div id="container">
+    <div class="smiley-green">
+      <div class="left-eye"></div>
+      <div class="right-eye"></div>
+      <div class="smile"></div>
+    </div>
+
+    <div class="smiley-yellow">
+      <div class="left-eye"></div>
+      <div class="right-eye"></div>
+      <div class="smile"></div>
+    </div>
+
+    <div class="smiley-red">
+      <div class="left-eye"></div>
+      <div class="right-eye"></div>
+      <div class="smile"></div>
+    </div>
   </div>
 
-  <div class="smiley-yellow">
-    <div class="left-eye"></div>
-    <div class="right-eye"></div>
-    <div class="smile"></div>
-  </div>
-
-  <div class="smiley-red">
-    <div class="left-eye"></div>
-    <div class="right-eye"></div>
-    <div class="smile"></div>
-  </div>
-
-  <textarea id="log" style="width:400px;height:100px">Здесь будут события и relatedTarget
-  </textarea>
-
+  <textarea id="log">Events will show up here!
+</textarea>
 
   <script src="script.js"></script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js
index a49bac0c..8fa60cc2 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js
@@ -1,4 +1,4 @@
-document.body.onmouseover = document.body.onmouseout = handler;
+container.onmouseover = container.onmouseout = handler;
 
 function handler(event) {
 
@@ -18,4 +18,4 @@ function handler(event) {
   if (event.type == 'mouseout') {
     event.target.style.background = ''
   }
-}
\ No newline at end of file
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css
index fd88761c..6347cd9b 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css
@@ -1,10 +1,24 @@
 body,
 html {
-  height: 130px;
   margin: 0;
   padding: 0;
 }
 
+#container {
+  border: 1px solid brown;
+  padding: 10px;
+  width: 330px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+}
+
+#log {
+  height: 120px;
+  width: 350px;
+  display: block;
+  box-sizing: border-box;
+}
+
 [class^="smiley-"] {
   display: inline-block;
   width: 70px;
@@ -162,4 +176,4 @@ html {
   height: 80%;
   top: 60%;
   left: 0%;
-}
\ No newline at end of file
+}
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.md
deleted file mode 100644
index cdaf826c..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-Как можно видеть из HTML/CSS, слайдер -- это `DIV`, подкрашенный фоном/градиентом, внутри которого находится другой `DIV`, оформленный как бегунок, с `position:relative`.
-
-Бегунок немного поднят, и вылезает по высоте из родителя.
-
-На этой основе мы реализуем горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/index.html b/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/index.html
deleted file mode 100644
index d34fa7fb..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="slider" class="slider">
-    <div class="thumb"></div>
-  </div>
-
-  <script>
-    var sliderElem = document.getElementById('slider');
-    var thumbElem = sliderElem.children[0];
-
-    thumbElem.onmousedown = function(e) {
-      var thumbCoords = getCoords(thumbElem);
-      var shiftX = e.pageX - thumbCoords.left;
-      // shiftY здесь не нужен, слайдер двигается только по горизонтали
-
-      var sliderCoords = getCoords(sliderElem);
-
-      document.onmousemove = function(e) {
-        //  вычесть координату родителя, т.к. position: relative
-        var newLeft = e.pageX - shiftX - sliderCoords.left;
-
-        // курсор ушёл вне слайдера
-        if (newLeft < 0) {
-          newLeft = 0;
-        }
-        var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
-        if (newLeft > rightEdge) {
-          newLeft = rightEdge;
-        }
-
-        thumbElem.style.left = newLeft + 'px';
-      }
-
-      document.onmouseup = function() {
-        document.onmousemove = document.onmouseup = null;
-      };
-
-      return false; // disable selection start (cursor change)
-    };
-
-    thumbElem.ondragstart = function() {
-      return false;
-    };
-
-    function getCoords(elem) { // кроме IE8-
-      var box = elem.getBoundingClientRect();
-
-      return {
-        top: box.top + pageYOffset,
-        left: box.left + pageXOffset
-      };
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/style.css b/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/style.css
deleted file mode 100644
index 1aadbd15..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.slider {
-  border-radius: 5px;
-  background: #E0E0E0;
-  background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
-  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
-  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
-  width: 310px;
-  height: 15px;
-  margin: 5px;
-}
-
-.thumb {
-  width: 10px;
-  height: 25px;
-  border-radius: 3px;
-  position: relative;
-  left: 10px;
-  top: -5px;
-  background: blue;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/index.html b/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/index.html
deleted file mode 100644
index 0105d0d4..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="slider" class="slider">
-    <div class="thumb"></div>
-  </div>
-
-  <script>
-    // ...Ваш код..
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/style.css b/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/style.css
deleted file mode 100644
index 1aadbd15..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.slider {
-  border-radius: 5px;
-  background: #E0E0E0;
-  background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
-  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
-  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
-  width: 310px;
-  height: 15px;
-  margin: 5px;
-}
-
-.thumb {
-  width: 10px;
-  height: 25px;
-  border-radius: 3px;
-  position: relative;
-  left: 10px;
-  top: -5px;
-  background: blue;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-drag-and-drop/1-slider/task.md
deleted file mode 100644
index 58537031..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/1-slider/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Слайдер 
-
-[importance 5]
-
-Создайте слайдер:
-[iframe src="solution" height=60 border=1]
-
-Захватите мышкой синий бегунок и двигайте его, чтобы увидеть в работе.
-
-Важно:
-<ul>
-<li>Слайдер должен нормально работать при резком движении мыши влево или вправо, за пределы полосы. При этом бегунок должен останавливаться четко в нужном конце полосы.</li>
-<li>При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть все равно работает (это удобно для пользователя).</li>
-</ul>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.md
deleted file mode 100644
index 7178a96f..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-В решении этой задачи для переноса мы используем координаты относительно окна и `position:fixed`. Так проще.
-
-А по окончании -- прибавляем прокрутку и делаем `position:absolute`, чтобы элемент был привязан к определённому месту в документе, а не в окне. Можно было и сразу `position:absolute` и оперировать в абсолютных координатах, но код был бы немного длиннее.
-
-Детали решения расписаны в комментариях в исходном коде.
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/index.html
deleted file mode 100644
index 35c66686..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="soccer.css">
-</head>
-
-<body>
-
-  <h2>Расставьте супергероев по полю.</h2>
-
-  <p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
-
-  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
-
-  <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
-
-  <div id="field">
-
-  </div>
-
-  <div class="hero draggable" id="hero1"></div>
-  <div class="hero draggable" id="hero2"></div>
-  <div class="hero draggable" id="hero3"></div>
-  <div class="hero draggable" id="hero4"></div>
-  <div class="hero draggable" id="hero5"></div>
-  <div class="hero draggable" id="hero6"></div>
-
-  <img src="https://js.cx/drag-heroes/ball.png" class="draggable">
-
-  <div style="clear:both"></div>
-
-  <script src="soccer.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.css
deleted file mode 100644
index d72bd8c9..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.css
+++ /dev/null
@@ -1,48 +0,0 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-#field {
-  background: url(https://js.cx/drag-heroes/field.png);
-  width: 800px;
-  height: 600px;
-  float: left;
-}
-/* герои и мяч (переносимые элементы) */
-
-.hero {
-  background: url(https://js.cx/drag-heroes/heroes.png);
-  width: 130px;
-  height: 128px;
-  float: left;
-}
-
-#hero1 {
-  background-position: 0 0;
-}
-
-#hero2 {
-  background-position: 0 -128px;
-}
-
-#hero3 {
-  background-position: -120px 0;
-}
-
-#hero4 {
-  background-position: -125px -128px;
-}
-
-#hero5 {
-  background-position: -248px -128px;
-}
-
-#hero6 {
-  background-position: -244px 0;
-}
-
-.draggable {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.js
deleted file mode 100644
index e0998e7a..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/soccer.js
+++ /dev/null
@@ -1,101 +0,0 @@
-document.onmousedown = function(e) {
-
-  var dragElement = e.target;
-
-  if (!dragElement.classList.contains('draggable')) return;
-
-  var coords, shiftX, shiftY;
-
-  startDrag(e.clientX, e.clientY);
-
-  document.onmousemove = function(e) {
-    moveAt(e.clientX, e.clientY);
-  };
-
-  dragElement.onmouseup = function() {
-    finishDrag();
-  };
-
-
-  // -------------------------
-
-  function startDrag(clientX, clientY) {
-
-    shiftX = clientX - dragElement.getBoundingClientRect().left;
-    shiftY = clientY - dragElement.getBoundingClientRect().top;
-
-    dragElement.style.position = 'fixed';
-
-    document.body.appendChild(dragElement);
-
-    moveAt(clientX, clientY);
-  };
-
-  function finishDrag() {
-    // конец переноса, перейти от fixed к absolute-координатам
-    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
-    dragElement.style.position = 'absolute';
-
-    document.onmousemove = null;
-    dragElement.onmouseup = null;
-  }
-
-  function moveAt(clientX, clientY) {
-    // новые координаты
-    var newX = clientX - shiftX;
-    var newY = clientY - shiftY;
-
-    // ------- обработаем вынос за нижнюю границу окна ------
-    // новая нижняя граница элемента
-    var newBottom = newY + dragElement.offsetHeight;
-
-    // если новая нижняя граница вылезает вовне окна - проскроллим его
-    if (newBottom > document.documentElement.clientHeight) {
-      // координата нижней границы документа относительно окна
-      var docBottom = document.documentElement.getBoundingClientRect().bottom;
-
-      // scrollBy, если его не ограничить - может заскроллить за текущую границу документа
-      // обычно скроллим на 10px
-      // но если расстояние от newBottom до docBottom меньше, то меньше
-      var scrollY = Math.min(docBottom - newBottom, 10);
-
-      // ошибки округления при полностью прокрученной странице
-      // могут привести к отрицательному scrollY, что будет означать прокрутку вверх
-      // поправим эту ошибку
-      if (scrollY < 0) scrollY = 0;
-
-      window.scrollBy(0, scrollY);
-
-      // резким движением мыши элемент можно сдвинуть сильно вниз
-      // если он вышел за нижнюю границу документа - 
-      // передвигаем на максимально возможную нижнюю позицию внутри документа
-      newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
-    }
-
-
-    // ------- обработаем вынос за верхнюю границу окна ------
-    if (newY < 0) {
-      // проскроллим вверх на 10px, либо меньше, если мы и так в самом верху
-      var scrollY = Math.min(-newY, 10);
-      if (scrollY < 0) scrollY = 0; // поправим ошибку округления
-
-      window.scrollBy(0, -scrollY);
-      // при резком движении мыши элемент мог "вылететь" сильно вверх, поправим его
-      newY = Math.max(newY, 0);
-    }
-
-
-    // зажать в границах экрана по горизонтали
-    // здесь прокрутки нет, всё просто
-    if (newX < 0) newX = 0;
-    if (newX > document.documentElement.clientWidth - dragElement.offsetHeight) {
-      newX = document.documentElement.clientWidth - dragElement.offsetHeight;
-    }
-
-    dragElement.style.left = newX + 'px';
-    dragElement.style.top = newY + 'px';
-  }
-
-  // отменим действие по умолчанию на mousedown (выделение текста, оно лишнее)
-  return false;
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/index.html
deleted file mode 100644
index 35c66686..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="soccer.css">
-</head>
-
-<body>
-
-  <h2>Расставьте супергероев по полю.</h2>
-
-  <p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
-
-  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
-
-  <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
-
-  <div id="field">
-
-  </div>
-
-  <div class="hero draggable" id="hero1"></div>
-  <div class="hero draggable" id="hero2"></div>
-  <div class="hero draggable" id="hero3"></div>
-  <div class="hero draggable" id="hero4"></div>
-  <div class="hero draggable" id="hero5"></div>
-  <div class="hero draggable" id="hero6"></div>
-
-  <img src="https://js.cx/drag-heroes/ball.png" class="draggable">
-
-  <div style="clear:both"></div>
-
-  <script src="soccer.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.css
deleted file mode 100644
index d72bd8c9..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.css
+++ /dev/null
@@ -1,48 +0,0 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-#field {
-  background: url(https://js.cx/drag-heroes/field.png);
-  width: 800px;
-  height: 600px;
-  float: left;
-}
-/* герои и мяч (переносимые элементы) */
-
-.hero {
-  background: url(https://js.cx/drag-heroes/heroes.png);
-  width: 130px;
-  height: 128px;
-  float: left;
-}
-
-#hero1 {
-  background-position: 0 0;
-}
-
-#hero2 {
-  background-position: 0 -128px;
-}
-
-#hero3 {
-  background-position: -120px 0;
-}
-
-#hero4 {
-  background-position: -125px -128px;
-}
-
-#hero5 {
-  background-position: -248px -128px;
-}
-
-#hero6 {
-  background-position: -244px 0;
-}
-
-.draggable {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.js b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.js
deleted file mode 100644
index f5e11556..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/source.view/soccer.js
+++ /dev/null
@@ -1 +0,0 @@
-// Ваш код
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/task.md
deleted file mode 100644
index f87efbc2..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Расставить супергероев по полю
-
-[importance 5]
-
-В этой задаче вы можете проверить своё понимание сразу нескольких аспектов Drag'n'Drop.
-
-Сделайте так, чтобы элементы с классом `draggable` можно было переносить мышкой. По окончании переноса элемент остаётся на том месте в документе, где его положили.
-
-Требования к реализации:
-<ul>
-<li>Должен быть 1 обработчик на `document`, использующий делегирование.</li>
-<li>Если элементы подносят к вертикальным краям окна -- оно должно прокручиваться вниз/вверх.</li>
-<li>Горизонтальной прокрутки в этой задаче не существует.</li>
-<li>Элемент при переносе, даже при резких движениях мышкой, не должен попасть вне окна.</li>
-</ul>
-
-Футбольное поле в этой задаче слишком большое, чтобы показывать его здесь, поэтому откройте его, кликнув по ссылке ниже. Там же и подробное описание задачи (осторожно, винни-пух и супергерои!).
-
-[demo src="solution"] 
-
diff --git a/2-ui/3-event-details/4-drag-and-drop/article.md b/2-ui/3-event-details/4-drag-and-drop/article.md
deleted file mode 100644
index e271d988..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/article.md
+++ /dev/null
@@ -1,221 +0,0 @@
-# Мышь: Drag'n'Drop   
-
-Drag'n'Drop -- это возможность захватить мышью элемент и перенести его. В свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
-
-Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag'n'Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.
-
-[cut]
-
-## Отличия от HTML5 Drag'n'Drop
-
-В современном стандарте HTML5 есть поддержка Drag'n'Drop при помощи [специальных событий](http://www.html5rocks.com/en/tutorials/dnd/basics/). 
-
-Эти события поддерживаются всеми современными браузерами, и у них есть свои интересные особенности, например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому. Они заслуживают отдельного рассмотрения.
-
-Но в плане именно Drag'n'Drop у них есть существенные ограничения. Например, нельзя организовать перенос "только по горизонтали" или "только по вертикали". Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы.
-
-Поэтому здесь мы будем рассматривать Drag'n'Drop при помощи событий мыши. 
-
-Рассматриваемые приёмы, вообще говоря, применяются не только в Drag'n'Drop, но и для любых интерфейсных взаимодействий вида "захватить - потянуть - отпустить".
-
-## Алгоритм Drag'n'Drop
- 
- Основной алгоритм Drag'n'Drop выглядит так:
-<ol>
- <li>Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события `mousedown`.</li>
- <li>При нажатии -- подготовить элемент к перемещению.</li>
-<li>Далее отслеживаем движение мыши через <code>mousemove</code> и передвигаем переносимый элемент на новые координаты путём смены `left/top` и `position:absolute`.</li>
- <li>При отпускании кнопки мыши, то есть наступлении события <code>mouseup</code> -- остановить перенос элемента и произвести все действия, связанные с окончанием Drag'n'Drop.</li>
-</ol>
-
-
-В следующем примере эти шаги реализованы для переноса мяча:
-
-```js
-var ball = document.getElementById('ball');
-
-ball.onmousedown = function(e) { // 1. отследить нажатие*!*
-
-  // подготовить к перемещению
-  // 2. разместить на том же месте, но в абсолютных координатах*!*
-  ball.style.position = 'absolute';
-  moveAt(e);
-  // переместим в body, чтобы мяч был точно не внутри position:relative
-  document.body.appendChild(ball);
-
-  ball.style.zIndex = 1000; // показывать мяч над другими элементами
-
-  // передвинуть мяч под координаты курсора 
-  // и сдвинуть на половину ширины/высоты для центрирования
-  function moveAt(e) {
-    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
-  }
-
-  // 3, перемещать по экрану*!*
-  document.onmousemove = function(e) {
-    moveAt(e);
-  }
-
-  // 4. отследить окончание переноса *!*
-  ball.onmouseup = function() {
-    document.onmousemove = null;
-    ball.onmouseup = null;
-  }
-}
-```
-
-Если запустить этот код, то мы заметим нечто странное. При начале переноса мяч "раздваивается" и переносится не сам мяч, а его "клон".
-
-[online]
-Это можно увидеть в действии внутри ифрейма:
-
-[iframe src="ball" height=230]
-
-Попробуйте перенести мяч мышкой и вы увидите описанное, довольно-таки странное, поведение.
-[/online]
-
-Это потому, что браузер имеет свой собственный Drag'n'Drop, который автоматически запускается и вступает в конфликт с нашим. Это происходит именно для картинок и некоторых других элементов.
-
-Его нужно отключить:
-
-```js
-ball.ondragstart = function() {
-  return false;
-};
-```
-
-Теперь всё будет в порядке.
-
-[online]
-В действии (внутри ифрейма):
-
-[iframe src="ball2" height=230]
-[/online]
-
-Ещё одна особенность правильного Drag'd'Drop -- событие `mousemove` отслеживается на `document`, а не на `ball`.
-
-С первого взгляда кажется, что мышь всегда над мячом и обработчик `mousemove` можно повесить на сам мяч, а не на документ.
-
-Однако, на самом деле мышь во время переноса не всегда над мячом. 
-
-Вспомним, событие `mousemove` возникает хоть и часто, но не для каждого пикселя. Быстрое движение курсора вызовет `mousemove` уже не над мячом, а, например, в дальнем конце страницы. 
-
-Вот почему мы должны отслеживать `mousemove` на всём `document`.
-
-## Правильное позиционирование
-
-В примерах выше мяч позиционируется в центре под курсором мыши:
-
-```js
-self.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-self.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
-```
-
-Если поставить `left/top` ровно в `pageX/pageY`, то мячик прилипнет верхним-левым углом к курсору мыши. Будет некрасиво. Поэтому мы сдвигаем его на половину высоты/ширины, чтобы был центром под мышью. Уже лучше.
-
-Но не идеально. В частности, в самом начале переноса, особенно если мячик "взят" за край -- он резко "прыгает" центром под курсор мыши. 
-
-**Для правильного переноса необходимо, чтобы изначальный сдвиг курсора относительно элемента сохранялся.**
-
-Где захватили, за ту "часть элемента" и переносим:
-
-<img src="ball_shift.png">
-
-<ol>
-<li>Когда человек нажимает на мячик `mousedown` -- курсор сдвинут относительно левого-верхнего угла мяча на расстояние, которое мы обозначим `shiftX/shiftY`. И нужно при переносе сохранить этот сдвиг.
-
-Получить значения `shiftX/shiftY` легко: достаточно вычесть из координат курсора `pageX/pageY` левую-верхнюю границу мячика, полученную при помощи функции [getCoords](#getCoords).
-
-**При Drag'n'Drop мы везде используем координаты относительно документа, так как они подходят в большем количестве ситуаций.**
-
-Конечно же, не проблема перейти к координатам относительно окна, если это понадобится. Достаточно использовать `position:fixed`, `elem.getBoundingClientRect()` для определения координат и `e.clientX/Y`.
-
-```js
-// onmousedown
-shiftX = e.pageX - getCoords(ball).left;
-shiftY = e.pageY - getCoords(ball).top;
-```
-
-</li>
-<li>Далее при переносе мяча мы располагаем его `left/top` с учетом сдвига, то есть вот так:
-
-```js
-// onmousemove
-ball.style.left = e.pageX - *!*shiftX*/!* + 'px';
-ball.style.top = e.pageY - *!*shiftY*/!* + 'px';
-```
-</li>
-</ol>
-
-
-Итоговый код с правильным позиционированием:
-
-
-```js
-var ball = document.getElementById('ball');
-
-ball.onmousedown = function(e) {
-
-  var coords = getCoords(ball);
-*!*
-  var shiftX = e.pageX - coords.left;
-  var shiftY = e.pageY - coords.top;
-*/!*
-
-  ball.style.position = 'absolute';
-  document.body.appendChild(ball);
-  moveAt(e);
-
-  ball.style.zIndex = 1000; // над другими элементами
-
-  function moveAt(e) {
-    ball.style.left = e.pageX - *!*shiftX*/!* + 'px';
-    ball.style.top = e.pageY - *!*shiftY*/!* + 'px';
-  }
-
-  document.onmousemove = function(e) { 
-    moveAt(e); 
-  };
-
-  ball.onmouseup = function() {
-    document.onmousemove = null;
-    ball.onmouseup = null;
-  };
-
-}
-
-ball.ondragstart = function() { 
-  return false; 
-};
-```
-
-[online]
-В действии (внутри ифрейма):
-
-[iframe src="ball3" height=230]
-[/online]
-
-Различие особенно заметно, если захватить мяч за правый-нижний угол. В предыдущем примере мячик "прыгнет" серединой под курсор, в этом -- будет плавно переноситься с текущей позиции.
-
-## Итого
-
-Мы рассмотрели "минимальный каркас" `Drag'n'Drop`. 
-
-Его компоненты:
-
-<ol>
-<li>События `ball.mousedown` -> `document.mousemove` -> `ball.mouseup`.</li>
-<li>Передвижение с учётом изначального сдвига `shiftX/shiftY`.</li>
-<li>Отмена действия браузера по событию `dragstart`.</li>
-</ol>
-
-На этой основе можно сделать очень многое. 
-
-<ul>
-<li>При `mouseup` можно обработать окончание переноса, произвести изменения в данных, если они нужны.</li>
-<li>Во время самого переноса можно подсвечивать элементы, над которыми проходит элемент.</li>
-<li>При обработке событий `mousedown` и `mouseup` можно использовать делегирование, так что одного обработчика достаточно для управления переносом в зоне с сотнями элементов.
-</ul>
-
-Это и многое другое мы рассмотрим в статье про [Drag'n'Drop объектов](/drag-and-drop-objects).
diff --git a/2-ui/3-event-details/4-drag-and-drop/ball.view/index.html b/2-ui/3-event-details/4-drag-and-drop/ball.view/index.html
deleted file mode 100644
index 59f15bb7..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/ball.view/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body style="height: 200px">
-
-  <p>Кликните по мячу и тяните, чтобы двигать его.</p>
-
-  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
-
-
-  <script>
-    var ball = document.getElementById('ball');
-
-    ball.onmousedown = function(e) {
-
-      ball.style.position = 'absolute';
-      moveAt(e);
-
-      document.body.appendChild(ball);
-
-      ball.style.zIndex = 1000; // показывать мяч над другими элементами
-
-      function moveAt(e) {
-        ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-        ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
-      }
-
-      document.onmousemove = function(e) {
-        moveAt(e);
-      };
-
-      ball.onmouseup = function() {
-        document.onmousemove = null;
-        ball.onmouseup = null;
-      };
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/ball2.view/index.html b/2-ui/3-event-details/4-drag-and-drop/ball2.view/index.html
deleted file mode 100644
index 1662c4b0..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/ball2.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body style="height: 200px">
-
-  <p>Кликните по мячу и тяните, чтобы двигать его.</p>
-
-  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
-
-
-  <script>
-    var ball = document.getElementById('ball');
-
-    ball.onmousedown = function(e) {
-
-      ball.style.position = 'absolute';
-      moveAt(e);
-
-      document.body.appendChild(ball);
-
-      ball.style.zIndex = 1000; // показывать мяч над другими элементами
-
-      function moveAt(e) {
-        ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-        ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
-      }
-
-      document.onmousemove = function(e) {
-        moveAt(e);
-      };
-
-      ball.onmouseup = function() {
-        document.onmousemove = null;
-        ball.onmouseup = null;
-      };
-    }
-
-
-    ball.ondragstart = function() {
-      return false;
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-drag-and-drop/ball3.view/index.html b/2-ui/3-event-details/4-drag-and-drop/ball3.view/index.html
deleted file mode 100644
index 708561eb..00000000
--- a/2-ui/3-event-details/4-drag-and-drop/ball3.view/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body style="height: 200px">
-
-  <p>Кликните по мячу и тяните, чтобы двигать его.</p>
-
-  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
-
-
-  <script>
-    var ball = document.getElementById('ball');
-
-    ball.onmousedown = function(e) {
-
-      var coords = getCoords(ball);
-      var shiftX = e.pageX - coords.left;
-      var shiftY = e.pageY - coords.top;
-
-      ball.style.position = 'absolute';
-      document.body.appendChild(ball);
-      moveAt(e);
-
-      ball.style.zIndex = 1000; // над другими элементами
-
-      function moveAt(e) {
-        ball.style.left = e.pageX - shiftX + 'px';
-        ball.style.top = e.pageY - shiftY + 'px';
-      }
-
-      document.onmousemove = function(e) {
-        moveAt(e);
-      };
-
-      ball.onmouseup = function() {
-        document.onmousemove = null;
-        ball.onmouseup = null;
-      };
-
-    }
-
-    ball.ondragstart = function() {
-      return false;
-    };
-
-
-    function getCoords(elem) { // кроме IE8-
-      var box = elem.getBoundingClientRect();
-
-      return {
-        top: box.top + pageYOffset,
-        left: box.left + pageXOffset
-      };
-
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
new file mode 100644
index 00000000..28e8cffa
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
@@ -0,0 +1,4 @@
+
+We have a horizontal Drag'n'Drop here.
+
+To position the element we use `position:relative` and slider-relative coordinates for the thumb. Here it's more convenient here than `position:absolute`.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html
new file mode 100644
index 00000000..c364b42d
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div id="slider" class="slider">
+    <div class="thumb"></div>
+  </div>
+
+  <script>
+    let thumb = slider.querySelector('.thumb');
+
+    thumb.onmousedown = function(event) {
+      event.preventDefault(); // prevent selection start (browser action)
+
+      let shiftX = event.clientX - thumb.getBoundingClientRect().left;
+      // shiftY not needed, the thumb moves only horizontally
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+
+      function onMouseMove(event) {
+        let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
+
+        // the pointer is out of slider => lock the thumb within the bounaries
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        let rightEdge = slider.offsetWidth - thumb.offsetWidth;
+        if (newLeft > rightEdge) {
+          newLeft = rightEdge;
+        }
+
+        thumb.style.left = newLeft + 'px';
+      }
+
+      function onMouseUp() {
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('mousemove', onMouseMove);
+      }
+
+    };
+
+    thumb.ondragstart = function() {
+      return false;
+    };
+
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/style.css b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/style.css
new file mode 100644
index 00000000..9b3d3b82
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/style.css
@@ -0,0 +1,19 @@
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/index.html
new file mode 100644
index 00000000..a9a545c0
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div id="slider" class="slider">
+    <div class="thumb"></div>
+  </div>
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/style.css b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/style.css
new file mode 100644
index 00000000..9b3d3b82
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/style.css
@@ -0,0 +1,19 @@
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
new file mode 100644
index 00000000..0c6da4e2
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# Slider
+
+Create a slider:
+
+[iframe src="solution" height=60 border=1]
+
+Drag the blue thumb with the mouse and move it.
+
+Important details:
+
+- When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
+- If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
new file mode 100644
index 00000000..deb43b65
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
@@ -0,0 +1,5 @@
+To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute`.
+
+Then, when coordinates are at window top/bottom, we use `window.scrollTo` to scroll it.
+
+More details in the code, in comments.
diff --git 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
new file mode 100644
index 00000000..81ecde02
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="22cm" height="14cm" viewBox="0 0 1150 720" stroke="white" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+     <!--图纸区-->
+     <rect x="0" y="0" width="1150" height="720" fill="green" />
+     <!--球场框和中线-->
+     <path d="M 575,20 L 50,20 50,700 1100,700 1100,20 575,20 575,700 z" stroke="white" stroke-width="2" fill="green" />
+     <!--中线-->
+     <circle cx="575" cy="360" r="91.5" stroke="white" stroke-width="2" fill-opacity="0" />
+     <circle cx="575" cy="360" r="2" stroke="white" fill="white" />
+     <!--罚球点-->
+     <circle cx="160" cy="360" r="2" stroke="white" fill="white" />
+     <circle cx="990" cy="360" r="2" stroke="white" fill="white" />
+     <!--球门-->
+     <path d="M 50,324.4 L 40,324.4 40, 396.6 50 396.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 1100,324.4 L 1110,324.4 1110,396.6 1100,396.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <!--球门区-->
+     <path d="M 50,269.4 L 105,269.4 105,451.6 50 451.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 1100,269.4 L 1045,269.4 1045,451.6 1100,451.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <!--禁区 -->
+     <path d="M 50,159.4 L 215,159.4 215,561.6 50 561.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 1100,159.4 L 935,159.4 935,561.6 1100,561.6 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 215,286.875 A 91.5,91.5 0 0,1 215,433.125 z" stroke="white" stroke-width="2" fill="green" />
+     <path d="M 935,286.875 A 91.5,91.5 0 0,0 935,433.125 z" stroke="white" stroke-width="2" fill="green" />
+     <!--角球弧-->
+     <path d="M 50,30 A 10,10 0 0,0 60,20 L 50,20 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 60,700 A 10,10 0 0,0 50,690 L 50,700 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 1100,690 A 10,10 0 0,0 1090,700 L 1100,700 z" stroke="white" stroke-width="2" fill-opacity="0" />
+     <path d="M 1090,20 A 10,10 0 0,0 1100,30 L 1100,20 z" stroke="white" stroke-width="2" fill-opacity="0" />
+</svg>
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html
new file mode 100644
index 00000000..d79ef30a
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="soccer.css">
+</head>
+
+<body>
+
+  <h2>Place superheroes around the soccer field.</h2>
+
+  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+
+  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+
+  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+
+  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+
+  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+
+  <div id="field">
+
+  </div>
+
+  <div class="hero draggable" id="hero1"></div>
+  <div class="hero draggable" id="hero2"></div>
+  <div class="hero draggable" id="hero3"></div>
+  <div class="hero draggable" id="hero4"></div>
+  <div class="hero draggable" id="hero5"></div>
+  <div class="hero draggable" id="hero6"></div>
+
+  <img src="https://en.js.cx/clipart/ball.svg" class="draggable">
+
+  <div style="clear:both"></div>
+
+  <script src="soccer.js"></script>
+</body>
+
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
new file mode 100644
index 00000000..00d5d70f
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -0,0 +1,48 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#field {
+  background: url(field.svg);
+  width: 800px;
+  height: 500px;
+  float: left;
+}
+
+/* heroes and the ball (dragables) */
+
+.hero {
+  background: url(https://js.cx/drag-heroes/heroes.png);
+  width: 130px;
+  height: 128px;
+  float: left;
+}
+
+#hero1 {
+  background-position: 0 0;
+}
+
+#hero2 {
+  background-position: 0 -128px;
+}
+
+#hero3 {
+  background-position: -120px 0;
+}
+
+#hero4 {
+  background-position: -125px -128px;
+}
+
+#hero5 {
+  background-position: -248px -128px;
+}
+
+#hero6 {
+  background-position: -244px 0;
+}
+
+.draggable {
+  cursor: pointer;
+}
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
new file mode 100644
index 00000000..6c3daa5b
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -0,0 +1,99 @@
+document.addEventListener('mousedown', function(event) {
+
+  let dragElement = event.target.closest('.draggable');
+
+  if (!dragElement) return;
+
+  event.preventDefault();
+  let coords, shiftX, shiftY;
+
+  startDrag(event.clientX, event.clientY);
+
+  document.addEventListener('mousemove', onMouseMove);
+
+  dragElement.onmouseup = function() {
+    finishDrag();
+  };
+
+  function onMouseMove(event) {
+    moveAt(event.clientX, event.clientY);
+  }
+
+  // on drag start:
+  //   remember the initial shift
+  //   move the element position:fixed and a direct child of body
+  function startDrag(clientX, clientY) {
+
+    shiftX = clientX - dragElement.getBoundingClientRect().left;
+    shiftY = clientY - dragElement.getBoundingClientRect().top;
+
+    dragElement.style.position = 'fixed';
+
+    document.body.append(dragElement);
+
+    moveAt(clientX, clientY);
+  };
+
+  // switch to absolute coordinates at the end, to fix the element in the document
+  function finishDrag() {
+    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
+    dragElement.style.position = 'absolute';
+
+    document.removeEventListener('mousemove', onMouseMove);
+    dragElement.onmouseup = null;
+  }
+
+  function moveAt(clientX, clientY) {
+    // new window-relative coordinates
+    let newX = clientX - shiftX;
+    let newY = clientY - shiftY;
+
+    // check if the new coordinates are below the bottom window edge
+    let newBottom = newY + dragElement.offsetHeight; // new bottom
+
+    // below the window? let's scroll the page
+    if (newBottom > document.documentElement.clientHeight) {
+      // window-relative coordinate of document end
+      let docBottom = document.documentElement.getBoundingClientRect().bottom;
+
+      // scroll the document down by 10px has a problem
+      // it can scroll beyond the end of the document
+      // Math.min(how much left to the end, 10)
+      let scrollY = Math.min(docBottom - newBottom, 10);
+
+      // calculations are imprecise, there may be rounding errors that lead to scrolling up
+      // that should be impossible, fix that here
+      if (scrollY < 0) scrollY = 0;
+
+      window.scrollBy(0, scrollY);
+
+      // a swift mouse move make put the cursor beyond the document end
+      // if that happens -
+      // limit the new Y by the maximally possible (right at the bottom of the document)
+      newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
+    }
+
+    // check if the new coordinates are above the top window edge (similar logic)
+    if (newY < 0) {
+      // scroll up
+      let scrollY = Math.min(-newY, 10);
+      if (scrollY < 0) scrollY = 0; // check precision errors
+
+      window.scrollBy(0, -scrollY);
+      // a swift mouse move can put the cursor beyond the document start
+      newY = Math.max(newY, 0); // newY may not be below 0
+    }
+
+
+    // limit the new X within the window boundaries
+    // there's no scroll here so it's simple
+    if (newX < 0) newX = 0;
+    if (newX > document.documentElement.clientWidth - dragElement.offsetWidth) {
+      newX = document.documentElement.clientWidth - dragElement.offsetWidth;
+    }
+
+    dragElement.style.left = newX + 'px';
+    dragElement.style.top = newY + 'px';
+  }
+
+});
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
new file mode 100644
index 00000000..d79ef30a
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="soccer.css">
+</head>
+
+<body>
+
+  <h2>Place superheroes around the soccer field.</h2>
+
+  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+
+  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+
+  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+
+  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+
+  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+
+  <div id="field">
+
+  </div>
+
+  <div class="hero draggable" id="hero1"></div>
+  <div class="hero draggable" id="hero2"></div>
+  <div class="hero draggable" id="hero3"></div>
+  <div class="hero draggable" id="hero4"></div>
+  <div class="hero draggable" id="hero5"></div>
+  <div class="hero draggable" id="hero6"></div>
+
+  <img src="https://en.js.cx/clipart/ball.svg" class="draggable">
+
+  <div style="clear:both"></div>
+
+  <script src="soccer.js"></script>
+</body>
+
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
new file mode 100644
index 00000000..00d5d70f
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
@@ -0,0 +1,48 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#field {
+  background: url(field.svg);
+  width: 800px;
+  height: 500px;
+  float: left;
+}
+
+/* heroes and the ball (dragables) */
+
+.hero {
+  background: url(https://js.cx/drag-heroes/heroes.png);
+  width: 130px;
+  height: 128px;
+  float: left;
+}
+
+#hero1 {
+  background-position: 0 0;
+}
+
+#hero2 {
+  background-position: 0 -128px;
+}
+
+#hero3 {
+  background-position: -120px 0;
+}
+
+#hero4 {
+  background-position: -125px -128px;
+}
+
+#hero5 {
+  background-position: -248px -128px;
+}
+
+#hero6 {
+  background-position: -244px 0;
+}
+
+.draggable {
+  cursor: pointer;
+}
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.js
new file mode 100644
index 00000000..ee04fda1
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.js
@@ -0,0 +1 @@
+// Your code
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
new file mode 100644
index 00000000..16add0cf
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Drag superheroes around the field
+
+This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
+
+Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
+
+Requirements:
+
+- Use event delegation to track drag start: a single event handler on `document` for `mousedown`.
+- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
+- There is no horizontal scroll.
+- Draggable elements should never leave the window, even after swift mouse moves.
+
+The demo is too big to fit it here, so here's the link.
+
+[demo src="solution"]
diff --git 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
new file mode 100644
index 00000000..7c110de1
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
@@ -0,0 +1,296 @@
+# Drag'n'Drop with mouse events
+
+Drag'n'Drop is a great interface solution. Taking something, dragging and dropping is a clear and simple way to do many things, from copying and moving (see file managers) to ordering (drop into cart).
+
+In the modern HTML standard there's a [section about Drag Events](https://html.spec.whatwg.org/multipage/interaction.html#dnd).
+
+They are interesting, because they allow to solve simple tasks easily, and also allow to handle drag'n'drop of "external" files into the browser. So we can take a file in the OS file-manager and drop it into the browser window. Then JavaScript gains access to its contents.
+
+But native Drag Events also have limitations. For instance, we can limit dragging by a certain area. Also we can't make it "horizontal" or "vertical" only. There are other drag'n'drop tasks that can't be implemented using that API.
+
+So here we'll see how to implement Drag'n'Drop using mouse events. Not that hard either.
+
+## Drag'n'Drop algorithm
+
+The basic Drag'n'Drop algorithm looks like this:
+
+1. Catch `mousedown` on a draggable element.
+2. Prepare the element to moving (maybe create a copy of it or whatever).
+3. Then on `mousemove` move it by changing `left/top` and `position:absolute`.
+4. On `mouseup` (button release) -- perform all actions related to a finished Drag'n'Drop.
+
+These are the basics. We can extend it, for instance, by highlighting droppable (available for the drop) elements when hovering over them.
+
+Here's the algorithm for drag'n'drop of a ball:
+
+```js
+ball.onmousedown = function(event) { // (1) start the process
+
+  // (2) prepare to moving: make absolute and on top by z-index
+  ball.style.position = 'absolute';
+  ball.style.zIndex = 1000;
+  document.body.append(ball);  
+  // ...and put that absolutely positioned ball under the cursor
+
+  moveAt(event.pageX, event.pageY);
+
+  // centers the ball at (pageX, pageY) coordinates
+  function moveAt(pageX, pageY) {
+    ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
+    ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
+  }
+
+  function onMouseMove(event) {
+    moveAt(event.pageX, event.pageY);
+  }
+
+  // (3) move the ball on mousemove
+  document.addEventListener('mousemove', onMouseMove);
+
+  // (4) drop the ball, remove unneeded handlers
+  ball.onmouseup = function() {
+    document.removeEventListener('mousemove', onMouseMove);
+    ball.onmouseup = null;
+  };
+
+};
+```
+
+If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start to dragging it's "clone".
+
+```online
+Here's an example in action:
+
+[iframe src="ball" height=230]
+
+Try to drag'n'drop the mouse and you'll see the strange behavior.
+```
+
+That's because the browser has its own Drag'n'Drop for images and some other elements that runs automatically and conflicts with ours.
+
+To disable it:
+
+```js
+ball.ondragstart = function() {
+  return false;
+};
+```
+
+Now everything will be all right.
+
+```online
+In action:
+
+[iframe src="ball2" height=230]
+```
+
+Another important aspect -- we track `mousemove` on `document`, not on `ball`. From the first sight it may seem that the mouse is always over the ball, and we can put `mousemove` on it.
+
+But as we remember, `mousemove` triggers often, but not for every pixel. So after swift move the cursor can jump from the ball somewhere in the middle of document (or even outside of the window).
+
+So we should listen on `document` to catch it.
+
+## Correct positioning
+
+In the examples above the ball is always centered under the pointer:
+
+```js
+ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
+ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
+```
+
+Not bad, but there's a side-effect. To initiate the drag'n'drop can we `mousedown` anywhere on the ball. If do it at the edge, then the ball suddenly "jumps" to become centered.
+
+It would be better if we keep the initial shift of the element relative to the pointer.
+
+For instance, if we start dragging by the edge of the ball, then the cursor should remain over the edge while dragging.
+
+![](ball_shift.png)
+
+1. When a visitor presses the button (`mousedown`) -- we can remember the distance from the cursor to the left-upper corner of the ball in variables `shiftX/shiftY`. We should keep that distance while dragging.
+
+    To get these shifts we can substract the coordinates:
+
+    ```js
+    // onmousedown
+    let shiftX = event.clientX - ball.getBoundingClientRect().left;
+    let shiftY = event.clientY - ball.getBoundingClientRect().top;
+    ```
+
+    Please note that there's no method to get document-relative coordinates in JavaScript, so we use window-relative coordinates here.
+
+2. Then while dragging we position the ball on the same shift relative to the pointer, like this:
+
+    ```js
+    // onmousemove
+    // ball has position:absoute
+    ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
+    ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
+    ```
+
+The final code with better positioning:
+
+```js
+ball.onmousedown = function(event) {
+
+*!*
+  let shiftX = event.clientX - ball.getBoundingClientRect().left;
+  let shiftY = event.clientY - ball.getBoundingClientRect().top;
+*/!*
+
+  ball.style.position = 'absolute';
+  ball.style.zIndex = 1000;
+  document.body.append(ball);
+
+  moveAt(event.pageX, event.pageY);
+
+  // centers the ball at (pageX, pageY) coordinates
+  function moveAt(pageX, pageY) {
+    ball.style.left = pageX - *!*shiftX*/!* + 'px';
+    ball.style.top = pageY - *!*shiftY*/!* + 'px';
+  }
+
+  function onMouseMove(event) {
+    moveAt(event.pageX, event.pageY);
+  }
+
+  // (3) move the ball on mousemove
+  document.addEventListener('mousemove', onMouseMove);
+
+  // (4) drop the ball, remove unneeded handlers
+  ball.onmouseup = function() {
+    document.removeEventListener('mousemove', onMouseMove);
+    ball.onmouseup = null;
+  };
+
+};
+
+ball.ondragstart = function() {
+  return false;
+};
+```
+
+```online
+In action (inside `<iframe>`):
+
+[iframe src="ball3" height=230]
+```
+
+The difference is especially noticeable if we drag the ball by it's right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the cursor from the current position.
+
+## Detecting droppables
+
+In previous examples the ball could be dropped just "anywhere" to stay. In real-life we usually take one element and drop it onto another. For instance, a file into a folder, or a user into a trash can or whatever.
+
+Abstractly, we take a "draggable" element and drop it onto "droppable" element.
+
+We need to know the target droppable at the end of Drag'n'Drop -- to do the corresponding action, and, preferably, during the dragging process, to highlight it.
+
+The solution is kind-of interesting and just a little bit tricky, so let's cover it here.
+
+What's the first idea? Probably to put `onmouseover/mouseup` handlers on potential droppables and detect when the mouse pointer appears over them. And then we know that we are dragging/dropping on that element.
+
+But that doesn't work.
+
+The problem is that, while we're dragging, the draggable element is always above other elements. And mouse events only happen on the top element, not on those below it.
+
+For instance, below are two `<div>` elements, red on top of blue. There'no way to catch an event on the blue one, because the red is on top:
+
+```html run autorun height=60
+<style>
+  div {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: 0;
+  }
+</style>
+<div style="background:blue" onmouseover="alert('never works')"></div>
+<div style="background:red" onmouseover="alert('over red!')"></div>
+```
+
+The same with a draggable element. The ball in always on top over other elements, so events happen on it. Whatever handlers we set on lower elements, they won't work.
+
+That's why the initial idea to put handlers on potential droppables doesn't work in practice. They won't run.
+
+So, what to do?
+
+There's a method called `document.elementFromPoint(clientX, clientY)`. It returns the most nested element on given window-relative coordinates (or `null` if coordinates are out of the window).
+
+So in any of our mouse event handlers we can detect the potential droppable under the pointer like this:
+
+```js
+// in a mouse event handler
+ball.hidden = true; // (*)
+let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
+ball.hidden = false;
+// elemBelow is the element below the ball. If it's droppable, we can handle it.
+```
+
+Please note: we need to hide the ball before the call `(*)`. Otherwise we'll usually have a ball on these coordinates, as it's the top element under the pointer: `elemBelow=ball`.
+
+We can use that code to check what we're "flying over" at any time. And handle the drop when it happens.
+
+An extended code of `onMouseMove` to find "droppable" elements:
+
+```js
+let currentDroppable = null; // potential droppable that we're flying over right now
+
+function onMouseMove(event) {
+  moveAt(event.pageX, event.pageY);
+
+  ball.hidden = true;
+  let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
+  ball.hidden = false;
+
+  // mousemove events may trigger out of the window (when the ball is dragged off-screen)
+  // if clientX/clientY are out of the window, then elementfromPoint returns null
+  if (!elemBelow) return;
+
+  // potential droppables are labeled with the class "droppable" (can be other logic)
+  let droppableBelow = elemBelow.closest('.droppable');
+
+  if (currentDroppable != droppableBelow) { // if there are any changes
+    // we're flying in or out...
+    // note: both values can be null
+    //   currentDroppable=null if we were not over a droppable (e.g over an empty space)
+    //   droppableBelow=null if we're not over a droppable now, during this event
+
+    if (currentDroppable) {
+      // the logic to process "flying out" of the droppable (remove highlight)
+      leaveDroppable(currentDroppable);
+    }
+    currentDroppable = droppableBelow;
+    if (currentDroppable) {
+      // the logic to process "flying in" of the droppable
+      enterDroppable(currentDroppable);
+    }
+  }
+}
+```
+
+In the example below when the ball is dragged over the soccer gate, the gate is highlighted.
+
+[codetabs height=250 src="ball4"]
+
+Now we have the current "drop target" in the variable `currentDroppable` during the whole process and can use it to highlight or any other stuff.
+
+## Summary
+
+We considered a basic `Drag'n'Drop` algorithm.
+
+The key components:
+
+1. Events flow: `ball.mousedown` -> `document.mousemove` -> `ball.mouseup` (cancel native `ondragstart`).
+2. At the drag start -- remember the initial shift of the pointer relative to the element: `shiftX/shiftY` and keep it during the dragging.
+3. Detect droppable elements under the pointer using `document.elementFromPoint`.
+
+We can lay a lot on this foundation.
+
+- On `mouseup` we can finalize the drop: change data, move elements around.
+- We can highlight the elements we're flying over.
+- We can limit dragging by a certain area or direction.
+- We can use event delegation for `mousedown/up`. A large-area event handler that checks  `event.target` can manage Drag'n'Drop for hundreds of elements.
+- And so on.
+
+There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to described above, so it should be easy to understand them now. Or roll our own, because you already know how to handle the process, and it may be more flexible than to adapt something else.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html
new file mode 100644
index 00000000..3fdd7fe7
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body style="height: 200px">
+
+  <p>Drag the ball.</p>
+
+  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
+
+
+  <script>
+    ball.onmousedown = function(event) { // (1) start the process
+
+      // (2) prepare to moving: make absolute and top by z-index
+      ball.style.position = 'absolute';
+      ball.style.zIndex = 1000;
+      document.body.appendChild(ball);
+      // ...and put that absolutely positioned ball under the cursor
+      moveAt(event.pageX, event.pageY);
+
+      // centers the ball at (pageX, pageY) coordinates
+      function moveAt(pageX, pageY) {
+        ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
+        ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
+      }
+
+      function onMouseMove(event) {
+        moveAt(event.pageX, event.pageY);
+      }
+
+      // (3) move the ball on mousemove
+      document.addEventListener('mousemove', onMouseMove);
+
+      // (4) drop the ball, remove unneeded handlers
+      ball.onmouseup = function() {
+        document.removeEventListener('mousemove', onMouseMove);
+        ball.onmouseup = null;
+      };
+
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html
new file mode 100644
index 00000000..3843aa78
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body style="height: 200px">
+
+  <p>Drag the ball.</p>
+
+  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
+
+
+  <script>
+    ball.onmousedown = function(event) { // (1) start the process
+
+      // (2) prepare to moving: make absolute and top by z-index
+      ball.style.position = 'absolute';
+      ball.style.zIndex = 1000;
+      document.body.appendChild(ball);
+      // ...and put that absolutely positioned ball under the cursor
+      moveAt(event.pageX, event.pageY);
+
+      // centers the ball at (pageX, pageY) coordinates
+      function moveAt(pageX, pageY) {
+        ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
+        ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
+      }
+
+      function onMouseMove(event) {
+        moveAt(event.pageX, event.pageY);
+      }
+
+      // (3) move the ball on mousemove
+      document.addEventListener('mousemove', onMouseMove);
+
+      // (4) drop the ball, remove unneeded handlers
+      ball.onmouseup = function() {
+        document.removeEventListener('mousemove', onMouseMove);
+        ball.onmouseup = null;
+      };
+
+    };
+
+
+    ball.ondragstart = function() {
+      return false;
+    };
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball3.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball3.view/index.html
new file mode 100644
index 00000000..21ec4558
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/ball3.view/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body style="height: 200px">
+
+  <p>Drag the ball.</p>
+
+  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
+
+
+  <script>
+    ball.onmousedown = function(event) {
+
+      let shiftX = event.clientX - ball.getBoundingClientRect().left;
+      let shiftY = event.clientY - ball.getBoundingClientRect().top;
+
+      ball.style.position = 'absolute';
+      ball.style.zIndex = 1000;
+      document.body.append(ball);
+
+      moveAt(event.pageX, event.pageY);
+
+      function moveAt(pageX, pageY) {
+        ball.style.left = pageX - shiftX + 'px';
+        ball.style.top = pageY - shiftY + 'px';
+      }
+
+      function onMouseMove(event) {
+        moveAt(event.pageX, event.pageY);
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+
+      ball.onmouseup = function() {
+        document.removeEventListener('mousemove', onMouseMove);
+        ball.onmouseup = null;
+      };
+
+    };
+
+    ball.ondragstart = function() {
+      return false;
+    };
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html
new file mode 100644
index 00000000..aaef2f3b
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <p>Drag the ball.</p>
+
+  <img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
+
+  <img src="https://en.js.cx/clipart/ball.svg" id="ball">
+
+  <script>
+    let currentDroppable = null;
+
+    ball.onmousedown = function(event) {
+
+      let shiftX = event.clientX - ball.getBoundingClientRect().left;
+      let shiftY = event.clientY - ball.getBoundingClientRect().top;
+
+      ball.style.position = 'absolute';
+      ball.style.zIndex = 1000;
+      document.body.append(ball);
+
+      moveAt(event.pageX, event.pageY);
+
+      function moveAt(pageX, pageY) {
+        ball.style.left = pageX - shiftX + 'px';
+        ball.style.top = pageY - shiftY + 'px';
+      }
+
+      function onMouseMove(event) {
+        moveAt(event.pageX, event.pageY);
+
+        ball.hidden = true;
+        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
+        ball.hidden = false;
+
+        if (!elemBelow) return;
+
+        let droppableBelow = elemBelow.closest('.droppable');
+        if (currentDroppable != droppableBelow) {
+          if (currentDroppable) { // null when we were not over a droppable before this event
+            leaveDroppable(currentDroppable);
+          }
+          currentDroppable = droppableBelow;
+          if (currentDroppable) { // null if we're not coming over a droppable now
+            // (maybe just left the droppable)
+            enterDroppable(currentDroppable);
+          }
+        }
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+
+      ball.onmouseup = function() {
+        document.removeEventListener('mousemove', onMouseMove);
+        ball.onmouseup = null;
+      };
+
+    };
+
+    function enterDroppable(elem) {
+      elem.style.background = 'pink';
+    }
+
+    function leaveDroppable(elem) {
+      elem.style.background = '';
+    }
+
+    ball.ondragstart = function() {
+      return false;
+    };
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/style.css b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/style.css
new file mode 100644
index 00000000..dad5ac86
--- /dev/null
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/style.css
@@ -0,0 +1,13 @@
+
+#gate {
+  cursor: pointer;
+  margin-bottom: 100px;
+  width: 83px;
+  height: 46px;
+}
+
+#ball {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+}
diff --git a/2-ui/3-event-details/4-drag-and-drop/ball_shift.png b/2-ui/3-event-details/4-mouse-drag-and-drop/ball_shift.png
similarity index 100%
rename from 2-ui/3-event-details/4-drag-and-drop/ball_shift.png
rename to 2-ui/3-event-details/4-mouse-drag-and-drop/ball_shift.png
diff --git a/2-ui/3-event-details/4-drag-and-drop/ball_shift@2x.png b/2-ui/3-event-details/4-mouse-drag-and-drop/ball_shift@2x.png
similarity index 100%
rename from 2-ui/3-event-details/4-drag-and-drop/ball_shift@2x.png
rename to 2-ui/3-event-details/4-mouse-drag-and-drop/ball_shift@2x.png
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/article.md b/2-ui/3-event-details/5-drag-and-drop-objects/article.md
deleted file mode 100644
index 232361f2..00000000
--- a/2-ui/3-event-details/5-drag-and-drop-objects/article.md
+++ /dev/null
@@ -1,531 +0,0 @@
-# Мышь: Drag'n'Drop более глубоко
-
-В [предыдущей статье](/drag-and-drop) мы рассмотрели основы Drag'n'Drop. Здесь мы разберём дополнительные "тонкие места" и приёмы реализации, которые возникают на практике.
-
-Почти все javascript-библиотеки реализуют Drag'n'Drop так, как написано (хотя бывает что и менее эффективно). 
-
-Зная, что и как, вы сможете легко написать свой код переноса или поправить, адаптировать существующую библиотеку под себя.
-
-Этот материал не строго обязателен для изучения, он специфичен именно для Drag'n'Drop.
-
-[cut]
-
-## Документ
-
-Как пример задачи -- возьмём документ с иконками браузера ("объекты переноса"), которые можно переносить в компьютер ("цель переноса"):
-
-<ul>
-<li>Элементы, которые можно переносить (иконки браузеров), помечены классом `draggable`.</li>
-<li>Элементы, на которые можно положить (компьютер), имеют класс `droppable`.</li>
-</ul>
-
-```html
-<img src="chrome.png" class="*!*draggable*/!*">
-<img src="firefox.png" class="*!*draggable*/!*">
-<img src="ie.png" class="*!*draggable*/!*">
-<img src="opera.png" class="*!*draggable*/!*">
-<img src="safari.png" class="*!*draggable*/!*">
-
-<p>Браузер переносить сюда:</p>
-
-<img src="computer.gif" class="*!*droppable*/!*">
-```
-
-
-Работающий пример с переносом:
-
-[iframe border=1 src="dragDemo" height=280 link edit]
-
-Далее мы рассмотрим, как делается фреймворк для таких переносов, а в перспективе -- и для более сложных.
-
-Требования:
-<ul>
-<li>Поддержка большого количества элементов без "тормозов".</li>
-<li>Продвинутые возможности по анимации переноса.</li>
-<li>Удобная обработка успешного и неудачного переноса.</li>
-</ul>
-
-## Начало переноса
-
-Чтобы начать перенос элемента, мы должны отловить нажатие левой кнопки мыши на нём. Для этого используем событие `mousedown`... И, конечно, делегирование.
-
-Переносимых элементов может быть много. В нашем документе-примере это всего лишь несколько иконок, но если мы хотим переносить элементы списка или дерева, то их может быть 100 штук и более.
-
-Поэтому повесим обработчик `mousedown` на контейнер, который содержит переносимые элементы, и будем определять нужный элемент поиском ближайшего `draggable` вверх по иерархии от `event.target`. 
-
-В качестве контейнера здесь будем брать `document`, хотя это может быть и любой элемент.
-
-Найденный `draggable`-элемент сохраним в свойстве `dragObject.elem` и начнём двигать.
-
-Код обработчика `mousedown`:
-
-```js
-var dragObject = {};
-
-document.onmousedown = function(e) {
-
-  if (e.which != 1) { // если клик правой кнопкой мыши
-    return; // то он не запускает перенос
-  }
-
-  var elem = e.target.closest('.draggable');
-
-  if (!elem) return; // не нашли, клик вне draggable-объекта
-
-  // запомнить переносимый объект
-  dragObject.elem = elem;
-
-  // запомнить координаты, с которых начат перенос объекта
-  dragObject.downX = e.pageX;
-  dragObject.downY = e.pageY;
-}
-```
-
-[warn header="Не начинаем перенос по `mousedown`"]
-Ранее мы по `mousedown` начинали перенос. 
-
-Но на самом деле нажатие на элемент вовсе не означает, что его собираются куда-то двигать. Возможно, на нём просто кликают.
-
-Это важное различие. Снимать элемент со своего места и куда-то двигать нужно только при переносе.
-
-Чтобы отличить перенос от клика, в том числе -- от клика, который сопровождается нечаянным перемещением на пару пикселей (рука дрогнула), мы будем запоминать в `dragObject`, какой элемент (`elem`) и где (`downX/downY`) был зажат, а начало переноса будем инициировать из `mousemove`, если он передвинут хотя бы на несколько пикселей. 
-[/warn]
-
-## Перенос элемента
-
-Первой задачей обработчика `mousemove` является инициировать начало переноса, если элемент передвинули в зажатом состоянии.
-
-Ну а второй задачей -- отображать его перенос при каждом передвижении мыши. 
-
-Схематично, обработчик будет иметь такой вид:
-
-```js
-document.onmousemove = function(e) {
-  if (!dragObject.elem) return; // элемент не зажат
-
-  if (!dragObject.avatar) { // элемент нажат, но пока не начали его двигать
-    ...начать перенос, присвоить dragObject.avatar = переносимый элемент
-  }
-
-  ...отобразить перенос элемента...
-}
-```
-
-Здесь мы видим новое свойство `dragObject.avatar`. При начале переноса "аватар" делается из элемента и сохраняется в свойство `dragObject.avatar`.
-
-**"Аватар" -- это DOM-элемент, который перемещается по экрану.** 
-
-Почему бы не перемещать по экрану сам `draggable`-элемент? Зачем, вообще, нужен аватар?
-
-Дело в том, что иногда сам элемент передвигать неудобно, например потому, что он слишком большой. А удобно создать некоторое визуальное представление элемента, и его уже переносить. Аватар дает такую возможность.
-
-А в простейшем случае аватаром можно будет сделать сам элемент, и это не повлечёт дополнительных расходов.
-
-### Визуальное перемещение аватара
-
-Для того, чтобы отобразить перенос аватара, достаточно поставить ему `position: absolute` и менять координаты `left/top`.
-
-Для использования абсолютных координат относительно документа, аватар должен быть прямым потомком `BODY`.
-
-Следующий код готовит аватар к переносу:
-
-```js
-// в начале переноса:
-if (avatar.parentNode != document.body) {
-  document.body.appendChild(avatar); // переместить в BODY, если надо
-}
-avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими
-avatar.style.position = 'absolute';
-```
-
-... А затем его можно двигать:
-
-```js
-// при каждом движении мыши
-
-avatar.style.left = новая координата + 'px';
-avatar.style.top = новая координата + 'px';
-```
-
-Как вычислять новые координаты `left/top` при переносе?
-
-Чтобы элемент сохранял свою позицию под курсором, необходимо при нажатии запомнить его изначальный сдвиг относительно курсора, и сохранять его при переносе.
-
-<img src="shiftx.png">
-
-Этот сдвиг по горизонтали обозначен `shiftX` на рисунке выше. Аналогично, есть `shiftY`. Они вычисляются как расстояние между курсором и левой/верхней границей элемента при `mousedown`. Детали вычислений описаны в главе [](/drag-and-drop).
-
-Таким образом, при `mousemove` мы будем назначать элементу координаты курсора с учетом сдвига `shiftX/shiftY`:
-
-```js
-avatar.style.left = e.pageX - shiftX + 'px';
-avatar.style.top = e.pageY - shiftY + 'px';
-```
-
-## Полный код mousemove
-
-Код `mousemove`, решающий задачу начала переноса и позиционирования аватара:
-
-```js
-document.onmousemove = function(e) {
-  if (!dragObject.elem) return; // элемент не зажат
-
-  if ( !dragObject.avatar ) { // если перенос не начат...
-
-    // посчитать дистанцию, на которую переместился курсор мыши
-    var moveX = e.pageX - dragObject.downX;
-    var moveY = e.pageY - dragObject.downY;
-    if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) {
-      return; // ничего не делать, мышь не передвинулась достаточно далеко
-    }
-
-    *!*dragObject.avatar = createAvatar(e)*/!*; // захватить элемент
-    if (!dragObject.avatar) { 
-      dragObject = {}; // аватар создать не удалось, отмена переноса
-      return; // возможно, нельзя захватить за эту часть элемента
-    }
-
-    // аватар создан успешно
-    // создать вспомогательные свойства shiftX/shiftY
-    var coords = getCoords(dragObject.avatar);
-    dragObject.shiftX = dragObject.downX - coords.left;
-    dragObject.shiftY = dragObject.downY - coords.top;
-
-    *!*startDrag(e)*/!*; // отобразить начало переноса
-  }
-
-  // отобразить перенос объекта при каждом движении мыши
-  dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
-  dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
-
-  return false; 
-}
-```
-
-Здесь используются две функции для начала переноса: `createAvatar(e)` и `startDrag(e)`.
-
-Функция `createAvatar(e)` создает аватар. В нашем случае в качестве аватара берется сам `draggable` элемент. После создания аватара в него записывается функция `avatar.rollback`, которая задает поведение при отмене переноса. 
-
-Как правило, отмена переноса влечет за собой разрушение аватара, если это был клон, или возвращение его на прежнее место, если это сам элемент.
-
-В нашем случае для отмены переноса нужно запомнить старую позицию элемента и его родителя.
-
-```js
-function createAvatar(e) {
-
-  // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
-  var avatar = dragObject.elem;
-  var old = {
-    parent: avatar.parentNode,
-    nextSibling: avatar.nextSibling,
-    position: avatar.position || '',
-    left: avatar.left || '',
-    top: avatar.top || '',
-    zIndex: avatar.zIndex || ''
-  };
-
-  // функция для отмены переноса
-  avatar.rollback = function() {
-    old.parent.insertBefore(avatar, old.nextSibling);
-    avatar.style.position = old.position;
-    avatar.style.left = old.left;
-    avatar.style.top = old.top;
-    avatar.style.zIndex = old.zIndex
-  };
-
-  return avatar;
-}
-```
-
-Функция `startDrag(e)`, которую вызывает `mousemove`, если видит, что элемент в "зажатом" состоянии перенесли достаточно далеко, инициирует начало переноса и позиционирует аватар на странице:
-
-```js
-function startDrag(e) {
-  var avatar = dragObject.avatar;
-
-  document.body.appendChild(avatar);
-  avatar.style.zIndex = 9999;
-  avatar.style.position = 'absolute';
-}
-```
-
-## Окончание переноса
-
-Окончание переноса происходит по событию `mouseup`. 
-
-Его обработчик можно поставить на аватаре, т.к. аватар всегда под курсором и `mouseup` происходит на нем. Но для универсальности и большей гибкости (вдруг мы захотим перемещать аватар *рядом* с курсором?) поставим его, как и остальные, на `document`.
-
-Задача обработчика `mouseup`:
-<ol>
-<li>Обработать успешный перенос, если он идет (существует аватар)</li>
-<li>Очистить данные `dragObject`.</li>
-</ol>
-
-Это дает нам следующий код:
-
-```js
-document.onmouseup = function(e) {
-  // (1) обработать перенос, если он идет
-  if (dragObject.avatar) { 
-    *!*finishDrag(e)*/!*;
-  }
-
-  // в конце mouseup перенос либо завершился, либо даже не начинался
-  // (2) в любом случае очистим "состояние переноса" dragObject
-  dragObject = {};
-}
-```
-
-Для завершения переноса в функции `finishDrag(e)` нам нужно понять, на каком элементе мы находимся, и если над `droppable` -- обработать перенос, а нет -- откатиться:
-
-```js
-function finishDrag(e) {
-  var dropElem = *!*findDroppable(e)*/!*;
-
-  if (dropElem) {
-    ... успешный перенос ...
-  } else {
-    ... отмена переноса ...
-  }
-}
-```
-
-### Определяем элемент под курсором
-
-Чтобы понять, над каким элементом мы остановились -- используем метод [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint), который мы обсуждали в разделе [координаты](#elementFromPoint). Этот метод получает координаты *относительно окна* и возвращает самый глубокий элемент, который там находится.
-
-Функция `findDroppable(event)`, описанная ниже, использует его и находит самый глубокий элемент с атрибутом `droppable` под курсором мыши:
-
-```js
-// возвратит ближайший droppable или null
-*!*
-// это предварительный вариант findDroppable, исправлен ниже!
-*/!*
-function findDroppable(event) {
-
-  // взять элемент на данных координатах
-  var elem = document.elementFromPoint(event.clientX, event.clientY);
-
-  // найти ближайший сверху droppable
-  return elem.closest('.droppable');
-}
-```
-
-Обратите внимание -- для `elementFromPoint` нужны координаты относительно окна `clientX/clientY`, а не `pageX/pageY`.
-
-Вариант выше -- предварительный. Он не будет работать. Если попробовать применить эту функцию, будет все время возвращать один и тот же элемент! А именно -- *текущий переносимый*. Почему так?
-
-...Дело в том, что в процессе переноса под мышкой находится именно аватар. При начале переноса ему даже `z-index` ставится большой, чтобы он был поверх всех остальных. 
-
-**Аватар перекрывает остальные элементы. Поэтому функция `document.elementFromPoint()` увидит на текущих координатах именно его.**
-
-Чтобы это изменить, нужно либо поправить код переноса, чтобы аватар двигался *рядом* с курсором мыши, либо дать аватару стиль `pointer-events:none` (кроме IE10-), либо:
-
-<ol><li>Спрятать аватар.</li>
-<li>Вызывать `elementFromPoint`.</li>
-<li>Показать аватар.</li></ol>
-
-Напишем функцию `findDroppable(event)`, которая это делает:
-
-```js
-function findDroppable(event) {
-  // спрячем переносимый элемент
-  dragObject.avatar.hidden = true;
-
-  // получить самый вложенный элемент под курсором мыши
-  var elem = document.elementFromPoint(event.clientX, event.clientY);
-
-  // показать переносимый элемент обратно
-  dragObject.avatar.hidden = false;
-
-  if (elem == null) {
-    // такое возможно, если курсор мыши "вылетел" за границу окна
-    return null;
-  }
-
-  return elem.closest('.droppable');
-}
-```
-
-## DragManager
-
-Из фрагментов кода, разобранных выше, можно собрать мини-фреймворк.
-
-Объект `DragManager` будет запоминать текущий переносимый объект и отслеживать его перенос.
-
-Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики:
-
-```js
-//+ no-beautify
-var DragManager = new function() {
-  
-  var dragObject = {};
-
-  var self = this; // для доступа к себе из обработчиков
-
-  function onMouseDown(e) { ... }
-  function onMouseMove(e) { ... }
-  function onMouseUp(e) { ... }
-
-  document.onmousedown = onMouseDown;
-  document.onmousemove = onMouseMove;
-  document.onmouseup = onMouseUp;
-
-  this.onDragEnd = function(dragObject, dropElem) { };
-  this.onDragCancel = function(dragObject) { };
-}
-```
-
-Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но это легко поменять на `addEventListener`.
-
-Код функции `onMouse*` мы подробно рассмотрели ранее, но вы сможете увидеть их в полном примере ниже.
-
-Внутренний объект `dragObject` будет содержать информацию об объекте переноса.
-
-У него будут следующие свойства, которые также разобраны выше:
-<dl>
-<dt>`elem`</dt>
-<dd>Текущий зажатый мышью объект, если есть (ставится в `mousedown`).</dd>
-<dt>`avatar`</dt>
-<dd>Элемент-аватар, который передвигается по странице.</dd>
-<dt>`downX/downY`</dt>
-<dd>Координаты, на которых был клик `mousedown`</dd>
-<dt>`shiftX/shiftY`</dt>
-<dd>Относительный сдвиг курсора от угла элемента, вспомогательное свойство вычисляется в начале переноса.</dd>
-</dl>
-
-Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`.
-
-Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при завершении или отмене переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий.
-
-С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто:
-
-```js
-//+ no-beautify
-DragManager.onDragEnd = function(dragObject, dropElem) {
-
-  // скрыть/удалить переносимый объект
-  dragObject.elem.hidden = true;
-
-  // успешный перенос, показать улыбку классом computer-smile
-  dropElem.className = 'computer computer-smile';
-
-  // убрать улыбку через 0.2 сек
-  setTimeout(function() { 
-    dropElem.classList.remove('computer-smile'; 
-  }, 200);
-};
-
-DragManager.onDragCancel = function(dragObject) {
-  // откат переноса
-  dragObject.avatar.rollback(); 
-};
-```
-
-Полный пример с кодом:
-
-[codetabs src="dragDemo" height=280]
-
-
-
-## Расширения
-
-Существует масса возможных применений Drag'n'Drop. Здесь мы не будем реализовывать их все, поскольку не стоит цель создать фреймворк-монстр.
-
-Однако, мы рассмотрим их, чтобы, при необходимости, легко было написать то, что нужно.
-
-### Захватывать элемент можно только за "ручку"
-
-Часто бывает, что перенос должен быть инициирован только при захвате за определённую зону элемента. К примеру, модальное окно можно "взять", только захватив его за заголовок.
-
-Для этого достаточно добавить необходимую проверку, к примеру, в функцию `createAvatar` или перед её запуском.
-
-Если `mousedown` был внутри элемента, помеченного, к примеру, классом `draghandle`, то начинаем перенос, иначе -- нет.
-
-### Проверка прав на droppable
-
-Бывает и так, что не на любое место в `droppable` можно положить элемент. 
-
-Например: в админке есть дерево всех объектов сайта: статей, разделов, посетителей и т.п. 
-
-<ul>
-<li>В этом дереве есть узлы различных типов: "статьи", "разделы" и "пользователи".</li>
-<li>Все узлы являются переносимыми объектами.</li>
-<li>Узел "статья" (draggable) можно переносить в "раздел" (droppable), а узел "пользователи" -- нельзя. Но и то и другое можно поместить в "корзину".</li>
-</ul>
-
-Здесь решение: "можно или нет" переносить или нельзя зависит от "типа" переносимого объекта.
-
-Есть и более сложные варианты, когда решение зависит от конкретного места в `droppable`, над которым посетитель отпустил кнопку мыши. К примеру, переносить в верхнюю часть можно, а в нижнюю -- нет.
-
-Эта задача решается добавлением проверки в `findDroppable(e)`. Эта функция знает и об аватаре и о событии, включая координаты. При попытке положить в "неправильное" место функция `findDroppable(e)` должна возвращать `null`.
-
-Однако, на практике бывают ситуации, когда решение "прямо сейчас" принять невозможно. Например, нужно сделать запрос на сервер: "А разрешено ли текущему посетителю производить такую операцию?"
-
-Как при этом должен вести себя интерфейс? Можно, конечно сделать, чтобы элемент после отпускания кнопки мыши "завис" над `droppable`, ожидая ответа. Однако, такое решение неудобно в реализации и странновато выглядит для посетителя.
-
-Как правило, применяют "оптимистичный" алгоритм, по которому мы считаем, что перенос обычно успешен, но при необходимости можем отменить его.
-
-При нём посетитель кладет объект туда, куда он хочет, а затем, в коде `onDragEnd`:
-<ol>
-<li>Визуально обрабатывается завершение переноса, как будто все ок.</li>
-<li>Производится асинхронный запрос к серверу, содержащий информацию о переносе.</li>
-<li>Сервер обрабатывает перенос и возвращает ответ, все ли в порядке.</li>
-<li>Если нет -- выводится ошибка и возвращается `avatar.rollback()`. Аватар в этом случае должен предусматривать возможность отката после успешного завершения.</li>
-</ol>
-
-Процесс общения с сервером сопровождается индикацией загрузки и, при необходимости, блокировкой новых операций переноса до получения подтверждения.
-
-
-### Подсветка текущего droppable
-
-Удобно, когда пользователь во время переноса наглядно видит, куда он сейчас положит draggable. Например, текущий droppable (или его часть) подсвечиваются.
-
-Для этого в `DragManager` можно добавить дополнительные методы интеграции с внешним кодом:
-<ul>
-<li>`onDragEnter` -- будет вызываться при заходе на `droppable`, из `onMouseMove`.</li>
-<li>`onDragMove` -- при каждом передвижении внутри `droppable`, из `onMouseMove`.</li>
-<li>`onDragLeave` -- при выходе с `droppable`, из `onMouseMove` и `onMouseUp`.</li>
-</ul>
-
-Возможен более сложный вариант, когда нужно поддерживать не только перенос *в элемент*, но и перенос *между элементами*, например вставку одной статьи между двумя другими. 
-
-Для этого код, который обрабатывает перенос, может "делить на части" droppable, к примеру, в отношении 25% - 50% - 25%, и смотреть:
-
-<ul>
-<li>Если перенос в верхнюю четверть, то это -- "над".</li>
-<li>Если перенос в середину, то это "внутрь".</li>
-<li>Если перенос в нижнюю четверть, то это -- "под".</li>
-</ul>
-
-Текущий `droppable` и позиция относительно него при этом могут помечаться подсветкой и жирной чертой над/под, если требуется.
-
-Пример индикации из Firefox:
-<img src="between.png"> 
-
-### Анимация отмены переноса
-
-Отмену переноса и возврат аватара на место можно красиво анимировать.
-
-Один из частых вариантов -- скольжение объекта обратно к исходному месту, откуда его взяли. Для этого достаточно поправить `avatar.rollback()`.
-
-## Итого
-
-Уточнённый алгоритм Drag'n'Drop:
-<ol>
-<li>При `mousedown` запомнить координаты нажатия.</li>
-<li>При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`. При этом:</li>
-<ol>
-<li>Создать аватар, если можно начать перенос элемента `draggable` с данной позиции курсора.</li>  
-<li>Переместить аватар по экрану, установив его новую позицию из `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.</li>
-<li>Сообщить во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.</li>
-</ol>
-</li>
-<li>При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`.</li>
-</ol>
-
-Получившаяся реализация Drag'n'Drop проста, эффективна, изящна. 
-
-Её очень легко поменять или адаптировать под "особые" потребности.
-
-ООП-вариант фреймворка находится в статье [](/drag-and-drop-plus).
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/DragManager.js b/2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/DragManager.js
deleted file mode 100644
index 4f0625b8..00000000
--- a/2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/DragManager.js
+++ /dev/null
@@ -1,157 +0,0 @@
-var DragManager = new function() {
-
-  /**
-   * составной объект для хранения информации о переносе:
-   * {
-   *   elem - элемент, на котором была зажата мышь
-   *   avatar - аватар
-   *   downX/downY - координаты, на которых был mousedown
-   *   shiftX/shiftY - относительный сдвиг курсора от угла элемента
-   * }
-   */
-  var dragObject = {};
-
-  var self = this;
-
-  function onMouseDown(e) {
-
-    if (e.which != 1) return;
-
-    var elem = e.target.closest('.draggable');
-    if (!elem) return;
-
-    dragObject.elem = elem;
-
-    // запомним, что элемент нажат на текущих координатах pageX/pageY
-    dragObject.downX = e.pageX;
-    dragObject.downY = e.pageY;
-
-    return false;
-  }
-
-  function onMouseMove(e) {
-    if (!dragObject.elem) return; // элемент не зажат
-
-    if (!dragObject.avatar) { // если перенос не начат...
-      var moveX = e.pageX - dragObject.downX;
-      var moveY = e.pageY - dragObject.downY;
-
-      // если мышь передвинулась в нажатом состоянии недостаточно далеко
-      if (Math.abs(moveX) < 3 && Math.abs(moveY) < 3) {
-        return;
-      }
-
-      // начинаем перенос
-      dragObject.avatar = createAvatar(e); // создать аватар
-      if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента
-        dragObject = {};
-        return;
-      }
-
-      // аватар создан успешно
-      // создать вспомогательные свойства shiftX/shiftY
-      var coords = getCoords(dragObject.avatar);
-      dragObject.shiftX = dragObject.downX - coords.left;
-      dragObject.shiftY = dragObject.downY - coords.top;
-
-      startDrag(e); // отобразить начало переноса
-    }
-
-    // отобразить перенос объекта при каждом движении мыши
-    dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
-    dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
-
-    return false;
-  }
-
-  function onMouseUp(e) {
-    if (dragObject.avatar) { // если перенос идет
-      finishDrag(e);
-    }
-
-    // перенос либо не начинался, либо завершился
-    // в любом случае очистим "состояние переноса" dragObject
-    dragObject = {};
-  }
-
-  function finishDrag(e) {
-    var dropElem = findDroppable(e);
-
-    if (!dropElem) {
-      self.onDragCancel(dragObject);
-    } else {
-      self.onDragEnd(dragObject, dropElem);
-    }
-  }
-
-  function createAvatar(e) {
-
-    // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
-    var avatar = dragObject.elem;
-    var old = {
-      parent: avatar.parentNode,
-      nextSibling: avatar.nextSibling,
-      position: avatar.position || '',
-      left: avatar.left || '',
-      top: avatar.top || '',
-      zIndex: avatar.zIndex || ''
-    };
-
-    // функция для отмены переноса
-    avatar.rollback = function() {
-      old.parent.insertBefore(avatar, old.nextSibling);
-      avatar.style.position = old.position;
-      avatar.style.left = old.left;
-      avatar.style.top = old.top;
-      avatar.style.zIndex = old.zIndex
-    };
-
-    return avatar;
-  }
-
-  function startDrag(e) {
-    var avatar = dragObject.avatar;
-
-    // инициировать начало переноса
-    document.body.appendChild(avatar);
-    avatar.style.zIndex = 9999;
-    avatar.style.position = 'absolute';
-  }
-
-  function findDroppable(event) {
-    // спрячем переносимый элемент
-    dragObject.avatar.hidden = true;
-
-    // получить самый вложенный элемент под курсором мыши
-    var elem = document.elementFromPoint(event.clientX, event.clientY);
-
-    // показать переносимый элемент обратно
-    dragObject.avatar.hidden = false;
-
-    if (elem == null) {
-      // такое возможно, если курсор мыши "вылетел" за границу окна
-      return null;
-    }
-
-    return elem.closest('.droppable');
-  }
-
-  document.onmousemove = onMouseMove;
-  document.onmouseup = onMouseUp;
-  document.onmousedown = onMouseDown;
-
-  this.onDragEnd = function(dragObject, dropElem) {};
-  this.onDragCancel = function(dragObject) {};
-
-};
-
-
-function getCoords(elem) { // кроме IE8-
-  var box = elem.getBoundingClientRect();
-
-  return {
-    top: box.top + pageYOffset,
-    left: box.left + pageXOffset
-  };
-
-}
\ No newline at end of file
diff --git a/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.md
new file mode 100644
index 00000000..32dc6091
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.md
@@ -0,0 +1,6 @@
+
+We should use two handlers: `document.onkeydown` and `document.onkeyup`.
+
+The set `pressed` should keep currently pressed keys.
+
+The first handler adds to it, while the second one removes from it. Every time on `keydown` we check if we have enough keys pressed, and run the function if it is so.
diff --git a/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.view/index.html
new file mode 100644
index 00000000..3ceb089c
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/solution.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <p>Press "Q" and "W" together (can be in any language).</p>
+
+  <script>
+    function runOnKeys(func, ...codes) {
+      let pressed = new Set();
+
+      document.addEventListener('keydown', function(event) {
+        pressed.add(event.code);
+
+        for (let code of codes) { // are all keys in the set?
+          if (!pressed.has(code)) {
+            return;
+          }
+        }
+
+        // yes, they are
+
+        // during the alert, if the visitor releases the keys,
+        // JavaScript does not get the "keyup" event
+        // and pressed set will keep assuming that the key is pressed
+        // so, to evade "sticky" keys, we reset the status
+        // if the user wants to run the hotkey again - let him press all keys again
+        pressed.clear();
+
+        func();
+      });
+
+      document.addEventListener('keyup', function(event) {
+        pressed.delete(event.code);
+      });
+
+    }
+
+    runOnKeys(
+      () => alert("Hello!"),
+      "KeyQ",
+      "KeyW"
+    );
+  </script>
+
+</body>
+
+</html>
diff --git a/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/task.md
new file mode 100644
index 00000000..51c2fa2b
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/2-check-sync-keydown/task.md
@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# Extended hotkeys
+
+Create a function `runOnKeys(func, code1, code2, ... code_n)` that runs `func` on simultaneous pressing of keys with codes `code1`, `code2`, ..., `code_n`.
+
+For instance, the code below shows `alert` when `"Q"` and `"W"` are pressed together (in any language, with or without CapsLock)
+
+```js no-beautify
+runOnKeys(
+  () => alert("Hello!"),
+  "KeyQ",
+  "KeyW"
+);
+```
+
+[demo src="solution"]
diff --git a/2-ui/3-event-details/5-keyboard-events/article.md b/2-ui/3-event-details/5-keyboard-events/article.md
new file mode 100644
index 00000000..889e5828
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/article.md
@@ -0,0 +1,172 @@
+# Keyboard: keydown and keyup
+
+Before we get to keyboard, please note that on modern devices there are other ways to "input something". For instance, people use speech recognition (especially on mobile devices) or copy/paste with the mouse.
+
+So if we want to track any input into an `<input>` field, then keyboard events are not enough. There's another event named `input` to handle changes of an `<input>` field, by any means. And it may be a better choice for such task. We'll cover it later in the chapter <info:events-change-input>.
+
+Keyboard events should be used when we want to handle keyboard actions (virtual keyboard also counts). For instance, to react on arrow keys `key:Up` and `key:Down` or hotkeys (including combinations of keys).
+
+[cut]
+
+
+## Teststand [#keyboard-test-stand]
+
+```offline
+To better understand keyboard events, you can use the [teststand](sandbox:keyboard-dump).
+```
+
+```online
+To better understand keyboard events, you can use the teststand below.
+
+Try different key combinations in the text field.
+
+[codetabs src="keyboard-dump" height=480]
+```
+
+
+## Keydown and keyup
+
+The `keydown` events happens when a key is pressed down, and then `keyup` -- when it's released.
+
+### event.code and event.key
+
+The `key` property of the event object allows to get the character, while the `code` property of the event object allows to get the "physical key code".
+
+For instance, the same key `key:Z` can be pressed with or without `Shift`. That gives us two different characters: lowercase `z` and uppercase `Z`.
+
+The `event.key` is exactly the character, and it will be different. But `event.code` is the same:
+
+| Key          | `event.key` | `event.code` |
+|--------------|-------------|--------------|
+| `key:Z`      |`z` (lowercase)         |`KeyZ`        |
+| `key:Shift+Z`|`Z` (uppercase)          |`KeyZ`        |
+
+
+If a user works with different languages, then switching to another language would make a totally different character instead of `"Z"`. That will become the value of `event.key`, while `event.code` is always the same: `"KeyZ"`.
+
+```smart header="\"KeyZ\" and other key codes"
+Every key has the code that depends on its location on the keyboard. Key codes described in the [UI Events code specification](https://www.w3.org/TR/uievents-code/).
+
+For instance:
+- Letter keys have codes `"Key<letter>"`: `"KeyA"`, `"KeyB"` etc.
+- Digit keys have codes: `"Digit<number>"`: `"Digit0"`, `"Digit1"` etc.
+- Special keys are coded by their names: `"Enter"`, `"Backspace"`, `"Tab"` etc.
+
+There are several widespread keyboard layouts, and the specification gives key codes for each of them.
+
+See [alphanumeric section of the spec](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section) for more codes, or just try the [teststand](#keyboard-test-stand) above.
+```
+
+```warn header="Case matters: `\"KeyZ\"`, not `\"keyZ\"`"
+Seems obvious, but people still make mistakes.
+
+Please evade mistypes: it's `KeyZ`, not `keyZ`. The check like `event.code=="keyZ"` won't work: the first letter of `"Key"` must be uppercase.
+```
+
+
+What if a key does not give any character? For instance, `key:Shift` or `key:F1` or others. For those keys `event.key` is approximately the same as `event.code`:
+
+
+| Key          | `event.key` | `event.code` |
+|--------------|-------------|--------------|
+| `key:F1`      |`F1`          |`F1`        |
+| `key:Backspace`      |`Backspace`          |`Backspace`        |
+| `key:Shift`|`Shift`          |`ShiftRight` or `ShiftLeft`        |
+
+Please note that `event.code` specifies exactly which key is pressed. For instance, most keyboards have two `key:Shift` keys: on the left and on the right side. The `event.code` tells us exactly which one was pressed, and `event.key` is responsible for the "meaning" of the key: what it is (a "Shift").
+
+Let's say, we want to handle a hotkey: `key:Ctrl+Z` (or `key:Cmd+Z` for Mac). Most text editors hook the "Undo" action on it. We can set a listener on `keydown` and check which key is pressed -- to detect when we have the hotkey.
+
+Please answer the question -- in such a listener, should we check the value of `event.key` or `event.code`?
+
+Please, pause and answer.
+
+Made up your mind?
+
+If you've got an understanding, then the answer is, of course, `event.code`, as we don't want `event.key` there. The value of `event.key` can change depending on the language or `CapsLock` enabled. The value of `event.code` is strictly bound to the key, so here we go:
+
+```js run
+document.addEventListener('keydown', function(event) {
+  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
+    alert('Undo!')
+  }
+});
+```
+
+## Auto-repeat
+
+If a key is being pressed for a long enough time, it starts to repeat: the `keydown` triggers again and again, and then when it's released we finally get `keyup`. So it's kind of normal to have many `keydown` and a single `keyup`.
+
+For all repeating keys the event object has `event.return` property set to `true`.
+
+
+## Default actions
+
+Default actions vary, as there are many possible things that may be initiated by the keyboard.
+
+For instance:
+
+- A character appears on the screen (the most obvious outcome).
+- A character is deleted (`key:Delete` key).
+- The page is scrolled (`key:PageDown` key).
+- The browser opens the "Save Page" dialog (`key:Ctrl+S`)
+-  ...and so on.
+
+Preventing the default action on `keydown` can cancel most of them, with the exception of OS-based special keys. For instance, on Windows `key:Alt+F4` closes the current browser window. And there's no way to stop it by preventing the default action in JavaScript.
+
+For instance, the `<input>` below expects a phone number, so it does not accept keys except digits, `+`, `()` or `-`:
+
+```html autorun height=60 run
+<script>
+function checkPhoneKey(key) {
+  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
+}
+</script>
+<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Phone, please" type="tel">
+```
+
+Please note that special keys like `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V` do not work in the input. That's a side-effect effect of the strict filter `checkPhoneKey`.
+
+Let's relax it a little bit:
+
+
+```html autorun height=60 run
+<script>
+function checkPhoneKey(key) {
+  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
+    key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
+}
+</script>
+<input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">
+```
+
+Now arrows and deletion works well.
+
+...But we still can enter anything by using a mouse and right-click + Paste. So the filter is not 100% reliable. We can just let it be like that, because most of time it works. Or an alternative approach would be to track the `input` event -- it triggers after any modification. There we can check the new value and highlight/modify it when it's invalid.
+
+## Legacy
+
+In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object.
+
+There were so many browser incompatibilities that developers of the specification decided to deprecate all of them. The old code still works, as the browser keep supporting them, but there's totally no need to use those any more.
+
+There was time when this chapter included their detailed description. But as of now we can forget about those.
+
+
+## Summary
+
+Pressing a key always generates a keyboard event, be it symbol keys or special keys like `key:Shift` or `key:Ctrl` and so on. The only exception is `key:Fn` key that sometimes presents on a laptop keyboard. There's no keyboard event for it, because it's often implemented on lower level than OS.
+
+Keyboard events:
+
+- `keydown` -- on pressing the key (auto-repeats if the key is pressed for long),
+- `keyup` -- on releasing the key.
+
+Main keyboard event properties:
+
+- `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard.
+- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys usually has the same value  as `code`.
+
+In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter <info:events-change-input>). They trigger after any input, including mouse or speech recognition.
+
+We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.
diff --git a/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/index.html
new file mode 100644
index 00000000..40106283
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <form id="form" onsubmit="return false">
+
+    Prevent default for:
+    <label>
+      <input type="checkbox" name="keydownStop" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
+    <label>
+      <input type="checkbox" name="keyupStop" value="1"> keyup</label>
+
+    <p>
+      Ignore:
+      <label>
+        <input type="checkbox" name="keydownIgnore" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
+      <label>
+        <input type="checkbox" name="keyupIgnore" value="1"> keyup</label>
+    </p>
+
+    <p>Focus on the input field and press a key.</p>
+
+    <input type="text" placeholder="Press keys here" id="kinput">
+
+    <textarea id="area"></textarea>
+    <input type="button" value="Clear" onclick="area.value = ''" />
+  </form>
+  <script src="script.js"></script>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/script.js b/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/script.js
new file mode 100644
index 00000000..5eba24c7
--- /dev/null
+++ b/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/script.js
@@ -0,0 +1,28 @@
+kinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle;
+
+let lastTime = Date.now();
+
+function handle(e) {
+  if (form.elements[e.type + 'Ignore'].checked) return;
+
+  let text = e.type +
+    ' key=' + e.key +
+    ' code=' + e.code +
+    (e.shiftKey ? ' shiftKey' : '') +
+    (e.ctrlKey ? ' ctrlKey' : '') +
+    (e.altKey ? ' altKey' : '') +
+    (e.metaKey ? ' metaKey' : '') +
+    (e.repeat ? ' (repeat)' : '') +
+    "\n";
+
+  if (area.value && Date.now() - lastTime > 250) {
+    area.value += new Array(81).join('-') + '\n';
+  }
+  lastTime = Date.now();
+
+  area.value += text;
+
+  if (form.elements[e.type + 'Stop'].checked) {
+    e.preventDefault();
+  }
+}
diff --git a/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/style.css b/2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/style.css
similarity index 100%
rename from 2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/style.css
rename to 2-ui/3-event-details/5-keyboard-events/keyboard-dump.view/style.css
diff --git a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.md b/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.md
deleted file mode 100644
index 8eab3c5e..00000000
--- a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Решение использует кросс-браузерный код назначения обработчика `onwheel` на элемент и `style.transform`.
-
diff --git a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html b/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html
deleted file mode 100644
index 2e6ba4fb..00000000
--- a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p id="text" style="margin: 40px; width: 200px; height:60px; border: 1px solid red">
-    При прокрутке колёсика мыши над этим элементом, он будет масштабироваться.
-  </p>
-  <script>
-    function addOnWheel(elem, handler) {
-      if (elem.addEventListener) {
-        if ('onwheel' in document) {
-          // IE9+, FF17+
-          elem.addEventListener("wheel", handler);
-        } else if ('onmousewheel' in document) {
-          // устаревший вариант события
-          elem.addEventListener("mousewheel", handler);
-        } else {
-          // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
-          elem.addEventListener("MozMousePixelScroll", handler);
-        }
-      } else { // IE8-
-        text.attachEvent("onmousewheel", handler);
-      }
-    }
-
-    var scale = 1;
-
-    addOnWheel(text, function(e) {
-
-      var delta = e.deltaY || e.detail || e.wheelDelta;
-
-      // отмасштабируем при помощи CSS
-      if (delta > 0) scale += 0.05;
-      else scale -= 0.05;
-
-      text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
-
-      // отменим прокрутку
-      e.preventDefault();
-    });
-  </script>
-
-</body>
-
-</html>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/task.md b/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/task.md
deleted file mode 100644
index 660f9e88..00000000
--- a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Масштабирование колёсиком мыши
-
-[importance 5]
-
-Сделайте так, чтобы при прокрутке колёсиком мыши над элементом, он масштабировался.
-
-Масштабирование обеспечивайте при помощи свойства CSS transform:
-
-```js
-// увеличение в 1.5 раза
-elem.style.transform = elem.style.WebkitTransform = elem.style.MsTransform = 'scale(1.5)';
-```
-
-Результат в iframe:
-[iframe link border="1" src="solution" height="160"]
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js b/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js
deleted file mode 100644
index e4bcc775..00000000
--- a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js
+++ /dev/null
@@ -1,14 +0,0 @@
-document.onwheel = function(e) {
-  if (e.target.tagName != 'TEXTAREA') return;
-  var area = e.target;
-
-  var delta = e.deltaY || e.detail || e.wheelDelta;
-
-  if (delta < 0 && area.scrollTop == 0) {
-    e.preventDefault();
-  }
-
-  if (delta > 0 && area.scrollHeight - area.clientHeight - area.scrollTop <= 1) {
-    e.preventDefault();
-  }
-};
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/index.html b/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/index.html
deleted file mode 100644
index 1c162bae..00000000
--- a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/solution.view/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="fix-textarea-scroll.js"></script>
-</head>
-
-<body style="height: 1000px; position: relative">
-
-  <header>
-    <h2>Начало документа</h2>
-  </header>
-
-  <textarea cols="80" rows="10">
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-  </textarea>
-
-
-  <footer style="position: absolute; bottom: 0">
-    Конец документа.
-  </footer>
-</body>
-
-</html>
diff --git a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/source.view/index.html b/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/source.view/index.html
deleted file mode 100644
index edf04c56..00000000
--- a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/source.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body style="height: 1000px; position: relative">
-
-  <header>
-    <h2>Начало документа</h2>
-  </header>
-
-  <textarea cols="80" rows="10">
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-    прокрути меня
-  </textarea>
-
-
-  <footer style="position: absolute; bottom: 0">
-    Конец документа.
-  </footer>
-</body>
-
-</html>
diff --git a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/task.md b/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/task.md
deleted file mode 100644
index 553f3b8a..00000000
--- a/2-ui/3-event-details/6-mousewheel/2-no-doc-scroll/task.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Прокрутка без влияния на страницу
-
-[importance 4]
-
-В большинстве браузеров если в процессе прокрутки `textarea` колёсиком мышки (или жестами) мы достигаем границы элемента, то прокрутка продолжается уже на уровне страницы (в Firefox при этом будет небольшая задержка перед продолжением прокрутки).
-
-Иными словами, если в примере ниже вы попробуете прокрутить `textarea` вниз, то когда прокрутка дойдёт до конца -- начнёт прокручиваться документ:
-
-[iframe src="source" border="1" height=300]
-
-То же самое происходит при прокрутке вверх.
-
-В интерфейсах редактирования, когда большая `textarea` является основным элементом страницы, такое поведение может быть неудобно. 
-
-Для редакторования более оптимально, чтобы при прокрутке до конца `textarea` страница не "улетала" вверх и вниз.
-
-Вот тот же документ, но с желаемым поведением `textarea`:
-
-[iframe src="solution" border="1" height=300]
-
-Задача: 
-<ul>
-<li>Создать скрипт, который при подключении к документу исправлял бы поведение всех `textarea`, чтобы при прокрутке они не трогали документ.</li>
-<li>Направление прокрутки -- только вверх или вниз.</li>
-<li>Редактор прокручивает только мышкой или жестами (на мобильных устройствах), прокрутку клавиатурой здесь рассматривать не нужно (хотя это и возможно).</li>
-</ul>
-
diff --git a/2-ui/3-event-details/6-mousewheel/article.md b/2-ui/3-event-details/6-mousewheel/article.md
deleted file mode 100644
index dbd5cff2..00000000
--- a/2-ui/3-event-details/6-mousewheel/article.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Мышь: колёсико, событие wheel
-
-Колёсико мыши используется редко. Оно есть даже не у всех мышей. Поэтому существуют пользователи, которые в принципе не могут сгенерировать такое событие.
-
-...Но, тем не менее, его использование может быть оправдано. Например, можно добавить дополнительные удобства для тех, у кого колёсико есть.
-[cut]
-## Отличия колёсика от прокрутки 
-
-Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.
-
-<ul>
-<li>При прокрутке срабатывает событие [onscroll](/onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow:hidden` в принципе не может сгенерировать `onscroll`.</li>
-<li>А событие `wheel` является чисто "мышиным". Оно генерируется *над любым элементом* при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, `overflow:hidden` никак не препятствует обработке колеса мыши.</li>
-</ul>
-
-Кроме того, событие `onscroll` происходит *после* прокрутки, а `onwheel` -- *до* прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).
-
-## Зоопарк wheel в разных браузерах
-
-Событие `wheel` появилось в [стандарте](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel) не так давно. Оно поддерживается Chrome 31+, IE9+, Firefox 17+.
-
-До него браузеры обрабатывали прокрутку при помощи событий [mousewheel](http://msdn.microsoft.com/en-us/library/ie/ms536951.aspx) (все кроме Firefox) и [DOMMouseScroll](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll), [MozMousePixelScroll](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/MozMousePixelScroll) (только Firefox).
-
-Самые важные свойства современного события и его нестандартных аналогов:
-<dl>
-<dt>`wheel`</dt>
-<dd>Свойство `deltaY` -- количество прокрученных пикселей по горизонтали и вертикали. Существуют также свойства `deltaX` и `deltaZ` для других направлений прокрутки.</dd>
-<dt>`MozMousePixelScroll`</dt>
-<dd>Срабатывает, начиная с Firefox 3.5, только в Firefox. Даёт возможность отменить прокрутку и получить размер в пикселях через свойство `detail`, ось прокрутки в свойстве `axis`.</dd>
-<dt>`mousewheel`</dd>
-<dd>Срабатывает в браузерах, которые ещё не реализовали `wheel`. В свойстве `wheelDelta` -- условный "размер прокрутки", обычно равен `120` для прокрутки вверх и `-120` -- вниз. Он не соответствует какому-либо конкретному количеству пикселей.</dd>
-</dl>
-
-Чтобы кросс-браузерно отловить прокрутку и, при необходимости, отменить её, можно использовать все эти события.
-
-Пример, включающий поддержку IE8-:
-
-```js
-if (elem.addEventListener) {
-  if ('onwheel' in document) {
-    // IE9+, FF17+, Ch31+
-    elem.addEventListener("wheel", onWheel);
-  } else if ('onmousewheel' in document) {
-    // устаревший вариант события
-    elem.addEventListener("mousewheel", onWheel);
-  } else {
-    // Firefox < 17
-    elem.addEventListener("MozMousePixelScroll", onWheel);
-  }
-} else { // IE8-
-  elem.attachEvent("onmousewheel", onWheel);
-}
-
-function onWheel(e) {
-  e = e || window.event;
-
-  // wheelDelta не дает возможность узнать количество пикселей
-  var delta = e.deltaY || e.detail || e.wheelDelta;
-
-  var info = document.getElementById('delta');
-
-  info.innerHTML = +info.innerHTML + delta;
-
-  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
-}
-```
-
-В действии: 
-[iframe src="wheel" link edit]
-
-[warn header="Ошибка в IE8"]
-
-В браузере IE8 (только версия 8) есть ошибка. При наличии обработчика `mousewheel` --  элемент не скроллится. Иначе говоря, действие браузера отменяется по умолчанию.
-
-Это, конечно, не имеет значения, если элемент в принципе не прокручиваемый.
-[/warn]
-
diff --git a/2-ui/3-event-details/6-mousewheel/wheel.view/index.html b/2-ui/3-event-details/6-mousewheel/wheel.view/index.html
deleted file mode 100644
index 954c081c..00000000
--- a/2-ui/3-event-details/6-mousewheel/wheel.view/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #container {
-      width: 200px;
-      height: 200px;
-      border: 1px solid black;
-      background: #0FF;
-      overflow: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-  Прокрутка: <span id="delta">0</span>
-  <div id="container">
-    Прокрути надо мной.
-  </div>
-
-  <script>
-    var elem = document.getElementById('container');
-
-    if (elem.addEventListener) {
-      if ('onwheel' in document) {
-        // IE9+, FF17+
-        elem.addEventListener("wheel", onWheel);
-      } else if ('onmousewheel' in document) {
-        // устаревший вариант события
-        elem.addEventListener("mousewheel", onWheel);
-      } else {
-        // Firefox < 17
-        elem.addEventListener("MozMousePixelScroll", onWheel);
-      }
-    } else { // IE8-
-      elem.attachEvent("onmousewheel", onWheel);
-    }
-
-
-    // Это решение предусматривает поддержку IE8-
-    function onWheel(e) {
-      e = e || window.event;
-
-      // deltaY, detail содержат пиксели
-      // wheelDelta не дает возможность узнать количество пикселей
-      // onwheel || MozMousePixelScroll || onmousewheel
-      var delta = e.deltaY || e.detail || e.wheelDelta;
-
-      var info = document.getElementById('delta');
-
-      info.innerHTML = +info.innerHTML + delta;
-
-      e.preventDefault ? e.preventDefault() : (e.returnValue = false);
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/7-fixevent/article.md b/2-ui/3-event-details/7-fixevent/article.md
deleted file mode 100644
index d263a46e..00000000
--- a/2-ui/3-event-details/7-fixevent/article.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Мышь: IE8-, исправление события 
-
-Ранее мы говорили о различных несовместимостях при работе с событиями для IE8-. Самая главная -- это, конечно, назначение событий при помощи `attachEvent/detachEvent` вместо `addEventListener/removeEventListener` и отсутствие фазы перехвата. Но и в самом объекте события есть различия.
-
-Что касается событий мыши, различия в свойствах можно легко исправить при помощи функции `fixEvent`, которая описана в этой главе.
-[cut]
-
-[warn header="Только IE8-"]
-Эта глава и описанная далее функция `fixEvent` нужны только для поддержки IE8-.
-
-Если IE8- для Вас неактуален, то пролистывайте дальше, это читать Вам не надо.
-[/warn]
-
-
-Функция `fixEvent` предназначена для запуска в начале обработчика, вот так:
-
-```js
-elem.onclick = function(event) {
-*!*
-  // если IE8-, то получить объект события window.event и исправить его
-  event = event || fixEvent.call(this, window.event);
-*/!*
-  ...
-}
-```
-
-Она добавлит объекту события в IE8- следующие стандартные свойства:
-<ul>
-<li>`target`</li>
-<li>`currentTarget` -- если обработчик назначен не через `attachEvent`.</li>
-<li>`relatedTarget` -- для `mouseover/mouseout` и `mouseenter/mouseleave`.</li>
-<li>`pageX/pageY`</li>
-<li>`which`</li>
-</ul>
-
-Код функции:
-
-```js
-function fixEvent(e) {
-
-  e.currentTarget = this;
-  e.target = e.srcElement;
-
-  if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement;
-  if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement;
-
-  if (e.pageX == null && e.clientX != null) {
-    var html = document.documentElement;
-    var body = document.body;
-
-    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
-    e.pageX -= html.clientLeft || 0;
-
-    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
-    e.pageY -= html.clientTop || 0;
-  }
-
-  if (!e.which && e.button) {
-    e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0));
-  }
-
-  return e;
-}
-```
-
-Эта функция может быть полезна, если не используются JavaScript-фреймворки, в которых есть свои средства сглаживания кросс-браузерных различий.
diff --git a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/solution.view/index.html b/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/solution.view/index.html
deleted file mode 100644
index 5511ae16..00000000
--- a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/solution.view/index.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
-    
-    .column-left {
-      float: left;
-      width: 30%;
-      background: #aef;
-    }
-    
-    .column-right {
-      margin-left: 30%;
-      width: 70%;
-      background: tan;
-      overflow: auto;
-      /* расшириться вниз захватить float'ы */
-    }
-    
-    .header {
-      line-height: 60px;
-      background: yellow;
-    }
-    
-    .inner {
-      margin: 1em;
-      font-size: 130%;
-    }
-    
-    #avatar {
-      float: left;
-      margin: 0 1em .5em 0;
-      border: 1px solid black;
-      text-align: center;
-      background: white;
-    }
-    
-    .fixed {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div class="header">Шапка</div>
-
-  <div class="column-left">
-    <div class="inner">
-      <h3>Персонажи:</h3>
-      <ul>
-        <li>Винни-Пух</li>
-        <li>Ослик Иа</li>
-        <li>Сова</li>
-        <li>Кролик</li>
-      </ul>
-    </div>
-  </div>
-  <div class="column-right">
-    <div class="inner">
-
-      <h3>Винни-Пух</h3>
-
-      <div id="avatar">
-        <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-        <div>Кадр из мультфильма</div>
-      </div>
-
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-      <p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
-        содержавшейся в 1920-х в Лондонском зоопарке.</p>
-
-      <p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
-        Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
-        привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
-        военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
-        надпись.
-      </p>
-
-      <p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
-        не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
-        в 1954; между этими датами — ряд трагических событий германской истории.</p>
-
-
-      <p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
-        лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
-        Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
-        из Британской национальной портретной галереи</p>
-
-      <p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
-        рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
-        эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
-
-      <p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
-        Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
-        сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
-        опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
-        возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
-    </div>
-  </div>
-
-  <script>
-    var avatarElem = document.getElementById('avatar');
-
-    var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
-
-    window.onscroll = function() {
-      if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
-        avatarElem.classList.remove('fixed');
-      } else if (window.pageYOffset > avatarSourceBottom) {
-        avatarElem.classList.add('fixed');
-      }
-    };
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/source.view/index.html b/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/source.view/index.html
deleted file mode 100644
index cb704598..00000000
--- a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/source.view/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
-    
-    .column-left {
-      float: left;
-      width: 30%;
-      background: #aef;
-    }
-    
-    .column-right {
-      margin-left: 30%;
-      width: 70%;
-      background: tan;
-      overflow: auto;
-      /* расшириться вниз захватить float'ы */
-    }
-    
-    .header {
-      line-height: 60px;
-      background: yellow;
-    }
-    
-    .inner {
-      margin: 1em;
-      font-size: 130%;
-    }
-    
-    #avatar {
-      float: left;
-      margin: 0 1em .5em 0;
-      border: 1px solid black;
-      text-align: center;
-      background: white;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div class="header">Шапка</div>
-
-  <div class="column-left">
-    <div class="inner">
-      <h3>Персонажи:</h3>
-      <ul>
-        <li>Винни-Пух</li>
-        <li>Ослик Иа</li>
-        <li>Сова</li>
-        <li>Кролик</li>
-      </ul>
-    </div>
-  </div>
-  <div class="column-right">
-    <div class="inner">
-
-      <h3>Винни-Пух</h3>
-
-      <div id="avatar">
-        <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-        <div>Кадр из мультфильма</div>
-      </div>
-
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-      <p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
-        содержавшейся в 1920-х в Лондонском зоопарке.</p>
-
-      <p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
-        Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
-        привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
-        военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
-        надпись.
-      </p>
-
-      <p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
-        не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
-        в 1954; между этими датами — ряд трагических событий германской истории.</p>
-
-
-      <p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
-        лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
-        Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
-        из Британской национальной портретной галереи</p>
-
-      <p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
-        рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
-        эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
-
-      <p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
-        Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
-        сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
-        опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
-        возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
-    </div>
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/task.md b/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/task.md
deleted file mode 100644
index b27b44ff..00000000
--- a/2-ui/3-event-details/8-onscroll/1-avatar-above-scroll/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Аватар наверху при прокрутке
-
-[importance 5]
-
-Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу.
-
-При прокрутке вверх -- должен возвращаться на обычное место.
-
-Прокрутите вниз, чтобы увидеть:
-[iframe src="solution" height=300 link border="1"]
-
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
new file mode 100644
index 00000000..a3f21b57
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
@@ -0,0 +1,66 @@
+The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.
+
+We can call it immediately and add as a `window.onscroll` handler.
+
+The most important question is: "How do we detect that the page is scrolled to bottom?"
+
+Let's use window-relative coordinates.
+
+The document is represented (and contained) within `<html>` tag, that is `document.documentElement`.
+
+We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`. And the `bottom` property will be window-relative coordinate of the document end.
+
+For instance, if the height of the whole HTML document is 2000px, then:
+
+```js
+// When we're on the top of the page
+// window-relative top = 0
+document.documentElement.getBoundingClientRect().top = 0
+
+// window-relative bottom = 2000
+// the document is long, so that is probably far beyound the window bottom
+document.documentElement.getBoundingClientRect().bottom = 2000
+```
+
+If we scroll `500px` below, then:
+
+```js
+// document top is above the window 500px
+document.documentElement.getBoundingClientRect().top = -500
+// document bottom is 500px closer
+document.documentElement.getBoundingClientRect().bottom = 1500
+```
+
+When we scroll till the end, assuming that the window height is `600px`:
+
+
+```js
+// document top is above the window 500px
+document.documentElement.getBoundingClientRect().top = -1400
+// document bottom is 500px closer
+document.documentElement.getBoundingClientRect().bottom = 600
+```
+
+Please note that the bottom can't be 0, because it never reaches the window top. The lowest limit of the bottom coordinate is the window height, we can't scroll it any more up.
+
+And the window height is `document.documentElement.clientHeight`.
+
+We want the document bottom be no more than `100px` away from it.
+
+So here's the function:
+
+```js
+function populate() {
+  while(true) {
+    // document bottom
+    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
+
+    // if it's greater than window height + 100px, then we're not at the page back
+    // (see examples above, big bottom means we need to scroll more)
+    if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
+
+    // otherwise let's add more data
+    document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
+  }
+}
+```
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html
new file mode 100644
index 00000000..8dc1b294
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+<h1>Scroll me</h1>
+
+<script>
+  function populate() {
+    while(true) {
+      let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
+      if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
+      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
+    }
+  }
+
+  window.addEventListener('scroll', populate);
+
+  populate(); // init document
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/source.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/source.view/index.html
new file mode 100644
index 00000000..f58c3467
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/1-endless-page/source.view/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+<h1>Scroll me</h1>
+
+<script>
+  // ... your code ...
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md
new file mode 100644
index 00000000..4b49070b
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md
@@ -0,0 +1,20 @@
+importance: 5
+
+---
+
+# Endless page
+
+Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
+
+Like this:
+
+[iframe src="solution" height=200]
+
+Please note two important features of the scroll:
+
+1. **The scroll is "elastic".** We can scroll a little beyound the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
+2. **The scroll is imprecise.** When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.
+
+So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end.
+
+P.S. In real life we may want to show "more messages" or "more goods".
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
index 8fa8c587..e69de29b 100644
--- a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
+++ b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
@@ -1,94 +0,0 @@
-Добавим в документ `DIV` с кнопкой:
-
-```html
-<div id="updown"></div>
-```
-
-Сама кнопка должна иметь `position:fixed`.
-
-```css
-#updown {
-  position: fixed;
-  top: 30px;
-  left: 10px;
-  cursor: pointer;
-}
-```
-
-Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
-
-```css
-#updown {
-  height: 9px;
-  width: 14px;
-  position: fixed;
-  top: 30px;
-  left: 10px;
-  cursor: pointer;
-}
-
-#updown.up {
-  background: url(...updown.gif) left top;
-}
-
-#updown.down {
-  background: url(...updown.gif) left -9px;
-}
-```
-
-Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
-
-Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
-
-При прокрутке состояния меняются следующим образом:
-
-```js
-window.onscroll = function() {
-  var pageY = window.pageYOffset || document.documentElement.scrollTop;
-  var innerHeight = document.documentElement.clientHeight;
-
-  switch (updownElem.className) {
-    case '':
-      if (pageY > innerHeight) {
-        updownElem.className = 'up';
-      }
-      break;
-
-    case 'up':
-      if (pageY < innerHeight) {
-        updownElem.className = '';
-      }
-      break;
-
-    case 'down':
-      if (pageY > innerHeight) {
-        updownElem.className = 'up';
-      }
-      break;
-  }
-}
-```
-
-При клике:
-
-```js
-var pageYLabel = 0;
-
-updownElem.onclick = function() {
-  var pageY = window.pageYOffset || document.documentElement.scrollTop;
-
-  switch (this.className) {
-    case 'up':
-      pageYLabel = pageY;
-      window.scrollTo(0, 0);
-      this.className = 'down';
-      break;
-
-    case 'down':
-      window.scrollTo(0, pageYLabel);
-      this.className = 'up';
-  }
-
-}
-```
-
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html
index 4e84ac23..93f88835 100644
--- a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html
+++ b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE HTML>
 <html>
-
 <head>
   <style>
     body,
@@ -10,15 +9,15 @@
       padding: 0;
       margin: 0;
     }
-    
+
     #matrix {
       width: 400px;
       margin: auto;
       overflow: auto;
       text-align: justify;
     }
-    
-    #updown {
+
+    #arrowTop {
       height: 9px;
       width: 14px;
       color: green;
@@ -27,14 +26,11 @@
       left: 10px;
       cursor: pointer;
     }
-    
-    #updown.up::before {
+
+    #arrowTop::before {
       content: '▲';
     }
-    
-    #updown.down::before {
-      content: '▼';
-    }
+
   </style>
   <meta charset="utf-8">
 </head>
@@ -43,60 +39,23 @@
 
   <div id="matrix">
     <script>
-      for (var i = 0; i < 2000; i++) document.writeln(i)
+      for (let i = 0; i < 2000; i++) document.writeln(i)
     </script>
   </div>
 
-  <div id="updown"></div>
+  <div id="arrowTop" hidden></div>
 
   <script>
-    var updownElem = document.getElementById('updown');
-
-    var pageYLabel = 0;
-
-    updownElem.onclick = function() {
-      var pageY = window.pageYOffset || document.documentElement.scrollTop;
-
-      switch (this.className) {
-        case 'up':
-          pageYLabel = pageY;
-          window.scrollTo(0, 0);
-          this.className = 'down';
-          break;
 
-        case 'down':
-          window.scrollTo(0, pageYLabel);
-          this.className = 'up';
-      }
+    arrowTop.onclick = function() {
+      window.scrollTo(pageXOffset, 0);
+      // after scrollTo, there will be a "scroll" event, so the arrow will hide automatically
+    };
 
-    }
-
-    window.onscroll = function() {
-      var pageY = window.pageYOffset || document.documentElement.scrollTop;
-      var innerHeight = document.documentElement.clientHeight;
-
-      switch (updownElem.className) {
-        case '':
-          if (pageY > innerHeight) {
-            updownElem.className = 'up';
-          }
-          break;
-
-        case 'up':
-          if (pageY < innerHeight) {
-            updownElem.className = '';
-          }
-          break;
-
-        case 'down':
-          if (pageY > innerHeight) {
-            updownElem.className = 'up';
-          }
-          break;
-
-      }
-    }
+    window.addEventListener('scroll', function() {
+      arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
+    });
   </script>
-</body>
 
-</html>
\ No newline at end of file
+</body>
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html
index ce1a6a56..f90055cd 100644
--- a/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html
+++ b/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html
@@ -1,8 +1,6 @@
 <!DOCTYPE HTML>
 <html>
-
 <head>
-  <meta charset="utf-8">
   <style>
     body,
     html {
@@ -11,31 +9,45 @@
       padding: 0;
       margin: 0;
     }
-    
+
     #matrix {
       width: 400px;
       margin: auto;
       overflow: auto;
       text-align: justify;
     }
+
+    #arrowTop {
+      height: 9px;
+      width: 14px;
+      color: green;
+      position: fixed;
+      top: 10px;
+      left: 10px;
+      cursor: pointer;
+    }
+
+    #arrowTop::before {
+      content: '▲';
+    }
+
   </style>
   <meta charset="utf-8">
 </head>
 
 <body>
 
-  Символы для стрелок: ▲ ▼
-
   <div id="matrix">
     <script>
-      for (var i = 0; i < 2000; i++) document.writeln(i)
+      for (let i = 0; i < 2000; i++) document.writeln(i)
     </script>
   </div>
 
+  <div id="arrowTop"></div>
+
   <script>
-    // ... ваш код
-    // при необходимости, в документ можно добавить элементы и стили
+    // ... your code ...
   </script>
-</body>
 
-</html>
\ No newline at end of file
+</body>
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
index 0a2af14e..1f648740 100644
--- a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
+++ b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
@@ -1,20 +1,16 @@
-# Кнопка вверх-вниз
+importance: 5
 
-[importance 3]
+---
 
-Создайте кнопку навигации, которая помогает при прокрутке страницы.
+# Up/down button
 
-Работать должна следующим образом:
-<ul>
-<li>Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.</li>
-<li>При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх".</li>
-<li>При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на "стрелка вниз" и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на "стрелка вверх".</li>
-</ul>
+Create a "to the top" button to help with page scrolling.
 
-Должен получиться удобный навигационный помощник.
+It should work like this:
+- While the page is not scrolled down at least for the window height -- it's invisible.
+- When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
+- When the arrow is clicked, the page scrolls to the top.
 
-Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху. 
+Like this:
 
 [iframe border="1" height="200" link src="solution"]
-
-
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
index 1608bab1..b07f6820 100644
--- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
@@ -1,36 +1,31 @@
-Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
+The `onscroll` handler should check which images are visible and show them.
 
-Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
+We also may want to run it when the page loads, to detect immediately visible images prior to any scrolling and load them.
+
+If we put it at the `<body>` bottom, then it runs when the page content is loaded.
 
 ```js
-...страница...
+// ...the page content is above...
 
 function isVisible(elem) {
 
-  var coords = elem.getBoundingClientRect();
+  let coords = elem.getBoundingClientRect();
 
-  var windowHeight = document.documentElement.clientHeight;
+  let windowHeight = document.documentElement.clientHeight;
 
-  // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
-  var topVisible = coords.top > 0 && coords.top < windowHeight;
-  var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
+  // 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;
 }
 
-
 *!*
 showVisible();
 window.onscroll = showVisible;
 */!*
 ```
 
-При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству.
-
-**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.**
-
-Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.
-
-В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`).
+For visible images we can take `img.dataset.src` and assign it to `img.src` (if not did it yet).
 
-[edit src="solution"]Открыть полное решение в песочнице[/edit]
\ No newline at end of file
+P.S. The solution also has a variant of `isVisible` that "pre-loads" images that are within 1 page  above/below (the page height is `document.documentElement.clientHeight`).
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/index.html b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/index.html
index aec47aed..5c6027a6 100644
--- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/index.html
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/index.html
@@ -1,164 +1,228 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
-  <style>
-    .news-item {
-      width: 700px;
-      text-align: justify;
-      margin-top: 20px;
-    }
-    
-    .news-item .title {
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
-  </style>
 </head>
 
 <body>
 
-  <p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
-
-  <h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
-
-
-  <div class="news-item">
-    <div class="title">Космопорт Америка \ Architecture</div>
-
-    Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
-    площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
-    обеспечена взлетно-посадочная полоса длиной в три километра.
-
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
-
-    Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
-    McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
-
-    Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
-    Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
-      <img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
-
-    Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
-    Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Подарочный каталог Apple 1983 \ Creative</div>
-
-    Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
-
-    Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
-
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Фотограф Emily Lee \ Photography</div>
-
-    Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
-    большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
-
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Иконы моды в Fashimals \ Creative</div>
-
-    Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
-
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
-  </div>
-
-
-  <script>
+  <p>Text and pictures are from https://wikipedia.org.</p>
+
+  <h3>All images with <code>data-src</code> load when become visible.</h3>
+
+  <h1>Solar system</h1>
+
+  <p>The Solar System is the gravitationally bound system comprising the Sun and the objects that
+    orbit it, either directly or indirectly. Of those objects that orbit the Sun directly,
+    the largest eight are the planets, with the remainder being significantly smaller objects,
+    such as dwarf planets and small Solar System bodies.
+    Of the objects that orbit the Sun indirectly, the moons,
+    two are larger than the smallest planet, Mercury.</p>
+
+  <p>The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant
+    interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most
+    of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus,
+    Earth and Mars, are terrestrial planets, being primarily composed of rock and metal.
+    The four outer planets are giant planets, being substantially more massive than the terrestrials.
+    The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium;
+    the two outermost planets, Uranus and Neptune, are ice giants,
+    being composed mostly of substances with relatively high melting points compared with hydrogen
+    and helium, called volatiles, such as water, ammonia and methane.
+    All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/planets.jpg" width="640" height="360">
+  </figure>
+
+  <h1>Sun</h1>
+
+  <p>The Sun is the Solar System's star and by far its most massive component.
+    Its large mass (332,900 Earth masses) produces temperatures and densities in its core
+    high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star.
+     This releases an enormous amount of energy,
+    mostly radiated into space as electromagnetic radiation peaking in visible light.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/sun.jpg" width="658" height="658">
+  </figure>
+
+  <h1>Mercury</h1>
+
+  <p>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet
+    in the Solar System (0.055 Earth masses).
+    Mercury has no natural satellites; besides impact craters, its only known geological features
+    are lobed ridges or rupes that were probably produced by a period of contraction early in
+    its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its
+    surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet
+    been adequately explained. Hypotheses include that its outer layers were stripped off by a
+    giant impact; or, that it was prevented from fully accreting by the young Sun's energy.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mercury.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Venus</h1>
+
+  <p>Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth,
+   has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of
+   internal geological activity. It is much drier than Earth, and its atmosphere is ninety times
+    as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures
+     over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere.
+   No definitive evidence of current geological activity has been detected on Venus,
+   but it has no magnetic field that would prevent depletion of its substantial atmosphere,
+    which suggests that its atmosphere is being replenished by volcanic eruptions.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/venus.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Earth</h1>
+
+  <p>Earth (1 AU from the Sun) is the largest and densest of the inner planets,
+    the only one known to have current geological activity, and the only place where life
+    is known to exist. Its liquid hydrosphere is unique among the terrestrial planets,
+    and it is the only planet where plate tectonics has been observed.
+    Earth's atmosphere is radically different from those of the other planets,
+    having been altered by the presence of life to contain 21% free oxygen.
+    It has one natural satellite, the Moon, the only large satellite of a terrestrial planet
+    in the Solar System.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/earth.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Mars</h1>
+
+  <p>Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses).
+    It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars
+    (roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes,
+    such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological
+    activity that may have persisted until as recently as 2 million years ago.
+     Its red colour comes from iron oxide (rust) in its soil.
+      Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mars.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Jupiter</h1>
+
+  <p>Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together.
+     It is composed largely of hydrogen and helium.
+     Jupiter's strong internal heat creates semi-permanent features in its atmosphere,
+     such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites.
+     The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets,
+      such as volcanism and internal heating.
+    Ganymede, the largest satellite in the Solar System, is larger than Mercury.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/jupiter.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Saturn</h1>
+  <p>Saturn (9.5 AU), distinguished by its extensive ring system,
+    has several similarities to Jupiter, such as its atmospheric composition and magnetosphere.
+    Although Saturn has 60% of Jupiter's volume, it is less than a third as massive,
+    at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water.
+    The rings of Saturn are made up of small ice and rock particles.
+    Saturn has 62 confirmed satellites composed largely of ice.
+    Two of these, Titan and Enceladus, show signs of geological activity.
+    Titan, the second-largest moon in the Solar System, is larger than Mercury
+    and the only satellite in the Solar System with a substantial atmosphere.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/saturn.jpg" width="805" height="390">
+  </figure>
+
+  <h1>Uranus</h1>
+  <p>Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets.
+    Uniquely among the planets, it orbits the Sun on its side;
+    its axial tilt is over ninety degrees to the ecliptic.
+    It has a much colder core than the other giant planets and radiates very little heat into space.
+    Uranus has 27 known satellites, the largest ones being Titania,
+    Oberon, Umbriel, Ariel, and Miranda.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/uranus.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Neptune</h1>
+  <p>Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths)
+     and hence more dense. It radiates more internal heat,
+     but not as much as Jupiter or Saturn.
+     Neptune has 14 known satellites. The largest, Triton, is geologically active,
+     with geysers of liquid nitrogen.
+     Triton is the only large satellite with a retrograde orbit.
+     Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans,
+     that are in 1:1 resonance with it.</p>
+
+   <figure>
+     <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/neptune.jpg" width="390" height="390">
+   </figure>
+
+   <script>
     /**
-     * Проверяет элемент на попадание в видимую часть экрана.
-     * Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
+     * Tests if the element is visible (within the visible part of the page)
+     * It's enough that the top or bottom edge of the element are visible
      */
     function isVisible(elem) {
 
-      var coords = elem.getBoundingClientRect();
+      let coords = elem.getBoundingClientRect();
 
-      var windowHeight = document.documentElement.clientHeight;
+      let windowHeight = document.documentElement.clientHeight;
 
-      // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
-      var topVisible = coords.top > 0 && coords.top < windowHeight;
-      var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
+      // 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;
     }
 
     /**
-    Вариант проверки, считающий элемент видимым,
-    если он не более чем -1 страница назад или +1 страница вперед
+    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) {
 
-      var coords = elem.getBoundingClientRect();
+      let coords = elem.getBoundingClientRect();
 
-      var windowHeight = document.documentElement.clientHeight;
+      let windowHeight = document.documentElement.clientHeight;
 
-      var extendedTop = -windowHeight;
-      var extendedBottom = 2 * windowHeight;
+      let extendedTop = -windowHeight;
+      let extendedBottom = 2 * windowHeight;
 
       // top visible || bottom visible
-      var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
-      var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
+      let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
+      let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
 
       return topVisible || bottomVisible;
     }
     */
 
     function showVisible() {
-      var imgs = document.getElementsByTagName('img');
-      for (var i = 0; i < imgs.length; i++) {
+      for (let img of document.querySelectorAll('img')) {
+        let realSrc = img.dataset.src;
+        if (!realSrc) continue;
 
-        var img = imgs[i];
+        if (isVisible(img)) {
+          // disable caching
+          // this line should be removed in production code
+          realSrc += '?nocache=' + Math.random();
 
-        var realsrc = img.getAttribute('realsrc');
-        if (!realsrc) continue;
+          img.src = realSrc;
 
-        if (isVisible(img)) {
-          img.src = realsrc;
-          img.setAttribute('realsrc', '');
+          img.dataset.src = '';
         }
       }
 
     }
 
-    window.onscroll = showVisible;
+    window.addEventListener('scroll', showVisible);
     showVisible();
   </script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/placeholder.svg b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/placeholder.svg
new file mode 100644
index 00000000..7535dd31
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/placeholder.svg
@@ -0,0 +1 @@
+<svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(36 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.1s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(72 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.2s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(108 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(144 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(216 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(252 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.7s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(288 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(324 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git 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
index 0714836f..5c6027a6 100644
--- 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
@@ -1,108 +1,228 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
-  <style>
-    .news-item {
-      width: 700px;
-      text-align: justify;
-      margin-top: 20px;
-    }
-    
-    .news-item .title {
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
-  </style>
 </head>
 
 <body>
 
-  <p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
-
-  <h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
-
-
-  <div class="news-item">
-    <div class="title">Космопорт Америка \ Architecture</div>
-
-    Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
-    площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
-    обеспечена взлетно-посадочная полоса длиной в три километра.
-
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
-
-    Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
-    McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
-      <img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
-
-    Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
-    Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
-    <div class="illustrations">
-      <img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
-      <img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
-    </div>
-  </div>
-
-  <div class="news-item">
-    <div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
-
-    Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
-    Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
-  </div>
+  <p>Text and pictures are from https://wikipedia.org.</p>
+
+  <h3>All images with <code>data-src</code> load when become visible.</h3>
+
+  <h1>Solar system</h1>
+
+  <p>The Solar System is the gravitationally bound system comprising the Sun and the objects that
+    orbit it, either directly or indirectly. Of those objects that orbit the Sun directly,
+    the largest eight are the planets, with the remainder being significantly smaller objects,
+    such as dwarf planets and small Solar System bodies.
+    Of the objects that orbit the Sun indirectly, the moons,
+    two are larger than the smallest planet, Mercury.</p>
+
+  <p>The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant
+    interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most
+    of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus,
+    Earth and Mars, are terrestrial planets, being primarily composed of rock and metal.
+    The four outer planets are giant planets, being substantially more massive than the terrestrials.
+    The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium;
+    the two outermost planets, Uranus and Neptune, are ice giants,
+    being composed mostly of substances with relatively high melting points compared with hydrogen
+    and helium, called volatiles, such as water, ammonia and methane.
+    All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/planets.jpg" width="640" height="360">
+  </figure>
+
+  <h1>Sun</h1>
+
+  <p>The Sun is the Solar System's star and by far its most massive component.
+    Its large mass (332,900 Earth masses) produces temperatures and densities in its core
+    high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star.
+     This releases an enormous amount of energy,
+    mostly radiated into space as electromagnetic radiation peaking in visible light.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/sun.jpg" width="658" height="658">
+  </figure>
+
+  <h1>Mercury</h1>
+
+  <p>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet
+    in the Solar System (0.055 Earth masses).
+    Mercury has no natural satellites; besides impact craters, its only known geological features
+    are lobed ridges or rupes that were probably produced by a period of contraction early in
+    its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its
+    surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet
+    been adequately explained. Hypotheses include that its outer layers were stripped off by a
+    giant impact; or, that it was prevented from fully accreting by the young Sun's energy.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mercury.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Venus</h1>
+
+  <p>Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth,
+   has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of
+   internal geological activity. It is much drier than Earth, and its atmosphere is ninety times
+    as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures
+     over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere.
+   No definitive evidence of current geological activity has been detected on Venus,
+   but it has no magnetic field that would prevent depletion of its substantial atmosphere,
+    which suggests that its atmosphere is being replenished by volcanic eruptions.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/venus.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Earth</h1>
+
+  <p>Earth (1 AU from the Sun) is the largest and densest of the inner planets,
+    the only one known to have current geological activity, and the only place where life
+    is known to exist. Its liquid hydrosphere is unique among the terrestrial planets,
+    and it is the only planet where plate tectonics has been observed.
+    Earth's atmosphere is radically different from those of the other planets,
+    having been altered by the presence of life to contain 21% free oxygen.
+    It has one natural satellite, the Moon, the only large satellite of a terrestrial planet
+    in the Solar System.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/earth.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Mars</h1>
+
+  <p>Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses).
+    It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars
+    (roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes,
+    such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological
+    activity that may have persisted until as recently as 2 million years ago.
+     Its red colour comes from iron oxide (rust) in its soil.
+      Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mars.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Jupiter</h1>
+
+  <p>Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together.
+     It is composed largely of hydrogen and helium.
+     Jupiter's strong internal heat creates semi-permanent features in its atmosphere,
+     such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites.
+     The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets,
+      such as volcanism and internal heating.
+    Ganymede, the largest satellite in the Solar System, is larger than Mercury.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/jupiter.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Saturn</h1>
+  <p>Saturn (9.5 AU), distinguished by its extensive ring system,
+    has several similarities to Jupiter, such as its atmospheric composition and magnetosphere.
+    Although Saturn has 60% of Jupiter's volume, it is less than a third as massive,
+    at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water.
+    The rings of Saturn are made up of small ice and rock particles.
+    Saturn has 62 confirmed satellites composed largely of ice.
+    Two of these, Titan and Enceladus, show signs of geological activity.
+    Titan, the second-largest moon in the Solar System, is larger than Mercury
+    and the only satellite in the Solar System with a substantial atmosphere.</p>
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/saturn.jpg" width="805" height="390">
+  </figure>
+
+  <h1>Uranus</h1>
+  <p>Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets.
+    Uniquely among the planets, it orbits the Sun on its side;
+    its axial tilt is over ninety degrees to the ecliptic.
+    It has a much colder core than the other giant planets and radiates very little heat into space.
+    Uranus has 27 known satellites, the largest ones being Titania,
+    Oberon, Umbriel, Ariel, and Miranda.</p>
+
+
+  <figure>
+    <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/uranus.jpg" width="390" height="390">
+  </figure>
+
+  <h1>Neptune</h1>
+  <p>Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths)
+     and hence more dense. It radiates more internal heat,
+     but not as much as Jupiter or Saturn.
+     Neptune has 14 known satellites. The largest, Triton, is geologically active,
+     with geysers of liquid nitrogen.
+     Triton is the only large satellite with a retrograde orbit.
+     Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans,
+     that are in 1:1 resonance with it.</p>
+
+   <figure>
+     <img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/neptune.jpg" width="390" height="390">
+   </figure>
+
+   <script>
+    /**
+     * Tests if the element is visible (within the visible part of the page)
+     * 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;
+    }
 
-  <div class="news-item">
-    <div class="title">Подарочный каталог Apple 1983 \ Creative</div>
+    /**
+    A variant of the test that considers the element visible if it's no more than
+    one page after/behind the current screen.
 
-    Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
-  </div>
+    function isVisible(elem) {
 
-  <div class="news-item">
-    <div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
+      let coords = elem.getBoundingClientRect();
 
-    Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
+      let windowHeight = document.documentElement.clientHeight;
 
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
-  </div>
+      let extendedTop = -windowHeight;
+      let extendedBottom = 2 * windowHeight;
 
-  <div class="news-item">
-    <div class="title">Фотограф Emily Lee \ Photography</div>
+      // top visible || bottom visible
+      let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
+      let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
 
-    Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
-    большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
+      return topVisible || bottomVisible;
+    }
+    */
 
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
-  </div>
+    function showVisible() {
+      for (let img of document.querySelectorAll('img')) {
+        let realSrc = img.dataset.src;
+        if (!realSrc) continue;
 
-  <div class="news-item">
-    <div class="title">Иконы моды в Fashimals \ Creative</div>
+        if (isVisible(img)) {
+          // disable caching
+          // this line should be removed in production code
+          realSrc += '?nocache=' + Math.random();
 
-    Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
+          img.src = realSrc;
 
-    <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
-  </div>
+          img.dataset.src = '';
+        }
+      }
 
+    }
 
-  <script>
-    // ... ваш код ...
+    window.addEventListener('scroll', showVisible);
+    showVisible();
   </script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/placeholder.svg b/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/placeholder.svg
new file mode 100644
index 00000000..7535dd31
--- /dev/null
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/placeholder.svg
@@ -0,0 +1 @@
+<svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(36 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.1s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(72 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.2s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(108 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(144 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(216 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(252 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.7s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(288 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(324 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
index ca90f490..e10018b3 100644
--- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
@@ -1,50 +1,30 @@
-# Загрузка видимых изображений
+importance: 4
 
-[importance 4]
+---
 
-Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.
+# Load visible images
 
-С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты".
+Let's say we have a slow-speed client and want to save his mobile traffic.
 
-Вместо такого изображения:
+For that purpose we decide not to show images immediately, but rather replace them with placeholders, like this:
 
 ```html
-<img src="yozhik.jpg" width="128" height="128">
+<img *!*src="placeholder.svg"*/!* width="128" height="128" *!*data-src="real.jpg"*/!*>
 ```
 
-<img src="https://js.cx/clipart/yozhik.jpg" width="128" height="128">
+So, initially all images are `placeholder.svg`. When the page scrolls to the position where the user can see the image -- we change `src` to the one in `data-src`, and so the image loads.
 
+Here's an example in `iframe`:
 
-Стоит вот такое:
-
-```html
-<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
-```
-
-<img src="https://js.cx/lazyimg/1.gif" width="128" height="128">
-
-То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник. 
-
-При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`.
-
-Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.
-
-Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.
-
-Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.
-
-То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`. 
+[iframe src="solution"]
 
-Пример работы вы можете увидеть в `iframe` ниже, если прокрутите его: 
+Scroll it to see images load "on-demand".
 
-[iframe src="solution"]
+Requirements:
+- When the page loads, those images that are on-screen should load immediately, prior to any scrolling.
+- Some images may be regular, without `data-src`. The code should not touch them.
+- Once an image is loaded, it should not reload any more when scrolled in/out.
 
-Особенности реализации:
-<ul>
-<li>При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.</li>
-<li>Некоторые изображения могут быть обычными, без `realsrc`. Их код не должен трогать вообще.</li>
-<li>Также код не должен перегружать уже показанное изображение.</li>
-<li>Желательно предусмотреть загрузку изображений не только видимых сейчас, но и на страницу вперед и назад от текущего места.</li>
-</ul>
+P.S. If you can, make a more advanced solution that would "preload" images that are one page below/after the current position.
 
-P.S. Горизонтальной прокрутки нет.
\ No newline at end of file
+P.P.S. Only vertical scroll is to be handled, no horizontal scrolling.
diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md
index da325c24..4eefb793 100644
--- a/2-ui/3-event-details/8-onscroll/article.md
+++ b/2-ui/3-event-details/8-onscroll/article.md
@@ -1,31 +1,39 @@
-# Прокрутка: событие scroll
+# Scrolling
 
-Событие `onscroll` происходит, когда элемент прокручивается.
+Scroll events allow to react on a page or element scrolling. There are quite a few good things we can do here.
 
-В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной".
+For instance:
+- Show/hide additional controls or information depending on where in the document the user is.
+- Load more data when the user scrolls down till the end of the page.
 
 [cut]
-Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей:
-
-```js
-//+ autorun
-window.onscroll = function() {
-  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
-  document.getElementById('showScroll').innerHTML = scrolled + 'px';
-}
+
+Here's a small function to show the current scroll:
+
+```js autorun
+window.addEventListener('scroll', function() {
+  document.getElementById('showScroll').innerHTML = pageYOffset + 'px';
+});
+```
+
+```online
+In action:
+
+Current scroll = <b id="showScroll">scroll the window</b>
 ```
 
-В действии:
-Текущая прокрутка = <b id="showScroll">прокрутите окно</b>
+The `scroll` event works both on the `window` and on scrollable elements.
+
+## Prevent scrolling
 
-Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе [](/metrics).
+How do we make something unscrollable? We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened.
 
-Некоторые области применения `onscroll`:
-<ul>
-<li>Показ дополнительных элементов навигации при прокрутке.</li>
-<li>Подгрузка и инициализация элементов интерфейса, ставших видимыми после прокрутки.</li>
-</ul>
+But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll.
 
-Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере.
+For instance:
+- `wheel` event -- a mouse wheel roll (a "scrolling" touchpad action generates it too).
+- `keydown` event for `key:pageUp` and `key:pageDown`.
 
+Sometimes that may help. But there are more ways to scroll, so it's quite hard to handle all of them. So it's more reliable to use CSS to make something unscrollable, like `overflow` property.
 
+Here are few tasks that you can solve or look through to see the applications on `onscroll`.
diff --git a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md
deleted file mode 100644
index 35f6c937..00000000
--- a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Подсказка: выбор события
-
-Нам нужно событие `keypress`, так как по скан-коду мы не отличим, например, клавишу `'2'` обычную и в верхнем регистре (символ `'@'`).
-
-Нужно отменять действие по умолчанию (т.е. ввод), если введена не цифра.
-
-# Решение
-
-Нам нужно проверять *символы* при вводе, поэтому, будем использовать событие `keypress`.
-
-Алгоритм такой: получаем символ и проверяем, является ли он цифрой. Если не является, то отменяем действие по умолчанию.
-
-Кроме того, игнорируем специальные символы и нажатия со включенным [key Ctrl]/[key Alt]/[key Cmd].
-
-Итак, вот решение:
-
-```js
-input.onkeypress = function(e) {
-  e = e || event;
-
-  if (e.ctrlKey || e.altKey || e.metaKey) return;
-
-  var chr = getChar(e);
-
-  // с null надо осторожно в неравенствах, 
-  // т.к. например null >= '0' => true
-  // на всякий случай лучше вынести проверку chr == null отдельно
-  if (chr == null) return;
-
-  if (chr < '0' || chr > '9') {
-    return false;
-  }
-}
-```
-
-[edit src="solution"]Открыть полное решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.view/index.html b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.view/index.html
deleted file mode 100644
index 77bcafe4..00000000
--- a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.view/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Введите ваш возраст:
-  <input type="text">
-
-
-  <script>
-    document.getElementsByTagName('input')[0].onkeypress = function(e) {
-
-      e = e || event;
-
-      if (e.ctrlKey || e.altKey || e.metaKey) return;
-
-      var chr = getChar(e);
-
-      // с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
-      // на всякий случай лучше вынести проверку chr == null отдельно
-      if (chr == null) return;
-
-      if (chr < '0' || chr > '9') {
-        return false;
-      }
-
-    }
-
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/source.view/index.html b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/source.view/index.html
deleted file mode 100644
index 9771cdec..00000000
--- a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/source.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Введите ваш возраст:
-  <input type="text">
-
-
-  <script>
-    /* ваш код .. .*/
-
-
-    // вспомогательная функция, если понадобится
-
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/task.md b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/task.md
deleted file mode 100644
index 3aa964e4..00000000
--- a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/task.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Поле только для цифр
-
-[importance 5]
-
-При помощи событий клавиатуры сделайте так, чтобы в поле можно было вводить только цифры. Пример ниже.
-
-[iframe border=1 src="solution"]
-
-В поле должны нормально работать специальные клавиши [key Delete]/[key Backspace] и сочетания c [key Ctrl]/[key Alt]/[key Cmd].
-
-
-
-P.S. Конечно, при помощи альтернативных способов ввода (например, вставки мышью), посетитель всё же может ввести что угодно.
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.md
deleted file mode 100644
index 095b0c0c..00000000
--- a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Ход решения
-
-<ul>
-<li>Функция `runOnKeys` -- с переменным числом аргументов. Для их получения используйте `arguments`.</li>
-<li>Используйте два обработчика: `document.onkeydown` и `document.onkeyup`. Первый отмечает нажатие клавиши в объекте `pressed = {}`, устанавливая `pressed[keyCode] = true`, а второй -- удаляет это свойство. Если все клавиши с кодами из `arguments` нажаты -- запускайте `func`.</li>
-<li>Возникнет проблема с повторным нажатием сочетания клавиш после `alert`, решите её.</li>
-</ul>
-
-# Решение
-
diff --git a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.view/index.html
deleted file mode 100644
index 766a441b..00000000
--- a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/solution.view/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-
-  <body>
-
-    <p>Нажмите одновременно "Q" и "W" (в любой раскладке).</p>
-
-    <script>
-      function runOnKeys(func) {
-        var codes = [].slice.call(arguments, 1);
-
-        var pressed = {};
-
-        document.onkeydown = function(e) {
-          e = e || window.event;
-
-          pressed[e.keyCode] = true;
-
-          for (var i = 0; i < codes.length; i++) { // проверить, все ли клавиши нажаты
-            if (!pressed[codes[i]]) {
-              return;
-            }
-          }
-
-          // во время показа alert, если посетитель отпустит клавиши - не возникнет keyup
-          // при этом JavaScript "пропустит" факт отпускания клавиш, а pressed[keyCode] останется true
-          // чтобы избежать "залипания" клавиши -- обнуляем статус всех клавиш, пусть нажимает всё заново
-          pressed = {};
-
-          func();
-
-        };
-
-        document.onkeyup = function(e) {
-          e = e || window.event;
-
-          delete pressed[e.keyCode];
-        };
-
-      }
-
-      runOnKeys(
-        function() {
-          alert("Привет!")
-        },
-        "Q".charCodeAt(0),
-        "W".charCodeAt(0)
-      );
-    </script>
-
-  </body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md
deleted file mode 100644
index 285e4f92..00000000
--- a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Отследить одновременное нажатие 
-
-[importance 3]
-
-Создайте функцию `runOnKeys(func, code1, code2, ... code_n)`, которая запускает `func` при одновременном нажатии клавиш со скан-кодами `code1`, `code2`, ..., `code_n`.
-
-Например, код ниже выведет `alert` при одновременном нажатии клавиш `"Q"` и `"W"` (в любом регистре, в любой раскладке)
-
-```js
-//+ no-beautify
-runOnKeys(
-  function() { alert("Привет!") }, 
-  "Q".charCodeAt(0), 
-  "W".charCodeAt(0)
-);
-```
-
-[demo src="solution"]
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/article.md b/2-ui/3-event-details/9-keyboard-events/article.md
deleted file mode 100644
index 815716ff..00000000
--- a/2-ui/3-event-details/9-keyboard-events/article.md
+++ /dev/null
@@ -1,338 +0,0 @@
-# Клавиатура: keyup, keydown, keypress
-
-Здесь мы рассмотрим основные "клавиатурные" события и работу с ними.
-[cut]
-
-## Тестовый стенд [#keyboard-test-stand]
-
-Для того, чтобы лучше понять, как работают события клавиатуры, можно использовать тестовый стенд.
-
-Попробуйте различные варианты нажатия клавиш в текстовом поле.
-
-[codetabs src="keyboard-dump" height=480]
-
-По мере чтения, если возникнут вопросы -- возвращайтесь к этому стенду.
-
-## События keydown и keyup
-
-События `keydown/keyup` происходят при нажатии/отпускании клавиши и позволяют получить её *скан-код* в свойстве `keyCode`.
-
-Скан-код клавиши одинаков в любой раскладке и в любом регистре. Например, клавиша [key z] может означать символ `"z"`, `"Z"` или `"я"`, `"Я"` в русской раскладке, но её *скан-код* будет всегда одинаков: `90`.
-
-[online]
-В действии:
-
-```html
-<input onkeydown="this.nextSibling.innerHTML = event.keyCode"> <b></b>
-```
-
-<input size="40" placeholder="Нажмите клавишу, скан-код будет справа" onkeydown="this.nextElementSibling.innerHTML = event.keyCode"> <b></b>
-[/online]
-
-### Скан-коды
-
-Для буквенно-цифровых клавиш есть очень простое правило: скан-код будет равен коду соответствующей заглавной английской буквы/цифры.
-
-Например, при нажатии клавиши [key S] (не важно, каков регистр и раскладка) её скан-код будет равен `"S".charCodeAt(0)`.
-
-Для других символов, в частности, знаков пунктуации, есть  таблица кодов, которую можно взять, например, из статьи Джона Уолтера: <a href="http://unixpapa.com/js/key.html">JavaScript Madness: Keyboard Events</a>, или же можно нажать на нужную клавишу на [тестовом стенде](#keyboard-test-stand) и получить код.
-
-Когда-то в этих кодах была масса кросс-браузерных несовместимостей. Сейчас всё проще -- таблицы кодов в различных браузерах почти полностью совпадают. Но некоторые несовместимости, всё же, остались. Вы можете увидеть их в таблице ниже. Слева -- клавиша с символом, а справа -- скан-коды в различных браузерах.
-
-Таблица несовместимостей:
-<table>
-<thead>
-<tr><th>Клавиша</th><th>Firefox</th><th>Остальные браузеры</th></tr>
-</thead>
-<tbody>
-<tr>
-<td>[key ;]</td>
-<td>59</td>
-<td>186</td>
-</tr>
-<tr>
-<td>[key =]</td>
-<td>107</td>
-<td>187</td>
-</tr>
-<tr>
-<td>[key -]</td>
-<td>109</td>
-<td>189</td>
-</tr>
-</tbody>
-</table>
-
-Остальные коды одинаковы, код для нужного символа будет в тестовом стенде.
-
-## Событие keypress
-
-Событие `keypress` возникает сразу после `keydown`, если нажата *символьная* клавиша, т.е. нажатие приводит к появлению символа.
-
-Любые буквы, цифры генерируют `keypress`. Управляющие клавиши, такие как [key Ctrl], [key Shift], [key F1], [key F2].. -- `keypress` не генерируют.
-
-Событие `keypress` позволяет получить *код символа*. В отличие от скан-кода, он специфичен именно для символа и различен для `"z"` и `"я"`. 
-
-Код символа хранится в свойствах: `charCode` и `which`. Здесь скрывается целое "гнездо" кросс-браузерных несовместимостей, разбираться с которыми нет никакого смысла -- запомнить сложно, а на практике нужна лишь одна "правильная" функция, позволяющая получить код везде.
-
-### Получение символа в keypress [#getChar]
-
-Кросс-браузерная функция для получения символа из события `keypress`:
-
-```js
-//+ autorun
-// event.type должен быть keypress
-function getChar(event) {
-  if (event.which == null) { // IE
-    if (event.keyCode < 32) return null; // спец. символ
-    return String.fromCharCode(event.keyCode)
-  }
-
-  if (event.which != 0 && event.charCode != 0) { // все кроме IE
-    if (event.which < 32) return null; // спец. символ
-    return String.fromCharCode(event.which); // остальные
-  }
-
-  return null; // спец. символ
-}
-```
-
-Для общей информации -- вот основные браузерные особенности, учтённые в `getChar(event)`:
-
-<ol>
-<li>Во всех браузерах, кроме IE, у события `keypress` есть свойство `charCode`, которое содержит код символа.</li>
-<li>Браузер IE для `keypress` не устанавливает `charCode`, а вместо этого он записывает код символа в `keyCode` (в `keydown/keyup` там хранится скан-код).</li>
-<li>Также в функции выше используется проверка `if(event.which!=0)`, а не более короткая `if(event.which)`. Это не случайно! При `event.which=null` первое сравнение даст `true`, а второе -- `false`.</li>
-</ol>
-
-[online]
-В действии:
-
-```html
-<input onkeypress="this.nextSibling.innerHTML = getChar(event)+''"><b></b>
-```
-
-<input size="40" placeholder="Наберите символ, он будет справа" onkeypress="this.nextElementSibling.innerHTML = getChar(event)+''"> <b></b>
-[/online]
-
-[warn header="Неправильный `getChar`"]
-В сети вы можете найти другую функцию того же назначения:
-
-```js
-function getChar(event) {
-  return String.fromCharCode(event.keyCode || event.charCode);
-}
-```
-
-Она работает неверно для многих специальных клавиш, потому что не фильтрует их. Например, она возвращает символ амперсанда `"&"`, когда нажата клавиша 'Стрелка Вверх'. Лучше использовать ту, что приведена выше.
-[/warn]
-
-Как и у других событий, связанных с пользовательским вводом, поддерживаются свойства `shiftKey`, `ctrlKey`, `altKey` и `metaKey`.
-
-Они установлены в `true`, если нажаты клавиши-модификаторы -- соответственно, [key Shift], [key Ctrl], [key Alt] и [key Cmd] для Mac.
-
-## Отмена пользовательского ввода   
-
-Появление символа можно предотвратить, если отменить действие браузера на  `keydown/keypress`:
-
-```html
-Попробуйте что-нибудь ввести в этих полях:
-<input *!*onkeydown="return false"*/!* type="text" size="30">
-<input *!*onkeypress="return false"*/!* type="text" size="30">
-```
-
-[online]
-Попробуйте что-нибудь ввести в этих полях (не получится):
-
-<input onkeydown="return false" type="text" size="30">
-
-<input onkeypress="return false" type="text" size="30">
-[/online]
-
-При тестировании на стенде вы можете заметить, что отмена действия браузера при `keydown` также предотвращает само событие `keypress`.
- 
-[warn header="При `keydown/keypress` значение ещё старое"]
-На момент срабатывания `keydown/keypress` *клавиша ещё не обработана браузером*. 
-
-Поэтому в обработчике значение `input.value` -- старое, т.е. до ввода. Это можно увидеть в примере ниже. Вводите символы `abcd..`, а справа будет текущее `input.value`: `abc..`
-
-<input onkeydown="this.nextSibling.innerHTML=this.value" type="text" placeholder="Вводите символы"><b></b>
-
-А что, если мы хотим обработать `input.value` именно после ввода? Самое простое решение -- использовать событие `keyup`, либо запланировать обрабочик через `setTimeout(..,0)`.
-[/warn]
-
-
-
-### Отмена любых действий  
-
-Отменять можно не только символ, а любое действие клавиш.
-
-Например:
-<ul>
-<li>При отмене [key Backspace] -- символ не удалится.</li>
-<li>При отмене [key PageDown] -- страница не прокрутится.</li>
-<li>При отмене [key Tab] -- курсор не перейдёт на следующее поле.</li>
-</ul>
-
-Конечно же, есть действия, которые в принципе нельзя отменить, в первую очередь -- те, которые происходят на уровне операционной системы. Комбинация Alt+F4 инициирует закрытие браузера в Windows, что бы мы ни делали в JavaScript. 
-
-### Демо: перевод символа в верхний регистр
-
-В примере ниже действие браузера отменяется с помощью `return false`, а вместо него в `input` добавляется значение в верхнем регистре:
-
-```html
-<input id="only-upper" type="text" size="2">
-<script>
-  document.getElementById('only-upper').onkeypress = function(e) {
-    // спец. сочетание - не обрабатываем  
-    if (e.ctrlKey || e.altKey || e.metaKey) return;
-
-    var char = getChar(e);
-
-    if (!char) return; // спец. символ - не обрабатываем
-
-    this.value = char.toUpperCase();
-
-    return false;
-  };
-</script>
-```
-
-[online]
-В действии: <input id="only-upper" type="text" size="2">
-<script>
-document.getElementById('only-upper').onkeypress = function(e) {
-  var char = getChar(e);  
-  
-  // спец. сочетание - не обрабатываем  
-  if (e.ctrlKey || e.altKey || e.metaKey) return;
-  if (!char) return; // спец. символ - не обрабатываем
-  
-  this.value = char.toUpperCase();
-  
-  return false;
-}
-</script>
-[/online]
-
-## Несовместимости [#keyboard-events-order]
-
-Некоторые несовместимости в порядке срабатывания клавиатурных событий (когда что) ещё существуют.
-
-Стоит иметь в виду три основных категории клавиш, работа с которыми отличается.
-
-<table>
-<thead>
-<tr>
-  <th>Категория</th>
-  <th>События</th>
-  <th>Описание</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-  <td>Печатные клавиши [key S] [key 1] [key ,]</td>
-  <td>`keydown`
-`keypress`
-`keyup`</td>
-<td>Нажатие  вызывает `keydown` и `keypress`. 
-Когда клавишу отпускают, срабатывает `keyup`. 
-
-Исключение -- CapsLock под MacOS, с ним есть проблемы:
-<ul>
-<li>В Safari/Chrome/Opera: при включении только `keydown`, при отключении только `keyup`.</li>
-<li>В Firefox: при включении и отключении только `keydown`.</li>
-</ul>
-</td>
- 
-<tr>
-  <td>Специальные клавиши [key Alt] [key Esc] [key ⇧]</td>
-  <td>`keydown`
-`keyup`</td>
-<td>Нажатие  вызывает `keydown`. 
-Когда клавишу отпускают, срабатывает `keyup`. 
-
-Некоторые браузеры могут дополнительно генерировать и `keypress`, например IE для [key Esc]. 
-
-На практике это не доставляет проблем, так как для специальных клавиш мы всегда используем `keydown/keyup`.
- </td>
-</tr>
-
-
-<tr>
-  <td>Сочетания с печатной клавишей 
- [key Alt+E]
- [key Ctrl+У]
- [key Cmd+1]
-</td>
-  <td>`keydown`
-`keypress?`
-`keyup`</td>
-<td>
-Браузеры под Windows -- не генерируют `keypress`, браузеры под MacOS -- генерируют. 
-
-Кроме того, если сочетание вызвало браузерное действие или диалог ("Сохранить файл", "Открыть" и т.п., ряд диалогов можно отменить при `keydown`), то может быть только `keydown`.
-</td>
-</tr>
-</tbody>
-</table>
-
-Общий вывод можно сделать такой:
-<ul>
-<li>Обычные символы работают везде корректно.</li>
-<li>CapsLock под MacOS ведёт себя плохо, не стоит ставить на него обработчики вообще.</li>
-<li>Для других специальных клавиш и сочетаний с ними следует использовать только `keydown`.</li>
-</ul>
-
-## Автоповтор
-
-При долгом нажатии клавиши возникает *автоповтор*. По стандарту, должны генерироваться многократные события `keydown (+keypress)`, и вдобавок стоять свойство [repeat=true](http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent-repeat) у объекта события.
-
-То есть поток событий должен быть такой:
-
-```
-keydown
-keypress
-keydown
-keypress
-..повторяется, пока клавиша не отжата...
-keyup
-```
-
-Однако в реальности на это полагаться нельзя. На момент написания статьи, под Firefox(Linux) генерируется и `keyup`:
-
-```
-keydown
-keypress
-keyup
-keydown
-keypress
-keyup
-..повторяется, пока клавиша не отжата...
-keyup
-```
-
-...А Chrome под MacOS не генерирует `keypress`. В общем, "зоопарк". 
-
-Полагаться можно только на `keydown` при каждом автонажатии и `keyup` по отпусканию клавиши. 
-
-## Итого 
-
-Ряд рецептов по итогу этой главы:
-
-<ol>
-<li>Для реализации горячих клавиш, включая сочетания -- используем `keydown`. Скан-код будет в `keyCode`, почти все скан-коды кросс-браузерны, кроме нескольких пунктуационных, перечисленных в таблице выше.</li>
-<li>Если нужен именно символ -- используем `keypress`. При этом функция `getChar` позволит получить символ и отфильтровать лишние срабатывания. Гарантированно получать символ можно только при нажатии обычных клавиш, если речь о сочетаниях с модификаторами, то `keypress` не всегда генерируется.</li>
-<li>Ловля CapsLock глючит под MacOS. Её можно организовать при помощи проверки `navigator.userAgent` и `navigator.platform`, а лучше вообще не трогать эту клавишу.</li>
-</ol>
-
-Распространённая ошибка -- использовать события клавиатуры для работы с полями ввода в формах.
-
-Это нежелательно. События клавиатуры предназначены именно для работы с клавиатурой. Да, их можно использовать для проверки ввода в `<input>`, но будут недочёты. Например, текст может быть вставлен мышкой, при помощи правого клика и меню, без единого нажатия клавиши. И как нам помогут события клавиатуры?
-
-Некоторые мобильные устройства также не генерируют `keypress/keydown`, а сразу вставляют текст в поле. Обработать ввод на них при помощи клавиатурных событий нельзя.
-
-Далее мы разберём [события для элементов форм](/events-change), которые позволяют работать с вводом в формы правильно.
-
-Их можно использовать как отдельно от событий клавиатуры, так и вместе с ними.
- 
diff --git a/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/index.html
deleted file mode 100644
index 9703f833..00000000
--- a/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <form id="form" onsubmit="return false">
-
-    Предотвратить действие по умолчанию для:
-    <label>
-      <input type="checkbox" name="keydownStop" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
-    <label>
-      <input type="checkbox" name="keypressStop" value="1"> keypress</label>&nbsp;&nbsp;&nbsp;
-    <label>
-      <input type="checkbox" name="keyupStop" value="1"> keyup</label>
-
-    <p>
-      Игнорировать:
-      <label>
-        <input type="checkbox" name="keydownIgnore" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
-      <label>
-        <input type="checkbox" name="keypressIgnore" value="1"> keypress</label>&nbsp;&nbsp;&nbsp;
-      <label>
-        <input type="checkbox" name="keyupIgnore" value="1"> keyup</label>
-    </p>
-
-    <p>Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.</p>
-
-    <input type="text" placeholder="Клавиши нажимать тут" id="kinput">
-
-    <textarea id="area"></textarea>
-    <input type="button" value="Очистить" onclick="area.value = ''" />
-  </form>
-
-  </form>
-  <script src="script.js"></script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/script.js b/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/script.js
deleted file mode 100644
index 8972fb6b..00000000
--- a/2-ui/3-event-details/9-keyboard-events/keyboard-dump.view/script.js
+++ /dev/null
@@ -1,28 +0,0 @@
-kinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle;
-
-var lastTime = Date.now();
-
-function handle(e) {
-  if (form.elements[e.type + 'Ignore'].checked) return;
-
-  var text = e.type +
-    ' keyCode=' + e.keyCode +
-    ' which=' + e.which +
-    ' charCode=' + e.charCode +
-    ' char=' + String.fromCharCode(e.keyCode || e.charCode) +
-    (e.shiftKey ? ' +shift' : '') +
-    (e.ctrlKey ? ' +ctrl' : '') +
-    (e.altKey ? ' +alt' : '') +
-    (e.metaKey ? ' +meta' : '') + "\n";
-
-  if (area.value && Date.now() - lastTime > 250) {
-    area.value += new Array(81).join('-') + '\n';
-  }
-  lastTime = Date.now();
-
-  area.value += text;
-
-  if (form.elements[e.type + 'Stop'].checked) {
-    e.preventDefault();
-  }
-}
diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md
index 49b7cf96..f5d7ca8b 100644
--- a/2-ui/3-event-details/index.md
+++ b/2-ui/3-event-details/index.md
@@ -1,5 +1,3 @@
-# События в деталях
+# Events in details
 
-В этом разделе мы разбираем конкретные события и особенности работы с ними.
-
-Вы можете читать его в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся.
\ No newline at end of file
+Here we cover most important events and details of working with them.
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
index 4ec1dec3..35fef2a5 100644
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
@@ -1,25 +1,21 @@
-Решение:
+The solution, step by step:
 
-```html
-<!--+ run -->
-<select>
-  <option value="Rock">Рок</option>
-  <option value="Blues" selected>Блюз</option>
+```html run
+<select id="genres">
+  <option value="rock">Rock</option>
+  <option value="blues" selected>Blues</option>
 </select>
 
 <script>
-  var select = document.body.children[0];
-
-  // 1) 
-  var selectedOption = select.options[select.selectedIndex];
+  // 1)
+  let selectedOption = genres.options[select.selectedIndex];
   alert( selectedOption.value );
 
   // 2)
-  var newOption = new Option("Classic", "Классика");
-  select.appendChild(newOption);
+  let newOption = new Option("classic", "Classic");
+  select.append(newOption);
 
   // 3)
   newOption.selected = true;
 </script>
 ```
-
diff --git 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
index 86685734..9b218aa7 100644
--- 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
@@ -1,19 +1,20 @@
-# Добавьте опцию к селекту
+importance: 5
 
-[importance 5]
+---
 
-Есть селект:
+# Add an option to select
+
+There's a `<select>`:
 
 ```html
-<select>
-  <option value="Rock">Рок</option>
-  <option value="Blues" selected>Блюз</option>
+<select id="genres">
+  <option value="rock">Rock</option>
+  <option value="blues" selected>Blues</option>
 </select>
 ```
 
-При помощи JavaScript:
-<ol>
-<li>Выведите значение и текст текущей выбранной опции.</li>
-<li>Добавьте опцию: `<option value="Classic">Классика</option>`.</li>
-<li>Сделайте её выбранной.</li>
-</ol>
+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.
diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
index 8d4ca3c8..2c20ddfd 100644
--- a/2-ui/4-forms-controls/1-form-elements/article.md
+++ b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -1,318 +1,288 @@
-# Навигация и свойства элементов формы
+# Form properties and methods
 
-Элементы управления, такие как `<form>`, `<input>` и другие имеют большое количество своих важных свойств и ссылок.
+Forms and control elements, such as `<input>` have a lot of special properties and events.
+
+Working with forms can be much more convenient if we know them.
 
 [cut]
 
-## Псевдомассив form.elements
+## Navigation: form and elements
 
-Элементы `FORM` можно получить по имени или номеру, используя свойство `document.forms[name/index]`.
+Document forms are members of the special collection `document.forms`.
 
-Например:
+That's a *named* collection: we can use both the name and the number to get the form.
 
-```js
-//+ no-beautify
-document.forms.my -- форма с именем 'my'
-document.forms[0] -- первая форма в документе
+```js no-beautify
+document.forms.my - the form with name="my"
+document.forms[0] - the first form in the document
 ```
 
-**Любой *элемент* формы `form` можно получить аналогичным образом, используя свойство `form.elements`.**
+When we have a form, then any element is available in the named collection `form.elements`.
 
-<img src="form.png">
+For instance:
 
-Например:
-
-```html
-<!--+ run height=40 -->
-<body>
-  <form name="my">
-    <input name="one" value="1">
-    <input name="two" value="2">
-  </form>
+```html run height=40
+<form name="my">
+  <input name="one" value="1">
+  <input name="two" value="2">
+</form>
 
-  <script>
-    var form = document.forms.my; // можно document.forms[0]
+<script>
+  // get the form
+  let form = document.forms.my; // <form name="my"> element
 
-    var elem = form.elements.one; // можно form.elements[0]
+  // get the element
+  let elem = form.elements.one; // <input name="one"> element
 
-    alert( elem.value ); // "один"
-  </script>
-</body>
+  alert(elem.value); // 1
+</script>
 ```
 
-**Может быть несколько элементов с *одинаковым именем*. В таком случае `form.elements[name]` вернет коллекцию элементов**, например:
+There may be multiple elements with the same name, that's often the case with radio buttons.
 
-```html
-<!--+ run height=40 -->
-<body>
+In that case `form.elements[name]` is a collection, for instance:
+
+```html run height=40
 <form>
-  <input type="radio" name="*!*age*/!*" value="10">
-  <input type="radio" name="*!*age*/!*" value="20">
+  <input type="radio" *!*name="age"*/!* value="10">
+  <input type="radio" *!*name="age"*/!* value="20">
 </form>
 
 <script>
-var form = document.forms[0];
+let form = document.forms[0];
 
-var elems = form.elements.age;
+let ageElems = form.elements.age;
 
-alert(elems[0].value); // 10, первый input
+alert(ageElems[0].value); // 10, the first input value
 </script>
-</body>
 ```
 
-Эти ссылки не зависят от окружающих тегов. Элемент может быть "зарыт" где-то глубоко в форме, но он всё равно доступен через `form.elements`.
+These navigation properties do not depend on the tag structure. All elements, no matter how deep they are in the form, are available in `form.elements`.
+
+
+````smart header="Fieldsets as \"subforms\""
+A form may have one or many `<fieldset>` elements inside it. They also support the `elements` property.
 
-**Свойство `elements` также есть у элементов `<fieldset>`.**
-Вот пример:
+For instance:
 
-```html
-<!--+ run height=80 -->
+```html run height=80
 <body>
-  <form>
-    <fieldset name="set">
-      <legend>fieldset</legend>
-      <input name="text" type="text">
+  <form id="form">
+    <fieldset name="userFields">
+      <legend>info</legend>
+      <input name="login" type="text">
     </fieldset>
   </form>
 
   <script>
-    var form = document.forms[0];
+    alert(form.elements.login); // <input name="login">
 
-    alert( form.elements.text ); // INPUT
 *!*
-    alert( form.elements.set.elements.text ); // INPUT
+    let fieldset = form.elements.userFields;
+    alert(fieldset); // HTMLFieldSetElement
+
+    // we can get the input both from the form and from the fieldset
+    alert(fieldset.elements.login == form.elements.login); // true
 */!*
   </script>
 </body>
 ```
+````
+
+````warn header="Shorter notation: `form.name`"
+There's a shorter notation: we can access the element as `form[index/name]`.
 
-Спецификация: [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
+Instead of `form.elements.login` we can write `form.login`.
 
-[warn header="Доступ `form.name` тоже работает, но с особенностями"]
-Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
- 
-Этот способ короче, так как обладает одной неприятной особенностью: если к элементу обратиться по его `name`, а потом свойство `name` изменить, то он по-прежнему будет доступен под старым именем.
+That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one).
 
-Звучит странно, поэтому посмотрим на примере.
+That's easy to see in an example:
 
-```html
-<!--+ run height=40 -->
-<form name="myform">
-  <input name="text">
+```html run height=40
+<form id="form">
+  <input name="login">
 </form>
 
 <script>
-  var form = document.forms.myform;
-
-  alert( form.elements.text == form.text ); // true, это тот самый INPUT
+  alert(form.elements.login == form.login); // true, the same <input>
 
-  form.text.name = "new-name"; // меняем name ему
+  form.login.name = "username"; // change the name of the input
 
-  // нет больше элемента с таким именем
-  alert( form.elements.text ); // undefined
+  // form.elements updated the name:
+  alert(form.elements.login); // undefined
+  alert(form.elements.username); // input
 
-  alert( form.text ); //  INPUT (а должно быть undefined!)
+*!*
+  // the direct access now can use both names: the new one and the old one
+  alert(form.username == form.login); // true
+*/!*
 </script>
 ```
 
-[/warn]
+That's usually not a problem, because we rarely change names of form elements.
 
-## Ссылка на форму element.form
+````
 
-По элементу можно получить его форму, используя свойство `element.form`.
+## Backreference: element.form
 
-Пример:
+For any element, the form is available as `element.form`. So a form references all elements, and elements
+reference the form.
 
-```html
-<!--+ run height=40 -->
-<body>
-<form>
-  <input type="text" name="*!*surname*/!*">
-</form>
+Here's the picture:
 
-<script>
-var form = document.forms[0];
+![](form-navigation.png)
 
-var elem = form.elements.surname;
+For instance:
 
+```html run height=40
+<form id="form">
+  <input type="text" name="login">
+</form>
+
+<script>
 *!*
-alert(elem.form == form); // true
+  // form -> element
+  let login = form.login;
+
+  // element -> form
+  alert(login.form); // HTMLFormElement
 */!*
 </script>
-</body>
-```
-
-Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
-
-## Элемент label
-
-Элемент `label` -- один из самых важных в формах. 
-
-**Клик на `label` засчитывается как фокусировка или клик на элементе формы, к которому он относится.**
-
-Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике `input type=checkbox` (`radio`). Конечно, это очень удобно.
- 
-Есть два способа показать, какой элемент относится к `label`:
-
-<ol>
-<li>Дать метке атрибут `for`, равный `id` соответствующего `input`:
-
-```html
-<!--+ autorun -->
-<table>
-  <tr>
-    <td>
-      <label for="agree">Согласен с правилами</label>
-    </td>
-    <td>
-      <input id="agree" type="checkbox">
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <label for="not-a-robot">Я не робот</label>
-    </td>
-    <td>
-      <input id="not-a-robot" type="checkbox">
-    </td>
-  </tr>
-</table>
 ```
 
-</li>
-<li>Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
+## Form elements
 
-```html
-<!--+ autorun  no-beautify -->
-<label>Кликни меня <input type="checkbox"></label>
-```
+Let's talk about form controls, pay attention to their specific features.
 
-</li>
-</ol>
+### input and textarea
 
-## Элементы input и textarea
+Normally, we can access the value as `input.value` or `input.checked` for checkboxes.
 
-Для большинства типов `input` значение ставится/читается через свойство `value`.
+Like this:
 
 ```js
-input.value = "Новое значение";
-textarea.value = "Новый текст";
+input.value = "New value";
+textarea.value = "New text";
+
+input.checked = true; // for a checkbox or radio button
 ```
 
-[warn header="Не используйте `textarea.innerHTML`"]
-Для элементов `textarea` также доступно свойство `innerHTML`, но лучше им не пользоваться: оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
-[/warn]
+```warn header="Use `textarea.value`, not `textarea.innerHTML`"
+Please note that we should never use `textarea.innerHTML`: it stores only the HTML that was initially on the page, not the current value.
+```
 
-Исключения -- `input type="checkbox"` и `input type="radio"`
+### select and option
 
-**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
+A `<select>` element has 3 important properties:
 
-```js
-if (input.checked) {
-  alert( "Чекбокс выбран" );
-}
-```
+1. `select.options` -- the collection of `<option>` elements,
+2. `select.value` -- the value of the chosen option,
+3. `select.selectedIndex` -- the number of the selected option.
 
-## Элементы select и option
+So we have three ways to set the value of a `<select>`:
 
-Селект в JavaScript можно установить двумя путями: поставив значение  `select.value`, либо установив свойство `select.selectedIndex` в номер нужной опции.:
+1. Find the needed `<option>` and set `option.selected` to `true`.
+2. Set `select.value` to the value.
+3. Set `select.selectedIndex` to the number of the option.
 
-```js
-select.selectedIndex = 0; // первая опция
-```
+The first way is the most obvious, but `(2)` and `(3)` are usually more convenient.
 
-Установка `selectedIndex = -1` очистит выбор.
+Here is an example:
 
-**Список элементов-опций доступен через `select.options`.**
+```html run
+<select id="select">
+  <option value="apple">Apple</option>
+  <option value="pear">Pear</option>
+  <option value="banana">Banana</option>
+</select>
 
-Если `select` допускает множественный выбор (атрибут `multiple`), то значения можно получить/установить, сделав цикл по `select.options`. При этом выбранные опции будут иметь свойство `option.selected = true`.
+<script>
+  // all three lines do the same thing
+  select.options[2].selected = true;
+  select.selectedIndex = 2;
+  select.value = 'banana';
+</script>
+```
 
-Пример:
+Unlike most other controls, `<select multiple>` allows multiple choice. In that case we need to walk over `select.options` to get all selected values.
 
-```html
-<!--+ run -->
-<form name="form">
-  <select name="genre" *!*multiple*/!*>
-    <option value="blues" selected>Мягкий блюз</option>
-    <option value="rock" selected>Жёсткий рок</option>
-    <option value="classic">Классика</option>
-  </select>
-</form>
+Like this:
+
+```html run
+<select id="select" *!*multiple*/!*>
+  <option value="blues" selected>Blues</option>
+  <option value="rock" selected>Rock</option>
+  <option value="classic">Classic</option>
+</select>
 
 <script>
-var form = document.forms[0];
-var select = form.elements.genre;
+  // get all selected values from multi-select
+  let selected = Array.from(select.options)
+    .filter(option => option.selected)
+    .map(option => option.value);
 
-for (var i = 0; i < select.options.length; i++) {
-  var option = select.options[i];
-*!*
-  if(option.selected) {
-    alert( option.value );
-  }
-*/!*
-}
+  alert(selected); // blues,rock  
 </script>
 ```
 
-Спецификация: [the select element](https://html.spec.whatwg.org/multipage/forms.html#the-select-element).
+The full specification of the `<select>` element is available at <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
 
-[smart header="`new Option`"]
-В стандарте [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
+### new Option
+
+In the specification of [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
 ```
 
-Параметры:
-<ul>
-<li>`text` -- содержимое,</li>
-<li>`value` -- значение,</li>
-<li>`defaultSelected` и `selected` поставьте в `true`, чтобы сделать элемент выбранным.</li>
-</ul>
+Parameters:
+
+- `text` -- the text inside the option,
+- `value` -- the option value,
+- `defaultSelected` -- if `true`, then `selected` attribute is created,
+- `selected` -- if `true`, then the option is selected.
 
-Его можно использовать вместо `document.createElement('option')`, например:
+For instance:
 
 ```js
-var option = new Option("Текст", "value");
-// создаст <option value="value">Текст</option>
+let option = new Option("Text", "value");
+// creates <option value="value">Text</option>
 ```
 
-Такой же элемент, но выбранный:
+The same element selected:
 
 ```js
-var option = new Option("Текст", "value", true, true);
+let option = new Option("Text", "value", true, true);
 ```
 
-[/smart]
+```smart header="Additional properties of `<option>`"
+Option elements have additional properties:
 
-[smart header="Дополнительные свойства `option`"]
+`selected`
+: Is the option selected.
 
-У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element)):
+`index`
+: The number of the option among the others in its `<select>`.
 
-<dl>
-<dt>`selected`</dt>
-<dd>выбрана ли опция</dd>
-<dt>`index`</dt>
-<dd>номер опции в списке селекта</dd>
-<dt>`text`</dt>
-<dd>Текстовое содержимое опции (то, что видит посетитель).</dd>
-</dl>
+`text`
+: Text content of the option (seen by what the visitor).
+```
 
-[/smart]
+## Summary
 
+Form navigation:
 
-## Итого
+`document.forms`
+: A form is available as `document.forms[name/index]`.
 
-Свойства для навигации по формам:
+`form.elements`  
+: Form elements are available as `form.elements[name/index]`, or can use just `form[name/index]`. The `elements` property also works for `<fieldset>`.
 
-<dl>
-<dt>`document.forms`</dt>
-<dd>Форму можно получить как `document.forms[name/index]`.</dd>
-<dt>`form.elements`</dt>
-<dd>Элементы в форме: `form.elements[name/index]`. Каждый элемент имеет ссылку на форму в свойстве `form`. Свойство `elements` также есть у `<fieldset>`.</dd>
-</dl>
+`element.form`
+: Elements reference their form in the `form` property.
 
-Значение элементов читается/ставится через `value` или `checked`.
+Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
 
-Для элемента `select` можно задать опцию по номеру через `select.selectedIndex` и перебрать опции через `select.options`. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство `option.selected = true`.
+For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`. The full specification of this and other elements is at <https://html.spec.whatwg.org/multipage/forms.html>.
 
+These are the basics to start working with forms. In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.
diff --git a/2-ui/4-forms-controls/1-form-elements/form-navigation.png b/2-ui/4-forms-controls/1-form-elements/form-navigation.png
new file mode 100644
index 00000000..5d00632b
Binary files /dev/null and b/2-ui/4-forms-controls/1-form-elements/form-navigation.png differ
diff --git a/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png b/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png
new file mode 100644
index 00000000..1997b2b3
Binary files /dev/null and b/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png differ
diff --git a/2-ui/4-forms-controls/1-form-elements/form.png b/2-ui/4-forms-controls/1-form-elements/form.png
deleted file mode 100755
index a76734bf..00000000
Binary files a/2-ui/4-forms-controls/1-form-elements/form.png and /dev/null differ
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md
deleted file mode 100644
index cfb7ad1e..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md
+++ /dev/null
@@ -1,3 +0,0 @@
-В данном случае достаточно событий `input.focus/input.blur`.
-
-Если бы мы хотели реализовать это на уровне документа, то применили бы делегирование и события `focusin/focusout` (эмуляцию для firefox), так как обычные `focus/blur` не всплывают.
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html
deleted file mode 100755
index 208bc604..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <style>
-    .placeholder {
-      color: blue;
-      font-family: Georgia;
-    }
-    
-    .placeholder-tooltip {
-      color: blue;
-      font-family: Georgia;
-      position: fixed;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>Красивый placeholder:</p>
-
-  <input type="email" data-placeholder="E-mail">
-
-
-  <script>
-    var input = document.querySelector('[data-placeholder]');
-
-    showPlaceholder(input);
-
-    // Показать placeholder внутри input
-    // Также можно сделать это при помощи вёрстки, отдельным элементом
-    function showPlaceholder(input) {
-      input.classList.add('placeholder');
-      input.value = input.dataset.placeholder;
-    }
-
-    // Показать подсказку над элементом (будет вместо placeholder)
-    function showTooltip(input) {
-      var tooltip = document.createElement('span');
-      tooltip.innerHTML = input.dataset.placeholder;
-      tooltip.className = 'placeholder-tooltip';
-      tooltip.style.fontSize = getComputedStyle(input).fontSize;
-      tooltip.style.left = input.getBoundingClientRect().left + 'px';
-      document.body.appendChild(tooltip);
-      tooltip.style.top = input.getBoundingClientRect().top - tooltip.offsetHeight - 4 + 'px';
-      input.tooltip = tooltip;
-    }
-
-    input.onfocus = function() {
-      if (input.classList.contains('placeholder')) {
-        input.classList.remove('placeholder');
-        input.value = '';
-      }
-
-      showTooltip(input);
-    };
-
-    input.onblur = function() {
-      document.body.removeChild(input.tooltip);
-      delete input.tooltip;
-
-      // показываем placeholder обратно, если input пуст
-      if (input.value == '') {
-        showPlaceholder(input);
-      }
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html
deleted file mode 100755
index d03c3101..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <style>
-    /* стиль для input с плейсхолдером */
-    
-    .placeholder {
-      color: blue;
-      font-family: Georgia;
-    }
-    /* стиль для подсказки над элементом (вместо плейсхолдера при фокусировке) */
-    
-    .placeholder-tooltip {
-      color: blue;
-      font-family: Georgia;
-      position: fixed;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>Красивый placeholder:</p>
-
-  <input type="email" data-placeholder="E-mail">
-
-
-  <script>
-    var input = document.querySelector('[data-placeholder]');
-
-    showPlaceholder(input);
-
-    // Показать placeholder внутри input
-    // Также можно сделать это при помощи вёрстки, отдельным элементом
-    function showPlaceholder(input) {
-      input.classList.add('placeholder');
-      input.value = input.dataset.placeholder;
-    }
-
-    // ...ваш код для input...
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md
deleted file mode 100644
index 96c90b07..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Улучшенный плейсхолдер
-
-[importance 5]
-
-Реализуйте более удобный плейсхолдер-подсказку на JavaScript через атрибут `data-placeholder`.
-
-Правила работы плейсхолдера:
-<ul>
-<li>Элемент изначально содержит плейсхолдер. Специальный класс `placeholder` придает ему синий цвет.</li>
-<li>При фокусировке плейсхолдер показывается уже над полем, становясь "подсказкой".</li>
-<li>При снятии фокуса, подсказка убирается, если поле пустое -- плейсхолдер возвращается в него.</li>
-</ul>
-
-Демо:
-
-[iframe src="solution" height=100]
-
-В этой задаче плейсхолдер должен работать на одном конкретном input. Подумайте, если input много, как здесь применить делегирование?
-
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md
deleted file mode 100644
index 8d12a516..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-
-Нам нужно ловить `onclick` на мышонке и в `onkeydown` на нём смотреть коды символов. При скан-кодах стрелок двигать мышонка через `position:absolute` или `position:fixed`.
-
-Скан-коды для клавиш стрелок можно узнать, нажимая на них на [тестовом стенде](#keyboard-test-stand). Вот они: 37-38-39-40 (влево-вверх-вправо-вниз).
-
-Проблема может возникнуть одна -- `keydown` не возникает на элементе, если на нём нет фокуса.
-
-Чтобы фокус был -- нужно добавить мышонку атрибут `tabindex` через JS или в HTML.
-
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html
deleted file mode 100755
index ac1a3259..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #mouse {
-      display: inline-block;
-      cursor: pointer;
-      margin: 0;
-    }
-    
-    #mouse:focus {
-      outline: 1px dashed black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.</p>
-
-  <pre id="mouse" tabindex="0">
- _   _
-(q\_/p)
- /. .\
-=\_t_/=   __
- /   \   (
-((   ))   )
-/\) (/\  /
-\  Y  /-'
- nn^nn
-</pre>
-
-
-  <script>
-    document.getElementById('mouse').onclick = function() {
-      this.style.left = this.getBoundingClientRect().left + 'px';
-      this.style.top = this.getBoundingClientRect().top + 'px';
-
-      this.style.position = 'fixed';
-    };
-
-
-    document.getElementById('mouse').onkeydown = function(e) {
-      switch (e.keyCode) {
-        case 37: // влево
-          this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
-          return false;
-        case 38: // вверх
-          this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
-          return false;
-        case 39: // вправо
-          this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
-          return false;
-        case 40: // вниз
-          this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
-          return false;
-      }
-    };
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html
deleted file mode 100755
index 348d0a1d..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    #mouse {
-      display: inline-block;
-      cursor: pointer;
-      margin: 0;
-    }
-    
-    #mouse:focus {
-      outline: 1px dashed black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.</p>
-
-  <pre id="mouse">
- _   _
-(q\_/p)
- /. .\
-=\_t_/=   __
- /   \   (
-((   ))   )
-/\) (/\  /
-\  Y  /-'
- nn^nn
-</pre>
-
-
-  <script>
-    // ваш код
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md
deleted file mode 100644
index b7bdddd8..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Мышонок на "клавиатурном" приводе
-
-[importance 4]
-
-Кликните по мышонку. Затем нажимайте клавиши со стрелками, и он будет двигаться.
-
-[demo src="solution"]
-
-В этой задаче запрещается ставить обработчики куда-либо, кроме элемента `#mouse`. 
-
-Можно изменять атрибуты и классы в HTML.
diff --git a/archive/widget-tasks/1-date-selector/solution.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.md
similarity index 100%
rename from archive/widget-tasks/1-date-selector/solution.md
rename to 2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.md
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html
new file mode 100644
index 00000000..c0dd3080
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link type="text/css" rel="stylesheet" href="my.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <ul>
+    <li>Click the div to edit.</li>
+    <li>Enter or blur saves the result.</li>
+  </ul>
+
+  HTML is allowed.
+
+  <div id="view" class="view">Text</div>
+
+  <script>
+    let area = null;
+    let view = document.getElementById('view');
+
+    view.onclick = function() {
+      editStart();
+    };
+
+    function editStart() {
+      area = document.createElement('textarea');
+      area.className = 'edit';
+      area.value = view.innerHTML;
+
+      area.onkeydown = function(event) {
+        if (event.key == 'Enter') {
+          this.blur();
+        }
+      };
+
+      area.onblur = function() {
+        editEnd();
+      };
+
+      view.replaceWith(area);
+      area.focus();
+    }
+
+    function editEnd() {
+      view.innerHTML = area.value;
+      area.replaceWith(view);
+    }
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css
new file mode 100644
index 00000000..10e9ddc2
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css
@@ -0,0 +1,25 @@
+.view,
+.edit {
+  height: 150px;
+  width: 400px;
+  font-family: arial;
+  font-size: 14px;
+  display: block;
+}
+
+.view {
+  /* padding + border = 3px */
+  padding: 2px;
+  border: 1px solid black;
+}
+
+.edit {
+  /* replace padding with border (still 3px not to shift the contents) */
+  border: 3px solid blue;
+  padding: 0px;
+}
+
+.edit:focus {
+  outline: none;
+  /* remove focus border in Safari */
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html
new file mode 100644
index 00000000..b21432e8
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <link type="text/css" rel="stylesheet" href="my.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <ul>
+    <li>Click the div to edit.</li>
+    <li>Enter or blur saves the result.</li>
+  </ul>
+
+  HTML is allowed.
+
+  <div id="view" class="view">Text</div>
+
+  <script>
+    // ...your code...
+    // Note: <textarea> should have class="edit"
+    // my.css has styles to make it the same size as div
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css
new file mode 100644
index 00000000..10e9ddc2
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css
@@ -0,0 +1,25 @@
+.view,
+.edit {
+  height: 150px;
+  width: 400px;
+  font-family: arial;
+  font-size: 14px;
+  display: block;
+}
+
+.view {
+  /* padding + border = 3px */
+  padding: 2px;
+  border: 1px solid black;
+}
+
+.edit {
+  /* replace padding with border (still 3px not to shift the contents) */
+  border: 3px solid blue;
+  padding: 0px;
+}
+
+.edit:focus {
+  outline: none;
+  /* remove focus border in Safari */
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
new file mode 100644
index 00000000..2a5a6a9b
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Editable div
+
+Create a `<div>` that turns into `<textarea>` when clicked.
+
+The textarea allows to edit the HTML in the `<div>`.
+
+When the user presses `key:Enter` or it looses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
+
+[demo src="solution"]
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
deleted file mode 100644
index 71bccf8b..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# CSS для решения
-
-Как видно из исходного кода, `#view` -- это `<div>`, который будет содержать результат, а `#area` - это редактируемое текстовое поле.
-
-Так как мы преобразуем `<div>` в `<textarea>` и обратно, нам нужно сделать их практически одинаковыми с виду:
-
-```css
-#view,
-#area {
-  height: 150px;
-  width: 400px;
-  font-family: arial;
-  font-size: 14px;
-}
-```
-
-Текстовое поле нужно как-то выделить. Можно добавить границу, но тогда изменится блок: он увеличится в размерах и немного съедет текст.
-
-Для того, чтобы сделать размер `#area` таким же, как и `#view`, добавим поля(padding):
-
-```css
-#view {
-  /* padding + border = 3px */
-  
-  padding: 2px;
-  border: 1px solid black;
-}
-```
-
-CSS для `#area` заменяет поля границами:
-
-```css
-#area {
-  border: 3px groove blue;
-  padding: 0px;
-  display: none;
-}
-```
-
-По умолчанию, текстовое поле скрыто. Кстати, этот код убирает дополнительную рамку в ряде браузеров, которая появляется вокруг поля, когда на него попадает фокус:
-
-```css
-/*+ no-beautify */
-#area:focus { 
-  outline: none; /* убирает рамку при фокусе */
-}
-```
-
-# Горячие клавиши
-
-Чтобы отследить горячие клавиши, нам нужны их скан-коды, а не символы. Это важно, потому что горячие клавиши должны работать независимо от языковой раскладки. Поэтому, мы будем использовать <code>keydown</code>:
-
-```js
-document.onkeydown = function(e) {
-  if (e.keyCode == 27) { // escape
-    cancel();
-    return false;
-  }
-
-  if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
-    edit();
-    return false;
-  }
-
-  if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
-    save();
-    return false;
-  }
-};
-```
-
-В примере выше, `offsetHeight` используется для того, чтобы проверить, отображается элемент или нет. Это очень надежный способ для всех элементов, кроме `<tr>` в некоторых старых браузерах.
-
-В отличие от простой проверки `display=='none'`, этот способ работает с элементом, спрятанным с помощью стилей, а так же для элементов, у которых скрыты родители.
-
-# Редактирование
-
-Следующие функции переключают режимы. HTML-код разрешен, поэтому возможна прямая трансформация в `<textarea>` и обратно.
-
-```js
-function edit() {
-  view.style.display = 'none';
-  area.value = view.innerHTML;
-  area.style.display = 'block';
-  area.focus();
-}
-
-function save() {
-  area.style.display = 'none';
-  view.innerHTML = area.value;
-  view.style.display = 'block';
-}
-
-function cancel() {
-  area.style.display = 'none';
-  view.style.display = 'block';
-}
-```
-
-
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html
deleted file mode 100755
index 4eb1b14b..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link type="text/css" rel="stylesheet" href="my.css">
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <ul>
-    <li>Ctrl-E для начала редактирования.</li>
-    <li>Во время редактирования: Ctrl-S для сохранения, Esc для отмены.</li>
-  </ul>
-
-  HTML разрешён.
-
-  <textarea id="area"></textarea>
-  <div id="view">Текст</div>
-
-  <script>
-    document.onkeydown = function(e) {
-      if (e.keyCode == 27) { // escape
-        cancel();
-        return false;
-      }
-
-      if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
-        edit();
-        return false;
-      }
-
-      if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
-        save();
-        return false;
-      }
-    }
-
-    function edit() {
-      view.style.display = 'none';
-      area.value = view.innerHTML;
-      area.style.display = 'block';
-      area.focus();
-    }
-
-    function save() {
-      area.style.display = 'none';
-      view.innerHTML = area.value;
-      view.style.display = 'block';
-    }
-
-    function cancel() {
-      area.style.display = 'none';
-      view.style.display = 'block';
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css
deleted file mode 100755
index 06993029..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css
+++ /dev/null
@@ -1,27 +0,0 @@
-#view,
-#area {
-  height: 150px;
-  width: 400px;
-  font-family: arial;
-  font-size: 14px;
-}
-
-#view {
-  /* padding + border = 3px */
-  
-  padding: 2px;
-  border: 1px solid black;
-}
-
-#area {
-  display: none;
-  /* replace padding with border (still 3px not to shift the contents) */
-  
-  border: 3px groove blue;
-  padding: 0px;
-}
-
-#area:focus {
-  outline: none;
-  /* remove focus border in Safari */
-}
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html
deleted file mode 100755
index 1731e944..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link type="text/css" rel="stylesheet" href="my.css">
-</head>
-
-<body>
-
-  <ul>
-    <li>Ctrl-E to start editing.</li>
-    <li>While editing: Ctrl-S to save, Esc to cancel.</li>
-  </ul>
-
-
-  <textarea id="area"></textarea>
-  <div id="view">Text</div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css
deleted file mode 100755
index 06993029..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css
+++ /dev/null
@@ -1,27 +0,0 @@
-#view,
-#area {
-  height: 150px;
-  width: 400px;
-  font-family: arial;
-  font-size: 14px;
-}
-
-#view {
-  /* padding + border = 3px */
-  
-  padding: 2px;
-  border: 1px solid black;
-}
-
-#area {
-  display: none;
-  /* replace padding with border (still 3px not to shift the contents) */
-  
-  border: 3px groove blue;
-  padding: 0px;
-}
-
-#area:focus {
-  outline: none;
-  /* remove focus border in Safari */
-}
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md
deleted file mode 100644
index 2a0a400e..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Горячие клавиши
-
-[importance 5]
-
-Создайте `<div>`, который при нажатии [key Ctrl+E] превращается в `<textarea>`.
-
-Изменения, внесенные в поле, можно сохранить обратно в `<div>` сочетанием клавиш [key Ctrl+S], при этом `<div>` получит в виде HTML содержимое `<textarea>`. 
-
-Если же нажать [key Esc], то `<textarea>` снова превращается в `<div>`, изменения не сохраняются.
-
-[demo src="solution"].
-
-
-
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
index 1b00ce7b..b5ae45a6 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
@@ -1,7 +1,5 @@
-<ol>
-<li>При клике -- заменяем `innerHTML` ячейки на `<textarea>` с размерами "под ячейку", без рамки.</li>
-<li>В `textarea.value` присваиваем содержимое ячейки.</li>
-<li>Фокусируем посетителя на ячейке вызовом `focus()`.</li>
-<li>Показываем кнопки OK/CANCEL под ячейкой.</li>
-</ol>
 
+1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use JavaScript or CSS to set the right size.
+2. Set `textarea.value` to `td.innerHTML`.
+3. Focus on the textarea.
+4. Show buttons OK/CANCEL under the cell, handle clicks on them.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
index aa6c03fe..d9a65736 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
index 376d83f7..08f23389 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
index 49cebc33..38db0fbd 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
@@ -1,32 +1,25 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-var editingTd;
+let editingTd;
 
 table.onclick = function(event) {
 
-  var target = event.target;
+  // 3 possible targets
+  let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
-  while (target != table) {
-    if (target.className == 'edit-cancel') {
-      finishTdEdit(editingTd.elem, false);
-      return;
-    }
+  if (!table.contains(target)) return;
 
-    if (target.className == 'edit-ok') {
-      finishTdEdit(editingTd.elem, true);
-      return;
-    }
+  if (target.className == 'edit-cancel') {
+    finishTdEdit(editingTd.elem, false);
+  } else if (target.className == 'edit-ok') {
+    finishTdEdit(editingTd.elem, true);
+  } else if (target.nodeName == 'TD') {
+    if (editingTd) return; // already editing
 
-    if (target.nodeName == 'TD') {
-      if (editingTd) return; // already editing
-
-      makeTdEditable(target);
-      return;
-    }
-
-    target = target.parentNode;
+    makeTdEditable(target);
   }
-}
+
+};
 
 function makeTdEditable(td) {
   editingTd = {
@@ -34,9 +27,9 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td, not textarea! the rest of rules will cascade
+  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
 
-  var textArea = document.createElement('textarea');
+  let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
   textArea.style.height = td.clientHeight + 'px';
   textArea.className = 'edit-area';
@@ -57,6 +50,6 @@ function finishTdEdit(td, isOk) {
   } else {
     td.innerHTML = editingTd.data;
   }
-  td.classList.remove('edit-td'); // remove edit class
+  td.classList.remove('edit-td'); 
   editingTd = null;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
index aa6c03fe..d9a65736 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
index 376d83f7..08f23389 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
index 89ebd23a..e144e901 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
@@ -1 +1 @@
-/* ваши стили */
\ No newline at end of file
+/* your styles */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
index e4da643f..01571982 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
@@ -1,3 +1,3 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-/* ваш код */
\ No newline at end of file
+/* your code */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
index d82fef1c..2cccea02 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -1,16 +1,16 @@
-# Редактирование TD по клику
+importance: 5
 
-[importance 5]
+---
 
-Сделать ячейки таблицы `td` редактируемыми по клику.
+# Edit TD on click
 
-<ul>
-<li>При клике -- ячейка `<td>` превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.</li> 
-<li>В один момент может редактироваться одна ячейка.</li>
-<li>При редактировании под ячейкой появляются кнопки для приема и отмена редактирования, только клик на них заканчивает редактирование.</li>
-</ul>
+Make table cells editable on click.
 
-Демо:
+- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
+- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
+- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
+- The table may have many cells. Use event delegation.
 
-[iframe src="solution"]
+The demo:
 
+[iframe src="solution" height=400]
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
new file mode 100644
index 00000000..2c5c73cd
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
@@ -0,0 +1,6 @@
+
+We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then then `mouse.onkeydown` to handle arrow keys.
+
+The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
+
+P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html
new file mode 100644
index 00000000..d39bd41f
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #mouse {
+      display: inline-block;
+      cursor: pointer;
+      margin: 0;
+    }
+
+    #mouse:focus {
+      outline: 1px dashed black;
+    }
+  </style>
+</head>
+
+<body>
+
+  <p>Click on the mouse and move it with arrow keys.</p>
+
+  <pre id="mouse">
+ _   _
+(q\_/p)
+ /. .\
+=\_t_/=   __
+ /   \   (
+((   ))   )
+/\) (/\  /
+\  Y  /-'
+ nn^nn
+</pre>
+
+
+  <script>
+    mouse.tabIndex = 0;
+    
+    mouse.onclick = function() {
+      this.style.left = this.getBoundingClientRect().left + 'px';
+      this.style.top = this.getBoundingClientRect().top + 'px';
+
+      this.style.position = 'fixed';
+    };
+
+
+    mouse.onkeydown = function(e) {
+      switch (e.key) {
+        case 'ArrowLeft':
+          this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
+          return false;
+        case 'ArrowUp':
+          this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
+          return false;
+        case 'ArrowRight':
+          this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
+          return false;
+        case 'ArrowDown':
+          this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
+          return false;
+      }
+    };
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html
new file mode 100644
index 00000000..f6401167
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    #mouse {
+      display: inline-block;
+      cursor: pointer;
+      margin: 0;
+    }
+
+    #mouse:focus {
+      outline: 1px dashed black;
+    }
+  </style>
+</head>
+
+<body>
+
+  <p>Click on the mouse and move it with arrow keys.</p>
+
+  <pre id="mouse">
+ _   _
+(q\_/p)
+ /. .\
+=\_t_/=   __
+ /   \   (
+((   ))   )
+/\) (/\  /
+\  Y  /-'
+ nn^nn
+</pre>
+
+
+  <script>
+    // ...your code...
+  </script>
+
+</body>
+
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
new file mode 100644
index 00000000..fc48c21f
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -0,0 +1,12 @@
+importance: 4
+
+---
+
+# Keyboard-driven mouse
+
+Focus on the mouse. Then use arrow keys to move it:
+
+[demo src="solution"]
+
+P.S. Don't put event handlers anywhere except the `#mouse` element.
+P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md
deleted file mode 100644
index cd99950a..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Вёрстка
-
-Для вёрстки можно использовать отрицательный `margin` у текста с подсказкой.
-
-Решение в плане вёрстка есть в решении задачи [](/task/position-text-into-input).
-
-# Решение
-
-```js
-placeholder.onclick = function() {
-  input.focus();
-}
-
-// onfocus сработает и вызове input.focus() и при клике на input
-input.onfocus = function() {
-  if (placeholder.parentNode) {
-    placeholder.parentNode.removeChild(placeholder);
-  }
-}
-```
-
-[edit src="solution"]Открыть полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html
deleted file mode 100755
index 49a55483..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div>Добро пожаловать</div>
-  <input type="password" id="input">
-
-  <div id="placeholder">Скажи пароль, друг</div>
-
-  <div>.. и заходи</div>
-
-  <script>
-    var placeholder = document.getElementById('placeholder');
-    var input = document.getElementById('input');
-
-    placeholder.onclick = function() {
-      input.focus();
-    }
-
-    input.onfocus = function() {
-      placeholder.parentNode && placeholder.parentNode.removeChild(placeholder);
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/style.css b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/style.css
deleted file mode 100644
index 874aa521..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/style.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  font: 14px/14px Arial, sans-serif;
-}
-
-input {
-  font: 14px/14px Arial, sans-serif;
-  width: 12em;
-  padding: 0;
-  margin: 0;
-}
-
-#placeholder {
-  font: 14px/14px Arial, sans-serif;
-  position: absolute;
-  margin: -1.2em 0 0 0.2em;
-  color: red;
-}
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html
deleted file mode 100755
index 4f012080..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-
-  <div>Добро пожаловать</div>
-  <input type="password" id="input">
-
-  <div id="placeholder">Скажи пароль, друг</div>
-
-  <div>.. и заходи</div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/style.css b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/style.css
deleted file mode 100644
index 874aa521..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/style.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  font: 14px/14px Arial, sans-serif;
-}
-
-input {
-  font: 14px/14px Arial, sans-serif;
-  width: 12em;
-  padding: 0;
-  margin: 0;
-}
-
-#placeholder {
-  font: 14px/14px Arial, sans-serif;
-  position: absolute;
-  margin: -1.2em 0 0 0.2em;
-  color: red;
-}
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md
deleted file mode 100644
index f71e081f..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Красивый плейсхолдер для INPUT
-
-[importance 5]
-
-Создайте для `<input type="password">` красивый, стилизованный плейсхолдер, например (кликните на тексте):
-
-[iframe src="solution" height=90]
-
-
-
-При клике плейсхолдер просто исчезает и дальше не показывается.
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
deleted file mode 100644
index c9c69646..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Алгоритм
-
-JavaScript не имеет доступа к текущему состоянию [key CapsLock]. При загрузке страницы не известно, включён он или нет.
-
-Но мы можем догадаться о его состоянии из событий:
-<ol>
-<li>Проверив символ, полученный по `keypress`. Символ в верхнем регистре без нажатого [key Shift] означает, что включён [key CapsLock]. Аналогично, символ в нижнем регистре, но с [key Shift] говорят о включенном [key CapsLock]. Свойство `event.shiftKey` показывает, нажат ли [key Shift]. Так мы можем точно узнать, нажат ли [key CapsLock].</li>
-<li>Проверять `keydown`. Если нажат CapsLock (скан-код равен `20`), то переключить состояние, но лишь в том случае, когда оно уже известно. 
-Под Mac так делать не получится, поскольку клавиатурные события с CapsLock  [работают некорректно](#keyboard-events-order).</li>
-</ol>
-
-Имея состояние `CapsLock` в переменной, можно при фокусировке на `INPUT` выдавать предупреждение.
-
-Отслеживать оба события: `keydown` и `keypress` хорошо бы на уровне документа, чтобы уже на момент входа в поле ввода мы знали состояние CapsLock.
-
-Но при вводе сразу в нужный `input` событие `keypress` событие доплывёт до `document` и поставит состояние CapsLock *после того, как сработает на `input`*. Как это обойти -- подумайте сами.
-
-# Решение
-
-При загрузке страницы, когда еще ничего не набрано, мы ничего не знаем о состоянии [key CapsLock], поэтому оно равно `null`:
-
-```js
-var capsLockEnabled = null;
-```
-
-Когда нажата клавиша, мы можем попытаться проверить, совпадает ли регистр символа и состояние [key Shift]:
-
-```js
-document.onkeypress = function(e) {
-
-  var chr = getChar(e);
-  if (!chr) return; // специальная клавиша
-
-  if (chr.toLowerCase() == chr.toUpperCase()) {
-    // символ, который не имеет регистра, такой как пробел,
-    // мы не можем использовать для определения состояния CapsLock
-    return;
-  }
-
-  capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey);
-}
-```
-
-Когда пользователь нажимает [key CapsLock], мы должны изменить его текущее состояние. Но мы можем сделать это только если знаем, что был нажат [key CapsLock]. 
-
-Например, когда пользователь открыл страницу, мы не знаем, включен ли [key CapsLock]. Затем, мы получаем событие `keydown` для [key CapsLock]. Но мы все равно не знаем его состояния, был ли [key CapsLock] *выключен* или, наоборот, включен.
-
-```js
-if (navigator.platform.substr(0, 3) != 'Mac') { // событие для CapsLock глючит под Mac
-  document.onkeydown = function(e) {
-    if (e.keyCode == 20 && capsLockEnabled !== null) {
-      capsLockEnabled = !capsLockEnabled;
-    }
-  };
-}
-```
-
-Теперь поле. Задание состоит в том, чтобы предупредить пользователя о включенном CapsLock, чтобы уберечь его от неправильного ввода.
-
-<ol>
-<li>Для начала, когда пользователь сфокусировался на поле, мы должны вывести предупреждение о CapsLock, если он включен.</li>
-<li>Пользователь начинает ввод. Каждое событие `keypress` всплывает до обработчика `document.keypress`, который обновляет состояние `capsLockEnabled`. 
-
-Мы не можем использовать событие `input.onkeypress`, для отображения состояния пользователю, потому что оно сработает *до* `document.onkeypress` (из-за всплытия) и, следовательно, до того, как мы узнаем состояние [key CapsLock].
-
-Есть много способов решить эту проблему. Можно, например, назначить обработчик состояния CapsLock на  событие `input.onkeyup`. То есть, индикация будет с задержкой, но это несущественно.
-
-Альтернативное решение -- добавить на `input` такой же обработчик, как и на `document.onkeypress`.
-</li>
-<li>...И наконец, пользователь убирает фокус с поля. Предупреждение может быть видно, если [key CapsLock] включен, но так как пользователь уже ушел с поля, то нам нужно спрятать предупреждение.</li>
-</ol>
-
-Код проверки поля:
-
-```html
-<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()" />
-
-<div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>
-
-<script>
-  function checkCapsWarning() {
-    document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
-  }
-
-  function removeCapsWarning() {
-    document.getElementById('caps').style.display = 'none';
-  }
-</script>
-```
-
-[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html
deleted file mode 100755
index 5da5c931..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Введите текст(например, пароль) с нажатым CapsLock:
-  <input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()" />
-
-  <div style="display:none;color:red" id="capsIndicator">Внимание: нажат CapsLock!</div>
-
-
-  <script>
-    /**
-     * Текущее состояние CapsLock
-     *  - null : неизвестно
-     *  - true/false : CapsLock включен/выключен
-     */
-    var capsLockEnabled = null;
-
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-
-    if (navigator.platform.substr(0, 3) != 'Mac') { // событие для CapsLock глючит под Mac
-      document.onkeydown = function(e) {
-        if (e.keyCode == 20 && capsLockEnabled !== null) {
-          capsLockEnabled = !capsLockEnabled;
-        }
-      }
-    }
-
-    document.onkeypress = function(e) {
-      e = e || event;
-
-      var chr = getChar(e);
-      if (!chr) return // special key
-
-      if (chr.toLowerCase() == chr.toUpperCase()) {
-        // символ, не зависящий от регистра, например пробел
-        // не может быть использован для определения CapsLock
-        return;
-      }
-
-      capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey);
-    }
-
-
-    /**
-     * Проверить CapsLock
-     */
-    function checkCapsWarning() {
-      document.getElementById('capsIndicator').style.display = capsLockEnabled ? 'block' : 'none';
-    }
-
-    function removeCapsWarning() {
-      document.getElementById('capsIndicator').style.display = 'none';
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html
deleted file mode 100755
index e0b0add9..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-
-  Введите текст(например, пароль) с нажатым CapsLock:
-  <input type="text" />
-
-  <div style="display:none;color:red" id="capsIndicator">Внимание: нажат CapsLock!</div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md
deleted file mode 100644
index 63bc66b1..00000000
--- a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Поле, предупреждающее о включенном CapsLock
-
-[importance 3]
-
-Создайте поле, которое будет предупреждать пользователя, если включен [key CapsLock]. Выключение [key CapsLock] уберёт предупреждение. 
-
-Такое поле может помочь избежать ошибок при вводе пароля.
-
-[iframe height=80 src="solution"]
-
diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 57920ac6..4ac1993e 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -1,85 +1,83 @@
-# Фокусировка: focus/blur
+# Focusing: focus/blur
 
-Говорят, что элемент "получает фокус", когда посетитель фокусируется на нём. Обычно фокусировка автоматически происходит при нажатии на элементе мышкой, но также можно перейти на нужный элемент клавиатурой -- через клавишу [key Tab], нажатие пальцем на планшете и так далее.
+An element receives a focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus into an element by default when a page loads and other means of getting a focus.
 
-Момент получения фокуса и потери очень важен. 
+Focusing generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize or load something.
 
-При получении фокуса мы можем подгрузить данные для автодополнения, начать отслеживать изменения. При потере -- проверить данные, которые ввёл посетитель. 
+The moment of loosing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.
 
-Кроме того, иногда полезно "вручную", из JavaScript перевести фокус на нужный элемент, например, на поле в динамически созданной форме.
+Loosing the focus generally means: "the data has been entered", so we can run the code to check it or even to save it to the server and so on.
+
+There are important peculiarities when working with focus events. We'll do the best to cover them here.
 
 [cut]
-## События focus/blur
 
-Событие `focus` вызывается тогда, когда пользователь фокусируется на элементе, а  `blur` -- когда фокус исчезает, например посетитель кликает на другом месте экрана.
+## Events focus/blur
 
-Давайте сразу посмотрим на них в деле, используем для проверки ("валидации") введённых в форму значений.
+The `focus` event is called on focusing, and `blur` -- when the element loooses the focus.
 
-В примере ниже:
-<ul>
-<li>Обработчик `onblur` проверяет, что в поле введено число, если нет -- показывает ошибку.</li>
-<li>Обработчик `onfocus`, если текущее состояние поля ввода -- "ошибка" -- скрывает её (потом при `onblur` будет повторная проверка).</li>
-</ul>
+Let's use them for validation of an input field.
 
-В примере ниже, если набрать что-нибудь в поле "возраст" и завершить ввод, нажав [key Tab] или кликнув в другое место страницы, то введённое значение будет автоматически проверено:
+In the example below:
 
-```html
-<!--+ run autorun height=60 -->
-<style> .error { border-color: red; } </style>
+- The `blur` handler checks if the field the email is entered, and if not -- shows an error.
+- The `focus` handler hides the error message (on `blur` it will be checked again):
 
-Введите ваш возраст: <input type="text" id="input">
+```html run autorun height=60
+<style>
+  .invalid { border-color: red; }
+  #error { color: red }
+</style>
+
+Your email please: <input type="email" id="input">
 
 <div id="error"></div>
 
 <script>
 *!*input.onblur*/!* = function() {
-  if (isNaN(this.value)) { // введено не число
-    // показать ошибку
-    this.className = "error";
-    error.innerHTML = 'Вы ввели не число. Исправьте, пожалуйста.'
+  if (!input.value.includes('@')) { // not email
+    input.classList.add('invalid');
+    error.innerHTML = 'Please enter a correct email.'
   }
 };
 
-*!*input.onfocus*/!* = function() { 
-  if (this.className == 'error') { // сбросить состояние "ошибка", если оно есть 
-    this.className = "";
+*!*input.onfocus*/!* = function() {
+  if (this.classList.contains('invalid')) {
+    // remove the "error" indication, because the user wants to re-enter something
+    this.classList.remove('invalid');
     error.innerHTML = "";
   }
 };
 </script>
 ```
 
-## Методы focus/blur
+Modern HTML allows to do many validations using input attributes: `required`, `pattern` and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value on the server if it's correct.
+
 
-Методы с теми же названиями переводят/уводят фокус с элемента.
+## Methods focus/blur
 
-Для примера модифицируем пример выше, чтобы при неверном вводе посетитель просто не мог уйти с элемента:
+Methods `elem.focus()` and `elem.blur()` set/unset the focus on the element.
 
-```html
-<!--+ run autorun height=80 -->
+For instance, let's make the visitor unable to leave the input if the value is invalid:
+
+```html run autorun height=80
 <style>
   .error {
     background: red;
   }
 </style>
 
-<div>Возраст:
-  <input type="text" id="age">
-</div>
-
-<div>Имя:
-  <input type="text">
-</div>
+Your email please: <input type="email" id="input">
 
 <script>
-  age.onblur = function() {
-    if (isNaN(this.value)) { // введено не число
-      // показать ошибку
+  input.onblur = function() {
+    if (!this.value.includes('@')) { // not email
+      // show the error
       this.classList.add("error");
 *!*
-      //... и вернуть фокус обратно
-      age.focus();
-*/!* 
+      // ...and put the focus back
+      input.focus();
+*/!*
     } else {
       this.classList.remove("error");
     }
@@ -87,254 +85,138 @@
 </script>
 ```
 
-Этот пример работает во всех браузерах, кроме Firefox ([ошибка](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
-
-
-Если ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой `<input>`, то обработчик `onblur` вернёт фокус обратно.
-
-Обратим внимание -- если из `onblur` сделать `event.preventDefault()`, то такого же эффекта не будет, потому что `onblur` срабатывает уже *после* того, как элемент потерял фокус.
-
-
-## HTML5 и CSS3 вместо focus/blur
-
-Прежде чем переходить к более сложным примерам, использующим JavaScript, мы рассмотрим три примера, когда его использовать не надо, а достаточно современного HTML/CSS.
-
-### Подсветка при фокусировке
-
-Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`:
-
-```html
-<!--+ autorun height=100 -->
-<style> 
-*!*input:focus*/!* { 
-  background: #FA6; 
-  outline: none;  /* убрать рамку */
-} 
-</style>
-<input type="text"> 
-
-<p>Селектор :focus выделит элемент при фокусировке на нем и уберёт рамку, которой браузер выделяет этот элемент по умолчанию.</p>
-```
-
-В IE (включая более старые) скрыть фокус также может установка специального атрибута [hideFocus](http://msdn.microsoft.com/en-us/library/ie/ms533783.aspx).
+It works in all browsers except Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
 
-### Автофокус
+If we enter something into the input and then try to use `key:Tab` or click away from the `<input>`, then `onblur` returns the focus back.
 
-При загрузке страницы, если на ней существует элемент с атрибутом `autofocus` -- браузер автоматически фокусируется на этом элементе. Работает во всех браузерах, кроме IE9-.
+Please note that we can't "prevent loosing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus.
 
-```html
-<!--+ run link -->
-<input type="text" name="search" *!*autofocus*/!*>
-```
+```warn header="JavaScript-initiated focus loss"
+A focus loss can occur for many reasons.
 
-Если нужны старые IE, то же самое может сделать JavaScript:
+One of them is when the visitor clicks somewhere else. But also JavaScript itself may cause it, for instance:
 
-```html
-<input type="text" name="search">
-<script>
-  document.getElementsByName('search')[0].focus();
-</script>
-```
-
-Как правило, этот атрибут используется при изначальной загрузке, для страниц поиска и так далее, где главный элемент очевиден.
-
-### Плейсхолдер
-
-*Плейсхолдер* -- это значение-подсказка внутри `INPUT`, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст.
+- An `alert` moves focus to itself, so it causes the focus loss at the element (`blur` event), and when the `alert` is dismissed, the focus comes back (`focus` event).
+- If an element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn't return.
 
-Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`:
+These features sometimes cause `focus/blur` handlers to misbehave -- to trigger when they are not needed.
 
-```html
-<!--+ autorun height=80 -->
-<input type="text" placeholder="E-mail">
+The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should evade causing it by ourselves.
 ```
+## Allow focusing on any element: tabindex
 
-В некоторых браузерах этот текст можно стилизовать:
+By default many elements do not support focusing.
 
-```html
-<!--+ autorun height=80 -->
-<style>
-.my*!*::-webkit-input-placeholder*/!* {
-  color: red;
-  font-style: italic;
-}
-.my*!*::-moz-input-placeholder*/!* {
-  color: red;
-  font-style: italic;
-}
-.my*!*::-ms-input-placeholder*/!* {
-  color: red;
-  font-style: italic;
-}
-</style>
+The list varies between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `<button>`, `<input>`, `<select>`, `<a>` and so on.
 
-<input class="my" type="text" placeholder="E-mail"> 
-Стилизованный плейсхолдер
-```
+From the other hand, elements that exist to format something like `<div>`, `<span>`, `<table>` -- are unfocusable by default. The method `elem.focus()` doesn't work on them, and `focus/blur` events are never triggered.
 
-## Разрешаем фокус на любом элементе: tabindex
+This can be changed using HTML-attribute `tabindex`.
 
-По умолчанию не все элементы поддерживают фокусировку.
+The purpose of this attribute is to specify the order number of the element when `key:Tab` is used to switch between them.
 
-Перечень элементов немного рознится от браузера к браузеру, например, список для IE описан <a href="http://msdn.microsoft.com/en-us/library/ms536934.aspx">в MSDN</a>, одно лишь верно всегда -- заведомо поддерживают `focus/blur` те элементы, c которыми посетитель может взаимодействовать: `<button>`, `<input>`, `<select>`, `<a>` и т.д.
+That is: if we have two elements, the first has `tabindex="1"`, and the second has `tabindex="2"`, then pressing `key:Tab` while in the first element -- moves us to the second one.
 
-С другой стороны, на элементах для форматирования, таких как `<div>`, `<span>`, `<table>` -- по умолчанию сфокусироваться нельзя. Впрочем, существует способ включить фокусировку и для них.
+There are two special values:
 
-В HTML есть атрибут `tabindex`. 
+- `tabindex="0"` makes the element the last one.
+- `tabindex="-1"` means that `key:Tab` should ignore that element.
 
-Его основной смысл -- это указать номер элемента при переборе клавишей [key Tab].
+**Any element supports focusing if it has `tabindex`.**
 
-То есть, если есть два элемента, первый имеет `tabindex="1"`, а второй `tabindex="2"`, то нажатие [key Tab] при фокусе на первом элементе -- переведёт его на второй.
+For instance, here's a list. Click the first item and press `key:Tab`:
 
-Исключением являются специальные значения:
+```html autorun no-beautify
+Click the first item and press Tab. Keep track of the order. Please note that many subsequent Tabs can move the focus out of the iframe with the example.
 <ul>
-<li>`tabindex="0"` делает элемент всегда последним.</li>
-<li>`tabindex="-1"` означает, что клавиша [key Tab] будет элемент игнорировать.</li>
+  <li tabindex="1">One</li>
+  <li tabindex="0">Zero</li>
+  <li tabindex="2">Two</li>
+  <li tabindex="-1">Minus one</li>
 </ul>
 
-**Любой элемент поддерживает фокусировку, если у него есть `tabindex`.**
-
-В примере ниже есть список элементов. Кликните на любой из них и нажмите "tab".
-
-```html
-<!--+ autorun  no-beautify -->
-Кликните на первый элемент списка и нажмите Tab. Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.
-<ul>
-  <li tabindex="1">Один</li>
-  <li tabindex="0">Ноль</li>
-  <li tabindex="2">Два</li>
-  <li tabindex="-1">Минус один</li>
-</ul>
-
-<style> 
+<style>
   li { cursor: pointer; }
-  :focus { outline: 1px dashed green; } 
+  :focus { outline: 1px dashed green; }
 </style>
 ```
 
-Порядок перемещения по клавише "Tab" в примере выше должен быть таким: `1 - 2 - 0` (ноль всегда последний). Продвинутые пользователи частенько используют "Tab" для навигации, и ваше хорошее отношение к ним будет вознаграждено :)
+The order is like this: `1 - 2 - 0` (zero is always the last). Normally, `<li>` does not support focusing, but `tabindex` full enables it, along with events and styling with `:focus`.
 
-Обычно `<li>` не поддерживает фокусировку, но здесь есть `tabindex`.
+```smart header="`elem.tabIndex` works too"
+We can add `tabindex` from JavaScript by using the `elem.tabIndex` property. That has the same effect.
+```
 
-## Делегирование с focus/blur 
+## Delegation: focusin/focusout
 
-События `focus` и `blur` не всплывают.
+Events `focus` and `blur` do not bubble.
 
-Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась:
+For instance, we can't put `onfocus` on the `<form>` to highlight it, like this:
 
-```html
-<!--+ autorun height=100 -->
-<!-- при фокусировке на форме ставим ей класс -->
+```html autorun height=80
+<!-- on focusing in the form -- add the class -->
 <form *!*onfocus="this.className='focused'"*/!*>
-  <input type="text" name="name" value="Ваше имя">
-  <input type="text" name="surname" value="Ваша фамилия">
+  <input type="text" name="name" value="Name">
+  <input type="text" name="surname" value="Surname">
 </form>
 
 <style> .focused { outline: 1px solid red; } </style>
 ```
 
-Пример выше не работает, т.к. при фокусировке на любом `<input>` событие `focus` срабатывает только на этом элементе и не всплывает наверх. Так что обработчик `onfocus` на форме никогда не сработает.
+The example above doesn't work, because when user focuses on an `<input>`, the `focus` event triggers on that input only. It doesn't bubble up. So `form.onfocus` never triggers.
 
-Что делать? Неужели мы должны присваивать обработчик каждому полю `<input>`?
+There are two solutions.
 
-**Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.**
+First, there's a funny historical feature: `focus/blur` do not bubble up, but propagate down on the capturing phase.
 
-Вот так сработает:
+This will work:
 
-```html
-<!--+ autorun height=100 -->
+```html autorun height=80
 <form id="form">
-  <input type="text" name="name" value="Ваше имя">
-  <input type="text" name="surname" value="Ваша фамилия">
+  <input type="text" name="name" value="Name">
+  <input type="text" name="surname" value="Surname">
 </form>
 
-<style>
-  .focused {
-    outline: 1px solid red;
-  }
-</style>
+<style> .focused { outline: 1px solid red; } </style>
 
 <script>
 *!*
-  // ставим обработчики на фазе перехвата, последний аргумент true
-  form.addEventListener("focus", function() {
-    this.classList.add('focused');
-  }, true);
-
-  form.addEventListener("blur", function() {
-    this.classList.remove('focused');
-  }, true);
+  // put the handler on capturing phase (last argument true)
+  form.addEventListener("focus", () => form.classList.add('focused'), true);
+  form.addEventListener("blur", () => form.classList.remove('focused'), true);
 */!*
 </script>
 ```
 
-### События focusin/focusout
-
-События `focusin/focusout` -- то же самое, что и `focus/blur`, только они всплывают.
-
-У них две особенности:
-<ul>
-<li>Не поддерживаются Firefox (хотя поддерживаются даже старейшими IE), см. [](https://bugzilla.mozilla.org/show_bug.cgi?id=687787).</li>
-<li>Должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
-</ul>
+Second, there are `focusin` and `focusout` events -- exactly the same as `focus/blur`, but they bubble.
 
-Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать `focus` на стадии перехвата, ну а `focusin/focusout` -- в IE8-, где стадии перехвата нет.
+Note that they must be assigned using `elem.addEventListener`, not `on<event>`.
 
-Подсветка формы в примере ниже работает во всех браузерах.
+So here's another working variant:
 
-```html
-<!--+ autorun height=60 run -->
-<form name="form">
-  <input type="text" name="name" value="Ваше имя">
-  <input type="text" name="surname" value="Ваша фамилия">
+```html autorun height=80
+<form id="form">
+  <input type="text" name="name" value="Name">
+  <input type="text" name="surname" value="Surname">
 </form>
-<style>
-  .focused {
-    outline: 1px solid red;
-  }
-</style>
-
-<script>
-  function onFormFocus() {
-    this.className = 'focused';
-  }
 
-  function onFormBlur() {
-    this.className = '';
-  }
+<style> .focused { outline: 1px solid red; } </style>
 
-  var form = document.forms.form;
-
-  if (form.addEventListener) {
-    // focus/blur на стадии перехвата срабатывают во всех браузерах
-    // поэтому используем их
-    form.addEventListener('focus', onFormFocus, true);
-    form.addEventListener('blur', onFormBlur, true);
-  } else { 
-    // ветка для IE8-, где нет стадии перехвата, но есть focusin/focusout
-    form.onfocusin = onFormFocus;
-    form.onfocusout = onFormBlur;
-  }
+<script>
+*!*
+  // put the handler on capturing phase (last argument true)
+  form.addEventListener("focusin", () => form.classList.add('focused'));
+  form.addEventListener("focusout", () => form.classList.remove('focused'));
+*/!*
 </script>
 ```
 
-## Итого
-События `focus/blur` происходят при получении и снятия фокуса с элемента.
-
-У них есть особенности:
-<ul>
-<li>Они не всплывают. Но на фазе перехвата их можно перехватить. Это странно, но это так, не спрашивайте почему.
-
-Везде, кроме Firefox, поддерживаются всплывающие альтернативы `focusin/focusout`.</li>
-<li>По умолчанию многие элементы не могут получить фокус. Например, если вы кликните по `DIV`, то фокусировка на нем не произойдет.
-
-Но это можно изменить, если поставить элементу атрибут `tabIndex`. Этот атрибут также дает возможность контролировать порядок перехода при нажатии [key Tab].
-</li>
-</ul>
-
-[smart header="Текущий элемент: `document.activeElement`"]
-Кстати, текущий элемент, на котором фокус, доступен как `document.activeElement`.
-[/smart]
+## Summary
 
+Events `focus` and `blur` trigger on focusing/loosing focus on the element.
 
+Their specials are:
+- They do not bubble. Can use capturing state instead or `focusin/focusout`.
+- Most elements do not support focus by default. Use `tabindex` to make anything focusable.
 
+The current focused element is available as `document.activeElement`.
diff --git a/archive/widget-tasks/5-menu-animated/solution.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.md
similarity index 100%
rename from archive/widget-tasks/5-menu-animated/solution.md
rename to 2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.md
diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html
new file mode 100644
index 00000000..4850b2ca
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    td select,
+    td input {
+      width: 150px;
+    }
+
+    #diagram td {
+      vertical-align: bottom;
+      text-align: center;
+      padding: 10px;
+    }
+
+    #diagram div {
+      margin: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  Deposit calculator.
+
+  <form name="calculator">
+    <table>
+      <tr>
+        <td>Initial deposit</td>
+        <td>
+          <input name="money" type="number" value="10000" required>
+        </td>
+      </tr>
+      <tr>
+        <td>How many months?</td>
+        <td>
+          <select name="months">
+            <option value="3">3 (minimum)</option>
+            <option value="6">6 (half-year)</option>
+            <option value="12" selected>12 (one year)</option>
+            <option value="18">18 (1.5 years)</option>
+            <option value="24">24 (2 years)</option>
+            <option value="30">30 (2.5 years)</option>
+            <option value="36">36 (3 years)</option>
+            <option value="60">60 (5   years)</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td>Interest per year?</td>
+        <td>
+          <input name="interest" type="number" value="5" required>
+        </td>
+      </tr>
+    </table>
+
+
+  </form>
+
+
+  <table id="diagram">
+    <tr>
+      <th>Was:</th>
+      <th>Becomes:</th>
+    </tr>
+    <tr>
+      <th id="money-before"></th>
+      <th id="money-after"></th>
+    </tr>
+    <td>
+      <div style="background: red;width:40px;height:100px"></div>
+    </td>
+    <td>
+      <div style="background: green;width:40px;height:0" id="height-after"></div>
+    </td>
+  </table>
+
+  <script>
+
+    let form = document.forms.calculator;
+
+    form.money.oninput = calculate;
+    form.months.onchange = calculate;
+    form.interest.oninput = calculate;
+
+    function calculate() {
+      let initial = +form.money.value;
+      if (!initial) return;
+
+      let interest = form.interest.value * 0.01;
+
+      if (!interest) return;
+
+      let years = form.months.value / 12;
+      if (!years) return;
+
+      let result = Math.round(initial * (1 + interest * years));
+
+      let height = result / form.money.value * 100 + 'px';
+      document.getElementById('height-after').style.height = height;
+      document.getElementById('money-before').innerHTML = form.money.value;
+      document.getElementById('money-after').innerHTML = result;
+    }
+
+    calculate();
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html
new file mode 100644
index 00000000..7f464020
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    td select,
+    td input {
+      width: 150px;
+    }
+
+    #diagram td {
+      vertical-align: bottom;
+      text-align: center;
+      padding: 10px;
+    }
+
+    #diagram div {
+      margin: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  Deposit calculator.
+
+  <form name="calculator">
+    <table>
+      <tr>
+        <td>Initial deposit</td>
+        <td>
+          <input name="money" type="number" value="10000" required>
+        </td>
+      </tr>
+      <tr>
+        <td>How many months?</td>
+        <td>
+          <select name="months">
+            <option value="3">3 (minimum)</option>
+            <option value="6">6 (half-year)</option>
+            <option value="12" selected>12 (one year)</option>
+            <option value="18">18 (1.5 years)</option>
+            <option value="24">24 (2 years)</option>
+            <option value="30">30 (2.5 years)</option>
+            <option value="36">36 (3 years)</option>
+            <option value="60">60 (5   years)</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td>Interest per year?</td>
+        <td>
+          <input name="interest" type="number" value="5" required>
+        </td>
+      </tr>
+    </table>
+
+
+  </form>
+
+
+  <table id="diagram">
+    <tr>
+      <th>Was:</th>
+      <th>Becomes:</th>
+    </tr>
+    <tr>
+      <th id="money-before"></th>
+      <th id="money-after"></th>
+    </tr>
+    <td>
+      <div style="background: red;width:40px;height:100px"></div>
+    </td>
+    <td>
+      <div style="background: green;width:40px;height:0" id="height-after"></div>
+    </td>
+  </table>
+
+  <script>
+
+    let form = document.forms.calculator;
+
+    // your code
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md
new file mode 100644
index 00000000..e324577a
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Deposit calculator
+
+Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
+
+Here's the demo:
+
+[iframe src="solution" height="350" border="1"]
+
+Any input change should be processed immediately.
+
+The formula is:
+```js
+// initial: the initial money sum
+// interest: e.g. 0.05 means 5% per year
+// years: how many years to wait
+let result = Math.round(initial * (1 + interest * years));
+```
diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
new file mode 100644
index 00000000..81407dc7
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -0,0 +1,79 @@
+# Events: change, input, cut, copy, paste
+
+Let's discuss various events that accompany data updates.
+
+## Event: change
+
+The [change](http://www.w3.org/TR/html5/forms.html#event-input-change) event triggers when the element has finished changing.
+
+For text inputs that means that the event occurs when it looses focus.
+
+For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
+
+```html autorun height=40 run
+<input type="text" onchange="alert(this.value)">
+<input type="button" value="Button">
+```
+
+For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes.
+
+## Event: input
+
+The `input` event triggers every time a value is modified.
+
+For instance:
+
+```html autorun height=40 run
+<input type="text" id="input"> oninput: <span id="result"></span>
+<script>
+  input.oninput = function() {
+    result.innerHTML = input.value;
+  };
+</script>
+```
+
+If we want to handle every modification of an `<input>` then this event is the best choice.
+
+Unlike keyboard events it works on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
+
+```smart header="Can't prevent anything in `oninput`"
+The `input` event occurs after the value is modified.
+
+So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect.
+```
+
+## Events: cut, copy, paste
+
+These events occur on cutting/copying/pasting a value.
+
+They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
+
+We also can use `event.preventDefault()` to abort the action.
+
+For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
+
+```html autorun height=40 run
+<input type="text" id="input">
+<script>
+  input.oncut = input.oncopy = input.onpaste = function(event) {
+    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
+    return false;
+  };
+</script>
+```
+
+Technically, we can copy/paste everything. For instance, we can copy and file in the OS file manager, and paste it.
+
+There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) to work with different data types, read/write to the clipboard.
+
+But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety. Also it is forbidden to create "custom" clipboard events in all browsers except Firefox.
+
+## Summary
+
+Data change events:
+
+| Event | Description | Specials |
+|---------|----------|-------------|
+| `change`| A value was changed. | For text inputs triggers on focus loss. |
+| `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
+| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipbordData` property gives read/write access to the clipboard. |
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
deleted file mode 100644
index c8796f31..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-Алгоритм решения такой.
-
-Только численный ввод в поле с суммой разрешаем, повесив обработчик на `keypress`.
-
-Отслеживаем события изменения для перевычисления результатов:
-<ul>
-<li>На `input`: событие `input` и дополнительно `propertychange/keyup` для совместимости со старыми IE.</li>
-<li>На `checkbox`: событие `click` вместо `change` для совместимости с IE8-.</li>
-<li>На `select`: событие `change`.</li>
-</ul>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
deleted file mode 100755
index f86f424a..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    #diagram td {
-      vertical-align: bottom;
-      text-align: center;
-      padding: 10px;
-    }
-    
-    #diagram div {
-      margin: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  Калькулятор процентов, из расчёта 12% годовых.
-  <form name="calculator">
-    <table>
-      <tr>
-        <td>Сумма</td>
-        <td>
-          <input name="money" type="text" value="10000">
-        </td>
-      </tr>
-      <tr>
-        <td>Срок в месяцах</td>
-        <td>
-          <select name="months">
-            <option value="3">3 (минимум)</option>
-            <option value="6">6 (полгода)</option>
-            <option value="12" selected>12 (год)</option>
-            <option value="18">18 (1.5 года)</option>
-            <option value="24">24 (2 года)</option>
-            <option value="30">30 (2.5 года)</option>
-            <option value="36">36 (3 года)</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td>С капитализацией</td>
-        <td>
-          <input name="capitalization" type="checkbox">
-        </td>
-      </tr>
-    </table>
-
-
-  </form>
-
-
-  <table id="diagram">
-    <tr>
-      <th>Было:</th>
-      <th>Станет:</th>
-    </tr>
-    <tr>
-      <th id="money-before"></th>
-      <th id="money-after"></th>
-    </tr>
-    <td>
-      <div style="background: red;width:40px;height:100px"></div>
-    </td>
-    <td>
-      <div style="background: green;width:40px;height:0" id="height-after"></div>
-    </td>
-  </table>
-
-  <script>
-    // event.type должен быть keypress
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-
-    var form = document.forms.calculator;
-
-
-    var moneyElem = form.elements.money;
-    moneyElem.onkeypress = function(e) {
-      e = e || event;
-      var chr = getChar(e);
-
-      if (e.ctrlKey || e.altKey || chr == null) return; // специальная клавиша
-      if (chr < '0' || chr > '9') return false;
-    }
-
-    // клавиатура, вставить/вырезать клавиатурой
-    moneyElem.onkeyup = calculate;
-
-    // любые действия, кроме IE. В IE9 также работает, кроме удаления
-    moneyElem.oninput = calculate;
-
-    moneyElem.onpropertychange = function() { // для IE8- изменение значения, кроме удаления
-      event.propertyName == "value" && calculate();
-    }
-
-    var capitalizationElem = form.elements.capitalization;
-    capitalizationElem.onclick = calculate;
-
-    var monthsElem = form.elements.months;
-    monthsElem.onchange = calculate;
-
-
-    function calculate() {
-      var sum = +moneyElem.value;
-      if (!sum) return;
-
-      var monthlyIncrease = 0.01;
-
-      if (!capitalizationElem.checked) {
-        sum = sum * (1 + monthlyIncrease * monthsElem.value);
-      } else {
-
-        for (var i = 0; i < monthsElem.value; i++) {
-          // 1000 1010 1020.1
-          sum = sum * (1 + monthlyIncrease);
-        }
-      }
-      sum = Math.round(sum);
-
-      var height = sum / moneyElem.value * 100 + 'px';
-      document.getElementById('height-after').style.height = height;
-      document.getElementById('money-before').innerHTML = moneyElem.value;
-      document.getElementById('money-after').innerHTML = sum;
-    }
-
-    calculate();
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
deleted file mode 100755
index e1ec5551..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    #diagram td {
-      vertical-align: bottom;
-      text-align: center;
-      padding: 10px;
-    }
-    
-    #diagram div {
-      margin: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  Калькулятор процентов, из расчёта 12% годовых.
-  <form name="calculator">
-    <table>
-      <tr>
-        <td>Сумма</td>
-        <td>
-          <input name="money" type="text" value="10000">
-        </td>
-      </tr>
-      <tr>
-        <td>Срок в месяцах</td>
-        <td>
-          <select name="months">
-            <option value="3">3 (минимум)</option>
-            <option value="6">6 (полгода)</option>
-            <option value="12" selected>12 (год)</option>
-            <option value="18">18 (1.5 года)</option>
-            <option value="24">24 (2 года)</option>
-            <option value="30">30 (2.5 года)</option>
-            <option value="36">36 (3 года)</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td>С капитализацией</td>
-        <td>
-          <input name="capitalization" type="checkbox">
-        </td>
-      </tr>
-    </table>
-
-
-  </form>
-
-
-  <table id="diagram">
-    <tr>
-      <th>Было:</th>
-      <th>Станет:</th>
-    </tr>
-    <tr>
-      <th id="money-before"></th>
-      <th id="money-after"></th>
-    </tr>
-    <td>
-      <div style="background: red;width:40px;height:100px"></div>
-    </td>
-    <td>
-      <div style="background: green;width:40px;height:0" id="height-after"></div>
-    </td>
-  </table>
-
-  <script>
-    // вспомогательная функция для получения символа из события keypress
-    // (вдруг понадобится))
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-
-    // ваш код...
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
deleted file mode 100644
index f402f4da..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Автовычисление процентов по вкладу
-
-[importance 5]
-
-Создайте интерфейс для автоматического вычисления процентов по вкладу.
-
-Ставка фиксирована: 12% годовых. При включённом поле "капитализация" -- проценты приплюсовываются к сумме вклада каждый месяц ([сложный процент](http://damoney.ru/finance/slozniy-procent.php)).
-
-Пример:
-[iframe src="solution" height="350" border="1"]
-
-Технические требования:
-<ul>
-<li>В поле с суммой должно быть нельзя ввести не-цифру. При этом пусть в нём работают специальные клавиши и сочетания Ctrl-X/Ctrl-V.</li>
-<li>Изменения в форме отражаются в результатах сразу.</li>
-</ul>
-
-
-
-
diff --git a/2-ui/4-forms-controls/3-events-change/article.md b/2-ui/4-forms-controls/3-events-change/article.md
deleted file mode 100644
index f4299b73..00000000
--- a/2-ui/4-forms-controls/3-events-change/article.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# Изменение: change, input, cut, copy, paste
-
-На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.
-
-## Событие change
-
-Событие [change](http://www.w3.org/TR/html5/forms.html#event-input-change) происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано. 
-
-Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
-
-Например, пока вы набираете что-то в текстовом поле ниже -- события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку -- произойдет событие `onchange`.
-
-```html
-<!--+ autorun height=40 -->
-<input type="text" onchange="alert(this.value)">
-<input type="button" value="Кнопка">
-```
-
-Для остальных же элементов: `select`, `input type=checkbox/radio` оно срабатывает сразу при выборе значения.
-
-[warn header="Поздний `onchange` в IE8-"]
-В IE8- `checkbox/radio` при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
-
-Для того, чтобы видеть изменения `checkbox/radio` тут же -- в IE8- нужно повесить обработчик на событие `click` (оно произойдет и при изменении значения с клавиатуры) или воспользоваться событием `propertychange`, описанным далее.
-[/warn]
-
-## Событие input
-
-Событие `input` срабатывает *тут же* при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.
-
-В IE9 оно поддерживается частично, а именно -- *не возникает при удалении символов* (как и `onpropertychange`).
-
-Пример использования (не работает в IE8-):
-
-```html
-<!--+ autorun height=40 -->
-<input type="text"> oninput: <span id="result"></span>
-<script>
-  var input = document.body.children[0];
-
-  input.oninput = function() {
-    document.getElementById('result').innerHTML = input.value;
-  };
-</script>
-```
-
-В современных браузерах `oninput` -- самое главное событие для работы с элементом формы. Именно его, а не `keydown/keypress` следует использовать.
-
-Если бы ещё не проблемы со старыми IE... Впрочем, их можно решить при помощи события `propertychange`.
-
-## IE10-, событие propertychange 
-
-Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования -- исправление недочётов обработки событий в старых IE.
-
-Если поставить его на `checkbox` в IE8-, то получится "правильное" событие `change`:
-
-```html
-<!--+ autorun height=40 -->
-<input type="checkbox"> Чекбокс с "onchange", работающим везде одинаково
-<script>
-  var checkbox = document.body.children[0];
-
-  if ("onpropertychange" in checkbox) {
-    // старый IE
-*!*
-    checkbox.onpropertychange = function() {
-      // проверим имя изменённого свойства
-      if (event.propertyName == "checked") {
-        alert( checkbox.checked );
-      }
-    };
-*/!*
-  } else {
-    // остальные браузеры
-    checkbox.onchange = function() {
-      alert( checkbox.checked );
-    };
-  }
-</script>
-```
-
-Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо `oninput`.
-
-К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания `onpropertychange` + `oninput` недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.
-
-
-## События cut, copy, paste
-
-Эти события используются редко. Они происходят при вырезании/вставке/копировании значения.
-
-К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение -- это отмена соответствующей операции.
-
-Например, вот так:
-
-```html
-<!--+ autorun height=40 -->
-<input type="text" id="input"> event: <span id="result"></span>
-<script>
-  input.oncut = input.oncopy = input.onpaste = function(event) {
-    result.innerHTML = event.type + ' ' + input.value;
-    return false;
-  };
-</script>
-```
-
-## Пример: поле с контролем СМС
-
-Как видим, событий несколько и они взаимно дополняют друг друга.
-
-Посмотрим, как их использовать, на примере.
-
-Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.
-
-Как такое реализовать?
-
-Событие `input` идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.
-
-### IE9-
-
-В IE8- событие `input` не поддерживается, но, как мы видели ранее, есть `onpropertychange`, которое может заменить его. 
-
-Что же касается IE9 -- там поддерживаются и `input` и `onpropertychange`, но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи `keyup` на [key Delete]  и [key BackSpace] . А вот удаление командой "вырезать" из меню -- сможет отловить лишь `oncut`.
-
-Получается вот такая комбинация:
-
-```html
-<!--+ autorun run height=60 -->
-<input type="text" id="sms"> символов: <span id="result"></span>
-<script>
-  function showCount() {
-    result.innerHTML = sms.value.length;
-  }
-
-  sms.onkeyup = sms.oninput = showCount;
-  sms.onpropertychange = function() {
-    if (event.propertyName == "value") showCount();
-  }
-  sms.oncut = function() {
-    setTimeout(showCount, 0); // на момент oncut значение еще старое
-  };
-</script>
-```
-
-Здесь мы добавили вызов `showCount` на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи `throttle`-декоратора, описанного в задаче [](/task/throttle).
-
-**Есть и совсем другой простой, но действенный вариант: через `setInterval` регулярно проверять значение и, если оно слишком длинное, обрезать его.**
-
-Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по `onfocus`, а прекращать -- по `onblur`, вот так:
-
-```html
-<!--+ autorun height=60 -->
-<input type="text" id="sms"> символов: <span id="result"></span>
-
-<script>
-  var timerId;
-
-  sms.onfocus = function() {
-
-    var lastValue = sms.value;
-    timerId = setInterval(function() {
-      if (sms.value != lastValue) {
-        showCount();
-        lastValue = sms.value;
-      }
-    }, 20);
-  };
-
-  sms.onblur = function() {
-    clearInterval(timerId);
-  };
-
-  function showCount() {
-    result.innerHTML = sms.value.length;
-  }
-</script>
-```
-
-Обратим внимание -- весь этот "танец с бубном" нужен только для поддержки IE8-, в которых не поддерживается `oninput` и IE9, где `oninput` не работает при удалении.
-
-## Итого
-
-События изменения данных:
-
-<table>
-<thead>
-<tr>
-<th>Событие</th>
-<th>Описание</th>
-<th>Особенности</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>`change`</td>
-<td>Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.</td>
-<td>В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также `onclick`-обработчик или `onpropertychange`.</td>
-</tr>
-<tr>
-<td>`input`</td>
-<td>Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от `change`.</td>
-<td>В IE8- не поддерживается, в IE9 не работает при удалении символов.</td>
-</tr>
-<tr>
-<td>`propertychange`</td>
-<td>Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в `event.propertyName`. Используют для мгновенной реакции на изменение значения в старых IE.
-</td>
-<td>В IE9 не срабатывает при удалении символов.</td>
-</tr>
-<tr>
-<td>`cut/copy/paste`</td>
-<td>Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт.</td>
-<td>Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё *старое* значение, а новое недоступно.</td>
-</tr>
-</tbody>
-</table>
-
-Ещё особенность: в IE8- события `change`, `propertychange`, `cut` и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.
-
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
index 571ea27f..781ce5d5 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
@@ -1,8 +1,4 @@
-Модальное окно делается путём добавления к документу `DIV`, полностью перекрывающего документ и имеющего больший `z-index`.
-
-В результате все клики будут доставаться этому `DIV'у`:
-
-Стиль:
+A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
 
 ```css
 #cover-div {
@@ -17,5 +13,8 @@
 }
 ```
 
-Самой форме можно дать еще больший `z-index`, чтобы она была над `DIV'ом`. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.
+Because the `<div>` covers everything, it gets all clicks, not the page below it.
+
+Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
 
+The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
old mode 100755
new mode 100644
index ef7cbfd0..ec9e1b5e
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
@@ -3,96 +3,49 @@
 
 <head>
   <meta charset="utf-8">
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-    }
-    
-    #prompt-form {
-      display: inline-block;
-      padding: 5px 5px 5px 70px;
-      width: 200px;
-      border: 1px solid black;
-      background: white url(https://js.cx/clipart/prompt.png) no-repeat left 5px;
-      vertical-align: middle;
-    }
-    
-    #prompt-form-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9999;
-      display: none;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-    
-    #prompt-form-container:before {
-      display: inline-block;
-      height: 100%;
-      content: '';
-      vertical-align: middle;
-    }
-    
-    #cover-div {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9000;
-      width: 100%;
-      height: 100%;
-      background-color: gray;
-      opacity: 0.3;
-    }
-    
-    #prompt-form input[name="text"] {
-      display: block;
-      margin: 5px;
-      width: 180px;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body style="height:3000px">
 
-  <h1>Нажмите на кнопку ниже</h1>
+  <h2>Click the button below</h2>
 
-  <input type="button" value="Нажмите для показа формы ввода" id="show-button">
+  <input type="button" value="Click to show the form" id="show-button">
 
 
   <div id="prompt-form-container">
     <form id="prompt-form">
       <div id="prompt-message"></div>
       <input name="text" type="text">
-      <input type="submit" value="Ок">
-      <input type="button" name="cancel" value="Отмена">
+      <input type="submit" value="Ok">
+      <input type="button" name="cancel" value="Cancel">
     </form>
   </div>
 
   <script>
-    // Показать полупрозрачный DIV, затеняющий всю страницу 
-    // (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) 
+    // Show a half-transparent DIV to "shadow" the page
+    // (the form is not inside, but near it, because it shouldn't be half-transparent)
     function showCover() {
-      var coverDiv = document.createElement('div');
+      let coverDiv = document.createElement('div');
       coverDiv.id = 'cover-div';
-      document.body.appendChild(coverDiv);
+
+      // make the page unscrollable while the modal form is open
+      document.body.style.overflowY = 'hidden';
+
+      document.body.append(coverDiv);
     }
 
     function hideCover() {
-      document.body.removeChild(document.getElementById('cover-div'));
+      document.getElementById('cover-div').remove();
+      document.body.style.overflowY = '';
     }
 
     function showPrompt(text, callback) {
       showCover();
-      var form = document.getElementById('prompt-form');
-      var container = document.getElementById('prompt-form-container');
+      let form = document.getElementById('prompt-form');
+      let container = document.getElementById('prompt-form-container');
       document.getElementById('prompt-message').innerHTML = text;
-      form.elements.text.value = '';
+      form.text.value = '';
 
       function complete(value) {
         hideCover();
@@ -102,54 +55,51 @@ <h1>Нажмите на кнопку ниже</h1>
       }
 
       form.onsubmit = function() {
-        var value = form.elements.text.value;
-        if (value == '') return false; // игнорировать пустой submit
+        let value = form.text.value;
+        if (value == '') return false; // ignore empty submit
 
         complete(value);
         return false;
       };
 
-      form.elements.cancel.onclick = function() {
+      form.cancel.onclick = function() {
         complete(null);
       };
 
       document.onkeydown = function(e) {
-        if (e.keyCode == 27) { // escape
+        if (e.key == 'Escape') {
           complete(null);
         }
       };
 
-      var lastElem = form.elements[form.elements.length - 1];
-      var firstElem = form.elements[0];
+      let lastElem = form.elements[form.elements.length - 1];
+      let firstElem = form.elements[0];
 
       lastElem.onkeydown = function(e) {
-        if (e.keyCode == 9 && !e.shiftKey) {
+        if (e.key == 'Tab' && !e.shiftKey) {
           firstElem.focus();
           return false;
         }
       };
 
       firstElem.onkeydown = function(e) {
-        if (e.keyCode == 9 && e.shiftKey) {
+        if (e.key == 'Tab' && e.shiftKey) {
           lastElem.focus();
           return false;
         }
       };
 
-
       container.style.display = 'block';
       form.elements.text.focus();
     }
 
     document.getElementById('show-button').onclick = function() {
-      showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
-        alert("Вы ввели: " + value);
+      showPrompt("Enter something<br>...smart :)", function(value) {
+        alert("You entered: " + value);
       });
     };
   </script>
 
 
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css
new file mode 100644
index 00000000..d4da46ac
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css
@@ -0,0 +1,51 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#cover-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  background-color: gray;
+  opacity: 0.3;
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
old mode 100755
new mode 100644
index 846f2706..230a5117
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
@@ -3,47 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <style>
-    html,
-    body {
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      margin: 0;
-    }
-    
-    #prompt-form {
-      display: inline-block;
-      padding: 5px 5px 5px 70px;
-      width: 200px;
-      border: 1px solid black;
-      background: white url(https://js.cx/clipart/prompt.png) no-repeat left 5px;
-      vertical-align: middle;
-    }
-    
-    #prompt-form-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9999;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-    
-    #prompt-form-container:before {
-      display: inline-block;
-      height: 100%;
-      content: '';
-      vertical-align: middle;
-    }
-    
-    #prompt-form input[name="text"] {
-      display: block;
-      margin: 5px;
-      width: 180px;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -51,15 +11,15 @@
 
   <div id="prompt-form-container">
     <form id="prompt-form">
-      <div id="prompt-message">Введите, пожалуйста...
-        <br>Что-то..</div>
+      <div id="prompt-message">Enter something...
+        <br>Please..</div>
       <input name="text" type="text">
-      <input type="submit" value="Ок">
-      <input type="button" name="cancel" value="Отмена">
+      <input type="submit" value="Ok">
+      <input type="button" name="cancel" value="Cancel">
     </form>
   </div>
 
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css
new file mode 100644
index 00000000..5b327593
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css
@@ -0,0 +1,39 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
index ff5cd1a1..784ce7ee 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
@@ -1,34 +1,33 @@
-# Модальное диалоговое окно
+importance: 5
 
-[importance 5]
+---
 
-Создайте функцию `showPrompt(text, callback)`, которая выводит форму для ввода с сообщением `text` и кнопками `ОК/Отмена`.
+# Modal form
 
-<ul>
-<li>При отправке формы (OK/ввод в текстовом поле) -- должна вызываться функция `callback` со значением поля.</li>
-<li>При нажатии на `Отмена` или на клавишу [key Esc] -- должна вызываться функция `callback(null)`. Клавиша [key Esc] должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.</li>
-</ul>
+Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
 
-Особенности реализации:
-<ul>
-<li>Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).</li>
-<li>Текст может состоять из нескольких строк, возможен любой HTML</li>
-<li>При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно -- *модальное*.</li>
-<li>При показе формы -- сразу фокус на `INPUT` для ввода.</li>
-<li>Нажатия [key Tab]/[key Shift+Tab] переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.</li>
-</ul>
+- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value he entered.
+- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
 
-Пример использования:
+In both cases that ends the input process and removes the form.
+
+Requirements:
+
+- The form should be in the center of the window.
+- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
+- When the form is shown, the focus should be inside the `<input>` for the user.
+- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
+
+Usage example:
 
 ```js
-showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
-  alert( value );
+showPrompt("Enter something<br>...smart :)", function(value) {
+  alert(value);
 });
 ```
 
-Демо в ифрейме:
-[iframe src="solution" height=160 border=1]
-
-Исходный HTML/CSS для формы с готовым fixed-позиционированием - в песочнице.
+A demo in the iframe:
 
+[iframe src="solution" height=160 border=1]
 
+P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
deleted file mode 100755
index b4c28716..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    label {
-      display: block;
-    }
-    
-    .error input,
-    .error textarea {
-      border: 1px solid red;
-    }
-    
-    .error {
-      color: red;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <form>
-    <table>
-      <tr>
-        <td>От кого</td>
-        <td>
-          <input name="from" type="text">
-        </td>
-      </tr>
-      <tr>
-        <td>Ваш пароль</td>
-        <td>
-          <input name="password" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Повторите пароль</td>
-        <td>
-          <input name="password2" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Куда</td>
-        <td>
-          <select name="to">
-            <option></option>
-            <option value="1">Отдел снабжения</option>
-            <option value="2">Отдел разработки</option>
-            <option value="3">Директору</option>
-          </select>
-        </td>
-      </tr>
-    </table>
-
-    Сообщение:
-    <label>
-      <textarea name="message" style="display:block;width:400px;height:80px"></textarea>
-    </label>
-
-    <input type="button" onclick="validate(this.form)" value="Проверить">
-  </form>
-
-  <script>
-    function showError(container, errorMessage) {
-      container.className = 'error';
-      var msgElem = document.createElement('span');
-      msgElem.className = "error-message";
-      msgElem.innerHTML = errorMessage;
-      container.appendChild(msgElem);
-    }
-
-    function resetError(container) {
-      container.className = '';
-      if (container.lastChild.className == "error-message") {
-        container.removeChild(container.lastChild);
-      }
-    }
-
-    function validate(form) {
-      var elems = form.elements;
-
-      resetError(elems.from.parentNode);
-      if (!elems.from.value) {
-        showError(elems.from.parentNode, ' Укажите от кого.');
-      }
-
-      resetError(elems.password.parentNode);
-      if (!elems.password.value) {
-        showError(elems.password.parentNode, ' Укажите пароль.');
-      } else if (elems.password.value != elems.password2.value) {
-        showError(elems.password.parentNode, ' Пароли не совпадают.');
-      }
-
-      resetError(elems.to.parentNode);
-      if (!elems.to.value) {
-        showError(elems.to.parentNode, ' Укажите, куда.');
-      }
-
-      resetError(elems.message.parentNode);
-      if (!elems.message.value) {
-        showError(elems.message.parentNode, ' Отсутствует текст.');
-      }
-
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
deleted file mode 100755
index b316af7c..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    label {
-      display: block;
-    }
-    /* ваши стили */
-  </style>
-</head>
-
-<body>
-
-
-  <form>
-    <table>
-      <tr>
-        <td>От кого</td>
-        <td>
-          <input name="from" type="text">
-        </td>
-      </tr>
-      <tr>
-        <td>Ваш пароль</td>
-        <td>
-          <input name="password" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Повторите пароль</td>
-        <td>
-          <input name="password2" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Куда</td>
-        <td>
-          <select name="to">
-            <option></option>
-            <option value="1">Отдел снабжения</option>
-            <option value="2">Отдел разработки</option>
-            <option value="3">Директору</option>
-          </select>
-        </td>
-      </tr>
-    </table>
-
-    Сообщение:
-    <label>
-      <textarea name="message" style="display:block;width:400px;height:100px"></textarea>
-    </label>
-
-    <input type="button" onclick="validate(this.form)" value="Проверить">
-  </form>
-
-  <script>
-    function validate(form) {
-      /* ваш код */
-    }
-
-    /* ваш код */
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
deleted file mode 100644
index 8ab87c31..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Валидация формы
-
-[importance 3]
-
-Напишите функцию `validate(form)`, которая проверяет содержимое формы по клику на кнопку "Проверить".
- 
-Ошибки:
-<ol>
-<li>Одно из полей не заполнено.</li>
-<li>Пароли не совпадают.</li>
-</ol>
-
-Ошибка должна сопровождаться сообщением у поля. Например:
-[iframe height=280 src="solution"]
-
- 
-
diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md
index ab90e212..15647dfc 100644
--- a/2-ui/4-forms-controls/4-forms-submit/article.md
+++ b/2-ui/4-forms-controls/4-forms-submit/article.md
@@ -1,65 +1,67 @@
-# Формы: отправка, событие и метод submit
+# Form submission: event and method submit
 
-Событие `submit` возникает при отправке формы. Наиболее частое его применение -- это *валидация* (проверка) формы перед отправкой. 
+The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
+
+The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+
+Let's see more details of them.
 
-Метод `submit` позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим детали их использования.
 [cut]
-## Событие submit
 
-Чтобы отправить форму на сервер, у посетителя есть два способа:
+## Event: submit
+
+There are two main ways to submit a form:
 
-<ol>
-<li>**Первый -- это нажать кнопку `<input type="submit">` или `<input type="image">`.**</li>
-<li>**Второй -- нажать Enter, находясь на каком-нибудь поле.**</li>
-</ol>
+1. The first -- to click `<input type="submit">` or `<input type="image">`.
+2. The second -- press `key:Enter` on an input field.
 
-Какой бы способ ни выбрал посетитель -- будет сгенерировано событие `submit`. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать `event.preventDefault()` -- тогда форма не отправится на сервер.
+Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
 
-Например, в таком HTML оба способа выведут `alert`, форма не будет отправлена:
+In the form below:
+1. Go into the text field and press `key:Enter`.
+2. Click `<input type="submit">`.
 
-```html
-<!--+ autorun height=80  no-beautify -->
+Both actions show `alert` and the form is not sent anywhere due to `return false`:
+
+```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
-  Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
+  First: Enter in the input field <input type="text" value="text"><br>
+  Second: Click "submit": <input type="submit" value="Submit">
 </form>
 ```
 
-Ожидаемое поведение:
-
-<ol><li>Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря `return false` в обработчике.</li>
-<li>То же самое произойдет при клике на `<input type="submit">`.</li>
-</ol>
+````smart header="Relation between `submit` and `click`"
+When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
 
-[smart header="Взаимосвязь событий `submit` и `click`"]
+That's rather funny, because there was no click at all.
 
-При отправке формы путём нажатия Enter на текстовом поле, на элементе `<input type="submit">` везде, кроме IE8-, генерируется событие `click`.
-
-Это довольно забавно, учитывая что клика-то и не было.
-
-```html
-<!--+ autorun height=80 -->
-<form onsubmit="alert('submit');return false">
- <input type="text" size="30" value="При нажатии Enter будет click">
+Here's the demo:
+```html autorun height=60
+<form onsubmit="return false">
+ <input type="text" size="30" value="Focus here and press enter">
  <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
 </form>
 ```
 
-[/smart]
-
-[warn header="В IE8- событие `submit` не всплывает"]
-В IE8- событие `submit` не всплывает. Нужно вешать обработчик `submit` на сам элемент формы, без использования делегирования.
-[/warn]
+````
 
+## Method: submit
 
-## Метод submit
+To submit a form to the server manually, we can call `form.submit()`.
 
-Чтобы отправить форму на сервер из JavaScript -- нужно вызвать на элементе формы метод `form.submit()`.
+Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
 
-При этом само событие `submit` не генерируется. Предполагается, что если программист вызывает метод `form.submit()`, то он выполнил все проверки.
-
-Это используют, в частности, для искусственной генерации и отправки формы.
+Sometimes that's used to manually create and send a form, like this:
 
+```js run
+let form = document.createElement('form');
+form.action = 'https://google.com/search';
+form.method = 'GET';
 
+form.innerHTML = '<input name="q" value="test">';
 
+// the form must be in the document to submit it
+document.body.append(form);
 
+form.submit();
+```
diff --git a/2-ui/4-forms-controls/index.md b/2-ui/4-forms-controls/index.md
index 266c555d..726474b1 100644
--- a/2-ui/4-forms-controls/index.md
+++ b/2-ui/4-forms-controls/index.md
@@ -1,3 +1,3 @@
-# Формы, элементы управления
+# Forms, controls
 
-Особые свойства, методы и события для работы с формами `<form>` и элементами ввода: `<input>`, `<select>` и другими.
\ No newline at end of file
+Special properties and events for forms `<form>` and controls: `<input>`, `<select>` and other.
diff --git a/2-ui/5-widgets/1-architect-intro/article.md b/2-ui/5-widgets/1-architect-intro/article.md
deleted file mode 100644
index 69a53c60..00000000
--- a/2-ui/5-widgets/1-architect-intro/article.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Введение
-
-[quote author="Эдсгер Вибе Дейкстра"]
-Для надёжности необходима простота.
-[/quote]
-
-В современной JavaScript-разработке используются фреймворки, которые дают готовые библиотеки и правила для написания кода. Эта глава не ставит своей целью их все заменить, а равно как и научить какому-нибудь фреймворку.
-
-Вместо этого мы разберём основные средства для построения архитектуры, и при помощи чистого JavaScript построим компоненты интерфейса с их использованием.
-
-Это во-первых покажет, что и без фреймворков есть жизнь, а во-вторых даст фундамент для освоения любого фреймворка, какой бы вы ни выбрали.
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js
deleted file mode 100755
index 949b581a..00000000
--- a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js
+++ /dev/null
@@ -1,31 +0,0 @@
-function Clock(options) {
-  var elem = options.elem;
-
-  var timer;
-
-  function render() {
-    var date = new Date();
-
-    var hours = date.getHours();
-    if (hours < 10) hours = '0' + hours;
-    elem.querySelector('.hour').innerHTML = hours;
-
-    var min = date.getMinutes();
-    if (min < 10) min = '0' + min;
-    elem.querySelector('.min').innerHTML = min;
-
-    var sec = date.getSeconds();
-    if (sec < 10) sec = '0' + sec;
-    elem.querySelector('.sec').innerHTML = sec;
-  }
-
-  this.stop = function() {
-    clearInterval(timer);
-  };
-
-  this.start = function() {
-    render();
-    timer = setInterval(render, 1000);
-  };
-
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html
deleted file mode 100755
index 53c12a8b..00000000
--- a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики</title>
-  <script src="clock.js"></script>
-  <meta charset="utf-8">
-  <style>
-    .hour {
-      color: green
-    }
-    
-    .min {
-      color: blue
-    }
-    
-    .sec {
-      color: red
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="clock" class="clock">
-    <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
-  </div>
-
-  <script>
-    var pageClock = new Clock({
-      elem: document.getElementById('clock')
-    });
-  </script>
-
-  <input type="button" onclick="pageClock.start()" value="Старт">
-  <input type="button" onclick="pageClock.stop()" value="Стоп">
-
-  <input type="button" onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')" value="alert для проверки корректного возобновления">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html b/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html
deleted file mode 100755
index aede485f..00000000
--- a/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Часики</title>
-  <meta charset="utf-8">
-  <style>
-    .hour {
-      color: green
-    }
-    
-    .min {
-      color: blue
-    }
-    
-    .sec {
-      color: red
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="clock" class="clock">
-    <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
-  </div>
-
-  <script>
-    // .. ваш код Clock
-
-    var pageClock = new Clock({
-      elem: document.getElementById('clock')
-    });
-  </script>
-
-  <input type="button" onclick="pageClock.start()" value="Старт">
-  <input type="button" onclick="pageClock.stop()" value="Стоп">
-
-  <input type="button" onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')" value="alert для проверки корректного возобновления">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/task.md b/2-ui/5-widgets/2-widgets-structure/1-clock/task.md
deleted file mode 100644
index 1a89730e..00000000
--- a/2-ui/5-widgets/2-widgets-structure/1-clock/task.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Часики
-
-[importance 5]
-
-Создайте компонент "Часы" (Clock).
-
-Интерфейс:
-
-```js
-var clock = new Clock({
-  elem: элемент
-});
-
-clock.start(); // старт
-clock.stop(); // стоп
-```
-
-Остальные методы, если нужны, должны быть приватными.
-
-При нажатии на `alert` часы должны приостанавливаться, а затем продолжать идти с правильным временем.
-
-Пример результата:
-[iframe src="solution" height=80]
-
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html
deleted file mode 100755
index 45231886..00000000
--- a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-
-  <style>
-    .slider {
-      margin: 5px;
-      width: 310px;
-      height: 15px;
-      border-radius: 5px;
-      background: #E0E0E0;
-      background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
-      background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
-      background: linear-gradient(left top, #E0E0E0, #EEEEEE);
-    }
-    
-    .thumb {
-      position: relative;
-      top: -5px;
-      left: 10px;
-      width: 10px;
-      height: 25px;
-      border-radius: 3px;
-      background: blue;
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="slider" class="slider">
-    <div class="thumb"></div>
-  </div>
-  <script>
-    var slider = new Slider({
-      elem: document.getElementById('slider')
-    });
-
-    function Slider(options) {
-      var elem = options.elem;
-      var thumbElem = elem.querySelector('.thumb');
-
-      var sliderCoords, thumbCoords, shiftX, shiftY;
-
-      elem.ondragstart = function() {
-        return false;
-      };
-
-      elem.onmousedown = function(event) {
-        if (event.target.closest('.thumb')) {
-          startDrag(event.clientX, event.clientY);
-          return false; // disable selection start (cursor change)
-        }
-      }
-
-      function startDrag(startClientX, startClientY) {
-        thumbCoords = thumbElem.getBoundingClientRect();
-        shiftX = startClientX - thumbCoords.left;
-        shiftY = startClientY - thumbCoords.top;
-
-        sliderCoords = elem.getBoundingClientRect();
-
-        document.addEventListener('mousemove', onDocumentMouseMove);
-        document.addEventListener('mouseup', onDocumentMouseUp);
-      }
-
-
-
-      function moveTo(clientX) {
-        // вычесть координату родителя, т.к. position: relative
-        var newLeft = clientX - shiftX - sliderCoords.left;
-
-        // курсор ушёл вне слайдера
-        if (newLeft < 0) {
-          newLeft = 0;
-        }
-        var rightEdge = elem.offsetWidth - thumbElem.offsetWidth;
-        if (newLeft > rightEdge) {
-          newLeft = rightEdge;
-        }
-
-        thumbElem.style.left = newLeft + 'px';
-      }
-
-
-      function onDocumentMouseMove(e) {
-        moveTo(e.clientX);
-      }
-
-      function onDocumentMouseUp() {
-        endDrag();
-      }
-
-
-      function endDrag() {
-        document.removeEventListener('mousemove', onDocumentMouseMove);
-        document.removeEventListener('mouseup', onDocumentMouseUp);
-      }
-
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md
deleted file mode 100644
index 71bb67f1..00000000
--- a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Слайдер-компонент
-
-[importance 5]
-
-Перепишите слайдер в виде компонента:
-[iframe src="solution" height=60 border=1]
-
-Исходный документ возьмите из решения задачи [](/task/slider).
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html
deleted file mode 100755
index fb798b26..00000000
--- a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="listSelect.js"></script>
-</head>
-
-<body>
-
-  Клик на элементе выделяет только его.
-  <br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
-  <br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
-  <br>
-
-  <ul>
-    <li>Кристофер Робин</li>
-    <li>Винни-Пух</li>
-    <li>Ослик Иа</li>
-    <li>Мудрая Сова</li>
-    <li>Кролик. Просто кролик.</li>
-  </ul>
-
-  <button onclick="alert(listSelect.getSelected())">listSelect.getSelected()</button>
-
-  <script>
-    var listSelect = new ListSelect({
-      elem: document.querySelector('ul')
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js
deleted file mode 100755
index d5d4778e..00000000
--- a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js
+++ /dev/null
@@ -1,68 +0,0 @@
-function ListSelect(options) {
-  var elem = options.elem;
-
-  var lastClickedLi = null;
-
-  elem.onmousedown = function() {
-    return false;
-  };
-
-  elem.onclick = function(e) {
-    var li = e.target.closest('li');
-    if (!li) return;
-
-    if (e.metaKey || e.ctrlKey) { // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
-      toggleSelect(li);
-    } else if (e.shiftKey) {
-      selectFromLast(li);
-    } else {
-      selectSingle(li);
-    }
-
-    lastClickedLi = li;
-  }
-
-  function deselectAll() {
-    [].forEach.call(elem.children, function(child) {
-      child.classList.remove('selected')
-    });
-  }
-
-  function toggleSelect(li) {
-    li.classList.toggle('selected');
-  }
-
-  function selectSingle(li) {
-    deselectAll();
-    li.classList.add('selected');
-  }
-
-  function selectFromLast(target) {
-    var startElem = lastClickedLi || elem.children[0];
-
-    target.classList.add('selected');
-    if (startElem == target) {
-      // клик на том же элементе, что и раньше
-      // это особый случай
-      return;
-    }
-
-    var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
-
-    if (isLastClickedBefore) {
-      for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
-        elem.classList.add('selected');
-      }
-    } else {
-      for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
-        elem.classList.add('selected');
-      }
-    }
-  }
-
-  this.getSelected = function() {
-    return [].map.call(elem.querySelectorAll('.selected'), function(li) {
-      return li.innerHTML;
-    });
-  };
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css
deleted file mode 100755
index 7c896c60..00000000
--- a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.selected {
-  background: #0f0;
-}
-
-li {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md
deleted file mode 100644
index 36a2db0c..00000000
--- a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Компонент: список с выделением
-
-[importance 5]
-
-Перепишите решение задачи [](/task/selectable-list) в виде компонента.
-
-У компонента должен быть единственный публичный метод `getSelected()`, который возвращает выбранные значения в виде массива.
-
-Использование:
-
-```js
-var listSelect = new ListSelect({
-  elem: document.querySelector('ul')
-});
-// listSelect.getSelected()
-```
-
-Демо:
-[iframe border="1" src="solution"]
-
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html
deleted file mode 100755
index 27fe4906..00000000
--- a/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <style>
-    .voter {
-      font-family: Consolas, "Lucida Console", monospace;
-      font-size: 18px;
-    }
-    
-    .up,
-    .down {
-      cursor: pointer;
-      color: blue;
-      font-weight: bold;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="voter" class="voter">
-    <span class="down">—</span>
-    <span class="vote">0</span>
-    <span class="up">+</span>
-  </div>
-
-  <script>
-    function Voter(options) {
-      var elem = options.elem;
-
-      var voteElem = elem.querySelector('.vote');
-
-      elem.onclick = function(event) {
-        // сам обработчик не меняет голос, он вызывает функцию
-        if (event.target.closest('.down')) {
-          voteDecrease();
-        } else if (event.target.closest('.up')) {
-          voteIncrease();
-        }
-      }
-
-      elem.onmousedown = function() {
-        return false;
-      };
-
-      // ----------- методы -------------
-
-      function voteDecrease() {
-        voteElem.innerHTML = +voteElem.innerHTML - 1;
-      }
-
-      function voteIncrease() {
-        voteElem.innerHTML = +voteElem.innerHTML + 1;
-      }
-
-      this.setVote = function(vote) {
-        voteElem.innerHTML = +vote;
-      };
-
-    }
-
-    var voter = new Voter({
-      elem: document.getElementById('voter')
-    });
-    voter.setVote(1);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html b/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html
deleted file mode 100755
index 6fb52391..00000000
--- a/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <style>
-    .voter {
-      font-family: Consolas, "Lucida Console", monospace;
-      font-size: 18px;
-    }
-    
-    .up,
-    .down {
-      cursor: pointer;
-      color: blue;
-      font-weight: bold;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="voter" class="voter">
-    <span class="down">—</span>
-    <span class="vote">0</span>
-    <span class="up">+</span>
-  </div>
-
-  <script>
-    function Voter(options) {
-      // ... ваш код
-    }
-
-    var voter = new Voter({
-      elem: document.getElementById('voter')
-    });
-
-    voter.setVote(1);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/task.md b/2-ui/5-widgets/2-widgets-structure/4-voter/task.md
deleted file mode 100644
index 490f0bed..00000000
--- a/2-ui/5-widgets/2-widgets-structure/4-voter/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Голосовалка
-
-[importance 5]
-
-Напишите функцию-конструктор `new Voter(options)` для голосовалки. 
-Она должна получать элемент в `options.elem`, в следующей разметке:
-
-```html
-<div id="voter" class="voter">
-  <span class="down">—</span>
-  <span class="vote">0</span>
-  <span class="up">+</span>
-</div>
-```
-
-По клику на `+` и `—` число должно увеличиваться или уменьшаться.
-
-Публичный метод `voter.setVote(vote)` должен устанавливать текущее число -- значение голоса.
-
-Все остальные методы и свойства пусть будут приватными.
-
-Результат:
-[iframe src="solution" height=60 border=1]
-
-
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html
deleted file mode 100755
index c8643bc0..00000000
--- a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="voter.js"></script>
-</head>
-
-<body>
-
-  <div id="voter" class="voter">
-    <span class="down">–</span>
-    <span class="vote">0</span>
-    <span class="up">+</span>
-  </div>
-
-  <script>
-    var voter = new Voter({
-      elem: document.getElementById('voter')
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css
deleted file mode 100755
index 5fb66438..00000000
--- a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.voter {
-  font-family: Consolas, "Lucida Console", monospace;
-  font-size: 18px;
-}
-
-.up,
-.down {
-  cursor: pointer;
-  color: blue;
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js
deleted file mode 100755
index 00475db9..00000000
--- a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js
+++ /dev/null
@@ -1,31 +0,0 @@
-function Voter(options) {
-  var elem = this._elem = options.elem;
-  this._voteElem = elem.querySelector('.vote');
-
-  elem.onmousedown = function() {
-    return false;
-  };
-
-  elem.onclick = this._onClick.bind(this);
-}
-
-Voter.prototype._onClick = function(event) {
-  if (event.target.closest('.down')) {
-    this._voteDecrease();
-  } else if (event.target.closest('.up')) {
-    this._voteIncrease();
-  }
-};
-
-
-Voter.prototype._voteIncrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML + 1;
-};
-
-Voter.prototype._voteDecrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML - 1;
-};
-
-Voter.prototype.setVote = function(vote) {
-  this._voteElem.innerHTML = +vote;
-};
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md
deleted file mode 100644
index 347a985c..00000000
--- a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Голосовалка в прототипном стиле ООП
-
-[importance 5]
-
-Поменяйте стиль ООП в голосовалке, созданной в задаче [](/task/voter) на прототипный.
-
-Внешний код, использующий класс `Voter`, не должен измениться.
-
-В качестве исходого кода возьмите решение задачи [](/task/voter).
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/index.html
deleted file mode 100644
index f58fcd18..00000000
--- a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="voter.js"></script>
-  <script src="step-voter.js"></script>
-  <!-- отнаследовать и переопределить методы -->
-</head>
-
-<body>
-
-  <div id="voter" class="voter">
-    <span class="down">–</span>
-    <span class="vote">0</span>
-    <span class="up">+</span>
-  </div>
-
-  <script>
-    var voter = new StepVoter({
-      elem: document.getElementById('voter'),
-      step: 2
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/step-voter.js b/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/step-voter.js
deleted file mode 100644
index 4f21784d..00000000
--- a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/step-voter.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function StepVoter(options) {
-  Voter.apply(this, arguments);
-  this._step = options.step || 1;
-}
-StepVoter.prototype = Object.create(Voter.prototype);
-
-StepVoter.prototype._voteIncrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML + this._step;
-};
-
-StepVoter.prototype._voteDecrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML - this._step;
-};
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/style.css
deleted file mode 100644
index 5fb66438..00000000
--- a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/style.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.voter {
-  font-family: Consolas, "Lucida Console", monospace;
-  font-size: 18px;
-}
-
-.up,
-.down {
-  cursor: pointer;
-  color: blue;
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/voter.js b/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/voter.js
deleted file mode 100644
index 00475db9..00000000
--- a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/voter.js
+++ /dev/null
@@ -1,31 +0,0 @@
-function Voter(options) {
-  var elem = this._elem = options.elem;
-  this._voteElem = elem.querySelector('.vote');
-
-  elem.onmousedown = function() {
-    return false;
-  };
-
-  elem.onclick = this._onClick.bind(this);
-}
-
-Voter.prototype._onClick = function(event) {
-  if (event.target.closest('.down')) {
-    this._voteDecrease();
-  } else if (event.target.closest('.up')) {
-    this._voteIncrease();
-  }
-};
-
-
-Voter.prototype._voteIncrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML + 1;
-};
-
-Voter.prototype._voteDecrease = function() {
-  this._voteElem.innerHTML = +this._voteElem.innerHTML - 1;
-};
-
-Voter.prototype.setVote = function(vote) {
-  this._voteElem.innerHTML = +vote;
-};
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/task.md b/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/task.md
deleted file mode 100644
index a0e71be3..00000000
--- a/2-ui/5-widgets/2-widgets-structure/6-voter-add-step/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Добавить двойной голос в голосовалку
-
-[importance 5]
-
-Создайте функцию-конструктор `StepVoter`, которая наследует от голосовалки, созданной в задаче [](/task/voter-proto) и добавляет голосовалке опцию `options.step`, которая задаёт "шаг" голоса.
-
-Пример:
-
-```js
-var voter = new StepVoter({
-  elem: document.getElementById('voter'),
-  step: 2 // увеличивать/уменьшать сразу на 2 пункта
-});
-```
-
-Результат:
-[iframe border=1 height=60 src="solution"]
-
-В реальном проекте влияние клика на голосовалку может зависеть от полномочий или репутации посетителя.
-
-В качестве исходного кода используйте решение задачи [](/task/voter-proto).
-
-P.S. Код `voter.js` изменять нельзя, нужно не переписать `Voter`, а отнаследовать от него.
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/article.md b/2-ui/5-widgets/2-widgets-structure/article.md
deleted file mode 100644
index b7ad7507..00000000
--- a/2-ui/5-widgets/2-widgets-structure/article.md
+++ /dev/null
@@ -1,313 +0,0 @@
-# Графические компоненты
-
-Первый и главный шаг в наведении порядка -- это оформить код в объекты, каждый из которых будет решать свою задачу.
-
-Здесь мы сосредоточимся на графических компонентах, которые также называют "виджетами". 
-
-В браузерах есть встроенные виджеты, например `<select>`, `<input>` и другие элементы, о которых мы даже и не думаем, "как они работают". Они "просто работают": показывают значение, вызывают события...
-
-Наша задача -- сделать то же самое на уровне выше. Мы будем создавать объекты, которые генерируют меню, диалог или другие компоненты интерфейса, и дают возможность удобно работать с ними. 
-
-## Виджет Menu
-
-Мы начнём работу с виджета, который предусматривает уже готовую разметку.
-
-То есть, в нужном месте HTML находится DOM-структура для меню -- заголовок и список опций:
-
-```html
-<div class="menu" id="sweets-menu">
-  <span class="title">Сладости</span>
-  <ul>
-    <li>Торт</li>
-    <li>Пончик</li>
-    <li>...</li>
-  </ul>
-</div>
-```
-
-Далее она может дополняться, изменяться, но в начале -- она такая.
-
-Обратим внимание на важные соглашения виджета:
-
-<dl>
-<dt>Вся разметка заключена в корневой элемент `<div class="menu" id="sweeties-menu">`.</dt>
-<dd>Это очень удобно: вынул этот элемент из DOM -- нет меню, вставил в другое место -- переместил меню. Кроме того, можно удобно искать подэлементы.</dd>
-<dt>Внутри корневого элемента -- только классы, не `id`.</dt>
-<dd>Документ вполне может содержать много различных меню. Они не должны конфликтовать между собой, поэтому для разметки везде используются классы.
-
-Исключение -- корневой элемент. В данном случае мы предполагаем, что данное конкретное "меню сладостей" в документе только одно, поэтому даём ему `id`.</dd>
-</dl>
-
-
-# Класс виджета
-
-Для работы с разметкой будем создавать объект `new Menu` и передавать ему корневой элемент. В конструкторе он поставит необходимые обработчики:
-
-```js
-function Menu(options) {
-  var elem = options.elem;
-
-  elem.onmousedown = function() {
-    return false;
-  }
-
-  elem.onclick = function(event) {
-    if (event.target.closest('.title')) {
-      elem.classList.toggle('open');
-    }
-  };
-
-}
-
-// использование
-var menu = new Menu({
-  elem: document.getElementById('sweets-menu')
-});
-```
-
-Меню:
-[codetabs src="menu"]
-
-Это, конечно, только первый шаг, но уже здесь видны некоторые важные соглашения в коде.
-
-<dl>
-<dt>У конструктора только один аргумент -- объект `options`.</dt>
-<dd>Это удобно, так как у графических компонентов обычно много настроек, большинство из которых имеют разумные значения "по умолчанию". Если передавать аргументы через запятую -- их будет слишком много.</dd>
-<dt>Обработчики назначаются через делегирование.</dt>
-<dd>Вместо того, чтобы найти элемент и поставить обработчик на него:
-
-```js
-var titleElem = elem.querySelector('.title');
-
-titleElem.onclick = function() {
-  elem.classList.toggle('open');
-}
-```
-
-...Мы ставим обработчик на корневой `elem` и используем делегирование:
-
-```js
-elem.onclick = function(event) {
-  if (event.target.closest('.title')) {
-    elem.classList.toggle('open');
-  }
-};
-```
-
-Это ускоряет инициализацию, так как не надо искать элементы, и даёт возможность в любой момент менять DOM внутри, в том числе через `innerHTML`, без необходимости переставлять обработчик.
-</dd>
-</dl>
-
-В этот код лучше добавить дополнительную проверку на то, что найденный `.title` находится внутри `elem`:
-
-```js
-elem.onclick = function(event) {
-  var closestTitle = event.target.closest('.title');
-  if (closestTitle && elem.contains(closestTitle)) {
-    elem.classList.toggle('open');
-  }
-};
-```
-
-## Публичные методы
-
-Уважающий себя компонент обычно имеет публичные методы, которые позволяют управлять им снаружи.
-
-Рассмотрим повнимательнее этот фрагмент:
-
-```js
-if (event.target.closest('.title')) {
-  elem.classList.toggle('open');
-}
-```
-
-Здесь в обработчике события сразу код работы с элементом. Пока одна строка -- всё понятно, но если их будет много, то при чтении понадобится долго и упорно вникать: "А что же, всё-таки, такое делается при клике?"
-
-Для улучшения читаемости выделим обработчик в отдельную функцию `toggle`, которая к тому же станет полезным публичным методом:
-
-```js
-function Menu(options) {
-  var elem = options.elem;
-
-  elem.onmousedown = function() {
-    return false;
-  }
-
-  elem.onclick = function(event) {
-    if (event.target.closest('.title')) {
-      toggle();
-    }
-  };
-
-  function toggle() {
-    elem.classList.toggle('open');
-  }
-
-  this.toggle = toggle;
-}
-```
-
-Теперь метод `toggle` можно использовать и снаружи:
-
-```js
-var menu = new Menu(...);
-menu.toggle();
-```
-
-## Генерация DOM-элемента
-
-До этого момента меню "оживляло" уже существующий HTML.
-
-Но далеко не всегда в HTML уже есть готовая разметка. В сложных интерфейсах намного чаще её нет, а есть данные, на основе которых компонент генерирует разметку.
-
-В случае меню, данные -- это набор пунктов меню, которые передаются конструктору.
-
-Для генерации DOM добавим меню три метода:
-<ul>
-<li>`render()` -- генерирует корневой DOM-элемент и заголовок меню.</li>
-<li>`renderItems()` -- генерирует DOM для списка опций `ul/li`.</li>
-<li>`getElem()` -- возвращает DOM-элемент меню, при необходимости запуская генерацию, публичный метод.</li>
-</ul>
-
-Функция генерации корневого элемента с заголовком `render` отделена от генерации списка `renderItems`. Почему -- будет видно чуть далее.
-
-Новый способ использования меню:
-
-```js
-*!*
-// создать объект меню с данным заголовком и опциями
-*/!*
-var menu = new Menu({
-  title: "Сладости",
-  items: [
-    "Торт",
-    "Пончик",
-    "Пирожное",
-    "Шоколадка",
-    "Мороженое"
-  ]
-});
-
-*!*
-// получить сгенерированный DOM-элемент меню
-*/!*
-var elem = menu.getElem();
-
-*!*
-// вставить меню в нужное место страницы
-*/!*
-document.body.appendChild(elem);
-```
-
-Код `Menu` с новыми методами:
-
-```js
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    elem = document.createElement('div');
-    elem.className = "menu";
-
-    var titleElem = document.createElement('span');
-    elem.appendChild(titleElem);
-    titleElem.className = "title";
-    titleElem.textContent = options.title;
-
-    elem.onmousedown = function() {
-      return false;
-    };
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-
-  }
-
-  function renderItems() {
-    var items = options.items || [];
-    var list = document.createElement('ul');
-    items.forEach(function(item) {
-      var li = document.createElement('li');
-      li.textContent = item;
-      list.appendChild(li);
-    });
-    elem.appendChild(list);
-  }
-
-  function open() {
-    if (!elem.querySelector('ul')) {
-      renderItems();
-    }
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
-```
-
-Отметим некоторые особенности этого кода.
-
-<dl>
-<dt>Обработчики отделяются от реальных действий.</dt>
-<dd>В обработчике `onclick` мы "ловим" событие и выясняем, что именно произошло. Возможно, нужно проверить  `event.target`, координаты, клавиши-модификаторы, и т.п. Это всё можно делать здесь же.
-
-Выяснив, что нужно сделать, обработчик `onclick` не делает это сам, а вызывает для этого соответствующий метод. Этот метод уже не знает ничего о событии, он просто делает что-то с виджетом. Его можно вызвать и отдельно, не из обработчика.
-
-Здесь есть ряд важных плюсов:
-<ul>
-<li>Обработчик `onclick` не "распухает" чрезмерно.</li>
-<li>Код гораздо лучше читается.</li>
-<li>Метод можно повторно использовать, в том числе и сделать публичным, как в коде выше.</li>
-</ul>
-</dd>
-<dt>Генерация DOM, по возможности, должна быть "ленивой".</dt>
-<dd>Мы стараемся откладывать работу до момента, когда она реально нужна. Например, когда `new Menu` создаётся, то переменная `elem` лишь объявляется. DOM-дерево будет сгенерировано только при вызове `getElem()` функцией `render()`.
-
-Более того! Пока меню закрыто -- достаточно заголовка. Кроме того, возможно, посетитель вообще никогда не раскроет это меню, так зачем генерировать список раньше времени? А при первом открытиии `open()` вызовет функцию `renderItems()`, которая специально для этого выделена отдельно от `render()`.
-
-**Фаза инициализации очень чувствительна к производительности, так как обычно в сложном интерфейсе создаётся много всего.**
-
-Если изначально подходить к оптимизации на этой фазе "спустя рукава", то потом поправить долгий старт может быть сложно. Тем более, что инициализация -- это фундамент, начало работы виджета, её оптимизация в будущем может потребовать сильных изменений кода. 
-
-Конечно, здесь, как и везде в оптимизации -- без фанатизма. Бывают ситуации, когда гораздо удобнее что-то сделать сразу. Если это один элемент, то оптимизация здесь ни к чему. А если большой фрагмент DOM, который, как в случае с меню, прямо сейчас не нужен -- то лучше отложить.
-</dd>
-</dl>
-
-В действии:
-[codetabs src="menu-dom" height="200"]
-
-
-## Итого
-
-Мы начали создавать компонент "с чистого листа", пока без дополнительных библиотек.
-
-Основные принципы:
-<ul>
-<li>Виджет -- это объект, который либо контролирует готовое дерево DOM, либо создаёт своё.</li>
-<li>В конструктор виджета передаётся объект аргументов `options`.</li>
-<li>Виджет при необходимости создаёт элемент или "оживляет" готовый. Внутре в разметке не используются `id`.</li>
-<li>Обработчики назначаются через делегирование -- для производительности и упрощения виджета.</li>
-<li>Обработчики событий вызывают соответствующий метод, не пытаются делать всё сами.</li>
-<li>При инициализации, если существенный участок работы можно отложить до реального задействования виджета -- откладываем его.</li>
-</ul>
-
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/index.html b/2-ui/5-widgets/2-widgets-structure/menu-dom.view/index.html
deleted file mode 100644
index 26454171..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <button onclick="menu.toggle()">menu.toggle()</button>
-  <button onclick="menu.open()">menu.open()</button>
-  <button onclick="menu.close()">menu.close()</button>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      items: [
-        "Торт",
-        "Пончик",
-        "Пирожное",
-        "Шоколадка",
-        "Мороженое"
-      ]
-    });
-
-    document.body.appendChild(menu.getElem());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/menu.js b/2-ui/5-widgets/2-widgets-structure/menu-dom.view/menu.js
deleted file mode 100644
index 56d4dec2..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/menu.js
+++ /dev/null
@@ -1,61 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    elem = document.createElement('div');
-    elem.className = "menu";
-
-    var titleElem = document.createElement('span');
-    elem.appendChild(titleElem);
-    titleElem.className = "title";
-    titleElem.textContent = options.title;
-
-    elem.onmousedown = function() {
-      return false;
-    };
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-
-  }
-
-  function renderItems() {
-    var items = options.items || [];
-    var list = document.createElement('ul');
-    items.forEach(function(item) {
-      var li = document.createElement('li');
-      li.textContent = item;
-      list.appendChild(li);
-    });
-    elem.appendChild(list);
-  }
-
-  function open() {
-    if (!elem.querySelector('ul')) {
-      renderItems();
-    }
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/style.css b/2-ui/5-widgets/2-widgets-structure/menu-dom.view/style.css
deleted file mode 100644
index 23937561..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu-dom.view/style.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu.view/index.html b/2-ui/5-widgets/2-widgets-structure/menu.view/index.html
deleted file mode 100644
index 306dab27..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <div id="sweets-menu" class="menu">
-    <span class="title">Сладости</span>
-    <ul>
-      <li>Торт</li>
-      <li>Пончик</li>
-      <li>Пирожное</li>
-      <li>Шоколадка</li>
-      <li>Мороженое</li>
-    </ul>
-  </div>
-
-  <script>
-    var menu = new Menu({
-      elem: document.getElementById('sweets-menu')
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu.view/menu.js b/2-ui/5-widgets/2-widgets-structure/menu.view/menu.js
deleted file mode 100644
index 847a72fd..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu.view/menu.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function Menu(options) {
-  var elem = options.elem;
-
-  elem.onmousedown = function() {
-    return false;
-  }
-
-  elem.onclick = function(event) {
-    if (event.target.closest('.title')) {
-      elem.classList.toggle('open');
-    }
-  };
-
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu.view/style.css b/2-ui/5-widgets/2-widgets-structure/menu.view/style.css
deleted file mode 100644
index 23937561..00000000
--- a/2-ui/5-widgets/2-widgets-structure/menu.view/style.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md
deleted file mode 100644
index a4fddc9e..00000000
--- a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md
+++ /dev/null
@@ -1,35 +0,0 @@
-Несмотря на то, что меню более-менее прилично отображается, эта вёрстка совершенно не семантична. 
-
-Ошибки:
-<ol>
-<li>Во-первых, меню представляет собой *список элементов*, а для списка существует тег `LI`.
-
-**Семантический подход -- это когда теги используются по назначению.** Для элементов списка `<li>`, для адреса `<address>`, для заголовка таблицы `<th>` и т.п.
-</li>
-<li>Во-вторых, класс `rounded-horizontal-blocks` показывает, что содержимое должно быть *оформлено* как скругленные горизонтальные блоки. Любой класс, отражающий оформление, несемантичен.
-
-**Правильно -- чтобы класс был *смысловым***. Например, `<ul class="menu">` будет говорить о том, что смысл элемента -- "меню".</li>
-<li>В-третьих, элемент `.vertical-splitter`. Здесь класс вполне семантичен, этот элемент списка является вертикальным разделителем, так что здесь всё в порядке. Но на этот раз несемантичность -- в содержимом. 
-
-**Мы, по возможности, стараемся, чтобы HTML содержал именно информацию, а символ вертикальной черты`|` выполняет чисто оформительскую функцию.**
-
-Поэтому от него следует либо вообще избавиться, либо переместить в CSS при помощи `::before`.</li>
-</ol>
-
-И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в `<a>` или `<button>`. 
-
-Вариант ниже -- семантичен:
-
-```html
-<ul class="menu">
-  <li class="menu__item"><a href="#">Главная</a></li>
-  <li class="menu__vertical-splitter"></li>
-  <li class="menu__item"><a href="#">Товары</a></li>
-  <li class="menu__item"><a href="#">Фотографии</a></li>
-  <li class="menu__item"><a href="#">Контакты</a></li>
-</ul>
-```
-
-Дополнительно, классы помечены префиксом компонента, на тот случай, если в заголовках появится произвольный HTML. 
-
-
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html
deleted file mode 100755
index c7994709..00000000
--- a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .menu {
-      margin: 0;
-      padding: 0;
-    }
-    
-    .menu__item {
-      list-style: none;
-      display: inline-block;
-      padding: 6px;
-      margin: 0 2px;
-      border: 1px solid gray;
-      border-radius: 10px;
-      cursor: pointer;
-      font-size: 90%;
-      background: #FFF5EE;
-    }
-    
-    .menu__vertical-splitter {
-      list-style: none;
-      display: inline-block;
-    }
-    
-    .menu__vertical-splitter:before {
-      content: "|";
-    }
-    
-    .menu__item a {
-      color: black;
-      text-decoration: none;
-    }
-    
-    .menu__item a:hover {
-      text-decoration: underline;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="menu">
-    <li class="menu__item"><a href="#">Главная</a></li>
-    <li class="menu__vertical-splitter"></li>
-    <li class="menu__item"><a href="#">Товары</a></li>
-    <li class="menu__item"><a href="#">Фотографии</a></li>
-    <li class="menu__item"><a href="#">Контакты</a></li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html
deleted file mode 100755
index 23e27375..00000000
--- a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .rounded-horizontal-blocks .item {
-      float: left;
-      padding: 6px;
-      margin: 0 2px;
-      border: 1px solid gray;
-      border-radius: 10px;
-      cursor: pointer;
-      font-size: 90%;
-      background: #FFF5EE;
-    }
-    
-    .vertical-splitter {
-      float: left;
-      padding: 6px;
-      margin: 0 2px;
-    }
-    
-    .item:hover {
-      text-decoration: underline;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div class="rounded-horizontal-blocks">
-    <div class="item">Главная</div>
-    <div class="vertical-splitter">|</div>
-    <div class="item">Товары</div>
-    <div class="item">Фотографии</div>
-    <div class="item">Контакты</div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md
deleted file mode 100644
index 6f18ba14..00000000
--- a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Семантическое меню
-
-[importance 5]
-
-Посмотрите на вёрстку горизонтального меню.
-
-```html
-<div class="rounded-horizontal-blocks">
-  <div class="item">Главная</div>
-  <div class="vertical-splitter">|</div>
-  <div class="item">Товары</div>
-  <div class="item">Фотографии</div>
-  <div class="item">Контакты</div>
-</div>
-```
-
-
-
-```css
-/*+ hide="Результат со стилями (показать стили)" */
-.rounded-horizontal-blocks .item {
-  float: left;
-  padding: 6px;
-  margin: 0 2px;
-  border: 1px solid gray;
-  border-radius: 10px;
-  cursor: pointer;
-  font-size: 90%;
-  background: #FFF5EE;
-}
-
-.vertical-splitter {
-  float: left;
-  padding: 6px;
-  margin: 0 2px;
-}
-
-.item:hover {
-  text-decoration: underline;
-}
-```
-
-[iframe src="source" border=1 height=50 edit link]
-
-Что делает эту вёрстку несемантичной? Найдите 3 ошибки (или больше).
-
-Как бы вы сверстали меню правильно?
diff --git a/2-ui/5-widgets/3-widgets-markup/article.md b/2-ui/5-widgets/3-widgets-markup/article.md
deleted file mode 100644
index dede3878..00000000
--- a/2-ui/5-widgets/3-widgets-markup/article.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Вёрстка графических компонентов
-
-При создании графических компонент ("виджетов") в первую очередь придумывается их HTML/CSS-структура.
-	
-Как будет выглядеть виджет в обычном состоянии? Как будет меняться в процессе взаимодействия с посетителем? 
-	
-Чтобы разработка виджета была удобной, при вёрстке полезно соблюдать несколько простых, но очень важных соглашений.
-	
-[cut]
-
-## Семантическая вёрстка
-
-HTML-разметка и названия CSS-классов должны отражать не оформление, а смысл.
-
-Например, сообщение об ошибке можно сверстать так:
-
-```html
-<div *!*style="color:red; border: 1px solid red"*/!*>
-  Плохая вёрстка сообщения об ошибке: атрибут style!
-</div>
-```
-
-...Или так:
-
-```html
-<div *!*class="red red-border"*/!*>
-  Плохая вёрстка сообщения об ошибке: несемантический class!
-</div>
-```
-
-В обоих случаях вёрстка не является семантической. В первом случае -- стиль, а во втором -- класс содержат информацию об *оформлении*.
-
-**При семантической вёрстке классы описывают смысл ("что это?" -- меню, кнопка...) и состояние (открыто, закрыто, отключено...) компонента.**
-
-Например:
-
-```html
-<div *!*class="error"*/!*>
-  Сообщение об ошибке (error), правильная вёрстка!
-</div>
-```
-
-У предупреждения будет класс `message` и так далее, по смыслу.
-
-```html
-<div *!*class="warning"*/!*>
-  Предупреждение  (warning), правильная вёрстка!
-</div>
-```
-
-Семантическая верстка упрощает поддержку и развитие CSS, упрощает взаимодействие между членами команды.
-
-Такая верстка удобна для организации JS-кода. В коде мы просто ставим нужный класс, остальное делает CSS.
-
-## Состояние виджета -- класс на элементе
-
-Зачастую компонент может иметь несколько состояний. Например, меню может быть открыто или закрыто.
-
-**Состояние должно добавляться CSS-классом не на тот элемент, который нужно скрыть/показать/..., а на тот, к которому оно "по смыслу" относится, обычно -- на корневой элемент.**
-
-Например, меню в закрытом состоянии скрывает свой список элементов. Класс `open` нужно добавлять не к списку опций `<ul>`, который скрывается-показывается, а к *корневому элементу* виджета, поскольку это состояние касается всего меню:
-
-```html
-<div class="menu *!*open*/!*">
-  <span class="title">Заголовок меню</span>
-  <ul>
-    <li>Список элементов</li>
-  </ul>
-</div>
-```
-
-Или, к примеру, разметка для индикатора загрузки может выглядеть так:
-
-```html
-<div class="indicator *!*loading*/!*">
-  <span class="progress">Тут показывается прогресс</span>
-</div>
-```
-
-Состояние индикатора может быть "в процессе" (loading) или "загрузка завершена" (complete). С точки зрения оформления оно может влиять только на показ внутреннего `span`, но ставить его нужно всё равно на внешний элемент, ведь это -- состояние всего компонента.
-
-Из примеров выше можно подумать, что классы, описывающие состояние, всегда ставятся на корневой элемент. Но это не так.
-
-Возможно и такое, что состояние относится к внутреннему элементу. Например, для дерева состояние открыт/закрыт относится к узлу, соответственно, класс должен быть на узле.
-
-Например:
-
-```html
-<ul class="tree">
-  <li class="*!*closed*/!*">
-    Закрытый узел дерева
-  </li>
-  <li class="*!*open*/!*">
-    Открытый узел дерева
-  </li>
-  ...
-</ul>
-```
-
-## Префиксы компонента у классов
-
-Рассмотрим пример вёрстки "диалогового окна":
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<div class="dialog">
-  <h2 class="title">Заголовок</h2>
-  <div class="content">
-    HTML-содержимое.
-  </div>
-  <div class="close">Закрыть</div>
-</div>
-
-<style>
-.dialog {
-  background: lightgreen;
-  border: lime 2px solid;
-  border-radius: 10px;
-  padding: 4px;
-  position: relative;
-}
-
-*!*
-.dialog .title {
-  margin: 0;
-  font-size: 24px;
-  color: darkgreen;
-}
-*/!*
-
-.dialog .content {
-  padding: 10px 0 0 0;
-}
-
-.dialog .close {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  font-size: 10px;
-}
-</style>
-```
-
-Диалоговое окно может иметь любое HTML-содержимое.
-
-А что будет, если в этом содержимом окажется меню -- да-да, то самое, которое рассмотрели выше, со `<span class="title">` ?
-
-Правило `.dialog .title` применяется ко всем `.title` внутри `.dialog`, а значит -- и к нашему меню тоже. Будет конфликт стилей с непредсказуемыми последствиями.
-
-Конечно, можно попытаться бороться с этим. Например, жёстко задать вложенность -- использовать класс `.dialog > .title`. Это сработает в данном конкретном примере, но как быть в тех местах, где между `.dialog` и `.title` есть другие элементы? Длинные цепочки вида `.dialog > ... > .title` страшновато выглядят и делают вёрстку ужасно негибкой. К счастью, есть альтернативный путь.
-
-**Чтобы избежать возможных проблем, все классы внутри виджета начинают с его имени.**
-
-Здесь имя `dialog`, так что все, относящиеся к диалогу, будем начинать с `dialog__`
-
-Получится так:
-
-```html
-<div class="*!*dialog*/!*">
-  <h2 class="dialog__title">Заголовок</h2>
-  <div class="dialog__content">
-    HTML-содержимое.
-  </div>
-  <div class="dialog__close">Закрыть</div>
-</div>
-
-<style>
-  .dialog { ... }
-  .dialog__title { стиль заголовка }
-  .dialog__content { стиль содержимого  }
-  ...
-</style>
-```
-
-Здесь двойное подчёркивание `__` служит "стандартным" разделителем. Можно выбрать и другой разделитель, но при этом стоит иметь в виду, что иногда имя класса может состоять из нескольких слов. Например `title-picture`. С двойным подчёркиванием: `dialog__title-picture`, очень наглядно видно где что.
-
-Есть ещё одно полезное правило, которое заключается в том, что стили должны вешаться на класс, а не на тег. То есть, не `h2 { ... }`, а `.dialog__title { ... }`, где `.dialog__title` -- класс на соответствующем заголовке. 
-
-Это позволяет и избежать конфликтов на вложенных `h2`, и использовать всегда те теги, которые имеют правильный смысл, не оглядываясь на встроенные стили (которые можно обнулить своими).
-
-
-[smart header="Без фанатизма"]
-На практике из этих правил зачастую делают исключения. Можно "вешать" стили на теги и использовать CSS-каскады без префиксов, если мы при этом твёрдо понимаем, что конфликты заведомо исключены.
-
-Например, когда мы точно знаем, что никакого произвольного HTML внутри элемента (или внутри данного поддерева DOM) не будет.
-[/smart]
-
-## БЭМ
-
-Описанное выше правило именования элементов является частью более общей концепции "БЭМ", которая разработана в Яндексе. 
-
-БЭМ предлагает способ организации HTML/CSS/JS в виде независимых "блоков" -- компонент, которые можно легко перемещать по файловой системе и между проектами. 
-
-Можно как взять часть идеологии, например систему именования классов, так и полностью перейти на инструментарий БЭМ, который даёт инструменты сборки для HTML/JS/CSS, описанных по БЭМ-методу.
-
-Более подробное описание основ БЭМ можно почитать в статье [](https://ru.bem.info/articles/bem-for-small-projects/), а о системе вообще -- на сайте [](http://ru.bem.info).
-
-## Итого 
-
-<ul>
-<li>Вёрстка должна быть семантической, использовать соответствующие смыслу информации теги и классы.</li>
-<li>Класс, описывающий состояние всего компонента, нужно ставить на его корневом элементе, а не на том, который нужно "украсить" в этом состоянии. Если состояние относится не ко всему компоненту, а к его части -- то на соответствующем "по смыслу" DOM-узле.</li>
-<li>Классы внутри компонента должны начинаться с префикса -- имени компонента.
-
-Это не всегда строго необходимо, но позволяет избежать проблем в случаях, когда компонент может содержать произвольный DOM, как например диалоговое окно с произвольным HTML-текстом.
-
-Использование `.dialog__title` вместо `.dialog .title` гарантирует, что CSS не применится по ошибке к какому-нибудь другому `.title` внутри диалога.
-</li>
-</ul>
-
-
-
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md
deleted file mode 100644
index 8b137891..00000000
--- a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html
deleted file mode 100755
index 973965b2..00000000
--- a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    
-    td {
-      border: 1px solid gray;
-      padding: 2px 5px;
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="grid-holder"></div>
-
-  <script type="text/template" id="grid-template">
-    <table>
-      <thead>
-        <tr>
-          <th>Имя</th>
-          <th>Возраст</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% for(var i = 0; i < list.length; i++) { %>
-          <tr>
-            <td>
-              <%=list[i].name%>
-            </td>
-            <td>
-              <%=list[i].age%>
-            </td>
-          </tr>
-          <% } %>
-      </tbody>
-    </table>
-  </script>
-
-  <script>
-    var users = [{
-      name: "Вася",
-      age: 10
-    }, {
-      name: "Петя",
-      age: 15
-    }, {
-      name: "Женя",
-      age: 20
-    }, {
-      name: "Маша",
-      age: 25
-    }, {
-      name: "Даша",
-      age: 30
-    }];
-
-    var tmpl = document.getElementById('grid-template').innerHTML.trim();
-    tmpl = _.template(tmpl);
-
-
-    document.getElementById('grid-holder').innerHTML = tmpl({
-      list: users
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html
deleted file mode 100755
index 3b58c4f1..00000000
--- a/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-</head>
-
-<body>
-
-  <div id="grid-holder"></div>
-
-  <script type="text/template" id="grid-template">
-    ..ваш шаблон..
-  </script>
-
-  <script>
-    var users = [{
-      name: "Вася",
-      age: 10
-    }, {
-      name: "Петя",
-      age: 15
-    }, {
-      name: "Женя",
-      age: 20
-    }, {
-      name: "Маша",
-      age: 25
-    }, {
-      name: "Даша",
-      age: 30
-    }, ];
-
-    // ваш код, чтобы сгенерировать таблицу с юзерами (table/tr/td) по шаблону и данным users
-    // выведите таблицу внутри #grid-holder
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/task.md b/2-ui/5-widgets/4-template-lodash/1-table-template/task.md
deleted file mode 100644
index e3f9fc0c..00000000
--- a/2-ui/5-widgets/4-template-lodash/1-table-template/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Шаблон для таблицы с пользователями
-
-[importance 5]
-
-Есть данные:
-
-```js
-//+ no-beautify
-var users = [
-  {name: "Вася", age: 10},
-  {name: "Петя", age: 15},
-  {name: "Женя", age: 20},
-  {name: "Маша", age: 25},
-  {name: "Даша", age: 30},
-];
-```
-
-Выведите их в виде таблицы `TABLE/TR/TD` при помощи шаблона.
-
-Результат:
-
-[iframe src="solution" height=180]
-
-
-
diff --git a/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md b/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md
deleted file mode 100644
index dc8172d6..00000000
--- a/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Основная причина -- шаблон может быть любым, даже некорректным HTML. В `DIV` доставить незакрытым тег -- и могут быть проблемы. А в скрипте может быть почти что угодно, его содержимое полностью игнорируется.
-
-Кроме того, содержимое `DIV` браузер обрабатывает, создаёт DOM-узлы, добавляет их в документ, но там они совсем не нужны, это же шаблон.
-
-Альтернативный вариант -- поместить шаблон в комментарий `<!-- ... -->`, его содержимое можно получить при помощи `node.data`. Но у узла-комментария не может быть `id`, так что это менее удобно.
diff --git a/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md b/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md
deleted file mode 100644
index de2b67d3..00000000
--- a/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Шаблон в div с display:none?
-
-[importance 5]
-
-Что лучше для размещения шаблона -- <code>&lt;script&gt;</code> с нестандартным `type` или `<div>` с `display:none`?
-
-Почему? Есть ли какие-то другие хорошие варианты?
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md
deleted file mode 100644
index c2dab647..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-В решении обратим внимание:
-<ul>
-<li>Чтобы ссылка `href` была корректной, даже если в ключах `items` попались русские символы и пробелы -- используется функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).</li>
-<li>Для вывода `href` при клике на ссылку используется делегирование. Причём обработчик не сам выводит `href`, а лишь разбирается в произошедшем и вызывает функцию `select`, которая представляет действие "выбора" элемента меню. В последующих примерах эта функция станет сложнее.</li>
-</ul>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
deleted file mode 100755
index bcca8f1b..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%></span>
-    </div>
-  </script>
-
-  <!-- 
-встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
-например русские буквы и пробелы 
-в этом примере русских букв в ключах items нет, но потенциально они возможны
--->
-  <script type="text/template" id="menu-list-template">
-    <ul>
-      <% for(var name in items) { %>
-        <li>
-          <a href="#<%=encodeURIComponent(name)%>">
-            <%-items[name]%>
-          </a>
-        </li>
-        <% } %>
-    </ul>
-  </script>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      template: _.template(document.getElementById('menu-template').innerHTML.trim()),
-      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
-      items: {
-        cake: "Торт", // cake  <a href="#cake">Торт</a>
-        donut: "Пончик", // donut
-        chokolate: "Шоколадка" // chokolate
-      }
-    });
-
-    document.body.appendChild(menu.getElem());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
deleted file mode 100755
index 23937561..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js
deleted file mode 100755
index 8f1b2aea..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js
+++ /dev/null
@@ -1,66 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-
-      if (event.target.closest('a')) {
-        event.preventDefault();
-        select(event.target.closest('a'));
-      }
-
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function select(link) {
-    alert(link.getAttribute('href').slice(1));
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
deleted file mode 100755
index 6cfeb123..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%></span>
-    </div>
-  </script>
-
-  <script type="text/template" id="menu-list-template">
-    <ul>
-      <% items.forEach(function(item) { %>
-        <li>
-          <%-item%>
-        </li>
-        <% }); %>
-    </ul>
-  </script>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      template: _.template(document.getElementById('menu-template').innerHTML.trim()),
-      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
-      items: [
-        "Торт", // cake  <a href="#cake">Торт</a>
-        "Пончик", // donut
-        "Шоколадка" // chokolate
-      ]
-    });
-
-    document.body.appendChild(menu.getElem());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
deleted file mode 100755
index 23937561..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
deleted file mode 100755
index a34d2931..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
+++ /dev/null
@@ -1,56 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md
deleted file mode 100644
index c30c95af..00000000
--- a/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Сделайте меню ссылками
-
-[importance 5]
-
-Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы оно выводило не просто список, а список ссылок.
-
-<ol>
-<li>Вместо массива `items` меню должно принимать *объект* `items`, вот так:
-
-```js
-var menu = new Menu({
-  title: "Сладости",
-  template: _.template(document.getElementById('menu-template').innerHTML),
-  listTemplate: _.template(document.getElementById('menu-list-template').innerHTML),
-*!*
-  items: {
-    "donut": "Пончик",
-    "cake": "Пирожное",
-    "chocolate": "Шоколадка"
-  }
-*/!*
-});
-```
-</ol>
-<li>Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`. При клике на ссылку должно выводиться название из её `href`.</li>
-</ol>
-
-Демо:
-
-[iframe src="solution" height="130" border="1"]
diff --git a/2-ui/5-widgets/4-template-lodash/article.md b/2-ui/5-widgets/4-template-lodash/article.md
deleted file mode 100644
index d6a898c4..00000000
--- a/2-ui/5-widgets/4-template-lodash/article.md
+++ /dev/null
@@ -1,584 +0,0 @@
-# Шаблонизатор LoDash
-
-В этой главе мы рассмотрим *шаблонизацию* -- удобный способ генерации HTML по "шаблону" и данным.
-
-[cut]
-
-Большинство виджетов, которые мы видели ранее, получают готовый HTML/DOM и "оживляют" его. Это типичный случай в сайтах, где JavaScript -- на ролях "второго помощника". Разметка, CSS уже есть, от JavaScript, условно говоря, требуются лишь обработчики, чтобы менюшки заработали.
-
-Но в сложных интерфейсах разметка изначально отсутствует на странице. Компоненты генерируют свой DOM сами, динамически, на основе данных, полученных с сервера или из других источников. 
-
-## Зачем нужны шаблоны?
-
-Ранее мы уже видели код `Menu`, который сам создаёт свой элемент:
-
-```js
-//+ no-beautify
-function Menu(options) {
-  // ... приведены только методы для генерации DOM ...
-
-  function render() {
-    elem = document.createElement('div');
-    elem.className = "menu";
-
-    var titleElem = document.createElement('span');
-    elem.appendChild(titleElem);
-    titleElem.className = "title";
-    titleElem.textContent = options.title;
-
-    elem.onmousedown = function() { 
-      return false; 
-    };
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-
-  }
-
-  function renderItems() {
-    var items = options.items || [];
-    var list = document.createElement('ul');
-    items.forEach(function(item) {
-      var li = document.createElement('li');
-      li.textContent = item;
-      list.appendChild(li);
-    });
-    elem.appendChild(list);
-  }
-  // ...
-}
-```
-
-Понятен ли этот код? Очевидно ли, какой HTML генерируют методы `render`, `renderItems`?
-
-С первого взгляда -- вряд ли. Нужно как минимум внимательно посмотреть и продумать код, чтобы разобраться, какая именно DOM-структура создаётся. 
-
-...А что, если нужно изменить создаваемый HTML? ...А что, если эта задача досталась не программисту, который написал этот код, а верстальщику, который c HTML/CSS проекта знаком отлично, но этот JS-код видит впервые? Вероятность ошибок при этом зашкаливает за все разумные пределы. 
-
-К счастью, генерацию HTML можно упростить. Для этого воспользуемся библиотекой шаблонизации.
-
-## Пример шаблона
-
-*Шаблон* -- это строка в специальном формате, которая путём подстановки значений (текст сообщения, цена и т.п.) и выполнения встроенных фрагментов кода превращается в DOM/HTML.
-
-Пример шаблона для меню:
-
-```html
-<!--+ no-beautify -->
-<div class="menu">
-  <span class="title"><%-title%></span>
-  <ul>
-    <% items.forEach(function(item) { %>
-    <li><%-item%></li>
-    <% }); %>
-  </ul>
-</div>
-```
-
-Как видно, это обычный HTML, с вставками вида `<% ... %>`. 
-
-Для работы с таким шаблоном используется специальная функция `_.template`, которая предоставляется фреймворком [LoDash](http://lodash.com/docs#template), её синтаксис мы подробно посмотрим далее.
-
-Пример использования `_.template` для генерации HTML с шаблоном выше:
-
-```js
-*!*
-// сгенерировать HTML, используя шаблон tmpl (см. выше) 
-// с данными title и items
-*/!*
-var html = _.template(tmpl)({
-  title: "Сладости",
-  items: [
-    "Торт",
-    "Печенье",
-    "Пирожное"
-  ]
-});
-```
-
-Значение `html` в результате:
-
-```html
-<div class="menu">
-  <span class="title">Сладости</span>
-  <ul>
-    <li>Торт</li>
-    <li>Печенье</li>
-    <li>Сладости</li>
-  </ul>
-</div>
-```
-
-Этот гораздо проще, чем JS-код, не правда ли? Шаблон очень наглядно показывает, что в итоге должно получиться. В отличие от кода, в шаблоне первичен текст, а вставок кода обычно мало.
-
-Давайте подробнее познакомимся с `_.template` и синтаксисом шаблонов.
-
-[warn header="Holy war detected!"]
-Способов шаблонизации и, в особенности, синтаксисов шаблонов, примерно столько же, сколько способов [поймать льва в пустыне](http://lurkmore.to/%D0%9A%D0%B0%D0%BA_%D0%BF%D0%BE%D0%B9%D0%BC%D0%B0%D1%82%D1%8C_%D0%BB%D1%8C%D0%B2%D0%B0_%D0%B2_%D0%BF%D1%83%D1%81%D1%82%D1%8B%D0%BD%D0%B5). Иначе говоря... много.
-
-Эта глава -- совершенно не место для священных войн на эту тему. 
-
-Далее будет более полный обзор типов шаблонных систем, применяемых в JavaScript, но начнём мы с `_.template`, поскольку эта функция проста, быстра и демонстрирует приёмы, используемые в целом классе шаблонных систем, активно используемых в самых разных JS-проектах.
-[/warn]
-
-## Синтаксис шаблона 
-
-Шаблон представляет собой строку со специальными разделителями, которых всего три:
-
-<dl>
-<dt>`<% code %>` -- код</dt>
-<dd>Код между разделителями `<% ... %>` будет выполнен "как есть"</dd>
-<dt>`<%= expr %>` -- для вставки `expr` как HTML</dt>
-<dd>Переменная или выражение внутри `<%= ... %>` будет вставлено  "как есть". Например: `<%=title %>` вставит значение переменной `title`, а `<%=2+2%>` вставит `4`.</dd>
-<dt>`<%- expr %>` -- для вставки `expr` как текста</dt>
-<dd>Переменная или выражение внутри `<%- ... %>` будет вставлено "как текст", то есть с заменой символов `< > & " '` на соответствующие HTML-entities. 
-
-Например, если `expr` содержит текст `<br>`, то при `<%-expr%>` в результат попадёт, в отличие от `<%=expr%>`, не HTML-тег `<br>`, а  текст `&lt;br&gt;`.</dd>
-</dl>
-
-## Функция _.template
-
-Для работы с шаблоном в библиотеке [LoDash](https://github.com/bestiejs/lodash) есть функция `_.template(tmpl, data, options)`.
-
-Её аргументы:
-<dl>
-<dt>`tmpl`</dt>
-<dd>Шаблон.</dd>
-<dt>`options`</dt>
-<dd>Необязательные настройки, например можно поменять разделители.</dd>
-</dl>
-
-Эта функция запускает "компиляцию" шаблона `tmpl` и возвращает результат в виде функции, которую далее можно запустить с данными и получить строку-результат.
-
-Вот так:
-
-```js
-//+ run
-*!*
-// Шаблон
-*/!*
-var tmpl = _.template('<span class="title"><%=title%></span>');
-
-*!*
-// Данные
-*/!*
-var data = {
-  title: "Заголовок"
-};
-
-*!*
-// Результат подстановки
-*/!*
-alert( tmpl(data) ); // <span class="title">Заголовок</span>
-```
-
-Пример выше похож на операцию "поиск-и-замена": шаблон просто заменил `<%=title%>` на значение свойства `data.title`.
-
-Но возможность вставки JS-кода делает шаблоны сильно мощнее.
-
-Например, вот шаблон для генерации списка от `1` до `count`:
-
-```js
-//+ run no-beautify
-// используется \, чтобы объявить многострочную переменную-текст шаблона
-var tmpl = '<ul>\
-  <% for (var i=1; i<=count; i++) { %> \
-    <li><%=i%></li> \
-  <% } %>\
-</ul>';
-alert( _.template(tmpl)({count: 5}) ); // <ul><li>1</li><li>2</li>...</ul>
-```
-
-Здесь в результат попал сначала текст `<ul>`, потом выполнился код `for`, который последовательно сгенерировал элементы списка, и затем список был закрыт `</ul>`.  
-
-## Хранение шаблона в документе
-
-Шаблон -- это многострочный HTML-текст. Записывать его прямо в скрипте -- неудобно. 
-
-Один из альтернативных способов объявления шаблона -- записать его в HTML, в тег <code>&lt;script&gt;</code> с нестандартным `type`, например `"text/template"`:
-
-```html
-<script type="*!*text/template*/!*" id="menu-template">
-<div class="menu">
-  <span class="title"><%-title%></span> 
-</div>
-</script>
-```
-
-Если `type` не знаком браузеру, то содержимое такого скрипта игнорируется, однако оно доступно при помощи `innerHTML`:
-
-```js
-var template = document.getElementById('menu-template').innerHTML;
-```
-
-В данном случае выбран `type="text/template"`, однако подошёл бы и любой другой нестандартный, например `text/html`. Главное, что браузер такой скрипт никак не обработает. То есть, это всего лишь способ передать строку шаблона в HTML.
-
-Полный пример цикла с подключением библиотеки и шаблоном в HTML:
-
-```html
-<!--+ run height=150 -->
-<!-- библиотека LoDash -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-<!-- шаблон для списка от 1 до count -->
-<script *!*type="text/template"*/!* id="list-template">
-<ul>
-  <% for (var i=1; i<=count; i++) { %>
-  <li><%=i%></li>
-  <% } %>
-</ul>
-</script>
-
-<script>
-  var tmpl = _.template(document.getElementById('list-template').innerHTML);
-
-*!*  
-  // ..а вот и результат
-  var result = tmpl({count: 5});
-  document.write( result );
-*/!*
-</script>
-```
-
-## Как работает функция _.template?
-
-Понимание того, как работает `_.template`, очень важно для отладки ошибок в шаблонах. 
-
-Как обработка шаблонов устроена внутри? За счёт чего организована возможность перемежать с текстом произвольный JS-код? 
-
-Оказывается, очень просто.  
-
-Вызов `_.template(str)` разбивает строку `str` по разделителям и, при помощи `new Function` создаёт на её основе JavaScript-функцию. Тело этой функции создаётся таким образом, что код, который в шаблоне оформлен как `<% ... %>` -- попадает в неё "как есть", а переменные и текст прибавляются к специальному временному "буферу", который в итоге возвращается.
-
-Взглянем на пример:
-
-```js
-//+ run
-var compiled = _.template("<h1><%=title%></h1>");
-
-alert( compiled );
-```
-
-Функция `compiled`, которую вернул вызов `_template` из этого примера, выглядит примерно так:
-
-```js
-//+ no-beautify
-function(obj) { 
-  obj || (obj = {}); 
-  var __t, __p = '', __e = _.escape; 
-  with(obj) { \
-    __p += '<h1>' + 
-      ((__t = (title)) == null ? '' : __t) + 
-      '</h1>';
-  }
-  return __p
-}
-```
-
-Она является результатом вызова `new Function("obj", "код")`, где `код` динамическим образом генерируется на основе шаблона:
-<ol>
-<li>Вначале в коде идёт "шапка" -- стандартное начало функции, в котором объявляется переменная `__p`. В неё будет записываться результат.</li>
-<li>Затем добавляется блок `with(obj) { ... }`, внутри которого в `__p` добавляются фрагменты HTML из шаблона, а также переменные из выражений `<%=...%>`. Код из `<%...%>` копируется в функцию "как есть".</li>
-<li>Затем функция завершается, и `return __p` возвращает результат.</li>
-</ol>
-
-При вызове этой функции, например `compiled({title: "Заголовок"})`, она получает объект данных как `obj`, здесь это `{title: "Заголовок"}`, и если внутри `with(obj) { .. }` обратиться к `title`, то по правилам [конструкции with](/with) это свойство будет получено из объекта.
-
-[smart header="Можно и без `with`"]
-Конструкция `with` является устаревшей, но в данном случае она полезна. 
-
-Так как функция создаётся через `new Function("obj", "код")` то:
-<ul>
-<li>Она работает в глобальной области видимости, не имеет доступа к внешним локальным переменным.</li>
-<li>Внешний `use strict` на такую функцию не влияет, то есть даже в строгом режиме шаблон продолжит работать.</li>
-</ul>
-Если мы всё же не хотим использовать `with` -- нужно поставить второй параметр -- `options`, указав параметр `variable` (название переменной с данными).
-
-Например:
-
-```js
-//+ run no-beautify
-alert( _.template("<h1><%=menu.title%></h1>", {variable: "menu"}) );
-```
-
-Результат:
-
-```js
-*!*
-function(*!*menu*/!*) {
-*/!*
-  var __t, __p = '';
-  __p += '<h1>' +
-    ((__t = (menu.title)) == null ? '' : __t) +
-    '</h1>';
-  return __p
-}
-```
-
-При таком подходе переменная `title` уже не будет искаться в объекте данных автоматически, поэтому нужно будет обращаться к ней как `<%=menu.title%>`.
-[/smart]
-
-[smart header="Кеширование скомпилированных шаблонов"]
-Чтобы не компилировать один и тот же шаблон много раз, результаты обычно кешируют.
-
-Например, глобальная функция `getTemplate("menu-template")` может доставать шаблон из HTML, компилировать, результат запоминать и сразу отдавать при последующих обращениях к тому же шаблону. 
-[/smart]
-
-### Меню на шаблонах
- 
-Рассмотрим для наглядности полный пример меню на шаблонах.
-
-HTML (шаблоны):
-
-```html
-<!--+ no-beautify -->
-<script type="text/template" id="menu-template">
-<div class="menu">
-  <span class="title"><%-title%></span>
-</div>
-</script>
-
-<script type="text/template" id="menu-list-template">
-<ul>
-  <% items.forEach(function(item) { %>
-  <li><%-item%></li>
-  <% }); %>
-</ul>
-</script>
-```
-
-JS для создания меню:
-
-```js
-var menu = new Menu({
-  title: "Сладости",
-*!*
-  // передаём также шаблоны
-*/!*
-  template: _.template(document.getElementById('menu-template').innerHTML),
-  listTemplate: _.template(document.getElementById('menu-list-template').innerHTML),
-  items: [
-    "Торт",
-    "Пончик",
-    "Пирожное",
-    "Шоколадка",
-    "Мороженое"
-  ]
-});
-
-document.body.appendChild(menu.getElem());
-```
-
-JS код `Menu`:
-
-```js
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
-```
-
-Результат:
-
-[iframe src="menu-template" height="160"]
-
-Здесь два шаблона. Первый мы уже разобрали, посмотрим теперь на список `ul/li`:
-
-```html
-<!--+ no-beautify -->
-<ul>
-  <% items.forEach(function(item) { %>
-  <li><%-item%></li>
-  <% }); %>
-</ul>
-```
-
-Если разбить шаблон для списка элементов по разделителям, то он будет таким:
-<ul>
-<li>`<ul>` -- текст</li>
-<li>`<% items.forEach(function(item) { %>` -- код</li>
-<li>`<li>` -- текст</li>
-<li>`<%-item%>` -- вставить значение `item` с экранированием</li>
-<li>`</li>` -- текст</li>
-<li>`<% }); %>` -- код</li>
-<li>`</ul>` -- текст</li>
-</ul>
-
-Вот функция, которую возвратит `_.template(tmpl)` для этого шаблона:
-
-```js
-//+ no-beautify
-function(obj) {
-  obj || (obj = {});
-  var __t, __p = '', __e = _.escape;
-  with(obj) {
-*!*
-    __p += '\n<ul>\n  ';
-    items.forEach(function(item) { 
-      __p += '\n  <li>' + 
-        __e(item) + // <%-item%> экранирование функцией _.escape
-        '</li>\n  ';
-    });
-    __p += '\n</ul>\n';
-*/!*
-  }
-  return __p
-}
-```
-
-Как видно, она один-в-один повторяет код и вставляет текст в переменную `__p`. При этом выражение в `<%-...%>` обёрнуто в вызов [_.escape](http://lodash.com/docs#escape), который заменяет спецсимволы HTML на их текстовые варианты.
-
-## Отладка шаблонов
-
-Что, если в шаблоне ошибка? Например, синтаксическая. Конечно, ошибки будут возникать, куда же без них. 
-
-Шаблон компилируется в функцию, ошибка будет либо при компиляции, либо позже, в процессе её выполнения. В различных шаблонных системах есть свои средства отладки, `_.template` тут не блистатет.
-
-Но и здесь можно кое-что отладить. При ошибке, если она не синтаксическая, отладчик при этом останавливается где-то посередине "страшной" функции. 
-
-
-Попробуйте сами запустить пример с открытыми инструментами разработчика и *включённой* опцией "остановка при ошибке":
-
-```html
-<!--+ run  no-beautify -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-<script type="text/template" id="menu-template">
-<div class="menu">
-  <span class="title"><%-title%>
-  <ul>
-  <% items.forEach(function(item) { %>
-    <li><%-item%></li>
-  <% }); %>
-  </ul>
-</div>
-</script>
-
-<script>
-  var tmpl = _.template(document.getElementById('menu-template').innerHTML);
- 
-  var result = tmpl({ title: "Заголовок" });
-
-  document.write(result);
-</script>
-```
-
-В шаблоне допущена ошибка, поэтому отладчик остановит выполнение. 
-
-В Chrome картина будет примерно такой:
-
-<img src="template-debugger.png">
-
-Библиотека LoDash пытается нам помочь, подсказать, в каком именно шаблоне произошла ошибка. Ведь из функции это может быть неочевидно. 
-
-Для этого она добавляет к шаблонам специальный идентификатор [sourceURL](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl), который служит аналогом "имени файла".  На картинке он отмечен красным.
-
-По умолчанию `sourceURL` имеет вид `/lodash/template/source[N]`, где `N` -- постоянно увеличивающийся номер шаблона. В данном случае мы можем понять, что эта функция получена при самой первой компиляции.
-
-Это, конечно, лучше чем ничего, но, как правило, его имеет смысл заменить `sourceURL` на свой, указав при компиляции дополнительный параметр `sourceURL`:
-
-```js
-//+ no-beautify
-...
-var compiled = _.template(tmpl, {sourceURL: '/template/menu-template'});
-...
-```
-
-Попробуйте запустить [исправленный пример](template-error-sourceurl/) и вы увидите в качестве имени файла `/template/menu-template`.
-
-[warn header="Не определена переменная -- ошибка"]
-Кстати говоря, а в чём же здесь ошибка? 
-
-...А в том, что переменная `items` не передана в шаблон. При доступе к неизвестной переменной JavaScript генерирует ошибку.
-
-Самый простой способ это обойти -- обращаться к необязательным переменным через `obj`, например `<%=obj.items%>`. Тогда в случае `undefined` просто ничего не будет выведено. Но в данном случае реакция совершенно адекватна, так как для меню список опций `items` является обязательным.
-[/warn]
- 
-## Итого
-
-Шаблоны полезны для того, чтобы отделить HTML от кода. Это упрощает разработку и поддержку. 
-
-В этой главе подробно разобрана система шаблонизации из библиотеки [LoDash](https://lodash.com):
-
-<ul>
-<li>Шаблон -- это строка со специальными вставками кода `<% ... %>` или переменных `<%- expr ->`, `<%= expr ->`.</li>
-<li>Вызов `_.template(tmpl)` превращает шаблон `tmpl` в функцию, которой в дальнейшем передаются данные -- 
-и она генерирует HTML с ними.</li>
-</ul>
-
-В этой главе мы рассмотрели хранение шаблонов в документе, при помощи `<script>` с нестандартным `type`. Конечно, есть и другие способы, можно хранить шаблоны и в отдельном файле, если шаблонная система или система сборки проектов это позволяют.
-
-Шаблонных систем много. Многие основаны на схожем принципе -- генерации функции из строки, например:
-
-<ul>
-<li>[EJS](http://www.embeddedjs.com/)</li>
-<li>[Jade](http://jade-lang.com/)</li>
-<li>[Handlebars](http://handlebarsjs.com/)</li>
-</ul>
-
-Есть и альтернативный подход -- шаблонная система получает "образец" DOM-узела и клонирует его вызовом `cloneNode(true)`, каждый раз изменяя что-то внутри. В отличие от подхода, описанного выше, это будет работать не с произвольной строкой текста, а только и именно с DOM-узлами. Но в некоторых ситуациях у него есть преимущество. 
-
-Такой подход используется во фреймворках:
-<ul>
-<li>[AngularJS](http://angularjs.org)</li>
-<li>[Knockout.JS](http://knockoutjs.com/)</li>
-</ul>
-
-[libs]
-lodash
-[/libs]
diff --git a/2-ui/5-widgets/4-template-lodash/menu-template.view/index.html b/2-ui/5-widgets/4-template-lodash/menu-template.view/index.html
deleted file mode 100644
index 45f9f695..00000000
--- a/2-ui/5-widgets/4-template-lodash/menu-template.view/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%></span>
-    </div>
-  </script>
-
-  <script type="text/template" id="menu-list-template">
-    <ul>
-      <% items.forEach(function(item) { %>
-        <li>
-          <%-item%>
-        </li>
-        <% }); %>
-    </ul>
-  </script>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      template: _.template(document.getElementById('menu-template').innerHTML),
-      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML),
-      items: [
-        "Торт",
-        "Пончик",
-        "Пирожное",
-        "Шоколадка",
-        "Мороженое"
-      ]
-    });
-
-    document.body.appendChild(menu.getElem());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.css b/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.css
deleted file mode 100644
index 23937561..00000000
--- a/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.js b/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.js
deleted file mode 100644
index a34d2931..00000000
--- a/2-ui/5-widgets/4-template-lodash/menu-template.view/menu.js
+++ /dev/null
@@ -1,56 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/template-debugger.png b/2-ui/5-widgets/4-template-lodash/template-debugger.png
deleted file mode 100755
index 8157806b..00000000
Binary files a/2-ui/5-widgets/4-template-lodash/template-debugger.png and /dev/null differ
diff --git a/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png b/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png
deleted file mode 100755
index 29eb3639..00000000
Binary files a/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png and /dev/null differ
diff --git a/2-ui/5-widgets/4-template-lodash/template-error-sourceurl.view/index.html b/2-ui/5-widgets/4-template-lodash/template-error-sourceurl.view/index.html
deleted file mode 100644
index 0ec43e8c..00000000
--- a/2-ui/5-widgets/4-template-lodash/template-error-sourceurl.view/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%>
-  <ul>
-  <% items.forEach(function(item) { %>
-    <li><%-item%></li>
-  <% }); %>
-  </ul>
-</div>
-</script>
-
-<script>
-  var tmpl = _.template(
-    document.getElementById('menu-template').innerHTML,
-    {sourceURL: '/template/menu-template'}
-  );
- 
-  var result = tmpl({ title: "Заголовок" });
-
-  document.write(result);
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md
deleted file mode 100644
index 8b137891..00000000
--- a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html
deleted file mode 100755
index 711dbab2..00000000
--- a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .voter {
-      font-family: Consolas, "Lucida Console", monospace;
-      font-size: 18px;
-    }
-    
-    .up,
-    .down {
-      cursor: pointer;
-      color: blue;
-      font-weight: bold;
-    }
-  </style>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
-  <script src="voter.js"></script>
-</head>
-
-<body>
-
-  <div id="voter" class="voter">
-    <span class="down">—</span>
-    <span class="vote">0</span>
-    <span class="up">+</span>
-  </div>
-
-  <script>
-    var voter = new Voter({
-      elem: document.getElementById('voter')
-    });
-
-    voter.setVote(5);
-
-    document.getElementById('voter').addEventListener('change', function(e) {
-      alert(e.detail);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js
deleted file mode 100644
index 9992275e..00000000
--- a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js
+++ /dev/null
@@ -1,39 +0,0 @@
-function Voter(options) {
-  var elem = options.elem;
-
-  var voteElem = elem.querySelector('.vote');
-
-  elem.onclick = function(event) {
-    // сам обработчик не меняет голос, он вызывает функцию
-    if (event.target.closest('.down')) {
-      voteDecrease();
-    } else if (event.target.closest('.up')) {
-      voteIncrease();
-    }
-  }
-
-  elem.onmousedown = function() {
-    return false;
-  };
-
-  // ----------- методы -------------
-
-  function voteDecrease() {
-    setVote(+voteElem.innerHTML - 1);
-  }
-
-  function voteIncrease() {
-    setVote(+voteElem.innerHTML + 1);
-  }
-
-  function setVote(vote) {
-    voteElem.innerHTML = +vote;
-    var widgetEvent = new CustomEvent("change", {
-      bubbles: true,
-      detail: +vote
-    });
-    elem.dispatchEvent(widgetEvent);
-  };
-
-  this.setVote = setVote;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/task.md b/2-ui/5-widgets/5-custom-events/1-voter-events/task.md
deleted file mode 100644
index 5c5692dd..00000000
--- a/2-ui/5-widgets/5-custom-events/1-voter-events/task.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Голосовалка "на событиях"
-
-[importance 5]
-
-Добавьте событие в голосовалку, созданную в задаче [](/task/voter), используя механизм генерации событий на объекте.
-
-Пусть каждое изменение голоса сопровождается событием `change` со свойством `detail`, содержащим обновлённое значение:
-
-```js
-var voter = new Voter({
-  elem: document.getElementById('voter')
-});
-
-voter.setVote(5);
-
-document.getElementById('voter').addEventListener('change', function(e) {
-  alert( e.detail ); // новое значение голоса
-});
-```
-
-Все изменения голоса должны производиться централизованно, через метод `setVote`, который и генерирует событие.
-
-Результат использования кода выше (планируемый): 
-[iframe border=1 height=60 src="solution"]
-
-Исходный документ возьмите из решения задачи [](/task/voter).
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html
deleted file mode 100755
index 74cedc8a..00000000
--- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
-  <script src="listSelect.js"></script>
-</head>
-
-<body>
-
-  Клик на элементе выделяет только его.
-  <br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
-  <br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
-  <br>
-
-  <ul id="heroes">
-    <li>Кристофер Робин</li>
-    <li>Винни-Пух</li>
-    <li>Ослик Иа</li>
-    <li>Мудрая Сова</li>
-    <li>Кролик. Просто кролик.</li>
-  </ul>
-
-  <script>
-    var listSelect = new ListSelect({
-      elem: document.querySelector('#heroes')
-    });
-
-    document.querySelector('#heroes').addEventListener('select', function(event) {
-      alert(event.detail);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/listSelect.js b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/listSelect.js
deleted file mode 100644
index eb5337cb..00000000
--- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/listSelect.js
+++ /dev/null
@@ -1,80 +0,0 @@
-function ListSelect(options) {
-  var elem = options.elem;
-
-  var lastClickedLi = null;
-
-  elem.onmousedown = function() {
-    return false;
-  };
-
-  elem.onclick = function(e) {
-    var li = e.target.closest('li');
-    if (!li) return;
-
-    if (e.metaKey || e.ctrlKey) { // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
-      toggleSelect(li);
-    } else if (e.shiftKey) {
-      selectFromLast(li);
-    } else {
-      selectSingle(li);
-    }
-
-    dispatchEvent();
-
-    lastClickedLi = li;
-  }
-
-  function deselectAll() {
-    [].forEach.call(elem.children, function(child) {
-      child.classList.remove('selected')
-    });
-  }
-
-  function toggleSelect(li) {
-    li.classList.toggle('selected');
-  }
-
-  function selectSingle(li) {
-    deselectAll();
-    li.classList.add('selected');
-  }
-
-  function selectFromLast(target) {
-    var startElem = lastClickedLi || elem.children[0];
-
-    target.classList.add('selected');
-    if (startElem == target) {
-      // клик на том же элементе, что и раньше
-      // это особый случай
-      return;
-    }
-
-    var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
-
-    if (isLastClickedBefore) {
-      for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
-        elem.classList.add('selected');
-      }
-    } else {
-      for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
-        elem.classList.add('selected');
-      }
-    }
-  }
-
-  function dispatchEvent() {
-    var widgetEvent = new CustomEvent("select", {
-      bubbles: true,
-      detail: getSelected()
-    });
-    elem.dispatchEvent(widgetEvent);
-  }
-
-  function getSelected() {
-    return [].map.call(elem.querySelectorAll('.selected'), function(li) {
-      return li.innerHTML;
-    });
-  };
-
-  this.getSelected = getSelected;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/style.css b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/style.css
deleted file mode 100644
index 7c896c60..00000000
--- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/style.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.selected {
-  background: #0f0;
-}
-
-li {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md
deleted file mode 100644
index bfa14b52..00000000
--- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Список с выделением и событием
-
-[importance 5]
-
-Добавьте в решение задачи [](/task/selectable-list-component) событие `select`. 
-
-Оно должно срабатывать при каждом изменении выбора и в свойстве `detail` содержать список выбранных строк.
-
-Во внешнем коде добавьте обработчик к списку, который при изменениях выводит список значений.
-[iframe border="1" src="solution" height=180]
-
-В качестве исходного кода возьмите решение задачи [](/task/selectable-list-component).
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md
deleted file mode 100644
index 72d9624e..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-В этом решении для закрытия селекта по клику вне него используется отслеживание произвольных кликов вне документа.
-
-Альтернатива -- события `focusin/focusout`, т.е. считаем, что пока фокус в селекте -- он открыт. С одной стороны, это более мощный способ, он позволяет перемещаться по элементам управления при помощи [key Tab] и корректно обрабатывать уход при помощи клавиатуры.
-
-С другой стороны, это решение не универсально: если выводится `alert`, то фокус "прыгает" в него, уходя с элемента, а потом возвращается обратно. При этом JavaScript зарегистрирует уход фокуса `focusout` и возвращение `focusin`, хотя по смыслу фокус с элемента никуда не уходил, просто был `alert`. 
-
-Побочный эффект --  к закрытию и раскрытию (лишнему) элемента управления при таких "ненамеренных" потерях фокуса. Поэтому был выбран `onclick`.
-
-Решение: 
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
deleted file mode 100755
index 4ed39250..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.customselect {
-  width: 200px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.customselect .title {
-  height: 20px;
-  border: 2px groove #ADD8E6;
-  background: white;
-  width: 200px;
-  box-sizing: border-box;
-  padding: 2px;
-  line-height: 14px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.customselect li {
-  padding: 2px;
-  cursor: pointer;
-}
-
-.customselect li:nth-child(even) {
-  background-color: #f0f8ff;
-}
-
-.customselect li:hover {
-  background-color: #7fffd4;
-}
-
-.customselect ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: none;
-  position: absolute;
-  z-index: 1000;
-  background: white;
-  width: 200px;
-  border-bottom: 1px solid #add8e6;
-  border-left: 1px solid #add8e6;
-  border-right: 1px solid #add8e6;
-  box-sizing: border-box;
-}
-
-.customselect.open ul {
-  display: block;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js
deleted file mode 100755
index c04b611c..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js
+++ /dev/null
@@ -1,56 +0,0 @@
-function CustomSelect(options) {
-  var elem = options.elem;
-
-  elem.onclick = function(event) {
-    if (event.target.className == 'title') {
-      toggle();
-    } else if (event.target.tagName == 'LI') {
-      setValue(event.target.innerHTML, event.target.dataset.value);
-      close();
-    }
-  }
-
-  var isOpen = false;
-
-  // ------ обработчики ------
-
-  // закрыть селект, если клик вне его
-  function onDocumentClick(event) {
-    if (!elem.contains(event.target)) close();
-  }
-
-  // ------------------------
-
-  function setValue(title, value) {
-    elem.querySelector('.title').innerHTML = title;
-
-    var widgetEvent = new CustomEvent('select', {
-      bubbles: true,
-      detail: {
-        title: title,
-        value: value
-      }
-    });
-
-    elem.dispatchEvent(widgetEvent);
-
-  }
-
-  function toggle() {
-    if (isOpen) close()
-    else open();
-  }
-
-  function open() {
-    elem.classList.add('open');
-    document.addEventListener('click', onDocumentClick);
-    isOpen = true;
-  }
-
-  function close() {
-    elem.classList.remove('open');
-    document.removeEventListener('click', onDocumentClick);
-    isOpen = false;
-  }
-
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html
deleted file mode 100755
index adf95010..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Селект</title>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
-  <link rel="stylesheet" href="customselect.css" />
-  <script src="customselect.js"></script>
-</head>
-
-<body>
-
-  <div>Последний результат: <span id="result">...</span></div>
-
-  <div id="animal-select" class="customselect">
-    <button class="title">Выберите</button>
-    <ul>
-      <!-- значение хранится в свойстве data-value -->
-      <li data-value="bird">Птицы</li>
-      <li data-value="fish">Рыбы</li>
-      <li data-value="animal">Звери</li>
-      <li data-value="dino">Динозавры</li>
-      <li data-value="simplest">Одноклеточные</li>
-    </ul>
-  </div>
-
-  <div id="food-select" class="customselect">
-    <button class="title">Выберите</button>
-    <ul>
-      <li data-value="carnivore">Плотоядные</li>
-      <li data-value="herbivore">Травоядные</li>
-      <li data-value="omnivore">Всеядные</li>
-    </ul>
-  </div>
-
-
-  <script>
-    var animalSelect = new CustomSelect({
-      elem: document.getElementById('animal-select')
-    });
-
-    var foodSelect = new CustomSelect({
-      elem: document.getElementById('food-select')
-    });
-
-    document.addEventListener('select', function(event) {
-      document.getElementById('result').innerHTML = event.detail.value;
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css
deleted file mode 100644
index 4ed39250..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.customselect {
-  width: 200px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.customselect .title {
-  height: 20px;
-  border: 2px groove #ADD8E6;
-  background: white;
-  width: 200px;
-  box-sizing: border-box;
-  padding: 2px;
-  line-height: 14px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.customselect li {
-  padding: 2px;
-  cursor: pointer;
-}
-
-.customselect li:nth-child(even) {
-  background-color: #f0f8ff;
-}
-
-.customselect li:hover {
-  background-color: #7fffd4;
-}
-
-.customselect ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: none;
-  position: absolute;
-  z-index: 1000;
-  background: white;
-  width: 200px;
-  border-bottom: 1px solid #add8e6;
-  border-left: 1px solid #add8e6;
-  border-right: 1px solid #add8e6;
-  box-sizing: border-box;
-}
-
-.customselect.open ul {
-  display: block;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js
deleted file mode 100644
index c6fb05b4..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js
+++ /dev/null
@@ -1 +0,0 @@
-// ваш код CustomSelect
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
deleted file mode 100755
index 7088eadd..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <title>Селект</title>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
-  <link rel="stylesheet" href="customselect.css" />
-  <!-- для вашего кода -->
-  <script src="customselect.js"></script>
-</head>
-
-<body>
-
-  <div>Последний результат: <span id="result">...</span></div>
-
-  <div id="animal-select" class="customselect">
-    <button class="title">Выберите</button>
-    <ul>
-      <!-- значение хранится в свойстве data-value -->
-      <li data-value="bird">Птицы</li>
-      <li data-value="fish">Рыбы</li>
-      <li data-value="animal">Звери</li>
-      <li data-value="dino">Динозавры</li>
-      <li data-value="simplest">Одноклеточные</li>
-    </ul>
-  </div>
-
-  <div id="food-select" class="customselect">
-    <button class="title">Выберите</button>
-    <ul>
-      <li data-value="carnivore">Плотоядные</li>
-      <li data-value="herbivore">Травоядные</li>
-      <li data-value="omnivore">Всеядные</li>
-    </ul>
-  </div>
-
-
-  <script>
-    var animalSelect = new CustomSelect({
-      elem: document.getElementById('animal-select')
-    });
-
-    var foodSelect = new CustomSelect({
-      elem: document.getElementById('food-select')
-    });
-
-    document.addEventListener('select', function(event) {
-      document.getElementById('result').innerHTML = event.detail.value;
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/task.md b/2-ui/5-widgets/5-custom-events/3-custom-select/task.md
deleted file mode 100644
index 49aac1a2..00000000
--- a/2-ui/5-widgets/5-custom-events/3-custom-select/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Свой селект
-
-[importance 5]
-
-Напишите свой, самостоятельно оформленный, селект.
-
-Требования:
-<ul>
-<li>Открытие и закрытие по клику на заголовок.</li>
-<li>Закрытие селекта происходит при выборе или клике на любое другое место документа, в том числе на другой аналогичный селект.</li>
-<li>Событие `"select"` при выборе опции возникает на элементе селекта и всплывает.</li>
-<li>Значение опции хранится в атрибуте `data-value` (HTML-структура есть в исходном документе).
-</ul>
-Например:
-
-[iframe src="solution" height="200"]
-
-В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.
-
-
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/slider.png b/2-ui/5-widgets/5-custom-events/4-slider-events/slider.png
deleted file mode 100644
index b82a844e..00000000
Binary files a/2-ui/5-widgets/5-custom-events/4-slider-events/slider.png and /dev/null differ
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.md b/2-ui/5-widgets/5-custom-events/4-slider-events/solution.md
deleted file mode 100644
index 41af4b10..00000000
--- a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-Для решения этой задачи достаточно создать две функции: `valueToPosition` будет получать по значению положение бегунка, а `positionToValue` -- наоборот, транслировать текущую координату бегунка в значение.
-
-Как сопоставить позицию слайдера и значение?
-
-Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка `10px`.
-
-Раз центр соответствует значению, то крайнее левое значение будет соответствовать центру на `5px`, а крайнее правой -- центру на `5px` от правой границы:
-
-<img src="slider.png">
-
-Соответственно, ширина области изменения будет `sliderElem.clientWidth - thumbElem.clientWidth`. Далее её можно уже поделить на части, количество пикселей на значение будет:
-
-```js
-pixelsPerValue = (sliderElem.clientWidth - thumbElem.clientWidth) / max;
-```
-
-Может получиться так, что это значение будет дробным, меньше единицы. Например, если `max = 1000`, а ширина слайдера `110` (пробег 100), то будет `0.1` пикселя на значение. 
-
-Используя `pixelsPerValue` мы сможем переводить позицию бегунка в значение и обратно.
-
-Крайнее левое значение `thumbElem.style.left` равно нулю, крайнее правой -- как раз ширине доступной области `sliderElem.clientWidth - thumbElem.clientWidth`. Поэтому можно получить значение слайдера, поделив его на `pixelsPerValue`:
-
-```js
-function positionToValue(left) {
-  return Math.round(left / pixelsPerValue);
-}
-
-function valueToPosition(value) {
-  return pixelsPerValue * value;
-}
-```
-
-
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/index.html b/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/index.html
deleted file mode 100644
index 45f23500..00000000
--- a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvents,Element.prototype.closest"></script>
-  <link rel="stylesheet" href="slider.css">
-  <script src="slider.js"></script>
-</head>
-
-<body>
-  <div id="slider" class="slider">
-    <div class="thumb"></div>
-  </div>
-
-
-  Slide:<span id="slide">&nbsp;</span> Change:
-  <span id="change">&nbsp;</span>
-
-  <button onclick="slider.setValue(50)">slider.setValue(50)</button>
-
-  <script>
-    var sliderElem = document.getElementById('slider');
-
-    var slider = new Slider({
-      elem: sliderElem,
-      max: 100
-    });
-
-    sliderElem.addEventListener('slide', function(event) {
-      document.getElementById('slide').innerHTML = event.detail;
-    });
-
-    sliderElem.addEventListener('change', function(event) {
-      document.getElementById('change').innerHTML = event.detail;
-    });
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.css b/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.css
deleted file mode 100644
index a548331e..00000000
--- a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.slider {
-  margin: 5px;
-  width: 310px;
-  height: 15px;
-  border-radius: 5px;
-  background: #E0E0E0;
-  background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
-  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
-  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
-}
-
-.thumb {
-  position: relative;
-  top: -5px;
-  width: 10px;
-  height: 25px;
-  border-radius: 3px;
-  background: blue;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.js b/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.js
deleted file mode 100644
index 8a46981a..00000000
--- a/2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/slider.js
+++ /dev/null
@@ -1,88 +0,0 @@
-function Slider(options) {
-  var elem = options.elem;
-
-  var thumbElem = elem.querySelector('.thumb');
-
-  var max = options.max || 100;
-  var sliderCoords, thumbCoords, shiftX, shiftY;
-
-  // [<*>----------------]
-  //   |...............|
-  // first            last
-  var pixelsPerValue = (elem.clientWidth - thumbElem.clientWidth) / max;
-
-  elem.ondragstart = function() {
-    return false;
-  };
-
-  elem.onmousedown = function(event) {
-    if (event.target.closest('.thumb')) {
-      startDrag(event.clientX, event.clientY);
-      return false; // disable selection start (cursor change)
-    }
-  }
-
-  function startDrag(startClientX, startClientY) {
-    thumbCoords = thumbElem.getBoundingClientRect();
-    shiftX = startClientX - thumbCoords.left;
-    shiftY = startClientY - thumbCoords.top;
-
-    sliderCoords = elem.getBoundingClientRect();
-
-    document.addEventListener('mousemove', onDocumentMouseMove);
-    document.addEventListener('mouseup', onDocumentMouseUp);
-  }
-
-  function moveTo(clientX) {
-    // вычесть координату родителя, т.к. position: relative
-    var newLeft = clientX - shiftX - sliderCoords.left;
-
-    // курсор ушёл вне слайдера
-    if (newLeft < 0) {
-      newLeft = 0;
-    }
-    var rightEdge = elem.offsetWidth - thumbElem.offsetWidth;
-    if (newLeft > rightEdge) {
-      newLeft = rightEdge;
-    }
-
-    thumbElem.style.left = newLeft + 'px';
-
-    elem.dispatchEvent(new CustomEvent('slide', {
-      bubbles: true,
-      detail: positionToValue(newLeft)
-    }));
-  }
-
-  function valueToPosition(value) {
-    return pixelsPerValue * value;
-  }
-
-  function positionToValue(left) {
-    return Math.round(left / pixelsPerValue);
-  }
-
-  function onDocumentMouseMove(e) {
-    moveTo(e.clientX);
-  }
-
-  function onDocumentMouseUp() {
-    endDrag();
-  }
-
-  function endDrag() {
-    document.removeEventListener('mousemove', onDocumentMouseMove);
-    document.removeEventListener('mouseup', onDocumentMouseUp);
-
-    elem.dispatchEvent(new CustomEvent('change', {
-      bubbles: true,
-      detail: positionToValue(parseInt(thumbElem.style.left))
-    }));
-  }
-
-  function setValue(value) {
-    thumbElem.style.left = valueToPosition(value) + 'px';
-  }
-
-  this.setValue = setValue;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/4-slider-events/task.md b/2-ui/5-widgets/5-custom-events/4-slider-events/task.md
deleted file mode 100644
index 1b07254c..00000000
--- a/2-ui/5-widgets/5-custom-events/4-slider-events/task.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Слайдер с событиями
-
-[importance 5]
-
-На основе слайдера из задачи [](/task/slider-widget) создайте графический компонент, который умеет возвращать/получать значение.
-
-Синтаксис:
-
-```js
-var slider = new Slider({
-  elem: document.getElementById('slider'),
-  max: 100 // слайдер на самой правой позиции соответствует 100
-});
-```
-
-Метод `setValue` устанавливает значение:
-
-```js
-slider.setValue(50);
-```
-
-У слайдера должно быть два события: `slide` при каждом передвижении и `change` при отпускании мыши (установке значения).
-
-Пример использования:
-
-```js
-var sliderElem = document.getElementById('slider');
-
-sliderElem.addEventListener('slide', function(event) {
-  document.getElementById('slide').innerHTML = event.detail;
-});
-
-sliderElem.addEventListener('change', function(event) {
-  document.getElementById('change').innerHTML = event.detail;
-});
-```
-
-В действии:
-[iframe src="solution" height="80"]
-
-<ul>
-<li>Ширина/высота слайдера может быть любой, JS-код это должен учитывать.</li>
-<li>Центр бегунка должен располагаться в точности над выбранным значением. Например, он должен быть в центре для 50 при `max=100`.</li>
-</ul>
-
-Исходный документ -- возьмите решение задачи [](/task/slider-widget).
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/article.md b/2-ui/5-widgets/5-custom-events/article.md
deleted file mode 100644
index 049474f5..00000000
--- a/2-ui/5-widgets/5-custom-events/article.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# Коллбэки и события на компонентах
-
-Компоненты, хоть и каждый сам по себе, обычно как-то общаются с остальной частью страницы
-
-Есть несколько способов, при помощи которых компоненты сообщают друг другу о важных событиях, которые в них произошли.
-
-[cut]
-
-## Коллбэки
-
-Коллбэк (от англ. callback) -- это функция, которую мы передаём куда-либо и ожидаем, что она будет вызвана при наступлении события.
-
-Например, мы можем добавить в `options` для `Menu` новый параметр -- функцию `onselect`, которая будет вызываться при выборе пункта меню:
-
-```js
-//+ no-beautify
-var menu = new Menu({ 
-  title: "Сладости",
-  template: _.template(document.getElementById('menu-template').innerHTML),
-  listTemplate: _.template(document.getElementById('menu-list-template').innerHTML,
-  items: {
-    "donut": "Пончик", 
-    "cake": "Пирожное", 
-    "chocolate": "Шоколадка"
-  },
-*!*
-  onselect: showSelected
-*/!*
-});
-
-*!*
-function showSelected(href) {
-  alert(href);
-}
-*/!*
-```
-
-В коде меню нужно будет вызывать её, например так:
-
-```js
-//+ no-beautify
-...
-  function select(link) {
-    options.onselect(link.getAttribute('href').slice(1));
-    ...
-  }
-...
-```
-
-Полный пример:
-
-[codetabs src="menu-callback" height="180"]
-
-## Свои события 
-
-Как мы уже знаем, в современных браузерах DOM-элементы могут [генерировать поизвольные события](/dispatch-events) при помощи встроенных методов, а в IE8- это возможно с использованием фреймворка, к примеру, jQuery.
-
-Воспользуемся ими, чтобы корневой элемент меню генерировал событие, которое мы назовём `select`, при выборе элемента, и передавал в объект события выбранное значение.
-
-Для этого модифицируем функцию `select`:
-
-```js
-//+ no-beautify
-function Menu(options) {
-  ...
-
-  function select(link) {
-*!*
-    var widgetEvent = new CustomEvent("select", { 
-      bubbles: true,
-      // detail - стандартное свойство CustomEvent для произвольных данных
-      detail: link.getAttribute('href').slice(1)
-    });
-    elem.dispatchEvent(widgetEvent);
-*/!*
-  }
-
-  ...
-}
-```
-
-Код, который заинтересован в том, чтобы узнавать, что выбрано в меню, подписывается на событие `select` его корневого элемента:
-
-```js
-var menu = new Menu(...);
-
-var elem = menu.getElem();
-
-elem.addEventListener('select', function(event) {
-  alert( event.detail );
-});
-```
-
-Вместо `detail` можно было бы выбрать и другое название свойства, но тогда нужно позаботиться о том, чтобы оно не конфликтовало со стандартными. Кроме того, в конструкторе `CustomEvent` разрешено только `detail`, другое свойство понадобилось бы присваивать в отдельной строке.
-
-Полный пример:
-
-[codetabs src="menu-event"]
-
-[warn header="Внимание, инкапсуляция!"]
-Очень важно, что внешний код ставит обработчик на корневой элемент, но не на внутренние элементы меню. 
-
-Строго говоря, он вообще не знает про то, как устроено меню, есть ли там ссылки и какие, или там вообще всё реализовано через кнопки.
-
-Меню для него -- "чёрный ящик". Корневой элемент -- точка доступа к его функционалу. Событие -- не то, которое произошло на ссылке, а "переработанный вариант", интерпретация действия со стороны меню.
-
-Такое правило позволяет нам не опасаться проблем при оптимизации, расширении и даже полной переделке DOM-структуры меню. Коль скоро события и методы сохраняются, внешний код будет работать как прежде.
-
-Ещё раз -- внешний код не имеет права залезать внутрь DOM-структуры меню, ставить там обработчики и так далее.
-[/warn]
-
-## Итого
-
-Для того, чтобы внешний код мог узнавать о важных событиях, произошедших внутри компоненты, используются:
-<ul>
-<li>Коллбэки -- функции, которые передаются "снаружи" при создании компонента, и которые он обязуется вызвать при наступлении событий.</li>
-<li>События -- компонент генерирует их на корневом элементе при помощи `dispatchEvent`, а внешний код ставит обработчики при помощи `addEventListener`. Такие события всплывают, если указан флаг `bubbles`, поэтому можно использовать с ними делегирование.</li>
-</ul>
-
-
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html b/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
deleted file mode 100755
index 458045ab..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%></span>
-    </div>
-  </script>
-
-  <!-- 
-встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
-например русские буквы и пробелы 
-в этом примере русских букв в ключах items нет, но потенциально они возможны
--->
-  <script type="text/template" id="menu-list-template">
-    <ul>
-      <% for(var name in items) { %>
-        <li>
-          <a href="#<%=encodeURIComponent(name)%>">
-            <%-items[name]%>
-          </a>
-        </li>
-        <% } %>
-    </ul>
-  </script>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      template: _.template(document.getElementById('menu-template').innerHTML.trim()),
-      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
-      items: {
-        cake: "Торт", // cake  <a href="#cake">Торт</a>
-        donut: "Пончик", // donut
-        chokolate: "Шоколадка" // chokolate
-      },
-      onselect: showSelected
-    });
-
-    function showSelected(itemName) {
-      alert(itemName);
-    }
-
-    document.body.appendChild(menu.getElem());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css
deleted file mode 100644
index 23937561..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js
deleted file mode 100755
index 80c79054..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js
+++ /dev/null
@@ -1,66 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-
-      if (event.target.closest('a')) {
-        event.preventDefault();
-        select(event.target.closest('a'));
-      }
-
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function select(link) {
-    options.onselect(link.getAttribute('href').slice(1));
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/index.html b/2-ui/5-widgets/5-custom-events/menu-event.view/index.html
deleted file mode 100755
index 777e3304..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-event.view/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="menu-template">
-    <div class="menu">
-      <span class="title"><%-title%></span>
-    </div>
-  </script>
-
-  <script type="text/template" id="menu-list-template">
-    <ul>
-      <% for(var name in items) { %>
-        <li>
-          <a href="#<%=encodeURIComponent(name)%>">
-            <%-items[name]%>
-          </a>
-        </li>
-        <% } %>
-    </ul>
-  </script>
-
-  <script>
-    var menu = new Menu({
-      title: "Сладости",
-      template: _.template(document.getElementById('menu-template').innerHTML.trim()),
-      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
-      items: {
-        cake: "Торт", // cake  <a href="#cake">Торт</a>
-        donut: "Пончик", // donut
-        chokolate: "Шоколадка" // chokolate
-      }
-    });
-
-    var elem = menu.getElem();
-    document.body.appendChild(elem);
-    elem.addEventListener('select', function(event) {
-      alert(event.detail);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css
deleted file mode 100644
index 23937561..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.menu ul {
-  display: none;
-  margin: 0;
-}
-
-.menu .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.menu .title:before {
-  content: '▶';
-  padding-right: 6px;
-  color: green;
-}
-
-.menu.open ul {
-  display: block;
-}
-
-.menu.open .title:before {
-  content: '▼';
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js
deleted file mode 100755
index 757e2d9c..00000000
--- a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js
+++ /dev/null
@@ -1,70 +0,0 @@
-function Menu(options) {
-  var elem;
-
-  function getElem() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function render() {
-    var html = options.template({
-      title: options.title
-    });
-
-    elem = document.createElement('div');
-    elem.innerHTML = html;
-    elem = elem.firstElementChild;
-
-    elem.onmousedown = function() {
-      return false;
-    }
-
-    elem.onclick = function(event) {
-      if (event.target.closest('.title')) {
-        toggle();
-      }
-
-      if (event.target.closest('a')) {
-        event.preventDefault();
-        select(event.target.closest('a'));
-      }
-
-    }
-  }
-
-  function renderItems() {
-    if (elem.querySelector('ul')) return;
-
-    var listHtml = options.listTemplate({
-      items: options.items
-    });
-    elem.insertAdjacentHTML("beforeEnd", listHtml);
-  }
-
-  function select(link) {
-    var widgetEvent = new CustomEvent("select", {
-      bubbles: true,
-      detail: link.getAttribute('href').slice(1)
-    });
-    elem.dispatchEvent(widgetEvent);
-  }
-
-  function open() {
-    renderItems();
-    elem.classList.add('open');
-  };
-
-  function close() {
-    elem.classList.remove('open');
-  };
-
-  function toggle() {
-    if (elem.classList.contains('open')) close();
-    else open();
-  };
-
-  this.getElem = getElem;
-  this.toggle = toggle;
-  this.close = close;
-  this.open = open;
-}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-what-next/article.md b/2-ui/5-widgets/6-what-next/article.md
deleted file mode 100644
index 719c411a..00000000
--- a/2-ui/5-widgets/6-what-next/article.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Что изучать дальше
-
-Если вы прочитали весь учебник и сделали задачи, то на текущий момент вы обладаете важнейшими фундаментальными знаниями и навыками JavaScript.
-
-[cut]
-
-В этом разделе мы изучали основы создания компонентов на JavaScript. Если проект большой и сложный, то понадобятся дополнительные инструменты для связывания компонент между собой, для привязки к ним данных и так далее.
-
-Сейчас существует много фреймворков. Всё активно развивается, меняется, кипит и булькает, может быть из этого получится "общепринятая" архитектура, а может и нет. Сейчас явного победителя нет, выбор фреймворка зависит от проекта и личных предпочтений разработчиков.
-
-Примеры удачных фреймворков, которые можно изучить:
-
-<ul>
-<li>[Angular.JS](http://angularjs.org)</li>
-<li>[React.JS](http://facebook.github.io/react/) + [Flux](http://facebook.github.io/flux/)</li>
-<li>[Backbone.JS](http://backbonejs.org/) + [Marionette](http://marionettejs.com/)</li>
-</ul>
-
-Также для работы с браузерами понадобятся различные [API](https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9), в частности:
-
-<ul>
-<li>Работу с окнами и фреймами.</li>
-<li>Регулярные выражения, класс `RegExp`.</li>
-<li>Объекты `XMLHttpRequest` и `WebSocket` для работы с сервером.</li>
-<li>Другие возможности современных браузеров.</li>
-</ul>
-
-В дополнительных разделах учебника мы обязательно разберём что-то из этого.
-
-...И, конечно, понадобится система сборки проектов, например [WebPack](http://webpack.github.io/).
-
-Успехов вам!
diff --git a/2-ui/5-widgets/index.md b/2-ui/5-widgets/index.md
deleted file mode 100644
index 3311b2da..00000000
--- a/2-ui/5-widgets/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Создание графических компонентов
-
-В этом разделе мы обсуждаем, как вместо "простыни кода" писать объектно-ориентированные компоненты на JavaScript.
\ No newline at end of file
diff --git a/2-ui/index.md b/2-ui/index.md
index fb9db59a..5c4e1484 100644
--- a/2-ui/index.md
+++ b/2-ui/index.md
@@ -1,3 +1,3 @@
-# Документ, события, интерфейсы
+# Browser: Document, DOM, Interfaces 
 
-Изучаем работу со страницей -- как получать элементы, манипулировать их размерами, динамически создавать интерфейсы и взаимодействовать с посетителем.
+Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
diff --git a/3-animation/1-bezier-curve/article.md b/3-animation/1-bezier-curve/article.md
new file mode 100644
index 00000000..c15588c0
--- /dev/null
+++ b/3-animation/1-bezier-curve/article.md
@@ -0,0 +1,195 @@
+# Bezier curve
+
+Bezier curves are used in computer graphics to draw shapes, for CSS animation and in many other places.
+
+They are actually a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.
+
+[cut]
+
+## Control points
+
+A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points.
+
+There may be 2, 3, 4 or more.
+
+For instance, two points curve:
+
+![](bezier2.png)
+
+Three points curve:
+
+![](bezier3.png)
+
+Four points curve:
+
+![](bezier4.png)
+
+If you look closely at these curves, you can immediately notice:
+
+1. **Points are not always on curve.** That's perfectly normal, later we'll see how the curve is built.
+2. **The curve order equals the number of points minus one**.
+For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for three points -- cubic curve.
+3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:**
+
+    ![](bezier4-e.png) ![](bezier3-e.png)
+
+Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection or convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.
+
+The main value of Bezier curves for drawing -- by moving the points the curve is changing *in intuitively obvious way*.
+
+Try to move control points using a mouse in the example below:
+
+[iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370]
+
+**As you can notice, the curve stretches along the tangential lines 1 -> 2 and 3 -> 4.**
+
+After some practice it becomes obvious how to place points to get the needed curve. And by connecting several curves we can get practically anything.
+
+Here are some examples:
+
+![](bezier-car.png) ![](bezier-letter.png) ![](bezier-vase.png)
+
+## Maths
+
+A Bezier curve can be described using a mathematical formula.
+
+As we'll see soon -- there's no need to know it. But for completeness -- here it is.
+
+Given the coordinates of control points <code>P<sub>i</sub></code>: the first control point has coordinates <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, the second: <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code>, and so on, the curve coordinates are described by the equation that depends on the parameter `t` from the segment `[0,1]`.
+
+- The formula for a 2-points curve:
+
+    <code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code>
+- For three points:
+
+    <code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code>
+- For four points:
+
+    <code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub>  +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code>
+
+These are vector equations.
+
+We can rewrite them coordinate-by-coordinate, for instance the 3-point curve:
+
+- <code>x = (1−t)<sup>2</sup>x<sub>1</sub> + 2(1−t)tx<sub>2</sub> + t<sup>2</sup>x<sub>3</sub></code>
+- <code>y = (1−t)<sup>2</sup>y<sub>1</sub> + 2(1−t)ty<sub>2</sub> + t<sup>2</sup>y<sub>3</sub></code>
+
+Instead of <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> we should put coordinates of 3 control points.
+
+For instance, if control points are  `(0,0)`, `(0.5, 1)` and `(1, 0)`, the equations are:
+
+- <code>x = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 0.5 + t<sup>2</sup> * 1 = (1-t)t + t<sup>2</sup> = 1</code>
+- <code>y = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 1 + t<sup>2</sup> * 0 = 2(1-t)t = –t<sup>2</sup> + 2t</code>
+
+Now as `t` runs from `0` to `1`, the set of values `(x,y)` for each `t` forms the curve.
+
+That's probably too scientific, not very obvious why curves look like that, and how they depend on control points.
+
+So here's the drawing algorithm that may be easier to understand.
+
+## De Casteljau's algorithm
+
+[De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm) is identical to the mathematical definition of the curve, but visually shows how it is built.
+
+Let's see it on the 3-points example.
+
+Here's the demo, and the explanation follow.
+
+Points can be moved by the mouse. Press the "play" button to run it.
+
+[iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370]
+
+**De Casteljau's algorithm of building the 3-point bezier curve:**
+
+1. Draw control points. In the demo above they are labeled: `1`, `2`, `3`.
+2. Build segments between control points 1 -> 2 -> 3. In the demo above they are <span style="color:#825E28">brown</span>.
+3. The parameter `t` moves from `0` to `1`. In the example above the step `0.05` is used: the loop goes over `0, 0.05, 0.1, 0.15, ... 0.95, 1`.
+
+    For each of these values of `t`:
+
+    - On each <span style="color:#825E28">brown</span> segment we take a point located on the distance proportional to `t` from its beginning. As there are two segments, we have two points.
+
+        For instance, for `t=0` -- both points will be at the beginning of segments, and for `t=0.25` -- on the 25% of segment length from the beginning, for `t=0.5` -- 50%(the middle), for `t=1` -- in the end of segments.
+
+    - Connect the points. On the picture below the connecting segment is painted <span style="color:#167490">blue</span>.
+
+
+| For `t=0.25`             | For `t=0.5`            |
+| ------------------------ | ---------------------- |
+| ![](bezier3-draw1.png)   | ![](bezier3-draw2.png) |
+
+4. Now the <span style="color:#167490">blue</span> segment take a point on the distance proportional to the same value of `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is <span style="color:red">red</span>.
+
+5. As `t` runs from `0` to `1`, every value of `t` adds a point to the curve. The set of such points forms the Bezier curve. It's red and parabolic on the pictures above.
+
+That was a process for 3 points. But the same is for 4 points.
+
+The demo for 4 points (points can be moved by mouse):
+
+[iframe src="demo.svg?p=0,0,0.5,0,0.5,1,1,1&animate=1" height=370]
+
+The algorithm:
+
+- Control points are connected by segments: 1 -> 2, 2 -> 3, 3 -> 4. We have 3 <span style="color:#825E28">brown</span> segments.
+- For each `t` in the interval from `0` to `1`:
+    - We take points on these segments on the distance proportional to `t` from the beginning. These points are connected, so that we have two <span style="color:#0A0">green segments</span>.
+    - On these segments we take points proportional to `t`. We get one <span style="color:#167490">blue segment</span>.
+    - On the blue segment we take a point proportional to `t`. On the example above it's <span style="color:red">red</span>.
+- These points together form the curve.
+
+The algorithm is recursive and can be generalized for any number of control points.
+
+Given N of control points, we connect them to get initially N-1 segments.
+
+Then for each `t` from `0` to `1`:
+- Take a point on each of segment on the distance proportional to `t` and connect them -- there will be N-2 segments.
+- Take a point on each of these segments on the distance proportional to `t` and connect -- there will be N-3 segments, and so on...
+- Till we have one point. These points make the curve.
+
+Move examples of curves:
+
+[iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370]
+
+With other points:
+
+[iframe src="demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1" height=370]
+
+Loop form:
+
+[iframe src="demo.svg?p=0,0,1,0.5,0,1,0.5,0&animate=1" height=370]
+
+Not smooth Bezier curve:
+
+[iframe src="demo.svg?p=0,0,1,1,0,1,1,0&animate=1" height=370]
+
+As the algorithm is recursive, we can build Bezier curves of any order: using 5, 6 or more control points. But in practice they are less useful. Usually we take 2-3 points, and for complex lines glue several curves together. That's simpler to develop and calculate.
+
+```smart header="How to draw a curve *through* given points?"
+We use control points for a Bezier curve. As we can see, they are not on the curve. Or, to be precise, the first and the last ones do belong to curve, but others don't.
+
+Sometimes we have another task: to draw a curve *through several points*, so that all of them are on a single smooth curve. That task is called  [interpolation](https://en.wikipedia.org/wiki/Interpolation), and here we don't cover it.
+
+There are mathematical formulas for such curves, for instance [Lagrange polynomial](https://en.wikipedia.org/wiki/Lagrange_polynomial).
+
+In computer graphics [spline interpolation](https://en.wikipedia.org/wiki/Spline_interpolation) is often used to build smooth curves that connect many points.
+```
+
+## Summary
+
+Bezier curves are defined by their control points.
+
+We saw two definitions of Bezier curves:
+
+1. Using a mathematical formulas.
+2. Using a drawing process: De Casteljau's algorithm
+
+Good properties of Bezier curves:
+
+- We can draw smooth lines with a mouse by moving around control points.
+- Complex shapes can be made of several Bezier curves.
+
+Usage:
+
+- In computer graphics, modeling, vector graphic editors. Fonts are described by Bezier curves.
+- In web development -- for graphics on Canvas and in the SVG format. By the way, "live" examples above are written in SVG. They are actually a single SVG document that is given different points as parameters. You can open it in a separate window and see the source: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1).
+- In CSS animation to describe the path and speed of animation.
diff --git a/3-animation/1-bezier-curve/bezier-car.png b/3-animation/1-bezier-curve/bezier-car.png
new file mode 100644
index 00000000..5df005c3
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-car.png differ
diff --git a/3-animation/1-bezier-curve/bezier-car@2x.png b/3-animation/1-bezier-curve/bezier-car@2x.png
new file mode 100644
index 00000000..990ecac3
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-car@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier-letter.png b/3-animation/1-bezier-curve/bezier-letter.png
new file mode 100644
index 00000000..636c2abe
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-letter.png differ
diff --git a/3-animation/1-bezier-curve/bezier-letter@2x.png b/3-animation/1-bezier-curve/bezier-letter@2x.png
new file mode 100644
index 00000000..86e8f80e
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-letter@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier-vase.png b/3-animation/1-bezier-curve/bezier-vase.png
new file mode 100644
index 00000000..1fdc08f7
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-vase.png differ
diff --git a/3-animation/1-bezier-curve/bezier-vase@2x.png b/3-animation/1-bezier-curve/bezier-vase@2x.png
new file mode 100644
index 00000000..e60ced0d
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier-vase@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier2.png b/3-animation/1-bezier-curve/bezier2.png
new file mode 100644
index 00000000..cbad0a36
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier2.png differ
diff --git a/3-animation/1-bezier-curve/bezier2@2x.png b/3-animation/1-bezier-curve/bezier2@2x.png
new file mode 100644
index 00000000..6dbf1bfd
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier2@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-draw1.png b/3-animation/1-bezier-curve/bezier3-draw1.png
new file mode 100644
index 00000000..177af247
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-draw1.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-draw1@2x.png b/3-animation/1-bezier-curve/bezier3-draw1@2x.png
new file mode 100644
index 00000000..badd242d
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-draw1@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-draw2.png b/3-animation/1-bezier-curve/bezier3-draw2.png
new file mode 100644
index 00000000..f27ebcd7
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-draw2.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-draw2@2x.png b/3-animation/1-bezier-curve/bezier3-draw2@2x.png
new file mode 100644
index 00000000..129eb36e
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-draw2@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-e.png b/3-animation/1-bezier-curve/bezier3-e.png
new file mode 100644
index 00000000..f5b9e628
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-e.png differ
diff --git a/3-animation/1-bezier-curve/bezier3-e@2x.png b/3-animation/1-bezier-curve/bezier3-e@2x.png
new file mode 100644
index 00000000..bc4da5f7
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3-e@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier3.png b/3-animation/1-bezier-curve/bezier3.png
new file mode 100644
index 00000000..53d42f1d
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3.png differ
diff --git a/3-animation/1-bezier-curve/bezier3@2x.png b/3-animation/1-bezier-curve/bezier3@2x.png
new file mode 100644
index 00000000..80fef732
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier3@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier4-e.png b/3-animation/1-bezier-curve/bezier4-e.png
new file mode 100644
index 00000000..1761ce21
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier4-e.png differ
diff --git a/3-animation/1-bezier-curve/bezier4-e@2x.png b/3-animation/1-bezier-curve/bezier4-e@2x.png
new file mode 100644
index 00000000..b21b8869
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier4-e@2x.png differ
diff --git a/3-animation/1-bezier-curve/bezier4.png b/3-animation/1-bezier-curve/bezier4.png
new file mode 100644
index 00000000..9176f973
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier4.png differ
diff --git a/3-animation/1-bezier-curve/bezier4@2x.png b/3-animation/1-bezier-curve/bezier4@2x.png
new file mode 100644
index 00000000..f4e8d790
Binary files /dev/null and b/3-animation/1-bezier-curve/bezier4@2x.png differ
diff --git a/3-animation/1-bezier-curve/demo.svg b/3-animation/1-bezier-curve/demo.svg
new file mode 100644
index 00000000..d9236b9a
--- /dev/null
+++ b/3-animation/1-bezier-curve/demo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--+ no-optimize -->
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="#E8C48E"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:Consolas, Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
	let xmlns = "http://www.w3.org/2000/svg";
	let xlinkns  = "http://www.w3.org/1999/xlink";

	let box = {left:20, top: 50, right: 320, bottom: 350 };

	if (location.search.match('small=1')) {
	  box = {left:20, top: 50, right: 120, bottom: 150 };
	}

	document.documentElement.ondragstart = function() {
	  return false;
	};

	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

	// don't show a piece of control path between P2 and P3
	let hideMiddleControlPath = location.search.match('nocpath=1');

	pointsIn = pointsIn.split(',');

	let points = [];

	// read points from ?p=...
	for(let i=0; i<pointsIn.length; i++) {
	  let x = box.left + (box.right - box.left)*pointsIn[i];
	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
	  points.push({x: x, y: y});
	}

	let bezierPath = document.getElementById("bezier-path");
	let controlPath = document.getElementById("control-path");
	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

	let runButton = document.getElementById("run-button");
	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



	let tPathTemplate = document.getElementById("t-path-template");
	tPathTemplate.parentNode.removeChild(tPathTemplate);

	function drawPath() {
	  let letter;
	  switch (points.length) {
	  case 4:
	    letter = 'C';
	    break;
	  case 3:
	    letter = 'Q';
	    break;
	  default:
	    letter = 'L';
	  }
	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

	  for(let i = 1; i < points.length; i++) {
	    bezierPathD += points[i].x + ',' + points[i].y + ' ';
	    controlPathD += points[i].x + ',' + points[i].y + ' ';
	  }
	  bezierPath.setAttribute('d', bezierPathD);
	  controlPath.setAttribute('d', controlPathD);

	  function dist(a,b) {
	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
	  }

	  if (hideMiddleControlPath) {
	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
	  }

	}

	// draw control points
	function drawPoints(points) {
	  let p = document.getElementById('p-template');
	  p.removeAttribute('id');
	  p.parentNode.removeChild(p);

	  for(let i=0; i<points.length; i++) {
	    let point = p.cloneNode(true);
	    point.getElementsByTagName('text')[0].firstChild.data = i+1;
	    setPointCoords(point, i);
	    setPointHandler(point, i);
	    document.documentElement.appendChild(point);
	  }

	}

	// control points coords are shifted from Left-Upper corner a bit
	// to give them space to render
	function setPointCoords(point, i) {
	  point.setAttribute('x', points[i].x-20);
	  point.setAttribute('y', points[i].y-20);
	}

	function setPointHandler(point, i) {
	  let circle = point.getElementsByTagName('circle')[0];
	  circle.onmousedown = function() {
	    document.onmousemove = function(e) {
	      let x = e.pageX, y = e.pageY;

	      // constrain withing the box
	      if (x < box.left) x = box.left;
	      if (x > box.right) x = box.right;
	      if (y > box.bottom) y = box.bottom;
	      if (y < box.top) y = box.top;

	      points[i].x = x;
	      points[i].y = y;
	      setPointCoords(point, i);
	      drawPath();
	    }
	    document.onmouseup = function() {
	      document.onmousemove = document.onmouseup = null;
	    }
	    return false;
	  }
	}

	// draw point connectors which form the curve
	function drawT(points, t) {
	  let path = document.getElementById('t-'+points.length);

	  if (!path) {
	    path = tPathTemplate.cloneNode(true);
	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
	    path.setAttribute('id', 't-'+points.length);
	    document.documentElement.appendChild(path);
	  }

	  let subPoints = [];
	  let x = points[0].x + (points[1].x - points[0].x)*t;
	  let y = points[0].y + (points[1].y - points[0].y)*t;

	  let tPathD = "M" + x + ',' + y + ' L';
	  subPoints.push({x, y});

	  for(let i=1; i<points.length-1; i++) {
	    let x = points[i].x + (points[i+1].x - points[i].x)*t;
	    let y = points[i].y + (points[i+1].y - points[i].y)*t;
	    subPoints.push({x: x, y: y});

	    tPathD += x + ',' + y + ' ';
	  }

	  if (points.length <= 3) {
	    let m = document.getElementById('marker');
	    let mx, my;
	    if (t == 1) {
	      mx = -10, my = -10;
	    } else {
	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;
	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;
	    }
	    m.setAttribute('cx', mx);
	    m.setAttribute('cy', my);
	    path.setAttribute('stroke-width', 2);
	  }
	  if (points.length == 2) {
	    // only 2 points provided, special case
	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
	  }

	  path.setAttribute('d', tPathD);

	  if (subPoints.length > 2){
	    drawT(subPoints, t);
	  }
	}

	let t = 0;
	let timer;


	// animate the curve
	function animate(complete) {

	  timer = setInterval(function() {
	    if (t>1) {
	      t = 1;
	    }
	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
	    drawT(points, t);

	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
	/*
	    if (t >= 0.5) {
	      clearInterval(timer);
	      runButton.parentNode.style.display = 'none';
	      return;
	    }
	*/
	    if (t == 1) {
	      clearInterval(timer);
	      timer = 0;
	      complete && complete();
	      return;
	    }

	    t += 0.005;
	  }, 30);
	}

	function animationDone() {
	  for(let i=1; i<=points.length; i++) {
	    let path = document.getElementById('t-'+i);
	    path && document.documentElement.removeChild(path);
	  }
	  t = 0;
	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	}

	runButton.onclick = onAnimate;

	function onAnimate() {
	  if (timer) {
	    // animation in action
	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	    clearInterval(timer);
	    timer = 0;
	    return;
	  }

	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
	  animate(animationDone)
	}

	drawPath();
	drawPoints(points);


//]]></script>

</svg>
\ No newline at end of file
diff --git a/5-animation/1-bezier/pause.png b/3-animation/1-bezier-curve/pause.png
similarity index 100%
rename from 5-animation/1-bezier/pause.png
rename to 3-animation/1-bezier-curve/pause.png
diff --git a/5-animation/1-bezier/play.png b/3-animation/1-bezier-curve/play.png
similarity index 100%
rename from 5-animation/1-bezier/play.png
rename to 3-animation/1-bezier-curve/play.png
diff --git a/3-animation/2-css-animations/1-animate-logo-css/solution.md b/3-animation/2-css-animations/1-animate-logo-css/solution.md
new file mode 100644
index 00000000..7aa7ca72
--- /dev/null
+++ b/3-animation/2-css-animations/1-animate-logo-css/solution.md
@@ -0,0 +1,17 @@
+
+CSS to animate both `width` and `height`:
+```css
+/* original class */
+
+#flyjet {
+  transition: all 3s;
+}
+
+/* JS adds .growing */
+#flyjet.growing {
+  width: 400px;
+  height: 240px;
+}
+```
+
+Please note that `transitionend` triggers two times -- once for every property. So if we don't perform an additional check then the message would show up 2 times.
diff --git a/3-animation/2-css-animations/1-animate-logo-css/solution.view/index.html b/3-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
new file mode 100644
index 00000000..4e90e247
--- /dev/null
+++ b/3-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    img {
+      cursor: pointer;
+    }
+  </style>
+  <style>
+    #flyjet {
+      width: 40px;
+      height: 24px;
+      transition: all 3s;
+    }
+
+    #flyjet.growing {
+      width: 400px;
+      height: 240px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
+
+  <script>
+    flyjet.onclick = function() {
+
+      let ended = false;
+
+      flyjet.addEventListener('transitionend', function() {
+        if (!ended) {
+          ended = true;
+          alert('Done!');
+        }
+      });
+
+      flyjet.classList.add('growing');
+    }
+  </script>
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/1-animate-logo-css/source.view/index.html b/3-animation/2-css-animations/1-animate-logo-css/source.view/index.html
new file mode 100644
index 00000000..1117f4ba
--- /dev/null
+++ b/3-animation/2-css-animations/1-animate-logo-css/source.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    img {
+      cursor: pointer;
+    }
+  </style>
+  <style>
+    #flyjet {
+      width: 40px;
+      /* -> 400px */
+
+      height: 24px;
+      /* -> 240px */
+    }
+  </style>
+</head>
+
+<body>
+
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
+
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/1-animate-logo-css/task.md b/3-animation/2-css-animations/1-animate-logo-css/task.md
new file mode 100644
index 00000000..ee08cbbb
--- /dev/null
+++ b/3-animation/2-css-animations/1-animate-logo-css/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+# Animate a plane (CSS)
+
+Show the animation like on the picture below (click the plane):
+
+[iframe src="solution" height=300]
+
+- The picture grows on click from 40x24px to 400x240px.
+- The animation takes 3 seconds.
+- At the end output: "Done!".
+- During the animation process, there may be more clicks. They shouldn't "break" anything.
diff --git a/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png b/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png
new file mode 100644
index 00000000..91e2bfe5
Binary files /dev/null and b/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png differ
diff --git a/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png b/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png
new file mode 100644
index 00000000..31384e53
Binary files /dev/null and b/3-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png differ
diff --git a/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.md b/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
new file mode 100644
index 00000000..7f26d570
--- /dev/null
+++ b/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
@@ -0,0 +1,7 @@
+We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out".
+
+For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+
+The graph:
+
+![](bezier-up.png)
diff --git a/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html b/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html
new file mode 100644
index 00000000..242aa70b
--- /dev/null
+++ b/3-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    img {
+      display: block;
+      cursor: pointer;
+    }
+  </style>
+  <style>
+    #flyjet {
+      width: 40px;
+      height: 24px;
+      transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
+    }
+
+    #flyjet.growing {
+      width: 400px;
+      height: 240px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
+
+  <script>
+    flyjet.onclick = function() {
+      flyjet.classList.add('growing');
+    };
+  </script>
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/2-animate-logo-bezier-css/task.md b/3-animation/2-css-animations/2-animate-logo-bezier-css/task.md
new file mode 100644
index 00000000..9e21f410
--- /dev/null
+++ b/3-animation/2-css-animations/2-animate-logo-bezier-css/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Animate the flying plane (CSS)
+
+Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than it's original size 400x240px (jump out), and then return to that size.
+
+Here's how it should look (click on the plane):
+
+[iframe src="solution" height=350]
+
+Take the solution of the previous task as the source.
diff --git a/archive/widget-tasks/7-calendar/solution.md b/3-animation/2-css-animations/3-animate-circle/solution.md
similarity index 100%
rename from archive/widget-tasks/7-calendar/solution.md
rename to 3-animation/2-css-animations/3-animate-circle/solution.md
diff --git a/3-animation/2-css-animations/3-animate-circle/solution.view/index.html b/3-animation/2-css-animations/3-animate-circle/solution.view/index.html
new file mode 100644
index 00000000..88b15425
--- /dev/null
+++ b/3-animation/2-css-animations/3-animate-circle/solution.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .circle {
+      transition-property: width, height, margin-left, margin-top;
+      transition-duration: 2s;
+      position: fixed;
+      transform: translateX(-50%) translateY(-50%);
+      background-color: red;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <button onclick="showCircle(150, 150, 100)">showCircle(150, 150, 100)</button>
+
+  <script>
+  function showCircle(cx, cy, radius) {
+    let div = document.createElement('div');
+    div.style.width = 0;
+    div.style.height = 0;
+    div.style.left = cx + 'px';
+    div.style.top = cy + 'px';
+    div.className = 'circle';
+    document.body.append(div);
+
+    setTimeout(() => {
+      div.style.width = radius * 2 + 'px';
+      div.style.height = radius * 2 + 'px';
+    }, 0);
+  }
+  </script>
+
+
+</body>
+</html>
diff --git a/3-animation/2-css-animations/3-animate-circle/source.view/index.html b/3-animation/2-css-animations/3-animate-circle/source.view/index.html
new file mode 100644
index 00000000..a423280d
--- /dev/null
+++ b/3-animation/2-css-animations/3-animate-circle/source.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .circle {
+      transition-property: width, height, margin-left, margin-top;
+      transition-duration: 2s;
+      position: fixed;
+      transform: translateX(-50%) translateY(-50%);
+      background-color: red;
+      border-radius: 50%;
+
+      width: 200px;
+      height: 200px;
+      top: 150px;
+      left: 150px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="circle"></div>
+
+</body>
+</html>
diff --git a/3-animation/2-css-animations/3-animate-circle/task.md b/3-animation/2-css-animations/3-animate-circle/task.md
new file mode 100644
index 00000000..83bbb3e8
--- /dev/null
+++ b/3-animation/2-css-animations/3-animate-circle/task.md
@@ -0,0 +1,16 @@
+importance: 5
+
+---
+
+# Animated circle
+
+Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
+
+- `cx,cy` are window-relative coordinates of the center of the circle,
+- `radius` is the radius of the circle.
+
+Click the button below to see how it should look like:
+
+[iframe src="solution" height=260]
+
+The source document has an example of a circle with right styles, so the task is precisely to do the animation right.
diff --git a/3-animation/2-css-animations/article.md b/3-animation/2-css-animations/article.md
new file mode 100644
index 00000000..5c2b9925
--- /dev/null
+++ b/3-animation/2-css-animations/article.md
@@ -0,0 +1,422 @@
+# CSS-animations
+
+CSS animations allow to do simple animations without JavaScript at all.
+
+JavaScript can be used to control CSS animation and make them even better with a little of code.
+
+[cut]
+
+## CSS transitions [#css-transition]
+
+The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation.
+
+That is: all we need is to change the property. And the fluent transition is made by the browser.
+
+For instance, the CSS below animates changes of `background-color` for 3 seconds:
+
+```css
+.animated {
+  transition-property: background-color;
+  transition-duration: 3s;
+}
+```
+
+Now if an element has `.animated` class, any change of `background-color` is animated during 3 seconds.
+
+Click the button below to animate the background:
+
+```html run autorun height=60
+<button id="color">Click me</button>
+
+<style>
+  #color {
+    transition-property: background-color;
+    transition-duration: 3s;
+  }
+</style>
+
+<script>
+  color.onclick = function() {
+    this.style.backgroundColor = 'red';
+  };
+</script>
+```
+
+There are 5 properties to describe CSS transitions:
+
+- `transition-property`
+- `transition-duration`
+- `transition-timing-function`
+- `transition-delay`
+
+We'll cover them in a moment, for now let's note that the common `transition` property allows to declare them together in the order: `property duration timing-function delay`, and also animate multiple properties at once.
+
+For instance, this button animates both `color` and `font-size`:
+
+```html run height=80 autorun no-beautify
+<button id="growing">Click me</button>
+
+<style>
+#growing {
+*!*
+  transition: font-size 3s, color 2s;
+*/!*
+}
+</style>
+
+<script>
+growing.onclick = function() {
+  this.style.fontSize = '36px';
+  this.style.color = 'red';
+};
+</script>
+```
+
+Now let's cover animation properties one by one.
+
+## transition-property
+
+In `transition-property` we write a list of property to animate, for instance: `left`, `margin-left`, `height`, `color`.
+
+Not all properties can be animated, but [many of them](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties".
+
+## transition-duration
+
+In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](http://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
+
+## transition-delay
+
+In `transition-delay` we can specify the delay *before* the animation. For instance, if  `transition-delay: 1s`, then animation starts after 1 second after the change.
+
+Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the half.
+
+Here's the animation shifts numbers from `0` to `9` using CSS `translate` property:
+
+[codetabs src="digits"]
+
+The `transform` property is animated like this:
+
+```css
+#stripe.animate {
+  transform: translate(-90%);
+  transition-property: transform;
+  transition-duration: 9s;
+}
+```
+
+In the example above JavaScript adds the class `.animate` to the element -- and the animation starts:
+
+```js
+stripe.classList.add('animate');
+```
+
+We can also start it "from the middle", from the exact number, e.g. corresponding to the current second, using the negative `transition-delay`.
+
+Here if you click the digit -- it starts the animation from the current second:
+
+[codetabs src="digits-negative-delay"]
+
+JavaScript does it by an extra line:
+
+```js
+stripe.onclick = function() {
+  let sec = new Date().getSeconds() % 10;
+*!*
+  // for instance, -3s here starts the animation from the 3rd second
+  stripe.style.transitionDelay = '-' + sec + 's';
+*/!*
+  stripe.classList.add('animate');
+};
+```
+
+## transition-timing-function
+
+Timing function describes how the animation process is distributed along the time. Will it start slowly and then go fast or vise versa.
+
+That's the most complicated property from the first sight. But it becomes very simple if we devote a bit time to it.
+
+That property accepts two kinds of values: a Bezier curve or steps. Let's start from the curve, as it's used more often.
+
+### Bezier curve
+
+The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfies the conditions:
+
+1. First control point: `(0,0)`.
+2. Last control point: `(1,1)`.
+3. For intermediate points values of `x` must be in the interval `0..1`, `y` can be anything.
+
+The syntax for a Bezier curve in CSS: `cubic-bezier(x2, y2, x3, y3)`. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to `(0,0)` and the 4th one is `(1,1)`.
+
+The timing function describes how fast the animation process goes in time.
+
+- The `x` axis is the time: `0` -- the starting moment, `1` -- the last moment of `transition-duration`.
+- The `y` axis specifies the completion of the process: `0` -- the starting value of the property, `1` -- the final value.
+
+The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve `cubic-bezier(0, 0, 1, 1)`.
+
+Here's how that curve looks:
+
+![](bezier-linear.png)
+
+...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`.
+
+The train in the example below goes from left to right with the permanent speed (click it):
+
+[codetabs src="train-linear"]
+
+The CSS `transition` is bazed on that curve:
+
+```css
+.train {
+  left: 0;
+  transition: left 5s cubic-bezier(0, 0, 1, 1);
+  /* JavaScript sets left to 450px */
+}
+```
+
+...And how can we show a train slowing down?
+
+We can use another Bezier curve: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
+
+The graph:
+
+![](train-curve.png)
+
+As we can see, the process starts fast: the curve soars up high, and then slower and slower.
+
+Here's the timing function in action (click the train):
+
+[codetabs src="train"]
+
+CSS:
+```css
+.train {
+  left: 0;
+  transition: left 5s cubic-bezier(0, .5, .5, 1);
+  /* JavaScript sets left to 450px */
+}
+```
+
+There are several built-in curves: `linear`, `ease`, `ease-in`, `ease-out` and `ease-in-out`.
+
+The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, we saw it already.
+
+Other names are shorthands for the following `cubic-bezier`:
+
+| <code>ease</code><sup>*</sup> | <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> |
+|-------------------------------|----------------------|-----------------------|--------------------------|
+| <code>(0.25, 0.1, 0.25, 1.0)</code> | <code>(0.42, 0, 1.0, 1.0)</code> | <code>(0, 0, 0.58, 1.0)</code> | <code>(0.42, 0, 0.58, 1.0)</code> |
+| ![ease, figure](ease.png) | ![ease-in, figure](ease-in.png) | ![ease-out, figure](ease-out.png) | ![ease-in-out, figure](ease-in-out.png) |
+
+`*` -- by default, if there's no timing function, `ease` is used.
+
+So we could use `ease-out` for our slowing down train:
+
+
+```css
+.train {
+  left: 0;
+  transition: left 5s ease-out;
+  /* transition: left 5s cubic-bezier(0, .5, .5, 1); */
+}
+```
+
+But it looks a bit differently.
+
+**A Bezier curve can make the animation "jump out" of its range.**
+
+The control points on the curve can have any `y` coordinates: even negative or huge. Then the Bezier curve would also jump very low or high, making the animation go beyound its normal range.
+
+In the example below the animation code is:
+```css
+.train {
+  left: 100px;
+  transition: left 5s cubic-bezier(.5, -1, .5, 2);
+  /* JavaScript sets left to 400px */
+}
+```
+
+The property `left` should animate from `100px` to `400px`.
+
+But if you click the train, you'll see that:
+
+- First, the train goes *back*: `left` becomes less than `100px`.
+- Then it goes forward, a little bit farther than `400px`.
+- And then back again -- to `400px`.
+
+[codetabs src="train-over"]
+
+Why it happens -- pretty obvious if we look at the graph of the given Bezier curve:
+
+![](bezier-train-over.png)
+
+We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`.
+
+As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property lower than the starting `left` and `y>1` -- over the final `left`.
+
+That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more.
+
+But how to make the Bezier curve for a specific task? There are many tools. For instance, we can do it on the site <http://cubic-bezier.com/>.
+
+### Steps
+
+Timing function `steps(number of steps[, start/end])` allows to split animation into steps.
+
+Let's see that in an example with digits. We'll make the digits change not in a smooth, but in a discrete way.
+
+For that we split the animation into 9 steps:
+
+```css
+#stripe.animate  {
+  transform: translate(-90%);
+  transition: transform 9s *!*steps(9, start)*/!*;
+}
+```
+
+In action `step(9, start)`:
+
+[codetabs src="step"]
+
+The first argument of `steps` is the number of steps. The transform will be split into 9 parts (10% each). The time interval is divided as well: 9 seconds split into 1 second intervals.
+
+The second argument is one of two words: `start` or `end`.
+
+The `start` means that in the beginning of animation we need to do make the first step immediately.
+
+We can observe that during the animation: when we click on the digit it changes to `1` (the first step) immediately, and then changes in the beginning of the next second.
+
+The process is progressing like this:
+
+- `0s` -- `-10%` (first change in the beginning of the 1st second, immediately)
+- `1s` -- `-20%`
+- ...
+- `8s` -- `-80%`
+- (the last second shows the final value).
+
+The alternative value `end` would mean that the change should be applied not in the beginning, but at the end of each second.
+
+So the process would go like this:
+
+- `0s` -- `0`
+- `1s` -- `-10%` (first change at the end of the 1st second)
+- `2s` -- `-20%`
+- ...
+- `9s` -- `-90%`
+
+In action `step(9, end)`:
+
+[codetabs src="step-end"]
+
+There are also shorthand values:
+
+- `step-start` -- is the same as `steps(1, start)`. That is, the animation starts immediately and takes 1 step. So it starts and finishes immediately, as if there were no animation.
+- `step-end` -- the same as `steps(1, end)`: make the animation in a single step at the end of `transition-duration`.
+
+These values are rarely used, because that's not really animation, but rather a single-step change.
+
+## Event transitionend
+
+When the CSS animation finishes the `transitionend` event triggers.
+
+It is widely used to do an action after the animation is done. Also we can join animations.
+
+For instance, the ship in the example below starts to swim there and back on click, each time farther and farther to the right:
+
+[iframe src="boat" height=300 edit link]
+
+The animation is initiated by the function `go` that re-runs each time when the transition finishes and flips the direction:
+
+```js
+boat.onclick = function() {
+  //...
+  let times = 1;
+
+  function go() {
+    if (times % 2) {
+      // swim to the right
+      boat.classList.remove('back');
+      boat.style.marginLeft = 100 * times + 200 + 'px';
+    } else {
+      // swim to the left
+      boat.classList.add('back');
+      boat.style.marginLeft = 100 * times - 200 + 'px';
+    }
+
+  }
+
+  go();
+
+  boat.addEventListener('transitionend', function() {
+    times++;
+    go();
+  });
+};
+```
+
+The event object for `transitionend` has few specific properties:
+
+`event.propertyName`
+: The property that has finished animating. Can be good if we animate multiple properties simultaneously.
+
+`event.elapsedTime`
+: The time (in secods) that the animation took, without `transition-delay`.
+
+## Keyframes
+
+We can join multiple simple animations together using the `@keyframes` CSS rule.
+
+It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we attach the animation to the element and specify additional parameters for it.
+
+Here's an example with explanations:
+
+```html run height=60 autorun="no-epub" no-beautify
+<div class="progress"></div>
+
+<style>
+*!*
+  @keyframes go-left-right {        /* give it a name: "go-left-right" */
+    from { left: 0px; }             /* animate from left: 0px */
+    to { left: calc(100% - 50px); } /* animate to left: 100%-50px */
+  }
+*/!*
+
+  .progress {
+*!*
+    animation: go-left-right 3s infinite alternate;
+    /* apply the animation "go-left-right" to the element
+       duration 3 seconds
+       number of times: infinite
+       alternate direction every time
+    */
+*/!*
+
+    position: relative;
+    border: 2px solid green;
+    width: 50px;
+    height: 20px;
+    background: lime;
+  }
+</style>
+```
+
+There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/), so we won't go into more details here.
+
+Probably you won't need it often, unless everything is in the constant move on your sites.
+
+## Summary
+
+CSS animations allow to smoothly (or not) animate changes to one or multiple CSS properties.
+
+They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
+
+Limitations of CSS animations compared to JavaScript animations:
+
+```compare
+- JavaScript animations are more flexible. They can implement any animation logic, like "explosion" of an element. We can create new elements in JavaScript for purposes of animation.
++ Simple things done simple.
++ Fast and easy for CPU.
+```
+
+The vast majority of animations uses the described CSS properties. And maybe the `transitionend` event to bind some JavaScript after it.
+
+But in the next chapter we'll do some JavaScript animations to cover more complex cases.
diff --git a/3-animation/2-css-animations/bezier-linear.png b/3-animation/2-css-animations/bezier-linear.png
new file mode 100644
index 00000000..795e4cdf
Binary files /dev/null and b/3-animation/2-css-animations/bezier-linear.png differ
diff --git a/3-animation/2-css-animations/bezier-linear@2x.png b/3-animation/2-css-animations/bezier-linear@2x.png
new file mode 100644
index 00000000..95ec3cf9
Binary files /dev/null and b/3-animation/2-css-animations/bezier-linear@2x.png differ
diff --git a/3-animation/2-css-animations/bezier-train-over.png b/3-animation/2-css-animations/bezier-train-over.png
new file mode 100644
index 00000000..bd482290
Binary files /dev/null and b/3-animation/2-css-animations/bezier-train-over.png differ
diff --git a/3-animation/2-css-animations/bezier-train-over@2x.png b/3-animation/2-css-animations/bezier-train-over@2x.png
new file mode 100644
index 00000000..8dad7cc3
Binary files /dev/null and b/3-animation/2-css-animations/bezier-train-over@2x.png differ
diff --git a/3-animation/2-css-animations/boat.view/index.html b/3-animation/2-css-animations/boat.view/index.html
new file mode 100644
index 00000000..60b70426
--- /dev/null
+++ b/3-animation/2-css-animations/boat.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <img src="https://js.cx/clipart/boat.png" id="boat">
+
+  <script>
+    boat.onclick = function() {
+
+      this.onclick = null; // only the first click should start the animation
+
+      let times = 1;
+
+      function go() {
+        if (times % 2) {
+          boat.classList.remove('back');
+          boat.style.marginLeft = 100 * times + 200 + 'px';
+        } else {
+          boat.classList.add('back');
+          boat.style.marginLeft = 100 * times - 200 + 'px';
+        }
+
+      }
+
+      go();
+
+      boat.addEventListener('transitionend', function() {
+        times++;
+        go();
+      });
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/boat.view/style.css b/3-animation/2-css-animations/boat.view/style.css
new file mode 100644
index 00000000..db6b23bc
--- /dev/null
+++ b/3-animation/2-css-animations/boat.view/style.css
@@ -0,0 +1,11 @@
+#boat {
+  margin-left: 0;
+  cursor: pointer;
+  transition: margin-left 3s ease-in-out;
+}
+
+/* flipping the picture with CSS */
+.back {
+  transform: scaleX(-1);
+  filter: fliph;
+}
diff --git a/3-animation/2-css-animations/digits-negative-delay.view/index.html b/3-animation/2-css-animations/digits-negative-delay.view/index.html
new file mode 100644
index 00000000..dbeefaae
--- /dev/null
+++ b/3-animation/2-css-animations/digits-negative-delay.view/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  Click below to animate:
+  <div id="digit"><div id="stripe">0123456789</div></div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/3-animation/2-css-animations/digits-negative-delay.view/script.js b/3-animation/2-css-animations/digits-negative-delay.view/script.js
new file mode 100644
index 00000000..e2e91b40
--- /dev/null
+++ b/3-animation/2-css-animations/digits-negative-delay.view/script.js
@@ -0,0 +1,5 @@
+stripe.onclick = function() {
+  let sec = new Date().getSeconds() % 10;
+  stripe.style.transitionDelay = '-' + sec + 's';
+  stripe.classList.add('animate');
+};
\ No newline at end of file
diff --git a/3-animation/2-css-animations/digits-negative-delay.view/style.css b/3-animation/2-css-animations/digits-negative-delay.view/style.css
new file mode 100644
index 00000000..78c10f40
--- /dev/null
+++ b/3-animation/2-css-animations/digits-negative-delay.view/style.css
@@ -0,0 +1,17 @@
+#digit {
+  width: .5em;
+  overflow: hidden;
+  font: 32px monospace;
+  cursor: pointer;
+}
+
+#stripe {
+  display: inline-block
+}
+
+#stripe.animate {
+  transform: translate(-90%);
+  transition-property: transform;
+  transition-duration: 9s;
+  transition-timing-function: linear;
+}
diff --git a/3-animation/2-css-animations/digits.view/index.html b/3-animation/2-css-animations/digits.view/index.html
new file mode 100644
index 00000000..a156d818
--- /dev/null
+++ b/3-animation/2-css-animations/digits.view/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  Click below to animate:
+
+  <div id="digit"><div id="stripe">0123456789</div></div>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/5-animation/2-css-transitions/digits.view/script.js b/3-animation/2-css-animations/digits.view/script.js
similarity index 100%
rename from 5-animation/2-css-transitions/digits.view/script.js
rename to 3-animation/2-css-animations/digits.view/script.js
diff --git a/3-animation/2-css-animations/digits.view/style.css b/3-animation/2-css-animations/digits.view/style.css
new file mode 100644
index 00000000..78c10f40
--- /dev/null
+++ b/3-animation/2-css-animations/digits.view/style.css
@@ -0,0 +1,17 @@
+#digit {
+  width: .5em;
+  overflow: hidden;
+  font: 32px monospace;
+  cursor: pointer;
+}
+
+#stripe {
+  display: inline-block
+}
+
+#stripe.animate {
+  transform: translate(-90%);
+  transition-property: transform;
+  transition-duration: 9s;
+  transition-timing-function: linear;
+}
diff --git a/3-animation/2-css-animations/ease-in-out.png b/3-animation/2-css-animations/ease-in-out.png
new file mode 100644
index 00000000..50ed8a7b
Binary files /dev/null and b/3-animation/2-css-animations/ease-in-out.png differ
diff --git a/3-animation/2-css-animations/ease-in-out@2x.png b/3-animation/2-css-animations/ease-in-out@2x.png
new file mode 100644
index 00000000..067ad9ba
Binary files /dev/null and b/3-animation/2-css-animations/ease-in-out@2x.png differ
diff --git a/3-animation/2-css-animations/ease-in.png b/3-animation/2-css-animations/ease-in.png
new file mode 100644
index 00000000..e00c52c4
Binary files /dev/null and b/3-animation/2-css-animations/ease-in.png differ
diff --git a/3-animation/2-css-animations/ease-in@2x.png b/3-animation/2-css-animations/ease-in@2x.png
new file mode 100644
index 00000000..14207250
Binary files /dev/null and b/3-animation/2-css-animations/ease-in@2x.png differ
diff --git a/3-animation/2-css-animations/ease-out.png b/3-animation/2-css-animations/ease-out.png
new file mode 100644
index 00000000..b95ce550
Binary files /dev/null and b/3-animation/2-css-animations/ease-out.png differ
diff --git a/3-animation/2-css-animations/ease-out@2x.png b/3-animation/2-css-animations/ease-out@2x.png
new file mode 100644
index 00000000..df4cca89
Binary files /dev/null and b/3-animation/2-css-animations/ease-out@2x.png differ
diff --git a/3-animation/2-css-animations/ease.png b/3-animation/2-css-animations/ease.png
new file mode 100644
index 00000000..2d4d91cd
Binary files /dev/null and b/3-animation/2-css-animations/ease.png differ
diff --git a/3-animation/2-css-animations/ease@2x.png b/3-animation/2-css-animations/ease@2x.png
new file mode 100644
index 00000000..49eeb960
Binary files /dev/null and b/3-animation/2-css-animations/ease@2x.png differ
diff --git a/3-animation/2-css-animations/step-end.view/index.html b/3-animation/2-css-animations/step-end.view/index.html
new file mode 100644
index 00000000..2c8df727
--- /dev/null
+++ b/3-animation/2-css-animations/step-end.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  Click below to animate:
+
+  <div id="digit"><div id="stripe">0123456789</div></div>
+
+  <script>
+    digit.onclick = function() {
+      stripe.classList.add('animate');
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/step-end.view/style.css b/3-animation/2-css-animations/step-end.view/style.css
new file mode 100644
index 00000000..7fe90c60
--- /dev/null
+++ b/3-animation/2-css-animations/step-end.view/style.css
@@ -0,0 +1,17 @@
+#digit {
+  width: .5em;
+  overflow: hidden;
+  font: 32px monospace;
+  cursor: pointer;
+}
+
+#stripe {
+  display: inline-block
+}
+
+#stripe.animate {
+  transform: translate(-90%);
+  transition-property: transform;
+  transition-duration: 9s;
+  transition-timing-function: steps(9, end);
+}
diff --git a/3-animation/2-css-animations/step.view/index.html b/3-animation/2-css-animations/step.view/index.html
new file mode 100644
index 00000000..2c8df727
--- /dev/null
+++ b/3-animation/2-css-animations/step.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  Click below to animate:
+
+  <div id="digit"><div id="stripe">0123456789</div></div>
+
+  <script>
+    digit.onclick = function() {
+      stripe.classList.add('animate');
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/2-css-animations/step.view/style.css b/3-animation/2-css-animations/step.view/style.css
new file mode 100644
index 00000000..7bb7e2d8
--- /dev/null
+++ b/3-animation/2-css-animations/step.view/style.css
@@ -0,0 +1,17 @@
+#digit {
+  width: .5em;
+  overflow: hidden;
+  font: 32px monospace;
+  cursor: pointer;
+}
+
+#stripe {
+  display: inline-block
+}
+
+#stripe.animate {
+  transform: translate(-90%);
+  transition-property: transform;
+  transition-duration: 9s;
+  transition-timing-function: steps(9, start);
+}
diff --git a/3-animation/2-css-animations/train-curve.png b/3-animation/2-css-animations/train-curve.png
new file mode 100644
index 00000000..213ed84a
Binary files /dev/null and b/3-animation/2-css-animations/train-curve.png differ
diff --git a/3-animation/2-css-animations/train-curve@2x.png b/3-animation/2-css-animations/train-curve@2x.png
new file mode 100644
index 00000000..4d8d698d
Binary files /dev/null and b/3-animation/2-css-animations/train-curve@2x.png differ
diff --git a/5-animation/2-css-transitions/train-linear.view/index.html b/3-animation/2-css-animations/train-linear.view/index.html
similarity index 100%
rename from 5-animation/2-css-transitions/train-linear.view/index.html
rename to 3-animation/2-css-animations/train-linear.view/index.html
diff --git a/5-animation/2-css-transitions/train-linear.view/style.css b/3-animation/2-css-animations/train-linear.view/style.css
similarity index 100%
rename from 5-animation/2-css-transitions/train-linear.view/style.css
rename to 3-animation/2-css-animations/train-linear.view/style.css
diff --git a/5-animation/2-css-transitions/train-over.view/index.html b/3-animation/2-css-animations/train-over.view/index.html
similarity index 100%
rename from 5-animation/2-css-transitions/train-over.view/index.html
rename to 3-animation/2-css-animations/train-over.view/index.html
diff --git a/5-animation/2-css-transitions/train-over.view/style.css b/3-animation/2-css-animations/train-over.view/style.css
similarity index 100%
rename from 5-animation/2-css-transitions/train-over.view/style.css
rename to 3-animation/2-css-animations/train-over.view/style.css
diff --git a/5-animation/2-css-transitions/train.view/index.html b/3-animation/2-css-animations/train.view/index.html
similarity index 100%
rename from 5-animation/2-css-transitions/train.view/index.html
rename to 3-animation/2-css-animations/train.view/index.html
diff --git a/5-animation/2-css-transitions/train.view/style.css b/3-animation/2-css-animations/train.view/style.css
similarity index 100%
rename from 5-animation/2-css-transitions/train.view/style.css
rename to 3-animation/2-css-animations/train.view/style.css
diff --git a/3-animation/3-js-animation/1-animate-ball/solution.md b/3-animation/3-js-animation/1-animate-ball/solution.md
new file mode 100644
index 00000000..3a9b8564
--- /dev/null
+++ b/3-animation/3-js-animation/1-animate-ball/solution.md
@@ -0,0 +1,21 @@
+To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+
+The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
+
+So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
+
+Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+
+Here's the final code for the animation:
+
+```js
+let to = field.clientHeight - ball.clientHeight;
+
+animate({
+  duration: 2000,
+  timing: makeEaseOut(bounce),
+  draw(progress) {
+    ball.style.top = to * progress + 'px'
+  }
+});
+```
diff --git a/3-animation/3-js-animation/1-animate-ball/solution.view/index.html b/3-animation/3-js-animation/1-animate-ball/solution.view/index.html
new file mode 100644
index 00000000..7e031e8d
--- /dev/null
+++ b/3-animation/3-js-animation/1-animate-ball/solution.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <script src="https://js.cx/libs/animate.js"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
+  </div>
+
+  <script>
+    function makeEaseOut(timing) {
+      return function(timeFraction) {
+        return 1 - timing(1 - timeFraction);
+      }
+    }
+
+    function bounce(timeFraction) {
+      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+        if (timeFraction >= (7 - 4 * a) / 11) {
+          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+        }
+      }
+    }
+
+    ball.onclick = function() {
+
+      let to = field.clientHeight - ball.clientHeight;
+
+      animate({
+        duration: 2000,
+        timing: makeEaseOut(bounce),
+        draw(progress) {
+          ball.style.top = to * progress + 'px'
+        }
+      });
+
+
+    };
+  </script>
+
+
+
+</body>
+
+</html>
diff --git a/5-animation/3-js-animation/1-animate-ball/solution.view/style.css b/3-animation/3-js-animation/1-animate-ball/solution.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/1-animate-ball/solution.view/style.css
rename to 3-animation/3-js-animation/1-animate-ball/solution.view/style.css
diff --git a/3-animation/3-js-animation/1-animate-ball/source.view/index.html b/3-animation/3-js-animation/1-animate-ball/source.view/index.html
new file mode 100644
index 00000000..4095fbea
--- /dev/null
+++ b/3-animation/3-js-animation/1-animate-ball/source.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <script src="https://en.js.cx/libs/animate.js"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball">
+  </div>
+
+
+</body>
+
+</html>
diff --git a/5-animation/3-js-animation/1-animate-ball/source.view/style.css b/3-animation/3-js-animation/1-animate-ball/source.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/1-animate-ball/source.view/style.css
rename to 3-animation/3-js-animation/1-animate-ball/source.view/style.css
diff --git a/3-animation/3-js-animation/1-animate-ball/task.md b/3-animation/3-js-animation/1-animate-ball/task.md
new file mode 100644
index 00000000..903e8238
--- /dev/null
+++ b/3-animation/3-js-animation/1-animate-ball/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Animate the bouncing ball
+
+Make a bouncing ball. Click to see how it should look:
+
+[iframe height=250 src="solution"]
diff --git a/3-animation/3-js-animation/2-animate-ball-hops/solution.md b/3-animation/3-js-animation/2-animate-ball-hops/solution.md
new file mode 100644
index 00000000..d47387e3
--- /dev/null
+++ b/3-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -0,0 +1,32 @@
+In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+
+The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+
+We can write one more `animate` for it.
+
+As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+
+The code:
+
+```js
+let height = field.clientHeight - ball.clientHeight;
+let width = 100;
+
+// animate top (bouncing)
+animate({
+  duration: 2000,
+  timing: makeEaseOut(bounce),
+  draw: function(progress) {
+    ball.style.top = height * progress + 'px'
+  }
+});
+
+// animate left (moving to the right)
+animate({
+  duration: 2000,
+  timing: makeEaseOut(quad),
+  draw: function(progress) {
+    ball.style.left = width * progress + "px"
+  }
+});
+```
diff --git a/3-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html b/3-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
new file mode 100644
index 00000000..b246f422
--- /dev/null
+++ b/3-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <script src="https://js.cx/libs/animate.js"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+  <div id="field">
+    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
+  </div>
+
+  <script>
+    function makeEaseOut(timing) {
+      return function(timeFraction) {
+        return 1 - timing(1 - timeFraction);
+      }
+    }
+
+    function bounce(timeFraction) {
+      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+        if (timeFraction >= (7 - 4 * a) / 11) {
+          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+        }
+      }
+    }
+
+    function quad(timeFraction) {
+      return Math.pow(timeFraction, 2);
+    }
+
+    ball.onclick = function() {
+
+      let height = field.clientHeight - ball.clientHeight;
+      let width = 100;
+
+      animate({
+        duration: 2000,
+        timing: makeEaseOut(bounce),
+        draw: function(progress) {
+          ball.style.top = height * progress + 'px'
+        }
+      });
+
+      animate({
+        duration: 2000,
+        timing: makeEaseOut(quad),
+        draw: function(progress) {
+          ball.style.left = width * progress + "px"
+        }
+      });
+    }
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/solution.view/style.css b/3-animation/3-js-animation/2-animate-ball-hops/solution.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/2-animate-ball-hops/solution.view/style.css
rename to 3-animation/3-js-animation/2-animate-ball-hops/solution.view/style.css
diff --git a/3-animation/3-js-animation/2-animate-ball-hops/task.md b/3-animation/3-js-animation/2-animate-ball-hops/task.md
new file mode 100644
index 00000000..1134d192
--- /dev/null
+++ b/3-animation/3-js-animation/2-animate-ball-hops/task.md
@@ -0,0 +1,13 @@
+importance: 5
+
+---
+
+# Animate the ball bouncing to the left
+
+Make the ball bounce to the left. Like this:
+
+[iframe height=250 src="solution"]
+
+Write the animation code. The distance to the right is `100px`.
+
+Take the solution of the previous task <info:task/animate-ball> as the source.
diff --git a/3-animation/3-js-animation/article.md b/3-animation/3-js-animation/article.md
new file mode 100644
index 00000000..f91f72e6
--- /dev/null
+++ b/3-animation/3-js-animation/article.md
@@ -0,0 +1,460 @@
+# JavaScript animations
+
+JavaScript animations can handle things that CSS can't.
+
+For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.
+
+[cut]
+
+## setInterval
+
+From the HTML/CSS point of view, an animation is a gradual change of the style property. For instance, changing `style.left` from `0px` to `100px` moves the element.
+
+And if we increase it in `setInterval`, by making 50 small changes per second, then it looks smooth. That's the same principle as in the cinema: 24 or more frames per second is enough to make it look smooth.
+
+The pseudo-code can look like this:
+
+```js
+let fps = 50; // 50 frames per second
+let timer = setInterval(function() {
+  if (animation complete) clearInterval(timer);
+  else increase style.left
+}, 1000 / fps)
+```
+
+More complete example of the animation:
+
+```js
+let start = Date.now(); // remember start time
+
+let timer = setInterval(function() {
+  // how much time passed from the start?
+  let timePassed = Date.now() - start;
+
+  if (timePassed >= 2000) {
+    clearInterval(timer); // finish the animation after 2 seconds
+    return;
+  }
+
+  // draw the animation at the moment timePassed
+  draw(timePassed);
+
+}, 20);
+
+// as timePassed goes from 0 to 2000
+// left gets values from 0px to 400px
+function draw(timePassed) {
+  train.style.left = timePassed / 5 + 'px';
+}
+```
+
+Click for the demo:
+
+[codetabs height=200 src="move"]
+
+## requestAnimationFrame
+
+Let's imagine we have several simultaneous animations.
+
+If we run them separately, each one with its own `setInterval(..., 20)`, then the browser would have to repaint much more often than every `20ms`.
+
+Each `setInterval` triggers once per `20ms`, but they are independent, so we have several independent runs within `20ms`.
+
+These several independent actions should be grouped together, because it's easier for the browser to redraw things once per `20ms`.
+
+In other words, this:
+
+```js
+setInterval(function() {
+  animate1();
+  animate2();
+  animate3();
+}, 20)
+```
+
+...Is lighter than this:
+
+```js
+setInterval(animate1, 20);
+setInterval(animate2, 20);
+setInterval(animate3, 20);
+```
+
+There's one more thing to keep in mind. Sometimes when CPU is overloaded or for other reasons it may be better to trigger redraws less often. Not 20, but maybe 200ms.
+
+There's a standard [Animation timing](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`.
+
+It addresses all those issues and even more.
+
+The syntax:
+```js
+let requestId = requestAnimationFrame(callback)
+```
+
+That schedules the `callback` function to run in the closest time when the browser wants to do animation.
+
+If we do changes in elements in `callback` then they will be grouped together with other `requestAnimationFrame` callbacks and with CSS animations. So there will be one geometry recalculation and repaint instead of many.
+
+The returned value `requestId` can be used to cancel the call:
+```js
+// cancel the scheduled execution of callback
+cancelAnimationFrame(requestId);
+```
+
+The `callback` gets one argument -- the time passed from the beginning of the page load in microseconds. This time can also be obtained by calling [performance.now()](mdn:api/Performance/now).
+
+Usually `callback` runs very soon, unless the CPU is overloaded or the laptop battery is almost discharged, or there's another reason.
+
+The code below shows the time between first 20 runs for `requestAnimationFrame`. Usually it's 10-20ms:
+
+```html run height=40 refresh
+<script>
+  let prev = performance.now();
+  let times = 0;
+
+  requestAnimationFrame(function measure(time) {
+    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
+    prev = time;
+
+    if (times++ < 10) requestAnimationFrame(measure);
+  })
+</script>
+```
+
+## Structured animation
+
+Now we can make a more universal animation function based on `requestAnimationFrame`:
+
+```js
+function animate({timing, draw, duration}) {
+
+  let start = performance.now();
+
+  requestAnimationFrame(function animate(time) {
+    // timeFraction goes from 0 to 1
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) timeFraction = 1;
+
+    // calculate the current animation state
+    let progress = timing(timeFraction)
+
+    draw(progress); // draw it
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+
+  });
+}
+```
+
+Function `animate` accepts 3 parameters that essentially describes the animation:
+
+`duration`
+: Total time of animation. Like, `1000`.
+
+`timing(timeFraction)`
+: Timing function, like CSS-property `transition-timing-function` that gets the fraction of time that passed (`0` at start, `1` at the end) and returns the animation completion (like `y` on the Bezier curve).
+
+    For instance, a linear function means that the animation goes on uniformly with the same speed:
+
+    ```js
+    function linear(timeFraction) {
+      return timeFraction;
+    }
+    ```
+
+    It's graph:
+    ![](linear.png)
+
+    That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
+
+`draw(progress)`
+: The function that takes the animation completion state and draws it. The value `progress=0` denotes the beginning animation state, and `progress=1` -- the end state.
+
+    This is that function that actually draws out the animation.
+
+    It can move the element:
+    ```js
+    function draw(progress) {
+      train.style.left = progress + 'px';
+    }
+    ```
+
+    ...Or do anything else, we can animate anything, in any way.
+
+
+Let's animate the element `width` from `0` to `100%` using our function.
+
+Click on the element for the demo:
+
+[codetabs height=60 src="width"]
+
+The code for it:
+
+```js
+animate({
+  duration: 1000,
+  timing(timeFraction) {
+    return timeFraction;
+  },
+  draw(progress) {
+    elem.style.width = progress * 100 + '%';
+  }
+});
+```
+
+Unlike CSS animation, we can make any timing function and any drawing function here. The timing function is not limited by Bezier curves. And `draw` can go beyond properties, create new elements for like fireworks animation or something.
+
+## Timing functions
+
+We saw the simplest, linear timing function above.
+
+Let's see more of them. We'll try movement animations with different timing functions to see how they work.
+
+### Power of n
+
+If we want to speed up the animation, we can use `progress` in the power `n`.
+
+For instance, a parabolic curve:
+
+```js
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+```
+
+The graph:
+
+![](quad.png)
+
+See in action (click to activate):
+
+[iframe height=40 src="quad" link]
+
+...Or the cubic curve or event greater `n`. Increasing the power makes it speed up faster.
+
+Here's the graph for `progress` in the power `5`:
+
+![](quint.png)
+
+In action:
+
+[iframe height=40 src="quint" link]
+
+### The arc
+
+Function:
+
+```js
+function circ(timeFraction) {
+  return 1 - Math.sin(Math.acos(timeFraction));
+}
+```
+
+The graph:
+
+![](circ.png)
+
+[iframe height=40 src="circ" link]
+
+### Back: bow shooting
+
+This function does the "bow shooting". First we "pull the bowstring", and then "shoot".
+
+Unlike previous functions, it depends on an additional parameter `x`, the "elasticity coefficient". The distance of "bowstring pulling" is defined by it.
+
+The code:
+
+```js
+function back(x, timeFraction) {
+  return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
+}
+```
+
+**The graph for `x = 1.5`:**
+
+![](back.png)
+
+For animation we use it with a specific value of `x`. Example for `x = 1.5`:
+
+[iframe height=40 src="back" link]
+
+### Bounce
+
+Imagine we are dropping a ball. It falls down, then bounces back a few times and stops.
+
+The `bounce` function does the same, but in the reverse order: "bouncing" starts immediately. It uses few special coefficients for that:
+
+```js
+function bounce(timeFraction) {
+  for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (timeFraction >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+    }
+  }
+}
+```
+
+In action:
+
+[iframe height=40 src="bounce" link]
+
+### Elastic animation
+
+One more "elastic" function that accepts an additional parameter `x` for the "initial range".
+
+```js
+function elastic(x, timeFraction) {
+  return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
+}
+```
+
+**The graph for `x=1.5`:**
+![](elastic.png)
+
+In action for `x=1.5`:
+
+[iframe height=40 src="elastic" link]
+
+## Reversal: ease*
+
+So we have a collection of timing functions. Their direct application is called "easeIn".
+
+Sometimes we need to show the animation in the reverse order. That's done with the "easeOut" transform.
+
+### easeOut
+
+In the "easeOut" mode the `timing` function is put into a wrapper `timingEaseOut`:
+
+```js
+timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)
+```
+
+In other words, we have a "transform" function `makeEaseOut` that takes a "regular" timing function and returns the wrapper around it:
+
+```js
+// accepts a timing function, returns the transformed variant
+function makeEaseOut(timing) {
+  return function(timeFraction) {
+    return 1 - timing(1 - timeFraction);
+  }
+}
+```
+
+For instance, we can take the `bounce` function described above and apply it:
+
+```js
+let bounceEaseOut = makeEaseOut(bounce);
+```
+
+Then the bounce will be not in the beginning, but at the end of the animation. Looks even better:
+
+[codetabs src="bounce-easeout"]
+
+Here we can see how the transform changes the behavior of the function:
+
+![](bounce-inout.png)
+
+If there's an animation effect in the beginning, like bouncing -- it will be shown at the end.
+
+In the graph above the <span style="color:#EE6B47">regular bounce</span> has the red color, and the <span style="color:#62C0DC">easeOut bounce</span> is blue.
+
+- Regular bounce -- the object bounces at the bottom, then at the end sharply jumps to the top.
+- After `easeOut` -- it first jumps to the top, then bounces there.
+
+### easeInOut
+
+We also can show the effect both in the beginning and the end of the animation. The transform is called "easeInOut".
+
+Given the timing function, we calculate the animation state like this:
+
+```js
+if (timeFraction <= 0.5) { // first half of the animation
+  return timing(2 * timeFraction) / 2;
+} else { // second half of the animation
+  return (2 - timing(2 * (1 - timeFraction))) / 2;
+}
+```
+
+The wrapper code:
+
+```js
+function makeEaseInOut(timing) {
+  return function(timeFraction) {
+    if (timeFraction < .5)
+      return timing(2 * timeFraction) / 2;
+    else
+      return (2 - timing(2 * (1 - timeFraction))) / 2;
+  }
+}
+
+bounceEaseInOut = makeEaseInOut(bounce);
+```
+
+In action, `bounceEaseInOut`:
+
+[codetabs src="bounce-easeinout"]
+
+The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the first half of the animation and `easeOut` (reversed) -- for the second part.
+
+The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function:
+
+![](circ-ease.png)
+
+- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
+- <span style="color:#8DB173">Green</span> -- `easeOut`.
+- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
+
+As we can see, the graph of the first half of the animation is the scaled down `easeIn`, and the second half is the scaled down `easeOut`. As a result, the animation starts and finishes with the same effect.
+
+## More interesting "draw"
+
+Instead of moving the element we can do something else. All we need is to write the write the proper `draw`.
+
+Here's the animated "bouncing" text typing:
+
+[codetabs src="text"]
+
+## Summary
+
+JavaScript animation should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser.
+
+When a page is in the background, there are no repaints at all, so the callback won't run: the animation will be suspended and won't consume resources. That's great.
+
+Here's the helper `animate` function to setup most animations:
+
+```js
+function animate({timing, draw, duration}) {
+
+  let start = performance.now();
+
+  requestAnimationFrame(function animate(time) {
+    // timeFraction goes from 0 to 1
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) timeFraction = 1;
+
+    // calculate the current animation state
+    let progress = timing(timeFraction);
+
+    draw(progress); // draw it
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+
+  });
+}
+```
+
+Options:
+
+- `duration` -- the total animation time in ms.
+- `timing` -- the function to calculate animation progress. Gets a time fraction from 0 to 1, returns the animation progress, usually from 0 to 1.
+- `draw` -- the function to draw the animation.
+
+Surely we could improve it, add more bells and whistles, but JavaScript animations are not applied on a daily basis. They are used to do something interesting and non-standard. So you'd want to add the features that you need when you need them.
+
+JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here.
+
+The same is about `draw`: we can animate anything, not just CSS properties.
diff --git a/3-animation/3-js-animation/back.png b/3-animation/3-js-animation/back.png
new file mode 100644
index 00000000..c63bc9d9
Binary files /dev/null and b/3-animation/3-js-animation/back.png differ
diff --git a/5-animation/3-js-animation/back.view/index.html b/3-animation/3-js-animation/back.view/index.html
similarity index 100%
rename from 5-animation/3-js-animation/back.view/index.html
rename to 3-animation/3-js-animation/back.view/index.html
diff --git a/5-animation/3-js-animation/back.view/style.css b/3-animation/3-js-animation/back.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/back.view/style.css
rename to 3-animation/3-js-animation/back.view/style.css
diff --git a/3-animation/3-js-animation/back@2x.png b/3-animation/3-js-animation/back@2x.png
new file mode 100644
index 00000000..794f1623
Binary files /dev/null and b/3-animation/3-js-animation/back@2x.png differ
diff --git a/3-animation/3-js-animation/bezier-linear.png b/3-animation/3-js-animation/bezier-linear.png
new file mode 100644
index 00000000..795e4cdf
Binary files /dev/null and b/3-animation/3-js-animation/bezier-linear.png differ
diff --git a/3-animation/3-js-animation/bezier-linear@2x.png b/3-animation/3-js-animation/bezier-linear@2x.png
new file mode 100644
index 00000000..95ec3cf9
Binary files /dev/null and b/3-animation/3-js-animation/bezier-linear@2x.png differ
diff --git a/3-animation/3-js-animation/bounce-easeinout.view/index.html b/3-animation/3-js-animation/bounce-easeinout.view/index.html
new file mode 100644
index 00000000..837c50db
--- /dev/null
+++ b/3-animation/3-js-animation/bounce-easeinout.view/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.cx/libs/animate.js"></script>
+</head>
+
+<body>
+
+
+  <div id="path">
+    <div id="brick"></div>
+  </div>
+
+  <script>
+    function makeEaseInOut(timing) {
+      return function(timeFraction) {
+        if (timeFraction < .5)
+          return timing(2 * timeFraction) / 2;
+        else
+          return (2 - timing(2 * (1 - timeFraction))) / 2;
+      }
+    }
+
+
+    function bounce(timeFraction) {
+      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+        if (timeFraction >= (7 - 4 * a) / 11) {
+          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+        }
+      }
+    }
+
+    let bounceEaseInOut = makeEaseInOut(bounce);
+
+    brick.onclick = function() {
+      animate({
+        duration: 3000,
+        timing: bounceEaseInOut,
+        draw: function(progress) {
+          brick.style.left = progress * 500 + 'px';
+        }
+      });
+    };
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/bounce-easeinout.view/style.css b/3-animation/3-js-animation/bounce-easeinout.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/bounce-easeinout.view/style.css
rename to 3-animation/3-js-animation/bounce-easeinout.view/style.css
diff --git a/3-animation/3-js-animation/bounce-easeout.view/index.html b/3-animation/3-js-animation/bounce-easeout.view/index.html
new file mode 100644
index 00000000..e52eae8d
--- /dev/null
+++ b/3-animation/3-js-animation/bounce-easeout.view/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.cx/libs/animate.js"></script>
+</head>
+
+<body>
+
+
+  <div id="path">
+    <div id="brick"></div>
+  </div>
+
+  <script>
+    function makeEaseOut(timing) {
+      return function(timeFraction) {
+        return 1 - timing(1 - timeFraction);
+      }
+    }
+
+    function bounce(timeFraction) {
+      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+        if (timeFraction >= (7 - 4 * a) / 11) {
+          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+        }
+      }
+    }
+
+    let bounceEaseOut = makeEaseOut(bounce);
+
+    brick.onclick = function() {
+      animate({
+        duration: 3000,
+        timing: bounceEaseOut,
+        draw: function(progress) {
+          brick.style.left = progress * 500 + 'px';
+        }
+      });
+    };
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/bounce-easeout.view/style.css b/3-animation/3-js-animation/bounce-easeout.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/bounce-easeout.view/style.css
rename to 3-animation/3-js-animation/bounce-easeout.view/style.css
diff --git a/3-animation/3-js-animation/bounce-inout.png b/3-animation/3-js-animation/bounce-inout.png
new file mode 100644
index 00000000..af1e90d7
Binary files /dev/null and b/3-animation/3-js-animation/bounce-inout.png differ
diff --git a/3-animation/3-js-animation/bounce-inout@2x.png b/3-animation/3-js-animation/bounce-inout@2x.png
new file mode 100644
index 00000000..1c558f46
Binary files /dev/null and b/3-animation/3-js-animation/bounce-inout@2x.png differ
diff --git a/3-animation/3-js-animation/bounce.view/index.html b/3-animation/3-js-animation/bounce.view/index.html
new file mode 100644
index 00000000..1be2580d
--- /dev/null
+++ b/3-animation/3-js-animation/bounce.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.cx/libs/animate.js"></script>
+</head>
+
+<body>
+
+
+  <div id="path">
+    <div id="brick"></div>
+  </div>
+
+  <script>
+    brick.onclick = function() {
+      animate({
+        duration: 3000,
+        timing: function bounce(timeFraction) {
+          for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+            if (timeFraction >= (7 - 4 * a) / 11) {
+              return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+            }
+          }
+        },
+        draw: function(progress) {
+          brick.style.left = progress * 500 + 'px';
+        }
+      });
+    };
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/bounce.view/style.css b/3-animation/3-js-animation/bounce.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/bounce.view/style.css
rename to 3-animation/3-js-animation/bounce.view/style.css
diff --git a/3-animation/3-js-animation/circ-ease.png b/3-animation/3-js-animation/circ-ease.png
new file mode 100644
index 00000000..657942f7
Binary files /dev/null and b/3-animation/3-js-animation/circ-ease.png differ
diff --git a/3-animation/3-js-animation/circ-ease@2x.png b/3-animation/3-js-animation/circ-ease@2x.png
new file mode 100644
index 00000000..9f68a73f
Binary files /dev/null and b/3-animation/3-js-animation/circ-ease@2x.png differ
diff --git a/3-animation/3-js-animation/circ.png b/3-animation/3-js-animation/circ.png
new file mode 100644
index 00000000..cdb43f79
Binary files /dev/null and b/3-animation/3-js-animation/circ.png differ
diff --git a/5-animation/3-js-animation/circ.view/index.html b/3-animation/3-js-animation/circ.view/index.html
similarity index 100%
rename from 5-animation/3-js-animation/circ.view/index.html
rename to 3-animation/3-js-animation/circ.view/index.html
diff --git a/5-animation/3-js-animation/circ.view/style.css b/3-animation/3-js-animation/circ.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/circ.view/style.css
rename to 3-animation/3-js-animation/circ.view/style.css
diff --git a/3-animation/3-js-animation/circ@2x.png b/3-animation/3-js-animation/circ@2x.png
new file mode 100644
index 00000000..7d1c7ced
Binary files /dev/null and b/3-animation/3-js-animation/circ@2x.png differ
diff --git a/3-animation/3-js-animation/elastic.png b/3-animation/3-js-animation/elastic.png
new file mode 100644
index 00000000..f18ffbdc
Binary files /dev/null and b/3-animation/3-js-animation/elastic.png differ
diff --git a/5-animation/3-js-animation/elastic.view/index.html b/3-animation/3-js-animation/elastic.view/index.html
similarity index 100%
rename from 5-animation/3-js-animation/elastic.view/index.html
rename to 3-animation/3-js-animation/elastic.view/index.html
diff --git a/5-animation/3-js-animation/elastic.view/style.css b/3-animation/3-js-animation/elastic.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/elastic.view/style.css
rename to 3-animation/3-js-animation/elastic.view/style.css
diff --git a/3-animation/3-js-animation/elastic@2x.png b/3-animation/3-js-animation/elastic@2x.png
new file mode 100644
index 00000000..2dbd6d3c
Binary files /dev/null and b/3-animation/3-js-animation/elastic@2x.png differ
diff --git a/3-animation/3-js-animation/linear.png b/3-animation/3-js-animation/linear.png
new file mode 100644
index 00000000..9d29ec1b
Binary files /dev/null and b/3-animation/3-js-animation/linear.png differ
diff --git a/3-animation/3-js-animation/linear@2x.png b/3-animation/3-js-animation/linear@2x.png
new file mode 100644
index 00000000..e10b7fef
Binary files /dev/null and b/3-animation/3-js-animation/linear@2x.png differ
diff --git a/3-animation/3-js-animation/move-raf.view/index.html b/3-animation/3-js-animation/move-raf.view/index.html
new file mode 100644
index 00000000..bf6e0f6e
--- /dev/null
+++ b/3-animation/3-js-animation/move-raf.view/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    #train {
+      position: relative;
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  <img id="train" src="https://en.js.cx/clipart/train.gif">
+
+  <script>
+    train.onclick = function() {
+      animate(function(progress) {
+        train.style.left = progress * 400 + 'px';
+      }, 2000);
+    };
+
+
+    function animate(draw, duration) {
+      let start = performance.now();
+
+      requestAnimationFrame(function animate(time) {
+        // how much time passed from the start?
+        let timePassed = time - start;
+
+        if (timePassed > duration) timePassed = duration;
+
+        // progress is from 0 to 1, the fraction of time that passed
+        let progress = duration / timePassed;
+
+        // draw the animation progress
+        draw(progress);
+
+        // if time is not up - schedule one more run
+        if (timePassed < duration) {
+          requestAnimationFrame(animate);
+        }
+
+      });
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/3-js-animation/move.view/index.html b/3-animation/3-js-animation/move.view/index.html
new file mode 100644
index 00000000..7d56536c
--- /dev/null
+++ b/3-animation/3-js-animation/move.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <style>
+    #train {
+      position: relative;
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  <img id="train" src="https://js.cx/clipart/train.gif">
+
+
+  <script>
+    train.onclick = function() {
+      let start = Date.now();
+
+      let timer = setInterval(function() {
+        let timePassed = Date.now() - start;
+
+        train.style.left = timePassed / 5 + 'px';
+
+        if (timePassed > 2000) clearInterval(timer);
+
+      }, 20);
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/3-js-animation/quad.png b/3-animation/3-js-animation/quad.png
new file mode 100644
index 00000000..670715a7
Binary files /dev/null and b/3-animation/3-js-animation/quad.png differ
diff --git a/5-animation/3-js-animation/quad.view/index.html b/3-animation/3-js-animation/quad.view/index.html
similarity index 100%
rename from 5-animation/3-js-animation/quad.view/index.html
rename to 3-animation/3-js-animation/quad.view/index.html
diff --git a/5-animation/3-js-animation/quad.view/style.css b/3-animation/3-js-animation/quad.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/quad.view/style.css
rename to 3-animation/3-js-animation/quad.view/style.css
diff --git a/3-animation/3-js-animation/quad@2x.png b/3-animation/3-js-animation/quad@2x.png
new file mode 100644
index 00000000..9a3ca207
Binary files /dev/null and b/3-animation/3-js-animation/quad@2x.png differ
diff --git a/3-animation/3-js-animation/quint.png b/3-animation/3-js-animation/quint.png
new file mode 100644
index 00000000..35c06319
Binary files /dev/null and b/3-animation/3-js-animation/quint.png differ
diff --git a/5-animation/3-js-animation/quint.view/index.html b/3-animation/3-js-animation/quint.view/index.html
similarity index 100%
rename from 5-animation/3-js-animation/quint.view/index.html
rename to 3-animation/3-js-animation/quint.view/index.html
diff --git a/5-animation/3-js-animation/quint.view/style.css b/3-animation/3-js-animation/quint.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/quint.view/style.css
rename to 3-animation/3-js-animation/quint.view/style.css
diff --git a/3-animation/3-js-animation/quint@2x.png b/3-animation/3-js-animation/quint@2x.png
new file mode 100644
index 00000000..d3477022
Binary files /dev/null and b/3-animation/3-js-animation/quint@2x.png differ
diff --git a/3-animation/3-js-animation/text.view/index.html b/3-animation/3-js-animation/text.view/index.html
new file mode 100644
index 00000000..e404fe5c
--- /dev/null
+++ b/3-animation/3-js-animation/text.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.cx/libs/animate.js"></script>
+</head>
+
+<body>
+
+
+  <textarea id="textExample" rows="5" cols="60">He took his vorpal sword in hand:
+Long time the manxome foe he sought—
+So rested he by the Tumtum tree,
+And stood awhile in thought.
+  </textarea>
+
+  <button onclick="animateText(textExample)">Run the animated typing!</button>
+
+  <script>
+    function animateText(textArea) {
+      let text = textArea.value;
+      let to = text.length,
+        from = 0;
+
+      animate({
+        duration: 5000,
+        timing: bounce,
+        draw: function(progress) {
+          let result = (to - from) * progress + from;
+          textArea.value = text.substr(0, Math.ceil(result))
+        }
+      });
+    }
+
+
+    function bounce(timeFraction) {
+      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+        if (timeFraction >= (7 - 4 * a) / 11) {
+          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+        }
+      }
+    }
+  </script>
+
+
+</body>
+
+</html>
diff --git a/5-animation/3-js-animation/text.view/style.css b/3-animation/3-js-animation/text.view/style.css
similarity index 100%
rename from 5-animation/3-js-animation/text.view/style.css
rename to 3-animation/3-js-animation/text.view/style.css
diff --git a/3-animation/3-js-animation/width.view/animate.js b/3-animation/3-js-animation/width.view/animate.js
new file mode 100644
index 00000000..2bc7ab0b
--- /dev/null
+++ b/3-animation/3-js-animation/width.view/animate.js
@@ -0,0 +1,18 @@
+function animate({duration, draw, timing}) {
+
+  let start = performance.now();
+
+  requestAnimationFrame(function animate(time) {
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) timeFraction = 1;
+
+    let progress = timing(timeFraction)
+
+    draw(progress);
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+
+  });
+}
diff --git a/3-animation/3-js-animation/width.view/index.html b/3-animation/3-js-animation/width.view/index.html
new file mode 100644
index 00000000..551ba0d2
--- /dev/null
+++ b/3-animation/3-js-animation/width.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    progress {
+      width: 5%;
+    }
+  </style>
+  <script src="animate.js"></script>
+</head>
+
+<body>
+
+
+  <progress id="elem"></progress>
+
+  <script>
+    elem.onclick = function() {
+      animate({
+        duration: 1000,
+        timing: function(timeFraction) {
+          return timeFraction;
+        },
+        draw: function(progress) {
+          elem.style.width = progress * 100 + '%';
+        }
+      });
+    };
+  </script>
+
+
+</body>
+
+</html>
diff --git a/3-animation/index.md b/3-animation/index.md
new file mode 100644
index 00000000..37bc847a
--- /dev/null
+++ b/3-animation/index.md
@@ -0,0 +1,3 @@
+# Animation
+
+CSS and JavaScript animations.
diff --git a/3-webcomponents/1-webcomponents-intro/article.md b/3-webcomponents/1-webcomponents-intro/article.md
deleted file mode 100644
index 70c8497d..00000000
--- a/3-webcomponents/1-webcomponents-intro/article.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# С высоты орбитального полёта
-
-Этот раздел посвящён набору современных браузерных стандартов, описывающих создание "веб-компонент" (web components).
-
-На текущий момент эти стандарты -- в разработке, браузеры по-разному поспевают за их развитием. Статьи можно читать в любом браузере, но для тестирования я бы рекомендовал использовать Chrome Canary, поскольку главной "движущей силой" этих стандартов являются сотрудники Google и, как правило, этот браузер реализует последний вариант спецификации.
-
-Понимание этих стандартов важно потому, что это "взгляд в будущее", в то, какой станет интернет-разработка. Сейчас уже существуют некоторые полифиллы, частично реализующие их.
-
-Идеи веб-компонент взяты не с пустого места. Они эксплуатируются в более "приземлённых", текущих подходах к разработке.
-
-## Что общего, между...
-
-Прежде, чем мы перейдём к веб-компонентам, посмотрим на одну очень классную штуку:
-
-<img style="border-radius:5px" src="satellite.jpg">
-
-Да, это Международная Космическая Станция (МКС).
-
-И вот, как она, приблизительно, устроена:
-
-<img style="border-radius:5px" src="satellite-expanded.jpg">
-
-МКС:
-<ul>
-<li>Состоит из множества компонентов.</li>
-<li>Каждый компонент -- в свою очередь состоит из множества деталей внутри.</li>
-<li>Эти компоненты очень сложны, они гораздо сложнее, чем большинство сайтов.</li>
-<li>Их разрабатывают команды из разных стран, разговаривающие на разных языках.</li>
-</ul>
-
-...И эта штука летает! 
-
-За счёт чего строятся настолько сложные вещи? 
-
-Что мы могли бы позаимствовать, чтобы наша разработка была столь же надёжной и масштабируемой? Ну, или по крайней мере, близко к этому...
-
-## Компонентная архитектура
-
-Ключевое правило при разработке сложных вещей: "Никогда не делайте сложные вещи".
-
-Если что-то становится сложным -- разбиваем это на части попроще и связываем их наиболее очевидным способом.
-
-**Хороший архитектор -- это как раз тот, кто умеет делать сложное простым.**
-
-Любой сложный интерфейс мы делим на компоненты -- сущности, для которых мы можем максимально чётко и понятно указать, что это такое и что оно умеет делать.
-
-Посмотрим на какой-нибудь более-менее сложный сайт, например на [Twitter](https://twitter.com).
-
-Он естественным образом распадается на компоненты:
-<img src="twitter-components.png">
-
-Для наглядности они обведены <span style="border: 2px dashed red">красной рамкой:</span>
-
-<ol>
-<li>"Главное Меню"</li>
-<li>"Об Авторе"</li>
-<li>"Близкие по духу"</li>
-<li>"Твиты"</li>
-</ol>
-
-Как мы решаем, что именно выделять в компонент? Это нам подсказывает опыт и здравый смысл.
-
-В случае с твиттером разбиение на компоненты особенно очевидно. Странца "сама распадается" на чётко очерченные блоки, каждый из которых выполняет свою роль.
-
-Если представить каждый компонент HTML-тегом, то страница будет выглядеть примерно так (выделены нестандартные теги):
-
-```html
-<header>
-*!*
-  <top-menu/>
-*/!*
-</header>
-<aside>
-*!*
-  <author-info/>
-  <congenial-info/>
-*/!*
-</aside>
-<main>
-*!*
-  <tweets-list/>
-*/!*
-</main>
-```
-
-До недавнего времени, чтобы так описать страницу, требовались специальные JavaScript-фреймворки. Такой фреймворк позволял описывать "свои" теги, которые, после обработки фреймворком, становились JavaScript-объектами.
-
-Веб-компоненты (Web Components) -- это не один стандарт, а целая платформа, комплекс стандартов, которые вместе добавляют в браузер технологии для удобной реализации компонент.
-
-Если глядеть "сверху", то веб-компоненты -- это возможность добавлять свои элементы в браузер, например `document.createElement("tweets-list")`, которые описываются с помощью классов JavaScript, могут иметь свои методы и свойства. 
-
-Также "под капотом" кроются расширенные возможности по инкапсуляции поддерева DOM и стилей, по генерации событий и многое другое, что мы рассмотрим далее.
-
diff --git a/3-webcomponents/1-webcomponents-intro/satellite-expanded.jpg b/3-webcomponents/1-webcomponents-intro/satellite-expanded.jpg
deleted file mode 100644
index 56c12711..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/satellite-expanded.jpg and /dev/null differ
diff --git a/3-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg b/3-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg
deleted file mode 100644
index c65b1245..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg and /dev/null differ
diff --git a/3-webcomponents/1-webcomponents-intro/satellite.jpg b/3-webcomponents/1-webcomponents-intro/satellite.jpg
deleted file mode 100644
index 9a3793f3..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/satellite.jpg and /dev/null differ
diff --git a/3-webcomponents/1-webcomponents-intro/satellite@2x.jpg b/3-webcomponents/1-webcomponents-intro/satellite@2x.jpg
deleted file mode 100644
index 9624379d..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/satellite@2x.jpg and /dev/null differ
diff --git a/3-webcomponents/1-webcomponents-intro/twitter-components.png b/3-webcomponents/1-webcomponents-intro/twitter-components.png
deleted file mode 100644
index d4311f63..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/twitter-components.png and /dev/null differ
diff --git a/3-webcomponents/1-webcomponents-intro/twitter-components@2x.png b/3-webcomponents/1-webcomponents-intro/twitter-components@2x.png
deleted file mode 100644
index 8e0f3388..00000000
Binary files a/3-webcomponents/1-webcomponents-intro/twitter-components@2x.png and /dev/null differ
diff --git a/3-webcomponents/2-webcomponent-core/article.md b/3-webcomponents/2-webcomponent-core/article.md
deleted file mode 100644
index 956aaff7..00000000
--- a/3-webcomponents/2-webcomponent-core/article.md
+++ /dev/null
@@ -1,225 +0,0 @@
-# Пользовательские элементы: Custom Elements
-
-Платформа "веб-компоненты" включает в себя несколько стандартов [Web Components](http://www.w3.org/standards/techs/components#w3c_all), которые находятся в разработке.
-
-Начнём мы со стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/), который позволяет создавать свои типы элементов.
-[cut]
-## Зачем Custom Elements?
-
-Критично настроенный читатель скажет: "Зачем ещё стандарт для своих типов элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги: `<mytag>`. Или создавать элементы из JavaScript при помощи `document.createElement('mytag')`."
-
-Однако, по умолчанию элемент с нестандартным названием (например `<mytag>`) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов.
-
-**Стандарт Custom Elements позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.**
-
-Давайте посмотрим это на примерах.
-
-[warn header="Для примеров рекомендуется Chrome"]
-Так как спецификация не окончательна, то для запуска примеров рекомендуется использовать Google Chrome, лучше -- последнюю сборку [Chrome Canary](https://www.google.ru/chrome/browser/canary.html), в которой, как правило, отражены последние изменения.
-[/warn]
-
-## Новый элемент
-
-Для описания нового элемента используется вызов `document.registerElement(имя, { prototype: прототип })`.
-
-Здесь:
-<ul>
-<li>`имя` -- имя нового тега, например `"mega-select"`. Оно обязано содержать дефис `"-"`. Спецификация требует дефис, чтобы избежать в будущем конфликтов со стандартными элементами HTML. Нельзя создать элемент `timer` или `myTimer` -- будет ошибка.</li>
-<li>`прототип` -- объект-прототип для нового элемента, он должен наследовать от `HTMLElement`, чтобы у элемента были стандартные свойства и методы.</li>
-</ul>
-
-Вот, к примеру, новый элемент `<my-timer>`:
-
-```html
-<!--+ run -->
-<script>
-*!*
-  // прототип с методами для нового элемента
-*/!*
-  var MyTimerProto = Object.create(HTMLElement.prototype);
-  MyTimerProto.tick = function() { // *!*свой метод tick*/!*
-    this.innerHTML++;
-  };
-
-*!*
-  // регистрируем новый элемент в браузере
-*/!*
-  document.registerElement("my-timer", { 
-    prototype: MyTimerProto
-  });
-</script>
-
-*!*
-<!-- теперь используем новый элемент -->
-*/!*
-<my-timer id="timer">0</my-timer>
-
-<script>
-*!*
-  // вызовем метод tick() на элементе
-*/!*
-  setInterval(function() {
-    timer.tick();
-  }, 1000);
-</script>
-```
-
-Использовать новый элемент в HTML можно и до его объявления через `registerElement`.
-
-Для этого в браузере предусмотрен специальный режим "обновления" существующих элементов.
-
-Если браузер видит элемент с неизвестным именем, в котором есть дефис `-` (такие элементы называются "unresolved"), то:
-<ul>
-<li>Он ставит такому элементу специальный CSS-псевдокласс `:unresolved`, для того, чтобы через CSS можно было показать, что он ещё "не подгрузился".</li>
-<li>При вызове `registerElement` такие элементы автоматически обновятся до нужного класса.</li>
-</ul>
-
-В примере ниже регистрация элемента происходит через 2 секунды после его появления в разметке:
-
-```html
-<!--+ run  no-beautify -->
-<style>
-*!*
-  /* стиль для :unresolved элемента (до регистрации) */
-*/!*
-  hello-world:unresolved {
-    color: white;
-  }
-  
-  hello-world {
-    transition: color 3s;
-  }
-</style>
-
-<hello-world id="hello">Hello, world!</hello-world>
-
-<script>
-*!*
-  // регистрация произойдёт через 2 сек
-*/!*
-  setTimeout(function() {
-    document.registerElement("hello-world", { 
-      prototype: {
-        __proto__: HTMLElement.prototype,
-        sayHi: function() { alert('Привет!'); }
-      }
-    });
- 
-*!*
-    // у нового типа элементов есть метод sayHi
-*/!*
-    hello.sayHi();
-  }, 2000);
-</script>
-```
-
-Можно создавать такие элементы и в JavaScript -- обычным вызовом `createElement`:
-
-```js
-var timer = document.createElement('my-timer');
-```
-
-## Расширение встроенных элементов
-
-Выше мы видели пример создания элемента на основе базового `HTMLElement`. Но можно расширить и другие, более конкретные HTML-элементы.
-
-Для расширения встроенных элементов у `registerElement` предусмотрен параметр `extends`, в котором можно задать, какой тег мы расширяем.
-
-Например, кнопку:
-
-```html
-<!--+ run -->
-<script>
-  var MyTimerProto = Object.create(*!*HTMLButtonElement.prototype*/!*);
-  MyTimerProto.tick = function() { 
-    this.innerHTML++;
-  };
-
-  document.registerElement("my-timer", { 
-    prototype: MyTimerProto,
-*!*
-    extends: 'button' 
-*/!* 
-  });
-</script>
-
-<button *!*is="my-timer"*/!* id="timer">0</button>
-
-<script>
-  setInterval(function() {
-    timer.tick();
-  }, 1000);
-
-  timer.onclick = function() {
-    alert("Текущее значение: " + this.innerHTML);
-  };
-</script>
-```
-
-Важные детали:
-<dl>
-<dt>Прототип теперь наследует не от `HTMLElement`, а от `HTMLButtonElement`</dt>
-<dd>Чтобы расширить элемент, нужно унаследовать прототип от его класса.</dd>
-<dt>В HTML указывается при помощи атрибута `is="..."`</dt>
-<dd>Это принципиальное отличие разметки от обычного объявления без `extends`. Теперь `<my-timer>` работать не будет, нужно использовать исходный тег и `is`.</dd>
-<dt>Работают методы, стили и события кнопки.</dt>
-<dd>При клике на кнопку её не отличишь от встроенной. И всё же, это новый элемент, со своими методами, в данном случае `tick`.</dd>
-</dl>
-
-При создании нового элемента в JS, если используется `extends`, необходимо указать и исходный тег в том числе:
-
-```js
-var timer = document.createElement("button", "my-timer");
-```
-
-## Жизненный цикл
-
-В прототипе своего элемента мы можем задать специальные методы, которые будут вызываться при создании, добавлении и удалении элемента из DOM:
-
-<table>
-<tr><td>`createdCallback`</td><td>Элемент создан</td></tr>
-<tr><td>`attachedCallback`</td><td>Элемент добавлен в документ</td></tr>
-<tr><td>`detachedCallback`</td><td>Элемент удалён из документа</td></tr>
-<tr><td>`attributeChangedCallback(name, prevValue, newValue)`</td><td>Атрибут добавлен, изменён или удалён</td></tr>
-</table>
-
-Как вы, наверняка, заметили, `createdCallback` является подобием конструктора. Он вызывается только при создании элемента, поэтому всю дополнительную инициализацию имеет смысл описывать в нём.
-
-Давайте используем `createdCallback`, чтобы инициализовать таймер, а `attachedCallback` -- чтобы автоматически запускать таймер при вставке в документ:
-
-```html
-<!--+ run -->
-<script>
-  var MyTimerProto = Object.create(HTMLElement.prototype);
-
-  MyTimerProto.tick = function() {
-    this.timer++;
-    this.innerHTML = this.timer;
-  };
-
-*!*
-  MyTimerProto.createdCallback = function() {
-    this.timer = 0;
-  };
-*/!*
-
-*!*
-  MyTimerProto.attachedCallback = function() {
-    setInterval(this.tick.bind(this), 1000);
-  };
-*/!*
-
-  document.registerElement("my-timer", {
-    prototype: MyTimerProto
-  });
-</script>
-
-<my-timer id="timer">0</my-timer>
-```
-
-## Итого
-
-Мы рассмотрели, как создавать свои DOM-элементы при помощи стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/).
-
-Далее мы перейдём к изучению дополнительных возможностей по работе с DOM.
-
diff --git a/3-webcomponents/3-shadow-dom/article.md b/3-webcomponents/3-shadow-dom/article.md
deleted file mode 100644
index c1951721..00000000
--- a/3-webcomponents/3-shadow-dom/article.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Shadow DOM
-
-Спецификация [Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/) является отдельным стандартом. Частично он уже используется для обычных DOM-элементов, но также применяется для создания веб-компонентов.
-
-*Shadow DOM* -- это внутренний DOM элемента, который существует отдельно от внешнего документа. В нём могут быть свои ID, свои стили и так далее. Причём снаружи его, без применения специальных техник, не видно, поэтому не возникает конфликтов.
-[cut]
-
-## Внутри браузера
-
-Концепция Shadow DOM начала применяться довольно давно внутри самих браузеров. Когда браузер показывает сложные элементы управления, наподобие слайдера `<input type="range">` или календаря `<input type="date">` -- внутри себя он конструирует их из самых обычных стилизованных `<div>`, `<span>` и так далее. 
-
-С первого взгляда они незаметны, но если в настройках Chrome Development Tools выбрать показ Shadow DOM, то их можно легко увидеть.
-
-Например, вот такое содержимое будет у `<input type="date">`:
-<img src="shadow-dom-chrome.png">
-
-То, что находится под `#shadow-root` -- это и есть Shadow DOM. 
-
-**Получить элементы из Shadow DOM можно только при помощи специальных JavaScript-вызовов или селекторов. Это не обычные дети, а намного более мощное средство отделения содержимого.**
-
-В Shadow DOM выше можно увидеть полезный атрибут `pseudo`. Он нестандартный, существует по историческим причинам. С его помощью можно стилизовать подэлементы через CSS, например, сделаем поле редактирования даты красным:
-
-```html
-<!--+ run  no-beautify -->
-<style>
-*!*
-input::-webkit-datetime-edit {
-*/!*
-  background: red;
-}
-</style>
-
-<input type="date">
-```
-
-Ещё раз заметим, что `pseudo` -- нестандартный атрибут. Если говорить хронологически, то сначала браузеры начали экспериментировать внутри себя с инкапсуляцией внутренних DOM-структур, а уже потом, через некоторое время, появился стандарт Shadow DOM, который позволяет делать то же самое разработчикам.
-
-Далее мы рассмотрим работу с Shadow DOM из JavaScript, по стандарту [Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/).
-
-## Создание Shadow DOM
-
-Shadow DOM можно создать внутри любого элемента вызовом `elem.createShadowRoot()`.
-
-Например:
-
-```html
-<!--+ run autorun="no-epub" -->
-<p id="elem">Доброе утро, страна!</p>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.innerHTML = "<p>Привет из подполья!</p>";
-</script>
-```
-
-Если вы запустите этот пример, то увидите, что изначальное содержимое элемента куда-то исчезло и показывается только "Привет из подполья!". Это потому, что у элемента есть Shadow DOM. 
-
-**С момента создания Shadow DOM обычное содержимое (дети) элемента не отображается, а показывается только Shadow DOM.**
-
-Внутрь этого Shadow DOM, при желании, можно поместить обычное содержимое. Для этого нужно указать, куда. В Shadow DOM это делается через "точку вставки" (insertion point). Она объявляется при помощи тега `<content>`, например:
-
-```html
-<!--+ run autorun="no-epub" -->
-<p id="elem">Доброе утро, страна!</p>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.innerHTML = "<h3>*!*<content></content>*/!*</h3> <p>Привет из подполья!</p>";
-</script>
-```
-
-Теперь вы увидите две строчки: "Доброе утро, страна!" в заголовке, а затем "Привет из подполья".
-
-Shadow DOM примера выше в инструментах разработки:
-
-<img src="shadow-content.png">
-
-Важные детали:
-<ul>
-<li>Тег `<content>` влияет только на отображение, он не перемещает узлы физически. Как видно из картинки выше, текстовый узел  "Доброе утро, страна!" остался внутри `p#elem`. Его можно даже получить при помощи `elem.firstElementChild`. </li>
-<li>Внутри `<content>` показывается не элемент целиком `<p id="elem">`, а его содержимое, то есть в данном случае текст "Доброе утро, страна!".</li>
-</ul>
-
-**В `<content>` атрибутом `select` можно указать конкретный селектор содержимого, которое нужно переносить. Например, `<content select="h3"></content>` перенесёт только заголовки.**
-
-Внутри Shadow DOM можно использовать `<content>` много раз с разными значениями `select`, указывая таким образом, где конкретно какие части исходного содержимого разместить. Но при этом дублирование узлов невозможно. Если узел показан в одном `<content>`, то в следующем он будет пропущен.
-
-Например, если сначала идёт `<content select="h3.title">`, а затем `<content select="h3">`, то в первом `<content>` будут показаны заголовки `<h3>` с классом `title`, а во втором -- все остальные, кроме уже показанных.</li>
-
-В примере выше тег `<content></content>` внутри пуст. Если в нём указать содержимое, то оно будет показано только в том случае, если узлов для вставки нет. Например потому что ни один узел не подпал под указанный `select`, или все они уже отображены другими, более ранними `<content>`.
-
-Например:
-
-```html
-<!--+ run autorun="no-epub"  no-beautify -->
-  
-<section id="elem">
-  <h1>Новости</h1>
-  <article>Жили-были <i>старик со старухой</i>, но недавно...</article>
-</section>
-
-<script>
-  var root = elem.createShadowRoot();
-
-  root.innerHTML = "<content select='h1'></content> \
-   <content select='.author'>Без автора.</content> \
-   <content></content>";
-  
-</script>
-
-<button onclick="alert(root.innerHTML)">root.innerHTML</button>
-```
-
-При запуске мы увидим, что:
-<ul>
-<li>Первый `<content select='h1'>` выведет заголовок.</li>
-<li>Второй `<content select=".author">` вывел бы автора, но так как такого элемента нет -- выводится содержимое самого `<content select=".author">`, то есть "Без автора".</li> 
-<li>Третий `<content>` выведет остальное содержимое исходного элемента -- уже без заголовка `<h1>`, он выведен ранее!</li>
-</ul>
-
-Ещё раз обратим внимание, что `<content>` физически не перемещает узлы по DOM. Он только показывает, где их отображать, а также, как мы увидим далее, влияет на применение стилей. 
-
-## Корень shadowRoot
-
-После создания корень внутреннего DOM-дерева доступен как `elem.shadowRoot`. 
-
-Он представляет собой специальный объект, поддерживающий основные методы CSS-запросов и подробно описанный в стандарте как [ShadowRoot](http://w3c.github.io/webcomponents/spec/shadow/#shadowroot-object).
-
-Если нужно работать с содержимым в Shadow DOM, то нужно перейти к нему через `elem.shadowRoot`. Можно и создать новое Shadow DOM-дерево из JavaScript, например:
-
-```html
-<!--+ run autorun="no-epub" -->
-<p id="elem">Доброе утро, страна!</p>
-
-<script>
-*!*
-  // создать новое дерево Shadow DOM для elem
-*/!*
-  var root = elem.createShadowRoot();
-
-  root.innerHTML = "<h3><content></content></h3> <p>Привет из подполья!</p> <hr>";
-</script>
-
-<script>
-*!*
-  // прочитать данные из Shadow DOM для elem
-*/!*
-  var root = elem.shadowRoot;
-  // Привет из подполья!
-  document.write("<p>p:" + root.querySelector('p').innerHTML);
-  // пусто, так как физически узлы - вне content 
-  document.write("<p>content:" + root.querySelector('content').innerHTML);
-</script>
-```
-
-[warn header="Внутрь встроенных элементов так \"залезть\" нельзя"]
-На момент написания статьи `shadowRoot` можно получить только для Shadow DOM, созданного описанным выше способом, но не встроенного, как в элементах типа `<input type="date">`.
-[/warn]
-
-
-## Итого
-
-Shadow DOM -- это средство для создания отдельного DOM-дерева внутри элемента, которое не видно снаружи без применения специальных методов.
-
-<ul>
-<li>Ряд браузерных элементов со сложной структурой уже имеют Shadow DOM.</li>
-<li>Можно создать Shadow DOM внутри любого элемента вызовом `elem.createShadowRoot()`. В дальнейшем его корень будет доступен как `elem.shadowRoot`. У встроенных элементов он недоступен.</li>
-<li>Как только у элемента появляется Shadow DOM, его изначальное содержимое скрывается. Теперь показывается только Shadow DOM, который может указать, какое содержимое хозяина куда вставлять, при помощи элемента `<content>`. Можно указать селектор `<content select="селектор">` и размещать разное содержимое в разных местах Shadow DOM.</li>
-<li>Элемент `<content>` перемещает содержимое исходного элемента в Shadow DOM только визуально, в структуре DOM оно остаётся на тех же местах.</li>
-</ul>
-
-Подробнее спецификация описана по адресу [](http://w3c.github.io/webcomponents/spec/shadow/).
-
-Далее мы рассмотрим работу с шаблонами, которые также являются частью платформы Web Components и не заменяют существующие шаблонные системы, но дополняют их важными встроенными в браузер возможностями.
-
diff --git a/3-webcomponents/3-shadow-dom/shadow-content.png b/3-webcomponents/3-shadow-dom/shadow-content.png
deleted file mode 100644
index 8033f2e1..00000000
Binary files a/3-webcomponents/3-shadow-dom/shadow-content.png and /dev/null differ
diff --git a/3-webcomponents/3-shadow-dom/shadow-content@2x.png b/3-webcomponents/3-shadow-dom/shadow-content@2x.png
deleted file mode 100644
index 1730adc2..00000000
Binary files a/3-webcomponents/3-shadow-dom/shadow-content@2x.png and /dev/null differ
diff --git a/3-webcomponents/3-shadow-dom/shadow-dom-chrome.png b/3-webcomponents/3-shadow-dom/shadow-dom-chrome.png
deleted file mode 100644
index c835ecbc..00000000
Binary files a/3-webcomponents/3-shadow-dom/shadow-dom-chrome.png and /dev/null differ
diff --git a/3-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png b/3-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png
deleted file mode 100644
index 5d8051f0..00000000
Binary files a/3-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png and /dev/null differ
diff --git a/3-webcomponents/4-template-tag/article.md b/3-webcomponents/4-template-tag/article.md
deleted file mode 100644
index de6ec309..00000000
--- a/3-webcomponents/4-template-tag/article.md
+++ /dev/null
@@ -1,60 +0,0 @@
-
-# Шаблоны <template>
-
-Элемент `<template>` предназначен для хранения "образца" разметки, невидимого и предназначенного для вставки куда-либо.
-
-Конечно, есть много способов записать произвольный невидимый текст в HTML. В чём же особенность `<template>`?
-
-Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще "вне документа". А при вставке автоматически "оживает", выполняются из него скрипты, начинает проигрываться видео и т.п.
-
-[cut]
-
-Содержимое тега `<template>`, в отличие, к примеру, от шаблонов или `<script type="неизвестный тип">`, обрабатывается браузером.  А значит, должно быть корректным HTML.
-
-Оно доступно как `DocumentFragment` в свойстве тега `content`. Предполагается, что мы, при необходимости, возьмём `content` и вставим, куда надо. 
-
-## Вставка шаблона 
-
-Пример вставки шаблона `tmpl` в Shadow DOM элемента `elem`:
-
-```html
-<!--+ run autorun="no-epub" -->
-<p id="elem">
-  Доброе утро, страна!</p>
-
-<template id="tmpl">
-  <h3><content></content></h3>
-  <p>Привет из подполья!</p>
-  <script>
-    document.write('...document.write:Новость!');
-  </script>
-</template>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.appendChild(tmpl.content.cloneNode(true));
-</script>
-```
-
-У нас получилось, что:
-<ol>
-<li>В элементе `#elem` содержатся данные в некоторой оговорённой разметке.</li>
-<li>Шаблон `#tmpl` указывает, как их отобразить, куда и в какие HTML-теги завернуть содержимое `#elem`.</li>
-<li>Здесь шаблон показывается в Shadow DOM тега. Технически, это не обязательно, шаблон можно использовать и без Shadow DOM, но тогда не сработает тег `<content>`.</li>
-</ol>
-
-Можно также заметить, что в скрипт из шаблона выполнился. Это важнейшее отличие вставки шаблона от вставки HTML через `innerHTML` и от обычного `DocumentFragment`.
-
-Также мы вставили не сам `tmpl.content`, а его клон. Это обычная практика, чтобы можно было использовать один шаблон много раз.
-
-## Итого
-
-Тег `<template>` не призван заменить системы шаблонизации. В нём нет хитрых операторов итерации, привязок к данным. 
-
-Его основная особенность -- это возможность вставки "живого" содержимого, вместе со скриптами. 
-
-И, конечно, мелочь, но удобно, что он не требует никаких библиотек.
-
-
-
-
diff --git a/3-webcomponents/5-css-scoping/article.md b/3-webcomponents/5-css-scoping/article.md
deleted file mode 100644
index ac9c923f..00000000
--- a/3-webcomponents/5-css-scoping/article.md
+++ /dev/null
@@ -1,304 +0,0 @@
-
-# Стили и селекторы 
-
-Стилизация Shadow DOM покрывается более общей спецификацией ["CSS Scoping"](http://drafts.csswg.org/css-scoping/). 
-
-По умолчанию стили внутри Shadow DOM относятся только к его содержимому.
-
-[cut]
-
-Например:
-
-```html
-<!--+ run autorun="no-epub" -->
-<p>Жили мы тихо-мирно, и тут...</p>
-
-<p id="elem">Доброе утро, страна!</p>
-
-<template id="tmpl">
-*!*
-  <style>
-    p {
-      color: red;
-    }
-  </style>
-*/!*
-  <h3><content></content></h3>
-  <p>Привет из подполья!</p>
-</template>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.appendChild(tmpl.content.cloneNode(true));
-</script>
-```
-
-При запуске окрашенным в красный цвет окажется только `<p>` внутри Shadow DOM. Обратим внимание, окрасился именно тот элемент, который находится непосредственно в Shadow DOM. А элементы, которые отображены в Shadow DOM при помощи `<content>`, этот стиль не получили -- у них есть свои, заданные на внешней странице.
-
-## Внешний стиль для Shadow DOM
-
-Граница между Shadow DOM и основным DOM, хоть и существует, но при помощи специальных селекторов её можно переходить.
-
-Если нужно с основной страницы стилизовать или выбрать элементы внутри Shadow DOM, то можно использовать селекторы:
-
-<ul>
-<li>**`::shadow` -- выбирает корень Shadow DOM.** 
-
-Выбранный элемент  сам по себе не создаёт CSS box, но служит отправной точкой для дальшейшей выборки уже внутри дерева Shadow DOM.
-
-Например, `#elem::shadow > div` найдёт внутри Shadow DOM `#elem` элементы `div` первого уровня.</li>
-<li>**`>>>` -- особого вида CSS-селектор для всех элементов Shadow DOM, который полностью игнорирует границы между DOM'ами, включая вложенные подэлементы, у которых тоже может быть свой Shadow DOM.**
-
-Например, `#elem >>> span` найдёт все `span` внутри Shadow DOM `#elem`, но кроме того, если в `#elem` есть подэлементы, у которых свой Shadow DOM, то оно продолжит поиск в них.
-
-Вот пример, когда внутри одного Shadow DOM есть `<input type="date">`, у которого тоже есть Shadow DOM:
-
-```html
-<!--+ run -->
-<style>
-  #elem::shadow span {
-    /* для span только внутри Shadow DOM #elem */
-    
-    border-bottom: 1px dashed blue;
-  }
-  
-  #elem >>> * {
-    /* для всех элементов внутри Shadow DOM #elem и далее внутри input[type=date] */
-    
-    color: red;
-  }
-</style>
-
-<p id="elem"></p>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
-</script>
-```
-
-</li>
-<li>Кроме того, на Shadow DOM действует обычное CSS-наследование, если свойство поддерживает его по умолчанию.
-
-В этом примере CSS-стили для `body` наследуются на внутренние элементы, включая Shadow DOM:
-
-```html
-<!--+ run autorun="no-epub" -->
-<style>
-  body {
-    color: red;
-    font-style: italic;
-  }
-</style>
-<p id="elem"></p>
-<script>
-  elem.createShadowRoot().innerHTML = "<span>Привет, мир!</span>";
-</script>
-```
-
-Внутренний элемент станет красным курсивом. 
-</li>
-</ul>
-
-[warn header="Нельзя получить содержимое встроенных элементов"]
-Описанные CSS-селекторы можно использовать не только в CSS, но и в `querySelector`. 
-
-Исключением являются встроенные элементы типа `<input type="date">`, для которых CSS-селекторы работают, но  получить их содержимое нельзя.
-
-Например:
-
-```html
-<!--+ run -->
-<p id="elem"></p>
-
-<script>
-  var root = elem.createShadowRoot();
-  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
-
-  // выберет только span из #elem
-  // вообще-то, должен выбрать span и из вложенных Shadow DOM,
-  // но для встроенных элементов - не умеет
-  alert( document.querySelectorAll('#elem::shadow span').length ); // 1
-</script>
-```
-[/warn]
-
-## Стиль в зависимости от хозяина
-
-Следующие селекторы позволяют изнутри Shadow DOM выбрать внешний элемент ("элемент-хозяин"):
-
-<ul>
-<li>`:host` выбирает элемент-хозяин, в котором, живёт Shadow DOM.
-
-Хозяин :host выбирается именно в контексте Shadow DOM.
-
-То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.
-
-После `:host` мы можем указать селекторы и стили, которые нужно применить, если хозяин удовлетворяет тому или иному условию, например:
-
-```html
-<style>
-  :host > p {
-    color: green;
-  }
-</style>
-```
-Этот селектор сработает для `<p>` первого уровня внутри Shadow DOM.
-</li>
-<li>`:host(селектор хозяина)` выбирает элемент-хозяин, если он подходит под селектор. 
-
-Этот селектор используется для темизации хозяина "изнутри", в зависимости от его классов и атрибутов. Он отлично добавляет просто `:host`, например:
-
-```css
-:host p {
-  color: green;
-}
-
-:host(.important) p {
-  color: red;
-}
-```
-
-Здесь параграфы будут иметь `color:green`, но если у хозяина класс `.important`, то `color:red`.
-</li>
-<li>`:host-context(селектор хозяина)` выбирает элемент-хозяин, если какой-либо из его родителей удовлетворяет селектору, например:
-
-```css
-:host-context(h1) p {
-  /* селектор сработает для p, если хозяин находится внутри h1 */
-}
-```
-
-Это используется для расширенной темизации, теперь уже не только в зависимости от его атрибутов, но и от того, внутри каких элементов он находится.
-</li>
-</ul>
-
-Пример использования селектора `:host()` для разной расцветки Shadow DOM-сообщения, в зависимости от того, в каком оно `<p>`:
-
-```html
-<!--+ run autorun="no-epub"  no-beautify -->
-*!*
-<p class="message info">Доброе утро, страна!</p>
-*/!*
-
-*!*
-<p class="message warning">Внимание-внимание! Говорит информбюро!</p>
-*/!*
-
-<template id="tmpl">
-  <style>
-  .content {
-    min-height: 20px;
-    padding: 19px;
-    margin-bottom: 20px;
-    background-color: #f5f5f5;
-    border: 1px solid #e3e3e3;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-  }
-
-*!*
-  :host(.info) .content {
-    color: green;
-  }
-  
-  :host(.warning) .content {
-    color: red;
-  }
-*/!*
-  
-  </style>
-  <div class="content"><content></content></div>
-</template>
-
-<script>
-var elems = document.querySelectorAll('p.message');
-
-elems[0].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
-elems[1].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
-</script>
-```
-
-## Стиль для content
-
-Тег `<content>` не меняет DOM, а указывает, что где показывать. Поэтому если элемент изначально находится в элементе-хозяине -- внешний документ сохраняет к нему доступ.
-
-К нему будут применены стили и сработают селекторы, всё как обычно.
-
-Например, здесь применится стиль для `<span>`:
-
-```html
-<!--+ run autorun="no-epub"  no-beautify -->
-<style>
-*!*
-  span { text-decoration: underline; }
-*/!*
-</style>
-    
-<p id="elem"><span>Доброе утро, страна!</span></p>
-
-<template id="tmpl">
-  <h3><content></content></h3> 
-  <p>Привет из подполья!</p>
-</template>
-
-<script>
-  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
-</script>
-```
-
-В примере выше заголовок "Доброе утро, страна!", который пришёл как `<span>` из внешнего документа, будет подчёркнут, 
-
-Итак, стили основного DOM-дерева применяются, всё в порядке.
-
-Но что, если Shadow DOM тоже "имеет виды" на `<content>` и хочет стилизовать вставленное? Это тоже возможно.
-
-**Для обращения к "содержимому" `<content>` из стилей внутри Shadow DOM используется псевдоэлемент `::content`.**
-
-Например, изнутри Shadow DOM селектор `content[select="h1"]::content span` найдёт элемент `<content select="h1">` и *в его содержимом* отыщет `<span>`. 
-
-В примере ниже селектор `::content span` стилизует все `<span>` внутри всех `<content>`:
-
-```html
-<!--+ run  no-beautify -->
-<style>
-*!*
-  span { text-decoration: underline; }
-*/!*
-</style>
-
-<p id="elem"><span>Доброе утро, страна!</span></p>
-
-<template id="tmpl">
-  <style> 
-*!*
-    ::content span { color: green; } 
-*/!*
-  </style> 
-  <h3><content></content></h3> 
-  <span>Привет из подполья!</span>
-</template>
-
-<script>
-  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
-</script>
-```
-
-Текст внутри `<h3>` -- зелёный и подчёркнутый одновременно, но стилизуется именно тот `<span>`, который показан в `<content>`, а тот, который просто в Shadow DOM -- нет.
-
-Приоритет селекторов расчитывается по [обычным правилам специфичности](http://www.w3.org/TR/css3-selectors/#specificity), если же приоритеты стилей на странице и в Shadow DOM и на странице равны, то, как описано в секции [Cascading](http://dev.w3.org/csswg/css-scoping/#cascading), побеждает страница, а для `!important`-стиля побеждает Shadow DOM.
-
-## Итого
-
-По умолчанию стили и селекторы из DOM-дерева действуют только на те элементы, в которых сами находятся. 
-
-Границу можно преодолевать, причём проще, естественно, от родителя к Shadow DOM, чем наоборот:
-
-<ul>
-<li>Снаружи можно выбирать и стилизовать элементы внутри Shadow DOM -- при помощи селекторов `::shadow` и `>>>`.</li>
-<li>Изнутри Shadow DOM можно стилизовать не только то, что изначально в Shadow DOM, но и узлы, показываемые в `<content>`.</li>
-<li>Также можно ставить стиль в зависимость от хозяиня при помощи селекторов `::host`, `::host-context`, но выбирать и стилизовать произвольные теги внутри хозяина нельзя.</li>
-</ul>
-
-
-
diff --git a/3-webcomponents/6-link-import/article.md b/3-webcomponents/6-link-import/article.md
deleted file mode 100644
index 11c16c1a..00000000
--- a/3-webcomponents/6-link-import/article.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# Импорты
-
-Новая спецификация ["HTML Imports"](http://w3c.github.io/webcomponents/spec/imports/index.html) описывает, как вставить один документ в другой при помощи HTML-тега `<link rel="import">`.
-
-[cut]
-
-## Зачем?
-
-Мы ведь и так можем вставлять документ в документ, при помощи `<iframe>`, зачем нужен ещё какой-то импорт? Что не так с `iframe`?
-
-...С `iframe` всё так. Однако, по своему смыслу `iframe` -- это отдельный документ.
-<ul>
-<li>Для `iframe` создаётся полностью своё окружение, у него свой объект `window` и свои переменные.</li>
-<li>Если `iframe` загружен с другого домена, то взаимодействие с ним возможно только через `postMessage`.</li>
-</ul>
-
-Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.
-
-А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом -- другой документ. 
-
-Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в  страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном".
-
-Иначе говоря, `<link rel="import">` -- это аналог `<script>`, но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
-
-## Пример вставки
-
-Синтаксис:
-
-```html
-<link rel="import" href="http://site.com/document.html">
-```
-
-<ul>
-<li>В отличие от `<iframe>` тег `<link rel="import">` может быть в любом месте документа, даже в `<head>`.</li>
-<li>При вставке через `<iframe>` документ показывается внутри фрейма. В случае с `<link rel="import">` это не так, по умолчанию документ вообще не показывается.</li>
-</ul>
-
-**HTML, загруженный через `<link rel="import">` имеет отдельный DOM документа, но скрипты в нём выполняются в общем контексте страницы.**
-
-Файл, загруженный через `<link rel="import">`, обрабатывается, выполняются скрипты, строится DOM документа, но не показывается, а записывается в свойство `link.import`. 
-
-Мы сами решаем, где и когда его вставить.
-
-
-В примере ниже `<link rel="import" href="timer.html">` подключает документ `timer.html` и, после его загрузки, вызывает функцию `show`. Эта функция через `link.import.querySelector('time')` выбирает интересующую часть подгруженного документа и вставляет её в текущий:
-
-```html
-<!--+ src="import-show/index.html" -->
-```
-
-В файле `timer.html` находится элемент и скрипт, который его "оживляет":
-
-```html
-<!--+ src="import-show/timer.html" -->
-```
-
-[codetabs src="import-show" height=350]
-
-Важные детали:
-<ul>
-<li>После загрузки все скрипты в подключённом `timer.html` выполняются в контексте основной страницы, так что `timer` и другие переменные станут глобальными переменными страницы.</li>
-<li>Переменная `document` -- это документ основной страницы. Для доступа к импортированному, то есть текущему документу изнутри `timer.html` его можно получить как `document.currentScript.ownerDocument`.</li>
-<li>Таймер в загруженном документе начинает работать сразу, новый документ оживает сразу после загрузки, хотя до переноса узлов в основной документ этого может быть и не видно.</li>
-</ul>
-
-В примере выше содержимым импорта управлял основной документ, но `timer.html` мог бы и показать сам себя вызовом `document.body.appendChild(timer)` или вызвать функцию с внешнего документа, так как у них единая область видимости. Тогда не понадобился бы никакой `onload`.
-
-Ещё пример вставки, на этот раз документ только подключает `<link>`, а таймер вставляет себя сам:
-
-[codetabs src="import-style" height="200"]
-
-Обратим внимание -- стили импорта попадают в контекст страницы. В примере выше импорт добавил и стиль для `#timer` и сам элемент.
-
-## Веб-компоненты
-
-Импорт задуман как часть платформы Web Components.
-
-Предполагается, что главный документ может импортировать файлы-определения, в которых будут все необходимые HTML, JS и CSS для элементов, а затем использовать их.
-
-Пример:
-
-```html
-<link rel="import" href="ui-tabs.html">
-<link rel="import" href="ui-dialog.html">
-
-<ui-tabs>...</ui-tabs>
-<ui-dialog>...</ui-dialog>
-```
-
-В следующей главе мы разберём расширенный пример на эту тему.
-
-## Повторное использование
-
-Повторный импорт с тем же URL использует уже существующий документ.
- 
-Если файл `libs.html` импортирован два раза, то CSS и скрипты из него подключатся и выполнятся ровно один раз.
-
-Это можно использовать, чтобы не подгружать одинаковые зависимости много раз. И сама страница и её импорты, и их подимпорты, и так далее, могут подключать `libs.html` без опасения лишний раз перезагрузить и выполнить скрипты.
-
-Например:
-<ul>
-<li>Главный файл `index.html` подключает документы:
-
-```html
-<!--+ no-beautify -->
-<link rel="import" href="ui-tabs.html">
-<link rel="import" href="ui-dialog.html">
-...
-```
-
-</li>
-<li>`ui-tabs.html` подключает `libs.html`:
-
-```html
-<!--+ no-beautify -->
-<link rel="import" href="libs.html">
-...template и код для табов...
-```
-
-</li>
-
-<li>`ui-dialog.html` также использует `libs.html`:
-
-```html
-<!--+ no-beautify -->
-<link rel="import" href="libs.html">
-...template и код для диалогов...
-```
-
-</li>
-</ul>
-
-
-Файл `libs.html` при этом будет подключен только один раз. Это позволяет не бояться лишнего дублирования библиотек, используемых при описании множества компонент.
-
-## Итого
-
-Тег `<link rel="import">` позволяет подключить любой документ к странице, причём:
-
-<ul>
-<li>Скриптовое пространство и стили со страницей будут общие.</li>
-<li>Документ DOM -- отдельный, он доступен как `link.import` снаружи, а из внутреннего скрипта -- через `document.currentScript.ownerDocument`. Можно без проблем переносить элементы из главного документа в импорт и наоборот.</li>
-<li>Импорты могут содержать другие импорты.</li>
-<li>Если какой-то URL импортируется повторно -- подключается уже готовый документ, без повторного выполнения скриптов в нём. Это позволяет избежать дублирования при использовании одной библиотеки во множестве мест.</li>
-</ul>
- 
diff --git a/3-webcomponents/6-link-import/import-show.view/index.html b/3-webcomponents/6-link-import/import-show.view/index.html
deleted file mode 100644
index 0dc9468d..00000000
--- a/3-webcomponents/6-link-import/import-show.view/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <script>
-    function show() {
-      var time = link.import.querySelector('time')
-      document.body.appendChild(time);
-    };
-  </script>
-
-  <link rel="import" id="link" onload="show()" href="timer.html">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/6-link-import/import-show.view/timer.html b/3-webcomponents/6-link-import/import-show.view/timer.html
deleted file mode 100644
index 39df6eec..00000000
--- a/3-webcomponents/6-link-import/import-show.view/timer.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <time id="timer">0</time>
-
-  <script>
-    var localDocument = document.currentScript.ownerDocument;
-    var timer = localDocument.getElementById('timer');
-
-    var timerId = setInterval(function() {
-      timer.innerHTML++;
-    }, 1000);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/6-link-import/import-style.view/index.html b/3-webcomponents/6-link-import/import-style.view/index.html
deleted file mode 100644
index 2684a1c3..00000000
--- a/3-webcomponents/6-link-import/import-style.view/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="import" id="link" href="timer.html">
-</head>
-
-<body></body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/6-link-import/import-style.view/timer.html b/3-webcomponents/6-link-import/import-style.view/timer.html
deleted file mode 100644
index bcad12f4..00000000
--- a/3-webcomponents/6-link-import/import-style.view/timer.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #timer {
-      color: red;
-    }
-  </style>
-</head>
-
-<body>
-
-  <p id="timer">0</p>
-
-  <script>
-    var localDocument = document.currentScript.ownerDocument;
-    var timer = localDocument.getElementById('timer');
-
-    var timerId = setInterval(function() {
-      timer.innerHTML++;
-    }, 1000);
-
-    document.body.appendChild(timer);
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/7-webcomponent-build/article.md b/3-webcomponents/7-webcomponent-build/article.md
deleted file mode 100644
index 66f3bfd9..00000000
--- a/3-webcomponents/7-webcomponent-build/article.md
+++ /dev/null
@@ -1,306 +0,0 @@
-# Веб-компонент в сборе
-
-В этой главе мы посмотрим на итоговый пример веб-компонента, включающий в себя описанные ранее технологии: Custom Elements, Shadow DOM, CSS Scoping и, конечно же, Imports.
-
-[cut]
-
-## Компонент ui-message
-
-Компонент `ui-message` будет описан в отдельном файле `ui-message.html`.
-
-Его использование будет выглядеть следующим образом:
-
-```html
-<link rel="import" id="link" href="ui-message.html">
-
-<style>
-  ui-message {
-    width: 80%;
-    margin: auto;
-  }
-</style>
-
-*!*
-<ui-message class="info">Доброе утро, страна!</ui-message>
-*/!*
-
-*!*
-<ui-message class="warning">Внимание-внимание! Говорит информбюро!</ui-message>
-*/!*
-```
-
-Этот код ничем не отличается от использования обычного элемента, поэтому перейдём дальше, к содержимому `ui-message.html`
-
-## Шаблон для ui-message
-
-Файл `ui-message.html` можно начать с шаблона:
-
-```html
-<template id="tmpl">
-  <style>
-    .content {
-      min-height: 20px;
-      padding: 19px;
-      margin-bottom: 20px;
-      background-color: #f5f5f5;
-      border: 1px solid #e3e3e3;
-      border-radius: 4px;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-    }
-    
-    :host {
-      display: block;
-    }
-    
-    :host(.info) .content {
-      color: green;
-    }
-    
-    :host(.warning) .content {
-      color: red;
-    }
-  </style>
-  <div class="content">
-    <content></content>
-  </div>
-</template>
-```
-
-Этот шаблон рисует `<div class="content">` и заполняет его содержимым элемента-хозяина.
-
-Важные детали:
-<ul>
-<li>Самое важное правило здесь `:host { display:block }`.
-
-Оно обязательно! . Это правило задаёт, что корень DOM-дерева будет иметь `display:block`. По умолчанию `:host` не создаёт CSS-блок, а это значит, что ни ширину ни отступы указать не получится.</li>
-<li>Последующие правила `:host(.info) .content` и `:host(.warning) .content` стилизуют содержимое в зависимости от того, какой на хозяине класс.</li>
-</ul>
-
-## Скрипт для ui-message
-
-В файле `ui-message.html` мы создадим новый элемент `<ui-message>`:
-
-```js
-// (1) получить шаблон
-var localDocument = document.currentScript.ownerDocument;
-var tmpl = localDocument.getElementById('tmpl');
-
-// (2) создать элемент
-var MessageProto = Object.create(HTMLElement.prototype);
-
-MessageProto.createdCallback = function() {
-  var root = this.createShadowRoot();
-  root.appendChild(tmpl.content.cloneNode(true));
-};
-
-// (3) зарегистрировать в DOM
-document.registerElement('ui-message', {
-  prototype: MessageProto
-});
-```
-
-Все компоненты этого кода мы подробно разбирали ранее:
-
-<ol>
-<li>Получаем шаблон из текущего документа, то есть из самого импорта.</li>
-<li>Описываем элемент. Он довольно прост -- при создании записывает в свой `Shadow DOM` шаблон. При этом содержимое исходного элемента будет показано в `<content>`, но делать правила на сам `content` бессмысленно -- они не сработают. Нужно либо перейти внутрь `<content>` при помощи `::content`-селектора, либо указать для внешнего элемента `.content`, что в данном случае и сделано.</li>
-<li>С момента регистрации все уже существующие элементы `<ui-message>` будут превращены в описанные здесь. И будущие, конечно, тоже.</li>
-</ol>
-
-Компонент в действии:
-
-[codetabs src="message" height=200]
-
-## Компонент ui-slider с jQuery
-
-Компонент может использовать и внешние библиотеки.
-
-Для примера создадим слайдер с использованием библиотеки [jQuery UI](http://jqueryui.com).
-
-Компонент `ui-slider` будет показывать слайдер с минимальным и максимальным значением из атрибутов `min/max` и генерировать событие `slide` при его перемещении.
-
-Использование:
-
-```html
-<link rel="import" id="link" href="ui-slider.html">
-
-<ui-slider min="0" max="1000" id="elem"></ui-slider>
-
-<script>
-  elem.addEventListener("slide", function(e) {
-    value.innerHTML = e.detail.value;
-  });
-</script>
-
-<div id="value">0</div>
-```
-
-## Файл компонента ui-slider
-
-Файл `ui-slider.html`, задающий компонент, мы разберём по частям.
-
-### Заголовок
-
-В начале подключим jQuery и jQuery UI.
-
-Мы импортируем в слайдер `jquery.html`, который содержит теги `<script>` вместо того, чтобы явным образом прописывать загрузку скриптов:
-
-```html
-<head>
-  <link rel="import" href="jquery.html">
-</head>
-```
-
-Это сделано для того, чтобы другие компоненты, которым тоже могут понадобится эти библиотеки, также могли импортировать `jquery.html`. При повторном импорте ничего не произойдёт, скрипты не будут подгружены и исполнены два раза.
-
-То есть, это средство оптимизации.
-
-Содержимое `jquery.html`:
-
-```html
-<!--+ src="ui-slider/jquery.html" -->
-```
-
-### Шаблон
-
-Шаблон будет помещён в Shadow DOM. В нём должны быть стили и элементы, необходимые слайдеру.
-
-Конкретно для слайдера из разметки достаточно одного элемента `<div id="slider"></div>`, который затем будет обработан jQuery UI.
-
-Кроме того, в шаблоне должны быть стили:
-
-```html
-<template id="tmpl">
-  <style>
-    @import url(https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css);
-    :host {
-      display: block;
-    }
-  </style>
-  <div id="slider"></div>
-</template>
-```
-
-### Скрипт
-
-Скрипт для нового элемента похож на тот, что делали раньше, но теперь он использует jQuery UI для создания слайдера внутри своего Shadow DOM.
-
-Для его понимания желательно знать jQuery, хотя в коде ниже я намеренно свёл использование этой библиотеки к минимуму.
-
-```js
-var localDocument = document.currentScript.ownerDocument;
-var tmpl = localDocument.getElementById('tmpl');
-
-var SliderProto = Object.create(HTMLElement.prototype);
-
-SliderProto.createdCallback = function() {
-  // (1) инициализовать Shadow DOM, получить из него #slider 
-  var root = this.createShadowRoot();
-  root.appendChild(tmpl.content.cloneNode(true));
-
-  this.$slider = $(root.getElementById('slider'));
-
-  var self = this;
-
-  // (2) инициализовать слайдер, пробросить параметры
-  this.$slider.slider({
-    min: this.getAttribute('min') || 0,
-    max: this.getAttribute('max') || 100,
-    value: this.getAttribute('value') || 0,
-    slide: function() {
-      // (3) пробросить событие
-      var event = new CustomEvent("slide", {
-        detail: {
-          value: self.$slider.slider("option", "value")
-        },
-        bubbles: true
-      });
-      self.dispatchEvent(event);
-    }
-  });
-};
-
-document.registerElement('ui-slider', {
-  prototype: SliderProto
-});
-```
-
-Функция `createdCallback` по шагам:
-
-<ol>
-<li>Создаём Shadow DOM, элемент `#slider` получаем из него, он не в основном документе.</li>
-<li>Используя jQuery UI, слайдер создаётся вызовом [jQuery UI методом slider](http://jqueryui.com/slider/), который имеет вид `$elem.slider({...параметры...});`. Параметры получаем из атрибутов `<ui-slider>` (он же `this`) и отдаём библиотеке. Она делает всю работу.</li>
-<li>Параметр `slide` задаёт функцию-коллбэк, которая вызывается при передвижении слайдера и будет генерировать DOM-событие на элементе, на которое можно будет поставить обработчик при помощи `addEventListener`. В его деталях мы указываем новое значение слайдера.</li>
-</ol>
-
-Полный код с примером:
-
-[codetabs src="ui-slider" height=300]
- 
-Его можно далее улучшать, например добавить геттер и сеттер для значения `value`:
-
-```js
-Object.defineProperty(SliderProto, 'value', {
-  get: function() {
-    return this.$slider.slider("option", "value");
-  },
-  set: function(value) {
-    this.$slider.slider('option', 'value', value);
-  }
-});
-```
-
-Если добавить этот код, то к значению `<ui-slider>` можно будет обращаться как `elem.value`, аналогично всяким встроенным `<input>`.
-
-## Проблема с jQuery
-
-Попробуйте пример выше. Он не совсем работает. Слайдер прокручивается первый раз, но второй раз он как-то странно "прыгает".
-
-Чтобы понять, почему это происходит, я заглянул в исходники jQuery UI и, после отладки происходящего, натолкнулся на проблемный код. 
-
-Он был в методе [offset](http://api.jquery.com/offset/), который предназначен для того, чтобы определять координаты элемента. Этот метод не срабатывал, поскольку в нём есть проверка, которая выглядит примерно так:
-
-```js
-var box = {
-  top: 0,
-  left: 0
-};
-...
-// Make sure it's not a disconnected DOM node
-if(!jQuery.contains(elem.ownerDocument, elem)) {
-  return box;
-}
-```
-
-То есть, jQuery проверяет, находится ли элемент `elem` внутри своего документа `elem.ownerDocument`. Если нет -- то считается, что элемент вне DOM, и его размеры равны нулю. 
-
-Если копнуть чуть глубже, то `jQuery.contains` в современных браузерах сводится к обычному вызову [contains](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains).
-
-Парадокс с Shadow DOM заключается в том, что вызов `elem.ownerDocument.contains(elem)` вернёт `false`!
-
-Получилось, что элемент не в документе и одновременно он имеет размеры. Такого разработчики jQuery не предусмотрели.
-
-Можно, конечно, побежать исправлять jQuery, но давайте подумаем, может быть так оно и должно быть?
-
-С точки зрения здравого смысла, Shadow DOM является частью текущего документа. Это соответствует и духу [текущей спецификации](http://w3c.github.io/webcomponents/spec/shadow/), где shadow tree рассматривается в контексте document tree.
-
-Поэтому на самом деле `document.contains(elem)` следовало бы возвращать `true`.
-
-Почему же `false`? Причина проста -- описанный в [другом стандарте](http://www.w3.org/TR/dom/#dom-node-contains) механизм работы `contains` по сути состоит в проходе вверх от `elem` по цепочке `parentNode`, пока либо встретим искомый элемент, тогда ответ `true`, а иначе `false`. В случае с Shadow DOM этот путь закончится на корне Shadow DOM-дерева, оно ведь не является потомком хозяина. 
-
-**Метод `contains` описан стандартом без учёта Shadow DOM, поэтому возвратил неверный результат `false`.**
-
-Это один из тех небольших, но важных нюансов, которые показывают, что стандарты всё ещё в разработке.
-
-## Итого
-
-<ul>
-<li>С использованием современных технологий можно делать компоненты. Но это, всё же, дело будущего. Все стандарты находятся в процессе доработки, готовятся новые.</li>
-<li>Можно использовать произвольную библиотеку, такую как jQuery, и работать с Shadow DOM с её использованием. Но возможны проблемки. Выше была продемонстрирована одна из них, могут быть и другие.</li>
-</ul>
-
-Пока веб-компоненты ещё не являются законченными стандартами, можно попробовать [Polymer](http://www.polymer-project.org) -- это самый известный из полифиллов на тему веб-компонент. 
-
-Он старается их эмулировать по возможности кросс-браузерно, но пока что это довольно-таки сложно, в частности, необходима дополнительная разметка.
-
-
diff --git a/3-webcomponents/7-webcomponent-build/message.view/index.html b/3-webcomponents/7-webcomponent-build/message.view/index.html
deleted file mode 100644
index c50f60bf..00000000
--- a/3-webcomponents/7-webcomponent-build/message.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="import" id="link" href="ui-message.html">
-  <style>
-    ui-message {
-      width: 80%;
-      margin: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ui-message class="info">Доброе утро, страна!</ui-message>
-
-  <ui-message class="warning">Внимание-внимание! Говорит информбюро!</ui-message>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/7-webcomponent-build/message.view/ui-message.html b/3-webcomponents/7-webcomponent-build/message.view/ui-message.html
deleted file mode 100644
index ddd61bdd..00000000
--- a/3-webcomponents/7-webcomponent-build/message.view/ui-message.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <template id="tmpl">
-    <style>
-      .content {
-        min-height: 20px;
-        padding: 19px;
-        margin-bottom: 20px;
-        background-color: #f5f5f5;
-        border: 1px solid #e3e3e3;
-        border-radius: 4px;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-      }
-      
-      :host {
-        display: block;
-      }
-      
-      :host(.info) .content {
-        color: green;
-      }
-      
-      :host(.warning) .content {
-        color: red;
-      }
-    </style>
-    <div class="content">
-      <content></content>
-    </div>
-  </template>
-
-  <script>
-    ! function() {
-      var localDocument = document.currentScript.ownerDocument;
-      var tmpl = localDocument.getElementById('tmpl');
-
-      var MessageProto = Object.create(HTMLElement.prototype);
-
-      MessageProto.createdCallback = function() {
-        var root = this.createShadowRoot();
-        root.appendChild(tmpl.content.cloneNode(true));
-      };
-
-      document.registerElement('ui-message', {
-        prototype: MessageProto
-      });
-    }();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/7-webcomponent-build/ui-slider.view/index.html b/3-webcomponents/7-webcomponent-build/ui-slider.view/index.html
deleted file mode 100644
index 4cb7a52e..00000000
--- a/3-webcomponents/7-webcomponent-build/ui-slider.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="import" id="link" href="ui-slider.html">
-  <style>
-    ui-slider {
-      width: 300px;
-      margin: 10px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ui-slider min="0" max="1000" id="elem"></ui-slider>
-
-  <script>
-    elem.addEventListener("slide", function(e) {
-      value.innerHTML = e.detail.value; // = this.value
-    });
-  </script>
-
-  <div id="value">0</div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/7-webcomponent-build/ui-slider.view/jquery.html b/3-webcomponents/7-webcomponent-build/ui-slider.view/jquery.html
deleted file mode 100644
index 7c1465af..00000000
--- a/3-webcomponents/7-webcomponent-build/ui-slider.view/jquery.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
\ No newline at end of file
diff --git a/3-webcomponents/7-webcomponent-build/ui-slider.view/ui-slider.html b/3-webcomponents/7-webcomponent-build/ui-slider.view/ui-slider.html
deleted file mode 100644
index 74949243..00000000
--- a/3-webcomponents/7-webcomponent-build/ui-slider.view/ui-slider.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link rel="import" href="jquery.html">
-</head>
-
-<body>
-
-  <template id="tmpl">
-    <style>
-      @import url(https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css);
-      :host {
-        display: block;
-      }
-    </style>
-    <div id="slider"></div>
-  </template>
-
-  <script>
-    ! function() {
-      var localDocument = document.currentScript.ownerDocument;
-      var tmpl = localDocument.getElementById('tmpl');
-
-      var SliderProto = Object.create(HTMLElement.prototype);
-
-      SliderProto.createdCallback = function() {
-        var root = this.createShadowRoot();
-        root.appendChild(tmpl.content.cloneNode(true));
-
-        this.$slider = $(root.getElementById('slider'));
-
-        var self = this;
-
-        this.$slider.slider({
-          min: +this.getAttribute('min') || 0,
-          max: +this.getAttribute('max') || 100,
-          value: this.getAttribute('value') || 0,
-          slide: function() {
-            var event = new CustomEvent("slide", {
-              detail: {
-                value: self.$slider.slider("option", "value")
-              },
-              bubbles: true
-            });
-            self.dispatchEvent(event);
-          }
-        });
-      };
-
-
-      document.registerElement('ui-slider', {
-        prototype: SliderProto
-      });
-    }();
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/3-webcomponents/index.md b/3-webcomponents/index.md
deleted file mode 100644
index 15233485..00000000
--- a/3-webcomponents/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Веб-компоненты: взгляд в будущее
-
-Веб-компоненты -- "платформа будущего": совокупность стандартов, которые позволяют описывать новые типы DOM-элементов, со своими свойствами и методами, инкапсулировать их DOM и стили.
\ No newline at end of file
diff --git a/4-ajax/1-ajax-intro/article.md b/4-ajax/1-ajax-intro/article.md
deleted file mode 100644
index 4b933dee..00000000
--- a/4-ajax/1-ajax-intro/article.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Введение в AJAX и COMET
-
-В этой главе мы "обзорно", на уровне возможностей и примеров рассмотрим технологию AJAX. Пока что с минимумом технических деталей.
-
-Она будет полезна для понимания, что такое AJAX и с чем его едят.
-[cut]
-
-
-## Что такое AJAX? 
-
-AJAX (аббревиатура от "<strong>A</strong>synchronous <strong>J</strong>avascript <strong>A</strong>nd <strong>X</strong>ml") -- технология обращения к серверу без перезагрузки страницы.
-
-За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
-
-Несмотря на то, что в названии технологии присутствует буква `X` (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
-
-## Что я могу сделать с помощью AJAX?
-
-<dl>
-<dt>Элементы интерфейса</dt>
-<dd>В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
-
-Сейчас -- в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.
-</dd>
-<dt>Динамическая подгрузка данных</dt>
-<dd>Например, дерево, которое при раскрытии узла запрашивает данные у сервера.</dd>
-<dt>Живой поиск</dt>
-<dd>*Живой поиск* -- классический пример использования AJAX, взятый на вооружение современными поисковыми системами.
-
-Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.
-
-<img src="suggest.png" onclick="alert('этот пример - картинка, см. http://google.com');">
-
-Код, который это обеспечивает, работает следующим образом.
-<ol>
-	<li>Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100мс (примерно).</li>
-</ul>
-</li>
-	<li>Создается скрытый DIV и заполняется ответом сервера:
-<ul>
-	<li>Текущий результат подсвечен, можно перемещаться и выбирать</li>
-	<li>При нажатии правой стрелки или при клике -- поиск в подрезультатах</li>
-</ul>
-</li>
-	<li>Результаты запросов кешируются, повторных обращений к серверу не происходит.</li>
-</ul>
-</li>
-<li>В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать [key Enter].</li>
-</ol>
-</dd>
-</dl>
-
-**Технически, с помощью AJAX можно обмениваться любыми данными с сервером.**
-
-Обычно используются форматы:
-<ul>
-<li>JSON -- для отправки и получения структурированных данных, объектов.</li>
-<li>XML -- если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.</li>
-<li>HTML/текст -- можно и просто загрузить с сервера код HTML или текст для показа на странице.</li>
-<li>Бинарные данные, файлы -- гораздо реже, в современных браузерах есть удобные средства для них.</li>
-</ul>
-
-## Что такое COMET?
-
-[COMET](http://ru.wikipedia.org/wiki/Comet_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)) -- общий термин, описывающий различные техники получения данных по инициативе сервера.
-
-Можно сказать, что AJAX -- это "отправил запрос -- получил результат", а COMET -- это "непрерывный канал, по которому приходят данные".
-
-Примеры COMET-приложений:
-
-<ul>
-<li>Чат -- человек сидит и смотрит, что пишут другие. При этом новые сообщения приходят "сами по себе", он не должен нажимать на кнопку для обновления окна чата.</li>
-<li>Аукцион -- человек смотрит на экран и видит, как обновляется текущая ставка за товар.</li>
-<li>Интерфейс редактирования -- когда один редактор начинает изменять документ, другие видят информацию об этом. Возможно и совместное редактирование, когда редакторы видят изменения друг друга.</li>
-</ul>
-
-На текущий момент технология COMET удобно реализуется во всех браузерах.
-
-## Об этом разделе
-
-Здесь мы будем говорить об AJAX и COMET на низком уровне, на уровне веб-стандартов и их использования.
-
-Существуют библиотеки и фреймворки, добавляющие удобства, например [Socket.io](http://socket.io), [CometD](http://cometd.org/) и другие.
-
-В принципе, можно начать их использовать и не зная, что внутри. Но, скорее всего, вам всё равно понадобится отлаживать ошибки, смотреть детали коммуникации, выбирать наилучшее решение для конкретной задачи, и здесь обязательно разбираться, как это всё работает.
-
diff --git a/4-ajax/1-ajax-intro/suggest.png b/4-ajax/1-ajax-intro/suggest.png
deleted file mode 100644
index dc8f537c..00000000
Binary files a/4-ajax/1-ajax-intro/suggest.png and /dev/null differ
diff --git a/4-ajax/1-ajax-intro/tree.html b/4-ajax/1-ajax-intro/tree.html
deleted file mode 100644
index 692d2277..00000000
--- a/4-ajax/1-ajax-intro/tree.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" type="text/css" href="tree.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="tree.js"></script>
-</head>
-
-<body>
-
-  Дерево с подгрузкой узлов (рабочее):
-  <ul class="Container" id="tree">
-    <li class="Node IsRoot IsLast ExpandClosed">
-      <div class="Expand"></div>
-      <div class="Content">Каталог</div>
-      <ul class="Container">
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    tree("tree", "data.php");
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/10-ajax-jsonp/article.md b/4-ajax/10-ajax-jsonp/article.md
deleted file mode 100644
index 48dd2b9a..00000000
--- a/4-ajax/10-ajax-jsonp/article.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# Протокол JSONP
-
-Если создать тег `<script src>`, то при добавлении в документ запустится процесс загрузки `src`. В ответ сервер может прислать скрипт, содержащий нужные данные.
-
-Таким образом можно запрашивать данные с любого сервера, в любом браузере, без каких-либо разрешений и дополнительных проверок.
-
-Протокол JSONP -- это "надстройка" над таким способом коммуникации. Здесь мы рассмотрим его использование в деталях.
-
-[cut]
-
-## Запрос 
-
-Простейший пример запроса:
-
-```js
-function addScript(src) {
-  var elem = document.createElement("script");
-  elem.src = src;
-  document.head.appendChild(elem);
-}
-
-addScript('user?id=123');
-```
-
-Такой вызов добавит в `HEAD` документа тег:
-
-```html
-<script src="/user?id=123"></script>
-```
-
-Браузер тут же обработает его: запросит `/user?id=123` с заданного URL и выполнит. 
-
-## Обработка ответа, JSONP
-
-В примере выше рассмотрено создание запроса, но как получить ответ? Допустим, сервер хочет прислать объект с данными. 
-
-Конечно, он может присвоить её в переменную, например так:
-
-
-```js
-//+ no-beautify
-// ответ сервера
-var user = {name: "Вася", age: 25 };
-```
-
-...А браузер по `script.onload` отловит окончание загрузки и прочитает значение `user`.
-
-Но что, если одновременно делается несколько запросов? Получается, нужно присваивать в разные переменные. 
-
-Протокол JSONP как раз и призван облегчить эту задачу.
-
-Он очень простой: 
-
-<ol>
-<li>Вместе с запросом клиент в специальном, заранее оговорённом, параметре передаёт название функции.
-
-Обычно такой параметр называется `callback`. Например :
-
-```js
-addScript('user?id=123&*!*callback=onUserData*/!*');
-```
-</li>
-<li>Cервер кодирует данные в JSON и оборачивает их в вызов функции, название которой получает из параметра `callback`:
-
-```js
-// ответ сервера
-onUserData({
-  name: "Вася",
-  age: 25
-});
-```
-</li>
-</ol>
-
-Это и называется JSONP ("JSON with Padding").
-
-
-[warn header="Аспект безопасности"]
-Клиентский код должен доверять серверу при таком запросе. Ведь серверу ничего не стоит добавить в скрипт любые команды.
-[/warn]
-
-## Реестр CallbackRegistry
-
-В примере выше функция `onUserData` должна быть глобальной, ведь `<script src>` выполняется в глобальной области видимости.
-
-Хотелось бы не загрязнять глобальное пространство имён, или по крайней мере свести загрязнение к минимуму.
-
-Как правило, для этого создают один глобальный объект "реестр", который мы назовём `CallbackRegistry`. Далее для каждого запроса в нём генерируется временная функция.
-
-Тег будет выглядеть так:
-
-```html
-<script src="user?id=123&callback=*!*CallbackRegistry.func12345*/!*"></script>
-```
-
-Сервер обернёт ответ в функцию `CallbackRegistry.func12345`, она вызывает нужный обработчик и очищает память, удаляя себя.
-
-Далее мы посмотрим более полный код всего этого, но перед этим -- важный момент! Нужно предусмотреть обработку ошибок.
-
-## Обнаружение ошибок 
-
-При запросе данных при помощи `SCRIPT` возможны различные ошибки:
-
-<ol>
-<li>Скрипт может не загрузиться: отказ в соединении, разрыв связи...</li>
-<li>Ошибка HTTP, например 500.</li>
-<li>Скрипт загрузился, но внутри некорректен и не вызывает функцию. Например, на сервере произошла ошибка и в ответе передан её текст, а вовсе не данные.</li>
-</ol>
-
-Чтобы отловить их все "одним махом", используем следующий алгоритм:
-
-<ol>
-<li>Создаётся `<script>`.</li>
-<li>На `<script>` ставятся обработчики `onreadystatechange` (для старых IE) и `onload/onerror` (для остальных браузеров).</li>
-<li>При загрузке скрипт выполняет функцию-коллбэк `CallbackRegistry...`. Пусть она при запуске ставит флажок "все ок". А мы в обработчиках проверим -- если флага нет, то функция не вызывалась -- стало быть, ошибка при загрузке или содержимое скрипта некорректно.</li>
-</ol>
-
-## Полный пример
-
-Итак, код функции, которая вызывается с `url` и коллбэками. 
-
-Он совсем небольшой, а без комментариев был бы ещё меньше:
-
-```js
-//+ src="jsonp/scriptRequest.js"
-```
-
-Пример использования:
-```js
-function ok(data) {
-  alert( "Загружен пользователь " + data.name );
-}
-
-function fail(url) {
-  alert( 'Ошибка при запросе ' + url );
-}
-
-// Внимание! Ответы могут приходить в любой последовательности!
-scriptRequest("user?id=123", ok, fail); // Загружен
-scriptRequest("/badurl.js", ok, fail); // fail, 404
-scriptRequest("/", ok, fail); // fail, 200 но некорректный скрипт
-```
-
-Демо, по нажатию на кнопке запускаются запросы выше:
-
-[codetabs src="jsonp" height=100]
-
-
-## COMET
-
-
-COMET через `SCRIPT` реализуется при помощи длинных опросов, также как мы обсуждали в главе [](/xhr-longpoll).
-
-То есть, создаётся тег `<script>`, браузер запрашивает скрипт у сервера и... Сервер оставляет соединение висеть, пока не появится, что сказать. Когда сервер хочет отправить сообщение -- он отвечает, используя формат JSONP. И, тут же, новый запрос...
diff --git a/4-ajax/10-ajax-jsonp/jsonp.view/index.html b/4-ajax/10-ajax-jsonp/jsonp.view/index.html
deleted file mode 100644
index 591c42a7..00000000
--- a/4-ajax/10-ajax-jsonp/jsonp.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <script src="scriptRequest.js"></script>
-</head>
-
-<body>
-
-  <script>
-    function ok(data) {
-      alert("Загружен пользователь " + data.id + ": " + data.name);
-    }
-
-    function fail(url) {
-      alert('Ошибка при запросе ' + url);
-    }
-
-    function go() {
-      // ответы могут приходить в любой последовательности!
-      scriptRequest("user?id=123", ok, fail); // Загружен
-      scriptRequest("/badurl.js", ok, fail); // fail, 404
-      scriptRequest("index.html", ok, fail); // fail, 200 но некорректный скрипт
-    }
-  </script>
-
-  <button onclick='go()'>Сделать запросы</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/10-ajax-jsonp/jsonp.view/scriptRequest.js b/4-ajax/10-ajax-jsonp/jsonp.view/scriptRequest.js
deleted file mode 100644
index 9e2deeea..00000000
--- a/4-ajax/10-ajax-jsonp/jsonp.view/scriptRequest.js
+++ /dev/null
@@ -1,48 +0,0 @@
-var CallbackRegistry = {}; // реестр
-
-// при успехе вызовет onSuccess, при ошибке onError
-function scriptRequest(url, onSuccess, onError) {
-
-  var scriptOk = false; // флаг, что вызов прошел успешно
-
-  // сгенерировать имя JSONP-функции для запроса
-  var callbackName = 'cb' + String(Math.random()).slice(-6);
-
-  // укажем это имя в URL запроса 
-  url += ~url.indexOf('?') ? '&' : '?';
-  url += 'callback=CallbackRegistry.' + callbackName;
-
-  // ..и создадим саму функцию в реестре
-  CallbackRegistry[callbackName] = function(data) {
-    scriptOk = true; // обработчик вызвался, указать что всё ок  
-    delete CallbackRegistry[callbackName]; // можно очистить реестр
-    onSuccess(data); // и вызвать onSuccess
-  };
-
-  // эта функция сработает при любом результате запроса
-  // важно: при успешном результате - всегда после JSONP-обработчика 
-  function checkCallback() {
-    if (scriptOk) return; // сработал обработчик?
-    delete CallbackRegistry[callbackName];
-    onError(url); // нет - вызвать onError
-  }
-
-  var script = document.createElement('script');
-
-  // в старых IE поддерживается только событие, а не onload/onerror
-  // в теории 'readyState=loaded' означает "скрипт загрузился", 
-  // а 'readyState=complete' -- "скрипт выполнился", но иногда
-  // почему-то случается только одно из них, поэтому проверяем оба
-  script.onreadystatechange = function() {
-    if (this.readyState == 'complete' || this.readyState == 'loaded') {
-      this.onreadystatechange = null;
-      setTimeout(checkCallback, 0); // Вызвать checkCallback - после скрипта
-    }
-  }
-
-  // события script.onload/onerror срабатывают всегда после выполнения скрипта
-  script.onload = script.onerror = checkCallback;
-  script.src = url;
-
-  document.body.appendChild(script);
-}
\ No newline at end of file
diff --git a/4-ajax/10-ajax-jsonp/jsonp.view/server.js b/4-ajax/10-ajax-jsonp/jsonp.view/server.js
deleted file mode 100644
index 76a540dc..00000000
--- a/4-ajax/10-ajax-jsonp/jsonp.view/server.js
+++ /dev/null
@@ -1,39 +0,0 @@
-var http = require('http');
-var url = require('url');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  var urlParsed = url.parse(req.url, true);
-
-  if (urlParsed.pathname == '/user') {
-    var id = urlParsed.query.id;
-    var callback = urlParsed.query.callback;
-
-    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
-
-    var user = {
-      name: "Вася",
-      id: id
-    };
-
-    res.end(callback + '(' + JSON.stringify(user) + ')');
-
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/11-server-sent-events/article.md b/4-ajax/11-server-sent-events/article.md
deleted file mode 100644
index 36240aa2..00000000
--- a/4-ajax/11-server-sent-events/article.md
+++ /dev/null
@@ -1,298 +0,0 @@
-# Server Side Events -- события с сервера
-
-Сразу заметим, что на текущий момент этот способ поддерживают все современные браузеры, кроме IE.
-
-Современный стандарт [Server-Sent Events](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) позволяет браузеру создавать специальный объект `EventSource`, который сам обеспечивает соединение с сервером, делает пересоединение в случае обрыва и генерирует события при поступлении данных.
-
-Он, по дизайну, может меньше, чем WebSocket'ы.
-
-С другой стороны, Server Side Events проще в реализации, работают по обычному протоколу HTTP и сразу поддерживают ряд возможностей, которые для WebSocket ещё надо реализовать.
-
-Поэтому в тех случаях, когда нужна преимущественно односторонняя передача данных от сервера к браузеру, они могут быть удачным выбором.
-
-[cut]
-
-## Получение сообщений
-
-При создании объекта `new EventSource(src)` браузер автоматически подключается к адресу `src` и начинает получать с него события:
-
-```js
-var eventSource = new EventSource("/events/subscribe");
-
-eventSource.onmessage = function(e) {
-  console.log("Пришло сообщение: " + e.data);
-};
-```
-
-Чтобы соединение успешно открылось, сервер должен ответить с заголовком `Content-Type: text/event-stream`, а затем оставить соединение висящим и писать в него сообщения в специальном формате:
-
-```
-data: Сообщение 1
-
-data: Сообщение 2
-
-data: Сообщение 3
-data: из двух строк
-```
-
-<ul>
-<li>Каждое сообщение пишется после `data:`. Если после двоеточия есть пробел, то он игнорируется.</li>
-<li>Сообщения разделяются двумя строками `\n\n`.</li>
-<li>Если нужно переслать перевод строки, то сообщение разделяется. Каждая следующая строка пересылается отдельным `data:`.
-
-В частности, две последние строки в примере выше составляют одно сообщение: `"Сообщение 3\nиз двух строк"`.
-</li>
-</ul>
-
-Здесь все очень просто и удобно, кроме разделения сообщения при переводе строки. Но, если подумать -- это не так уж страшно: на практике сложные сообщения обычно передаются в формате JSON. А перевод строки в нём кодируется как `\n`. 
-
-Соответственно, многострочные данные будут пересылаться так:
-
-```
-data: {"user":"Вася","message":"Сообщение 3\n из двух строк"}
-```
-
-...То есть, строка `data:` будет одна, и накаких проблем с разделением сообщения нет.
-
-## Восстановление соединения
-
-При создании объекта браузер автоматически подключается к серверу, а при обрыве -- пытается его возобновить.
-
-Это очень удобно, никакой другой транспорт не обладает такой встроенной способностью.
-
-[smart header="Как серверу полностью закрыть соединение?"]
-При любом закрытии соединения, в том числе если сервер ответит на запрос и закроет соединение сам -- браузер через короткое время повторит свой запрос.
-
-Есть лишь два способа, которыми сервер может "отшить" надоедливый `EventSource`:
-<ul>
-<li>Ответить со статусом не 200.</li>
-<li>Ответить с `Content-Type`, не совпадающим с `text/event-stream`.</li>
-</ul>
-[/smart]
-
-Между попытками возобновить соединение будет пауза, начальное значение которой зависит от браузера (1-3 секунды) и может быть изменено сервером через указание `retry:` в ответе:
-
-```js
-retry: 15000
-data: Поставлена задержка 15 секунд
-```
-
-Браузер, со своей стороны, может закрыть соединение вызовом `close()`:
-
-```js
-var eventSource = new EventSource(...);
-
-eventSource.close();
-```
-
-При этом дальнейших попыток соединения не будет. Открыть обратно этот объект тоже нельзя, можно создать новый `EventSource`.
-
-### Идентификатор id
-
-Для того, чтобы продолжить получение событий с места разрыва, стандарт предусматривает идентификацию событий через `id`.
-
-Сервер может указать его в ответе:
-
-```
-data: Сообщение 1
-id: 1
-
-data: Сообщение 2
-id: 2
-
-data: Сообщение 3
-data: из двух строк
-id: 3
-```
-
-При получении `id:` браузер:
-<ul>
-<li>Устанавливает свойство `eventSource.lastEventId` в его значение.</li>
-<li>При пересоединении пошлёт заголовок `Last-Event-ID` с этим `id`, так что сервер сможет переслать последующие, пропущенные, сообщения.</li>
-</ul>
-
-Обратим внимание: `id` шлётся *не перед сообщением, а после него*, чтобы обновление `lastEventId` произошло, когда браузер всё уже точно получил.
-
-## Статус соединения readyState
-
-У объекта `EventSource` есть свойство `readyState`, которое содержит одно из значений (выдержка из стандарта):
-
-```js
-//+ no-beautify
-const unsigned short CONNECTING = 0; // в процессе (пере-)соединения 
-const unsigned short OPEN = 1;       // соединение установлено
-const unsigned short CLOSED = 2;     // соединение закрыто
-```
-
-При создании объекта и при разрыве оно автоматически равно `CONNECTING`.
-
-## События 
-
-Событий всего три:
-<ul>
-<li>`onmessage` -- пришло сообщение, доступно как `event.data`</li>
-<li>`onopen` -- при успешном установлении соединения</li>
-<li>`onerror` -- при ошибке соединения.</li>
-</ul>
-
-Например:
-
-```js
-var eventSource = new EventSource('digits');
-
-eventSource.onopen = function(e) {
-  console.log("Соединение открыто");
-};
-
-eventSource.onerror = function(e) {
-  if (this.readyState == EventSource.CONNECTING) {
-    console.log("Соединение порвалось, пересоединяемся...");
-  } else {
-    console.log("Ошибка, состояние: " + this.readyState);
-  }
-};
-
-eventSource.onmessage = function(e) {
-  console.log("Пришли данные: " + e.data);
-};
-```
-
-## Своё имя события: event
-
-По умолчанию на события срабатывает обработчик `onmessage`, но можно сделать и свои события. Для этого сервер должен указать перед событием его имя после `event:`.
-
-Например:
-
-```
-event: join
-data: Вася
-
-data: Привет
-
-event: leave
-data: Вася
-```
-
-Сообщение по умолчанию имеет имя `message`.
-
-**Для обработки своих имён событий необходимо ставить обработчик при помощи `addEventListener`.**
-
-Пример кода для обработки:
-
-```js
-eventSource.addEventListener('join', function(e) {
-  alert( 'Пришёл ' + e.data );
-});
-
-eventSource.addEventListener('message', function(e) {
-  alert( 'Сообщение ' + e.data );
-});
-
-eventSource.addEventListener('leave', function(e) {
-  alert( 'Ушёл ' + e.data );
-});
-```
-
-## Демо
-
-В примере ниже сервер посылает в соединение числа от 1 до 3, а затем -- событие `bye` и закрывает соединение. Браузер автоматически откроет его заново.
-
-[codetabs src="eventsource"]
-
-## Кросс-доменность
-
-`EventSource` поддерживает кросс-доменные запросы, аналогично `XMLHttpRequest`. Для этого у конструктора есть второй аргумент -- объект, который нужно передать так:
-
-```js
-var source = new EventSource("http://pupkin.ru/stream", {
-  withCredentials: true
-});
-```
-
-Второй аргумент сделан объектом с расчётом на будущее. Пока что никаких других свойств там не поддерживается, только `withCredentials`.
-
-Сервер при этом получит заголовок `Origin` с доменом запроса и должен ответить с заголовком `Access-Control-Allow-Origin` (и `Access-Control-Allow-Credentials`,  если стоит `withCredentials`), в точности как в главе [](/xhr-crossdomain).
-
-При кросс-доменных запросах у событий `event` также появится дополнительное свойство `origin`, содержащее адрес источника, откуда пришли данные. Его можно использовать для дополнительной проверки со стороны браузера:
-
-```js
-eventSource.addEventListener('message', function(e) {
-  if (e.origin != 'http://javascript.ru') return;
-  alert( 'Сообщение ' + e.data );
-});
-```
-
-## Итого
-
-Объект `EventSource` предназначен для передачи текстовых сообщений с сервера, используя обычный протокол HTTP.
-
-Он предлагает не только передачу сообщений, но и встроенную поддержку важных вспомогательных функций:
-
-<ul>
-<li>События `event`.</li>
-<li>Автоматическое пересоединение, с настраиваемой задержкой `retry`.</li>
-<li>Проверка текущего состояния подключения по `readyState`.</li>
-<li>Идентификаторы сообщений `id` для точного возобновления потока данных, последний полученный идентификатор передаётся в заголовке `Last-Event-ID`.</li>
-<li>Кросс-доменность CORS.</li>
-</ul>
-
-Этот набор функций делает EventSource достойной альтернативой WebSocket, которые хоть и потенциально мощнее, но требуют реализации всех этих функций на клиенте и сервере, поверх протокола.
-
-Поддержка -- все браузеры, кроме IE.
-
-<ul>
-<li>Синтаксис:
-```js
-var source = new EventSource(src[, credentials]); // src - адрес с любого домена
-```
-
-Второй необязательный аргумент, если указан в виде `{ withCredentials: true }`, инициирует отправку Cookie и данных авторизации при кросс-доменных запросах. 
-
-Безопасность при кросс-доменных запросах обеспечивается аналогично `XMLHttpRequest`.
-</li>
-<li>Свойства объекта:
-<dl>
-<dt>`readyState`</dt>
-<dd>Текущее состояние соединения, одно из `EventSource.CLOSING (=0)`, `EventSource.OPEN (=1)` или `EventSource.CLOSED (=2)`.</dd>
-<dt>`lastEventId`</dt>
-<dd>Последнее полученное `id`, если есть. При возобновлении соединения браузер указывает это значение в заголовке `Last-Event-ID`.</dd>
-<dt>`url`, `withCredentials`</dt>
-<dd>Параметры, переданные при создании объекта. Менять их нельзя.</dd>
-<dt>
-</dl>
-</li>
-<li>Методы:
-
-<dl>
-<dt>`close()`</dt>
-<dd>Закрывает соединение.</dd>
-</dl>
-</li>
-<li>События:
-
-<dl>
-<dt>`onmessage`</dt>
-<dd>При сообщении, данные -- в `event.data`.</dd>
-<dt>`onopen`</dt>
-<dd>При установлении соединения.</dd>
-<dt>`onerror`</dt>
-<dd>При ошибке, в том числе -- закрытии соединения по инициативе сервера.</dd>
-</dl>
-
-Эти события можно ставить напрямую через свойство: `source.onmessage = ...`.
-
-Если сервер присылает имя события в `event:`, то такие события нужно обрабатывать через `addEventListener`.
-</li>
-<li>Формат ответа сервера:
-
-Сервер присылает пустые строки, либо строки, начинающиеся с:
-<ul>
-<li>`date:` -- сообщение, несколько таких строк подряд склеиваются и образуют одно сообщение.</li>
-<li>`id:` -- обновляет `lastEventId`.</li>
-<li>`retry:` -- указывает паузу между пересоединениями, в миллисекундах. JavaScript не может указать это значение, только сервер.</li>
-<li>`event:` -- имя события, должен быть перед `date:`.</li>
-</ul>
-</li>
-</ul>
-
-
diff --git a/4-ajax/11-server-sent-events/eventsource.view/index.html b/4-ajax/11-server-sent-events/eventsource.view/index.html
deleted file mode 100644
index 0b831e96..00000000
--- a/4-ajax/11-server-sent-events/eventsource.view/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script>
-    var eventSource;
-
-    function start() { // при нажатии на Старт
-
-      if (!window.EventSource) {
-        alert('В этом браузере нет поддержки EventSource.');
-        return;
-      }
-
-      eventSource = new EventSource('digits');
-
-      eventSource.onopen = function(e) {
-        log("Соединение открыто");
-      };
-
-      eventSource.onerror = function(e) {
-        if (this.readyState == EventSource.CONNECTING) {
-          log("Соединение порвалось, пересоединяемся...");
-        } else {
-          log("Ошибка, состояние: " + this.readyState);
-        }
-      };
-
-      eventSource.addEventListener('bye', function(e) {
-        log("Bye: " + e.data);
-      }, false);
-
-      eventSource.onmessage = function(e) {
-        console.log(e);
-        log(e.data);
-      };
-    }
-
-    function stop() { // при нажатии на Стоп
-      eventSource.close();
-      log("Соединение завершено");
-    }
-
-    function log(msg) {
-      logElem.innerHTML += msg + "<br>";
-    }
-  </script>
-</head>
-
-<body>
-
-  <button onclick="start()">Старт</button>
-  <button onclick="stop()">Стоп</button>
-
-  Нажмите "Старт" для начала.
-  <div id="logElem"></div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/11-server-sent-events/eventsource.view/server.js b/4-ajax/11-server-sent-events/eventsource.view/server.js
deleted file mode 100644
index e9ef800f..00000000
--- a/4-ajax/11-server-sent-events/eventsource.view/server.js
+++ /dev/null
@@ -1,54 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-
-var fileServer = new(require('node-static')).Server('.');
-
-function onDigits(req, res) {
-  res.writeHead(200, {
-    'Content-Type': 'text/event-stream; charset=utf-8',
-    'Cache-Control': 'no-cache'
-  });
-
-  var i = 0;
-
-  var timer = setInterval(write, 1000);
-  write();
-
-  function write() {
-    i++;
-
-    if (i == 4) {
-      res.write('event: bye\ndata: до свидания\n\n');
-      clearInterval(timer);
-      res.end();
-      return;
-    }
-
-    res.write('data: ' + i + '\n\n');
-
-  }
-}
-
-function accept(req, res) {
-
-  if (req.url == '/digits') {
-    onDigits(req, res);
-    return;
-  }
-
-  // всё остальное -- статика
-  fileServer.serve(req, res);
-
-
-}
-
-
-
-// ----- запуск accept как сервера из консоли или как модуля ------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/article.md b/4-ajax/12-ajax-iframe/article.md
deleted file mode 100644
index 838f1839..00000000
--- a/4-ajax/12-ajax-iframe/article.md
+++ /dev/null
@@ -1,397 +0,0 @@
-# IFRAME для AJAX и COMET
-
-Эта глава посвящена `IFRAME` -- самому древнему и кросс-браузерному способу AJAX-запросов.
-
-Сейчас он используется, разве что, для поддержки кросс-доменных запросов в IE7- и, что чуть более актуально, для реализации COMET в IE9-. 
-
-Для общения с сервером создается невидимый `IFRAME`. В него отправляются данные, и в него же сервер пишет ответ.
-
-[cut]
-
-## Введение
-
-Сначала -- немного вспомогательных функций и особенности работы с `IFRAME`.
-
-### Двуличность IFRAME: окно+документ
-
-Что такое IFRAME? На этот вопрос у браузера два ответа
-<ol>
-	<li>IFRAME -- это HTML-тег: <code>&lt;iframe&gt;</code> со стандартным набором свойств.
-<ul>
-	<li>Тег можно создавать в JavaScript</li>
-	<li>У тега есть стили, можно менять.</li>
-	<li>К тегу можно обратиться через `document.getElementById` и другие методы.</li>
-</ul>
-</li>
-	<li>IFRAME -- это окно браузера, вложенное в основное
-<ul>
-	<li>IFRAME -- такое же по функционалу окно браузера, как и основное, с адресом и т.п.</li>
-        <li>Если документ в `IFRAME` и внешнее окно находятся на разных доменах, то прямой вызов методов друг друга невозможен.</li>
-	<li>Ссылку на это окно можно получить через `window.frames['имя фрейма']`.</li>
-</ul>
-</li>
-</ol>
-
-Для достижения цели мы будем работать как с тегом, так и с окном. Они, конечно же, взаимосвязаны.
-
-**В теге `<iframe>` свойство `contentWindow` хранит ссылку на окно.**
-
-Окна также содержатся в коллекции `window.frames`.
-
-Например:
-
-```js
-// Окно из ифрейма
-var iframeWin = iframe.contentWindow;
-
-// Можно получить и через frames, если мы знаем имя ифрейма (и оно у него есть)
-var iframeWin = window.frames[iframe.name];
-iframeWin.parent == window; // parent из iframe указывает на родительское окно
-
-// Документ не будет доступен, если iframe с другого домена
-var iframeDoc = iframe.contentWindow.document;
-```
-
-Больше информации об ифреймах вы можете получить в главе [](/iframes).
-
-### IFRAME и история посещений
-
-`IFRAME` -- полноценное окно, поэтому навигация в нём попадает в историю посещений.
-
-Это означает, что при нажатии кнопки "Назад" браузер вернёт посетителя назад не в основном окне, а в ифрейме. В лучшем случае -- браузер возьмёт предыдущее состояние ифрейма из кэша и посетитель просто подумает, что кнопка не сработала. В худшем -- в ифрейм будет сделан предыдущий запрос, а это уже точно ни к чему. 
-
-**Наши запросы в ифрейм -- служебные и для истории не предназначены. К счастью, есть ряд техник, которые позволяют обойти проблему.**
-
-<ul>
-<li>Ифрейм нужно создавать динамически, через JavaScript.
-</li>
-<li>Когда ифрейм уже создан, то единственный способ поменять его `src` без попадания запроса в историю посещений:
-
-```js
-// newSrc - новый адрес
-iframeDoc.location.replace(newSrc);
-```
-
-Вы можете возразить: "но ведь `iframeDoc` не всегда доступен! `iframe` может быть с другого домена -- как быть тогда?". Ответ: вместо смены `src` этого ифрейма -- создать новый, с новым `src`.</li>
-<li>POST-запросы в `iframe` всегда попадают в историю посещений.</li>
-<li>... Но если `iframe` удалить, то лишняя история тоже исчезнет :). Сделать это можно по окончании запроса.</li>
-</ul>
-
-**Таким образом, общий принцип использования `IFRAME`: динамически создать, сделать запрос, удалить.**
-
-Бывает так, что удалить по каким-то причинам нельзя, тогда возможны проблемы с историей, описанные выше.
-
-### Функция createIframe
-
-Приведенная ниже функция `createIframe(name, src, debug)` кросс-браузерно создаёт ифрейм с данным именем и `src`.
-
-Аргументы:
-<dl>
-<dt>`name`</dt>
-<dd>Имя и `id` ифрейма</dd>
-<dt>`src`</dt>
-<dd>Исходный адрес ифрейма. Необязательный параметр.</dd>
-<dt>`debug`</dt>
-<dd>Если параметр задан, то ифрейм после создания не прячется.</dd>
-</dl>
-
-```js
-function createIframe(name, src, debug) {
-  src = src || 'javascript:false'; // пустой src
-
-  var tmpElem = document.createElement('div');
-
-  // в старых IE нельзя присвоить name после создания iframe
-  // поэтому создаём через innerHTML
-  tmpElem.innerHTML = '<iframe name="' + name + '" id="' + name + '" src="' + src + '">';
-  var iframe = tmpElem.firstChild;
-
-  if (!debug) {
-    iframe.style.display = 'none';
-  }
-
-  document.body.appendChild(iframe);
-
-  return iframe;
-}
-```
-
-Ифрейм здесь добавляется к `document.body`. Конечно, вы можете исправить этот код и добавлять его в любое другое место документа. 
- 
-Кстати, при вставке, если не указан `src`, тут же произойдёт событие `iframe.onload`. Пока обработчиков нет, поэтому оно будет проигнорировано.
-
-### Функция postToIframe
-
-Функция `postToIframe(url, data, target)` отправляет POST-запрос в ифрейм с именем `target`, на адрес `url` с данными `data`.
-
-Аргументы:
-<dl>
-<dt>`url`</dt>
-<dd>URL, на который отправлять запрос.</dd>
-<dt>`data`</dt>
-<dd>Объект содержит пары `ключ:значение` для полей формы. Значение будет приведено к строке.</dd>
-<dt>`target`</dt>
-<dd>Имя ифрейма, в который отправлять данные.</dd>
-</dl>
-
-```js
-// Например: postToIframe('/vote', {mark:5}, 'frame1')
-
-function postToIframe(url, data, target) {
-  var phonyForm = document.getElementById('phonyForm');
-  if (!phonyForm) {
-    // временную форму создаем, если нет
-    phonyForm = document.createElement("form");
-    phonyForm.id = 'phonyForm';
-    phonyForm.style.display = "none";
-    phonyForm.method = "POST";
-    document.body.appendChild(phonyForm);
-  }
-
-  phonyForm.action = url;
-  phonyForm.target = target;
-
-  // заполнить форму данными из объекта
-  var html = [];
-  for (var key in data) {
-    var value = String(data[key]).replace(/"/g, "&quot;");
-    // в старых IE нельзя указать name после создания input
-    // поэтому используем innerHTML вместо DOM-методов
-    html.push("<input type='hidden' name=\"" + key + "\" value=\"" + value + "\">");
-  }
-  phonyForm.innerHTML = html.join('');
-
-  phonyForm.submit();
-}
-```
-
-Эта функция формирует форму динамически, но, конечно, это лишь один из возможных сценариев использования. 
-
-В `IFRAME` можно отправлять и существующую форму, включающую файловые и другие поля. 
-
-## Запросы GET и POST
-
-Общий алгоритм обращения к серверу через ифрейм:
-
-<ol>
-<li>Создаём `iframe` со случайным именем `iframeName`.</li>
-<li>Создаём в основном окне объект `CallbackRegistry`, в котором в `CallbackRegistry[iframeName]` сохраняем функцию, которая будет обрабатывать результат.</li>
-<li>Отправляем GET или POST-запрос в него.</li>
-<li>Сервер отвечает как-то так:
-
-```html
-<!--+ no-beautify -->
-<script>
-  parent.CallbackRegistry[window.name]({данные});
-</script>
-```
-
-...То есть, вызывает из основного окна функцию обработки (`window.name` в ифрейме -- его имя).</li>
-<li>Дополнительно нужен обработчик `iframe.onload` -- он сработает и проверит, выполнилась ли функция `CallbackRegistry[window.name]`. Если нет, значит какая-то ошибка. Сервер при нормальном потоке выполнения всегда отвечает её вызовом.</li>
-</ol>
-
-Подробнее можно понять процесс, взглянув на код.
-
-Мы будем использовать в нём две функции -- одну для GET, другую -- для POST:
-<ul>
-<li>`iframeGet(url, onSuccess, onError)` -- для GET-запросов на `url`. При успешном запросе вызывается `onSuccess(result)`, при неуспешном: `onError()`.</li>
-<li>`iframePost(url, data, onSuccess, onError)` -- для POST-запросов на `url`. Значением `data` должен быть объект `ключ:значение` для пересылаемых данных, он конвертируется в поля формы.</li>
-</ul>
-
-Пример в действии, возвращающий дату сервера при GET и разницу между датами клиента и сервера при POST:
-
-
-[codetabs src="date"]
-
-
-Прямой вызов функции внешнего окна из ифрейма отлично работает, потому что они с одного домена. Если с разных, то нужны дополнительные действия, например:
-
-<ul>
-<li>В IE8+ есть интерфейс [postMessage](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) для общения между окнами с разных доменов.</li>
-<li>В любых, даже самых старых IE, можно обмениваться данными через `window.name`. Эта переменная хранит "имя" окна или фрейма, которое не меняется при перезагрузке страницы.
-
-Поэтому если мы сделали `POST` в `<iframe>` на другой домен и он поставил `window.name = "Вася"`, а затем сделал редирект на основной домен, то эти данные станут доступны внешней странице.</li>
-<li>Также в совсем старых IE можно обмениваться данными через хеш, то есть фрагмент URL после `#`. Его изменение доступно между ифреймами с разных доменов и не приводит к перезагрузке страницы. Таким образом они могут передавать данные друг другу. Есть готовые библиотеки, которые реализуют этот подход, например [Porthole](http://ternarylabs.github.io/porthole/).</li>
-</ul>
-
-
-## IFRAME для COMET
-
-Бесконечный IFRAME -- самый старый способ организации COMET. Когда-то он был основой AJAX-приложений, а сейчас -- используется лишь в случаях, когда браузер не поддерживает современный стандарт WebSocket, то есть для IE9-.
-
-Этот способ основан на том, что браузер читает страницу последовательно и обрабатывает все новые теги по мере того, как сервер их присылает.
-
-Классическая реализация -- это когда клиент создает невидимый IFRAME, ведущий на служебный URL. Сервер, получив соединение на этот URL, не закрывает его, а
-время от времени присылает блоки сообщений <code>&lt;script&gt;...javascript...&lt;/script&gt;</code>. Появившийся в IFRAME'е javascript тут же выполняется браузером, передавая информацию на основную страницу.
-
-Таким образом, для передачи данных используется "бесконечный" ифрейм, через который сервер присылает все новые данные. 
-
-Схема работы:
-<ol>
-<li>Создаётся `<iframe src="COMET_URL">`, по адресу `COMET_URL` расположен сервер.</li>
-<li>Сервер выдаёт начало ("шапку") документа и останавливается, оставляя соединение активным.</li>
-<li>Когда сервер хочет что-то отправить -- он пишет в соединение <code>&lt;script&gt;parent.onMessage(сообщение)&lt;/script&gt;</code> Браузер тут же выполняет этот скрипт -- так сообщение приходит на клиент.</li>
-<li>Ифрейм, в теории, грузится бесконечно. Его завершение означает обрыв канала связи. Его можно поймать по `iframe.onload` и заново открыть соединение (создать новый `iframe`).</li>
-</ol>
-
-Также ифрейм можно пересоздавать время от времени, для очистки памяти от старых сообщений.
-
-<img src="comet.png">
-
-Ифрейм при этом работает только на получение данных с сервера, как альтернатива [Server Sent Events](/server-sent-events). Для запросов используется обычный `XMLHttpRequest`.
-
-## Обход проблем с IE
-
-Такое использование ифреймов является хаком. Поэтому есть ряд проблем:
-
-<ol>
-<li>Показывается индикатор загрузки, "курсор-часики".</li>
-<li>При POST в `<iframe>` раздаётся звук "клика".</li>
-<li>Браузер буферизует начало страницы.</li>
-</ol>
-
-Мы должны эти проблемы решить, прежде всего, в IE, поскольку в других браузерах есть [WebSocket](/websockets) и [Server Sent Events](/server-sent-events) .
-
-Проще всего решить последнюю -- IE не начинает обработку страницы, пока она не загрузится до определенного размера.
-
-Поэтому в таком `IFRAME` первые несколько сообщений задержатся:
-
-```html
-<!--+ no-beautify -->
-<!DOCTYPE HTML>
-<html>
-  <body>
-  <script>parent.onMessage("привет");</script>
-  <script>parent.onMessage("от сервера");</script>
-  ...
-```
-
-Решение -- забить начало ифрейма чем-нибудь, поставить, например, килобайт пробелов в начале:
-
-```html
-<!DOCTYPE HTML>
-<html>
-
-<body>
-  ******* 1 килобайт пробелов, а потом уже сообщения ******
-  <script>
-    parent.onMessage("привет");
-  </script>
-  <script>
-    parent.onMessage("от сервера");
-  </script>
-  ...
-```
-
-Для решения проблемы с индикацией загрузки и клика в мы можем использовать безопасный ActiveX-объект `htmlfile`. IE не требует разрешений на его создание. Фактически, это независимый HTML-документ.
-
-Оказывается, если `iframe` создать в нём, то никакой анимации и звуков не будет.
-
-Итак, схема:
-<ol>
-<li>Основное окно `main` создёт вспомогательный объект: `new ActiveXObject("htmlfile")`. Это HTML-документ со своим `window`, похоже на встроенный `iframe`.</li>
-<li>В `htmlfile` записывается `iframe`.</li>
-<li>Цепочка общения: основное окно - `htmlfile` - ифрейм.</li>
-</ol>
-
-### iframeActiveXGet
-
-На самом деле всё еще проще, если посмотреть на код:
-
-Метод `iframeActiveXGet` по существу идентичен обычному `iframeGet`, которое мы рассмотрели. Единственное отличие -- вместо `createIframe` используется особый метод `createActiveXFrame`:
-
-```js
-function iframeActiveXGet(url, onSuccess, onError) {
-
-  var iframeOk = false;
-
-  var iframeName = Math.random();
-*!*
-  var iframe = createActiveXFrame(iframeName, url);
-*/!*
-
-  CallbackRegistry[iframeName] = function(data) {
-    iframeOk = true;
-    onSuccess(data);
-  }
-
-  iframe.onload = function() {
-    iframe.parentNode.removeChild(iframe); // очистка
-    delete CallbackRegistry[iframeName];
-    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
-  }
-
-}
-```
-
-### createActiveXFrame
-
-В этой функции творится вся IE-магия:
-
-```js
-function createActiveXFrame(name, src) {
-  // (1)
-  var htmlfile = window.htmlfile;
-  if (!htmlfile) {
-    htmlfile = window.htmlfile = new ActiveXObject("htmlfile");
-    htmlfile.open();
-    // (2)
-    htmlfile.write("<html><body></body></html>");
-    htmlfile.close();
-    // (3)
-    htmlfile.parentWindow.CallbackRegistry = CallbackRegistry;
-  }
-
-  // (4)
-  src = src || 'javascript:false';
-  htmlfile.body.insertAdjacentHTML('beforeEnd',
-    "<iframe name='" + name + "' src='" + src + "'></iframe>");
-  return htmlfile.body.lastChild;
-}
-```
-
-<ol>
-<li>Вспомогательный объект `htmlfile` будет один и он будет глобальным. Можно и спрятать переменную в замыкании. Смысл в том, что в один `htmlfile` можно записать много ифреймов, так что не будем множить сущности и занимать ими лишнюю память.</li>
-<li>В `htmlfile` можно записать любой текст и, при необходимости, через  `document.write('<script>...<\/script>)`. Здесь мы делаем пустой документ.</li>
-<li>Когда загрузится `iframe`, он сделает вызов:
-
-```html
-<script>
-  parent.CallbackRegistry[window.name](объект с данными);
-</script>
-```
-
-Здесь `parent'ом` для `iframe'а` будет `htmlfile`, т.е. `CallbackRegistry` будет искаться среди переменных соответствующего ему окна, а вовсе не верхнего `window`.
-
-Окно для `htmlfile` доступно как `htmlfile.parentWindow`, копируем в него ссылку на реестр коллбэков `CallbackRegistry`. Теперь ифрейм его найдёт.</li>
-<li>Далее вставляем ифрейм в документ. В старых `IE` нельзя поменять `name` ифрейму через DOM, поэтому вставляем строкой через `insertAdjacentHTML`.</li>
-</ol>
-
-Пример в действии (только IE):
-
-[codetabs src="date-activex"]
-
-Запрос, который происходит, полностью незаметен. 
-
-Метод POST делается аналогично, только форму ужно добавлять не в основное окно, а в `htmlfile`, через вызов `htmlfile.appendChild`. В остальном -- всё так же, как и при обычной отправке через ифрейм. 
-
-Впрочем, для COMET нужен именно GET.
-
-Можно и сочетать эти способы: если есть ActiveX: `if ("ActiveXObject" in window)` -- используем методы для IE, описанные выше, а иначе -- обычные методы. 
-
-Вот мини-приложение с сервером на Node.JS, непрерывно получающее текущее время с сервера через `<iframe>`, сочетающее эти подходы:
-
-[codetabs src="date-comet"]
-
-Ещё раз заметим, что обычно такое сочетание не нужно, так как если не IE9-, то можно использовать более современные средства для COMET.
-
-## Итого
-
-<ul>
-<li>Iframe позволяет делать "AJAX"-запросы и хитро обходить кросс-доменные ограничения в IE7-. Обычно для этого используют либо `window.name` с редиректом, либо хеш с библиотекой типа [Porthole](https://github.com/ternarylabs/porthole).</li>
-<li>В IE9- iframe можно использовать для COMET. В IE10 уже есть WebSocket.</li>
-</ul>
-
-Существует ряд уже готовых клиент-серверных библиотек, которые реализуют AJAX/COMET, в том числе и через iframe, мы рассмотрим их позже. Поэтому совсем не обязательно делать "с нуля". Хотя, как можно видеть из главы, это совсем несложно.
-
-
diff --git a/4-ajax/12-ajax-iframe/comet.png b/4-ajax/12-ajax-iframe/comet.png
deleted file mode 100644
index 6fcfc166..00000000
Binary files a/4-ajax/12-ajax-iframe/comet.png and /dev/null differ
diff --git a/4-ajax/12-ajax-iframe/date-activex.view/activex.js b/4-ajax/12-ajax-iframe/date-activex.view/activex.js
deleted file mode 100644
index b09ec2c8..00000000
--- a/4-ajax/12-ajax-iframe/date-activex.view/activex.js
+++ /dev/null
@@ -1,37 +0,0 @@
-var CallbackRegistry = {}; // реестр
-
-function iframeActiveXGet(url, onSuccess, onError) {
-
-  var iframeOk = false;
-
-  var iframeName = Math.random();
-  var iframe = createActiveXFrame(iframeName, url);
-
-  CallbackRegistry[iframeName] = function(data) {
-    iframeOk = true;
-    onSuccess(data);
-  }
-
-  iframe.onload = function() {
-    iframe.parentNode.removeChild(iframe); // очистка
-    delete CallbackRegistry[iframeName];
-    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
-  }
-
-}
-
-
-function createActiveXFrame(name, src) {
-  var htmlfile = window.htmlfile;
-  if (!htmlfile) {
-    htmlfile = window.htmlfile = new ActiveXObject("htmlfile");
-    htmlfile.open();
-    htmlfile.write("<html><body></body></html>");
-    htmlfile.close();
-    htmlfile.parentWindow.CallbackRegistry = CallbackRegistry;
-  }
-
-  src = src || 'javascript:false'; // пустой src  
-  htmlfile.body.insertAdjacentHTML('beforeEnd', "<iframe name='" + name + "' src='" + src + "'></iframe>");
-  return htmlfile.body.lastChild; // window in .document.parentWindow
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date-activex.view/index.html b/4-ajax/12-ajax-iframe/date-activex.view/index.html
deleted file mode 100644
index 92682ffc..00000000
--- a/4-ajax/12-ajax-iframe/date-activex.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-
-  <script src="activex.js"></script>
-
-  <script>
-    function ok(result) {
-      alert('result: ' + result);
-    }
-
-    function fail() {
-      alert('fail');
-    }
-
-    function go() {
-      if (!("ActiveXObject" in window)) {
-        alert("Только Internet Explorer");
-        return;
-      }
-      iframeActiveXGet("server", ok, fail);
-    }
-  </script>
-
-
-  <button onclick="go()">iframeActiveXGet server date</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date-activex.view/server.js b/4-ajax/12-ajax-iframe/date-activex.view/server.js
deleted file mode 100644
index 3ae07ea8..00000000
--- a/4-ajax/12-ajax-iframe/date-activex.view/server.js
+++ /dev/null
@@ -1,42 +0,0 @@
-var http = require('http');
-var url = require('url');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-var multiparty = require('multiparty');
-
-function accept(req, res) {
-
-  var urlParsed = url.parse(req.url, true);
-  res.setHeader('Cache-Control', 'no-cache');
-
-  if (urlParsed.pathname == '/server') {
-    res.end(wrap(new Date()));
-    return;
-  } else if (urlParsed.pathname == '/diff') {
-
-    var form = new multiparty.Form();
-    form.parse(req, function(err, fields, files) {
-      var diff = new Date() - fields.clientDate[0];
-      res.end(wrap(diff));
-    });
-
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-function wrap(data) {
-  return '<script>parent.CallbackRegistry[window.name](' + JSON.stringify(data) + ')</script>';
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date-comet.view/iframeComet.js b/4-ajax/12-ajax-iframe/date-comet.view/iframeComet.js
deleted file mode 100644
index ddec0049..00000000
--- a/4-ajax/12-ajax-iframe/date-comet.view/iframeComet.js
+++ /dev/null
@@ -1,83 +0,0 @@
-var IframeComet = new function() {
-  var self = this;
-
-  var connectTries = 0,
-    reconnectTimer;
-  var htmlfile; // for ie only
-  var iframe;
-
-  this.onConnected = function() {
-    connectTries = 0;
-    clearTimeout(reconnectTimer);
-  };
-
-  this.onMessage = function(message) { /* ... */ };
-
-  this.onError = function(err) { /* ... */ };
-
-  this.open = function(url) {
-    connectTries++;
-
-    if (connectTries > 3) {
-      self.onError("Unable to connect");
-    }
-
-    if ("ActiveXObject" in window) { // IE
-      createActiveXFrame(url);
-    } else {
-      createIframe(url);
-    }
-
-    reconnectTimer = setTimeout(function() {
-      if (!self.isConnected()) {
-        self.open(url);
-      }
-    }, connectTries * 2000);
-
-    // в Chrome не срабатывает при обрыве соединения,
-    // так что используем там другой =) транспорт
-    iframe.onload = function() {
-      self.open(url);
-    };
-
-  };
-
-  this.isConnected = function() {
-    return connectTries == 0; // onConnect обнуляет connectTries
-  }
-
-  function cleanIframe() {
-    if (iframe) {
-      iframe.src = "javascript:false";
-      iframe.parentNode.removeChild(iframe); // очистка
-    }
-  }
-
-  function createIframe(src) {
-    cleanIframe();
-
-    iframe = document.createElement('iframe');
-    iframe.src = src || 'javascript:false';
-    iframe.style.display = 'none';
-
-    document.body.appendChild(iframe);
-  }
-
-
-  function createActiveXFrame(src) {
-    cleanIframe();
-
-    if (!htmlfile) {
-      htmlfile = new ActiveXObject("htmlfile");
-      htmlfile.open();
-      htmlfile.write("<html><body></body></html>");
-      htmlfile.close();
-      htmlfile.parentWindow.IframeComet = self;
-    }
-
-    src = src || 'javascript:false'; // пустой src  
-    htmlfile.body.insertAdjacentHTML('beforeEnd', "<iframe src='" + src + "'></iframe>");
-    iframe = htmlfile.body.lastChild; // window in .document.parentWindow
-  }
-
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date-comet.view/index.html b/4-ajax/12-ajax-iframe/date-comet.view/index.html
deleted file mode 100644
index f1cbc469..00000000
--- a/4-ajax/12-ajax-iframe/date-comet.view/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-
-  <script src="iframeComet.js"></script>
-
-  <button onclick="go()">IframeComet.open("comet");</button>
-
-
-  <div id="showElem"></div>
-
-  <script>
-    IframeComet.onMessage = IframeComet.onError = show;
-
-    function show(msg) {
-      showElem.innerHTML = msg;
-    }
-
-    function go() {
-      IframeComet.open("comet");
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date-comet.view/server.js b/4-ajax/12-ajax-iframe/date-comet.view/server.js
deleted file mode 100644
index 87d56747..00000000
--- a/4-ajax/12-ajax-iframe/date-comet.view/server.js
+++ /dev/null
@@ -1,43 +0,0 @@
-var http = require('http');
-var url = require('url');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/comet') {
-    res.writeHead(200, {
-      'Content-Type': 'text/html; charset=utf-8'
-    });
-
-    res.write('<!DOCTYPE HTML><html> \
-			<head><meta junk="' + new Array(2000).join('*') + '"/> \
-			<script> \
-			  var i = parent.IframeComet; \
-			  i.onConnected()</script> \
-			</head><body>');
-
-    setInterval(function() {
-      var now = new Date();
-      var timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
-      res.write('<script>i.onMessage("' + timeStr + '")</script>');
-    }, 1000);
-
-    return;
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date.view/iframe.js b/4-ajax/12-ajax-iframe/date.view/iframe.js
deleted file mode 100644
index cf1ab33f..00000000
--- a/4-ajax/12-ajax-iframe/date.view/iframe.js
+++ /dev/null
@@ -1,92 +0,0 @@
-function createIframe(name, src, debug) {
-  src = src || 'javascript:false'; // пустой src
-
-  var tmpElem = document.createElement('div');
-
-  // в старых IE нельзя присвоить name после создания iframe, поэтому создаём через innerHTML
-  tmpElem.innerHTML = '<iframe name="' + name + '" id="' + name + '" src="' + src + '">';
-  var iframe = tmpElem.firstChild;
-
-  if (!debug) {
-    iframe.style.display = 'none';
-  }
-
-  document.body.appendChild(iframe);
-
-  return iframe;
-}
-
-// функция постит объект-хэш content в виде формы с нужным url , target
-// напр. postToIframe('/count.php', {a:5,b:6}, 'frame1')
-
-function postToIframe(url, data, target) {
-  var phonyForm = document.getElementById('phonyForm');
-  if (!phonyForm) {
-    // временную форму создаем, если нет
-    phonyForm = document.createElement("form");
-    phonyForm.id = 'phonyForm';
-    phonyForm.style.display = "none";
-    phonyForm.method = "POST";
-    phonyForm.enctype = "multipart/form-data";
-    document.body.appendChild(phonyForm);
-  }
-
-  phonyForm.action = url;
-  phonyForm.target = target;
-
-  // заполнить форму данными из объекта
-  var html = [];
-  for (var key in data) {
-    var value = String(data[key]).replace(/"/g, "&quot;");
-    html.push("<input type='hidden' name=\"" + key + "\" value=\"" + value + "\">");
-  }
-  phonyForm.innerHTML = html.join('');
-
-  phonyForm.submit();
-}
-
-
-var CallbackRegistry = {}; // реестр
-
-function iframeGet(url, onSuccess, onError) {
-
-  var iframeOk = false; // флаг успешного ответа сервера
-
-  var iframeName = Math.random(); // случайное имя для ифрейма
-  var iframe = createIframe(iframeName, url);
-
-  CallbackRegistry[iframeName] = function(data) {
-    iframeOk = true; // сервер ответил успешно
-    onSuccess(data);
-  }
-
-  iframe.onload = function() {
-    iframe.parentNode.removeChild(iframe); // очистка
-    delete CallbackRegistry[iframeName];
-    if (!iframeOk) onError(); // если сервер не ответил как надо - что-то не так
-  }
-
-}
-
-// аналогично iframeGet, но в postToIframe передаются данные data
-function iframePost(url, data, onSuccess, onError) {
-
-  var iframeOk = false;
-
-  var iframeName = Math.random();
-  var iframe = createIframe(iframeName);
-
-  CallbackRegistry[iframeName] = function(data) {
-    iframeOk = true;
-    onSuccess(data);
-  }
-
-  iframe.onload = function() {
-    iframe.parentNode.removeChild(iframe); // очистка
-    delete CallbackRegistry[iframeName];
-
-    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
-  }
-
-  postToIframe(url, data, iframeName);
-}
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date.view/index.html b/4-ajax/12-ajax-iframe/date.view/index.html
deleted file mode 100644
index eac55d82..00000000
--- a/4-ajax/12-ajax-iframe/date.view/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<body>
-
-  <script src="iframe.js"></script>
-
-  <script>
-    function ok(result) {
-      alert('result: ' + result);
-    }
-
-    function fail() {
-      alert('fail');
-    }
-  </script>
-
-  <button onclick="iframeGet('server', ok, fail)">iframeGet server</button>
-
-  <button onclick="iframePost('diff', {clientDate: +new Date}, ok, fail)">iframePost diff</button>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/12-ajax-iframe/date.view/server.js b/4-ajax/12-ajax-iframe/date.view/server.js
deleted file mode 100644
index 3ae07ea8..00000000
--- a/4-ajax/12-ajax-iframe/date.view/server.js
+++ /dev/null
@@ -1,42 +0,0 @@
-var http = require('http');
-var url = require('url');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-var multiparty = require('multiparty');
-
-function accept(req, res) {
-
-  var urlParsed = url.parse(req.url, true);
-  res.setHeader('Cache-Control', 'no-cache');
-
-  if (urlParsed.pathname == '/server') {
-    res.end(wrap(new Date()));
-    return;
-  } else if (urlParsed.pathname == '/diff') {
-
-    var form = new multiparty.Form();
-    form.parse(req, function(err, fields, files) {
-      var diff = new Date() - fields.clientDate[0];
-      res.end(wrap(diff));
-    });
-
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-function wrap(data) {
-  return '<script>parent.CallbackRegistry[window.name](' + JSON.stringify(data) + ')</script>';
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/13-csrf/article.md b/4-ajax/13-csrf/article.md
deleted file mode 100644
index 53fba358..00000000
--- a/4-ajax/13-csrf/article.md
+++ /dev/null
@@ -1,138 +0,0 @@
-# Атака CSRF
-
-Нельзя говорить про AJAX и не упомянуть про важнейшую деталь его реализации -- защиту от CSRF-атак.
-
-[CSRF](http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%BC%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D1%85_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2) (Cross-Site Request Forgery, также XSRF) -- опаснейшая атака, которая приводит к тому, что хакер может выполнить на неподготовленном сайте массу различных действий от имени других, зарегистрированных посетителей.
-
-Какие это действия -- отправка ли сообщений, перевод денег со счёта на счёт или смена паролей -- зависят от сайта, но в любом случае эта атака входит в образовательный минимум веб-разработчика. 
-
-[cut]
-
-## Злая форма
-
-"Классический" сценарий атаки таков:
-
-<ul>
-<li>Вася является залогиненным на сайт, допустим, `mail.com`. У него есть сессия в куках.</li>
-<li>Вася попал на "злую страницу", например хакер пригласил его сделать это письмом или как-то иначе.</li>
-<li>На злой странице находится форма такого вида:
-
-```html
-<!--+ no-beautify -->
-<form action="http://mail.com/send" method="POST">
-  <input type="hidden" name="message" value="Сообщение">
-  ...
-</form>
-```
-</li>
-<li>При заходе на злую страницу JavaScript вызывает `form.submit`, отправляя таким образом форму на `mail.com`.</li>
-<li>Сайт `mail.com` проверяет куки, видит, что посетитель авторизован и обрабатывает форму. В данном форма предполагает посылку сообщения.</li>
-</ul>
-
-Итог атаки -- Вася, зайдя на злую страницу, ненароком отправил письмо от своего имени. Содержимое письма сформировано хакером.
-
-## Защита 
-
-В примере выше атака использовала слабое звено авторизации.
-
-**Куки позволяют сайту `mail.com` проверить, что пришёл именно Вася, но ничего не говорят про данные, которые он отправляет.**
-
-Иначе говоря, куки не гарантируют, что форму создал именно Вася. Они только удостоверяют личность, но не данные.
-
-Типичный способ защиты сайтов -- это "секретный ключ" (`secret`), специальное значение, которое генерируется случайным образом и сохраняется в сессии посетителя. Его знает только сервер, посетителю мы его даже не будем показывать.
-
-Затем на основе ключа генерируется "токен" (`token`). Токен делается так, чтобы с одной стороны он был отличен от ключа, в частности, может быть много токенов для одного ключа, с другой -- чтобы было легко проверить по токену, сгенерирован ли он на основе данного ключа или нет.
-
-Для каждого токена нужно дополнительное случайное значение, которое называют "соль" `salt`. 
-
-Формула вычисления токена:
-```
-token = salt + ":" + MD5(salt + ":" + secret)
-```
-
-Например:
-<ol>
-<li>В сессии хранится `secret="abcdef"`, это значение создаётся один раз.</li>
-<li>Для нового токена сгенерируем `salt`, например пусть `salt="1234"`.</li>
-<li>`token = "1234" + ":" + MD5("1234" + ":" + "abcdef") = "1234:5ad02792a3285252e524ccadeeda3401"`.</li>
-</ol>
-
-Это значение -- с одной стороны, случайное, с другой -- имея такой `token`, мы можем взять его первую часть `1234` в качестве `salt` и, зная `secret`, проверить по формуле, верно ли он вычислен.
-
-Не зная `secret`, невозможно сгенерировать token, который сервер воспримет как правильный.
-
-Далее, токен добавляется в качестве скрытого поля к каждой форме, генерируемой на сервере.
-
-То есть, "честная" форма для отсылки сообщений, созданная на `http://mail.com`, будет выглядеть так:
-
-```html
-<form action="http://mail.com/send" method="POST">
-*!*
-  <input type="hidden" name="csrf" value="1234:5ad02792a3285252e524ccadeeda3401">
-*/!*
-  <textarea name="message">
-    ...
-  </textarea>
-</form>
-```
-
-При её отправке сервер проверит поле `csrf`, удостоверится в правильности токена, и лишь после этого отошлёт сообщение.
-
-"Злая страница" при всём желании не сможет сгенерировать подобную форму, так как не владеет `secret`, и токен будет неверным.
-
-Такой токен также называют "подписью" формы, которая удостоверяет, что форма сгенерирована именно на сервере. 
-
-[smart header="Подпись с полями формы"]
-Эта подпись говорит о том, что автор формы -- сервер, но ничего не гарантирует относительно её содержания.
-
-Есть ситуации, когда мы хотим быть уверены, что некоторые из полей формы посетитель не изменил самовольно. Тогда мы можем включить в MD5 для формулы токена эти поля, например:
-```
-token = salt + ":" + MD5(salt + ":" + secret + ":" + fields.money)
-```
-
-При отправке формы сервер проверит подпись, подставив в неё известный ему `secret` и присланное значение `fields.money`. При несовпадении либо `secret` не тот (хакер), либо `fields.money` изменено.
-[/smart] 
-
-## Токен и AJAX
-
-Теперь перейдём к AJAX-запросам.
-
-Что если посылка сообщений в нашем интерфейсе реализуется через XMLHttpRequest?
-
-Как и в случае с формой, мы должны "подписать" запрос токеном, чтобы гарантировать, что его содержимое прислано на сервер именно интерфейсом сайта, а не "злой страницей".
-
-Здесь возможны варианты, самый простой -- это дополнительная кука.
-
-<ol>
-<li>При авторизации сервер устанавливает куку с именем `CSRF-TOKEN`, и пишет в неё токен.</li>
-<li>Код, осуществляющий XMLHttpRequest, получает куку и ставит заголовок `X-CSRF-TOKEN` с ней:
-
-```js
-var request = new XMLHttpRequest();
-
-var csrfCookie = document.cookie.match(/CSRF-TOKEN=([\w-]+)/);
-if (csrfCookie) {
-  request.setRequestHeader("X-CSRF-TOKEN", csrfCookie[1]);
-}
-```
-</li>
-<li>Сервер проверяет, есть ли заголовок и содержит ли он правильный токен.</li>
-</ol>
-
-Защита действует потому, что прочитать куку может только JavaScript с того же домена. "Злая страница" не сможет "переложить" куку в заголовок.
-
-Если нужно сделать не XMLHttpRequest, а, к примеру, динамически сгенерировать форму из JavaScript -- она также подписывается аналогичным образом, скрытое поле или дополнительный URL-параметр генерируется по куке.
-
-
-## Итого
-
-<ul>
-<li>CSRF-атака -- это когда "злая страница" отправляет форму или запрос на сайт, где посетитель, предположительно, залогинен.
-
-Если сайт проверяет только куки, то он такую форму принимает. А делать это не следует, так как её сгенерировал злой хакер.</li>
-<li>Для защиты от атаки формы, которые генерирует `mail.com`, подписываются специальным токеном. Можно не все формы, а только те, которые осуществляют действия от имени посетителя, то есть могут служить объектом атаки.</li>
-<li>Для подписи XMLHttpRequest токен дополнительно записывается в куку. Тогда JavaScript с домена `mail.com` сможет прочитать её и добавить в заголовок, а сервер -- проверить, что заголовок есть и содержит корректный токен.</li>
-<li>Динамически сгенерированные формы подписываются аналогично: токен из куки добавляется как URL-параметр или дополнительное поле.</li>
-</ul>
-
-
diff --git a/4-ajax/14-fetch/article.md b/4-ajax/14-fetch/article.md
deleted file mode 100644
index 69e95186..00000000
--- a/4-ajax/14-fetch/article.md
+++ /dev/null
@@ -1,80 +0,0 @@
-
-# Метод fetch: замена XMLHttpRequest
-
-Метод [fetch](https://fetch.spec.whatwg.org/) -- это `XMLHttpRequest` нового поколения. Он предоставляет улучшенный интерфейс для осуществления запросов к серверу: как по части возможностей и контроля над происходящим, так и по синтаксису, так как построен на [промисах](/promise).
-
-Поддержка в браузерах пока не очень распространена, но есть [полифилл](https://github.com/github/fetch) и не один. 
-
-## Синтаксис
-
-Синтаксис метода `fetch`:
-```js
-let promise = fetch(url[, options]);
-```
-
-<ul>
-<li>`url` -- URL, на который сделать запрос,</li>
-<li>`options` -- необязательный объект с настройками запроса.</li>
-</ul>
-
-Свойства `options`:
-<ul>
-<li>`method` -- метод запроса,</li>
-<li>`headers` -- заголовки запроса (объект),</li>
-<li>`body` -- тело запроса: `FormData`, `Blob`, строка и т.п.</li>
-<li>`mode` -- одно из: "same-origin", "no-cors", "cors", указывает режим в каком режиме кросс-доменности предполагается делать запрос.</li>
-<li>`credentials` -- одно из: "omit", "same-origin", "include", указывает, пересылать ли куки и заголовки авторизации вместе с запросом.</li>
-<li>`cache` -- одно из "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached", указывает, как кешировать запрос.</li>
-<li>`redirect` -- можно поставить "follow" для обычного поведения при коде 30x (следовать редиректу) или "error" для интерпретации редиректа как ошибки.</li>
-</ul>
-
-Как видно, всевозможных настроек здесь больше, чем в `XMLHttpRequest`. Вместе с тем, надо понимать, что если мы используем полифилл, то ничего более гибкого, чем оригинальный `XMLHttpRequest` мы из этого не получим.
-
-Разве что, `fetch`, возможно, будет удобнее пользоваться. 
-
-## Использование
-
-При вызове `fetch` возвращает промис, который, когда получен ответ, выполняет коллбэки с объектом [Response](https://fetch.spec.whatwg.org/#response) или с ошибкой, если запрос не удался.
-
-Пример использования:
-
-```js
-//+ run
-'use strict';
-
-fetch('/article/fetch/user.json')
-  .then(function(response) {
-    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
-    alert(response.status); // 200
-
-    return response.json();
-   })
-  .then(function(user) {
-    alert(user.name); // iliakan
-  })
-  .catch( alert );
-```
-
-Объект `response` кроме доступа к заголовкам `headers`, статусу `status` и некоторым другим полям ответа, даёт возможность прочитать его тело, в желаемом формате.
-
-Варианты описаны в спецификации [Body](https://fetch.spec.whatwg.org/#body), они включают в себя:
-
-<ul>
-<li>`response.arrayBuffer()`</li>
-<li>`response.blob()`</li>
-<li>`response.formData()`</li>
-<li>`response.json()`</li>
-<li>`response.text()`</li>
-</ul>
-
-Соответствующий вызов возвращает промис, который, когда ответ будет получен, вызовет коллбэк с результатом.
-
-В примере выше мы можем в первом `.then` проанализировать ответ и, если он нас устроит -- вернуть промис с нужным форматом. Следующий `.then` уже будет содержать полный ответ сервера.
-
-Больше примеров вы можете найти в описании [полифилла для fetch](https://github.com/github/fetch).
-
-## Итого
-
-Метод `fetch` -- уже сейчас удобная альтернатива `XMLHttpRequest` для тех, кто не хочет ждать и любит промисы.
-
-Детальное описание этого метода есть в стандарте [Fetch](https://fetch.spec.whatwg.org/), а простейшие примеры запросов -- в описании к [полифиллу](https://github.com/github/fetch). 
\ No newline at end of file
diff --git a/4-ajax/14-fetch/user.js b/4-ajax/14-fetch/user.js
deleted file mode 100644
index 32f89971..00000000
--- a/4-ajax/14-fetch/user.js
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "iliakan",
-  "isAdmin": true
-}
diff --git a/4-ajax/15-ajax-summary/article.md b/4-ajax/15-ajax-summary/article.md
deleted file mode 100644
index 61868ba5..00000000
--- a/4-ajax/15-ajax-summary/article.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# Таблица транспортов и их возможностей 
-
-Здесь мы подведём итог раздела, сравним транспорты и их возможности.
-[cut]
-
-## Способы опроса сервера
-
-Основные способы опроса сервера:
-<ol>
-<li>**Частые опросы** -- регулярно к серверу отправляется запрос за данными. Сервер тут же отвечает на него, возвращая данные, если они есть. Если нет -- получается, что запрос был зря.
-
-Этот способ очень лёгок в реализации, но приводит к большому количеству лишних запросов, поэтому мы его далее не рассматриваем.
-</li>
-<li>**Длинные опросы** -- к серверу отправляется запрос за данными. Сервер не отвечает на него, пока данные не появятся. Когда данные появились -- ответ с ними отправляется в браузер, и тот тут же делает новый запрос.
-
-Способ хорош, пока сообщений не слишком много. В идеальном случае соединение почти всё время висит открытым, лишь иногда сервер отвечает на него, доставляя данные в браузер.
-
-Также удобен в реализации, но даёт большое количество висящий соединений на сервере. Не все сервера хорошо поддерживают это. Например, `Apache` будет есть очень много памяти.
-</li>
-<li>**Потоковое соединение** -- открыто соединение к серверу, и через него непрерывно поступают данные.</li>
-</ol>
-
-## Таблица транспортов
-Основные характеристики всех транспортов, которые мы обсуждали в деталях, собраны в этой таблице.
-
-Они были детально рассмотрены в предыдущих главах раздела.
-
-<table>
-<thead>
-<tr>
-<th></th>
-<th>`XMLHttpRequest`</th>
-<th>`IFRAME`</th>
-<th>`SCRIPT`</th>
-<th>`EventSource`</th>
-<th>`WebSocket`</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<th>Кросс-доменность</th>
-<td>да, кроме IE9-<a class="link-ref" href="#x1">x1</a></td>
-<td>да<a class="link-ref" href="#i1">i1</a></td>
-<td>да</td>
-<td>да</td>
-<td>да</td>
-</tr>
-<tr>
-<th>Методы</th>
-<td>Любые</td>
-<td>GET / POST</td>
-<td>GET</td>
-<td>GET</td>
-<td>Свой протокол</td>
-</tr>
-<tr>
-<th>COMET</th>
-<td>Длинные опросы<a class="link-ref" href="#x2">x2</a></td>
-<td>Непрерывное соединение</td>
-<td>Длинные опросы</td>
-<td>Непрерывное соединение</td>
-<td>Непрерывное соединение в обе стороны</td>
-</tr>
-<tr>
-<th>Поддержка</th>
-<td>Все браузеры, ограничения в IE9-<a class="link-ref" href="#x3">x3</a></td>
-<td>Все браузеры</td>
-<td>Все браузеры</td>
-<td>Кроме IE</td>
-<td>IE 10, FF11, Chrome 16, Safari 6, Opera 12.5<a class="link-ref" href="#w1">w1</a></td>
-</tr>
-</tbody>
-</table>
-
-Пояснения:
-
-<dl>
-<dt>`XMLHttpRequest`</dt>
-<dd>
-<ol>
-<li id="x1">В IE8-9 поддерживаются кросс-доменные GET/POST запросы с ограничениями через `XDomainRequest`.</li>
-<li id="x2">Можно говорить об ограниченной поддержке непрерывного соединения через `onprogress`, но это событие вызывается не чаще чем в `50ms` и не гарантирует получение полного пакета данных. Например, сервер может записать "Привет!", а событие вызовется один раз, когда браузер получил "При". Поэтому наладить обмен пакетами сообщений с его помощью затруднительно.
-</li>
-<li id="x3">Многие возможности современного стандарта включены в IE лишь с версии 10.</li>
-</ol>
-</dd>
-<dt>`IFRAME`</dt>
-<dd>
-<ol>
-<li id="i1">Во всех современных браузерах и IE8 кросс-доменность обеспечивает `postMessage`. В более старых браузерах возможны решения через `window.name` и хэш.</li>
-</ol>
-</dd>
-<dt>`WebSocket`</dt>
-<dd>
-<ol>
-<li id="w1">Имеется в виду поддержка окончательной редакции протокола [RFC 6455](http://tools.ietf.org/html/rfc6455), описанной в разделе [](/websockets). Более старые браузеры могут поддерживать черновики протокола. IE9- не поддерживает `WebSocket`.</li>
-</ol>
-</dd>
-</dl>
-
-Существует также нестандартный транспорт, не рассмотренный здесь:
-<ul>
-<li>XMLHttpRequest с флагом `multipart`, только для Firefox. 
-
-При указании свойства `xhr.multipart = true` и специального multipart-формата ответа сервера, Firefox инициирует `onload` при получении очередной части ответа. Ответ может состоять из любого количества частей, досылаемых по инициативе сервера. Мы не рассматривали его, так как Firefox поддерживает другие, более кросс-браузерные и стандартные транспорты.
-</li>
-</ul>
-
-В современных браузерах поддерживается новый метод [fetch](/fetch), в качестве замены XMLHttpRequest ([полифилл](https://github.com/github/fetch)).
diff --git a/4-ajax/2-ajax-nodejs/article.md b/4-ajax/2-ajax-nodejs/article.md
deleted file mode 100644
index d96a194a..00000000
--- a/4-ajax/2-ajax-nodejs/article.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# Node.JS для решения задач
-
-В этом разделе предлагаются задачи по теме AJAX. 
-
-Конечно же, они требуют взаимодействия с сервером. Мы будем использовать серверную часть, написанную на JavaScript, на <a href="http://nodejs.org">Node.JS</a>.
-
-[cut]
-
-Если вы не использовали Node.JS ранее -- не беспокойтесь. Здесь нашей целью является преимущественно клиентская часть, поэтому прямо сейчас изучать Node.JS не обязательно. Серверные скрипты уже готовы. Нужно только поставить Node.JS и модули, чтобы их запускать.
-
-
-## Установка
-
-Для настройки окружения будет достаточно сделать два шага:
-
-<ol>
-<li>Сначала установите сам сервер Node.JS.
-
-Если у вас Unix-система -- рекомендуется собрать последнюю версию из исходников, а также NPM. Вы справитесь.
-
-Если Windows -- посетите сайт <a href="http://nodejs.org">http://nodejs.org</a> или скачайте установщик (32 или 64-битный) с расширением `.msi` из <a href="http://nodejs.org/dist/latest/">http://nodejs.org/dist/latest/</a>. 
-</li>
-<li>Выберите директорию, в которой будете решать задачи. Запустите в ней:
-
-```
-npm install node-static
-```
-
-Это установит в текущую директорию модуль [node-static](https://github.com/cloudhead/node-static), который станет автоматически доступным для скриптов из поддиректорий.
-
-**Если у вас Windows и команда не сработала, то скорее всего дело в том, что "не подхватились" новые пути. Перезапустите ваш файловый менеджер или консоль.**
-</li>
-</ol>
-
-## Проверка
-
-Проверьте инсталяцию.
-
-Для этого:
-<ol>
-<li>Создайте какую-нибудь поддиректорию и в ней файл `server.js` с таким содержимым:
-
-```js
-var http = require('http');
-var static = require('node-static');
-var file = new static.Server('.');
-
-http.createServer(function(req, res) {
-  file.serve(req, res);
-}).listen(8080);
-
-console.log('Server running on port 8080');
-```
-
-</li>
-<li>Запустите его: `node server.js`.
-
-Должно вывести:
-
-```
-Server running on port 8080
-```
-
-[warn header="Нельзя запустить больше одного сервера одновременно!"]
-При попытке запуска двух серверов (например, в разных консолях) -- будет конфликт портов и ошибка.
-[/warn]
-
-</li>
-<li>Откройте в браузере <a href="http://127.0.0.1:8080/server.js">http://127.0.0.1:8080/server.js</a>.
-
-Должно вывести код файла `server.js`.</li>
-</ol>
-
-Если всё работает -- отлично, теперь вы готовы решать задачи.
-
-## Примеры
-
-В примерах, за редким исключением, для краткости будет приводиться не полный скрипт на Node.JS, а только код обработки запроса.
-
-Например, вместо:
-
-```js
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-
-function accept(req, res) {
-
-  res.writeHead(200, {
-    'Content-Type': 'text/plain',
-    'Cache-Control': 'no-cache'
-  });
-
-  res.end("OK");
-}
-
-http.createServer(accept).listen(8080);
-```
-
-...Будет только функция `accept`, или даже только её содержимое:
-
-```js
-res.writeHead(200, {
-  'Content-Type': 'text/plain',
-  'Cache-Control': 'no-cache'
-});
-```
-
-## Основные методы
-
-В функции `accept` используются два объекта:
-<ul>
-<li>`req` -- объект запроса ("request"), из него читаем данные.</li>
-<li>`res` -- объект ответа ("response"), в него пишем данные.
-<ul>
-<li>вызов `res.writeHead(HTTP-код, [строка статуса], {заголовки})` пишет заголовки.</li>
-<li>вызов `res.write(txt)` пишет текст в ответ.</li>
-<li>вызов `res.end(txt)` -- завершает запрос ответом.</li>
-</ul>
-</li>
-</ul>
-
-## Демо
-
-Кроме просмотра кода, можно будет попробовать и скачать различные демки. 
-
-Вот пример демо, можете попробовать нажать на кнопку -- она работает. 
-
-[iframe src="example" border="1" height=80 zip samedomain]
-
-Если хотите посмотреть пример поближе и поиграть с ним -- скачайте полный код, он будет работать и на вашем Node.JS.
-
-## Больше о Node.JS
-
-Больше о сервере Node.JS можно узнать в [скринкасте по Node.JS](/nodejs-screencast).
diff --git a/4-ajax/2-ajax-nodejs/example/index.html b/4-ajax/2-ajax-nodejs/example/index.html
deleted file mode 100644
index 4651a5df..00000000
--- a/4-ajax/2-ajax-nodejs/example/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="vote()" id="button">Голосовать!</button>
-
-  <script>
-    function vote() {
-      button.innerHTML = ' ... ';
-
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', 'vote', true);
-
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState != 4) return;
-
-        if (xhr.status != 200) {
-          // обработать ошибку
-          alert('Ошибка ' + xhr.status + ': ' + xhr.statusText);
-          return;
-        }
-
-        // обработать результат
-        button.innerHTML = xhr.responseText;
-      }
-
-      xhr.send(null);
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/2-ajax-nodejs/example/server.js b/4-ajax/2-ajax-nodejs/example/server.js
deleted file mode 100644
index a168b98c..00000000
--- a/4-ajax/2-ajax-nodejs/example/server.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.');
-
-
-function accept(req, res) {
-
-  // если URL запроса /vote, то...
-  if (req.url == '/vote') {
-    // через 1.5 секунды ответить сообщением
-    setTimeout(function() {
-      res.end('Ваш голос принят: ' + new Date());
-    }, 1500);
-  } else {
-    // иначе считаем это запросом к обычному файлу и выводим его
-    file.serve(req, res); // (если он есть)
-  }
-
-}
-
-
-// ------ этот код запускает веб-сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/index.html b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/index.html
deleted file mode 100644
index 1c1e0abc..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
-
-  <script>
-    function loadPhones() {
-
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', 'phones.json', true);
-
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState != 4) return;
-
-        button.innerHTML = 'Готово!';
-
-        if (xhr.status != 200) {
-          // обработать ошибку
-          alert(xhr.status + ': ' + xhr.statusText);
-        } else {
-          // вывести результат
-          alert(xhr.responseText);
-        }
-
-      }
-
-      xhr.send();
-
-      button.innerHTML = 'Загружаю...';
-      button.disabled = true;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/phones.json b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/phones.json
deleted file mode 100644
index 472b2b16..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/phones.json
+++ /dev/null
@@ -1,155 +0,0 @@
-[
-    {
-        "age": 0, 
-        "id": "motorola-xoom-with-wi-fi", 
-        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "name": "Motorola XOOM\u2122 with Wi-Fi", 
-        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 1, 
-        "id": "motorola-xoom", 
-        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
-        "name": "MOTOROLA XOOM\u2122", 
-        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 2, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-atrix-4g", 
-        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
-        "name": "MOTOROLA ATRIX\u2122 4G", 
-        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
-    }, 
-    {
-        "age": 3, 
-        "id": "dell-streak-7", 
-        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
-        "name": "Dell Streak 7", 
-        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
-    }, 
-    {
-        "age": 4, 
-        "carrier": "Cellular South", 
-        "id": "samsung-gem", 
-        "imageUrl": "img/phones/samsung-gem.0.jpg", 
-        "name": "Samsung Gem\u2122", 
-        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
-    }, 
-    {
-        "age": 5, 
-        "carrier": "Dell", 
-        "id": "dell-venue", 
-        "imageUrl": "img/phones/dell-venue.0.jpg", 
-        "name": "Dell Venue", 
-        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
-    }, 
-    {
-        "age": 6, 
-        "carrier": "Best Buy", 
-        "id": "nexus-s", 
-        "imageUrl": "img/phones/nexus-s.0.jpg", 
-        "name": "Nexus S", 
-        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
-    }, 
-    {
-        "age": 7, 
-        "carrier": "Cellular South", 
-        "id": "lg-axis", 
-        "imageUrl": "img/phones/lg-axis.0.jpg", 
-        "name": "LG Axis", 
-        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
-    }, 
-    {
-        "age": 8, 
-        "id": "samsung-galaxy-tab", 
-        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
-        "name": "Samsung Galaxy Tab\u2122", 
-        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
-    }, 
-    {
-        "age": 9, 
-        "carrier": "Cellular South", 
-        "id": "samsung-showcase-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
-    }, 
-    {
-        "age": 10, 
-        "carrier": "Verizon", 
-        "id": "droid-2-global-by-motorola", 
-        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
-        "name": "DROID\u2122 2 Global by Motorola", 
-        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
-    }, 
-    {
-        "age": 11, 
-        "carrier": "Verizon", 
-        "id": "droid-pro-by-motorola", 
-        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
-        "name": "DROID\u2122 Pro by Motorola", 
-        "snippet": "The next generation of DOES."
-    }, 
-    {
-        "age": 12, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-bravo-with-motoblur", 
-        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
-        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
-        "snippet": "An experience to cheer about."
-    }, 
-    {
-        "age": 13, 
-        "carrier": "T-Mobile", 
-        "id": "motorola-defy-with-motoblur", 
-        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
-        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Are you ready for everything life throws your way?"
-    }, 
-    {
-        "age": 14, 
-        "carrier": "T-Mobile", 
-        "id": "t-mobile-mytouch-4g", 
-        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
-        "name": "T-Mobile myTouch 4G", 
-        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
-    }, 
-    {
-        "age": 15, 
-        "carrier": "US Cellular", 
-        "id": "samsung-mesmerize-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
-    }, 
-    {
-        "age": 16, 
-        "carrier": "Sprint", 
-        "id": "sanyo-zio", 
-        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
-        "name": "SANYO ZIO", 
-        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
-    }, 
-    {
-        "age": 17, 
-        "id": "samsung-transform", 
-        "imageUrl": "img/phones/samsung-transform.0.jpg", 
-        "name": "Samsung Transform\u2122", 
-        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
-    }, 
-    {
-        "age": 18, 
-        "id": "t-mobile-g2", 
-        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
-        "name": "T-Mobile G2", 
-        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
-    }, 
-    {
-        "age": 19, 
-        "id": "motorola-charm-with-motoblur", 
-        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
-        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
-    }
-]
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/server.js b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/server.js
deleted file mode 100644
index d09318a0..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/server.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/phones.json') {
-    // искусственная задержка для наглядности
-    setTimeout(function() {
-      file.serve(req, res);
-    }, 2000);
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/index.html b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/index.html
deleted file mode 100644
index ffcb9dfd..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
-
-  <ul id="list"></ul>
-
-  <script>
-    function loadPhones() {
-
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', 'phones.json', true);
-
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState != 4) return;
-
-        button.parentNode.removeChild(button);
-
-        if (xhr.status != 200) {
-          // обработать ошибку
-          alert(xhr.status + ': ' + xhr.statusText);
-        } else {
-          try {
-            var phones = JSON.parse(xhr.responseText);
-          } catch (e) {
-            alert("Некорректный ответ " + e.message);
-          }
-          showPhones(phones);
-        }
-
-      }
-
-      xhr.send();
-
-      button.innerHTML = 'Загружаю...';
-      button.disabled = true;
-    }
-
-    function showPhones(phones) {
-
-      phones.forEach(function(phone) {
-        var li = list.appendChild(document.createElement('li'));
-        li.innerHTML = phone.name;
-      });
-
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/phones.json b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/phones.json
deleted file mode 100644
index 472b2b16..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/phones.json
+++ /dev/null
@@ -1,155 +0,0 @@
-[
-    {
-        "age": 0, 
-        "id": "motorola-xoom-with-wi-fi", 
-        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "name": "Motorola XOOM\u2122 with Wi-Fi", 
-        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 1, 
-        "id": "motorola-xoom", 
-        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
-        "name": "MOTOROLA XOOM\u2122", 
-        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 2, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-atrix-4g", 
-        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
-        "name": "MOTOROLA ATRIX\u2122 4G", 
-        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
-    }, 
-    {
-        "age": 3, 
-        "id": "dell-streak-7", 
-        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
-        "name": "Dell Streak 7", 
-        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
-    }, 
-    {
-        "age": 4, 
-        "carrier": "Cellular South", 
-        "id": "samsung-gem", 
-        "imageUrl": "img/phones/samsung-gem.0.jpg", 
-        "name": "Samsung Gem\u2122", 
-        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
-    }, 
-    {
-        "age": 5, 
-        "carrier": "Dell", 
-        "id": "dell-venue", 
-        "imageUrl": "img/phones/dell-venue.0.jpg", 
-        "name": "Dell Venue", 
-        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
-    }, 
-    {
-        "age": 6, 
-        "carrier": "Best Buy", 
-        "id": "nexus-s", 
-        "imageUrl": "img/phones/nexus-s.0.jpg", 
-        "name": "Nexus S", 
-        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
-    }, 
-    {
-        "age": 7, 
-        "carrier": "Cellular South", 
-        "id": "lg-axis", 
-        "imageUrl": "img/phones/lg-axis.0.jpg", 
-        "name": "LG Axis", 
-        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
-    }, 
-    {
-        "age": 8, 
-        "id": "samsung-galaxy-tab", 
-        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
-        "name": "Samsung Galaxy Tab\u2122", 
-        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
-    }, 
-    {
-        "age": 9, 
-        "carrier": "Cellular South", 
-        "id": "samsung-showcase-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
-    }, 
-    {
-        "age": 10, 
-        "carrier": "Verizon", 
-        "id": "droid-2-global-by-motorola", 
-        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
-        "name": "DROID\u2122 2 Global by Motorola", 
-        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
-    }, 
-    {
-        "age": 11, 
-        "carrier": "Verizon", 
-        "id": "droid-pro-by-motorola", 
-        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
-        "name": "DROID\u2122 Pro by Motorola", 
-        "snippet": "The next generation of DOES."
-    }, 
-    {
-        "age": 12, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-bravo-with-motoblur", 
-        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
-        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
-        "snippet": "An experience to cheer about."
-    }, 
-    {
-        "age": 13, 
-        "carrier": "T-Mobile", 
-        "id": "motorola-defy-with-motoblur", 
-        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
-        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Are you ready for everything life throws your way?"
-    }, 
-    {
-        "age": 14, 
-        "carrier": "T-Mobile", 
-        "id": "t-mobile-mytouch-4g", 
-        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
-        "name": "T-Mobile myTouch 4G", 
-        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
-    }, 
-    {
-        "age": 15, 
-        "carrier": "US Cellular", 
-        "id": "samsung-mesmerize-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
-    }, 
-    {
-        "age": 16, 
-        "carrier": "Sprint", 
-        "id": "sanyo-zio", 
-        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
-        "name": "SANYO ZIO", 
-        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
-    }, 
-    {
-        "age": 17, 
-        "id": "samsung-transform", 
-        "imageUrl": "img/phones/samsung-transform.0.jpg", 
-        "name": "Samsung Transform\u2122", 
-        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
-    }, 
-    {
-        "age": 18, 
-        "id": "t-mobile-g2", 
-        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
-        "name": "T-Mobile G2", 
-        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
-    }, 
-    {
-        "age": 19, 
-        "id": "motorola-charm-with-motoblur", 
-        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
-        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
-    }
-]
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/server.js b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/server.js
deleted file mode 100644
index d09318a0..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/server.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/phones.json') {
-    // искусственная задержка для наглядности
-    setTimeout(function() {
-      file.serve(req, res);
-    }, 2000);
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md
deleted file mode 100644
index 83f8e9c6..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md
+++ /dev/null
@@ -1,54 +0,0 @@
-Код для загрузки и вывода телефонов:
-
-```js
-function loadPhones() {
-
-  var xhr = new XMLHttpRequest();
-
-  xhr.open('GET', 'phones.json', true);
-
-  xhr.send();
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState != 4) return;
-
-    button.parentNode.removeChild(button);
-
-    if (xhr.status != 200) {
-      // обработать ошибку
-      alert( xhr.status + ': ' + xhr.statusText );
-    } else {
-*!*
-      try {
-        var phones = JSON.parse(xhr.responseText);
-      } catch (e) {
-        alert( "Некорректный ответ " + e.message );
-      }
-      showPhones(phones);
-*/!*
-    }
-
-  }
-
-  button.innerHTML = 'Загружаю...';
-  button.disabled = true;
-}
-
-*!*
-function showPhones(phones) {
-
-    phones.forEach(function(phone) {
-      var li = list.appendChild(document.createElement('li'));
-      li.innerHTML = phone.name;
-    });
-
-  }
-*/!*
-```
-
-Полное решение с возможнотью скачать:
-[codetabs src="phones-list" height="100"]
-
-Обратите внимание -- код обрабатывает возможную ошибку при чтении JSON при помощи `try..catch`. 
-
-Технически, это такая же ошибка, как и `status != 200`. Ведь сервер обязан присылать корректный JSON. Поэтому если уж обрабатываем ошибки запроса, то и её тоже.
diff --git a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md b/4-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md
deleted file mode 100644
index 21e354a5..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Выведите телефоны
-
-[importance 5]
-
-Создайте код, который загрузит файл `phones.json` из текущей директории и выведет все названия телефонов из него в виде списка.
-
-Демо результата:
-[iframe src="phones-list" height="100"]
-
-Исходный код просто выводит содержимое файла (скачайте к себе):
-[codetabs src="phones-async" height="100"]
-
diff --git a/4-ajax/3-ajax-xmlhttprequest/article.md b/4-ajax/3-ajax-xmlhttprequest/article.md
deleted file mode 100644
index f79303d5..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/article.md
+++ /dev/null
@@ -1,414 +0,0 @@
-# Основы XMLHttpRequest
-
-Объект `XMLHttpRequest` (или, как его кратко называют, "XHR") дает возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.
-
-Несмотря на слово "XML" в названии, `XMLHttpRequest` может работать с любыми данными, а не только с XML.
-
-Использовать его очень просто.
-
-[cut]
-
-## Пример использования
-
-Как правило, `XMLHttpRequest` используют для загрузки данных. 
-
-Для начала посмотрим на пример использования, который загружает файл `phones.json` из текущей директории и выдаёт его содержимое:
-
-```js
-*!*
-// 1. Создаём новый объект XMLHttpRequest
-*/!*
-var xhr = new XMLHttpRequest();
-
-*!*
-// 2. Конфигурируем его: GET-запрос на URL 'phones.json'
-xhr.open('GET', 'phones.json', false);
-*/!*
-
-*!*
-// 3. Отсылаем запрос
-*/!*
-xhr.send();
-
-*!*
-// 4. Если код ответа сервера не 200, то это ошибка
-*/!*
-if (xhr.status != 200) {
-  // обработать ошибку
-  alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found 
-} else {
-  // вывести результат
-  alert( xhr.responseText ); // responseText -- текст ответа.
-}
-```
-
-В действии:
-
-[codetabs src="phones"]
-
-Далее мы более подробно разберём основные методы и свойства объекта `XMLHttpRequest`, в том числе те, которые были использованы в этом коде.
-
-## Настроить: open 
-
-Синтаксис:
-```js
-xhr.open(method, URL, async, user, password)
-```
-
-Этот метод -- как правило, вызывается первым после создания объекта `XMLHttpRequest`.
-
-Задаёт основные параметры запроса:
-<ul>
-<li>`method` -- HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.</li>
-<li>`URL` -- адрес запроса. Можно использовать не только http/https, но и другие протоколы, например `ftp://` и `file://`.
-
-При этом есть ограничения безопасности, называемые "Same Origin Policy": запрос со страницы можно отправлять только на тот же `протокол://домен:порт`, с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.
-</li>
-<li>`async` -- если установлено в `false`, то запрос производится синхронно, если `true` -- асинхронно.
-
-"Синхронный запрос" означает, что после вызова `xhr.send()` и до ответа сервера главный поток будет "заморожен": посетитель не сможет взаимодействовать со страницей -- прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.
-
-"Асинхронный запрос" означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.
-</li>
-<li>`user`, `password` -- логин и пароль для HTTP-авторизации, если нужны.</li>
-</ul>
-
-[warn header="Вызов `open` не открывает соединение"]
-Заметим, что вызов `open`, в противоположность своему названию (`open` - англ. "открыть") не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом `send`.
-[/warn]
-## Отослать данные: send
-
-Синтаксис:
-```js
-xhr.send([body])
-```
-
-Именно этод метод открывает соединение и отправляет запрос на сервер.
-
-В `body` находится *тело* запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST -- основные данные как раз передаются через `body`.
-
-## Отмена: abort
-
-Вызов `xhr.abort()` прерывает выполнение запроса. 
-
-## Ответ: status, statusText, responseText 
-
-Основные свойства, содержащие ответ сервера:
-
-<dl>
-<dt>`status`</dt>
-<dd>HTTP-код ответа: `200`, `404`, `403` и так далее. Может быть также равен `0`, если сервер не ответил или при запросе на другой домен.</dd>
-<dt>`statusText`</dt>
-<dd>Текстовое описание статуса от сервера: `OK` `Not Found`, `Forbidden` и так далее.</dd>
-<dt>`responseText`</dt>
-<dd>Текст ответа сервера.</dd>
-</dl>
-
-Есть и ещё одно свойство, которое используется гораздо реже:
-
-<dl>
-<dt>`responseXML`</dt>
-<dd>Если сервер вернул XML, снабдив его правильным заголовком `Content-type: text/xml`, то браузер создаст из него XML-документ. По нему можно будет делать запросы `xhr.responseXml.querySelector("...")` и другие.
-
-Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом `JSON.parse(xhr.responseText)`. 
-</dd>
-</dl>
-
-## Синхронные и асинхронные запросы
-
-Если в методе `open` установить параметр `async` равным `false` или просто забыть его указать, то запрос будет синхронным.
-
-Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён -- в общем, в точности те же ограничения как `alert`.
-
-```js
-// Синхронный запрос
-xhr.open('GET', 'phones.json', *!*false*/!*);
-
-// Отсылаем его
-xhr.send();
-*!*
-// ...весь JavaScript "подвиснет", пока запрос не завершится 
-*/!*
-```
-
-Если синхронный вызов занял слишком много времени, то браузер предложит закрыть "зависшую" страницу.
-
-Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.
-
-Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные -- почти всегда.
-
-Для того, чтобы запрос стал асинхронным, укажем параметр `async` равным `true`.
-
-Изменённый JS-код:
-
-```js
-var xhr = new XMLHttpRequest();
-
-xhr.open('GET', 'phones.json', *!*true*/!*);
-
-xhr.send(); // (1)
-
-*!*
-xhr.onreadystatechange = function() { // (3)
-  if (xhr.readyState != 4) return;
-*/!*
-
-  button.innerHTML = 'Готово!';
-
-  if (xhr.status != 200) {
-    alert(xhr.status + ': ' + xhr.statusText);
-  } else {
-    alert(xhr.responseText);
-  }
-
-}
-
-button.innerHTML = 'Загружаю...'; // (2)
-button.disabled = true;
-```
-
-Если в `open` указан третий аргумент `true`, то запрос выполняется асинхронно. Это означает, что после вызова `xhr.send()` в строке `(1)` код не "зависает", а преспокойно продолжает выполняться, выполняется строка `(2)`, а результат приходит через событие `(3)`, мы изучем его чуть позже.
-
-Полный пример в действии:
-
-[codetabs src="phones-async"]
-
-# Событие readystatechange
-
-Событие `readystatechange` происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть "текущее состояние запроса" в свойстве `xhr.readyState`.
-
-В примере выше мы использовали только состояние `4` (запрос завершён), но есть и другие.
-
-Все состояния, по [спецификации](http://www.w3.org/TR/XMLHttpRequest/#states):
-
-```js
-const unsigned short UNSENT = 0; // начальное состояние
-const unsigned short OPENED = 1; // вызван open
-const unsigned short HEADERS_RECEIVED = 2; // получены заголовки
-const unsigned short LOADING = 3; // загружается тело (получен очередной пакет данных)
-const unsigned short DONE = 4; // запрос завершён
-```
-
-Запрос проходит их в порядке `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4`, состояние `3` повторяется при каждом получении очередного пакета данных по сети.
-
-Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос `digits`, пересылая по строке из 1000 цифр раз в секунду.
-
-[codetabs src="readystate"]
-
-[warn header="Точка разрыва пакетов не гарантирована"]
-При состоянии `readyState=3` (получен очередной пакет) мы можем посмотреть текущие данные в `responseText` и, казалось бы, могли бы работать с этими данными как с "ответом на текущий момент".
-
-Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте.
-
-Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый -- и разрыв может возникнуть *между ними*. 
-
-Получится, что при очередном `readyState` в конце `responseText` будет байт-полсимвола, то есть он не будет корректной строкой -- частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы.
-[/warn]
-
-
-## HTTP-заголовки
-
-`XMLHttpRequest` умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.
-
-Для работы с HTTP-заголовками есть 3 метода:
-
-<dl>
-<dt>`setRequestHeader(name, value)`</dt>
-<dd>Устанавливает заголовок `name` запроса со значением `value`. 
-
-Например:
-
-```js
-xhr.setRequestHeader('Content-Type', 'application/json');
-```
-
-[warn header="Ограничения на заголовки"]
-Нельзя установить заголовки, которые контролирует браузер, например `Referer` или `Host` и ряд других (полный список [тут](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method)). 
-
-Это ограничение существует в целях безопасности и для контроля корректности запроса. 
-[/warn]
-
-[warn header="Поставленный заголовок нельзя снять"]
-Особенностью `XMLHttpRequest` является то, что отменить `setRequestHeader` невозможно.
-
-Повторные вызовы лишь добавляют информацию к заголовку, например:
-
-```js
-xhr.setRequestHeader('X-Auth', '123');
-xhr.setRequestHeader('X-Auth', '456');
-
-// в результате будет заголовок:
-// X-Auth: 123, 456
-```
-[/warn]
-
-</dd>
-<dt>`getResponseHeader(name)`</dt>
-<dd>Возвращает значение заголовка ответа `name`, кроме `Set-Cookie` и `Set-Cookie2`.
-
-Например:
-
-```js
-xhr.getResponseHeader('Content-Type')
-```
-
-</dd>
-<dt>`getAllResponseHeaders()`</dt>
-<dd>Возвращает все заголовки ответа, кроме `Set-Cookie` и `Set-Cookie2`.
-
-Заголовки возвращаются в виде единой строки, например:
-
-```
-Cache-Control: max-age=31536000
-Content-Length: 4260
-Content-Type: image/png
-Date: Sat, 08 Sep 2012 16:53:16 GMT
-```
-
-Между заголовками стоит перевод строки в два символа `"\r\n"` (не зависит от ОС), значение заголовка отделено двоеточием с пробелом `": "`. Этот формат задан стандартом.
-
-Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.
-</dd>
-</dl>
-
-
-## Таймаут
-
-Максимальную продолжительность асинхронного запроса можно задать свойством `timeout`:
-
-```js
-xhr.timeout = 30000; // 30 секунд (в миллисекундах)
-```
-
-При превышении этого времени запрос будет оборван и сгенерировано событие `ontimeout`:
-
-```js
-xhr.ontimeout = function() {
-  alert( 'Извините, запрос превысил максимальное время' );
-}
-```
-
-## Полный список событий
-
-Современная [спецификация](http://www.w3.org/TR/XMLHttpRequest/#events) предусматривает следующие события по ходу обработки запроса:
-
-<ul>
-<li>`loadstart` -- запрос начат.</li>
-<li>`progress` -- браузер получил очередной пакет данных, можно прочитать текущие полученные данные в `responseText`.</li>
-<li>`abort` -- запрос был отменён вызовом `xhr.abort()`.</li>
-<li>`error` -- произошла ошибка.</li>
-<li>`load` -- запрос был успешно (без ошибок) завершён.</li>
-<li>`timeout` -- запрос был прекращён по таймауту.</li>
-<li>`loadend` -- запрос был завершён (успешно или неуспешно)</li>
-</ul>
-
-Используя эти события можно более удобно отслеживать загрузку (`onload`) и ошибку (`onerror`), а также количество загруженных данных (`onprogress`).
-
-Ранее мы видели ещё одно событие -- `readystatechange`. Оно появилось гораздо раньше, ещё до появления текущего стандарта. 
-
-В современных браузерах от него можно отказаться в пользу других, необходимо лишь, как мы увидим далее,  учесть особенности IE8-9.
-
-## IE8,9: XDomainRequest
-
-В IE8 и IE9 поддержка `XMLHttpRequest` ограничена:
-
-<ul>
-<li>Не поддерживаются события, кроме `onreadystatechange`.</li>
-<li>Некорректно поддерживается состояние `readyState = 3`: браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу `responseText` до того, как он будет до конца получен.</li>
-</ul>
-
-Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект `XDomainRequest`, который реализовывал часть возможностей современного стандарта.
-
-А обычный `XMLHttpRequest` решили не трогать, чтобы ненароком не сломать существующий код.
-
-Мы подробнее поговорим про `XDomainRequest` в главе [](/xhr-crossdomain). Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 -- вместо `new XMLHttpRequest()` нужно использовать `new XDomainRequest`.
-
-Кросс-браузерно:
-
-```js
-var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
-var xhr = new XHR();
-```
-
-Теперь в IE8,9 поддерживаются события `onload`, `onerror` и `onprogress`. Это именно для IE8,9. Для IE10 обычный `XMLHttpRequest` уже является полноценным.
-
-### IE9- и кеширование
-
-Обычно ответы на запросы `XMLHttpRequest` кешируются, как и обычные страницы.
-
-Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например `Cache-Control: no-cache`.
-
-Впрочем, использовать заголовки типа `Expires`, `Last-Modified` и `Cache-Control` рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.
-
-Альтернативный вариант -- добавить в URL запроса случайный параметр, предотвращающий кеширование.
-
-Например, вместо `xhr.open('GET', 'service', false)` написать:
-
-```js
-xhr.open('GET', '*!*'service?r=' + Math.random()*/!*, false);
-```
-
-По историческим причинам такой способ предотвращения кеширования можно увидеть много где, так как старые браузеры плохо обрабатывали кеширующие заголовки. Сейчас серверные заголовки поддерживаются хорошо.
-
-## Итого
-
-Типовой код для GET-запроса при помощи `XMLHttpRequest`:
-
-```js
-var xhr = new XMLHttpRequest();
-
-xhr.open('GET', '/my/url', true);
-
-xhr.send();
-
-xhr.onreadystatechange = function() {
-  if (this.readyState != 4) return;
-
-  // по окончании запроса доступны:
-  // status, statusText
-  // responseText, responseXML (при content-type: text/xml)
-
-  if (this.status != 200) {
-    // обработать ошибку
-    alert( 'ошибка: ' + (this.status ? this.statusText || 'запрос не удался') );
-    return;
-  }
-
-  // получить результат из this.responseText или this.responseXML
-}
-```
-
-Мы разобрали следующие методы `XMLHttpRequest`:
-
-<ul>
-<li>`open(method, url, async, user, password)`</li>
-<li>`send(body)`</li>
-<li>`abort()`</li>
-<li>`setRequestHeader(name, value)`</li>
-<li>`getResponseHeader(name)`</li>
-<li>`getAllResponseHeaders()`</li>
-</ul>
-
-Свойства `XMLHttpRequest`:
-
-<ul>
-<li>`timeout`</li>
-<li>`responseText`</li>
-<li>`responseXML`</li>
-<li>`status`</li>
-<li>`statusText`</li>
-</ul>
-
-События:
-
-<ul>
-<li>`onreadystatechange`</li>
-<li>`ontimeout`</li>
-<li>`onerror`</li>
-<li>`onload`</li>
-<li>`onprogress`</li>
-<li>`onabort`</li>
-<li>`onloadstart`</li>
-<li>`onloadend`</li>
-</ul>
-
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html b/4-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html
deleted file mode 100644
index e90a69cc..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
-
-  <script>
-    function loadPhones() {
-
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', 'phones.json', true);
-
-
-      xhr.send();
-
-
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState != 4) return;
-
-        button.innerHTML = 'Готово!';
-
-        if (xhr.status != 200) {
-          // обработать ошибку
-          alert(xhr.status + ': ' + xhr.statusText);
-        } else {
-          // вывести результат
-          alert(xhr.responseText);
-        }
-
-      }
-
-      button.innerHTML = 'Загружаю...';
-      button.disabled = true;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/phones.json b/4-ajax/3-ajax-xmlhttprequest/phones-async.view/phones.json
deleted file mode 100644
index 472b2b16..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/phones.json
+++ /dev/null
@@ -1,155 +0,0 @@
-[
-    {
-        "age": 0, 
-        "id": "motorola-xoom-with-wi-fi", 
-        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "name": "Motorola XOOM\u2122 with Wi-Fi", 
-        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 1, 
-        "id": "motorola-xoom", 
-        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
-        "name": "MOTOROLA XOOM\u2122", 
-        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 2, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-atrix-4g", 
-        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
-        "name": "MOTOROLA ATRIX\u2122 4G", 
-        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
-    }, 
-    {
-        "age": 3, 
-        "id": "dell-streak-7", 
-        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
-        "name": "Dell Streak 7", 
-        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
-    }, 
-    {
-        "age": 4, 
-        "carrier": "Cellular South", 
-        "id": "samsung-gem", 
-        "imageUrl": "img/phones/samsung-gem.0.jpg", 
-        "name": "Samsung Gem\u2122", 
-        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
-    }, 
-    {
-        "age": 5, 
-        "carrier": "Dell", 
-        "id": "dell-venue", 
-        "imageUrl": "img/phones/dell-venue.0.jpg", 
-        "name": "Dell Venue", 
-        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
-    }, 
-    {
-        "age": 6, 
-        "carrier": "Best Buy", 
-        "id": "nexus-s", 
-        "imageUrl": "img/phones/nexus-s.0.jpg", 
-        "name": "Nexus S", 
-        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
-    }, 
-    {
-        "age": 7, 
-        "carrier": "Cellular South", 
-        "id": "lg-axis", 
-        "imageUrl": "img/phones/lg-axis.0.jpg", 
-        "name": "LG Axis", 
-        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
-    }, 
-    {
-        "age": 8, 
-        "id": "samsung-galaxy-tab", 
-        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
-        "name": "Samsung Galaxy Tab\u2122", 
-        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
-    }, 
-    {
-        "age": 9, 
-        "carrier": "Cellular South", 
-        "id": "samsung-showcase-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
-    }, 
-    {
-        "age": 10, 
-        "carrier": "Verizon", 
-        "id": "droid-2-global-by-motorola", 
-        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
-        "name": "DROID\u2122 2 Global by Motorola", 
-        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
-    }, 
-    {
-        "age": 11, 
-        "carrier": "Verizon", 
-        "id": "droid-pro-by-motorola", 
-        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
-        "name": "DROID\u2122 Pro by Motorola", 
-        "snippet": "The next generation of DOES."
-    }, 
-    {
-        "age": 12, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-bravo-with-motoblur", 
-        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
-        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
-        "snippet": "An experience to cheer about."
-    }, 
-    {
-        "age": 13, 
-        "carrier": "T-Mobile", 
-        "id": "motorola-defy-with-motoblur", 
-        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
-        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Are you ready for everything life throws your way?"
-    }, 
-    {
-        "age": 14, 
-        "carrier": "T-Mobile", 
-        "id": "t-mobile-mytouch-4g", 
-        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
-        "name": "T-Mobile myTouch 4G", 
-        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
-    }, 
-    {
-        "age": 15, 
-        "carrier": "US Cellular", 
-        "id": "samsung-mesmerize-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
-    }, 
-    {
-        "age": 16, 
-        "carrier": "Sprint", 
-        "id": "sanyo-zio", 
-        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
-        "name": "SANYO ZIO", 
-        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
-    }, 
-    {
-        "age": 17, 
-        "id": "samsung-transform", 
-        "imageUrl": "img/phones/samsung-transform.0.jpg", 
-        "name": "Samsung Transform\u2122", 
-        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
-    }, 
-    {
-        "age": 18, 
-        "id": "t-mobile-g2", 
-        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
-        "name": "T-Mobile G2", 
-        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
-    }, 
-    {
-        "age": 19, 
-        "id": "motorola-charm-with-motoblur", 
-        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
-        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
-    }
-]
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/server.js b/4-ajax/3-ajax-xmlhttprequest/phones-async.view/server.js
deleted file mode 100644
index d09318a0..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones-async.view/server.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/phones.json') {
-    // искусственная задержка для наглядности
-    setTimeout(function() {
-      file.serve(req, res);
-    }, 2000);
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones.view/index.html b/4-ajax/3-ajax-xmlhttprequest/phones.view/index.html
deleted file mode 100644
index a71ebbad..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones.view/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="loadPhones()">Загрузить phones.json!</button>
-
-  <script>
-    function loadPhones() {
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', 'phones.json', false);
-      xhr.send();
-
-      if (xhr.status != 200) {
-        // обработать ошибку
-        alert('Ошибка ' + xhr.status + ': ' + xhr.statusText);
-      } else {
-        // вывести результат
-        alert(xhr.responseText);
-      }
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones.view/phones.json b/4-ajax/3-ajax-xmlhttprequest/phones.view/phones.json
deleted file mode 100644
index 472b2b16..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones.view/phones.json
+++ /dev/null
@@ -1,155 +0,0 @@
-[
-    {
-        "age": 0, 
-        "id": "motorola-xoom-with-wi-fi", 
-        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "name": "Motorola XOOM\u2122 with Wi-Fi", 
-        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 1, 
-        "id": "motorola-xoom", 
-        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
-        "name": "MOTOROLA XOOM\u2122", 
-        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 2, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-atrix-4g", 
-        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
-        "name": "MOTOROLA ATRIX\u2122 4G", 
-        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
-    }, 
-    {
-        "age": 3, 
-        "id": "dell-streak-7", 
-        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
-        "name": "Dell Streak 7", 
-        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
-    }, 
-    {
-        "age": 4, 
-        "carrier": "Cellular South", 
-        "id": "samsung-gem", 
-        "imageUrl": "img/phones/samsung-gem.0.jpg", 
-        "name": "Samsung Gem\u2122", 
-        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
-    }, 
-    {
-        "age": 5, 
-        "carrier": "Dell", 
-        "id": "dell-venue", 
-        "imageUrl": "img/phones/dell-venue.0.jpg", 
-        "name": "Dell Venue", 
-        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
-    }, 
-    {
-        "age": 6, 
-        "carrier": "Best Buy", 
-        "id": "nexus-s", 
-        "imageUrl": "img/phones/nexus-s.0.jpg", 
-        "name": "Nexus S", 
-        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
-    }, 
-    {
-        "age": 7, 
-        "carrier": "Cellular South", 
-        "id": "lg-axis", 
-        "imageUrl": "img/phones/lg-axis.0.jpg", 
-        "name": "LG Axis", 
-        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
-    }, 
-    {
-        "age": 8, 
-        "id": "samsung-galaxy-tab", 
-        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
-        "name": "Samsung Galaxy Tab\u2122", 
-        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
-    }, 
-    {
-        "age": 9, 
-        "carrier": "Cellular South", 
-        "id": "samsung-showcase-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
-    }, 
-    {
-        "age": 10, 
-        "carrier": "Verizon", 
-        "id": "droid-2-global-by-motorola", 
-        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
-        "name": "DROID\u2122 2 Global by Motorola", 
-        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
-    }, 
-    {
-        "age": 11, 
-        "carrier": "Verizon", 
-        "id": "droid-pro-by-motorola", 
-        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
-        "name": "DROID\u2122 Pro by Motorola", 
-        "snippet": "The next generation of DOES."
-    }, 
-    {
-        "age": 12, 
-        "carrier": "AT&amp;T", 
-        "id": "motorola-bravo-with-motoblur", 
-        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
-        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
-        "snippet": "An experience to cheer about."
-    }, 
-    {
-        "age": 13, 
-        "carrier": "T-Mobile", 
-        "id": "motorola-defy-with-motoblur", 
-        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
-        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Are you ready for everything life throws your way?"
-    }, 
-    {
-        "age": 14, 
-        "carrier": "T-Mobile", 
-        "id": "t-mobile-mytouch-4g", 
-        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
-        "name": "T-Mobile myTouch 4G", 
-        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
-    }, 
-    {
-        "age": 15, 
-        "carrier": "US Cellular", 
-        "id": "samsung-mesmerize-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
-    }, 
-    {
-        "age": 16, 
-        "carrier": "Sprint", 
-        "id": "sanyo-zio", 
-        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
-        "name": "SANYO ZIO", 
-        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
-    }, 
-    {
-        "age": 17, 
-        "id": "samsung-transform", 
-        "imageUrl": "img/phones/samsung-transform.0.jpg", 
-        "name": "Samsung Transform\u2122", 
-        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
-    }, 
-    {
-        "age": 18, 
-        "id": "t-mobile-g2", 
-        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
-        "name": "T-Mobile G2", 
-        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
-    }, 
-    {
-        "age": 19, 
-        "id": "motorola-charm-with-motoblur", 
-        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
-        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
-    }
-]
diff --git a/4-ajax/3-ajax-xmlhttprequest/phones.view/server.js b/4-ajax/3-ajax-xmlhttprequest/phones.view/server.js
deleted file mode 100644
index d09318a0..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/phones.view/server.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/phones.json') {
-    // искусственная задержка для наглядности
-    setTimeout(function() {
-      file.serve(req, res);
-    }, 2000);
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/readystate.view/index.html b/4-ajax/3-ajax-xmlhttprequest/readystate.view/index.html
deleted file mode 100644
index 7c70c0b3..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/readystate.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <button onclick="run()">Загрузить digits</button>
-
-  <ul id="log"></ul>
-
-  <script>
-    function run() {
-
-      var xhr = new XMLHttpRequest();
-      write(xhr.readyState);
-
-      xhr.open('GET', 'digits', true);
-      write(xhr.readyState);
-
-      xhr.onreadystatechange = function() {
-        write(xhr.readyState + " получено символов:" + xhr.responseText.length);
-      };
-
-      xhr.send();
-    }
-
-    function write(text) {
-      var li = log.appendChild(document.createElement('li'));
-      li.innerHTML = text;
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/3-ajax-xmlhttprequest/readystate.view/server.js b/4-ajax/3-ajax-xmlhttprequest/readystate.view/server.js
deleted file mode 100644
index 63b01a02..00000000
--- a/4-ajax/3-ajax-xmlhttprequest/readystate.view/server.js
+++ /dev/null
@@ -1,42 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.');
-
-function accept(req, res) {
-
-  if (req.url == '/digits') {
-
-    res.writeHead(200, {
-      'Content-Type': 'text/plain',
-      'Cache-Control': 'no-cache'
-    });
-
-    var i = 0;
-
-    var timer = setInterval(write, 1000);
-    write();
-
-    function write() {
-      res.write(new Array(1000).join(++i + '') + ' ');
-      if (i == 9) {
-        clearInterval(timer);
-        res.end();
-      }
-
-    }
-  } else {
-    file.serve(req, res);
-  }
-}
-
-
-
-// ----- запуск accept как сервера из консоли или как модуля ------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/4-xhr-forms/article.md b/4-ajax/4-xhr-forms/article.md
deleted file mode 100644
index a3df4f7d..00000000
--- a/4-ajax/4-xhr-forms/article.md
+++ /dev/null
@@ -1,302 +0,0 @@
-# XMLHttpRequest POST, формы и кодировка
-
-Во время обычной отправки формы `<form>` браузер собирает значения её полей, делает из них строку и составляет тело GET/POST-запроса для посылки на сервер. 
-
-При отправке данных через `XMLHttpRequest`, это нужно делать самим, в JS-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.
-
-[cut]
-
-## Кодировка urlencoded
-
-Основной способ кодировки запросов -- это *urlencoded*, то есть -- стандартное кодирование URL. 
-
-Например, форма:
-
-```html
-<form action="/submit" method="GET"> 
-  <input name="*!*name*/!*" value="*!*Ivan*/!*">
-  <input name="*!*surname*/!*" value="*!*Ivanov*/!*">
-</form>
-```
-
-Здесь есть два поля: `name=Ivan` и `surname=Ivanov`. 
-
-Браузер перечисляет такие пары "имя=значение" через символ амперсанда `&` и, так как метод GET, итоговый запрос выглядит как `/submit?name=Ivan&surname=Ivanov`.
-
-Все символы, кроме английских букв, цифр и `- _ . ! ~ * ' ( )` заменяются на их цифровой код в UTF-8 со знаком %.
-
-Например, пробел заменяется на `%20`, символ `/` на `%2F`, русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, `Ц` заменится на `%D0%A6`.
-
-Например, форма:
-
-```html
-<form action="/submit" method="GET"> 
-  <input name="*!*name*/!*" value="*!*Виктор*/!*">
-  <input name="*!*surname*/!*" value="*!*Цой*/!*">
-</form>
-```
-
-Будет отправлена так: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
-
-в JavaScript есть функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) для получения такой кодировки "вручную":
-
-```js
-//+ run
-alert( encodeURIComponent(' ') ); // %20 
-alert( encodeURIComponent('/') ); // %2F
-alert( encodeURIComponent('В') ); // %D0%92
-alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80
-```
-
-Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.
-
-## GET-запрос 
-
-Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией `encodeURIComponent`.
-
-Например, для посылки GET-запроса с параметрами `name` и `surname`, аналогично форме выше, их необходимо закодировать так:
-
-```js
-// Передаём name и surname в параметрах запроса
-
-var xhr = new XMLHttpRequest();
-
-var params = 'name=' + encodeURIComponent(name) +
-  '&surname=' + encodeURIComponent(surname);
-
-xhr.open("GET", '/submit?' + params, true);
-
-xhr.onreadystatechange = ...;
-
-xhr.send();
-```
-
-[smart header="Прочие заголовки"]
-Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как `Content-Length` и `Connection`.
-
-По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности. 
-[/smart]
-
-[smart header="Сообщаем про AJAX"]
-Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.
-
-Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:
-
-```js
-xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-```
-[/smart]
-
-## POST с urlencoded 
-
-В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове `send(body)`. 
-
-В стандартных HTTP-формах для метода POST доступны [три кодировки](https://html.spec.whatwg.org/multipage/forms.html#submit-body), задаваемые через атрибут `enctype`:
-<ul>
-<li>`application/x-www-form-urlencoded`</li>
-<li>`multipart/form-data`</li>
-<li>`text-plain`</li>
-</ul>
-
-В зависимости от `enctype` браузер кодирует данные соответствующим способом перед отправкой на сервер.
-
-В случае с `XMLHttpRequest` мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных.
-
-В частности, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос.
-
-Для примера отправим запрос в кодировке `application/x-www-form-urlencoded`:
-
-```js
-var xhr = new XMLHttpRequest();
-
-var body = 'name=' + encodeURIComponent(name) +
-  '&surname=' + encodeURIComponent(surname);
-
-xhr.open("POST", '/submit', true)
-xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
-
-xhr.onreadystatechange = ...;
-
-xhr.send(body);
-```
-
-[warn header="Только UTF-8"]
-Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.
-
-Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.
-[/warn]
-
-## Кодировка multipart/form-data
-
-Кодировка urlencoded за счёт замены символов на `%код` может сильно "раздуть" общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: [multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data). 
-
-В этой кодировке поля пересылаются одно за другим, через строку-разделитель.
-
-Чтобы использовать этот способ, нужно указат его в атрибуте `enctype` и метод должен быть POST:
-
-```html
-<form action="/submit" method="POST" enctype="multipart/form-data"> 
-  <input name="*!*name*/!*" value="*!*Виктор*/!*">
-  <input name="*!*surname*/!*" value="*!*Цой*/!*">
-</form>
-```
-
-Форма при такой кодировке будет выглядеть примерно так:
-
-```
-...Заголовки...
-Content-Type: *!*multipart/form-data; boundary=RaNdOmDeLiMiTeR*/!*
-
---RaNdOmDeLiMiTeR
-Content-Disposition: form-data; name="*!*name*/!*"
-
-*!*Виктор*/!*
---RaNdOmDeLiMiTeR
-Content-Disposition: form-data; name="*!*surname*/!*"
-
-*!*Цой*/!*
---RaNdOmDeLiMiTeR--
-```
-
-...То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где -- поля разделены случайно сгенерированной строкой, которую называют "boundary" (англ. граница), в примере выше это `RaNdOmDeLiMiTeR`:
-
-Сервер видит заголовок `Content-Type: multipart/form-data`, читает из него границу и раскодирует поля формы.
-
-Такой способ используется в первую очередь при пересылке файлов, так перекодировка мегабайтов через urlencoded существенно загрузила бы браузер. Да и объём данных после неё сильно вырос бы. 
-
-Однако, никто не мешает использовать эту кодировку всегда для POST запросов. Для GET доступна только urlencoded.
-
-## POST с multipart/form-data
-
-Сделать POST-запрос в кодировке `multipart/form-data` можно и через XMLHttpRequest.
-
-Достаточно указать в заголовке `Content-Type` кодировку и границу, и далее сформировать тело запроса, удовлетворяющее требованиям кодировки.
-
-Пример кода для того же запроса, что и раньше, теперь в кодировке `multipart/form-data`:
-
-```js
-var data = {
-  name: 'Виктор',
-  surname: 'Цой'
-};
-
-var boundary = String(Math.random()).slice(2);
-var boundaryMiddle = '--' + boundary + '\r\n';
-var boundaryLast = '--' + boundary + '--\r\n'
-
-var body = ['\r\n'];
-for (var key in data) {
-  // добавление поля
-  body.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + data[key] + '\r\n');
-}
-
-body = body.join(boundaryMiddle) + boundaryLast;
-
-// Тело запроса готово, отправляем
-
-var xhr = new XMLHttpRequest();
-xhr.open('POST', '/submit', true);
-
-xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
-
-xhr.onreadystatechange = function() {
-  if (this.readyState != 4) return;
-
-  alert( this.responseText );
-}
-
-xhr.send(body);
-```
-
-Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель. 
-
-[smart header="Отправка файла"]
-Можно создать запрос, который сервер воспримет как загрузку файла. 
-
-Для добавления файла нужно использовать тот же код, что выше, модифицировав заголовки перед полем, которое является файлом, так:
-
-```js
-//+ no-beautify
-Content-Disposition: form-data; name="myfile"; filename="pic.jpg"
-Content-Type: image/jpeg
-(пустая строка)
-содержимое файла
-```
-[/smart]
-
-## FormData
-
-Современные браузеры, исключая IE9- (впрочем, есть полифилл), поддерживают встроенный объект [FormData](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects), который кодирует формы для отправки на сервер.
-
-Это очень удобно. Например:
-
-```html
-<form name="person">
-  <input name="name" value="Виктор">
-  <input name="surname" value="Цой">
-</form>
-
-<script>
-  // создать объект для формы
-*!*
-  var formData = new FormData(document.forms.person);
-*/!*
-
-  // добавить к пересылке ещё пару ключ - значение
-  formData.append("patronym", "Робертович");
-
-  // отослать
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", "/url");
-*!*
-  xhr.send(formData);
-*/!*
-</script>
-```
-
-Этот код отправит на сервер форму с полями `name`, `surname` и `patronym`.
-
-Интерфейс:
-<ul>
-<li>Конструктор `new FormData([form])` вызывается либо без аргументов, либо с DOM-элементом формы. </li>
-<li>Метод `formData.append(name, value)` добавляет данные к форме.</li>
-</ul>
-
-Объект `formData` можно сразу отсылать, интеграция `FormData` с `XMLHttpRequest` встроена в браузер. Кодировка при этом будет `multipart/form-data`.
-
-## Другие кодировки
-
-XMLHttpRequest сам по себе не ограничивает кодировку и формат пересылаемых данных.
-
-Поэтому для обмена данными часто используется формат JSON:
-
-```js
-var xhr = new XMLHttpRequest();
-
-var json = JSON.stringify({
-  name: "Виктор",
-  surname: "Цой"
-});
-
-xhr.open("POST", '/submit', true)
-xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
-
-xhr.onreadystatechange = ...;
-
-*!*
-// Отсылаем объект в формате JSON и с Content-Type application/json
-// Сервер должен уметь такой Content-Type принимать и раскодировать
-*/!*
-xhr.send(json);
-```
-
-## Итого
-
-<ul>
-<li>У форм есть две основные кодировки: `application/x-www-form-urlencoded` -- по умолчанию и `multipart/form-data` -- для POST запросов, если явно указана в `enctype`. Вторая кодировка обычно используется для больших данных и только для тела запроса.</li>
-<li>Для составления запроса в `application/x-www-form-urlencoded` используется функция `encodeURIComponent`.</li>
-<li>Для отправки запроса в `multipart/form-data` -- объект `FormData`.</li>
-<li>Для обмена данными JS <-> сервер можно использовать и просто JSON, желательно с указанием кодировки в заголовке `Content-Type`.</li>
-</ul>
-
-В XMLHttpRequest можно использовать и другие HTTP-методы, например PUT, DELETE, TRACE. К ним применимы все те же принципы, что описаны выше.
diff --git a/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/solution.md b/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/solution.md
deleted file mode 100644
index 0f57313f..00000000
--- a/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-`Origin` нужен, потому что `Referer` передаётся не всегда. В частности, при запросе с HTTPS на HTTP -- нет `Referer`.
-
-Политика [Content Security Policy](http://en.wikipedia.org/wiki/Content_Security_Policy) может запрещать пересылку `Referer`. 
-
-По стандарту `Referer` является необязательным HTTP-заголовком, в некоторых браузерах есть настройки, которые запрещают его слать.
-
-Именно поэтому, ввиду того, что на `Referer` полагаться нельзя, и придумали заголовок `Origin`, который гарантированно присылается при кросс-доменных запросах.
-
-Что же касается "неправильного" `Referer` -- это из области фантастики. Когда-то, много лет назад, в браузерах были ошибки, которые позволяли подменить `Referer` из JavaScript, но они давно исправлены. Никакая "злая страница" не может его подменить.
diff --git a/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/task.md b/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/task.md
deleted file mode 100644
index 9a231e0f..00000000
--- a/4-ajax/5-xhr-crossdomain/1-do-we-need-origin/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Зачем нужен Origin?
-
-[importance 5]
-
-Как вы, наверняка, знаете, существует HTTP-заголовок `Referer`, в котором обычно указан адрес страницы, с которой инициирован запрос.
-
-Например, при отправке `XMLHttpRequest` со страницы `http://javascript.ru/some/url` на `http://google.ru`, заголовки будут примерно такими:
-
-```
-Accept:*/*
-Accept-Charset:windows-1251,utf-8;q=0.7,*;q=0.3
-Accept-Encoding:gzip,deflate,sdch
-Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
-Connection:keep-alive
-Host:google.ru
-*!*
-Origin:http://javascript.ru
-Referer:http://javascript.ru/some/url
-*/!*
-```
-
-Как видно, здесь присутствуют и `Referer` и `Origin`.
-
-Итак, вопросы:
-<ol>
-<li>Зачем нужен `Origin`, если `Referer` содержит даже более полную информацию?</li>
-<li>Может ли быть такое, что заголовка `Referer` нет или он неправильный?</li>
-</ol>
diff --git a/4-ajax/5-xhr-crossdomain/article.md b/4-ajax/5-xhr-crossdomain/article.md
deleted file mode 100644
index 7ad483fd..00000000
--- a/4-ajax/5-xhr-crossdomain/article.md
+++ /dev/null
@@ -1,401 +0,0 @@
-# XMLHttpRequest: кросс-доменные запросы
-
-Обычно запрос `XMLHttpRequest` может делать запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол -- браузер выдаёт ошибку.
-
-Существует современный стандарт [XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/), он ещё в состоянии черновика, но предусматривает кросс-доменные запросы и многое другое.
-
-[cut]
-
-Большинство возможностей этого стандарта уже поддерживаются всеми браузерами, но увы, не в IE9-. 
-
-Впрочем, частично кросс-доменные запросы поддерживаются, начиная с IE8, только вместо `XMLHttpRequest` нужно использовать объект [XDomainRequest](http://msdn.microsoft.com/en-us/library/ie/cc288060.aspx). 
-
-## Кросс-доменные запросы  [#cors]
-
-Разберём кросс-доменные запросы на примере кода:
-
-```js
-// (1)
-var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
-
-var xhr = new XHR();
-
-// (2) запрос на другой домен :)
-xhr.open('GET', 'http://anywhere.com/request', true);
-
-xhr.onload = function() {
-  alert( this.responseText );
-}
-
-xhr.onerror = function() {
-  alert( 'Ошибка ' + this.status );
-}
-
-xhr.send();
-```
-
-<ol>
-<li>Мы создаём `XMLHttpRequest` и проверяем, поддерживает ли он событие `onload`. Если нет, то это старый `XMLHttpRequest`, значит это IE8,9, и используем `XDomainRequest`.</li>
-<li>Запрос на другой домен отсылается просто указанием соответствующего URL в `open`. Он обязательно должен быть асинхронным, в остальном -- никаких особенностей.</li>
-</ol>
-
-
-## Контроль безопасности
-
-Кросс-доменные запросы проходят специальный контроль безопасности, цель которого -- не дать злым хакерам(tm) завоевать интернет.
-
-Серьёзно. Разработчики стандарта предусмотрели все заслоны, чтобы "злой хакер" не смог, воспользовавшись новым стандартом, сделать что-то принципиально отличное от того, что и так мог раньше и, таким образом, "сломать" какой-нибудь сервер, работающий по-старому стандарту и не ожидающий ничего принципиально нового.
-
-Давайте, на минуточку, вообразим, что появился стандарт, который даёт, без ограничений, возможность делать любой странице HTTP-запросы куда угодно, какие угодно.
-
-Как сможет этим воспользоваться злой хакер?
-
-Он сделает свой сайт, например `http://evilhacker.com` и заманит туда посетителя (а может посетитель попадёт на "злонамеренную" страницу и по ошибке -- не так важно).
-
-Когда посетитель зайдёт на `http://evilhacker.com`, он автоматически запустит JS-скрипт на странице. Этот скрипт сделает HTTP-запрос на почтовый сервер, к примеру, `http://gmail.com`. А ведь обычно HTTP-запросы идут с куками посетителя и другими авторизующими заголовками.
-
-Поэтому хакер сможет написать на `http://evilhacker.com` код, который, сделав GET-запрос на `http://gmail.com`, получит информацию из почтового ящика посетителя. Проанализирует её, сделает ещё пачку POST-запросов для отправки писем от имени посетителя. Затем настанет очередь онлайн-банка и так далее.
-
-Спецификация [CORS](http://www.w3.org/TR/cors/) налагает специальные ограничения на запросы, которые призваны не допустить подобного апокалипсиса.
-
-Запросы в ней делятся на два вида.
-
-[Простыми](http://www.w3.org/TR/cors/#terminology) считаются запросы, если они удовлетворяют следующим двум условиям:
-
-<ol>
-<li>[Простой метод](http://www.w3.org/TR/cors/#simple-method): GET, POST или HEAD</li>
-<li>[Простые заголовки](http://www.w3.org/TR/cors/#simple-header) -- только из списка:
-<ul>
-<li>`Accept`</li>
-<li>`Accept-Language`</li>
-<li>`Content-Language`</li>
-<li>`Content-Type` со значением `application/x-www-form-urlencoded`, `multipart/form-data` или `text/plain`.</li>
-</ul>
-</li>
-</ol>
-
-"Непростыми" считаются все остальные, например, запрос с методом `PUT` или с заголовком `Authorization` не подходит под ограничения выше.
-
-Принципиальная разница между ними заключается в том, что "простой" запрос можно сформировать и отправить на сервер и без XMLHttpRequest, например при помощи HTML-формы.
-
-То есть, злой хакер на странице `http://evilhacker.com` и до появления CORS мог отправить произвольный GET-запрос куда угодно. Например, если создать и добавить в документ элемент `<script src="любой url">`, то браузер сделает GET-запрос на этот URL.
-
-Аналогично, злой хакер и ранее мог на своей странице объявить и, при помощи JavaScript, отправить HTML-форму с методом GET/POST и кодировкой `multipart/form-data`. А значит, даже старый сервер наверняка предусматривает возможность таких атак и умеет от них защищаться.
-
-А вот запросы с нестандартными заголовками или с методом `DELETE` таким образом не создать. Поэтому старый сервер может быть к ним не готов. Или, к примеру, он может полагать, что такие запросы веб-страница в принципе не умеет присылать, значит они пришли из привелигированного приложения, и дать им слишком много прав.
-
-Поэтому при посылке "непростых" запросов нужно специальным образом спросить у сервера, согласен ли он в принципе на подобные кросс-доменные запросы или нет? И, если сервер не ответит, что согласен -- значит, нет.
-
-[summary]
-В спецификации CORS, как мы увидим далее, есть много деталей, но все они объединены единым принципом: новые возможности доступны только с явного согласия сервера (по умолчанию -- нет).
-[/summary]
-
-## CORS для простых запросов
-
-В кросс-доменный запрос браузер автоматически добавляет заголовок `Origin`, содержащий домен, с которого осуществлён запрос.
-
-В случае запроса на `http://anywhere.com/request` с `http://javascript.ru/page` заголовки будут примерно такие:
-
-```
-GET /request
-Host:anywhere.com
-*!*
-Origin:http://javascript.ru
-*/!*
-...
-```
-
-Сервер должен, со своей стороны, ответить специальными заголовками, разрешает ли он такой запрос к себе.
-
-Если сервер разрешает кросс-доменный запрос с этого домена -- он должен добавить к ответу заголовок `Access-Control-Allow-Origin`, содержащий домен запроса (в данном случае "javascript.ru") или  звёздочку `*`.
-
-**Только при наличии такого заголовка в ответе -- браузер сочтёт запрос успешным, а иначе JavaScript получит ошибку.**
-
-<img src="xhr-another-domain.png">
-
-То есть, ответ сервера может быть примерно таким:
-
-```
-HTTP/1.1 200 OK
-Content-Type:text/html; charset=UTF-8
-*!*
-Access-Control-Allow-Origin: http://javascript.ru
-*/!*
-```
-
-Если `Access-Control-Allow-Origin` нет, то браузер считает, что разрешение не получено, и завершает запрос с ошибкой. 
-
-При таких запросах не передаются куки и заголовки HTTP-авторизации. Параметры `user` и `password` в методе `open` игнорируются. Мы рассмотрим, как разрешить их передачу, чуть далее.
-
-[warn header="Что может сделать хакер, используя такие запросы?"]
-Описанные выше ограничения приводят к тому, что запрос полностью безопасен.
-
-Действительно, злая страница может сформировать любой GET/POST-запрос и отправить его, но без разрешения сервера ответа она не получит.
-
-А без ответа такой запрос, по сути, эквивалентен отправке формы GET/POST, причём без авторизации.
-[/warn] 
-
-## Ограничения IE9-
-
-В IE9- используется `XDomainRequest`, который представляет собой урезанный `XMLHttpRequest`. 
-
-На него действуют ограничения:
-
-<ul>
-<li>Протокол нужно сохранять: запросы допустимы с HTTP на HTTP, с HTTPS на HTTPS. Другие протоколы запрещены.</li>
-<li>Метод `open(method, url)` имеет только два параметра. Он всегда асинхронный.</li>
-<li>Ряд возможностей современного стандарта недоступны, в частности:
-<ul><li>Недоступны методы, кроме GET или POST.</li>
-<li>Нельзя добавлять свои заголовки, даже нельзя указать свой `Content-Type` для запроса, он всегда `text/plain`.</li>
-<li>Нельзя включить передачу кук и данных HTTP-авторизации.</li>
-</ul>
-</li>
-<li>В IE8 в режиме просмотра InPrivate кросс-доменные запросы не работают.</li>
-</ul>
-
-Современный стандарт [XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) предусматривает средства для преодоления этих ограничений, но на момент выхода IE8 они ещё не были проработаны, поэтому их не реализовали. А IE9 исправил некоторые ошибки, но в общем не добавил ничего нового.
-
-Поэтому на сайтах, которые хотят поддерживать IE9-, то на практике кросс-доменные запросы редко используют, предпочитая другие способы кросс-доменной коммуникации. Например, динамически создаваемый тег `SCRIPT` или вспомогательный `IFRAME` с другого домена. Мы разберём эти подходы в последующих главах.
-
-[smart header="Как разрешить кросс-доменные запросы от доверенного сайта в IE9-?"]
-Разрешить кросс-доменные запросы для "доверенных" сайтов можно в настройках IE, во вкладке "Безопасность", включив пункт "Доступ к источникам данных за пределами домена".
-
-Обычно это делается для зоны "Надёжные узлы", после чего в неё вносится доверенный сайт. Теперь он может делать кросс-доменные запросы `XMLHttpRequest`.
-
-Этот способ можно применить для корпоративных сайтов, а также в тех случаях, когда посетитель заведомо вам доверяет, но почему-то (компьютер на работе, админ запрещает ставить другой браузер?) хочет использовать именно IE. Например, он может предлагаться в качестве дополнительной инструкции "как заставить этот сервис работать под IE".
-[/smart]
-
-[smart header="В IE разрешён другой порт"]
-В кросс-доменные ограничения IE не включён порт. 
-
-То есть, можно сделать запрос с `http://javascript.ru` на `http://javascript.ru:8080`, и в IE он не будет считаться кросс-доменным.
-
-Это позволяет решить некоторые задачи, связанные с взаимодействием различных сервисов в рамках одного сайта. Но только для IE.
-[/smart]
-
-Расширенные возможности, описанные далее, поддерживаются всеми современными браузерами, кроме IE9-.
-
-
-## Заголовки ответа
-
-Чтобы JavaScript мог прочитать HTTP-заголовок ответа, сервер должен указать его имя в `Access-Control-Expose-Headers`.
-
-Например:
-
-```
-HTTP/1.1 200 OK
-Content-Type:text/html; charset=UTF-8
-Access-Control-Allow-Origin: http://javascript.ru
-*!*
-X-Uid: 123
-X-Authorization: 2c9de507f2c54aa1
-Access-Control-Expose-Headers: X-Uid, X-Authentication
-*/!*
-```
-
-По умолчанию скрипт может прочитать из ответа только "простые" заголовки:
-
-```
-Cache-Control
-Content-Language
-Content-Type
-Expires
-Last-Modified
-Pragma
-```
-
-...То есть, `Content-Type` получить всегда можно, а доступ к специфическим заголовкам нужно открывать явно.
-
-
-## Запросы от имени пользователя
-
-По умолчанию браузер не передаёт с запросом куки и авторизующие заголовки.
-
-Чтобы браузер передал вместе с запросом куки и HTTP-авторизацию, нужно поставить запросу `xhr.withCredentials = true`:
-
-```js
-var xhr = new XMLHttpRequest();
-xhr.withCredentials = true;
-
-xhr.open('POST', 'http://anywhere.com/request', true)
-  ...
-```
-
-Далее -- всё как обычно, дополнительных действий со стороны клиента не требуется.
-
-Такой `XMLHttpRequest` с куками, естественно, требует от сервера больше разрешений, чем "анонимный". 
-
-**Поэтому для запросов с `withCredentials` предусмотрено дополнительное подтверждение со стороны сервера.**
-
-При запросе с `withCredentials` сервер должен вернуть уже не один, а два заголовка:
-<ul>
-<li>`Access-Control-Allow-Origin: домен`</li>
-<li>`Access-Control-Allow-Credentials: true`</li>
-</ul>
-
-Пример заголовков:
-
-```js
-//+ no-beautify
-HTTP/1.1 200 OK
-Content-Type:text/html; charset=UTF-8
-*!*
-Access-Control-Allow-Origin: http://javascript.ru
-Access-Control-Allow-Credentials: true
-*/!*
-```
-
-Использование звёздочки `*` в `Access-Control-Allow-Origin` при этом запрещено.
-
-Если этих заголовков не будет, то браузер не даст JavaScript'у доступ к ответу сервера.
-
-## "Непростые" запросы
-
-В кросс-доменном `XMLHttpRequest` можно указать не только `GET/POST`, но и любой другой метод, например `PUT`, `DELETE`.
-
-Когда-то никто и не думал, что страница сможет сделать такие запросы. Поэтому ряд веб-сервисов написаны в предположении, что "если метод -- нестандартный, то это не браузер". Некоторые веб-сервисы даже учитывают это при проверке прав доступа. 
-
-Чтобы пресечь любые недопонимания, браузер использует предзапрос в случаях, когда:
-
-<ul>
-<li>Если метод -- не GET / POST / HEAD.</li>
-<li>Если заголовок `Content-Type` имеет значение отличное от `application/x-www-form-urlencoded`, `multipart/form-data` или `text/plain`, например `application/xml`.</li>
-<li>Если устанавливаются другие HTTP-заголовки, кроме `Accept`, `Accept-Language`, `Content-Language`.</li>
-</ul>
-
-...Любое из условий выше ведёт к тому, что браузер cделает два HTTP-запроса.
-
-Первый запрос называется "предзапрос" (английский термин "preflight"). Браузер делает его целиком по своей инициативе, из JavaScript мы о нём ничего не знаем, хотя можем увидеть в инструментах разработчика.
-
-Этот запрос использует метод `OPTIONS`. Он не содержит тела и содержит название желаемого метода в заголовке `Access-Control-Request-Method`, а если добавлены особые заголовки, то и их тоже -- в `Access-Control-Request-Headers`.
-
-Его задача -- спросить сервер, разрешает ли он использовать выбранный метод и заголовки. 
-
-На этот запрос сервер должен ответить статусом 200, без тела ответа, указав заголовки `Access-Control-Allow-Method: метод` и, при необходимости, `Access-Control-Allow-Headers: разрешённые заголовки`.
-
-Дополнительно он может указать `Access-Control-Max-Age: sec`, где `sec` -- количество секунд, на которые нужно закэшировать разрешение. Тогда при последующих вызовах метода браузер уже не будет делать предзапрос.
-
-<img src="xhr-preflight.png">
-
-Давайте рассмотрим предзапрос на конкретном примере.
-
-### Пример запроса COPY
-
-Рассмотрим запрос `COPY`, который используется в протоколе [WebDAV](http://www.webdav.org/specs/rfc2518.html) для управления файлами через HTTP:
-
-```js
-var xhr = new XMLHttpRequest();
-
-xhr.open('COPY', 'http://site.com/~ilya', true);
-xhr.setRequestHeader('Destination', 'http://site.com/~ilya.bak');
-
-xhr.onload = ...
-xhr.onerror = ...
-
-xhr.send();
-```
-
-Этот запрос "непростой" по двум причинам (достаточно было бы одной из них):
-<ol>
-<li>Метод `COPY`.</li>
-<li>Заголовок `Destination`.</li>
-</ol>
-
-Поэтому браузер, по своей инициативе, шлёт предварительный запрос `OPTIONS`:
-
-```
-OPTIONS /~ilya HTTP/1.1
-Host: site.com
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Encoding: gzip,deflate
-Connection: keep-alive
-*!*
-Origin: http://javascript.ru
-Access-Control-Request-Method: COPY
-Access-Control-Request-Headers: Destination
-*/!*
-```
-
-Обратим внимание на детали:
-
-<ul>
-<li>Адрес -- тот же, что и у основного запроса: `http://site.com/~ilya`.</li>
-<li>Стандартные заголовки запроса `Accept`, `Accept-Encoding`, `Connection` присутствуют.</li>
-<li>Кросс-доменные специальные заголовки запроса:
-<ul>
-<li>`Origin` -- домен, с которого сделан запрос.</li>
-<li>`Access-Control-Request-Method` -- желаемый метод.</li>
-<li>`Access-Control-Request-Headers` -- желаемый "непростой" заголовок.</li>
-</ul>
-</li>
-</ul>
-
-На этот запрос сервер должен ответить статусом 200, указав заголовки `Access-Control-Allow-Method: COPY` и `Access-Control-Allow-Headers: Destination`.
-
-Но в протоколе WebDav разрешены многие методы и заголовки, которые имеет смысл сразу перечислить в ответе:
-
-```
-HTTP/1.1 200 OK
-Content-Type: text/plain
-*!*Access-Control-Allow-Methods*/!*: PROPFIND, PROPPATCH, COPY, MOVE, DELETE, MKCOL, LOCK, UNLOCK, PUT, GETLIB, VERSION-CONTROL, CHECKIN, CHECKOUT, UNCHECKOUT, REPORT, UPDATE, CANCELUPLOAD, HEAD, OPTIONS, GET, POST
-*!*Access-Control-Allow-Headers*/!*: Overwrite, Destination, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
-*!*Access-Control-Max-Age*/!*: 86400
-```
-
-Ответ должен быть без тела, то есть только заголовки.
-
-Браузер видит, что метод `COPY` -- в числе разрешённых и заголовок `Destination` -- тоже, и дальше он шлёт уже основной запрос.
-
-При этом ответ на предзапрос он закэширует на 86400 сек (сутки), так что последующие аналогичные вызовы сразу отправят основной запрос, без `OPTIONS`.
-
-Основной запрос браузер выполняет уже в "обычном" кросс-доменном режиме:
-
-```
-COPY /~ilya HTTP/1.1
-Host: site.com
-Content-Type: text/html; charset=UTF-8
-*!*
-Destination: http://site.com/~ilya.bak
-Origin: http://javascript.ru
-*/!*
-```
-
-Ответ сервера, согласно спецификации [WebDav COPY](http://www.webdav.org/specs/rfc2518.html#rfc.section.8.8.8), может быть примерно таким:
-
-```
-HTTP/1.1 207 Multi-Status
-Content-Type: text/xml; charset="utf-8"
-Content-Length: ...
-*!*
-Access-Control-Allow-Origin: http://javascript.ru
-*/!*
-
-<?xml version="1.0" encoding="utf-8" ?>
-<d:multistatus xmlns:d="DAV:">
-  ...
-</d:multistatus>
-```
-
-Так как `Access-Control-Allow-Origin` содержит правильный домен, то браузер вызовет `xhr.onload` и запрос будет завершён.
-
-## Итого
-
-<ul>
-<li>Все современные браузеры умеют делать кросс-доменные XMLHttpRequest.</li>
-<li>В IE8,9 для этого используется объект `XDomainRequest`, ограниченный по возможностям.</li>
-<li>Кросс-доменный запрос всегда содержит заголовок `Origin` с доменом запроса.</li>
-</ul>
-
-Порядок выполнения:
-<ol>
-<li>Для запросов с "непростым" методом или особыми заголовками браузер делает предзапрос `OPTIONS`, указывая их в `Access-Control-Request-Method` и `Access-Control-Request-Headers`.
-
-Браузер ожидает ответ со статусом `200`, без тела, со списком разрешённых методов и заголовков в `Access-Control-Allow-Method` и `Access-Control-Allow-Headers`. Дополнительно можно указать `Access-Control-Max-Age` для кеширования  предзапроса.</li>
-<li>Браузер делает запрос и проверяет, есть ли в ответе `Access-Control-Allow-Origin`, равный `*` или `Origin`. 
-
-Для запросов с `withCredentials` может быть только `Origin` и дополнительно `Access-Control-Allow-Credentials: true`.</li>
-<li>Если проверки пройдены, то вызывается `xhr.onload`, иначе `xhr.onerror`, без деталей ответа.</li>
-<li>Дополнительно: названия нестандартных заголовков ответа сервер должен указать в `Access-Control-Expose-Headers`, если хочет, чтобы клиент мог их прочитать.</li>
-</ol>
-
-Детали и примеры мы разобрали выше.
diff --git a/4-ajax/5-xhr-crossdomain/xhr-another-domain.png b/4-ajax/5-xhr-crossdomain/xhr-another-domain.png
deleted file mode 100644
index a5e1f469..00000000
Binary files a/4-ajax/5-xhr-crossdomain/xhr-another-domain.png and /dev/null differ
diff --git a/4-ajax/5-xhr-crossdomain/xhr-another-domain@2x.png b/4-ajax/5-xhr-crossdomain/xhr-another-domain@2x.png
deleted file mode 100644
index 39d2cc92..00000000
Binary files a/4-ajax/5-xhr-crossdomain/xhr-another-domain@2x.png and /dev/null differ
diff --git a/4-ajax/5-xhr-crossdomain/xhr-preflight.png b/4-ajax/5-xhr-crossdomain/xhr-preflight.png
deleted file mode 100644
index 1690621f..00000000
Binary files a/4-ajax/5-xhr-crossdomain/xhr-preflight.png and /dev/null differ
diff --git a/4-ajax/5-xhr-crossdomain/xhr-preflight@2x.png b/4-ajax/5-xhr-crossdomain/xhr-preflight@2x.png
deleted file mode 100644
index dc116b02..00000000
Binary files a/4-ajax/5-xhr-crossdomain/xhr-preflight@2x.png and /dev/null differ
diff --git a/4-ajax/6-xhr-onprogress/article.md b/4-ajax/6-xhr-onprogress/article.md
deleted file mode 100644
index bbef7f89..00000000
--- a/4-ajax/6-xhr-onprogress/article.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# XMLHttpRequest: индикация прогресса
-
-Запрос `XMLHttpRequest` состоит из двух фаз:
-<ol>
-<li>Стадия закачки (upload). На ней данные загружаются на сервер. Эта фаза может быть долгой для POST-запросов. Для отслеживания прогресса на стадии закачки существует объект типа [XMLHttpRequestUpload](https://xhr.spec.whatwg.org/#xmlhttprequesteventtarget), доступный как `xhr.upload` и события на нём.</li>
-<li>Стадия скачивания (download). После того, как данные загружены, браузер скачивает ответ с сервера. Если он большой, то это может занять существенное время. На этой стадии используется обработчик `xhr.onprogress`.</li>
-</ol>
-
-Далее -- обо всём по порядку.
-
-[cut]
-
-## Стадия закачки
-
-На стадии закачки для получения информации используем объект `xhr.upload`. У этого объекта нет методов, он только генерирует события в процессе закачки. А они-то как раз и нужны.
-
-Вот полный список событий:
-<ul>
-<li>`loadstart`</li>
-<li>`progress`</li>
-<li>`abort`</li>
-<li>`error`</li>
-<li>`load`</li>
-<li>`timeout`</li>
-<li>`loadend`</li>
-</ul>
-
-Пример установки обработчиков на стадию закачки:
-
-```js
-xhr.upload.onprogress = function(event) {
-  alert( 'Загружено на сервер ' + event.loaded + ' байт из ' + event.total );
-}
-
-xhr.upload.onload = function() {
-  alert( 'Данные полностью загружены на сервер!' );
-}
-
-xhr.upload.onerror = function() {
-  alert( 'Произошла ошибка при загрузке данных на сервер!' );
-}
-```
-
-## Стадия скачивания
-
-После того, как загрузка завершена, и сервер соизволит ответить на запрос, `XMLHttpRequest` начнёт скачивание ответа сервера.
-
-На этой фазе `xhr.upload` уже не нужен, а в дело вступают обработчики событий на самом объекте `xhr`. В частности, событие `xhr.onprogress` содержит информацию о количестве принятых байт ответа.
-
-Пример обработчика:
-
-```js
-xhr.onprogress = function(event) {
-  alert( 'Получено с сервера ' + event.loaded + ' байт из ' + event.total );
-}
-```
-
-Все события, возникающие в этих обработчиках, имеют тип [ProgressEvent](https://xhr.spec.whatwg.org/#progressevent), то есть имеют свойства `loaded` -- количество уже пересланных данных в байтах и `total` -- общее количество данных. 
-
-## Демо: загрузка файла с индикатором прогресса
-
-Современный `XMLHttpRequest` позволяет отправить на сервер всё, что угодно. Текст, файл, форму.
-
-Мы, для примера, рассмотрим загрузку файла с индикацией прогресса. Это требует от браузера поддержки [File API](http://www.w3.org/TR/FileAPI/), то есть исключает IE9-.
-
-File API позволяет получить доступ к содержимому файла, который перенесён в браузер при помощи Drag'n'Drop или выбран в поле формы, и отправить его при помощи `XMLHttpRequest`.
-
-Форма для выбора файла с обработчиком `submit`:
-
-```html
-<form name="upload">
-  <input type="file" name="myfile">
-  <input type="submit" value="Загрузить">
-</form>
-
-<script>
-  document.forms.upload.onsubmit = function() {
-    var input = this.elements.myfile;
-    var file = input.files[0];
-    if (file) {
-*!*
-      upload(file);
-*/!*
-    }
-    return false;
-  }
-</script>
-```
-
-Мы получаем файл из формы через свойство `files` элемента `<input>` и передаём его в функцию `upload`:
-
-```js
-function upload(file) {
-
-  var xhr = new XMLHttpRequest();
-
-  // обработчик для закачки
-  xhr.upload.onprogress = function(event) {
-    log(event.loaded + ' / ' + event.total);
-  }
-
-  // обработчики успеха и ошибки
-  // если status == 200, то это успех, иначе ошибка
-  xhr.onload = xhr.onerror = function() {
-    if (this.status == 200) {
-      log("success");
-    } else {
-      log("error " + this.status);
-    }
-  };
-
-
-  xhr.open("POST", "upload", true);
-  xhr.send(file);
-
-}
-```
-
-Этот код отправит файл на сервер и будет сообщать о прогрессе при его закачке (`xhr.upload.onprogress`), а также об окончании запроса (`xhr.onload`, `xhr.onerror`).
-
-Полный пример индикации прогресса при загрузке, основанный на коде выше:
-
-[codetabs src="progress"]
-
-## Событие onprogress в деталях
-
-При обработке события `onprogress` есть ряд важных тонкостей.
-
-Можно, конечно, их игнорировать, но лучше бы знать.
-
-Заметим, что событие, возникающее при `onprogress`, имеет одинаковый вид на стадии закачки (в обработчике `xhr.upload.onprogress`) и при получении ответа (в обработчике `xhr.onprogress`).
-
-Оно представляет собой объект типа [ProgressEvent](https://xhr.spec.whatwg.org/#progressevent) со свойствами:
-
-<dl>
-<dt>`loaded`</dt>
-<dd>Сколько байт уже переслано. 
-
-Имеется в виду только тело запроса, заголовки не учитываются.</dd>
-<dt>`lengthComputable`</dt>
-<dd>Если `true`, то известно полное количество байт для пересылки, и оно хранится в свойстве `total`.</dd>
-<dt>`total`</dt>
-<dd>Общее количество байт для пересылки, если известно.
-
-А может ли оно быть неизвестно? 
-
-<ul>
-<li>При закачке на сервер браузер всегда знает полный размер пересылаемых данных, так что `total` всегда содержит конкретное количество байт, а значение `lengthComputable` всегда будет `true`.</li>
-<li>При скачивании данных -- обычно сервер в начале сообщает их общее количество в HTTP-заголовке `Content-Length`. Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда `total` будет равно `0`. А чтобы отличить нулевой размер данных от неизвестного -- как раз служит `lengthComputable`, которое в данном случае равно `false`.</li>
-</ul>
-</dd>
-</dl>
-
-Ещё особенности, которые необходимо учитывать при использовании `onprogress`:
-
-<ul>
-<li>**Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50мс.**
-
-Это обозначено в [спецификации progress notifications](http://www.w3.org/TR/XMLHttpRequest/#make-progress-notifications).
-</li>
-<li>**В процессе получения данных, ещё до их полной передачи, доступен `xhr.responseText`, но он не обязательно содержит корректную строку.**
-
-Можно до окончания запроса заглянуть в него и прочитать текущие полученные данные. Важно, что при пересылке строки в кодировке UTF-8 кириллические символы, как, впрочем, и многие другие, кодируются 2 байтами. Возможно, что в конце одного пакета данных окажется первая половинка символа, а в начале следующего -- вторая. Поэтому полагаться на то, что до окончания запроса в `responoseText` находится корректная строка нельзя. Она может быть обрезана посередине символа. 
-
-Исключение -- заведомо однобайтные символы, например цифры или латинница.</li>
-<li>**Сработавшее событие `xhr.upload.onprogress` не гарантирует, что данные дошли.**
-
-Событие `xhr.upload.onprogress` срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. Он говорит лишь о самом факте отправки.
-
-Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.</li>
-</ul>
-
-
-## Файлы и формы
-
-Выше мы использовали `xhr.send(file)` для передачи файла непосредственно в теле запроса.
-
-При этом посылается только *содержимое* файла.
-
-Если нужно дополнительно передать имя файла или что-то ещё -- это можно удобно сделать через форму, при помощи объекта [FormData](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects):
-
-Создадим форму `formData` и прибавим к ней поле с файлом `file` и именем `"myfile"`:
-
-```js
-var formData = new FormData();
-formData.append("myfile", file);
-xhr.send(formData);
-```
-
-Данные будут отправлены в кодировке `multipart/form-data`. Серверный фреймворк увидит это как обычную форму с файлом, практически все серверные технологии имеют их встроенную поддержку. Индикация прогресса реализуется точно так же.
-
diff --git a/4-ajax/6-xhr-onprogress/progress.view/index.html b/4-ajax/6-xhr-onprogress/progress.view/index.html
deleted file mode 100644
index 3387d42a..00000000
--- a/4-ajax/6-xhr-onprogress/progress.view/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <head>
-    <meta charset="utf-8">
-  </head>
-  <form name="upload">
-    <input type="file" name="myfile">
-    <input type="submit" value="Загрузить">
-  </form>
-
-  <div id="log">Прогресс загрузки</div>
-
-  <script>
-    function log(html) {
-      document.getElementById('log').innerHTML = html;
-    }
-
-    function onSuccess() {
-      log('success');
-    }
-
-    function onError() {
-      log('error');
-    }
-
-    function onProgress(loaded, total) {
-      log(loaded + ' / ' + total);
-    }
-
-    document.forms.upload.onsubmit = function() {
-      var file = this.elements.myfile.files[0];
-      if (file) {
-        upload(file);
-      }
-      return false;
-    }
-
-
-    function upload(file) {
-
-      var xhr = new XMLHttpRequest();
-
-      // обработчики можно объединить в один,
-      // если status == 200, то это успех, иначе ошибка
-      xhr.onload = xhr.onerror = function() {
-        if (this.status == 200) {
-          log("success");
-        } else {
-          log("error " + this.status);
-        }
-      };
-
-      // обработчик для закачки
-      xhr.upload.onprogress = function(event) {
-        log(event.loaded + ' / ' + event.total);
-      }
-
-      xhr.open("POST", "upload", true);
-      xhr.send(file);
-
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/6-xhr-onprogress/progress.view/server.js b/4-ajax/6-xhr-onprogress/progress.view/server.js
deleted file mode 100644
index 93873957..00000000
--- a/4-ajax/6-xhr-onprogress/progress.view/server.js
+++ /dev/null
@@ -1,38 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-var file = new static.Server('.', {
-  cache: 0
-});
-
-
-function accept(req, res) {
-
-  if (req.url == '/upload') {
-    var length = 0;
-    req.on('data', function(chunk) {
-      // ничего не делаем с приходящими данными, просто считываем
-      length += chunk.length;
-      if (length > 50 * 1024 * 1024) {
-        res.statusCode = 413;
-        res.end("File too big");
-      }
-    }).on('end', function() {
-      res.end('ok');
-    });
-
-  } else {
-    file.serve(req, res);
-  }
-
-}
-
-
-// ------ запустить сервер -------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/7-xhr-resume/article.md b/4-ajax/7-xhr-resume/article.md
deleted file mode 100644
index 43555d8a..00000000
--- a/4-ajax/7-xhr-resume/article.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# XMLHttpRequest: возобновляемая закачка
-
-Современный `XMLHttpRequest` даёт возможность загружать файл как угодно: во множество потоков, с догрузкой, с подсчётом контрольной суммы и т.п.
-
-Здесь мы рассмотрим общий подход к организации загрузки, а его уже можно расширять, адаптировать к своему фреймворку и так далее. 
-
-Поддержка -- все браузеры кроме IE9-.
-
-[cut]
-
-## Неточный upload.onprogress
-
-Ранее мы рассматривали загрузку с индикатором прогресса. Казалось бы, сделать возобновляемую загрузку на его основе очень просто. 
-
-Есть же `xhr.upload.onprogress` -- ставим на него обработчик, по свойству `loaded`  события `onprogress` смотрим, сколько байт загрузилось. А при обрыве -- возобновляем загрузку с последнего байта. 
-
-К счастью, отослать на сервер не весь файл, а только нужную часть его -- не проблема, [File API](http://www.w3.org/TR/FileAPI/) позволяет прочитать выбранный участок из файла и отправить его.
-
-Примерно так:
-
-```js
-var slice = file.slice(10, 100); // прочитать байты с 10го по 99й включительно
-
-xhr.send(slice); // ... и отправить эти байты в запросе.
-```
-
-...Но такая модель не жизнеспособна! 
-
-Всё дело в том, что `upload.onprogress` срабатывает, когда байты *отправлены*, но были ли они получены сервером -- браузер не знает. Может, их прокси-сервер забуферизовал, может серверный процесс "упал" в процессе обработки, может соединение порвалось и байты так и не дошли до получателя. 
-
-**Поэтому `onprogress` годится лишь для красивенького рисования прогресса.**
-
-Для загрузки нам нужно точно знать количество загруженных байт. Это может сообщить только сервер.
-
-## Алгоритм возобновляемой загрузки
-
-Загрузкой файла будет заведовать объект `Uploader`, его примерный общий вид:
-
-```js
-function Uploader(file, onSuccess, onFail, onProgress) {
-
-  var fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
-
-  var errorCount = 0;
-
-  var MAX_ERROR_COUNT = 6;
-
-  function upload() {
-    ...
-  }
-
-  function pause() {
-    ...
-  }
-
-  this.upload = upload;
-  this.pause = pause;
-}
-```
-
-
-<ul>
-<li>Аргументы для `new Uploader`:
-<dl>
-<dt>`file`</dt>
-<dd>Объект File API. Может быть получен из формы, либо как результат Drag'n'Drop.<dd>
-<dt>`onSuccess`, `onFail`, `onProgress`</dt>
-<dd>Функции-коллбэки, которые будут вызываться в процессе (`onProgress`) и при окончании загрузки.</dd>
-</dl>
-</li>
-<li>Подробнее про важные данные, с которыми мы будем работать в процессе загрузки:
-
-<dl>
-<dt>`fileId`</dt>
-<dd>Уникальный идентификатор файла, генерируется по имени, размеру и дате модификации. По нему мы всегда сможем возобновить загрузку, в том числе и после закрытия и открытия браузера.</dd>
-<dt>`startByte`</dt>
-<dd>С какого байта загружать. Изначально -- с нулевого.</dd>
-<dt>`errorCount / MAX_ERROR_COUNT`</dt>
-<dd>Текущее число ошибок / максимальное число ошибок подряд, после которого загрузка считается проваленной.</dd>
-</dl>
-</li>
-</ul>
-
-Алгоритм загрузки:
-
-<ol>
-<li>Генерируем `fileId` из названия, размера, даты модификации файла. Можно добавить и идентификатор посетителя.</li>
-<li>Спрашиваем сервер, есть ли уже такой файл, и если да - сколько байт уже загружено?</li>
-<li>Отсылаем файл с позиции, которую сказал сервер.</li>
-</ol>
-
-При этом загрузку можно прервать в любой момент, просто оборвав все запросы.
-
-Демо ниже, к сожалению, работает лишь частично, так как на этом сайте Node.JS стоит за сервером Nginx, который буферизует все закачки, не передавая их в Node.JS до полного завершения.
-
-Вы можете можете скачать пример и запустить локально для полноценной демонстрации: 
-
-[codetabs src="upload-resume" height=160]
-
-Полный код включает также сервер на Node.JS с функциям `onUpload` -- начало и возобновление загрузки, а также `onStatus` -- для получения состояния загрузки.
-
-## Итого
-
-Мы рассмотрели довольно простой алгоритм возобновляемой загрузки.
-
-Его можно усложнить: 
-<ul>
-<li>добавить подсчёт контрольных сумм, проверку целостности пересылаемых файлов,</li>
-<li>для индикации прогресса вместо неточного `xhr.upload.onprogress` -- сделать дополнительный запрос к серверу, в который тот будет отдавать текущий прогресс.</li>
-<li>разбивать файл на части и грузить в несколько потоков, несколькими параллельными запросами.</li>
-</ul>
-
-Как можно видеть, возможности современного XMLHttpRequest в плане загрузки файлов приближаются к полноценному файловому менеджеру -- полный контроль над заголовками, индикатор прогресса и т.п. 
-
diff --git a/4-ajax/7-xhr-resume/upload-resume.view/index.html b/4-ajax/7-xhr-resume/upload-resume.view/index.html
deleted file mode 100644
index 9a0a6db0..00000000
--- a/4-ajax/7-xhr-resume/upload-resume.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <head>
-    <meta charset="utf-8">
-    <script src="uploader.js"></script>
-  </head>
-  <form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
-    <input type="file" name="myfile">
-    <input type="submit" name="submit" value="Загрузить">
-  </form>
-
-  <button onclick="uploader.pause()">Пауза</button>
-
-
-  <div id="log">Индикация прогресса</div>
-
-  <script>
-    function log(html) {
-      document.getElementById('log').innerHTML = html;
-      //console.log(html);
-    }
-
-    function onSuccess() {
-      log('success');
-    }
-
-    function onError() {
-      log('error');
-    }
-
-    function onProgress(loaded, total) {
-      log("progress " + loaded + ' / ' + total);
-    }
-
-    var uploader;
-
-    document.forms.upload.onsubmit = function() {
-      var file = this.elements.myfile.files[0];
-      if (!file) return false;
-
-      uploader = new Uploader(file, onSuccess, onError, onProgress);
-      uploader.upload();
-      return false;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/7-xhr-resume/upload-resume.view/server.js b/4-ajax/7-xhr-resume/upload-resume.view/server.js
deleted file mode 100644
index b37553e1..00000000
--- a/4-ajax/7-xhr-resume/upload-resume.view/server.js
+++ /dev/null
@@ -1,119 +0,0 @@
-var http = require('http');
-var static = require('node-static');
-var fileServer = new static.Server('.');
-var path = require('path');
-var fs = require('fs');
-
-var uploads = {};
-
-function onUpload(req, res) {
-
-  var fileId = req.headers['x-file-id'];
-  var startByte = req.headers['x-start-byte'];
-
-  if (!fileId) {
-    res.writeHead(400, "No file id");
-    res.end();
-  }
-
-  // файлы будм записывать "в никуда"
-  var filePath = '/dev/null';
-  // можно положить файл и в реальное место
-  // var filePath = path.join('/tmp', fileId); 
-
-  console.log("onUpload fileId: ", fileId);
-
-  // инициализация новой загрузки
-  if (!uploads[fileId]) uploads[fileId] = {};
-  var upload = uploads[fileId];
-
-  console.log("bytesReceived:" + upload.bytesReceived + " startByte:" + startByte)
-
-  // если байт 0, то создать новый файл, иначе проверить размер и дописать
-  if (startByte == 0) {
-    upload.bytesReceived = 0;
-    var fileStream = fs.createWriteStream(filePath, {
-      flags: 'w'
-    });
-    console.log("New file created: " + filePath);
-  } else {
-    if (upload.bytesReceived != startByte) {
-      res.writeHead(400, "Wrong start byte");
-      res.end(upload.bytesReceived);
-      return;
-    }
-    // добавляем в существующий файл
-    fileStream = fs.createWriteStream(filePath, {
-      flags: 'a'
-    });
-    console.log("File reopened: " + filePath);
-  }
-
-
-  req.on('data', function(data) {
-    upload.bytesReceived += data.length;
-  });
-
-  // отправить тело запроса в файл
-  req.pipe(fileStream);
-
-  // в конце -- событие end
-  fileStream.on('close', function() {
-    if (upload.bytesReceived == req.headers['x-file-size']) {
-      // полностью загрузили
-      console.log("File finished");
-      delete uploads[fileId];
-
-      // при необходимости - обработать завершённую загрузку файла
-
-      res.end("Success " + upload.bytesReceived);
-    } else {
-      // соединение оборвано, дескриптор закрылся но файл оставляем
-      console.log("File unfinished, stopped at " + upload.bytesReceived);
-      res.end();
-    }
-  });
-
-  // при ошибках - завершение запроса
-  fileStream.on('error', function(err) {
-    console.log("fileStream error");
-    res.writeHead(500, "File error");
-    res.end();
-  });
-
-}
-
-function onStatus(req, res) {
-  var fileId = req.headers['x-file-id'];
-  var upload = uploads[fileId];
-  console.log("onStatus fileId:", fileId, " upload:", upload);
-  if (!upload) {
-    res.end("0")
-  } else {
-    res.end(String(upload.bytesReceived));
-  }
-}
-
-
-function accept(req, res) {
-  if (req.url == '/status') {
-    onStatus(req, res);
-  } else if (req.url == '/upload' && req.method == 'POST') {
-    onUpload(req, res);
-  } else {
-    fileServer.serve(req, res);
-  }
-
-}
-
-
-
-
-// -----------------------------------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-  console.log('Сервер запущен на порту 8080');
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/7-xhr-resume/upload-resume.view/uploader.js b/4-ajax/7-xhr-resume/upload-resume.view/uploader.js
deleted file mode 100644
index 2aab5f49..00000000
--- a/4-ajax/7-xhr-resume/upload-resume.view/uploader.js
+++ /dev/null
@@ -1,105 +0,0 @@
-function Uploader(file, onSuccess, onFail, onProgress) {
-
-  // fileId уникальным образом идентифицирует файл
-  // можно добавить идентификатор сессии посетителя, но он и так будет в заголовках
-  var fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
-
-  // сделать из fileId число (хеш, алгоритм неважен), мы будем передавать его в заголовке,
-  // в заголовках разрешены только ASCII-символы
-  fileId = hashCode(fileId);
-
-  var errorCount = 0;
-
-  // если количество ошибок подряд превысит MAX_ERROR_COUNT, то стоп
-  var MAX_ERROR_COUNT = 6;
-
-  var startByte = 0;
-
-  var xhrUpload;
-  var xhrStatus;
-
-  function upload() {
-    console.log("upload: check status");
-    xhrStatus = new XMLHttpRequest();
-
-    xhrStatus.onload = xhrStatus.onerror = function() {
-
-      if (this.status == 200) {
-        startByte = +this.responseText || 0;
-        console.log("upload: startByte=" + startByte);
-        send();
-        return;
-      }
-
-      // что-то не так
-      if (errorCount++ < MAX_ERROR_COUNT) {
-        setTimeout(upload, 1000 * errorCount); // через 1 сек пробуем ещё раз
-      } else {
-        onError(this.statusText);
-      }
-
-    };
-
-    xhrStatus.open("GET", "status", true);
-    xhrStatus.setRequestHeader('X-File-Id', fileId);
-    xhrStatus.send();
-  }
-
-
-  function send() {
-
-    xhrUpload = new XMLHttpRequest();
-    xhrUpload.onload = xhrUpload.onerror = function() {
-      console.log("upload end status:" + this.status + " text:" + this.statusText);
-
-      if (this.status == 200) {
-        // успешное завершение загрузки
-        onSuccess();
-        return;
-      }
-
-      // что-то не так
-      if (errorCount++ < MAX_ERROR_COUNT) {
-        setTimeout(resume, 1000 * errorCount); // через 1,2,4,8,16 сек пробуем ещё раз
-      } else {
-        onError(this.statusText);
-      }
-    };
-
-    xhrUpload.open("POST", "upload", true);
-    // какой файл догружаем /загружаем
-    xhrUpload.setRequestHeader('X-File-Id', fileId);
-
-    xhrUpload.upload.onprogress = function(e) {
-      errorCount = 0;
-      onProgress(startByte + e.loaded, startByte + e.total);
-    }
-
-    // отослать, начиная с байта startByte
-    xhrUpload.send(file.slice(startByte));
-  }
-
-  function pause() {
-    xhrStatus && xhrStatus.abort();
-    xhrUpload && xhrUpload.abort();
-  }
-
-
-  this.upload = upload;
-  this.pause = pause;
-}
-
-// вспомогательная функция: получение 32-битного числа из строки
-
-function hashCode(str) {
-  if (str.length == 0) return 0;
-
-  var hash = 0,
-    i, chr, len;
-  for (i = 0; i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-};
\ No newline at end of file
diff --git a/4-ajax/8-xhr-longpoll/article.md b/4-ajax/8-xhr-longpoll/article.md
deleted file mode 100644
index 1b6864fd..00000000
--- a/4-ajax/8-xhr-longpoll/article.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# COMET с XMLHttpRequest: длинные опросы
-
-В этой главе мы рассмотрим способ организации COMET, то есть непрерывного получения данных с сервера, который очень прост и подходит в 90% реальных случаев.
-
-[cut]
-
-## Частые опросы
-
-Первое решение, которое приходит в голову для непрерывного получения событий с сервера -- это "частые опросы" (polling), т.е периодические запросы на сервер: "эй, я тут, изменилось ли что-нибудь?". Например, раз в 10 секунд.
-
-В ответ сервер во-первых помечает у себя, что клиент онлайн, а во-вторых посылает сообщение, в котором в специальном формате содержится весь пакет событий, накопившихся к данному моменту.
-
-При этом, однако, возможна задержка между появлением и получением данных, как раз в размере этих 10 секунд между запросами.
-
-Другой минус -- лишний входящий трафик на сервер. При каждом запросе браузер передает множество заголовков и в ответ получает, кроме данных, также заголовки. Для некоторых приложений трафик заголовков может в 10 и более раз превосходить трафик реальных данных.
-
-[compare]
--Задержки между событием и уведомлением.
--Лишний трафик и запросы на сервер.
-+Простота реализации.
-[/compare]
-
-Причём, простота реализации тут достаточно условная. Клиентская часть -- довольно проста, а вот сервер получает сразу большой поток запросов. 
-
-Даже если клиент ушёл пить чай -- его браузер каждые 10 секунд будет "долбить" сервер запросами. Готов ли сервер к такому? 
-
-## Длинные опросы
-
-Длинные опросы -- отличная альтернатива частым опросам. Они также удобны в реализации, и при этом сообщения доставляются без задержек.
-
-Схема:
-<ol>
-<li>Отправляется запрос на сервер.</li>
-<li>Соединение не закрывается сервером, пока не появится сообщение.</li>
-<li>Когда сообщение появилось -- сервер отвечает на запрос, пересылая данные.</li>
-<li>Браузер тут же делает новый запрос.</li>
-</ol>
-
-Ситуация, когда браузер отправил запрос и держит соединение с сервером, ожидая ответа, является стандартной и прерывается только доставкой сообщений.
-
-Схема коммуникации:
-
-<img src="longpoll.png">
-
-При этом если соединение рвётся само, например, из-за ошибки в сети, то браузер тут же отсылает новый запрос.
-
-Примерный код клиентской части:
-
-```js
-function subscribe(url) {
-  var xhr = new XMLHttpRequest();
-
-  xhr.onreadystatechange = function() {
-    if (this.readyState != 4) return;
-
-    if (this.status == 200) {
-      onMessage(this.responseText);
-    } else {
-      onError(this);
-    }
-
-    subscribe(url);
-  }
-  xhr.open("GET", url, true);
-  xhr.send();
-}
-```
-
-Функция `subscribe` делает запрос, при ответе обрабатывает результат, и тут же запускает процесс по новой.
-
-Сервер, конечно же, должен уметь работать с большим количеством таких "ожидающих" соединений.
-
-## Демо: чат
-
-Демо:
-
-[codetabs src="longpoll" height=500]
-
-## Область применения
-
-Длинные опросы отлично работают в тех случаях, когда сообщения приходят редко. 
-
-При большом количестве частых сообщений график приёма-отправки, приведённый выше, превращается в "пилу". Каждое сообщение -- это новый запрос, дополнительный трафик заголовков.
-
-В этих случаях используются другие способы получения данных, подразумевающие непрерывное соединение с сервером. Мы рассмотрим их в следующих главах.
-
-
-
diff --git a/4-ajax/8-xhr-longpoll/longpoll.png b/4-ajax/8-xhr-longpoll/longpoll.png
deleted file mode 100644
index 5d86d5b3..00000000
Binary files a/4-ajax/8-xhr-longpoll/longpoll.png and /dev/null differ
diff --git a/4-ajax/8-xhr-longpoll/longpoll.view/browser.js b/4-ajax/8-xhr-longpoll/longpoll.view/browser.js
deleted file mode 100644
index f4b20d96..00000000
--- a/4-ajax/8-xhr-longpoll/longpoll.view/browser.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// Посылка запросов -- обычными XHR POST
-function PublishForm(form, url) {
-
-  function sendMessage(message) {
-    var xhr = new XMLHttpRequest();
-    xhr.open("POST", url, true);
-    // просто отсылаю сообщение "как есть" без кодировки
-    // если бы было много данных, то нужно было бы отослать JSON из объекта с ними
-    // или закодировать их как-то иначе
-    xhr.send(message);
-  }
-
-  form.onsubmit = function() {
-    var message = form.message.value;
-    if (message) {
-      form.message.value = '';
-      sendMessage(message);
-    }
-    return false;
-  };
-}
-
-// Получение сообщений, COMET
-function SubscribePane(elem, url) {
-
-  function showMessage(message) {
-    var messageElem = document.createElement('div');
-    messageElem.appendChild(document.createTextNode(message));
-    elem.appendChild(messageElem);
-  }
-
-  function subscribe() {
-    var xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function() {
-      if (this.readyState != 4) return;
-
-      console.log(this);
-      if (this.status == 200) {
-        showMessage(this.responseText);
-        subscribe();
-        return;
-      }
-
-      if (this.status != 404) { // 404 может означать, что сервер перезагружается
-        showMessage(this.statusText); // показать ошибку
-      }
-
-      setTimeout(subscribe, 1000); // попробовать ещё раз через 1 сек
-    }
-    xhr.open("GET", url, true);
-    xhr.send();
-  }
-
-  subscribe();
-
-}
\ No newline at end of file
diff --git a/4-ajax/8-xhr-longpoll/longpoll.view/index.html b/4-ajax/8-xhr-longpoll/longpoll.view/index.html
deleted file mode 100644
index aea33e4f..00000000
--- a/4-ajax/8-xhr-longpoll/longpoll.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="browser.js"></script>
-</head>
-
-<body>
-
-  Несколько человек при заходе на эту страницу будут получать сообщения друг друга.
-
-  <form name="publish">
-    <input type="text" name="message" />
-    <input type="submit" value="Отправить" />
-  </form>
-
-  <div id="subscribe">
-  </div>
-
-  <script>
-    new PublishForm(document.forms.publish, 'publish');
-    // random url to fix https://code.google.com/p/chromium/issues/detail?id=46104
-    new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/4-ajax/8-xhr-longpoll/longpoll.view/server.js b/4-ajax/8-xhr-longpoll/longpoll.view/server.js
deleted file mode 100644
index cb02a856..00000000
--- a/4-ajax/8-xhr-longpoll/longpoll.view/server.js
+++ /dev/null
@@ -1,76 +0,0 @@
-var http = require('http');
-var url = require('url');
-var querystring = require('querystring');
-var static = require('node-static');
-
-var fileServer = new static.Server('.');
-
-var subscribers = {};
-
-function onSubscribe(req, res) {
-  var id = Math.random();
-
-  res.setHeader('Content-Type', 'text/plain;charset=utf-8');
-  res.setHeader("Cache-Control", "no-cache, must-revalidate");
-
-  subscribers[id] = res;
-  //console.log("новый клиент " + id + ", клиентов:" + Object.keys(subscribers).length);
-
-  req.on('close', function() {
-    delete subscribers[id];
-    //console.log("клиент "+id+" отсоединился, клиентов:" + Object.keys(subscribers).length);
-  });
-
-}
-
-function publish(message) {
-
-  //console.log("есть сообщение, клиентов:" + Object.keys(subscribers).length);    
-
-  for (var id in subscribers) {
-    //console.log("отсылаю сообщение " + id);
-    var res = subscribers[id];
-    res.end(message);
-  }
-
-  subscribers = {};
-}
-
-function accept(req, res) {
-  var urlParsed = url.parse(req.url, true);
-
-  // новый клиент хочет получать сообщения
-  if (urlParsed.pathname == '/subscribe') {
-    onSubscribe(req, res); // собственно, подписка
-    return;
-  }
-
-  // отправка сообщения
-  if (urlParsed.pathname == '/publish' && req.method == 'POST') {
-    // принять POST-запрос
-    req.setEncoding('utf8');
-    var message = '';
-    req.on('data', function(chunk) {
-      message += chunk;
-    }).on('end', function() {
-      publish(message); // собственно, отправка
-      res.end("ok");
-    });
-
-    return;
-  }
-
-  // всё остальное -- статика
-  fileServer.serve(req, res);
-
-}
-
-
-// -----------------------------------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-  console.log('Сервер запущен на порту 8080');
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/4-ajax/9-websockets/article.md b/4-ajax/9-websockets/article.md
deleted file mode 100644
index 9fe46bff..00000000
--- a/4-ajax/9-websockets/article.md
+++ /dev/null
@@ -1,493 +0,0 @@
-# WebSocket 
-
-Протокол `WebSocket` (стандарт [RFC 6455](http://tools.ietf.org/html/rfc6455)) предназначен для решения любых задач и снятия ограничений обмена данными между браузером и сервером.
-
-Он позволяет пересылать любые данные, на любой домен, безопасно и почти без лишнего сетевого трафика.
-
-[cut]
-
-## Пример браузерного кода
-
-Для открытия соединения достаточно создать объект `WebSocket`, указав в нём специальный протокол `ws`.:
-
-```js
-var socket = new WebSocket("*!*ws*/!*://javascript.ru/ws");
-```
-
-У объекта `socket` есть четыре коллбэка: один при получении данных и три -- при изменениях в состоянии соединения:
-
-```js
- 
-*!*socket.onopen*/!* = function() { 
-  alert("Соединение установлено."); 
-};
-
-*!*socket.onclose*/!* = function(event) { 
-  if (event.wasClean) {
-    alert('Соединение закрыто чисто');
-  } else {
-    alert('Обрыв соединения'); // например, "убит" процесс сервера
-  }
-  alert('Код: ' + event.code + ' причина: ' + event.reason);
-};
- 
-*!*socket.onmessage*/!* = function(event) { 
-  alert("Получены данные " + event.data);
-};
-
-*!*socket.onerror*/!* = function(error) { 
-  alert("Ошибка " + error.message); 
-};
-```
-
-**Для посылки данных используется метод `socket.send(data)`. Пересылать можно любые данные.** 
-
-Например, строку:
-
-```js
-socket.send("Привет");
-```
-
-...Или файл, выбранный в форме:
-
-```js
-socket.send(*!*form.elements[0].file*/!*);
-```
-
-Просто, не правда ли? Выбираем, что переслать, и `socket.send()`.
-
-**Для того, чтобы коммуникация была успешной, сервер должен поддерживать протокол WebSocket.**
-
-Чтобы лучше понимать происходящее -- посмотрим, как он устроен.
-
-## Установление WebSocket-соединения
-
-Протокол `WebSocket` работает *над* HTTP.
-
-Это означает, что при соединении браузер отправляет специальные заголовки, спрашивая: "поддерживает ли сервер WebSocket?".
-
-Если сервер в ответных заголовках отвечает "да, поддерживаю", то дальше HTTP прекращается и общение идёт на специальном протоколе WebSocket, который уже не имеет с HTTP ничего общего.
-
-### Установление соединения
-
-Пример запроса от браузера при создании нового объекта `new WebSocket("ws://server.example.com/chat")`:
-
-```
-GET /chat HTTP/1.1
-Host: server.example.com
-Upgrade: websocket
-Connection: Upgrade
-Origin: http://javascript.ru
-Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
-Sec-WebSocket-Version: 13
-```
-
-Описания заголовков:
-<dl>
-<dt>GET, Host</dt>
-<dd>Стандартные HTTP-заголовки из URL запроса</dd>
-<dt>Upgrade, Connection</dt>
-<dd>Указывают, что браузер хочет перейти на websocket.</dd>
-<dt>Origin</dt>
-<dd>Протокол, домен и порт, откуда отправлен запрос.</dd>
-<dt>Sec-WebSocket-Key</dt>
-<dd>Случайный ключ, который генерируется браузером: 16 байт в кодироке [Base64](http://ru.wikipedia.org/wiki/Base64).</dd>
-<dt>Sec-WebSocket-Version</dt>
-<dd>Версия протокола. Текущая версия: 13.</dd>
-</dl>
-
-Все заголовки, кроме `GET` и `Host`, браузер генерирует сам, без возможности вмешательства JavaScript.
-
-[smart header="Такой XMLHttpRequest создать нельзя"]
-Создать подобный XMLHttpRequest-запрос (подделать `WebSocket`) невозможно, по одной  простой причине: указанные выше заголовки запрещены к установке методом `setRequestHeader`.
-[/smart]
-
-**Сервер может проанализировать эти заголовки и решить, разрешает ли он `WebSocket` с данного домена `Origin`.**
-
-Ответ сервера, если он понимает и разрешает `WebSocket`-подключение:
-
-```
-HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=
-```
-
-Здесь строка `Sec-WebSocket-Accept` представляет собой перекодированный по специальному алгоритму ключ `Sec-WebSocket-Key`. Браузер использует её для проверки, что ответ предназначается именно ему.
-
-Затем данные передаются по специальному протоколу, структура которого ("фреймы") изложена далее. И это уже совсем не HTTP.
-
-### Расширения и подпротоколы
-Также возможны дополнительные заголовки `Sec-WebSocket-Extensions` и `Sec-WebSocket-Protocol`, описывающие расширения и подпротоколы (subprotocol), которые поддерживает данный клиент.
-
-Посмотрим разницу между ними на двух примерах:
-<ul>
-<li>Заголовок `Sec-WebSocket-Extensions: deflate-frame` означает, что браузер поддерживает модификацию протокола, обеспечивающую сжатие данных. 
-
-Это говорит не о самих данных, а об улучшении способа их передачи. Браузер сам формирует этот заголовок.</li>
-<li>Заголовок `Sec-WebSocket-Protocol: soap, wamp` говорит о том, что по WebSocket браузер собирается передавать не просто какие-то данные, а данные в протоколах [SOAP](http://ru.wikipedia.org/wiki/SOAP) или WAMP ("The WebSocket Application Messaging Protocol"). Стандартные подпротоколы регистрируются в специальном каталоге [IANA](http://www.iana.org/assignments/websocket/websocket.xml).
-
-Этот заголовок браузер поставит, если указать второй необязательный параметр `WebSocket`:
-
-```js
- 
-var socket = new WebSocket("*!*ws*/!*://javascript.ru/ws", ["soap", "wamp"]);
-```
-
-</li>
-</ul>
-
-При наличии таких заголовков сервер может выбрать расширения и подпротоколы, которые он поддерживает, и ответить с ними.
-
-Например, запрос:
-
-```
-GET /chat HTTP/1.1
-Host: server.example.com
-Upgrade: websocket
-Connection: Upgrade
-Origin: http://javascript.ru
-Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
-Sec-WebSocket-Version: 13
-*!*
-Sec-WebSocket-Extensions: deflate-frame
-Sec-WebSocket-Protocol: soap, wamp
-*/!*
-```
-
-Ответ:
-
-```
-HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=
-*!*
-Sec-WebSocket-Extensions: deflate-frame
-Sec-WebSocket-Protocol: soap
-*/!*
-```
-
-В ответе выше сервер указывает, что поддерживает расширение `deflate-frame`, а из запрошенных подпротоколов -- только SOAP.
-
-### WSS
-
-Соединение `WebSocket` можно открывать как `WS://` или как `WSS://`. Протокол `WSS` представляет собой WebSocket над HTTPS.
-
-**Кроме большей безопасности, у `WSS` есть важное преимущество перед обычным `WS` -- большая вероятность соединения.**
-
-Дело в том, что HTTPS шифрует трафик от клиента к серверу, а HTTP -- нет.
-
-Если между клиентом и сервером есть прокси, то в случае с HTTP все WebSocket-заголовки и данные передаются через него. Прокси имеет к ним доступ, ведь они никак не шифруются, и может расценить происходящее как нарушение протокола HTTP, обрезать заголовки или оборвать передачу.
-
-А в случае с `WSS` весь трафик сразу кодируется и через прокси проходит уже в закодированном виде. Поэтому заголовки гарантированно пройдут, и общая вероятность соединения через `WSS` выше, чем через `WS`.
-
-## Формат данных
-
-Полное описание протокола содержится в [RFC 6455](http://tools.ietf.org/html/rfc6455).
-
-Здесь представлено частичное описание с комментариями самых важных его частей. Если вы хотите понять стандарт, то рекомендуется сначала прочитать это описание.
-
-### Описание фрейма
-
-В протоколе WebSocket предусмотрены несколько видов пакетов ("фреймов").
-
-Они делятся на два больших типа: фреймы с данными ("data frames") и управляющие ("control frames"), предназначенные для проверки связи (PING) и закрытия соединения.
-
-Фрейм, согласно стандарту, выглядит так:
-
-<pre>
-    0                   1                   2                   3
-    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-   +-+-+-+-+-------+-+-------------+-------------------------------+
-   |F|R|R|R| опкод |М| Длина тела  |    Расширенная длина тела     |
-   |I|S|S|S|(4бита)|А|   (7бит)    |            (1 байт)           |
-   |N|V|V|V|       |С|             |(если длина тела==126 или 127) |
-   | |1|2|3|       |К|             |                               |
-   | | | | |       |А|             |                               |  
-   +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-   |  Продолжение расширенной длины тела, если длина тела = 127    |
-   + - - - - - - - - - - - - - - - +-------------------------------+
-   |                               |  Ключ маски, если МАСКА = 1   |
-   +-------------------------------+-------------------------------+
-   | Ключ маски (продолжение)      |       Данные фрейма ("тело")  |
-   +-------------------------------- - - - - - - - - - - - - - - - +
-   :                     Данные продолжаются ...                   :
-   + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-   |                     Данные продолжаются ...                   |
-   +---------------------------------------------------------------+
-</pre>
-
-С виду -- не очень понятно, во всяком случае, для большинства людей.
-
-**Позвольте пояснить: читать следует слева-направо, сверху-вниз, каждая горизонтальная полоска это 32 бита.**
-
-То есть, вот первые 32 бита:
-
-<pre>
-    0                   1                   2                   3
-    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-   +-+-+-+-+-------+-+-------------+-------------------------------+
-   |F|R|R|R| опкод |М| Длина тела  |    Расширенная длина тела     |
-   |I|S|S|S|(4бита)|А|   (7бит)    |            (1 байт)           |
-   |N|V|V|V|       |С|             |(если длина тела==126 или 127) |
-   | |1|2|3|       |К|             |                               |
-   | | | | |       |А|             |                               |  
-   +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-</pre>
-
-Сначала идёт бит FIN (вертикальная надпись на рисунке), затем биты RSV1, RSV2, RSV3 (их смысл раскрыт ниже), затем "опкод", "МАСКА" и, наконец,  "Длина тела", которая занимает 7 бит. Затем, если "Длина тела" равна 126 или 127, идёт "Расширенная длина тела", потом (на следующей строке, то есть после первых 32 бит) будет её продолжение, ключ маски, и потом данные.
-
-А теперь -- подробное описание частей фрейма, то есть как именно передаются сообщения:
-
-<dl>
-<dt>FIN: 1 бит</dt>
-<dd>Одно сообщение, если оно очень длинное (вызовом `send` можно передать хоть целый файл), может состоять из множества фреймов ("быть фрагментированным"). 
-
-У всех фреймов, кроме последнего, этот фрагмент установлен в `0`, у последнего -- в `1`. 
-
-Если сообщение состоит из одного-единственного фрейма, то он в нём `FIN` равен `1`.</dd>
-<dt>RSV1, RSV2, RSV3:  1 бит каждый</dt>
-<dd>В обычном WebSocket равны `0`, предназначены для расширений протокола. Расширение может записать в эти биты свои значения.</dd>
-<dt>Опкод: 4 бита</dt>
-<dd>Задаёт тип фрейма, который позволяет интерпретировать находящиеся в нём данные. Возможные значения:
-<ul>
-<li>`0x1` обозначает текстовый фрейм.</li>
-<li>`0x2` обозначает двоичный фрейм.</li>
-<li>`0x3-7` зарезервированы для будущих фреймов с данными.</li>
-<li>`0x8` обозначает закрытие соединения этим фреймом.</li>
-<li>`0x9` обозначат PING.</li>
-<li>`0xA` обозначат PONG.</li>
-<li>`0xB-F` зарезервированы для будущих управляющих фреймов.</li>
-<li>`0x0` обозначает фрейм-продолжение для фрагментированного сообщения. Он интерпретируется, исходя из ближайшего предыдущего ненулевого типа.</li>
-</ul>
-</dd>
-<dt>Маска: 1 бит</dt>
-<dd>Если этот бит установлен, то данные фрейма маскированы. Более подробно маску и маскирование мы рассмотрим далее.</dd>
-<dt>Длина тела:  7 битов, 7+16 битов, или 7+64 битов</dt>
-<dd>Если значение поле "Длина тела" лежит в интервале `0-125`, то оно обозначает длину тела (используется далее). 
-Если `126`, то следующие 2 байта интерпретируются как 16-битное беззнаковое целое число, содержащее длину тела.
-Если `127`, то следующие 8 байт интерпретируются как 64-битное беззнаковое целое, содержащее длину. 
-
-Такая хитрая схема нужна, чтобы минимизировать накладные расходы. Для сообщений длиной `125` байт и меньше хранение длины потребует всего 7 битов, для бóльших (до 65536) -- 7 битов + 2 байта, ну а для ещё бóльших -- 7 битов и 8 байт. Этого хватит для хранения длины сообщения размером в гигабайт и более.</dd>
-<dt>Ключ маски: 4 байта.</dt>
-<dd>Если бит `Маска` установлен в 0, то этого поля нет. Если в `1` то эти байты содержат маску, которая налагается на тело (см. далее).</dd>
-<dt>Данные фрейма (тело)</dt>
-<dd>Состоит из "данных расширений" и "данных приложения", которые идут за ними. Данные расширений определяются конкретными расширениями протокола и по умолчанию отсутствуют. Длина тела должна быть равна указанной в заголовке.</dd>
-</dl>
-
-### Примеры
-
-Некоторые примеры сообщений:
-
-<ul>
-<li>Нефрагментированное текстовое сообщение `Hello` без маски:
-
-```
-0x81 0x05 0x48 0x65 0x6c 0x6c 0x6f (содержит "Hello")
-```
-
-В заголовке первый байт содержит `FIN=1` и `опкод=0x1` (получается `10000001` в двоичной системе, то есть `0x81` -- в 16-ричной), далее идёт длина `0x5`, далее текст.
-</li>
-<li>Фрагментированное текстовое сообщение `Hello World` из трёх частей, без маски, может выглядеть так:
-
-```
-0x01 0x03 0x48 0x65 0x6c 0x6c 0x6f (содержит "Hello")
-0x00 0x01 0x20 (содержит " ")
-0x80 0x05 0x57 0x6f 0x72 0x6c 0x64 (содержит "World")
-```
-
-<ol>
-<li>У первого фрейма `FIN=0` и текстовый опкод `0x1`.</li>
-<li>У второго `FIN=0` и опкод `0x0`. При фрагментации сообщения, у всех фреймов, кроме первого, опкод пустой (он один на всё сообщение).</li>
-<li>У третьего, последнего фрейма `FIN=1`.</li>
-</ol>
-</li>
-</ul>
-
-А теперь посмотрим на все те замечательные возможности, которые даёт этот формат фрейма.
-
-### Фрагментация
-
-Позволяет отправлять сообщения в тех случаях, когда на момент начала посылки полный размер ещё неизвестен. 
-
-Например, идёт поиск в базе данных и что-то уже найдено, а что-то ещё может быть позже.
-
-<ul>
-<li>У всех сообщений, кроме последнего, бит `FIN=0`.</li>
-<li>Опкод указывается только у первого, у остальных он должен быть равен `0x0`.</li>
-</ul>
-
-### PING / PONG
-
-В протокол встроена проверка связи при помощи управляющих фреймов типа PING и PONG.
-
-Тот, кто хочет проверить соединение, отправляет фрейм PING с произвольным телом. Его получатель должен в разумное время ответить фреймом PONG с тем же телом.
-
-Этот функционал встроен в браузерную реализацию, так что браузер ответит на PING сервера, но управлять им из JavaScript нельзя. 
-
-**Иначе говоря, сервер всегда знает, жив ли посетитель или у него проблема с сетью.**
-
-### Чистое закрытие
-
-При закрытии соединения сторона, желающая это сделать (обе стороны в WebSocket равноправны) отправляет закрывающий фрейм (опкод `0x8`), в теле которого указывает причину закрытия.
-
-В браузерной реализации эта причина будет содержаться в свойстве `reason` события `onclose`.
-
-**Наличие такого фрейма позволяет отличить "чистое закрытие" от обрыва связи.**
-
-В браузерной реализации событие `onclose` при чистом закрытии имеет `event.wasClean = true`.
-
-### Коды закрытия
-
-Коды закрытия вебсокета `event.code`, чтобы не путать их с HTTP-кодами, состоят из 4 цифр:
-
-<dl>
-<dt>`1000`</dt>
-<dd>Нормальное закрытие.</dd>
-<dt>`1001`</dt>
-<dd>Удалённая сторона "исчезла". Например, процесс сервера убит или браузер перешёл на другую страницу.</dd>
-<dt>`1002`</dt>
-<dd>Удалённая сторона завершила соединение в связи с ошибкой протокола.</dd>
-<dt>`1003`</dt>
-<dd>Удалённая сторона завершила соединение в связи с тем, что она получила данные, которые не может принять. Например, сторона, которая понимает только текстовые данные, может закрыть соединение с таким кодом, если приняла бинарное сообщение.</dd>
-</dl>
-
-### Атака "отравленный кэш"
-
-В ранних реализациях WebSocket существовала уязвимость, называемая "отравленный кэш" (cache poisoning).
-
-**Она позволяла атаковать кэширующие прокси-сервера, в частности, корпоративные.**
-
-Атака осуществлялась так:
-
-<ol>
-<li>Хакер заманивает доверчивого посетителя (далее Жертва) на свою страницу.</li>
-<li>Страница открывает `WebSocket`-соединение на сайт хакера. Предполагается, что Жертва сидит через прокси. Собственно, на прокси и направлена эта атака.</li>
-<li>Страница формирует специального вида WebSocket-запрос, который (и здесь самое главное!) ряд прокси серверов не понимают.
-
-Они пропускают начальный запрос через себя (который содержит `Connection: upgrade`) и думают, что далее идёт уже следующий HTTP-запрос. 
-
-...Но на самом деле там данные, идущие через вебсокет! И обе стороны вебсокета (страница и сервер) контролируются Хакером. Так что хакер может передать в них нечто похожее на GET-запрос к известному ресурсу, например `http://code.jquery.com/jquery.js`, а сервер ответит "якобы кодом jQuery" с кэширующими заголовками. 
-
-Прокси послушно проглотит этот ответ и закэширует "якобы jQuery".</li>
-<li>В результате при загрузке последующих страниц любой пользователь, использующий тот же прокси, что и Жертва, получит вместо `http://code.jquery.com/jquery.js` хакерский код.</li>
-</ol>
-
-Поэтому эта атака и называется "отравленный кэш".
-
-**Такая атака возможна не для любых прокси, но при анализе уязвимости было показано, что она не теоретическая, и уязвимые прокси действительно есть.**
-
-Поэтому придумали способ защиты -- "маску".
-
-
-### Маска для защиты от атаки
-
-Для того, чтобы защититься от атаки, и придумана маска. 
-
-*Ключ маски* -- это случайное 32-битное значение, которое варьируется от пакета к пакету. Тело сообщения проходит через XOR `^` с маской, а получатель восстанавливает его повторным XOR с ней (можно легко доказать, что `(x ^ a) ^ a == x`).
-
-Маска служит двум целям:
-<ol>
-<li>Она генерируется браузером. Поэтому теперь хакер не сможет управлять реальным содержанием тела сообщения. После накладывания маски оно превратиться в бинарную мешанину.</li>
-<li>Получившийся пакет данных уже точно не может быть воспринят промежуточным прокси как HTTP-запрос.</li>
-</ol>
-
-**Наложение маски требует дополнительных ресурсов, поэтому протокол WebSocket не требует её.**
-
-Если по этому протоколу связываются два клиента (не обязательно браузеры), доверяющие друг другу и посредникам, то можно поставить бит `Маска` в `0`, и тогда ключ маски не указывается.
-
-
-## Пример
-
-Рассмотрим прототип чата на WebSocket и Node.JS.
-
-HTML: посетитель отсылает сообщения из формы и принимает в `div`
-
-```html
-<!-- форма для отправки сообщений -->
-<form name="publish">
-  <input type="text" name="message" />
-  <input type="submit" value="Отправить" />
-</form>
-
-<!-- здесь будут появляться входящие сообщения -->
-<div id="subscribe"></div>
-```
-
-Код на клиенте:
-
-```js
-// создать подключение
-var socket = new WebSocket("ws://localhost:8081");
-
-// отправить сообщение из формы publish
-document.forms.publish.onsubmit = function() {
-  var outgoingMessage = this.message.value;
-
-  socket.send(outgoingMessage);
-  return false;
-};
-
-// обработчик входящих сообщений
-socket.onmessage = function(event) {
-  var incomingMessage = event.data;
-  showMessage(incomingMessage);
-};
-
-// показать сообщение в div#subscribe
-function showMessage(message) {
-  var messageElem = document.createElement('div');
-  messageElem.appendChild(document.createTextNode(message));
-  document.getElementById('subscribe').appendChild(messageElem);
-}
-```
-
-Серверный код можно писать на любой платформе. В нашем случае это будет Node.JS, с использованием модуля [ws](http://einaros.github.com/ws/):
-
-```js
-var WebSocketServer = new require('ws');
-
-// подключенные клиенты
-var clients = {};
-
-// WebSocket-сервер на порту 8081
-var webSocketServer = new WebSocketServer.Server({
-  port: 8081
-});
-webSocketServer.on('connection', function(ws) {
-
-  var id = Math.random();
-  clients[id] = ws;
-  console.log("новое соединение " + id);
-
-  ws.on('message', function(message) {
-    console.log('получено сообщение ' + message);
-
-    for (var key in clients) {
-      clients[key].send(message);
-    }
-  });
-
-  ws.on('close', function() {
-    console.log('соединение закрыто ' + id);
-    delete clients[id];
-  });
-
-});
-```
-
-Рабочий пример можно скачать: [websocket.zip](websocket.zip). Понадобится поставить два модуля: `npm install node-static && npm install ws`.
-## Итого
-
-WebSocket -- современное средство коммуникации. Кросс-доменное, универсальное, безопасное.
-
-На текущий момент он работает в браузерах IE10+, FF11+, Chrome 16+, Safari 6+, Opera 12.5+. В более старых версиях FF, Chrome, Safari, Opera есть поддержка черновых редакций протокола.
-
-Там, где вебсокеты не работают -- обычно используют другие транспорты, например `IFRAME`. Вы найдёте их в других статьях этого раздела.
-
-Есть и готовые библиотеки, реализующие функционал COMET с использованием сразу нескольких транспортов, из которых вебсокет имеет приоритет. Как правило, библиотеки состоят из двух частей: клиентской и серверной.
-
-Например, для Node.JS одной из самых известных библиотек является [Socket.IO](http://socket.io).
-
-К недостаткам библиотек следует отнести то, что некоторые продвинутые возможности WebSocket, такие как двухсторонний обмен бинарными данными, в них недоступны. С другой -- в большинстве случаев стандартного текстового обмена вполне достаточно.
diff --git a/4-ajax/9-websockets/websocket.zip b/4-ajax/9-websockets/websocket.zip
deleted file mode 100644
index 65190ec3..00000000
Binary files a/4-ajax/9-websockets/websocket.zip and /dev/null differ
diff --git a/4-ajax/index.md b/4-ajax/index.md
deleted file mode 100644
index 4d781e24..00000000
--- a/4-ajax/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# AJAX и COMET 
-
-Современные средства для обмена данными с сервером и смежные аспекты.
diff --git a/4-frames-and-windows/01-popup-windows/article.md b/4-frames-and-windows/01-popup-windows/article.md
new file mode 100644
index 00000000..f05af590
--- /dev/null
+++ b/4-frames-and-windows/01-popup-windows/article.md
@@ -0,0 +1,193 @@
+# Popups and window methods
+
+A popup window is one of the oldest methods to show additional document to user.
+
+Basically, you just run:
+```js
+window.open('http://javascript.info/')
+```
+
+... And it will open a new window with given URL. Most modern browsers are configured to open new tabs instead of separate windows.
+
+[cut]
+
+## Popup blocking
+
+Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: JavaScript is able to send requests for server, so popups are rarely used. But sometimes they are still handy.
+
+In the past evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.
+
+**Most browsers block popups if they are called outside of user-triggered event handlers like `onclick`.**
+
+If you think about it, that's a bit tricky. If the code is directly in an `onclick` handler, then that's easy. But what is the popup opens in `setTimeout`?
+
+Try this code:
+
+```js run
+// open after 3 seconds
+setTimeout(() => window.open('http://google.com'), 3000);
+```
+
+The popup opens in Chrome, but gets blocked in Firefox.
+
+...And this works in Firefox too:
+
+```js run
+// open after 1 seconds
+setTimeout(() => window.open('http://google.com'), 1000);
+```
+
+The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it -- removes the "trust", assuming that now it's "outside of the user action". So the first one is blocked, and the second one is not.
+
+## Modern usage
+
+As of now, we have many methods to load and show data on-page with JavaScript. But there are still situations when a popup works best.
+
+For instance, many shops use online chats for consulting people. A visitor clicks on the button, it runs `window.open` and opens the popup with the chat.
+
+Why a popup is good here, why not in-page?
+
+1. A popup is a separate window with its own independent JavaScript environment. So a chat service doesn't need to integrate with scripts of the main shop site.
+2. A popup is very simple to attach to a site, little to no overhead. It's only a small button, without additional scripts.
+3. A popup may persist even if the user left the page. For example, a consult advices the user to visit the page of a new "Super-Cooler" goodie. The user goes there in the main window without leaving the chat.
+
+## window.open
+
+The syntax to open a popup is: `window.open(url, name, params)`:
+
+url
+: An URL to load into the new window.
+
+name
+: A name of the new window. Each window has a `window.name`, and here we can specify which window to use for the popup. If there's already a window with such name -- the given URL opens in it, otherwise a new window is opened.
+
+params
+: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width:200,height=100`.
+
+Settings for `params`:
+
+- Position:
+  - `left/top` (numeric) -- coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
+  - `width/height` (numeric) -- width and height of a new window. There is a limit on minimal width/height, so it's impossible to create an invisible window.
+- Window features:
+  - `menubar` (yes/no) -- shows or hides the browser menu on the new window.
+  - `toolbar` (yes/no) -- shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
+  - `location` (yes/no) -- shows or hides the URL field in the new window. FF and IE don't allow to hide it by default.
+  - `status` (yes/no) -- shows or hides the status bar. Again, most browsers force it to show.
+  - `resizable` (yes/no) -- allows to disable the resize for the new window. Not recommended.
+  - `scrollbars` (yes/no) -- allows to disable the scrollbars for the new window. Not recommended.
+
+
+There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.
+
+## Example: a minimalistic window   
+
+Let's open a window with minimal set of features just to see which of them browser allows to disable:
+
+```js run
+let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
+width=0,height=0,left=-1000,top=-1000`;
+
+open('/', 'test', params);
+```
+
+Here most "window features" are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers "fix" odd things like zero `width/height` and offscreen `left/top`. For instance, Chrome open such a window with full width/height, so that it occupies the full screen.
+
+Let's add normal positioning options and reasonable `width`, `height`, `left`, `top` coordinates:
+
+```js run
+let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
+width=600,height=300,left=100,top=100`;
+
+open('/', 'test', params);
+```
+
+Most browsers show the example above as required.
+
+Rules for omitted settings:
+
+- If there is no 3rd argument in the `open` call, or it is empty, then the default window parameters are used.
+- If there is a string of params, but some yes/no features are omitted, then the omitted features are disabled, if the browser allows that. So if you specify params, make sure you explicitly set all required features to yes.
+- If there is no `left/top` in params, then the browser tries to open a new window near the last opened window.
+- If there is no `width/height`, then the new window will be the same size as the last opened.
+
+## Accessing a popup
+
+The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
+
+In the example below, the contents of the new window is modified after loading.
+
+```js run
+let newWindow = open('/', 'example', 'width=300,height=300')
+newWindow.focus();
+
+newWindow.onload = function() {
+  let html = `<div style="font-size:30px">Welcome!</div>`;
+*!*
+  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
+*/!*
+};
+```
+
+Please note that external `document` content is only accessible for windows from the same origin (the same protocol://domain:port).
+
+For windows with URLs from another sites, we are able to change the location by assigning `newWindow.location=...`, but we can't read the location or access the content. That's for user safety, so that an evil page can't open a popup with `http://gmail.com` and read the data. We'll talk more about it later.
+
+## Accessing the opener window   
+
+A popup may access the "opener" window as well. A JavaScript in it may use `window.opener` to access the window that opened it. It is `null` for all windows except popups.
+
+So both the main window and the popup have a reference to each other. Thay may modify each other freely assuming that they come from the same origin. If that's not so, then there are still means to communicate, to be covered in the next chapter <info:cross-window-communication>.
+
+## Closing a popup
+
+If we don't need a popup any more, we can call `newWindow.close()` on it.
+
+Technically, the `close()` method is available for any `window`, but `window.close()` is ignored by most browsers if `window` is not created with `window.open()`.
+
+The `newWindow.closed` is `true` if the window is closed. That's useful to check if the popup (or the main window) is still open or not. A user could close it, and our code should take that possibility into account.
+
+This code loads and then closes the window:
+
+```js run
+let newWindow = open('/', 'example', 'width=300,height=300')
+newWindow.onload = function() {
+  newWindow.close();
+  alert(newWindow.closed); // true
+};
+```
+
+## Focus/blur on a popup
+
+Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window.  Also there are `focus/blur` events that allow to focus a window and catch the moment when the visitor switches elsewhere.
+
+In the past evil pages abused those. For instance, look at this code:
+
+```js run
+window.onblur = () => window.focus();
+```
+
+When a user attempts to switch out of the window (`blur`), it brings it back to focus. The intention is to "lock" the user within the `window`.
+
+So, there are limitations that forbid the code like that. There are many limitations to protect the user from ads and evils pages. They depend on the browser.
+
+For instance, a mobile browser usually ignores that call completely. Also focusing doesn't work when a popup opens in a separate tab rather than a new window.
+
+Still, there are some things that can be done.
+
+For instance:
+
+- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
+- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but he still may observe it. The window is in the background, but still may be visible.
+
+## Summary   
+
+- A popup can be opened by the `open(url, name, params)` call. It returns the reference to the newly opened window.
+- By default, browsers block `open` calls from the code outside of user actions. Usually a notification appears, so that a user may allow them.
+- The popup may access the opener window using the `window.opener` property, so the two are connected.
+- If the main window and the popup come from the same origin, they can freely read and modify each other. Otherwise, they can change location of each other and communicate using messages (to be covered).
+- To close the popup: use `close()` call. Also the user may close them (just like any other windows). The `window.closed` is `true` after that.
+- Methods `focus()` and `blur()` allow to focus/unfocus a window. Sometimes.
+- Events `focus` and `blur` allow to track switching in and out of the window. But please note that a  window may still be visible even in the background state, after `blur`.
+
+Also if we open a popup, a good practice is to notify the user about it. An icon with the opening window can help the visitor to survive the focus shift and keep both windows in mind.
diff --git a/4-frames-and-windows/03-cross-window-communication/article.md b/4-frames-and-windows/03-cross-window-communication/article.md
new file mode 100644
index 00000000..3c502b77
--- /dev/null
+++ b/4-frames-and-windows/03-cross-window-communication/article.md
@@ -0,0 +1,346 @@
+# Cross-window communication
+
+The "Same Origin" (same site) policy limits access of windows and frame to each other.
+
+The idea is that if we have two windows open: one from `john-smith.com`, and another one is `gmail.com`, then we wouldn't want a script from `john-smith.com` to read our mail.
+
+[cut]
+
+## Same Origin [#same-origin]
+
+Two URLs are said to have the "same origin" if they have the same protocol, domain and port.
+
+These URLs have the same origin:
+
+- `http://site.com`
+- `http://site.com/`
+- `http://site.com/my/page.html`
+
+These ones are not:
+
+- `http://www.site.com` (another domain: `www.` matters)
+- `http://site.org` (another domain: `.org` matters)
+- `https://site.com` (another protocol: `https`)
+- `http://site.com:8080` (another port: `8080`)
+
+If we have a reference to another window (a popup or iframe), and that window comes from the same origin, then we can do everything with it.
+
+Otherwise, we can only change its location. Please note: not *read*, but modify it, redirect it to another place. That's possible, because such action does not reveal any data. Also such windows windows may exchange messages. Soon about that later.
+
+````warn header="Exclusion: subdomains may be same-origin"
+
+There's an important exclusion in the same-origin policy.
+
+If windows share the same second-level domain, for instance `john.site.com`, `peter.site.com` and `site.com`, and assign to `document.domain` their common second-level domain `site.com`, then limitations are removed.
+
+In other words, all such documents (including the one from `site.com`) should have the code:
+
+```js
+document.domain = 'site.com';
+```
+
+Then they can interact without limitations.
+````
+
+## Managing iframes
+
+An `<iframe>` is a two-faced beast. From one side it's a tag, just like `<script>` or `<img>`. From another side it's a window-in-window.
+
+The embedded window has a separate `window` and `document` objects, scripts and so on.
+
+We can access them:
+
+- `iframe.contentWindow` is a reference to the window inside the `<iframe>`.
+- `iframe.contentDocument` is a reference to the document inside it.
+
+When we access an embedded window, the browser checks if the iframe has the same origin. If that's not so then the access to almost everything is denied.
+
+For instance:
+
+```html run
+<iframe src="https://example.com" id="iframe"></iframe>
+
+<script>
+  iframe.onload = function() {
+    // can get the reference to the inner window
+    let iframeWindow = iframe.contentWindow;
+
+    try {
+      // ...but not to the document inside it
+      let doc = iframe.contentDocument;
+    } catch(e) {
+      alert(e); // Security Error
+    }
+
+    // also can't read iframe.contentWindow.location:
+    try {
+      alert(iframe.contentWindow.location);
+    } catch(e) {
+      alert(e); // Security Error
+    }
+
+    // ...but can modify it!
+    iframe.contentWindow.location = '/'; // works
+
+    iframe.onload = null; // run this code only once
+  };
+</script>
+```
+
+The code above shows errors for any operations except:
+
+- Getting the reference to the inner window `iframe.contentWindow`
+- Changing its `location`.
+
+```smart header="`iframe.onload` vs `iframe.contentWindow.onload`"
+The `iframe.onload` event is actually the same as `iframe.contentWindow.onload`. It triggers when the embedded window fully loads with all resources.
+
+...But `iframe.onload` is always available, while `iframe.contentWindow.onload` needs the same origin.
+```
+
+And here's an example with the same origin:
+
+```html run
+<iframe src="/" id="iframe"></iframe>
+
+<script>
+  iframe.onload = function() {
+    // just do anything
+    iframe.contentDocument.body.prepend("Hello, world!");
+  };
+</script>
+```
+
+### Wait until the iframe loads
+
+When an iframe is created, it immediately has a document. But that document is different from the one that finally loads into it!
+
+Here, look:
+
+
+```html run
+<iframe src="/" id="iframe"></iframe>
+
+<script>
+  let oldDoc = iframe.contentDocument;
+  iframe.onload = function() {
+    let newDoc = iframe.contentDocument;
+*!*
+    alert(oldDoc == newDoc); // false
+*/!*
+  };
+</script>
+```
+
+That's actually a well-known pitfall for novice developers. We shouldn't work with the document immediately, because that's the *wrong document*. If we set any event handlers on it, they will be ignored.
+
+...But the `onload` event triggers when the whole iframe with all resources is loaded. What if we want to act sooner, on `DOMContentLoaded`?
+
+We can try to catch the moment when a new document appears, and then setup necessary handlers, like this:
+
+```html run
+<iframe src="/" id="iframe"></iframe>
+
+<script>
+  let oldDoc = iframe.contentDocument;
+
+  // every 100 ms check if the document is the new one
+  let timer = setInterval(() => {
+    if (iframe.contentDocument == oldDoc) return;
+
+    // yeah, now set handlers and do whatever we want
+    clearInterval(timer);
+
+    iframe.contentDocument.addEventListener('DOMContentLoaded', () => {
+      iframe.contentDocument.body.prepend('Hello, world!');
+    });
+  }, 100);
+</script>
+```
+
+Let me know in comments if you know a better solution here.
+
+### window.frames
+
+An alternative way to get a window object for `<iframe>` -- is to get it from the named collection  `window.frames`:
+
+- By number: `window.frames[0]` -- the window object for the first frame in the document.
+- By name: `window.frames.iframeName` -- the window object for the frame with  `name="iframeName"`.
+
+For instance:
+
+```html run
+<iframe src="/" style="height:80px" name="win" id="iframe"></iframe>
+
+<script>
+  alert(iframe.contentWindow == frames[0]); // true
+  alert(iframe.contentWindow == frames.win); // true
+</script>
+```
+
+An iframe may have other iframes inside. The corresponding `window` objects form a hierarchy.
+
+Navigation links are:
+
+- `window.frames` -- the collection of "children" windows (for nested frames).
+- `window.parent` -- the reference to the "parent" (outer) window.
+- `window.top` -- the reference to the topmost parent window.
+
+For instance:
+
+```js run
+window.frames[0].parent === window; // true
+```
+
+We can use the `top` property to check if the current document is open inside a frame or not:
+
+```js run
+if (window == top) { // current window == window.top?
+  alert('The script is in the topmost window, not in a frame');
+} else {
+  alert('The script runs in a frame!');
+}
+```
+
+### The sandbox attribute
+
+The `sandbox` attribute allows to run untrusted content inside an `<iframe>`. It "sandboxes" the iframe by treating it as coming from another origin and forbidding certain actions.
+
+There are many restrictions. By default, for `<iframe sandbox src="...">` all of them are applied. But if we specify them in a value of the attribute, like this: `<iframe sandbox="allow-forms allow-popups">`, then they are lifted.
+
+In other words, an empty `"sandbox"` attribute puts the strictest limitations possible, but we can put a space-delimited list of those that we want to lift:
+
+`allow-same-origin`
+: By default `"sandbox"` forces the browser to treat the `iframe` as coming from another origin, even if it's `src` points to the same site. This option removes that feature.
+
+`allow-top-navigation`
+: Allows the `iframe` to change `parent.location`.
+
+`allow-forms`
+: Allows to submit forms from `iframe`.
+
+`allow-scripts`
+: Allows to run scripts from the `iframe`.
+
+`allow-popups`
+: Allows to `window.open` popups from the `iframe`
+
+See [the manual](mdn:/HTML/Element/iframe) for more.
+
+The example below demonstrates a sandboxed iframe with some JavaScript and a form. Neither one works:
+
+[codetabs src="sandbox" height=140]
+
+
+```smart
+The purpose of the `"sandbox"` attribute is to add restrictions. It cannot remove them. In particular, it can't relax same-origin restrictions if the iframe comes from another origin.
+```
+
+## Cross-window messaging
+
+The `postMessage` interface allows windows to talk to each other no matter which origin they are from.
+
+It has two parts.
+
+### postMessage
+
+The window that wants to send a message calls [postMessage](mdn:api/Window.postMessage) method of the receiving window. In other words, if we want to send the message to `win`, we should call  `win.postMessage(data, targetOrigin)`.
+
+Arguments:
+
+`data`
+: The data to send. Can be any object, the data is cloned using the "structured cloning algorithm". IE supports only strings, so we can `JSON.stringify` complex objects.
+
+`targetOrigin`
+: Allow only a window from the given origin to get the message.
+
+The `targetOrigin` is a safety measure. If the target window comes from another origin, we can't read it's `location`. We can't be sure which site is open in it right now, the user could navigate away.
+
+Specifying `targetOrigin` ensures that the window only receives the data if it's still at that site. Good when the data is secure.
+
+If we don't want that check, we can set `targetOrigin` to `*`.
+
+For instance:
+
+```html no-beautify
+<iframe src="http://example.com" name="example">
+
+<script>
+  let win = window.frames.example;
+
+  win.postMessage("message", "http://example.com");
+  // win.postMessage("message", "*");
+</script>
+```
+
+### onmessage
+
+To receive a message, the window should have a handler on the `message` event.
+
+The event object has special properties:
+
+`data`
+: The data from `postMessage`
+
+`origin`
+: The origin of the sender, for instance `http://javascript.info`.
+
+`source`
+: The reference to the sender window. We can immediately `postMessage` back if we want.
+
+To assign that handler, we should use `addEventListener`, a short syntax `window.onmessage` does not work.
+
+Here's an example:
+
+```js
+window.addEventListener("message", function(event) {
+  if (event.origin != 'http://javascript.info') {
+    // something from an unknown domain, let's ignore it
+    return;
+  }
+
+  alert( "received: " + event.data );
+});
+```
+
+The full example:
+
+[codetabs src="postmessage" height=120]
+
+```smart header="There's no delay"
+There's totally no delay between `postMessage` and the `message` event. That happens synchronously, even faster than `setTimeout(...,0)`.
+```
+
+## Summary
+
+To call methods and access the content of another window, we should first have a reference to it.
+
+For popups:
+- `window.open` -- opens a new window and returns a reference to it,
+- `window.opener` -- a reference to the opener window from a popup
+
+For iframes:
+- `window.frames` is a collection of nested window objects,
+- `window.parent`, `window.top` are the references to parent and top windows,
+- `iframe.contentWindow` is the window inside an `<iframe>` tag.
+
+Then if they come from the same origin (host, port, protocol), then windows can do whatever they want with each other.
+
+Otherwise, only possible actions are:
+- Change the location of another window (write-only access).
+- Post a message to it.
+
+Exclusions are:
+- Windows share the same main domain: `a.site.com` and `b.site.com`. Then setting `document.domain='site.com'` in both of them puts them into "same origin".
+- If an iframe has a `sandbox` attribute, it is forcefully put into the "different origin" state, unless the `allow-same-origin` is specified in the attribute value. That can be used to run untrusted code in iframes from the same site.
+
+The `postMessage` interface allows two windows to talk with security checks:
+
+1. The sender calls `targetWin.postMessage(data, targetOrigin)`.
+2. If `targetOrigin` is not `'*'`, then the browser checks if window `targetWin` has the URL from  `targetWin` site.
+3. If it is so, then `targetWin` triggers the `message` event with special properties:
+    - `origin` -- the origin of the sender window (like `http://my.site.com`)
+    - `source` -- the reference to the sender window.
+    - `data` -- the data, any object in everywhere except IE that supports only strings.
+
+    We should use `addEventListener` to set the handler for this event inside the target window.
diff --git a/4-frames-and-windows/03-cross-window-communication/postmessage.view/iframe.html b/4-frames-and-windows/03-cross-window-communication/postmessage.view/iframe.html
new file mode 100644
index 00000000..88e098b7
--- /dev/null
+++ b/4-frames-and-windows/03-cross-window-communication/postmessage.view/iframe.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  Receiving iframe.
+  <script>
+    window.addEventListener('message', function(event) {
+      alert(`Received ${event.data} from ${event.origin}`);
+    });
+  </script>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/03-cross-window-communication/postmessage.view/index.html b/4-frames-and-windows/03-cross-window-communication/postmessage.view/index.html
new file mode 100644
index 00000000..abcb065c
--- /dev/null
+++ b/4-frames-and-windows/03-cross-window-communication/postmessage.view/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <form id="form">
+    <input type="text" placeholder="Enter message" name="message">
+    <input type="submit" value="Click to send">
+  </form>
+
+  <iframe src="iframe.html" id="iframe" style="display:block;height:60px"></iframe>
+
+  <script>
+    form.onsubmit = function() {
+      iframe.contentWindow.postMessage(this.message.value, '*');
+      return false;
+    };
+  </script>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/03-cross-window-communication/sandbox.view/index.html b/4-frames-and-windows/03-cross-window-communication/sandbox.view/index.html
new file mode 100644
index 00000000..47883061
--- /dev/null
+++ b/4-frames-and-windows/03-cross-window-communication/sandbox.view/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <div>The iframe below is has <code>sandbox</code> attribute.</div>
+
+  <iframe sandbox src="sandboxed.html" style="height:60px;width:90%"></iframe>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/03-cross-window-communication/sandbox.view/sandboxed.html b/4-frames-and-windows/03-cross-window-communication/sandbox.view/sandboxed.html
new file mode 100644
index 00000000..c1027325
--- /dev/null
+++ b/4-frames-and-windows/03-cross-window-communication/sandbox.view/sandboxed.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <button onclick="alert(123)">Click to run a script (doesn't work)</button>
+
+  <form action="http://google.com">
+    <input type="text">
+    <input type="submit" value="Submit (doesn't work)">
+  </form>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/article.md b/4-frames-and-windows/06-clickjacking/article.md
new file mode 100644
index 00000000..d7fc08f6
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/article.md
@@ -0,0 +1,200 @@
+# The clickjacking attack
+
+The "clickjacking" attack allows an evil page to click on a "victim site" *on behalf of the visitor*.
+
+Many sites were hacked this way, including Twitter, Facebook, Paypal and other sites. They are all fixed, of course.
+
+[cut]
+
+## The idea
+
+The idea is very simple.
+
+Here's how clickjacking was done with Facebook:
+
+1. A visitor is lured to the evil page. No matter how.
+2. The page has a harmlessly-looking link on it (like "get rich now" or "click here, very funny" and so on).
+3. Over that link the evil page positions a transparent `<iframe>` with `src` from facebook.com, in such a way that the "Like" button is right above that link. Usually that's done with `z-index`.
+4. Clicking on that link, the visitor in fact presses that button.
+
+## The demo
+
+Here's how the evil page looks like. To make things clear, the `<iframe>` is half-transparent (in real evil pages it's fully transparent):
+
+```html run height=120 no-beautify
+<style>
+iframe { /* iframe from the victim site */
+  width: 400px;
+  height: 100px;
+  position: absolute;
+  top:0; left:-20px;
+*!*
+  opacity: 0.5; /* in real opacity:0 */
+*/!*
+  z-index: 1;
+}
+</style>
+
+<div>Click to get rich now:</div>
+
+<!-- The url from the victim site -->
+*!*
+<iframe src="facebook.html"></iframe>
+
+<button>Click here!</button>
+ */!*
+
+<div>...And you're cool (I'm a cool hacker actually)!</div>
+```
+
+The full demo of the attack:
+
+[codetabs src="clickjacking-visible" height=160]
+
+Here we have a half-transparent `<iframe src="facebook.html">`, and in the example we can see it hovering over the button. A click on the button actually clicks on the iframe, but that's not visible to the user, because the iframe is transparent.
+
+As a result if the visitor is authorized on facebook ("remember me" is usually turned on), then it adds a "Like". On Twitter that would be a "Follow" button.
+
+Here's the same example, but closer to reality, with `opacity:0` for `<iframe>`:
+
+[codetabs src="clickjacking" height=160]
+
+All we need to attack -- is to position the `<iframe>` on the evil page in such a way that the button is right over the link. That's usually possible with CSS.
+
+```smart header="Clickjacking is for clicks, not for keyboard"
+The attack only affects mouse actions.
+
+Technically, if we have a text field to hack, then we can position an iframe in such a way that text fields overlap each other. So when a visitor tries to focus on the input he sees on the page, he actually focuses on the input inside the iframe.
+
+But then there's a problem. Everything that the visitor types will be hidden, because the iframe is not visible.
+
+So that would look really odd to the user, and he will stop.
+```
+
+## Old-school defences (weak)
+
+The oldest defence method is the piece of JavaScript that forbids to open the page in a frame (so-called "framebusting").
+
+Like this:
+
+```js
+if (top != window) {
+  top.location = window.location;
+}
+```
+
+That is: if the window finds out that it's not on the top, then it automatically makes itself the top.
+
+As of now, that's not reliable, because there are many ways to hack around it. Let's cover a few.
+
+### Blocking top-navigation
+
+We can block the transition caused by changing `top.location` in the [beforeunload](info:onload-ondomcontentloaded#window.onbeforeunload) event.
+
+The top page (that belongs to the hacker) sets a handler to it, and when the `iframe` tries to change `top.location` the visitor gets a message asking him whether he wants to leave.
+
+Like this:
+```js
+window.onbeforeunload = function() {
+  window.onbeforeunload = null;
+  return "Want to leave without learning all the secrets (he-he)?";
+};
+```
+
+In most cases the visitor would answer negatively, because he doesn't know about the iframe, all he can see is the top page, there's no reason to leave. And so the `top.location` won't change!
+
+In action:
+
+[codetabs src="top-location"]
+
+### Sandbox attribute
+
+One of the things restricted by the `sandbox` attribute is navigation. A sandboxed iframe may not change `top.location`.
+
+So we can add the iframe with `sandbox="allow-scripts allow-forms"`. That would relax the restrictions allowing scripts and forms. But we don't put `allow-top-navigation` in the value so that the navigation is still forbidden. And the change of `top.location` won't work.
+
+Here's the code:
+
+```html
+<iframe *!*sandbox="allow-scripts allow-forms"*/!* src="facebook.html"></iframe>
+```
+
+There are other ways to work around that simple protection too.
+
+## X-Frame-Options
+
+Server-side header `X-Frame-Options` can allow or forbid showing the page inside a frame.
+
+It must be sent by the server: browser ignore it if found in `<meta>` tags. So `<meta http-equiv="X-Frame-Options"...>` won't do anything.
+
+The header may have 3 values:
+
+
+`DENY`
+: Never ever show the page inside an iframe.
+
+`SAMEORIGIN`
+: Allow to show inside an iframe if the parent document comes from the same origin.
+
+`ALLOW-FROM domain`
+: Allows to show inside an iframe if the parent document is from the given domain.
+
+For instance, Twitter uses `X-Frame-Options: SAMEORIGIN`. Here's the result:
+
+```html
+<iframe src="https://twitter.com"></iframe>
+```
+
+<iframe src="https://twitter.com"></iframe>
+
+Depending on the browser, `iframe` above is either empty or it has a message telling that "the browser can't show it".
+
+## Showing with disabled functionality
+
+The protecting `X-Frame-Options` header has a side-effect. Other sites can't show our page in an `iframe`, even if they have "legal" reasons to do so.
+
+So there are other solutions. For instance, we can "cover" the page with a `<div>` with `height:100%;width:100%`, so that it handles all clicks. That `<div>` should disappear if `window == top` or we figure out that we don't need protection.
+
+Like this:
+
+```html
+<style>
+  #protector {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99999999;
+  }
+</style>
+
+<div id="protector">
+  <a href="/" target="_blank">Go to the site</a>
+</div>
+
+<script>
+  // there will be an error if top window is from the different origin
+  // but that's ok here
+  if (top.document.domain == document.domain) {
+    protector.remove();
+  }
+</script>
+```
+
+The demo:
+
+[codetabs src="protector"]
+
+## Summary
+
+Clickjacking is a way to "trick" users into a clicking on a victim site without even knowing what happens. That's dangerous if there are important click-activated actions.
+
+A hacker can post a link to his evil page in a message or lure visitors to his page by other means. There are many variants.
+
+From one side -- the attack is "not deep": all a hacker can do is one click. But from another side, if the hacker knows that after the click another control appears, then it may use cunning messages to make the user to click on it as well.
+
+The attack is quite dangerous, because when we engineer the UI we usually don't think that a hacker can click on behalf of the visitor. So vulnerabilities can be found in totally unexpeced places.
+
+- It's recommended to use `X-Frame-Options: SAMEORIGIN` on pages that are totally not meant to be shown inside iframes (or just for the whole site).
+- Use a covering `<div>` if we want to allow our pages to be shown in iframes, and still stay safe.
diff --git a/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html b/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html
new file mode 100644
index 00000000..6b8231c7
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+
+<body style="margin:10px;padding:10px">
+
+  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
+
+</body>
+
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html b/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html
new file mode 100644
index 00000000..9f8d8219
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <style>
+    iframe {
+      width: 400px;
+      height: 100px;
+      position: absolute;
+      top: 5px;
+      left: -14px;
+      opacity: 0.5;
+      z-index: 1;
+    }
+  </style>
+
+  <div>Click to get rich now:</div>
+
+  <!-- The url from the victim site -->
+  <iframe src="facebook.html"></iframe>
+
+  <button>Click here!</button>
+
+  <div>...And you're cool (I'm a cool hacker actually)!</div>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html b/4-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html
new file mode 100644
index 00000000..6b8231c7
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+
+<body style="margin:10px;padding:10px">
+
+  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
+
+</body>
+
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/clickjacking.view/index.html b/4-frames-and-windows/06-clickjacking/clickjacking.view/index.html
new file mode 100644
index 00000000..05ec48cb
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/clickjacking.view/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <style>
+    iframe {
+      width: 400px;
+      height: 100px;
+      position: absolute;
+      top: 5px;
+      left: -14px;
+      opacity: 0;
+      z-index: 1;
+    }
+  </style>
+
+  <div>Click to get rich now:</div>
+
+  <!-- The url from the victim site -->
+  <iframe src="facebook.html"></iframe>
+
+  <button>Click here!</button>
+
+  <div>...And you're cool (I'm a cool hacker actually)!</div>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/protector.view/iframe.html b/4-frames-and-windows/06-clickjacking/protector.view/iframe.html
new file mode 100644
index 00000000..f7ba56b3
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/protector.view/iframe.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+
+  <style>
+    #protector {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 99999999;
+    }
+  </style>
+
+</head>
+
+<body>
+
+<div id="protector">
+  <a href="/" target="_blank">Go to the site</a>
+</div>
+
+<script>
+
+  if (top.document.domain == document.domain) {
+    protector.remove();
+  }
+
+</script>
+
+  This text is always visible.
+
+  But if the page is shown inside a document from another domain, the div over it prevents any actions.
+
+  <button onclick="alert(1)">Click doesn't work in that case</button>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/protector.view/index.html b/4-frames-and-windows/06-clickjacking/protector.view/index.html
new file mode 100644
index 00000000..8328d968
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/protector.view/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+
+  <iframe src="iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/top-location.view/iframe.html b/4-frames-and-windows/06-clickjacking/top-location.view/iframe.html
new file mode 100644
index 00000000..da477f40
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/top-location.view/iframe.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+
+  <div>Changes top.location to javascript.info</div>
+
+  <script>
+    top.location = 'https://javascript.info';
+  </script>
+
+</body>
+
+</html>
diff --git a/4-frames-and-windows/06-clickjacking/top-location.view/index.html b/4-frames-and-windows/06-clickjacking/top-location.view/index.html
new file mode 100644
index 00000000..ec742436
--- /dev/null
+++ b/4-frames-and-windows/06-clickjacking/top-location.view/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+
+  <style>
+    iframe {
+      width: 400px;
+      height: 100px;
+      position: absolute;
+      top: 0;
+      left: -20px;
+      opacity: 0;
+      z-index: 1;
+    }
+  </style>
+
+  <script>
+    function attack() {
+
+      window.onbeforeunload = function() {
+        window.onbeforeunload = null;
+        return "Want to leave without learning all the secrets (he-he)?";
+      };
+
+      document.body.insertAdjacentHTML('beforeend', '<iframe src="iframe.html">');
+    }
+  </script>
+</head>
+
+<body>
+
+  <p>After a click on the button the visitor gets a "strange" question about whether he wants to leave.</p>
+
+  <p>Probably he would respond "No", and the iframe protection is hacked.</p>
+
+  <button onclick="attack()">Add a "protected" iframe</button>
+
+</body>
+</html>
diff --git a/4-frames-and-windows/index.md b/4-frames-and-windows/index.md
new file mode 100644
index 00000000..eb5069e3
--- /dev/null
+++ b/4-frames-and-windows/index.md
@@ -0,0 +1 @@
+# Frames and windows
diff --git a/5-animation/1-bezier/article.md b/5-animation/1-bezier/article.md
deleted file mode 100644
index 0b5a8140..00000000
--- a/5-animation/1-bezier/article.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# Кривые Безье
-
-Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в CSS-анимации и много где ещё.
-
-Несмотря на "умное" название -- это очень простая штука.
-
-В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз изучить эту тему хотя бы для того, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом. Тем более что в мире векторной графики и продвинутых анимаций без них никак. 
-
-[cut]
-
-## Виды кривых Безье
-
-[Кривая Безье](http://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5) задаётся опорными точками.
-
-Их может быть две, три, четыре или больше. Например:
-
-По двум точкам:
-
-<img src="bezier2.png">
-
-По трём точкам:
-
-<img src="bezier3.png">
-
-По четырём точкам:
-
-<img src="bezier4.png">
-
-
-Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите: 
-<ol>
-<li>**Точки не всегда на кривой.** Это совершенно нормально, как именно строится кривая мы рассмотрим чуть позже.</li>
-<li>**Степень кривой равна числу точек минус один**.
-Для двух точек -- это линейная кривая (т.е. прямая), для трёх точек -- квадратическая кривая (парабола), для четырёх -- кубическая.</li>
-<li>**Кривая всегда находится внутри [выпуклой оболочки](http://ru.wikipedia.org/wiki/%D0%92%D1%8B%D0%BF%D1%83%D0%BA%D0%BB%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BE%D0%BB%D0%BE%D1%87%D0%BA%D0%B0), образованной опорными точками:**
-
-<img src="bezier4-e.png"> <img src="bezier3-e.png">
-
-Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.
-</li>
-</ol>
-
-Основная ценность кривых Безье -- в том, что, двигая точки, кривую можно менять, причём кривая при этом меняется интуитивно понятным образом.
-
-Попробуйте двигать точки мышью в примере ниже:
-
-[iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370]
-
-**Как можно заметить, кривая натянута по касательным 1 -> 2 и 3 -> 4.**
-
-После небольшой практики становится понятно, как расположить точки, чтобы получить нужную форму. А, соединяя несколько кривых, можно получить практически что угодно.
-
-Вот некоторые примеры:
-
-<img src="bezier-car.png"> <img src="bezier-letter.png"> <img src="bezier-vase.png">
-
-## Математика
-
-У кривых Безье есть математическая формула. 
-
-Как мы увидим далее, для пользования кривыми Безье знать её нет особенной необходимости, но для полноты картины -- вот она.
-
-**Координаты кривой описываются в зависимости от параметра `t⋲[0,1]`**
-
-<ul>
-<li>Для двух точек:
-
-[pre]
-<code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code>
-[/pre]
-</li>
-<li>Для трёх точек:
-
-[pre]
-<code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code>
-[/pre]
-</li>
-<li>Для четырёх точек:
-
-[pre]
-<code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub>  +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code>
-[/pre]
-</li>
-</ul>
-
-Вместо <code>P<sub>i</sub></code>  нужно подставить координаты i-й опорной точки <code>(x<sub>i</sub>, y<sub>i</sub>)</code>.
-
-Эти уравнения векторные, то есть на для каждой из координат:
-<ul>
-<li><code>x = (1−t)<sup>2</sup>x<sub>1</sub> + 2(1−t)tx<sub>2</sub> + t<sup>2</sup>x<sub>3</sub></code></li>
-<li><code>y = (1−t)<sup>2</sup>y<sub>1</sub> + 2(1−t)ty<sub>2</sub> + t<sup>2</sup>y<sub>3</sub></code></li>
-</ul>
-
-Вместо <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> подставляются координаты трёх опорных точек, и в то время как `t` пробегает множество от `0` до `1`, соответствующие значения `(x, y)` как раз и образуют кривую.
-
-Впрочем, это чересчур наукообразно, не очень понятно, почему кривые именно такие, и как зависят от опорных точек. С этим нам поможет разобраться другой, более наглядный алгоритм.
-
-## Рисование "де Кастельжо"
-
-[Метод де Кастельжо](http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%B4%D0%B5_%D0%9A%D0%B0%D1%81%D1%82%D0%B5%D0%BB%D1%8C%D0%B6%D0%BE) идентичен математическому определению кривой и наглядно показывает, как она строится.
-
-Посмотрим его на примере трёх точек (точки можно двигать). Нажатие на кнопку "play" запустит демонстрацию. 
-
-[iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370]
-
-**Алгоритм построения кривой по "методу де Кастельжо":**
-
-<ol>
-<li>Рисуем опорные точки. В примере выше это `1`, `2`, `3`.</li>
-<li>Строятся отрезки между опорными точками 1 -> 2 -> 3. На рисунке выше они **чёрные**.</li>
-<li>Параметр `t` пробегает значения от `0` до `1`. В примере выше использован шаг `0.05`, т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. 
-
-Значение `t` пробегает интервал от 0 до 1, для каждого `t`:
-<ol>
-<li>На каждом из этих отрезков берётся точка, находящаяся от начала на расстоянии от 0 до `t` пропорционально длине.  Так как чёрных отрезков -- два, то и точек выходит две штуки.
-
-То есть, при `t=0` -- точки будут в начале, при `t=0.25` -- на расстоянии в 25% от начала отрезка, при `t=0.5` -- 50%(на середине), при `t=1` -- в конце отрезка. 
-</li>
-<li>Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён <span style="color:blue">синим</span>.
-
-<table>
-<thead>
-<tr><td>При `t=0.25`</td><td>При `t=0.5`</td></tr>
-</thead>
-<tbody>
-<tr>
-<td><img src="bezier3-draw1.png"></td>
-<td><img src="bezier3-draw2.png"></td>
-</tr>
-</tbody>
-</table>
-
-</li>
-<li>На <span style="color:blue">получившемся</span> отрезке берётся точка на расстоянии, соответствующем `t`. То есть, для `t=0.25` (первый рисунок) получаем точку в конце первой четверти отрезка, для `t=0.5` (второй рисунок) -- в середине отрезка. На рисунках выше эта точка отмечена <span style="color:red">красным</span>. 
-</li>
-</ol>
-</li>
-<li>
-По мере того как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. **Совокупность таких точек для всех значений `t` образуют кривую Безье.**
-</li>
-</ol>
-
-Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.
-
-
-Демо для четырёх точек (точки можно двигать):
-
-[iframe src="demo.svg?p=0,0,0.5,0,0.5,1,1,1&animate=1" height=370]
-
-Алгоритм:
-<ul>
-<li>Точки по порядку соединяются отрезками: 1 -> 2, 2 -> 3, 3 -> 4. Получается три чёрных отрезка.</li>
-<li>На отрезках берутся точки, соответствующие текущему `t`, соединяются. Получается два <span style="color:#0A0">зелёных отрезка</span>.</li>
-<li>На этих отрезках берутся точки, соответствующие текущему `t`, соединяются. Получается один <span style="color:blue">синий отрезок</span>.</li>
-<li>На синем отрезке берётся точка, соответствующая текущему `t`. При запуске примера выше она <span style="color:red">красная</span>.</li>
-<li>Эти точки описывают кривую.</li>
-</ul>
-
-Нажмите на кнопку "play" в примере выше, чтобы увидеть это в действии.
-
-Ещё примеры кривых:
-
-[iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370]
-
-С другими точками:
-
-[iframe src="demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1" height=370]
-
-Петелька:
-
-[iframe src="demo.svg?p=0,0,1,0.5,0,1,0.5,0&animate=1" height=370]
-
-Пример негладкой кривой Безье:
-
-[iframe src="demo.svg?p=0,0,1,1,0,1,1,0&animate=1" height=370]
-
-Аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.
-
-[smart header="Как провести кривую Безье через нужные точки?"]
-Кривые Безье обычно проводятся при помощи "опорных" точек, из которых, как можно видеть из примеров выше, только первая и последняя лежат на кривой.
-
-Если нужно провести кривую именно *через* нужные точки, то это уже другая задача, она называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). 
-
-Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD).
-[/smart]
-
-## Итого
-
-Кривые Безье задаются опорными точками. 
-
-Мы рассмотрели два определения кривых:
-<ol>
-<li>Через математическую формулу.</li>
-<li>Через процесс построения де Кастельжо.</li>
-</ol>
-
-Их удобство в том, что:
-<ul>
-<li>Можно легко нарисовать плавные линии вручную, передвигая точки мышкой.</li>
-<li>Более сложные изгибы и линии можно составить, если соединить несколько кривых Безье.</li>
-</ul>
-
-Применение:
-
-<ul>
-<li>В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.</li>
-<li>В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1).</li>
-<li>В CSS-анимации, для задания траектории или скорости передвижения.</li>
-</ul>
\ No newline at end of file
diff --git a/5-animation/1-bezier/bezier-car.png b/5-animation/1-bezier/bezier-car.png
deleted file mode 100644
index 47c74925..00000000
Binary files a/5-animation/1-bezier/bezier-car.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier-car@2x.png b/5-animation/1-bezier/bezier-car@2x.png
deleted file mode 100644
index a67408f8..00000000
Binary files a/5-animation/1-bezier/bezier-car@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier-letter.png b/5-animation/1-bezier/bezier-letter.png
deleted file mode 100644
index 90a838b3..00000000
Binary files a/5-animation/1-bezier/bezier-letter.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier-letter@2x.png b/5-animation/1-bezier/bezier-letter@2x.png
deleted file mode 100644
index f2ddda84..00000000
Binary files a/5-animation/1-bezier/bezier-letter@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier-vase.png b/5-animation/1-bezier/bezier-vase.png
deleted file mode 100644
index 895e4ea4..00000000
Binary files a/5-animation/1-bezier/bezier-vase.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier-vase@2x.png b/5-animation/1-bezier/bezier-vase@2x.png
deleted file mode 100644
index 3b8792a4..00000000
Binary files a/5-animation/1-bezier/bezier-vase@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier2.png b/5-animation/1-bezier/bezier2.png
deleted file mode 100644
index 774dfe41..00000000
Binary files a/5-animation/1-bezier/bezier2.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier2@2x.png b/5-animation/1-bezier/bezier2@2x.png
deleted file mode 100644
index de0d5951..00000000
Binary files a/5-animation/1-bezier/bezier2@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-draw1.png b/5-animation/1-bezier/bezier3-draw1.png
deleted file mode 100644
index 5d2a70a4..00000000
Binary files a/5-animation/1-bezier/bezier3-draw1.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-draw1@2x.png b/5-animation/1-bezier/bezier3-draw1@2x.png
deleted file mode 100644
index 5035c8b6..00000000
Binary files a/5-animation/1-bezier/bezier3-draw1@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-draw2.png b/5-animation/1-bezier/bezier3-draw2.png
deleted file mode 100644
index f93fc6ed..00000000
Binary files a/5-animation/1-bezier/bezier3-draw2.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-draw2@2x.png b/5-animation/1-bezier/bezier3-draw2@2x.png
deleted file mode 100644
index 379217a9..00000000
Binary files a/5-animation/1-bezier/bezier3-draw2@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-e.png b/5-animation/1-bezier/bezier3-e.png
deleted file mode 100644
index 5d2fda1d..00000000
Binary files a/5-animation/1-bezier/bezier3-e.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3-e@2x.png b/5-animation/1-bezier/bezier3-e@2x.png
deleted file mode 100644
index e815647b..00000000
Binary files a/5-animation/1-bezier/bezier3-e@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3.png b/5-animation/1-bezier/bezier3.png
deleted file mode 100644
index 25868da9..00000000
Binary files a/5-animation/1-bezier/bezier3.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier3@2x.png b/5-animation/1-bezier/bezier3@2x.png
deleted file mode 100644
index 0d1cc6ea..00000000
Binary files a/5-animation/1-bezier/bezier3@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier4-e.png b/5-animation/1-bezier/bezier4-e.png
deleted file mode 100644
index f3719421..00000000
Binary files a/5-animation/1-bezier/bezier4-e.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier4-e@2x.png b/5-animation/1-bezier/bezier4-e@2x.png
deleted file mode 100644
index 3a8a1a54..00000000
Binary files a/5-animation/1-bezier/bezier4-e@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier4.png b/5-animation/1-bezier/bezier4.png
deleted file mode 100644
index 4e1906d1..00000000
Binary files a/5-animation/1-bezier/bezier4.png and /dev/null differ
diff --git a/5-animation/1-bezier/bezier4@2x.png b/5-animation/1-bezier/bezier4@2x.png
deleted file mode 100644
index 4987ecbc..00000000
Binary files a/5-animation/1-bezier/bezier4@2x.png and /dev/null differ
diff --git a/5-animation/1-bezier/demo.svg b/5-animation/1-bezier/demo.svg
deleted file mode 100644
index 4bf499d6..00000000
--- a/5-animation/1-bezier/demo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--+ no-optimize -->
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="black"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="black" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:Consolas, Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
var xmlns = "http://www.w3.org/2000/svg";
var xlinkns  = "http://www.w3.org/1999/xlink";

var box = {left:20, top: 50, right: 320, bottom: 350 };

if (location.search.match('small=1')) {
  box = {left:20, top: 50, right: 120, bottom: 150 };
}

document.documentElement.ondragstart = function() {
  return false;
};

var pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

// don't show a piece of control path between P2 and P3
var hideMiddleControlPath = location.search.match('nocpath=1');

pointsIn = pointsIn.split(',');

var points = [];

// read points from ?p=...
for(var i=0; i<pointsIn.length; i++) {
  var x = box.left + (box.right - box.left)*pointsIn[i];
  var y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
  points.push( {x: x, y: y} );
}

var bezierPath = document.getElementById("bezier-path");
var controlPath = document.getElementById("control-path");
//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

var runButton = document.getElementById("run-button");
runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



var tPathTemplate = document.getElementById("t-path-template");
tPathTemplate.parentNode.removeChild(tPathTemplate);

function drawPath() {
  var letter;
  switch (points.length) {
  case 4:
    letter = 'C';
    break;
  case 3:
    letter = 'Q';
    break;
  default:
    letter = 'L';
  }
  var bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
  var controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

  for(var i = 1; i < points.length; i++) {
    bezierPathD += points[i].x + ',' + points[i].y + ' ';
    controlPathD += points[i].x + ',' + points[i].y + ' ';
  }
  bezierPath.setAttribute('d', bezierPathD);
  controlPath.setAttribute('d', controlPathD);

  function dist(a,b) {
    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
  }

  if (hideMiddleControlPath) {
    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
  }

}

// draw control points
function drawPoints(points) {
  var p = document.getElementById('p-template');
  p.removeAttribute('id');
  p.parentNode.removeChild(p);

  for(var i=0; i<points.length; i++) {
    var point = p.cloneNode(true);
    point.getElementsByTagName('text')[0].firstChild.data = i+1;
    setPointCoords(point, i);
    setPointHandler(point, i);
    document.documentElement.appendChild(point);
  }

}

// control points coords are shifted from Left-Upper corner a bit
// to give them space to render
function setPointCoords(point, i) {
  point.setAttribute('x', points[i].x-20);
  point.setAttribute('y', points[i].y-20);
}

function setPointHandler(point, i) {
  var circle = point.getElementsByTagName('circle')[0];
  circle.onmousedown = function() {
    document.onmousemove = function(e) {
      var x = e.pageX, y = e.pageY;

      // constrain withing the box
      if (x < box.left) x = box.left;
      if (x > box.right) x = box.right;
      if (y > box.bottom) y = box.bottom;
      if (y < box.top) y = box.top;

      points[i].x = x;
      points[i].y = y;
      setPointCoords(point, i);
      drawPath();
    }
    document.onmouseup = function() {
      document.onmousemove = document.onmouseup = null;
    }
    return false;
  }
}

// draw point connectors which form the curve
function drawT(points, t) {

  var path = document.getElementById('t-'+points.length);

  if (!path) {
    path = tPathTemplate.cloneNode(true);
    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
    path.setAttribute('id', 't-'+points.length);
    document.documentElement.appendChild(path);
  }

  var subPoints = [];
  var x = points[0].x + (points[1].x - points[0].x)*t;
  var y = points[0].y + (points[1].y - points[0].y)*t;

  var tPathD = "M" + x + ',' + y + ' L';
  subPoints.push({x: x, y: y});

  for(var i=1; i<points.length-1; i++) {
    var x = points[i].x + (points[i+1].x - points[i].x)*t;
    var y = points[i].y + (points[i+1].y - points[i].y)*t;
    subPoints.push({x: x, y: y});

    tPathD += x + ',' + y + ' ';
  }

  if (points.length <= 3) {
    var m = document.getElementById('marker');
    if (t == 1) {
      var mx = -10, my = -10;
    } else {
      mx = subPoints[0].x + (x-subPoints[0].x)*t;
      my = subPoints[0].y + (y-subPoints[0].y)*t;
    }
    m.setAttribute('cx', mx);
    m.setAttribute('cy', my);
    path.setAttribute('stroke-width', 2);
  }
  if (points.length == 2) {
    // only 2 points provided, special case
    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
  }

  path.setAttribute('d', tPathD);

  if (subPoints.length > 2){
    drawT(subPoints, t);
  }
}

var t = 0;
var timer;


// animate the curve
function animate(complete) {

  timer = setInterval(function() {
    if (t>1) {
      t = 1;
    }
    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
    drawT(points, t);

    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
/*
    if (t >= 0.5) {
      clearInterval(timer);
      runButton.parentNode.style.display = 'none';
      return;
    }
*/
    if (t == 1) {
      clearInterval(timer);
      timer = 0;
      complete && complete();
      return;
    }

    t += 0.005;
  }, 30);
}

function animationDone() {
  for(var i=1; i<=points.length; i++) {
    var path = document.getElementById('t-'+i);
    path && document.documentElement.removeChild(path);
  }
  t = 0;
  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
}

runButton.onclick = onAnimate;

function onAnimate() {
  if (timer) {
    // animation in action
    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
    clearInterval(timer);
    timer = 0;
    return;
  }

  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
  animate(animationDone)
}

drawPath();
drawPoints(points);

//]]></script>

</svg>

\ No newline at end of file
diff --git a/5-animation/2-css-transitions/1-animate-logo-css/solution.md b/5-animation/2-css-transitions/1-animate-logo-css/solution.md
deleted file mode 100644
index 2687b05f..00000000
--- a/5-animation/2-css-transitions/1-animate-logo-css/solution.md
+++ /dev/null
@@ -1,16 +0,0 @@
-
-CSS-код для анимации одновременно `width` и `height`:
-```css
-/* исходный класс */
-
-#flyjet {
-  transition: all 3s;
-}
-/* JS добавляет .growing *.
-#flyjet.growing {
-  width: 400px;
-  height: 240px;
-}
-```
-
-Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.
diff --git a/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html b/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
deleted file mode 100644
index c8e0f45f..00000000
--- a/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    img {
-      cursor: pointer;
-    }
-  </style>
-  <style>
-    #flyjet {
-      width: 40px;
-      height: 24px;
-      transition: all 3s;
-    }
-    
-    #flyjet.growing {
-      width: 400px;
-      height: 240px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
-
-  <script>
-    flyjet.onclick = function() {
-
-      var ended = false;
-
-      flyjet.addEventListener('transitionend', function() {
-        if (!ended) {
-          ended = true;
-          alert('Готово!');
-        }
-      });
-
-      flyjet.classList.add('growing');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html b/5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html
deleted file mode 100644
index f291c968..00000000
--- a/5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    img {
-      cursor: pointer;
-    }
-  </style>
-  <style>
-    #flyjet {
-      width: 40px;
-      /* -> 400px */
-      
-      height: 24px;
-      /* -> 240px */
-    }
-  </style>
-</head>
-
-<body>
-
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/1-animate-logo-css/task.md b/5-animation/2-css-transitions/1-animate-logo-css/task.md
deleted file mode 100644
index 089f1b21..00000000
--- a/5-animation/2-css-transitions/1-animate-logo-css/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Анимировать самолёт (CSS)
-
-[importance 5]
-
-Реализуйте анимацию, как в демке ниже (клик на картинку):
-
-[iframe src="solution" height=300]
-
-<ul>
-<li>Изображение растёт при клике с 40x24px до 400x240px .</li>
-<li>Продолжительность анимации: 3 секунды.</li>
-<li>По окончании вывести "Готово!".</li>
-<li>Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".</li>
-</ul>
-
- 
diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.png b/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.png
deleted file mode 100644
index e7b9aafb..00000000
Binary files a/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up@2x.png b/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up@2x.png
deleted file mode 100644
index 552832bd..00000000
Binary files a/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md
deleted file mode 100644
index 7965bd15..00000000
--- a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Для такой анимации необходимо подобрать правильную кривую Безье.
-
-Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`).
-
-Её график:
-
-<img src="bezier-up.png">
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html
deleted file mode 100644
index bf455b87..00000000
--- a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    img {
-      display: block;
-      cursor: pointer;
-    }
-  </style>
-  <style>
-    #flyjet {
-      width: 40px;
-      height: 24px;
-      transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
-    }
-    
-    #flyjet.growing {
-      width: 400px;
-      height: 240px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
-
-  <script>
-    flyjet.onclick = function() {
-      flyjet.classList.add('growing');
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md b/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md
deleted file mode 100644
index 4ba2004b..00000000
--- a/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Анимировать самолёт с перелётом (CSS)
-
-[importance 5]
-
-Модифицируйте решение предыдущей задачи [](/task/animate-logo-css), чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему.
-
-Должно получиться как здесь (клик на картинку)
-[iframe src="solution" height=350]
-
-В качестве исходного документа возьмите решение предыдущей задачи.
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/article.md b/5-animation/2-css-transitions/article.md
deleted file mode 100644
index eaf1fdab..00000000
--- a/5-animation/2-css-transitions/article.md
+++ /dev/null
@@ -1,457 +0,0 @@
-# CSS-анимации
-
-Все современные браузеры, кроме IE9- поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a> и <a href="http://www.w3.org/TR/css3-animations/">CSS animations</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
-
-Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.
-[cut]
-
-## CSS transitions [#css-transition]
-
-Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию. 
-
-Например, CSS, представленный ниже, 3 секунды анимирует свойство `background-color`.
-
-```css
-.animated {
-  transition-property: background-color;
-  transition-duration: 3s;
-}
-```
-
-Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.
-
-При клике на эту кнопку происходит анимация её фона:
-
-```html
-<!--+ run autorun height=60 -->
-<button id="color">Кликни меня</button>
-
-<style>
-  #color {
-    transition-property: background-color;
-    transition-duration: 3s;
-  }
-</style>
-
-<script>
-  color.onclick = function() {
-    this.style.backgroundColor = 'red';
-  }
-</script>
-```
-
-Есть всего 5 свойств, задающих анимацию:
-<ul>
-<li>`transition-property`</li>
-<li>`transition-duration`</li>
-<li>`transition-timing-function`</li>
-<li>`transition-delay`</li>
-</ul>
-
-Далее мы изучим их все, пока лишь заметим, что общее свойство `transition` может перечислять их все, в порядке: `property duration timing-function delay`, а также задавать анимацию нескольких свойств сразу.
-
-Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:
-
-```html
-<!--+ run height=80 autorun  no-beautify -->
-<button id="growing">Кликни меня</button>
-
-<style>
-#growing {
-*!*
-  transition: font-size 3s, color 2s; 
-*/!*
-}
-</style>
-
-<script>
-growing.onclick = function() {
-  this.style.fontSize='36px';
-  this.style.color='red';
-}
-</script>
-```
-
-Далее мы рассмотрим свойства анимации по отдельности.
-
-## transition-property
-
-Список свойств, которые будут анимироваться, например: `left`, `margin-left`, `height`, `color`.
-
-Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".
-
-## transition-duration
-
-Продолжительность анимации, задаётся в формате [CSS time](http://www.w3.org/TR/css3-values/#time), то есть в секундах `s` или `ms`.
-
-## transition-delay
-
-Задержка до анимации. Например, если `transition-delay: 1s`, то анимация начнётся через 1 секунду после смены свойства. 
-
-Возможны отрицательные значения, при этом анимация начнётся с середины.
-
-Например, вот анимация цифр от `0` до `9`:
-
-[codetabs src="digits"]
-
-Она осуществляется сменой `margin-left` у элемента с цифрами, примерно так:
-
-```css
-#stripe.animate {
-  margin-left: -174px;
-  transition-property: margin-left;
-  transition-duration: 9s;
-}
-```
-
-В примере выше JavaScript просто добавляет элементу класс -- и анимация стартует:
-
-```js
-digit.classList.add('animate');
-```
-
-Можно стартовать её "с середины", с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного `transition-delay`.
-
-В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:
-
-[codetabs src="digits-negative-delay"]
-
-В JavaScript это делается дополнительной строкой:
-
-```js
-stripe.onclick = function() {
-  var sec = new Date().getSeconds() % 10;
-*!*
-  // например, значение -3s начнёт анимацию с 3й секунды
-  stripe.style.transitionDelay = '-' + sec + 's';
-*/!*
-  stripe.classList.add('animate');
-};
-```
-
-## transition-timing-function
-
-Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.
-
-Самое сложное, но при небольшом изучении -- вполне очевидное свойство.
-
-У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.
-
-### Кривая Безье
-
-В качестве временной функции можно выбрать любую [кривую Безье](/bezier) с 4 опорными точками, удовлетворяющую условиям:
-<ol>
-<li>Начальная точка `(0,0)`.</li>
-<li>Конечная точка `(1,1)`.</li>
-<li>Для промежуточных точек значения `x` должны быть в интервале  `0..1`, `y` -- любыми.</li>
-</ol>
-
-Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.
-
-Она указывает, как быстро развивается процесс анимации во времени. 
-
-<ul>
-<li>По оси `x` идёт время: `0` -- начальный момент, `1` -- конец времени `transition-duration`.</li>
-<li>По оси `y` -- завершённость процесса: `0` -- начальное значение анимируемого свойства, `1` -- конечное.</li>
-</ul>
-
-Самый простой вариант -- это когда процесс развивается равномерно, "линейно" по времени. Это можно задать кривой Безье `cubic-bezier(0, 0, 1, 1)`.
-
-График этой "кривой" таков:
-
-<img src="bezier-linear.png">
-
-...Как видно, это просто прямая. По мере того, как проходит время `x`, завершённость анимации `y` равномерно приближается от `0` к `1`.
-
-Поезд в примере ниже с постоянной скоростью "едет" слева направо, используя такую временную функцию:
-
-[codetabs src="train-linear"]
-
-
-CSS для анимации:
-```css
-.train {
-  left: 0;
-  transition: left 5s cubic-bezier(0, 0, 1, 1);
-  /* JavaScript ставит значение left: 450px */
-}
-```
-
-Как нам показать, что поезд тормозит?
-
-Для этого используем кривую Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
-
-График этой кривой:
-
-<img src="train-curve.png">
-
-Как видно, процесс вначале развивается быстро -- кривая резко идёт вверх, а затем всё медленнее, медленнее.
-
-Вы можете увидеть эту временную функцию в действии, кликнув на поезд:
-
-[codetabs src="train"]
-
-CSS для анимации:
-```css
-.train {
-  left: 0;
-  transition: left 5s cubic-bezier(0, .5, .5, 1);
-  /* JavaScript ставит значение left: 450px */
-}
-```
-
-Существует несколько стандартных обозначений кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`.
-
-Значение `linear` -- это прямая, мы её уже видели. 
-
-Остальные кривые являются короткой записью следующих `cubic-bezier`:
-
-<table>
-<thead>
-<tr>
-<th>`ease`<sup>*</sup></th>
-<th>`ease-in`</th>
-<th>`ease-out`</th>
-<th>`ease-in-out`</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>`(0.25, 0.1, 0.25, 1.0)`</td>
-<td>`(0.42, 0, 1.0, 1.0)`</td>
-<td>`(0, 0, 0.58, 1.0)`</td>
-<td>`(0.42, 0, 0.58, 1.0)`</td>
-</tr>
-<tr>
-<td><img src="ease.png"></td>
-<td><img src="ease-in.png"></td>
-<td><img src="ease-out.png"></td>
-<td><img src="ease-in-out.png"></td>
-</tr>
-</tbody>
-</table>
-
-* - По умолчанию, если никакой временной функции не указано, -- используется `ease`.
-
-**Кривая Безье может заставить анимацию "выпрыгивать" за пределы диапазона.**
-
-Допустимо указывать для кривой Безье как отрицательные `y`, так и сколь угодно большие. При этом кривая Безье будет также по `y` выскакивать за пределы диапазона `0..1`, представляющего собой начало-конец значения.
-
-В примере ниже CSS-код анимации таков:
-```css
-.train {
-  left: 100px;
-  transition: left 5s cubic-bezier(.5, -1, .5, 2);
-  /* JavaScript поменяет left на 400px */
-}
-```
-
-Свойство `left` должно меняться от `100px` до `400px`.
-
-Однако, если кликнуть на поезд, то мы увидим, что:
-<ul>
-<li>Он едет сначала назад, то есть `left` становится меньше `100px`.</li>
-<li>Затем вперёд, причём выезжает за назначенные `400px`.</li>
-<li>А затем опять назад -- до `400px`.</li>
-</ul>
-
-[codetabs src="train-over"]
-
-Почему так происходит -- отлично видно, если взглянуть на кривую Безье с указанными опорными точками:
-
-<img src="bezier-train-over.png">
-
-Мы вынесли координату `y` для второй опорной точки на 1 ниже нуля, а для третьей опорной точки -- на 1 выше единицы, поэтому и кривая вышла за границы "обычного" квадрата. Её значения по `y` вышли из стандартного диапазона `0..1`.
-
-Как мы помним, значению `y = 0` соответствует "нулевое" положение анимации, а `y = 1` -- конечное. Получается, что значения `y<0` двинули поезд назад, меньше исходного `left`, а значения `y>1` -- больше итогового `left`.
-
-Это, конечно, "мягкий" вариант. Если поставить значения `y` порядка `-99`, `99`, то поезд будет куда более сильно выпрыгивать за диапазон.
-
-Итак, кривая Безье позволяет задавать "плавное"" течение анимации. Подобрать кривую Безье вручную можно на сайте [](http://cubic-bezier.com/).
-
-### Шаги steps
-
-Временная функция `steps(количество шагов[, start/end])` позволяет разбить анимацию на чёткое количество шагов.
-
-Проще всего это увидеть на примере. Выше мы видели плавную анимацию цифр от `0` до `9` при помощи смены `margin-left` у элемента, содержащего `0123456789`.
-
-Чтобы цифры сдвигались не плавно, а шли чётко и раздельно, одна за другой -- мы разобьём анимацию на 9 шагов:
-```css
-#stripe.animate  {
-  margin-left: -174px;
-  transition: margin-left 9s *!*steps(9, start)*/!*;
-}
-```
-
-В действии `step(9, start)`:
-
-[codetabs src="step"]
-
-Первый аргумент `steps` -- количество шагов, то есть изменение `margin-left` разделить на 9 частей, получается примерно по `19px`. На то же количество частей делится и временной интервал, то есть по `1s`. 
-
-`start` -- означает, что при начале анимации нужно сразу применить первое изменение. Это проявляется тем, что при нажатии на цифру она меняется на `1` (первое изменение `margin-left`) мгновенно, а затем в начале каждой следующей секунды.
-
-То есть, процесс развивается так:
-<ul>
-<li>`0s` -- `-19px` (первое изменение в начале 1й секунды, сразу при нажатии)</li>
-<li>`1s` -- `-38px`</li>
-<li>...</li>
-<li>`8s` -- `-174px`</li>
-<li>(на протяжении последней секунды видно окончательное значение).</li>
-</ul>
-
-Альтернативное значение `end` означало бы, что изменения нужно применять не в начале, а в конце каждой секунды, то есть так:
-
-<ul>
-<li>`0s` -- `0`</li>
-<li>`1s` -- `-19px` (первое изменение в конце 1й секунды)</li>
-<li>`2s` -- `-38px`</li>
-<li>...</li>
-<li>`9s` -- `-174px`</li>
-</ul>
-
-В действии `step(9, end)`:
-
-[codetabs src="step-end"]
-
-Также есть сокращённые значения:
-<ul>
-<li>`step-start` -- то же, что `steps(1, start)`, то есть завершить анимацию в 1 шаг сразу.</li>
-<li>`step-end` -- то же, что `steps(1, end)`, то есть завершить анимацию в 1 шаг по истечении `transition-duration`.</li>
-</ul>
-
-Такие значения востребованы редко, так как это даже и не анимация почти, но тоже бывают полезны.
-
-## Событие transitionend
-
-На конец CSS-анимации можно повесить обработчик на событие `transitionend`.
-
-Это широко используется, чтобы после анимации сделать какое-то действие или объединить несколько анимаций в одну.
-
-Например, лодочка в примере ниже при клике начинает плавать туда-обратно, с каждым разом уплывая всё дальше вправо:
-
-[iframe src="boat" height=300 edit link]
-
-Её анимация осуществляется функцией `go`, которая перезапускается по окончании, с переворотом через CSS:
-
-
-```js
-boat.onclick = function() {
-  //...
-  var times = 1;
-
-  function go() {
-    if (times % 2) {
-      // плывём вправо
-      boat.classList.remove('back');
-      boat.style.marginLeft = 100 * times + 200 + 'px';
-    } else {
-      // плывём влево
-      boat.classList.add('back');
-      boat.style.marginLeft = 100 * times - 200 + 'px';
-    }
-
-  }
-
-  go();
-
-  boat.addEventListener('transitionend', function() {
-    times++;
-    go();
-  });
-};
-```
-
-Объект события `transitionend` содержит специфические свойства:
-<dl>
-<dt>`propertyName`</dt>
-<dd>Свойство, анимация которого завершилась.</dd>
-<dt>`elapsedTime`</dt>
-<dd>Время (в секундах), которое заняла анимация, без учета `transition-delay`.</dd>
-</dl>
-
-Свойство `propertyName` может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.
-
-
-## CSS animations
-
-Более сложные анимации делаются объединением простых при помощи CSS-правила `@keyframes`.
-
-В нём задаётся "имя" анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства `animation: имя параметры` эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.
-
-Пример с пояснениями в комментарии:
-
-```html
-<!--+ run height=60 autorun="no-epub" no-beautify -->
-<div class="progress"></div>
-
-<style>
-*!*
-  /* Современные браузеры, кроме Chrome, Opera, Safari */
-  @keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
-    from {
-      left: 0px;               /* от: left: 0px */
-    }
-    to {
-      left: calc(100% - 50px); /* до: left: 100%-50px */
-    }
-  }
-*/!*
-
-  /* Префикс для Chrome, Opera, Safari */
-  @-webkit-keyframes go-left-right {
-    from {
-      left: 0px;
-    }
-    to {
-      left: calc(100% - 50px);
-    }
-  }
-  
-  .progress {
-*!*
-    /* применить анимацию go-left-right */
-    /* продолжительность 3s */
-    /* количество раз: бесконечное (infinite) */
-    /* менять направление анимации каждый раз (alternate) */
-    animation: go-left-right 3s infinite alternate;
-    -webkit-animation: go-left-right 3s infinite alternate;
-*/!*
-
-    position: relative;
-    border: 2px solid green;
-    width: 50px;
-    height: 20px;
-    background: lime;
-  }
-</style>
-```
-
-Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera  нужен префикс `-webkit`.
-
-Статей про CSS animations достаточно много, посмотрите, например:
-
-<ul>
-<li>[Статья про CSS Animation](http://css.yoksel.ru/css-animation/).</li>
-<li>[Пример бесконечной подпрыгивающей анимации на CSS Animation и кривых Безье](https://albiebrown.github.io/gravify/).</li>
-</ul>
-
-## Итого
-
-CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.
-
-Альтернатива им -- плавное изменение значений свойств через JavaScript, мы рассмотрим подробности далее.
-
-Ограничения и достоинства CSS-анимаций по сравнению с JavaScript:
-
-[compare]
--Временная функция может быть задана кривой Безье или через шаги. Более сложные анимации, состоящие из нескольких кривых, реализуются их комбинацией при помощи [CSS animations](http://www.w3.org/TR/css3-animations/), но JavaScript-функции всегда гибче.
--CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно, удалять элементы, создавать новые.
--Отсутствует поддержка в IE9-
-+Простые вещи делаются просто. 
-+"Легче" для процессора, чем анимации JavaScript, лучше используется графический ускоритель. Это очень важно для мобильных устройств.
-[/compare]
-
-Подавляющее большинство анимаций делается через CSS. 
-
-При этом JavaScript запускает их начало -- как правило, добавлением класса, в котором задано новое свойство, и может отследить окончание через событие `transitionend`.
diff --git a/5-animation/2-css-transitions/bezier-linear.png b/5-animation/2-css-transitions/bezier-linear.png
deleted file mode 100644
index 908e13dd..00000000
Binary files a/5-animation/2-css-transitions/bezier-linear.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/bezier-linear@2x.png b/5-animation/2-css-transitions/bezier-linear@2x.png
deleted file mode 100644
index 31e7ae8e..00000000
Binary files a/5-animation/2-css-transitions/bezier-linear@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/bezier-train-over.png b/5-animation/2-css-transitions/bezier-train-over.png
deleted file mode 100644
index 3eb229a1..00000000
Binary files a/5-animation/2-css-transitions/bezier-train-over.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/bezier-train-over@2x.png b/5-animation/2-css-transitions/bezier-train-over@2x.png
deleted file mode 100644
index 967df98a..00000000
Binary files a/5-animation/2-css-transitions/bezier-train-over@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/boat.view/index.html b/5-animation/2-css-transitions/boat.view/index.html
deleted file mode 100644
index 1ceb4c12..00000000
--- a/5-animation/2-css-transitions/boat.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <img src="https://js.cx/clipart/boat.png" id="boat">
-
-  <script>
-    boat.onclick = function() {
-
-      this.onclick = null; // только первый клик сработает
-
-      var times = 1;
-
-      function go() {
-        if (times % 2) {
-          boat.classList.remove('back');
-          boat.style.marginLeft = 100 * times + 200 + 'px';
-        } else {
-          boat.classList.add('back');
-          boat.style.marginLeft = 100 * times - 200 + 'px';
-        }
-
-      }
-
-      go();
-
-      boat.addEventListener('transitionend', function() {
-        times++;
-        go();
-      });
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/boat.view/style.css b/5-animation/2-css-transitions/boat.view/style.css
deleted file mode 100644
index e76028cb..00000000
--- a/5-animation/2-css-transitions/boat.view/style.css
+++ /dev/null
@@ -1,13 +0,0 @@
-#boat {
-  margin-left: 0;
-  cursor: pointer;
-  transition: margin-left 3s ease-in-out;
-}
-/* переворот картинки через CSS */
-
-.back {
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-  filter: fliph;
-  /* IE9- */
-}
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/digits-negative-delay.view/index.html b/5-animation/2-css-transitions/digits-negative-delay.view/index.html
deleted file mode 100644
index 15d26a7d..00000000
--- a/5-animation/2-css-transitions/digits-negative-delay.view/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="digit"><span id="stripe">0123456789</span></div>
-
-  <script src="script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/digits-negative-delay.view/script.js b/5-animation/2-css-transitions/digits-negative-delay.view/script.js
deleted file mode 100644
index f2feda7f..00000000
--- a/5-animation/2-css-transitions/digits-negative-delay.view/script.js
+++ /dev/null
@@ -1,5 +0,0 @@
-stripe.onclick = function() {
-  var sec = new Date().getSeconds() % 10;
-  stripe.style.transitionDelay = '-' + sec + 's';
-  stripe.classList.add('animate');
-};
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/digits-negative-delay.view/style.css b/5-animation/2-css-transitions/digits-negative-delay.view/style.css
deleted file mode 100644
index a3e25cf4..00000000
--- a/5-animation/2-css-transitions/digits-negative-delay.view/style.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#digit {
-  width: .5em;
-  overflow: hidden;
-  font: 32px "Courier New", monospace;
-}
-
-#stripe.animate {
-  margin-left: -174px;
-  transition-property: margin-left;
-  transition-duration: 9s;
-  transition-timing-function: linear;
-}
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/digits.view/index.html b/5-animation/2-css-transitions/digits.view/index.html
deleted file mode 100644
index 15d26a7d..00000000
--- a/5-animation/2-css-transitions/digits.view/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="digit"><span id="stripe">0123456789</span></div>
-
-  <script src="script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/digits.view/style.css b/5-animation/2-css-transitions/digits.view/style.css
deleted file mode 100644
index a3e25cf4..00000000
--- a/5-animation/2-css-transitions/digits.view/style.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#digit {
-  width: .5em;
-  overflow: hidden;
-  font: 32px "Courier New", monospace;
-}
-
-#stripe.animate {
-  margin-left: -174px;
-  transition-property: margin-left;
-  transition-duration: 9s;
-  transition-timing-function: linear;
-}
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/ease-in-out.png b/5-animation/2-css-transitions/ease-in-out.png
deleted file mode 100644
index 9951f9ae..00000000
Binary files a/5-animation/2-css-transitions/ease-in-out.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease-in-out@2x.png b/5-animation/2-css-transitions/ease-in-out@2x.png
deleted file mode 100644
index 4c17a492..00000000
Binary files a/5-animation/2-css-transitions/ease-in-out@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease-in.png b/5-animation/2-css-transitions/ease-in.png
deleted file mode 100644
index daf24ccf..00000000
Binary files a/5-animation/2-css-transitions/ease-in.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease-in@2x.png b/5-animation/2-css-transitions/ease-in@2x.png
deleted file mode 100644
index d76bc939..00000000
Binary files a/5-animation/2-css-transitions/ease-in@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease-out.png b/5-animation/2-css-transitions/ease-out.png
deleted file mode 100644
index 106b7411..00000000
Binary files a/5-animation/2-css-transitions/ease-out.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease-out@2x.png b/5-animation/2-css-transitions/ease-out@2x.png
deleted file mode 100644
index 81e5bd36..00000000
Binary files a/5-animation/2-css-transitions/ease-out@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease.png b/5-animation/2-css-transitions/ease.png
deleted file mode 100644
index 459d27b1..00000000
Binary files a/5-animation/2-css-transitions/ease.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/ease@2x.png b/5-animation/2-css-transitions/ease@2x.png
deleted file mode 100644
index b8e11784..00000000
Binary files a/5-animation/2-css-transitions/ease@2x.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/step-end.view/index.html b/5-animation/2-css-transitions/step-end.view/index.html
deleted file mode 100644
index 7dbe642c..00000000
--- a/5-animation/2-css-transitions/step-end.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="digit"><span id="stripe">0123456789</span></div>
-
-  <script>
-    digit.onclick = function() {
-      stripe.classList.add('animate');
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/step-end.view/style.css b/5-animation/2-css-transitions/step-end.view/style.css
deleted file mode 100644
index 30741ad4..00000000
--- a/5-animation/2-css-transitions/step-end.view/style.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#digit {
-  width: .5em;
-  overflow: hidden;
-  font: 32px "Courier New", monospace;
-}
-
-#stripe.animate {
-  margin-left: -174px;
-  transition-property: margin-left;
-  transition-duration: 9s;
-  transition-timing-function: steps(9, end);
-}
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/step.view/index.html b/5-animation/2-css-transitions/step.view/index.html
deleted file mode 100644
index 7dbe642c..00000000
--- a/5-animation/2-css-transitions/step.view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-  <div id="digit"><span id="stripe">0123456789</span></div>
-
-  <script>
-    digit.onclick = function() {
-      stripe.classList.add('animate');
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/step.view/style.css b/5-animation/2-css-transitions/step.view/style.css
deleted file mode 100644
index e4583b34..00000000
--- a/5-animation/2-css-transitions/step.view/style.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#digit {
-  width: .5em;
-  overflow: hidden;
-  font: 32px "Courier New", monospace;
-}
-
-#stripe.animate {
-  margin-left: -174px;
-  transition-property: margin-left;
-  transition-duration: 9s;
-  transition-timing-function: steps(9, start);
-}
\ No newline at end of file
diff --git a/5-animation/2-css-transitions/train-curve.png b/5-animation/2-css-transitions/train-curve.png
deleted file mode 100644
index 85298d62..00000000
Binary files a/5-animation/2-css-transitions/train-curve.png and /dev/null differ
diff --git a/5-animation/2-css-transitions/train-curve@2x.png b/5-animation/2-css-transitions/train-curve@2x.png
deleted file mode 100644
index fa605db2..00000000
Binary files a/5-animation/2-css-transitions/train-curve@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/1-animate-ball/solution.md b/5-animation/3-js-animation/1-animate-ball/solution.md
deleted file mode 100644
index 87e22bf9..00000000
--- a/5-animation/3-js-animation/1-animate-ball/solution.md
+++ /dev/null
@@ -1,20 +0,0 @@
-В HTML/CSS, падение мяча можно отобразить изменением свойства `ball.style.top` от 0 и до значения, соответствующего нижнему положению.
-
-Нижняя граница элемента `field`, в котором находится мяч, имеет значение  `field.clientHeight`. Но свойство `top` относится к верху мяча, поэтому оно меняется до `field.clientHeight - ball.clientHeight`. 
-
-Для создания анимационного эффекта лучше всего подойдет функция `bounce` в режиме `easeOut`.
-
-Следующий код даст нам нужный результат:
-
-```js
-var to = field.clientHeight - ball.clientHeight;
-
-animate({
-  duration: 2000,
-  timing: makeEaseOut(bounce),
-  draw: function(progress) {
-    ball.style.top = to * progress + 'px'
-  }
-});
-```
-
diff --git a/5-animation/3-js-animation/1-animate-ball/solution.view/index.html b/5-animation/3-js-animation/1-animate-ball/solution.view/index.html
deleted file mode 100644
index 78040c15..00000000
--- a/5-animation/3-js-animation/1-animate-ball/solution.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <script src="https://js.cx/libs/animate.js"></script>
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
-  </div>
-
-  <script>
-    function makeEaseOut(timing) {
-      return function(timeFraction) {
-        return 1 - timing(1 - timeFraction);
-      }
-    }
-
-    function bounce(timeFraction) {
-      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-        if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-        }
-      }
-    }
-
-    ball.onclick = function() {
-
-      var to = field.clientHeight - ball.clientHeight;
-
-      animate({
-        duration: 2000,
-        timing: makeEaseOut(bounce),
-        draw: function(progress) {
-          ball.style.top = to * progress + 'px'
-        }
-      });
-
-
-    };
-  </script>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/1-animate-ball/source.view/index.html b/5-animation/3-js-animation/1-animate-ball/source.view/index.html
deleted file mode 100644
index 7b527a44..00000000
--- a/5-animation/3-js-animation/1-animate-ball/source.view/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <script src="https://js.cx/libs/animate.js"></script>
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/1-animate-ball/task.md b/5-animation/3-js-animation/1-animate-ball/task.md
deleted file mode 100644
index ed588116..00000000
--- a/5-animation/3-js-animation/1-animate-ball/task.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Анимируйте мяч
-
-[importance 5]
-
-Сделайте так, чтобы мяч подпрыгивал. Кликните по мячу, чтобы увидеть, как это должно выглядеть. 
-
-[iframe height=250 src="solution"]
-
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/solution.md b/5-animation/3-js-animation/2-animate-ball-hops/solution.md
deleted file mode 100644
index 5462017a..00000000
--- a/5-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-В задаче [](/task/animate-ball) создаётся подпрыгивающий мяч. Нам нужно всего лишь добавить еще одну анимацию для `elem.style.left`.
-
-Горизонтальная координата меняется по другому закону, нежели вертикальная. Она не "подпрыгивает", а постоянно увеличивается, постепенно сдвигая мяч вправо.
-
-Поэтому мы не можем добавить её в тот же `animate`, нужно делать отдельный.
-
-В качестве временной функции для перемещения вправо мы могли бы применить для неё `linear`, но тогда горизонтальное движение будет отставать от скачков мяча. Более красиво будет что-то типа `makeEaseOut(quad)`.
-
-Код:
-
-```js
-var height = field.clientHeight - ball.clientHeight;
-var width = 100;
-
-animate({
-  duration: 2000,
-  timing: makeEaseOut(bounce),
-  draw: function(progress) {
-    ball.style.top = height * progress + 'px'
-  }
-});
-
-animate({
-  duration: 2000,
-  timing: makeEaseOut(quad),
-  draw: function(progress) {
-    ball.style.left = width * progress + "px"
-  }
-});
-```
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html b/5-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
deleted file mode 100644
index 2590611b..00000000
--- a/5-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <script src="https://js.cx/libs/animate.js"></script>
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
-  </div>
-
-  <script>
-    function makeEaseOut(timing) {
-      return function(timeFraction) {
-        return 1 - timing(1 - timeFraction);
-      }
-    }
-
-    function bounce(timeFraction) {
-      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-        if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-        }
-      }
-    }
-
-    function quad(timeFraction) {
-      return Math.pow(timeFraction, 2);
-    }
-
-    ball.onclick = function() {
-
-      var height = field.clientHeight - ball.clientHeight;
-      var width = 100;
-
-      animate({
-        duration: 2000,
-        timing: makeEaseOut(bounce),
-        draw: function(progress) {
-          ball.style.top = height * progress + 'px'
-        }
-      });
-
-      animate({
-        duration: 2000,
-        timing: makeEaseOut(quad),
-        draw: function(progress) {
-          ball.style.left = width * progress + "px"
-        }
-      });
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/task.md b/5-animation/3-js-animation/2-animate-ball-hops/task.md
deleted file mode 100644
index af3ef3bb..00000000
--- a/5-animation/3-js-animation/2-animate-ball-hops/task.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Анимируйте падение мяча с отскоками вправо
-
-[importance 5]
-
-Заставьте мяч падать вправо. Кликните, чтобы увидеть в действии. 
-
-[iframe height=250 src="solution"]
-
-Напишите код, который будет анимировать мяч. Дистанция вправо составляет `100px`. 
-
-В качестве исходного кода возьмите решение предыдущей задачи [](/task/animate-ball).
\ No newline at end of file
diff --git a/5-animation/3-js-animation/article.md b/5-animation/3-js-animation/article.md
deleted file mode 100644
index 32b265f8..00000000
--- a/5-animation/3-js-animation/article.md
+++ /dev/null
@@ -1,508 +0,0 @@
-# JS-Анимация 
-
-JavaScript-анимация применяется там, где не подходит CSS.
-
-Например, по сложной траектории, с временной функцией, выходящей за рамки кривых Безье, на canvas. Иногда её используют для анимации в старых IE.
-
-[cut]
-
-## setInterval
-
-С точки зрения HTML/CSS, анимация -- это постепенное изменение стиля  DOM-элемента. Например, увеличение координаты `style.left` от `0px` до `100px` сдвигает элемент.
-
-Если увеличивать `left` от `0` до `100` при помощи `setInterval`, делая по 50 изменений в секунду, то это будет выглядеть как плавное перемещение. Тот же принцип, что и в кино: для непрерывной анимации достаточно 24 или больше вызовов `setInterval` в секунду.
-
-Псевдо-код для анимации выглядит так:
-
-```js
-var fps = 50; // 50 кадров в секунду
-var timer = setInterval(function() {
-  if (время вышло) clearInterval(timer);
-  else немного увеличить left
-}, 1000 / fps)
-```
-
-Более полный пример кода анимации:
-
-```js
-var start = Date.now(); // сохранить время начала
-
-var timer = setInterval(function() {
-  // вычислить сколько времени прошло с начала анимации
-  var timePassed = Date.now() - start;
-
-  if (timePassed >= 2000) {
-    clearInterval(timer); // конец через 2 секунды 
-    return;
-  }
-
-  // рисует состояние анимации, соответствующее времени timePassed
-  draw(timePassed);
-
-}, 20);
-
-// в то время как timePassed идёт от 0 до 2000
-// left принимает значения от 0 до 400px
-function draw(timePassed) {
-  train.style.left = timePassed / 5 + 'px';
-}
-```
-
-Кликните для демонстрации:
-
-[codetabs height=200 src="move"]
-
-## requestAnimationFrame
-
-Если у нас не один такой `setInterval`, а несколько в разных местах кода, то браузеру нужно в те же 20мс работать со страницей уже несколько раз. А ведь кроме `setInterval` есть ещё другие действия, к примеру, прокрутка страницы, которую тоже надо нарисовать.
-
-Если все действия по перерисовке производить независимо, то будет выполняться много двойной работы.
-
-Гораздо выгоднее с точки зрения производительности -- сгруппировать все перерисовки в одну и запускать их централизованно, все вместе.
-
-Для этого в JavaScript-фреймворках, которые поддерживают анимацию, есть единый таймер:
-
-```js
-setInterval(function() {
-  /* отрисовать все анимации */
-}, 20);
-```
-
-...Все анимации, которые запускает такой фреймворк, добавляются в общий список, и раз в 20мс единый таймер проверяет его, запускает текущие, удаляет завершившиеся.
-
-Современные браузеры, кроме IE9-, поддерживают стандарт [Animation timing](http://www.w3.org/TR/animation-timing/), который представляет собой дальнейший шаг в этом направлении. Он позволяет синхронизировать наши анимации со встроенными механизмами обновления страницы. То есть, сгруппированы будут не только наши, но и CSS-анимации и другие браузерные перерисовки. 
-
-При этом графический ускоритель будет использован максимально эффективно, и исключена повторная обработка одних и тех же участков страницы. А значит -- меньше будет загрузка CPU, да и сама анимация станет более плавной.
-
-Для этого используется функция [requestAnimationFrame](http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe).
-
-Синтаксис:
-```js
-var requestId = requestAnimationFrame(callback)
-```
-
-Такой вызов планирует запуск `callback` в ближайшее время, когда браузер сочтёт возможным осуществить анимацию. 
-
-Если запланировать в `callback` какое-то рисование, то оно будет сгруппировано с другими `requestAnimationFrame` и с внутренними перерисовками браузера.
-
-Возвращаемое значение `requestId` служит для отмены запуска:
-```js
-// отменить запланированное выше выполнение callback
-cancelAnimationFrame(requestId);
-```
-
-Функция `callback` получает один аргумент -- время, прошедшее с начала загрузки страницы, результат вызова [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now).
-
-Как правило, запуск `callback` происходит очень скоро. Если у процессора большая загрузка или батарея у ноутбука почти разряжена -- то пореже.
-
-Если вы запустите этот код, то увидите промежутки между первыми 20 запусками `requestAnimationFrame`. Как правило, это 10-20мс, но бывает и больше и меньше. Это оптимальная частота анимации с точки зрения браузера.
-
-```html
-<!--+ run height=40 refresh -->
-<script>
-  var prev = performance.now();
-  var times = 0;
-
-  requestAnimationFrame(function measure(time) {
-    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
-    prev = time;
-
-    if (times++ < 10) requestAnimationFrame(measure);
-  })
-</script>
-```
-
-
-Функция анимации на основе `requestAnimationFrame`:
-
-```js
-// Рисует функция draw
-// Продолжительность анимации duration
-function animate(draw, duration) {
-  var start = performance.now();
-
-  requestAnimationFrame(function animate(time) {
-    // определить, сколько прошло времени с начала анимации
-    var timePassed = time - start;
-
-    // возможно небольшое превышение времени, в этом случае зафиксировать конец
-    if (timePassed > duration) timePassed = duration;
-
-    // нарисовать состояние анимации в момент timePassed
-    draw(timePassed);
-
-    // если время анимации не закончилось - запланировать ещё кадр
-    if (timePassed < duration) {
-      requestAnimationFrame(animate);
-    }
-
-  });
-}
-```
-
-Использование для поезда:
-```js
-animate(function(timePassed) {
-  train.style.left = timePassed / 5 + 'px';
-}, 2000);
-```
-
-В действии:
-
-[codetabs src="move-raf"]
-
-## Структура анимации
-
-На основе `requestAnimationFrame` можно соорудить и гораздо более мощную, но в то же время простую функцию анимации.
-
-У анимации есть три основных параметра:
-<dl>
-<dt>`duration`</dt>
-<dd>Общее время, которое должна длиться анимация, в мс. Например, `1000`.</dd>
-<dt>`timing(timeFraction)`</dt>
-<dd>Временная функция, которая, по аналогии с CSS-свойством `transition-timing-function`, будет по текущему времени вычислять состояние анимации.
-
-Она получает на вход непрерывно возрастающее число `timeFraction` -- от `0` до `1`, где `0` означает самое начало анимации, а `1` -- её конец.
-
-Её результатом должно быть значение завершённости анимации, которому в CSS transitions на кривых Безье соответствует координата `y`. 
-
-Также по аналогии с `transition-timing-function` должны соблюдаться условия:
-<ul>
-<li>timing(0) = 0</li>
-<li>timing(1) = 1</li>
-</ul>
-
-...То есть, анимация начинается в точке `(0,0)` -- нулевое время и нулевой прогресс и заканчивается в `(1, 1)` -- прошло полное время, и процесс завершён.
-
-Например, функция-прямая означает равномерное развитие процесса:
-```js
-function linear(timeFraction) {
-  return timeFraction;
-}
-```
-Её график:
-<img src="linear.png">
-
-Как видно, её график полностью совпадает с `transition-timing-function: linear`, и эффект абсолютно такой же.
-
-Есть и другие, более интересные варианты, мы рассмотрим их чуть позже.
-
-</dd>
-<dt>`draw(progress)`</dt>
-<dd>Функция, которая получает состояние завершённости анимации и рисует его. Значению `progress=0` соответствует начальная точка анимации, `progress=1` -- конечная.
-
-Именно эта функция и осуществляет, собственно, анимацию.
-
-Например, может двигать элемент:
-```js
-function draw(progress) {
-  train.style.left = progress + 'px';
-}
-```
-
-Возможны любые варианты, анимировать можно что угодно и как угодно.
-</dd>
-</dl>
-
-
-Анимируем ширину элемента `width` от `0` до `100%`, используя нашу функцию.
-
-Кликните для демонстрации:
-[codetabs height=60 src="width"]
-
-Код для запуска анимации:
-
-```js
-animate({
-  duration: 1000,
-  timing: function(timeFraction) {
-    return timeFraction;
-  },
-  draw: function(progress) {
-    elem.style.width = progress * 100 + '%';
-  }
-});
-```
-
-## Временные функции
-
-Выше мы видели самую простую, линейную временную функцию. 
-
-Рассмотрим примеры анимации движения с использованием различных `timing`.
-
-### В степени n   
-
-Вот еще один простой случай -- `progress` в степени `n`. Частные случаи - квадратичная, кубическая функции и т.д.
-
-Для квадратичной функции:
-
-```js
-function quad(progress) {
-  return Math.pow(progress, 2)
-}
-```
-
-**График квадратичной функции:**
-
-<img src="quad.png">
-
-Пример для квадратичной функции (клик для просмотра):
-[iframe height=40 src="quad" link]
-
-Увеличение степени влияет на ускорение. Например, график для 5-й степени:
-
-<img src="quint.png">
-
-В действии:
-[iframe height=40 src="quint" link]
-
-### Дуга   
-
-Функция:
-
-```js
-function circ(timeFraction) {
-  return 1 - Math.sin(Math.acos(timeFraction))
-}
-```
-
-**График:**
-
-<img src="circ.png">
-
-[iframe height=40 src="circ" link]
-
-
-### Back: стреляем из лука   
-
-Эта функция работает по принципу лука: сначала мы "натягиваем тетиву", а затем "стреляем".
-
-В отличие от предыдущих функций, эта зависит от дополнительного параметра `x`, который является "коэффициентом упругости". Он определяет расстояние, на которое "оттягивается тетива".
-
-Её код:
-
-```js
-function back(x, timeFraction) {
-  return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
-}
-```
-
-**График для `x = 1.5`:**
-
-<img src="back.png">
-
-Пример для `x = 1.5`:
-
-
-[iframe height=40 src="back" link]
-
-### Отскок bounce
-
-Представьте, что мы отпускаем мяч, он падает на пол, несколько раз отскакивает и останавливается.
-
-Функция `bounce` делает то же самое, только наоборот: "подпрыгивание" начинается сразу.
-
-Эта функция немного сложнее предыдущих и использует специальные коэффициенты:
-
-```js
-function bounce(timeFraction) {
-  for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-    if (timeFraction >= (7 - 4 * a) / 11) {
-      return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-    }
-  }
-}
-```
-
-Код взят из MooTools.FX.Transitions. Конечно же, есть и другие реализации `bounce`.
-
-Пример:
-
-[iframe height=40 src="bounce" link]
-
-### Упругая анимация
-
-Эта функция зависит от дополнительного параметра `x`, который определяет начальный диапазон.
-
-```js
-function elastic(x, timeFraction) {
-  return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
-}
-```
-
-**График для `x=1.5`:**
-<img src="elastic.png">
-
-Пример для `x=1.5`:
-
-[iframe height=40 src="elastic" link]
-
-
-## Реверсивные функции ease*
-
-Итак, у нас есть коллекция временных функций.
-
-Их прямое использование называется "easeIn".
-
-**Иногда нужно показать анимацию в обратном режиме. Преобразование функции, которое даёт такой эффект, называется "easeOut"**. 
-
-### easeOut   
-
-В режиме "easeOut", значение timing вычисляется по формуле: `timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)`
-
-Например, функция `bounce` в режиме "easeOut":
-
-```js
-// обычный вариант
-function bounce(timeFraction) {
-  for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-    if (timeFraction >= (7 - 4 * a) / 11) {
-      return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2);
-    }
-  }
-}
-
-// преобразователь в easeOut
-function makeEaseOut(timing) {
-  return function(timeFraction) {
-    return 1 - timing(1 - timeFraction);
-  }
-}
-
-*!*
-var bounceEaseOut = makeEaseOut(bounce);
-*/!*
-```
-
-Полный пример -- откок в `bounceEaseOut` теперь не в начале, а в конце (и это куда красивее):
-
-[codetabs src="bounce-easeout"]
-
-На этом графике видно, как преобразование `easeOut` изменяет поведение функции:
-
-<img src="bounce-inout.png">
-
-Если есть анимационный эффект, такой как подпрыгивание -- он будет показан в конце, а не в начале (или наоборот, в начале, а не в конце).
-
-Красным цветом обозначен <span style="color:#EE6B47">обычный вариант</span>, а <span style="color:#62C0DC">синим</span> -- `easeOut`.
-<ul>
-<li>Обычно анимируемый объект сначала медленно скачет внизу, а затем, в конце, резко достигает верха..</li>
-<li>А после `easeOut` -- он сначала прыгает наверх, а затем медленно скачет внизу.</li>
-</ul>
-
-
-### easeInOut   
-
-А еще можно сделать так, чтобы показать эффект *и в начале и в конце* анимации. Соответствующее преобразование называется "easeInOut".
-
-Его код выглядит так:
-
-```js
-if (timeFraction <= 0.5) { // первая половина анимации)
-  return timing(2 * timeFraction) / 2;
-} else { // вторая половина
-  return (2 - timing(2 * (1 - timeFraction))) / 2;
-}
-```
-
-Код, который трансформирует `timing`:
-
-```js
-function makeEaseInOut(timing) {
-  return function(timeFraction) {
-    if (timeFraction < .5)
-      return timing(2 * timeFraction) / 2;
-    else
-      return (2 - timing(2 * (1 - timeFraction))) / 2;
-  }
-}
-
-bounceEaseInOut = makeEaseInOut(bounce);
-```
-
-Пример с `bounceEaseInOut`:
-
-[codetabs src="bounce-easeinout"]
-
-
-Трансформация "easeInOut" объединяет в себе два графика в один: `easeIn` для первой половины анимации и `easeOut` -- для второй.
-
-Это отлично видно, если посмотреть графики `easeIn`, `easeOut` и `easeInOut` на примере функции `circ`:
-
-<img src="circ-ease.png">
-
-<ul>
-<li><span style="color:#EE6B47">Красным</span> цветом обозначен обычный вариант функции `circ`.</li>
-<li><span style="color:#8DB173">Зелёным</span> -- `easeOut`.</li>
-<li><span style="color:#62C0DC">Синим</span> -- `easeInOut`.</li>
-</ul>
-
-Как видно, график первой половины анимации представляет собой уменьшенный "easeIn", а второй -- уменьшенный "easeOut". В результате, анимация начинается и заканчивается одинаковым эффектом.
-
-[summary]
-Процесс анимации полностью в ваших руках благодаря `timing`. Её можно сделать настолько реалистичной, насколько захочется.
-
-Впрочем, исходя из практики, можно сказать, что варианты `timing`, описанные выше, покрывают 95% потребностей в анимации.
-[/summary]
-
-## Сложные варианты step   
-
-Анимировать можно все, что угодно. Вместо движения, как во всех предыдущих примерах, можно изменять любые CSS свойства... И не только!
-
-Достаточно лишь написать соответствующий `draw`.
-
-### Набор текста  
-
-Можно, к примеру, анимировать набор текста в "скачущем" режиме:
-
-[codetabs src="text"]
-
-## Итого 
-
-Анимация выполняется путём вызовов `requestAnimationFrame`. Для поддержки IE9- желательно подключить полифилл, который будет внутри использовать `setTimeout`. Это будет всё равно лучше, чем независимые `setInterval`.
-
-Реализация анимации -- очень простая и вместе с тем гибкая:
-
-```js
-function animate(options) {
-
-  var start = performance.now();
-
-  requestAnimationFrame(function animate(time) {
-    // timeFraction от 0 до 1
-    var timeFraction = (time - start) / options.duration;
-    if (timeFraction > 1) timeFraction = 1;
-
-    // текущее состояние анимации
-    var progress = options.timing(timeFraction)
-
-    options.draw(progress);
-
-    if (timeFraction < 1) {
-      requestAnimationFrame(animate);
-    }
-
-  });
-}
-```
-
-Основные параметры:
-<ul>
-<li>`duration` -- длительность анимации в мс.</li> 
-<li>`timing` -- функция, которая определяет состояние анимации каждый кадр. Получает часть времени от 0 до 1, возвращает завершенность анимации от 0 до 1. 
-</li>
-<li>`draw` -- функция, которая отрисовывает состояние анимации от 0 до 1.</li>
-</ul>
-
-Эту функцию можно улучшить, например добавить коллбэк `complete` для вызова в конце анимации.
-
-Мы рассмотрели ряд примеров для `timing` и  трансформации `easeOut`, `easeInOut`, которые позволяют их разнообразить. В отличие от CSS мы не ограничены кривыми Безье, можно реализовать всё, что угодно.
-
-Это же относится и к функции `draw`.
-
-Такая реализация анимации имеет три основных области применения:
-<ul>
-<li>Нестандартные задачи и требования, не укладывающиеся в рамки CSS.</li>
-<li>Поддержка IE9-.</li>
-<li>Графика, рисование на canvas.</li>
-</ul>
diff --git a/5-animation/3-js-animation/back.png b/5-animation/3-js-animation/back.png
deleted file mode 100644
index 79fce504..00000000
Binary files a/5-animation/3-js-animation/back.png and /dev/null differ
diff --git a/5-animation/3-js-animation/back@2x.png b/5-animation/3-js-animation/back@2x.png
deleted file mode 100644
index 4bfbe127..00000000
Binary files a/5-animation/3-js-animation/back@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/bezier-linear.png b/5-animation/3-js-animation/bezier-linear.png
deleted file mode 100644
index 908e13dd..00000000
Binary files a/5-animation/3-js-animation/bezier-linear.png and /dev/null differ
diff --git a/5-animation/3-js-animation/bezier-linear@2x.png b/5-animation/3-js-animation/bezier-linear@2x.png
deleted file mode 100644
index 31e7ae8e..00000000
Binary files a/5-animation/3-js-animation/bezier-linear@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/bounce-easeinout.view/index.html b/5-animation/3-js-animation/bounce-easeinout.view/index.html
deleted file mode 100644
index f22b7e57..00000000
--- a/5-animation/3-js-animation/bounce-easeinout.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://js.cx/libs/animate.js"></script>
-</head>
-
-<body>
-
-
-  <div id="path">
-    <div id="brick"></div>
-  </div>
-
-  <script>
-    function makeEaseInOut(timing) {
-      return function(timeFraction) {
-        if (timeFraction < .5)
-          return timing(2 * timeFraction) / 2;
-        else
-          return (2 - timing(2 * (1 - timeFraction))) / 2;
-      }
-    }
-
-
-    function bounce(timeFraction) {
-      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-        if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-        }
-      }
-    }
-
-    var bounceEaseInOut = makeEaseInOut(bounce);
-
-    brick.onclick = function() {
-      animate({
-        duration: 3000,
-        timing: bounceEaseInOut,
-        draw: function(progress) {
-          brick.style.left = progress * 500 + 'px';
-        }
-      });
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/bounce-easeout.view/index.html b/5-animation/3-js-animation/bounce-easeout.view/index.html
deleted file mode 100644
index 0cf5c059..00000000
--- a/5-animation/3-js-animation/bounce-easeout.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://js.cx/libs/animate.js"></script>
-</head>
-
-<body>
-
-
-  <div id="path">
-    <div id="brick"></div>
-  </div>
-
-  <script>
-    function makeEaseOut(timing) {
-      return function(timeFraction) {
-        return 1 - timing(1 - timeFraction);
-      }
-    }
-
-    function bounce(timeFraction) {
-      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-        if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-        }
-      }
-    }
-
-    var bounceEaseOut = makeEaseOut(bounce);
-
-    brick.onclick = function() {
-      animate({
-        duration: 3000,
-        timing: bounceEaseOut,
-        draw: function(progress) {
-          brick.style.left = progress * 500 + 'px';
-        }
-      });
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/bounce-inout.png b/5-animation/3-js-animation/bounce-inout.png
deleted file mode 100644
index ae0e4060..00000000
Binary files a/5-animation/3-js-animation/bounce-inout.png and /dev/null differ
diff --git a/5-animation/3-js-animation/bounce-inout@2x.png b/5-animation/3-js-animation/bounce-inout@2x.png
deleted file mode 100644
index 697f4ad6..00000000
Binary files a/5-animation/3-js-animation/bounce-inout@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/bounce.view/index.html b/5-animation/3-js-animation/bounce.view/index.html
deleted file mode 100644
index 9e415ef6..00000000
--- a/5-animation/3-js-animation/bounce.view/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://js.cx/libs/animate.js"></script>
-</head>
-
-<body>
-
-
-  <div id="path">
-    <div id="brick"></div>
-  </div>
-
-  <script>
-    brick.onclick = function() {
-      animate({
-        duration: 3000,
-        timing: function bounce(timeFraction) {
-          for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-            if (timeFraction >= (7 - 4 * a) / 11) {
-              return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-            }
-          }
-        },
-        draw: function(progress) {
-          brick.style.left = progress * 500 + 'px';
-        }
-      });
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/circ-ease.png b/5-animation/3-js-animation/circ-ease.png
deleted file mode 100644
index 58e03f43..00000000
Binary files a/5-animation/3-js-animation/circ-ease.png and /dev/null differ
diff --git a/5-animation/3-js-animation/circ-ease@2x.png b/5-animation/3-js-animation/circ-ease@2x.png
deleted file mode 100644
index 8521f63c..00000000
Binary files a/5-animation/3-js-animation/circ-ease@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/circ.png b/5-animation/3-js-animation/circ.png
deleted file mode 100644
index 2b317b5b..00000000
Binary files a/5-animation/3-js-animation/circ.png and /dev/null differ
diff --git a/5-animation/3-js-animation/circ@2x.png b/5-animation/3-js-animation/circ@2x.png
deleted file mode 100644
index a3ba73e3..00000000
Binary files a/5-animation/3-js-animation/circ@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/elastic.png b/5-animation/3-js-animation/elastic.png
deleted file mode 100644
index d7fa5ceb..00000000
Binary files a/5-animation/3-js-animation/elastic.png and /dev/null differ
diff --git a/5-animation/3-js-animation/elastic@2x.png b/5-animation/3-js-animation/elastic@2x.png
deleted file mode 100644
index 766393cc..00000000
Binary files a/5-animation/3-js-animation/elastic@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/linear.png b/5-animation/3-js-animation/linear.png
deleted file mode 100644
index 85612747..00000000
Binary files a/5-animation/3-js-animation/linear.png and /dev/null differ
diff --git a/5-animation/3-js-animation/linear@2x.png b/5-animation/3-js-animation/linear@2x.png
deleted file mode 100644
index bea7f85d..00000000
Binary files a/5-animation/3-js-animation/linear@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/move-raf.view/index.html b/5-animation/3-js-animation/move-raf.view/index.html
deleted file mode 100644
index ef1b82dd..00000000
--- a/5-animation/3-js-animation/move-raf.view/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #train {
-      position: relative;
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img id="train" src="https://js.cx/clipart/train.gif">
-
-
-  <script>
-    train.onclick = function() {
-      animate(function(timePassed) {
-        train.style.left = timePassed / 5 + 'px';
-      }, 2000);
-    };
-
-    // Рисует функция draw
-    // Продолжительность анимации duration
-    function animate(draw, duration) {
-      var start = performance.now();
-
-      requestAnimationFrame(function animate(time) {
-        // определить, сколько прошло времени с начала анимации
-        var timePassed = time - start;
-
-        console.log(time, start)
-          // возможно небольшое превышение времени, в этом случае зафиксировать конец
-        if (timePassed > duration) timePassed = duration;
-
-        // нарисовать состояние анимации в момент timePassed
-        draw(timePassed);
-
-        // если время анимации не закончилось - запланировать ещё кадр
-        if (timePassed < duration) {
-          requestAnimationFrame(animate);
-        }
-
-      });
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/move.view/index.html b/5-animation/3-js-animation/move.view/index.html
deleted file mode 100644
index 8ce2c456..00000000
--- a/5-animation/3-js-animation/move.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #train {
-      position: relative;
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img id="train" src="https://js.cx/clipart/train.gif">
-
-
-  <script>
-    train.onclick = function() {
-      var start = Date.now(); // сохранить время начала
-
-      var timer = setInterval(function() {
-        // вычислить сколько времени прошло из opts.duration
-        var timePassed = Date.now() - start;
-
-        train.style.left = timePassed / 5 + 'px';
-
-        if (timePassed > 2000) clearInterval(timer);
-
-      }, 20);
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/quad.png b/5-animation/3-js-animation/quad.png
deleted file mode 100644
index b8ddfadd..00000000
Binary files a/5-animation/3-js-animation/quad.png and /dev/null differ
diff --git a/5-animation/3-js-animation/quad@2x.png b/5-animation/3-js-animation/quad@2x.png
deleted file mode 100644
index 424b7904..00000000
Binary files a/5-animation/3-js-animation/quad@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/quint.png b/5-animation/3-js-animation/quint.png
deleted file mode 100644
index 1e120dc5..00000000
Binary files a/5-animation/3-js-animation/quint.png and /dev/null differ
diff --git a/5-animation/3-js-animation/quint@2x.png b/5-animation/3-js-animation/quint@2x.png
deleted file mode 100644
index f4182dbf..00000000
Binary files a/5-animation/3-js-animation/quint@2x.png and /dev/null differ
diff --git a/5-animation/3-js-animation/text.view/index.html b/5-animation/3-js-animation/text.view/index.html
deleted file mode 100644
index 25fe2bcc..00000000
--- a/5-animation/3-js-animation/text.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
-  <script src="https://js.cx/libs/animate.js"></script>
-</head>
-
-<body>
-
-
-  <textarea id="textExample" rows="4" cols="60">Он стал под дерево и ждет. И вдруг граахнул гром — Летит ужасный Бармаглот И пылкает огнем!
-  </textarea>
-
-  <button onclick="animateText(textExample)">Запустить анимированную печать!</button>
-
-  <script>
-    function animateText(textArea) {
-      var text = textArea.value;
-      var to = text.length,
-        from = 0;
-
-      animate({
-        duration: 5000,
-        timing: bounce,
-        draw: function(progress) {
-          var result = (to - from) * progress + from;
-          textArea.value = text.substr(0, Math.ceil(result))
-        }
-      });
-    }
-
-
-    function bounce(timeFraction) {
-      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
-        if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
-        }
-      }
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/3-js-animation/width.view/animate.js b/5-animation/3-js-animation/width.view/animate.js
deleted file mode 100644
index 8e2faad4..00000000
--- a/5-animation/3-js-animation/width.view/animate.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function animate(options) {
-
-  var start = performance.now();
-
-  requestAnimationFrame(function animate(time) {
-    // timeFraction от 0 до 1
-    var timeFraction = (time - start) / options.duration;
-    if (timeFraction > 1) timeFraction = 1;
-
-    // текущее состояние анимации
-    var progress = options.timing(timeFraction)
-
-    options.draw(progress);
-
-    if (timeFraction < 1) {
-      requestAnimationFrame(animate);
-    }
-
-  });
-}
\ No newline at end of file
diff --git a/5-animation/3-js-animation/width.view/index.html b/5-animation/3-js-animation/width.view/index.html
deleted file mode 100644
index afbf49de..00000000
--- a/5-animation/3-js-animation/width.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    progress {
-      width: 5%;
-    }
-  </style>
-  <script src="animate.js"></script>
-</head>
-
-<body>
-
-
-  <progress id="elem"></progress>
-
-  <script>
-    elem.onclick = function() {
-      animate({
-        duration: 1000,
-        timing: function(timeFraction) {
-          return timeFraction;
-        },
-        draw: function(progress) {
-          elem.style.width = progress * 100 + '%';
-        }
-      });
-    };
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/5-animation/index.md b/5-animation/index.md
deleted file mode 100644
index 72043f5d..00000000
--- a/5-animation/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Анимация 
-
-CSS анимации. Контроль над ними из JavaScript. Анимации на чистом JavaScript.
\ No newline at end of file
diff --git a/5-regular-expressions/01-regexp-introduction/article.md b/5-regular-expressions/01-regexp-introduction/article.md
new file mode 100644
index 00000000..7cdb55e0
--- /dev/null
+++ b/5-regular-expressions/01-regexp-introduction/article.md
@@ -0,0 +1,131 @@
+# Patterns and flags
+
+Regular expressions is a powerful way of searching and replacing inside a string.
+
+In JavaScript regular expressions are implemented using objects of a built-in `RegExp` class and integrated with strings.
+
+Please note that regular expressions vary between programming languages. In this tutorial we concentrate on JavaScript. Of course there's a lot in common, but they are a somewhat different in Perl, Ruby, PHP etc.
+
+[cut]
+
+## Regular expressions
+
+A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
+
+There are two syntaxes to create a regular expression object.
+
+The long syntax:
+
+```js
+regexp = new RegExp("pattern", "flags");
+```
+
+...And the short one, using slashes `"/"`:
+
+```js
+regexp = /pattern/; // no flags
+regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
+```
+
+Slashes `"/"` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
+
+## Usage
+
+To search inside a string, we can use method [search](mdn:js/String/search).
+
+Here's an example:
+
+```js run
+let str = "I love JavaScript!"; // will search here
+
+let regexp = /love/;
+alert( str.search(regexp) ); // 2
+```
+
+The `str.search` method looks for the pattern `pattern:/love/` and returns the position inside the string. As we might guess, `pattern:/love/` is the simplest possible pattern. What it does is a simple substring search.
+
+The code above is the same as:
+
+```js run
+let str = "I love JavaScript!"; // will search here
+
+let substr = 'love';
+alert( str.search(substr) ); // 2
+```
+
+So searching for `pattern:/love/` is the same as searching for `"love"`.
+
+But that's only for now. Soon we'll create more complex regular expressions with much searching more power.
+
+```smart header="Colors"
+From here on the color scheme is:
+
+- regexp -- `pattern:red`
+- string (where we search) -- `subject:blue`
+- result -- `match:green`
+```
+
+
+````smart header="When to use `new RegExp`?"
+Normally we use the short syntax `/.../`. But it does not allow any variables insertions, so we must know the exact regexp at the time of writing the code.
+
+From the other hand, `new RegExp` allows to construct a pattern dynamically from a string.
+
+So we can figure out what we need to search and create `new RegExp` from it:
+
+```js run
+let search = prompt("What you want to search?", "love");
+let regexp = new RegExp(search);
+
+// find whatever the user wants
+alert( "I love JavaScript".search(regexp));
+```
+````
+
+
+## Flags
+
+Regular expressions may have flags that affect the search.
+
+There are only 5 of them in JavaScript:
+
+`i`
+: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
+
+`g`
+: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter).
+
+`m`
+: Multiline mode (covered in the chapter <info:regexp-multiline>).
+
+`u`
+: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
+
+`y`
+: Sticky mode (covered in the [next chapter](info:regexp-methods#y-flag))
+
+
+## The "i" flag
+
+The simplest flag is `i`.
+
+An example with it:
+
+```js run
+let str = "I love JavaScript!";
+
+alert( str.search(/LOVE/) ); // -1 (not found)
+alert( str.search(/LOVE/i) ); // 2
+```
+
+1. The first search returns `-1` (not found), because the search is case-sensitive by default.
+2. With the flag `pattern:/LOVE/i` the search found `match:love` at position 2.
+
+So the `i` flag already makes regular expressions more powerful than a simple substring search. But there's so much more. We'll cover other flags and features in the next chapters.
+
+
+## Summary
+
+- A regular expression consists of a pattern and optional flags: `g`, `i`, `m`, `u`, `y`.
+- Without flags and special symbols that we'll study later, the search by a regexp is the same as a  substring search.
+- The method `str.search(regexp)` returns the index where the match is found or `-1` if there's no match.
diff --git a/5-regular-expressions/02-regexp-methods/article.md b/5-regular-expressions/02-regexp-methods/article.md
new file mode 100644
index 00000000..ddd987b3
--- /dev/null
+++ b/5-regular-expressions/02-regexp-methods/article.md
@@ -0,0 +1,409 @@
+# Methods of RegExp and String
+
+There are two sets of methods to deal with regular expressions.
+
+1. First, regular expressions are objects of the built-in [RegExp](mdn:js/RegExp) class, it provides many methods.
+2. Besides that, there are methods in regular strings can work with regexps.
+
+The structure is a bit messed up, so we'll first consider methods separately, and then -- practical recipes for common tasks.
+
+[cut]
+
+## str.search(reg)
+
+We've seen this method already. It returns the position of the first match or `-1` if none found:
+
+```js run
+let str = "A drop of ink may make a million think";
+
+alert( str.search( *!*/a/i*/!* ) ); // 0 (the first position)
+```
+
+**The important limitation: `search` always looks for the first match.**
+
+We can't find next positions using `search`, there's just no syntax for that. But there are other mathods that can.
+
+## str.match(reg), no "g" flag
+
+The method `str.match` behavior varies depending on the `g` flag. First let's see the case without it.
+
+Then `str.match(reg)` looks for the first match only.
+
+The result is an array with that match and additional properties:
+
+- `index` -- the position of the match inside the string,
+- `input` -- the subject string.
+
+For instance:
+
+```js run
+let str = "Fame is the thirst of youth";
+
+let result = str.match( *!*/fame/i*/!* );
+
+alert( result[0] );    // Fame (the match)
+alert( result.index ); // 0 (at the zero position)
+alert( result.input ); // "Fame is the thirst of youth" (the string)
+```
+
+The array may have more than one element.
+
+**If a part of the pattern is delimited by parentheses `(...)`, then it becomes a separate element of the array.**
+
+For instance:
+
+```js run
+lar str = "JavaScript is a programming language";
+
+let result = str.match( *!*/JAVA(SCRIPT)/i*/!* );
+
+alert( result[0] ); // JavaScript (the whole match)
+alert( result[1] ); // script (the part of the match that corresponds to the parentheses)
+alert( result.index ); // 0
+alert( result.input ); // JavaScript is a programming language
+```
+
+Due to the `i` flag the search is case-insensitive, so it finds `match:JavaScript`. The part of the match that corresponds to `pattern:SCRIPT` becomes a separate array item.
+
+We'll be back to parentheses later in the chapter <info:regexp-groups>. They are great for search-and-replace.
+
+## str.match(reg) with "g" flag
+
+When there's a `"g"` flag, then `str.match` returns an array of all matches. There are no additional properties in that array, and parentheses do not create any elements.
+
+For instance:
+
+```js run
+let str = "HO-Ho-ho!";
+
+let result = str.match( *!*/ho/ig*/!* );
+
+alert( result ); // HO, Ho, ho (all matches, case-insensitive)
+```
+
+With parentheses nothing changes, here we go:
+
+```js run
+let str = "HO-Ho-ho!";
+
+let result = str.match( *!*/h(o)/ig*/!* );
+
+alert( result ); // HO, Ho, ho
+```
+
+So, with `g` flag the `result` is a simple array of matches. No additional properties.
+
+If we want to get information about match positions and use parentheses then we should use  [RegExp#exec](mdn:js/RegExp/exec) method that we'll cover below.
+
+````warn header="If there are no matches, the call to `match` returns `null`"
+Please note, that's important. If there were no matches, the result is not an empty array, but `null`.
+
+Keep that in mind to evade pitfalls like this:
+
+```js run
+let str = "Hey-hey-hey!";
+
+alert( str.match(/ho/gi).length ); // error! there's no length of null
+```
+````
+
+## str.split(regexp|substr, limit)
+
+Splits the string using the regexp (or a substring) as a delimiter.
+
+We already used `split` with strings, like this:
+
+```js run
+alert('12-34-56'.split('-')) // [12, 34, 56]
+```
+
+But we can also pass a regular expression:
+
+```js run
+alert('12-34-56'.split(/-/)) // [12, 34, 56]
+```
+
+## str.replace(str|reg, str|func)
+
+The swiss army knife for search and replace in strings.
+
+The simplest use -- search and replace a substring, like this:
+
+```js run
+// replace a dash by a colon
+alert('12-34-56'.replace("-", ":")) // 12:34-56
+```
+
+When the first argument of `replace` is a string, it only looks for the first match.
+
+To find all dashes, we need to use not the string `"-"`, but a regexp `pattern:/-/g`, with an obligatory `g` flag:
+
+```js run
+// replace all dashes by a colon
+alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
+```
+
+The second argument is a replacement string.
+
+We can use special characters in it:
+
+| Symbol | Inserts |
+|--------|--------|
+|`$$`|`"$"` |
+|`$&`|the whole match|
+|<code>$&#096;</code>|a part of the string before the match|
+|`$'`|a part of the string after the match|
+|`$n`|if `n` is a 1-2 digit number, then it means the contents of n-th parentheses counting fro left to right|
+
+For instance let's use `$&` to replace all entries of `"John"` by `"Mr.John"`:
+
+```js run
+let str = "John Doe, John Smith and John Bull.";
+
+// for each John - replace it with Mr. and then John
+alert(str.replace(/John/g, 'Mr.$&'));
+// "Mr.John Doe, Mr.John Smith and Mr.John Bull.";
+```
+
+Parentheses are very often used together with `$1`, `$2`, like this:
+
+```js run
+let str = "John Smith";
+
+alert(str.replace(/(John) (Smith)/, '$2, $1')) // Smith, John
+```
+
+**For situations that require "smart" replacements, the second argument can be a function.**
+
+It will be called for each match, and its result will be inserted as a replacement.
+
+For instance:
+
+```js run
+let i = 0;
+
+// replace each "ho" by the result of the function
+alert("HO-Ho-ho".replace(/ho/gi, function() {
+  return ++i;
+})); // 1-2-3
+```
+
+In the example above the function just returns the next number every time, but usually the result is based on the match.
+
+The function is called with arguments `func(str, p1, p2, ..., pn, offset, s)`:
+
+1. `str` -- the match,
+2. `p1, p2, ..., pn` -- contents of parentheses (if there are any),
+3. `offset` -- position of the match,
+4. `s` -- the source string.
+
+If there are no parentheses in the regexp, then the function always has 3 arguments: `func(str, offset, s)`.
+
+Let's use it to show full information about matches:
+
+```js run
+// show and replace all matches
+function replacer(str, offset, s) {
+  alert(`Found ${str} at position ${offset} in string ${s}`);
+  return str.toLowerCase();
+}
+
+let result = "HO-Ho-ho".replace(/ho/gi, replacer);
+alert( 'Result: ' + result ); // Result: ho-ho-ho
+
+// shows each match:
+// Found HO at position 0 in string HO-Ho-ho
+// Found Ho at position 3 in string HO-Ho-ho
+// Found ho at position 6 in string HO-Ho-ho
+```
+
+In the example below there are two parentheses, so `replacer` is called with 5 arguments: `str` is the full match, then parentheses, and then `offset` and `s`:
+
+```js run
+function replacer(str, name, surname, offset, s) {
+  // name is the first parentheses, surname is the second one
+  return surname + ", " + name;
+}
+
+let str = "John Smith";
+
+alert(str.replace(/(John) (Smith)/, replacer)) // Smith, John
+```
+
+Using a function gives us the ultimate replacement power, because it gets all the information about the match, has access to outer variables and can do everything.
+
+## regexp.test(str)
+
+Let's move on to the methods of `RegExp` class, that are callable on regexps themselves.
+
+The `test` method looks for any match and returns `true/false` whether he found it.
+
+So it's basically the same as `str.search(reg) != -1`, for instance:
+
+```js run
+let str = "I love JavaScript";
+
+// these two tests do the same
+alert( *!*/love/i*/!*.test(str) ); // true
+alert( str.search(*!*/love/i*/!*) != -1 ); // true
+```
+
+An example with the negative answer:
+
+```js run
+let str = "Bla-bla-bla";
+
+alert( *!*/love/i*/!*.test(str) ); // false
+alert( str.search(*!*/love/i*/!*) != -1 ); // false
+```
+
+## regexp.exec(str)
+
+We've already seen these searching methods:
+
+- `search` -- looks for the position of the match,
+- `match` -- if there's no `g` flag, returns the first match with parentheses,
+- `match` -- if there's a `g` flag -- returns all matches, without separating parentheses.
+
+The `regexp.exec` method is a bit harder to use, but it allows to search all matches with parentheses and positions.
+
+It behaves differently depending on whether the regexp has the `g` flag.
+
+- If there's no `g`, then `regexp.exec(str)` returns the first match, exactly as `str.match(reg)`.
+- If there's `g`, then `regexp.exec(str)` returns the first match and *remembers* the position after it in `regexp.lastIndex` property. The next call starts to search from `regexp.lastIndex` and returns the next match. If there are no more matches then `regexp.exec` returns `null` and `regexp.lastIndex` is set to `0`.
+
+As we can see, the method gives us nothing new if we use it without the `g` flag, because `str.match` does exactly the same.
+
+But the `g` flag allows to get all matches with their positions and parentheses groups.
+
+Here's the example how subsequent `regexp.exec` calls return matches one by one:
+
+```js run
+let str = "A lot about JavaScript at https://javascript.info";
+
+let regexp = /JAVA(SCRIPT)/ig;
+
+*!*
+// Look for the first match
+*/!*
+let matchOne = regexp.exec(str);
+alert( matchOne[0] ); // JavaScript
+alert( matchOne[1] ); // script
+alert( matchOne.index ); // 12 (the position of the match)
+alert( matchOne.input ); // the same as str
+
+alert( regexp.lastIndex ); // 22 (the position after the match)
+
+*!*
+// Look for the second match
+*/!*
+let matchTwo = regexp.exec(str); // continue searching from regexp.lastIndex
+alert( matchTwo[0] ); // javascript
+alert( matchTwo[1] ); // script
+alert( matchTwo.index ); // 34 (the position of the match)
+alert( matchTwo.input ); // the same as str
+
+alert( regexp.lastIndex ); // 44 (the position after the match)
+
+*!*
+// Look for the third match
+*/!*
+let matchThree = regexp.exec(str); // continue searching from regexp.lastIndex
+alert( matchThree ); // null (no match)
+
+alert( regexp.lastIndex ); // 0 (reset)
+```
+
+As we can see, each `regexp.exec` call returns the match in a "full format": as an array with parentheses, `index` and `input` properties.
+
+The main use case for `regexp.exec` is to find all matches in a loop:
+
+```js run
+let str = 'A lot about JavaScript at https://javascript.info';
+
+let regexp = /javascript/ig;
+
+let result;
+
+while (result = regexp.exec(str)) {
+  alert( `Found ${result[0]} at ${result.index}` );
+}
+```
+
+The loop continues until `regexp.exec` returns `null` that means "no more matches".
+
+````smart header="Search from the given position"
+We can force `regexp.exec` to start searching from the given position by setting `lastIndex` manually:
+
+```js run
+let str = 'A lot about JavaScript at https://javascript.info';
+
+let regexp = /javascript/ig;
+regexp.lastIndex = 30;
+
+alert( regexp.exec(str).index ); // 34, the search starts from the 30th position
+```
+````
+
+## The "y" flag [#y-flag]
+
+The `y` flag means that the search should find a match exactly at the position specified by the property `regexp.lastIndex` and only there.
+
+In other words, normally the search is made in the whole string: `pattern:/javascript/` looks for "javascript" everywhere in the string.
+
+But when a regexp has the `y` flag, then it only looks for the match at the position specified in `regexp.lastIndex` (`0` by default).
+
+For instance:
+
+```js run
+let str = "I love JavaScript!";
+
+let reg = /javascript/iy;
+
+alert( reg.lastIndex ); // 0 (default)
+alert( str.match(reg) ); // null, not found at position 0
+
+reg.lastIndex = 7;
+alert( str.match(reg) ); // JavaScript (right, that word starts at position 7)
+
+// for any other reg.lastIndex the result is null
+```
+
+The regexp `pattern:/javascript/iy` can only be found if we set `reg.lastIndex=7`, because due to `y` flag the engine only tries to find it in the single place within a string -- from the `reg.lastIndex` position.
+
+So, what's the point? Where do we apply that?
+
+The reason is performance.
+
+The `y` flag works great for parsers -- programs that need to "read" the text and build in-memory syntax structure or perform actions from it. For that we move along the text and apply regular expressions to see what we have next: a string? A number? Something else?
+
+The `y` flag allows to apply a regular expression (or many of them one-by-one) exactly at the given position and when we understand what's there, we can move on -- step by step examining the text.
+
+Without the flag the regexp engine always searches till the end of the text, that takes time, especially if the text is large. So our parser would be very slow. The `y` flag is exactly the right thing here.
+
+## Summary, recipes
+
+Methods become much easier to understand if we separate them by their use in real-life tasks.
+
+To search for the first match only:
+: - Find the position of the first match -- `str.search(reg)`.
+- Find the full match -- `str.match(reg)`.
+- Check if there's a match -- `regexp.test(str)`.
+- Find the match from the given position -- `regexp.exec(str)`, set `regexp.lastIndex` to position.
+
+To search for all matches:
+: - An array of matches -- `str.match(reg)`, the regexp with `g` flag.
+- Get all matches with full information about each one -- `regexp.exec(str)` with `g` flag in the loop.
+
+To search and replace:
+: - Replace with another string or a function result -- `str.replace(reg, str|func)`
+
+To split the string:
+: - `str.split(str|reg)`
+
+We also covered two flags:
+
+- The `g` flag to find all matches (global search),
+- The `y` flag to search at exactly the given position inside the text.
+
+Now we know the methods and can use regular expressions. But we need to learn their syntax, so let's move on.
diff --git a/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/solution.md b/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/solution.md
new file mode 100644
index 00000000..829eda13
--- /dev/null
+++ b/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/solution.md
@@ -0,0 +1,6 @@
+
+The answer: `pattern:\b\d\d:\d\d\b`.
+
+```js run
+alert( "Breakfast at 09:00 in the room 123:456.".match( /\b\d\d:\d\d\b/ ) ); // 09:00
+```
diff --git a/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/task.md b/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/task.md
new file mode 100644
index 00000000..5e32b9c4
--- /dev/null
+++ b/5-regular-expressions/03-regexp-character-classes/1-find-time-hh-mm/task.md
@@ -0,0 +1,8 @@
+# Find the time
+
+The time has a format: `hours:minutes`. Both hours and minutes has two digits, like `09:00`.
+
+Make a regexp to find time in the string: `subject:Breakfast at 09:00 in the room 123:456.`
+
+P.S. In this task there's no need to check time correctness yet, so `25:99` can also be a valid result.
+P.P.S. The regexp shouldn't match `123:456`.
diff --git a/5-regular-expressions/03-regexp-character-classes/article.md b/5-regular-expressions/03-regexp-character-classes/article.md
new file mode 100644
index 00000000..26338a66
--- /dev/null
+++ b/5-regular-expressions/03-regexp-character-classes/article.md
@@ -0,0 +1,228 @@
+# Character classes
+
+Consider a practical task -- we have a phone number `"+7(903)-123-45-67"`, and we need to find all digits in that string. Other characters do not interest us.
+
+A character class is a special notation that matches any symbol from the set.
+
+[cut]
+
+For instance, there's a "digit" class. It's written as `\d`. We put it in the pattern, and during the search any digit matches it.
+
+For instance, the regexp `pattern:/\d/` looks for a single digit:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let reg = /\d/;
+
+alert( str.match(reg) ); // 7
+```
+
+The regexp is not global in the example above, so it only looks for the first match.
+
+Let's add the `g` flag to look for all digits:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let reg = /\d/g;
+
+alert( str.match(reg) ); // array of matches: 7,9,0,3,1,2,3,4,5,6,7
+```
+
+## Most used classes: \d \s \w
+
+That was a character class for digits. There are other character classes as well.
+
+Most used are:
+
+`\d` ("d" is from "digit")
+: A digit: a character from `0` to `9`.
+
+`\s` ("s" is from "space")
+: A space symbol: that includes spaces, tabs, newlines.
+
+`\w` ("w" is from "word")
+: A "wordly" character: either a letter of English alphabet or a digit or an underscore. Non-english letters (like cyricllic or hindi) do not belong to `\w`.
+
+For instance, `pattern:\d\s\w` means a digit followed by a space character followed by a wordly character, like `"1 Z"`.
+
+A regexp may contain both regular symbols and character classes.
+
+For instance, `pattern:CSS\d` matches a string `match:CSS` with a digit after it:
+
+```js run
+let str = "CSS4 is cool";
+let reg = /CSS\d/
+
+alert( str.match(reg) ); // CSS4
+```
+
+Also we can use many character classes:
+
+```js run
+alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
+```
+
+The match (each character class corresponds to one result character):
+
+![](love-html5-classes.png)
+
+## Word boundary: \b
+
+The word boundary `pattern:\b` -- is a special character class.
+
+It does not denote a character, but rather a boundary between characters.
+
+For instance, `pattern:\bJava\b` matches `match:Java` in the string `subject:Hello, Java!`, but not in the script `subject:Hello, JavaScript!`.
+
+```js run
+alert( "Hello, Java!".match(/\bJava\b/) ); // Java
+alert( "Hello, JavaScript!".match(/\bJava\b/) ); // null
+```
+
+The boundary has "zero width" in a sense that usually a character class means a character in the result (like a wordly or a digit), but not in this case.
+
+The boundary is a test.
+
+When regular expression engine is doing the search, it's moving along the string in an attempt to find the match. At each string position it tries to find the pattern.
+
+When the pattern contains `pattern:\b`, it tests that the position in string fits one of the conditions:
+
+- String start, and the first string character is `\w`.
+- String end, and the last string character is `\w`.
+- Inside the string: from one side is `\w`, from the other side -- not `\w`.
+
+For instance, in the string `subject:Hello, Java!` the following positions match `\b`:
+
+![](hello-java-boundaries.png)
+
+So it matches `pattern:\bHello\b` and `pattern:\bJava\b`, but not `pattern:\bHell\b` (because there's no word boundary after `l`) and not `Java!\b` (because the exclamation sign is not a wordly character, so there's no word boundary after it).
+
+```js run
+alert( "Hello, Java!".match(/\bHello\b/) ); // Hello
+alert( "Hello, Java!".match(/\Java\b/) );  // Java
+alert( "Hello, Java!".match(/\Hell\b/) );  // null
+alert( "Hello, Java!".match(/\Java!\b/) ); // null
+```
+
+Once again let's note that `pattern:\b` makes the searching engine to test for the boundary, so that `pattern:Java\b` finds `match:Java` only when followed by a word boundary, but it does not add a letter to the result.
+
+Usually we use `\b` to find standalone English words. So that if we want `"Java"` language then `pattern:\bJava\b` finds exactly a standalone word and ignores it when it's a part of `"JavaScript"`.
+
+Another example: a regexp `pattern:\b\d\d\b` looks for standalone two-digit numbers. In other words, it requires that before and after `pattern:\d\d` must be a symbol different from `\w` (or beginning/end of the string).
+
+```js run
+alert( "1 23 456 78".match(/\b\d\d\b/g) ); // 23,78
+```
+
+```warn header="Word boundary doesn't work for non-English alphabets"
+The word boundary check `\b` tests for a boundary between `\w` and something else. But `\w` means an English letter (or a digit or an underscore), so the test won't work for other characters (like cyrillic or hieroglyphs).
+```
+
+
+## Reverse classes
+
+For every character class there exists a "reverse class", denoted with the same letter, but uppercased.
+
+The "reverse" means that it matches all other characters, for instance:
+
+`\D`
+: Non-digit: any character except `\d`, for instance a letter.
+
+`\S`
+: Non-space: any character except `\s`, for instance a letter.
+
+`\W`
+: Non-wordly character: anything but `\w`.
+
+`\B`
+: Non-boundary: a test reverse to `\b`.
+
+In the beginning of the chapter we saw how to get all digits from the phone `subject:+7(903)-123-45-67`. Let's get a "pure" phone number from the string:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+alert( str.match(/\d/g).join('') ); // 79031234567
+```
+
+An alternative way would be to find non-digits and remove them from the string:
+
+
+```js run
+let str = "+7(903)-123-45-67";
+
+alert( str.replace(/\D/g, "") ); // 79031234567
+```
+
+## Spaces are regular characters
+
+Please note that regular expressions may include spaces. They are treated like regular characters.  
+
+Usually we pay little attention to spaces. For us strings `subject:1-5` and `subject:1 - 5` are nearly identical.
+
+But if a regexp does not take spaces into account, it won' work.
+
+Let's try to find digits separated by a dash:
+
+```js run
+alert( "1 - 5".match(/\d-\d/) ); // null, no match!
+```
+
+Here we fix it by adding spaces into the regexp:
+
+```js run
+alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, now it works
+```
+
+Of course, spaces are needed only if we look for them. Extra spaces (just like any other extra characters) may prevent a match:
+
+```js run
+alert( "1-5".match(/\d - \d/) ); // null, because the string 1-5 has no spaces
+```
+
+In other words, in a regular expression all characters matter. Spaces too.
+
+## A dot is any character
+
+The dot `"."` is a special character class that matches *any character except a newline*.
+
+For instance:
+
+```js run
+alert( "Z".match(/./) ); // Z
+```
+
+Or in the middle of a regexp:
+
+```js run
+let reg = /CS.4/;
+
+alert( "CSS4".match(reg) ); // CSS4
+alert( "CS-4".match(reg) ); // CS-4
+alert( "CS 4".match(reg) ); // CS 4 (space is also a character)
+```
+
+Please note that the dot means "any character", but not the "absense of a character". There must be a character to match it:
+
+```js run
+alert( "CS4".match(/CS.4/) ); // null, no match because there's no character for the dot
+```
+
+
+## Summary
+
+We covered character classes:
+
+- `\d` -- digits.
+- `\D` -- non-digits.
+- `\s` -- space symbols, tabs, newlines.
+- `\S` -- all but `\s`.
+- `\w` -- English letters, digits, underscore `'_'`.
+- `\W` -- all but `\w`.
+- `'.'` -- any character except a newline.
+
+If we want to search for a character that has a special meaning like a backslash or a dot, then we should escape it with a backslash: `pattern:\.`
+
+Please note that a regexp may also contain string special characters such as a newline `\n`. There's no conflict with character classes, because other letters are used for them.
diff --git a/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png b/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png
new file mode 100644
index 00000000..ba293e6d
Binary files /dev/null and b/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png differ
diff --git a/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png b/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png
new file mode 100644
index 00000000..9ebf623b
Binary files /dev/null and b/5-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png differ
diff --git a/5-regular-expressions/03-regexp-character-classes/love-html5-classes.png b/5-regular-expressions/03-regexp-character-classes/love-html5-classes.png
new file mode 100644
index 00000000..b8ed77c0
Binary files /dev/null and b/5-regular-expressions/03-regexp-character-classes/love-html5-classes.png differ
diff --git a/5-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png b/5-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png
new file mode 100644
index 00000000..9fb998b9
Binary files /dev/null and b/5-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png differ
diff --git a/5-regular-expressions/04-regexp-escaping/article.md b/5-regular-expressions/04-regexp-escaping/article.md
new file mode 100644
index 00000000..cb7a3eb1
--- /dev/null
+++ b/5-regular-expressions/04-regexp-escaping/article.md
@@ -0,0 +1,91 @@
+
+# Escaping, special characters
+
+As we've seen, a backslash `"\"` is used to denote character classes. So it's a special character.
+
+There are other special characters as well, that have special meaning in a regexp. They are used to do more powerful searches.
+
+Here's a full list of them: `pattern:[ \ ^ $ . | ? * + ( )`.
+
+Don't try to remember it -- when we deal with each of them separately, you'll know it by heart automatically.
+
+## Escaping
+
+To use a special character as a regular one, prepend it with a backslash.
+
+That's also called "escaping a character".
+
+For instance, we need to find a dot `pattern:'.'`. In a regular expression a dot means "any character except a newline", so if we really mean "a dot", let's put a backslash before it: `pattern:\.`.
+
+```js run
+alert( "Chapter 5.1".match(/\d\.\d/) ); // 5.1
+```
+
+Parentheses are also special characters, so if we want them, we should use `pattern:\(`. The example below looks for a string `"g()"`:
+
+```js run
+alert( "function g()".match(/g\(\)/) ); // "g()"
+```
+
+If we're looking for a backslash `\`, then we should double it:
+
+```js run
+alert( "1\2".match(/\\/) ); // '\'
+```
+
+## A slash
+
+The slash symbol `'/'` is not a special character, but in JavaScript it is used to open and close the regexp: `pattern:/...pattern.../`, so we should escape it too.
+
+Here's what a search for a slash `'/'` looks like:
+
+```js run
+alert( "/".match(/\//) ); // '/'
+```
+
+From the other hand, the alternative `new RegExp` syntaxes does not require escaping it:
+
+```js run
+alert( "/".match(new RegExp("/")) ); // '/'
+```
+
+## new RegExp
+
+If we are creating a regular expression with `new RegExp`, then we need to do some more escaping.
+
+For instance, consider this:
+
+```js run
+let reg = new RegExp("\d\.\d");
+
+alert( "Chapter 5.1".match(reg) ); // null
+```
+
+It doesn't work, but why?
+
+The reason is string escaping rules. Look here:
+
+```js run
+alert("\d\.\d"); // d.d
+```
+
+Backslashes are used for escaping inside a string and string-specific special characters like `\n`. The quotes "consume" and interpret them, for instance:
+
+- `\n` -- becomes a newline character,
+- `\u1234` -- becomes the Unicode character with such code,
+- ...And when there's no special meaning: like `\d` or `\z`, then the backslash is simply removed.
+
+So the call to `new RegExp` gets a string without backslashes.
+
+To fix it, we need to double backslashes, because quotes turn `\\` into `\`:
+
+```js run
+*!*
+let regStr = "\\d\\.\\d";
+*/!*
+alert(regStr); // \d\.\d (correct now)
+
+let reg = new RegExp(regStr);
+
+alert( "Chapter 5.1".match(reg) ); // 5.1
+```
diff --git a/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/solution.md b/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/solution.md
new file mode 100644
index 00000000..a6d71f66
--- /dev/null
+++ b/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/solution.md
@@ -0,0 +1,12 @@
+Answers: **no, yes**.
+
+- In the script `subject:Java` it doesn't match anything, because `pattern:[^script]` means "any character except given ones". So the regexp looks for `"Java"` followed by one such symbol, but there's a string end, no symbols after it.
+
+    ```js run
+    alert( "Java".match(/Java[^script]/) ); // null
+    ```
+- Yes, because the regexp is case-insensitive, the `pattern:[^script]` part matches the character `"S"`.
+
+    ```js run
+    alert( "JavaScript".match(/Java[^script]/) ); // "JavaS"
+    ```
diff --git a/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/task.md b/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/task.md
new file mode 100644
index 00000000..5a48e01e
--- /dev/null
+++ b/5-regular-expressions/05-regexp-character-sets-and-ranges/1-find-range-1/task.md
@@ -0,0 +1,5 @@
+# Java[^script]
+
+We have a regexp `pattern:/Java[^script]/`.
+
+Does it match anything in the string `subject:Java`? In the string `subject:JavaScript`?
diff --git a/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md b/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
new file mode 100644
index 00000000..91568d03
--- /dev/null
+++ b/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
@@ -0,0 +1,8 @@
+Answer: `pattern:\d\d[-:]\d\d`.
+
+```js run
+let reg = /\d\d[-:]\d\d/g;
+alert( "Breakfast at 09:00. Dinner at 21-30".match(reg) ); // 09:00, 21-30
+```
+
+Please note that the dash `pattern:'-'` has a special meaning in square brackets, but only between other characters, not when it's in the beginning or at the end, so we don't need to escape it.
diff --git a/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md b/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
new file mode 100644
index 00000000..868115bd
--- /dev/null
+++ b/5-regular-expressions/05-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
@@ -0,0 +1,12 @@
+# Find the time as hh:mm or hh-mm
+
+The time can be in the format `hours:minutes` or `hours-minutes`. Both hours and minutes have 2 digits:  `09:00` or `21-30`.
+
+Write a regexp to find time:
+
+```js
+let reg = /your regexp/g;
+alert( "Breakfast at 09:00. Dinner at 21-30".match(reg) ); // 09:00, 21-30
+```
+
+P.S. In this task we assume that the time is always correct, there's no need to filter out bad strings like "45:67". Later we'll deal with that too.
diff --git a/5-regular-expressions/05-regexp-character-sets-and-ranges/article.md b/5-regular-expressions/05-regexp-character-sets-and-ranges/article.md
new file mode 100644
index 00000000..63803c83
--- /dev/null
+++ b/5-regular-expressions/05-regexp-character-sets-and-ranges/article.md
@@ -0,0 +1,116 @@
+# Sets and ranges [...]
+
+Several characters or character classes inside square brackets `[…]` mean to "search for any character among given".
+
+[cut]
+
+## Sets
+
+For instance, `pattern:[eao]` means any of the 3 characters: `'a'`, `'e'`, or `'o'`.
+
+That's calles a *set*. Sets can be used in a regexp along with regular characters:
+
+```js run
+// find [t or m], and then "op"
+alert( "Mop top".match(/[tm]op/gi) ); // "Mop", "top"
+```
+
+Please note that although there are multiple characters in the set, they correspond to exactly one character in the match.
+
+So the example above gives no matches:
+
+```js run
+// find "V", then [o or i], then "la"
+alert( "Voila".match(/V[oi]la/) ); // null, no matches
+```
+
+The pattern assumes:
+
+- `pattern:V`,
+- then *one* of the letters `pattern:[oi]`,
+- then `pattern:la`.
+
+So there would be a match for `match:Vola` or `match:Vila`.
+
+## Ranges
+
+Square brackets may also contain *character ranges*.
+
+For instance, `pattern:[a-z]` is a character in range from `a` to `z`, and `pattern:[0-5]` is a digit from `0` to `5`.
+
+In the example below we're searching for `"x"` followed by two digits or letters from `A` to `F`:
+
+```js run
+alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) ); // xAF
+```
+
+Please note that in the word `subject:Exception` there's a substring `subject:xce`. It didn't match the pattern, because the letters are lowercase, while in the set `pattern:[0-9A-F]` they are uppercase.
+
+If we want to find it too, then we can add a range `a-f`: `pattern:[0-9A-Fa-f]`. The `i` flag would allow lowercase too.
+
+**Character classes are shorthands for certain character sets.**
+
+For instance:
+
+- **\d** -- is the same as `pattern:[0-9]`,
+- **\w** -- is the same as `pattern:[a-zA-Z0-9_]`,
+- **\s** -- is the same as `pattern:[\t\n\v\f\r ]` plus few other unicode space characters.
+
+We can use character classes inside `[…]` as well.
+
+For instance, we want to match all wordly characters or a dash, for words like "twenty-third". We can't do it with `pattern:\w+`, because `pattern:\w` class does not include a dash. But we can use `pattern:[\w-]`.
+
+We also can use a combination of classes to cover every possible character, like `pattern:[\s\S]`. That matches spaces or non-spaces -- any character. That's wider than a dot `"."`, because the dot matches any character except a newline.
+
+## Excluding ranges
+
+Besides normal ranges, there are "excluding" ranges that look like `pattern:[^…]`.
+
+They are denoted by a caret character `^` at the start and match any character *except the given ones*.
+
+For instance:
+
+- `pattern:[^aeyo]` -- any character except  `'a'`, `'e'`, `'y'` or `'o'`.
+- `pattern:[^0-9]` -- any character except a digit, the same as `\D`.
+- `pattern:[^\s]` -- any non-space character, same as `\S`.
+
+The example below looks for any characters except letters, digits and spaces:
+
+```js run
+alert( "alice15@gmail.com".match(/[^\d\sA-Z]/gi) ); // @ and .
+```
+
+## No escaping in […]
+
+Usually when we want to find exactly the dot character, we need to escape it like `pattern:\.`. And if we need a backslash, then we use `pattern:\\`.
+
+In square brackets the vast majority of special characters can be used without escaping:
+
+- A dot `pattern:'.'`.
+- A plus `pattern:'+'`.
+- Parentheses `pattern:'( )'`.
+- Dash `pattern:'-'` in the beginning or the end (where it does not define a range).
+- A caret `pattern:'^'` if not in the beginning (where it means exclusion).
+- And the opening square bracket `pattern:'['`.
+
+In other words, all special charactere are allowed except where they mean something for square brackets.
+
+A dot `"."` inside square brackets means just a dot. The pattern `pattern:[.,]` would look for one of characters: either a dot or a comma.
+
+In the example below the regexp `pattern:[-().^+]` looks for one of the characters `-().^`:
+
+```js run
+// No need to escape
+let reg = /[-().^+]/g;
+
+alert( "1 + 2 - 3".match(reg) ); // Matches +, -
+```
+
+...But if you decide to escape them "just in case", then there would be no harm:
+
+```js run
+// Escaped everything
+let reg = /[\-\(\)\.\^\+]/g;
+
+alert( "1 + 2 - 3".match(reg) ); // also works: +, -
+```
diff --git a/5-regular-expressions/06-regexp-unicode/article.md b/5-regular-expressions/06-regexp-unicode/article.md
new file mode 100644
index 00000000..0cac0013
--- /dev/null
+++ b/5-regular-expressions/06-regexp-unicode/article.md
@@ -0,0 +1,69 @@
+
+# The unicode flag
+
+The unicode flag `/.../u` enables the correct support of surrogate pairs.
+
+Surrogate pairs are explained in the chapter <info:string>.
+
+Let's briefly remind them here. In short, normally characters are encoded with 2 bytes. That gives us 65536 characters maximum. But there are more characters in the world.
+
+So certain rare characters are encoded with 4 bytes, like `𝒳` (mathematical X) or `😄` (a smile).
+
+Here are the unicode values to compare:
+
+| Character  | Unicode | Bytes  |
+|------------|---------|--------|
+| `a` | 0x0061 |  2 |
+| `≈` | 0x2248 |  2 |
+|`𝒳`| 0x1d4b3 | 4 |
+|`𝒴`| 0x1d4b4 | 4 |
+|`😄`| 0x1f604 | 4 |
+
+So characters like `a` and `≈` occupy 2 bytes, and those rare ones take 4.
+
+The unicode is made in such a way that the 4-byte characters only have a meaning as a whole.
+
+In the past JavaScript did not know about that, and many string methods still have problems. For instance, `length` thinks that here are two characters:
+
+```js run
+alert('😄'.length); // 2
+alert('𝒳'.length); // 2
+```
+
+...But we can see that there's only one, right? The point is that `length` treats 4 bytes as two 2-byte characters. That's incorrect, because they must be considered only together (so-called "surrogate pair").
+
+Normally, regular expressions also treat "long characters" as two 2-byte ones.
+
+That leads to odd results, for instance let's try to find `pattern:[𝒳𝒴]` in the string `subject:𝒳`:
+
+```js run
+alert( '𝒳'.match(/[𝒳𝒴]/) ); // odd result
+```
+
+The result would be wrong, because by default the regexp engine does not understand surrogate pairs. It thinks that `[𝒳𝒴]` are not two, but four characters: the left half of `𝒳` `(1)`, the right half of `𝒳` `(2)`, the left half of `𝒴` `(3)`, the right half of `𝒴` `(4)`.
+
+So it finds the left half of `𝒳` in the string `𝒳`, not the whole symbol.
+
+In other words, the search works like `'12'.match(/[1234]/)` -- the `1` is returned (left half of `𝒳`).
+
+The `/.../u` flag fixes that. It enables surrogate pairs in the regexp engine, so the result is correct:
+
+```js run
+alert( '𝒳'.match(/[𝒳𝒴]/u) ); // 𝒳
+```
+
+There's an error that may happen if we forget the flag:
+
+```js run
+'𝒳'.match(/[𝒳-𝒴]/); // SyntaxError: invalid range in character class
+```
+
+Here the regexp `[𝒳-𝒴]` is treated as `[12-34]` (where `2` is the right part of `𝒳` and `3` is the left part of `𝒴`), and the range between two halves `2` and `3` is unacceptable.
+
+Using the flag would make it work right:
+
+```js run
+alert( '𝒴'.match(/[𝒳-𝒵]/u) ); // 𝒴
+```
+
+To finalize, let's note that if we do not deal with surrogate pairs, then the flag does nothing for us. But in the modern world we often meet them.
diff --git a/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/solution.md b/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/solution.md
new file mode 100644
index 00000000..d4ddb136
--- /dev/null
+++ b/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/solution.md
@@ -0,0 +1,9 @@
+
+Solution:
+
+```js run
+let reg = /\.{3,}/g;
+alert( "Hello!... How goes?.....".match(reg) ); // ..., .....
+```
+
+Please note that the dot is a special character, so we have to escape it and insert as `\.`.
diff --git a/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/task.md b/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/task.md
new file mode 100644
index 00000000..6fd91bdc
--- /dev/null
+++ b/5-regular-expressions/07-regexp-quantifiers/1-find-text-manydots/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+#  How to find an ellipsis "..." ?
+
+Create a regexp to find ellipsis: 3 (or more?) dots in a row.
+
+Check it:
+
+```js
+let reg = /your regexp/g;
+alert( "Hello!... How goes?.....".match(reg) ); // ..., .....
+```
diff --git a/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/solution.md b/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/solution.md
new file mode 100644
index 00000000..ec871d05
--- /dev/null
+++ b/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/solution.md
@@ -0,0 +1,31 @@
+We need to look for `#` followed by 6 hexadimal characters.
+
+A hexadimal character can be described as `pattern:[0-9a-fA-F]`. Or if we use the `i` flag, then just  `pattern:[0-9a-f]`.
+
+Then we can look for 6 of them using the quantifier `pattern:{6}`.
+
+As a result, we have the regexp: `pattern:/#[a-f0-9]{6}/gi`.
+
+```js run
+let reg = /#[a-f0-9]{6}/gi;
+
+let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"
+
+alert( str.match(reg) );  // #121212,#AA00ef
+```
+
+The problem is that it finds the color in longer sequences:
+
+```js run
+alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #12345678
+```
+
+To fix that, we can add `pattern:\b` to the end:
+
+```js run
+// color
+alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456
+
+// not a color
+alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null
+```
diff --git a/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/task.md b/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/task.md
new file mode 100644
index 00000000..1960a09c
--- /dev/null
+++ b/5-regular-expressions/07-regexp-quantifiers/2-find-html-colors-6hex/task.md
@@ -0,0 +1,15 @@
+# Regexp for HTML colors
+
+Create a regexp to search HTML-colors written as `#ABCDEF`: first `#` and then 6 hexadimal characters.
+
+An example of use:
+
+```js
+let reg = /...your regexp.../
+
+let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678";
+
+alert( str.match(reg) )  // #121212,#AA00ef
+```
+
+P.S. In this task we do not need other color formats like `#123` or `rgb(1,2,3)` etc.
diff --git a/5-regular-expressions/07-regexp-quantifiers/article.md b/5-regular-expressions/07-regexp-quantifiers/article.md
new file mode 100644
index 00000000..6b6933bb
--- /dev/null
+++ b/5-regular-expressions/07-regexp-quantifiers/article.md
@@ -0,0 +1,133 @@
+# Quantifiers +, *, ? and {n}
+
+Let's say we have a string like `+7(903)-123-45-67` and want to find all numbers in it. But unlike before, we are interested in not digits, but full numbers: `7, 903, 123, 45, 67`.
+
+A number is a sequence of 1 or more digits `\d`. The instrument to say how many we need is called *quantifiers*.
+
+## Quantity {n}
+
+The most obvious quantifier is a number in figure quotes: `pattern:{n}`. A quantifier is put after a character (or a character class and so on) and specifies exactly how many we need.
+
+It also has advanced forms, here we go with examples:
+
+Exact count: `{5}`
+: `pattern:\d{5}` denotes exactly 5 digits, the same as `pattern:\d\d\d\d\d`.
+
+    The example below looks for a 5-digit number:
+
+    ```js run
+    alert( "I'm 12345 years old".match(/\d{5}/) ); //  "12345"
+    ```
+
+    We can add `\b` to exclude longer numbers: `pattern:\b\d{5}\b`.
+
+The count from-to: `{3,5}`
+: To find numbers from 3 to 5 digits we can put the limits into figure brackets: `pattern:\d{3,5}`
+
+    ```js run
+    alert( "I'm not 12, but 1234 years old".match(/\d{3,5}/) ); // "1234"
+    ```
+
+    We can omit the upper limit. Then a regexp `pattern:\d{3,}` looks for numbers of `3` and more digits:
+
+    ```js run
+    alert( "I'm not 12, but 345678 years old".match(/\d{3,}/) ); // "345678"
+    ```
+
+In case with the string `+7(903)-123-45-67` we need numbers: one or more digits in a row. That is  `pattern:\d{1,}`:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let numbers = str.match(/\d{1,}/g);
+
+alert(numbers); // 7,903,123,45,67
+```
+
+## Shorthands
+
+Most often needed quantifiers have shorthands:
+
+`+`
+: Means "one or more", the same as `{1,}`.
+
+    For instance, `pattern:\d+` looks for numbers:
+
+    ```js run
+    let str = "+7(903)-123-45-67";
+
+    alert( str.match(/\d+/g) ); // 7,903,123,45,67
+    ```
+
+`?`
+: Means "zero or one", the same as `{0,1}`. In other words, it makes the symbol optional.
+
+    For instance, the pattern `pattern:ou?r` looks for `match:o` followed by zero or one `match:u`, and then `match:r`.
+
+    So it can find `match:or` in the word `subject:color` and `match:our` in `subject:colour`:
+
+    ```js run
+    let str = "Should I write color or colour?";
+
+    alert( str.match(/colou?r/g) ); // color, colour
+    ```
+
+`*`
+: Means "zero or more", the same as `{0,}`. That is, the character may repeat any times or be absent.
+
+    The example below looks for a digit followed by any number of zeroes:
+
+    ```js run
+    alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1
+    ```
+
+    Compare it with `'+'` (one or more):
+
+    ```js run
+    alert( "100 10 1".match(/\d0+/g) ); // 100, 10
+    ```
+
+## More examples
+
+Quantifiers are used very often. They are one of the main "building blocks" for complex regular expressions, so let's see more examples.
+
+Regexp "decimal fraction" (a number with a floating point): `pattern:\d+\.\d+`
+: In action:
+    ```js run
+    alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345
+    ```
+
+Regexp "open HTML-tag without attributes", like `<span>` or `<p>`: `pattern:/<[a-z]+>/i`
+: In action:
+
+    ```js run
+    alert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>
+    ```
+
+    We look for character `pattern:'<'` followed by one or more English letters, and then  `pattern:'>'`.
+
+Regexp "open HTML-tag without attributes" (improved): `pattern:/<[a-z][a-z0-9]*>/i`
+: Better regexp: according to the standard, HTML tag name may have a digit at any position except the first one, like `<h1>`.
+
+    ```js run
+    alert( "<h1>Hi!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>
+    ```
+
+Regexp "opening or closing HTML-tag without attributes": `pattern:/<\/?[a-z][a-z0-9]*>/i`
+: We added an optional slash `pattern:/?` before the tag. Had to escape it with a backslash, otherwise JavaScript would think it is the pattern end.
+
+    ```js run
+    alert( "<h1>Hi!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>
+    ```
+
+```smart header="More precise means more complex"
+We can see one common rule in these examples: the more precise is the regular expression -- the longer and more complex it is.
+
+For instance, HTML tags could use a simpler regexp: `pattern:<\w+>`.
+
+Because `pattern:\w` means any English letter or a digit or `'_'`, the regexp also matches non-tags, for instance `match:<_>`. But it's much simpler than `pattern:<[a-z][a-z0-9]*>`.
+
+Are we ok with `pattern:<\w+>` or we need `pattern:<[a-z][a-z0-9]*>`?
+
+In real life both variants are acceptable. Depends on how tolerant we can be to "extra" matches and whether it's difficult or not to filter them out by other means.
+```
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/solution.md b/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
new file mode 100644
index 00000000..b8e02222
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
@@ -0,0 +1,6 @@
+
+The result is: `match:123 4`.
+
+First the lazy `pattern:\d+?` tries to take as little digits as it can, but it has to reach the space, so it takes  `match:123`.
+
+Then the second `\d+?` takes only one digit, because that's enough.
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/task.md b/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/task.md
new file mode 100644
index 00000000..b46f5591
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/1-lazy-greedy/task.md
@@ -0,0 +1,7 @@
+# A match for /d+? d+?/
+
+What's the match here?
+
+```js
+"123 456".match(/\d+? \d+?/g) ); // ?
+```
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/solution.md b/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/solution.md
new file mode 100644
index 00000000..b36eec4a
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/solution.md
@@ -0,0 +1,17 @@
+We need to find the beginning of the comment `match:<!--`, then everything till the end of `match:-->`.
+
+The first idea could be `pattern:<!--.*?-->` -- the lazy quantifier makes the dot stop right before  `match:-->`.
+
+But a dot in Javascript means "any symbol except the newline". So multiline comments won't be found.
+
+We can use `pattern:[\s\S]` instead of the dot to match "anything":
+
+```js run
+let reg = /<!--[\s\S]*?-->/g;
+
+let str = `... <!-- My -- comment
+ test --> ..  <!----> ..
+`;
+
+alert( str.match(reg) ); // '<!-- My -- comment \n test -->', '<!---->'
+```
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/task.md b/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/task.md
new file mode 100644
index 00000000..81fd5c63
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/3-find-html-comments/task.md
@@ -0,0 +1,13 @@
+# Find HTML comments
+
+Find all HTML comments in the text:
+
+```js
+let reg = /your regexp/g;
+
+let str = `... <!-- My -- comment
+ test --> ..  <!----> .. 
+`;
+
+alert( str.match(reg) ); // '<!-- My -- comment \n test -->', '<!---->'
+```
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md b/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
new file mode 100644
index 00000000..c453926f
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
@@ -0,0 +1,10 @@
+
+The solution is `pattern:<[^<>]+>`.
+
+```js run
+let reg = /<[^<>]+>/g;
+
+let str = '<> <a href="/"> <input type="radio" checked> <b>';
+
+alert( str.match(reg) ); // '<a href="/">', '<input type="radio" checked>', '<b>'
+```
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md b/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
new file mode 100644
index 00000000..2cf48a4a
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
@@ -0,0 +1,15 @@
+# Find HTML tags
+
+Create a regular expression to find all (opening and closing) HTML tags with their attributes.
+
+An example of use:
+
+```js run
+let reg = /your regexp/g;
+
+let str = '<> <a href="/"> <input type="radio" checked> <b>';
+
+alert( str.match(reg) ); // '<a href="/">', '<input type="radio" checked>', '<b>'
+```
+
+Let's assume that may not contain `<` and `>` inside (in quotes too), that simplifies things a bit. 
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/article.md b/5-regular-expressions/08-regexp-greedy-and-lazy/article.md
new file mode 100644
index 00000000..11b9cbc7
--- /dev/null
+++ b/5-regular-expressions/08-regexp-greedy-and-lazy/article.md
@@ -0,0 +1,308 @@
+# Greedy and lazy quantifiers
+
+Quantifiers are very simple from the first sight, but in fact they can be tricky.
+
+We should understand how the search works very well if we plan to look for something more complex than `pattern:/\d+/`.
+
+[cut]
+
+Let's take the following task as an example.
+
+We have a text and need to replace all quotes `"..."` with guillemet marks: `«...»`. They are preferred for typography in many countries.
+
+For instance: `"Hello, world"` should become `«Hello, world»`.
+
+Some countries prefer `„Witam, świat!”` (Polish) or even `「你好，世界」` (Chinese) quotes. For different locales we can choose different replacements, but that all works the same, so let's start with `«...»`.
+
+To make replacements we first need to find all quoted substrings.
+
+The regular expression can look like this: `pattern:/".+"/g`. That is: we look for a quote followed by one or more characters, and then another quote.
+
+...But if we try to apply it, even in such a simple case...
+
+```js run
+let reg = /".+"/g;
+
+let str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // "witch" and her "broom"
+```
+
+...We can see that it works not as intended!
+
+Instead of finding two matches `match:"witch"` and `match:"broom"`, it finds one: `match:"witch" and her "broom"`.
+
+That can be described as "greediness is the cause of all evil".
+
+## Greedy search
+
+To find a match, the regular expression engine uses the following algorithm:
+
+- For every position in the string
+    - Match the pattern symbol-by-symbol using classes and quantifiers.
+    - If there's no match, go to the next position.
+
+These common words do not make it obvious why the regexp fails, so let's elaborate how the search works for the pattern `pattern:".+"`.
+
+1. The first pattern characeter is a quote `pattern:"`.
+
+    The regular expression engine tries to find it on 0-th position of the source string, but there's `subject:a` there, so no match.
+
+    Then it advances: goes to the 1st, 2nd positions in the source string and tries to find the pattern there, and finally finds the quote at the 3rd position:
+
+    ![](witch_greedy1.png)
+
+2. The quote is detected, and then the engine tries to find a match for the rest of the pattern.
+
+    In our case the next pattern character is `pattern:.` (a dot). It denotes "any character except a newline", so the next string letter `match:'w'` fits:
+
+    ![](witch_greedy2.png)
+
+3. Then the dot repeats because of the quantifier `pattern:.+`. The regular expression engine builds the match by taking characters one by one while it is possible.
+
+    ...When it becomes impossible? All characters match the dot, so it only stops when it reaches the end of the string:
+
+    ![](witch_greedy3.png)
+
+4. Now the engine finished repeating for `pattern:.+` and tries to find the next character of the pattern. It's the quote `pattern:"`. But there's a problem: the string has finished, there are no more characters!
+
+    The regular expression engine understands that it took too many `pattern:.+` and starts to *backtrack*.
+
+    In other words, it shortens the match for the quantifier by one character:
+
+    ![](witch_greedy4.png)
+
+    Now it assumes that `pattern:.+` ends one character before the end and tries to match the rest of the pattern from that position.
+
+    If there were a quote there, then that would be the end, but the last character is `subject:'e'`, so there's no match.
+
+5. ...So the engine decreases the number of repetitions of `pattern:.+` by one more character:
+
+    ![](witch_greedy5.png)
+
+    The quote `pattern:'"'` does not match `subject:'n'`.
+
+6. The engine keep backtracking: it decreases the count of repetition for `pattern:'.'` until the rest of the pattern (in our case `pattern:'"'`) matches:
+
+    ![](witch_greedy6.png)
+
+7. The match is complete.
+
+8. So the first match is `match:"witch" and her "broom"`. The further search starts where the first match ends, but there are no more quotes in the rest of the string `subject:is one`, so no more results.
+
+That's probably not what we expected, but that's how it works.
+
+**In the greedy mode (by default) the quantifier is repeated as many times as possible.**
+
+The regexp engine tries to fetch as many characters as it can by `pattern:.+`, and then shortens that one by one.
+
+For our task we want another thing. That's what the lazy quantifier mode is for.
+
+## Lazy mode
+
+The lazy mode of quantifier is an opposite to the gredy mode. It means: "repeat minimal number of times".
+
+We can enable it by putting a question mark `pattern:'?'` after the quantifier, so that it becomes  `pattern:*?` or `pattern:+?` or even `pattern:??` for `pattern:'?'`.
+
+To make things clear: usually a question mark `pattern:?` is a quantifier by itself (zero or one), but if added *after another quantifier (or even itself)* it gets another meaning -- it switches the matching mode from greedy to lazy.
+
+The regexp `pattern:/".+?"/g` works as intended: it finds `match:"witch"` and `match:"broom"`:
+
+```js run
+let reg = /".+?"/g;
+
+let str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+To clearly understand the change, let's trace the search step by step.
+
+1. The first step is the same: it finds the pattern start `pattern:'"'` at the 3rd position:
+
+    ![](witch_greedy1.png)
+
+2. The next step is also similar: the engine finds a match for the dot `pattern:'.'`:
+
+    ![](witch_greedy2.png)
+
+3. And now the search goes differently. Because we have a lazy mode for `pattern:+?`, the engine doesn't try to match a dot one more time, but stops and tries to match the rest of the pattern  `pattern:'"'` right now:
+
+    ![](witch_lazy3.png)
+
+    If there were a quote there, then the search would end, but there's `'i'`, so there's no match.
+4. Then the regular expression engine increases the number of repetitions for the dot and tries one more time:
+
+    ![](witch_lazy4.png)
+
+    Failure again. Then the number of repetitions is increased again and again...
+5. ...Till the match for the rest of the pattern is found:
+
+    ![](witch_lazy5.png)
+
+6. The next search starts from the end of the current match and yield one more result:
+
+    ![](witch_lazy6.png)
+
+In this example we saw how the lazy mode works for `pattern:+?`. Quantifiers `pattern:+?` and `pattern:??` work the similar way -- the regexp engine increases the number of repetitions only if the rest of the pattern can't match on the given position.
+
+**Lazyness is only enabled for the quantifier with `?`.**
+
+Other quantifiers remain greedy.
+
+For instance:
+
+```js run
+alert( "123 456".match(/\d+ \d+?/g) ); // 123 4
+```
+
+1. The pattern `pattern:\d+` tries to match as many numbers as it can (greedy mode), so it finds  `match:123` and stops, because the next character is a space `pattern:' '`.
+2. Then there's a space in pattern, it matches.
+3. Then there's `pattern:\d+?`. The quantifier is in lazy mode, so it finds one digit `match:4` and tries to check if the rest of the pattern matches from there.
+
+    ...But there's nothing in the pattern after `pattern:\d+?`.
+
+    The lazy mode doesn't repeat anything without a need. The pattern finished, so we're done. We have a match `match:123 4`.
+4. The next search starts from the character `5`.
+
+```smart header="Optimizations"
+Modern regular expression engines can optimize internal algorithms to work faster. So they may work a bit different from the described algorithm.
+
+But to understand how regular expressions work and to build regular expressions, we don't need to know about that. They are only used internally to optimize things.
+
+Complex regular expressions are hard to optimize, so the search may work exactly as described as well.
+```
+
+## Alternative approach
+
+With regexps, there's often more then one way to do the same thing.
+
+In our case we can find quoted strings without lazy mode using the regexp `pattern:"[^"]+"`:
+
+```js run
+let reg = /"[^"]+"/g;
+
+let str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+The regexp `pattern:"[^"]+"` gives correct results, because it looks for a quote `pattern:'"'` followed by one or more non-quotes `pattern:[^"]`, and then the closing quote.
+
+When the regexp engine looks for `pattern:[^"]+` it stops the repetitions when it meets the closing quote, and we're done.
+
+Please note, that this logic does not replace lazy quantifiers!
+
+It is just different. There are times when we need one or another.
+
+Let's see one more example where lazy quantifiers fail and this variant works right.
+
+For instance, we want to find links of the form `<a href="..." class="doc">`, with any `href`.
+
+Which regular expression to use?
+
+The first idea might be: `pattern:/<a href=".*" class="doc">/g`.
+
+Let's check it:
+```js run
+let str = '...<a href="link" class="doc">...';
+let reg = /<a href=".*" class="doc">/g;
+
+// Works!
+alert( str.match(reg) ); // <a href="link" class="doc">
+```
+
+...But what if there are many links in the text?
+
+```js run
+let str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+let reg = /<a href=".*" class="doc">/g;
+
+// Whoops! Two links in one match!
+alert( str.match(reg) ); // <a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+Now the result is wrong for the same reason as our "witches" example. The quantifier `pattern:.*` took too many characters.
+
+The match looks like this:
+
+```html
+<a href="....................................." class="doc">
+<a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+Let's modify the pattern by making the quantifier `pattern:.*?` lazy:
+
+```js run
+let str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+let reg = /<a href=".*?" class="doc">/g;
+
+// Works!
+alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
+```
+
+Now it works, there are two maches:
+
+```html
+<a href="....." class="doc">    <a href="....." class="doc">
+<a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+Why it works -- should be obvious after all explanations above. So let's not stop on the details, but try one more text:
+
+```js run
+let str = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
+let reg = /<a href=".*?" class="doc">/g;
+
+// Wrong match!
+alert( str.match(reg) ); // <a href="link1" class="wrong">... <p style="" class="doc">
+```
+
+We can see that the regexp matched not just a link, but also a lot of text after it, including `<p...>`.
+
+Why it happens?
+
+1. First the regexp finds a link start `match:<a href="`.
+
+2. Then it looks for `pattern:.*?`, we take one character, then check if there's a match for the rest of the pattern, then take another one...
+
+    The quantifier `pattern:.*?` consumes characters until it meets `match:class="doc">`.
+
+    ...And where can it find it? If we look at the text, then we can see that the only `match:class="doc">` is beyound the link, in the tag `<p>`.
+
+3. So we have match:
+
+    ```html
+    <a href="..................................." class="doc">
+    <a href="link1" class="wrong">... <p style="" class="doc">
+    ```
+
+So the lazyness did not work for us here.
+
+We need the pattern to look for `<a href="...something..." class="doc">`, but both greedy and lazy variants have problems.
+
+The correct variant would be: `pattern:href="[^"]*"`. It will take all characters inside the `href` attribute till the nearest quote, just what we need.
+
+A working example:
+
+```js run
+let str1 = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
+let str2 = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+let reg = /<a href="[^"]*" class="doc">/g;
+
+// Works!
+alert( str1.match(reg) ); // null, no matches, that's correct
+alert( str2.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
+```
+
+## Summary
+
+Quantifiers have two modes of work:
+
+Greedy
+: By default the regular expression engine tries to repeat the quantifier as many times as possible. For instance, `pattern:\d+` consumes all possible digits. When it becomes impossible to consume more (no more digits or string end), then it continues to match the rest of the pattern. If there's no match then it decreases the number of repetitions (backtracks) and tries again.
+
+Lazy
+: Enabled by the question mark `pattern:?` after the quantifier. The regexp engine tries to match the rest of the pattern before each repetition of the quantifier.
+
+As we've seen, the lazy mode is not a "panacea" from the greedy search. An alternative is a "fine-tuned" greedy search, with exclusions. Soon we'll see more examples of it.
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png
new file mode 100644
index 00000000..5db6f17a
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png
new file mode 100644
index 00000000..966e27aa
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png
new file mode 100644
index 00000000..9fdbe234
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png
new file mode 100644
index 00000000..91e66582
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png
new file mode 100644
index 00000000..aeef75bd
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png
new file mode 100644
index 00000000..a8c62e60
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png
new file mode 100644
index 00000000..c18ab43e
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png
new file mode 100644
index 00000000..823a3717
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png
new file mode 100644
index 00000000..12442d2b
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png
new file mode 100644
index 00000000..29d3cf0a
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png
new file mode 100644
index 00000000..3ed72b25
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png
new file mode 100644
index 00000000..4833e676
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png
new file mode 100644
index 00000000..1e0ce417
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png
new file mode 100644
index 00000000..1e378468
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png
new file mode 100644
index 00000000..478834ee
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png
new file mode 100644
index 00000000..495a2f24
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png
new file mode 100644
index 00000000..e5054367
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png
new file mode 100644
index 00000000..870d4633
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png
new file mode 100644
index 00000000..66728501
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png differ
diff --git a/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png
new file mode 100644
index 00000000..4228e193
Binary files /dev/null and b/5-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png differ
diff --git a/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/solution.md b/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/solution.md
new file mode 100644
index 00000000..443fdd85
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/solution.md
@@ -0,0 +1,29 @@
+A regexp to search 3-digit color `#abc`: `pattern:/#[a-f0-9]{3}/i`.
+
+We can add exactly 3 more optional hex digits. We don't need more or less. Either we have them or we don't.
+
+The simplest way to add them -- is to append to the regexp: `pattern:/#[a-f0-9]{3}([a-f0-9]{3})?/i`
+
+We can do it in a smarter way though: `pattern:/#([a-f0-9]{3}){1,2}/i`.
+
+Here the regexp `pattern:[a-f0-9]{3}` is in parentheses to apply the quantifier  `pattern:{1,2}` to it as a whole.
+
+In action:
+
+```js run
+let reg = /#([a-f0-9]{3}){1,2}/gi;
+
+let str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(reg) ); // #3f3 #AA0ef #abc
+```
+
+There's minor problem here: the pattern found `match:#abc` in  `subject:#abcd`. To prevent that we can add `pattern:\b` to the end:
+
+```js run
+let reg = /#([a-f0-9]{3}){1,2}\b/gi;
+
+let str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(reg) ); // #3f3 #AA0ef
+```
diff --git a/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/task.md b/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/task.md
new file mode 100644
index 00000000..c23097c0
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/1-find-webcolor-3-or-6/task.md
@@ -0,0 +1,14 @@
+# Find color in the format #abc or #abcdef
+
+Write a regexp that matches colors in the format `#abc` or `#abcdef`. That is: `#` followed by 3 or 6 hexadimal digits.
+
+Usage example:
+```js
+let reg = /your regexp/g;
+
+let str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(reg) ); // #3f3 #AA0ef
+```
+
+P.S. Should be exactly 3 or 6 hex digits: values like `#abcd` should not match.
diff --git a/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/solution.md b/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/solution.md
new file mode 100644
index 00000000..2747933e
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/solution.md
@@ -0,0 +1,16 @@
+
+An integer number is `pattern:\d+`.
+
+A decimal part is: `pattern:\.\d+`.
+
+Because the decimal part is optional, let's put it in parentheses with quantifier `pattern:'?'`.
+
+Finally we have the regexp: `pattern:\d+(\.\d+)?`:
+
+```js run
+let reg = /\d+(\.\d+)?/g;
+
+let str = "1.5 0 12. 123.4.";
+
+alert( str.match(re) );   // 1.5, 0, 12, 123.4
+```
diff --git a/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/task.md b/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/task.md
new file mode 100644
index 00000000..2ce17876
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/3-find-decimal-positive-numbers/task.md
@@ -0,0 +1,12 @@
+# Find positive numbers
+
+Create a regexp that looks for positive numbers, including those without a decimal point.
+
+An example of use:
+```js
+let reg = /your regexp/g;
+
+let str = "1.5 0 12. 123.4.";
+
+alert( str.match(reg) );   // 1.5, 0, 12, 123.4
+```
diff --git a/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/solution.md b/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/solution.md
new file mode 100644
index 00000000..dd241084
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/solution.md
@@ -0,0 +1,11 @@
+A positive number with an optional decimal part is (per previous task): `pattern:\d+(\.\d+)?`.
+
+Let's add an optional `-` in the beginning:
+
+```js run
+let reg = /-?\d+(\.\d+)?/g;
+
+let str = "-1.5 0 2 -123.4.";
+
+alert( str.match(reg) );   // -1.5, 0, 2, -123.4
+```
diff --git a/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/task.md b/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/task.md
new file mode 100644
index 00000000..121a18a4
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/4-find-decimal-numbers/task.md
@@ -0,0 +1,13 @@
+# Find all numbers
+
+Write a regexp that looks for all decimal numbers including integer ones, with the floating point and negative ones.
+
+An example of use:
+
+```js
+let reg = /your regexp/g;
+
+let str = "-1.5 0 2 -123.4.";
+
+alert( str.match(re) ); // -1.5, 0, 2, -123.4
+```
diff --git a/5-regular-expressions/09-regexp-groups/5-parse-expression/solution.md b/5-regular-expressions/09-regexp-groups/5-parse-expression/solution.md
new file mode 100644
index 00000000..08d4843e
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/5-parse-expression/solution.md
@@ -0,0 +1,49 @@
+A regexp for a number is: `pattern:-?\d+(\.\d+)?`. We created it in previous tasks.
+
+An operator is `pattern:[-+*/]`. We put a dash `pattern:-` the first, because in the middle it would mean a character range, we don't need that.
+
+Note that a slash should be escaped inside a JavaScript regexp `pattern:/.../`.
+
+We need a number, an operator, and then another number. And optional spaces between them.
+
+The full regular expression: `pattern:-?\d+(\.\d+)?\s*[-+*/]\s*-?\d+(\.\d+)?`.
+
+To get a result as an array let's put parentheses around the data that we need: numbers and the operator: `pattern:(-?\d+(\.\d+)?)\s*([-+*/])\s*(-?\d+(\.\d+)?)`.
+
+In action:
+
+```js run
+let reg = /(-?\d+(\.\d+)?)\s*([-+*\/])\s*(-?\d+(\.\d+)?)/;
+
+alert( "1.2 + 12".match(reg) );
+```
+
+The result includes:
+
+- `result[0] == "1.2 + 12"` (full match)
+- `result[1] == "1"` (first parentheses)
+- `result[2] == "2"` (second parentheses -- the decimal part `(\.\d+)?`)
+- `result[3] == "+"` (...)
+- `result[4] == "12"` (...)
+- `result[5] == undefined` (the last decimal part is absent, so it's undefined)
+
+We need only numbers and the operator. We don't need decimal parts.
+
+So let's remove extra groups from capturing by added `pattern:?:`, for instance: `pattern:(?:\.\d+)?`.
+
+The final solution:
+
+```js run
+function parse(expr) {
+  let reg = /(-?\d+(?:\.\d+)?)\s*([-+*\/])\s*(-?\d+(?:\.\d+)?)/;
+
+  let result = expr.match(reg);
+
+  if (!result) return;
+  result.shift();
+
+  return result;
+}
+
+alert( parse("-1.23 * 3.45") );  // -1.23, *, 3.45
+```
diff --git a/5-regular-expressions/09-regexp-groups/5-parse-expression/task.md b/5-regular-expressions/09-regexp-groups/5-parse-expression/task.md
new file mode 100644
index 00000000..8b54d468
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/5-parse-expression/task.md
@@ -0,0 +1,28 @@
+# Parse an expression
+
+An arithmetical expression consists of 2 numbers and an operator between them, for instance:
+
+- `1 + 2`
+- `1.2 * 3.4`
+- `-3 / -6`
+- `-2 - 2`
+
+The operator is one of: `"+"`, `"-"`, `"*"` or `"/"`.
+
+There may be extra spaces at the beginning, at the end or between the parts.
+
+Create a function `parse(expr)` that takes an expression and returns an array of 3 items:
+
+1. The first number.
+2. The operator.
+3. The second number.
+
+For example:
+
+```js
+let [a, op, b] = parse("1.2 * 3.4");
+
+alert(a); // 1.2
+alert(op); // *
+alert(b); // 3.4
+```
diff --git a/5-regular-expressions/09-regexp-groups/article.md b/5-regular-expressions/09-regexp-groups/article.md
new file mode 100644
index 00000000..6bd14e7c
--- /dev/null
+++ b/5-regular-expressions/09-regexp-groups/article.md
@@ -0,0 +1,172 @@
+# Capturing groups
+
+A part of the pattern can be enclosed in parentheses `pattern:(...)`. That's called a "capturing group".
+
+That has two effects:
+
+1. It allows to place a part of the match into a separate array item when using  [String#match](mdn:js/String/match) or [RegExp#exec](mdn:/RegExp/exec) methods.
+2. If we put a quantifier after the parentheses, it applies to the parentheses as a whole, not the last character.
+
+[cut]
+
+## Example
+
+In the example below the pattern `pattern:(go)+` finds one or more `match:'go'`:
+
+```js run
+alert( 'Gogogo now!'.match(/(go)+/i) ); // "Gogogo"
+```
+
+Without parentheses, the pattern `pattern:/go+/` means `subject:g`, followed by `subject:o` repeated one or more times. For instance, `match:goooo` or `match:gooooooooo`.
+
+Parentheses group the word `pattern:(go)` together.
+
+Let's make something more complex -- a regexp to match an email.
+
+Examples of emails:
+
+```
+my@mail.com
+john.smith@site.com.uk
+```
+
+The pattern: `pattern:[-.\w]+@([\w-]+\.)+[\w-]{2,20}`.
+
+- The first part before `@` may include wordly characters, a dot and a dash `pattern:[-.\w]+`, like `match:john.smith`.
+- Then `pattern:@`
+- And then the domain. May be a second-level domain `site.com` or with subdomains like `host.site.com.uk`. We can match it as "a word followed by a dot" repeated one or more times for subdomains: `match:mail.` or `match:site.com.`, and then "a word" for the last part: `match:.com` or `match:.uk`.
+
+    The word followed by a dot is `pattern:(\w+\.)+` (repeated). The last word should not have a dot at the end, so it's just `\w{2,20}`. The quantifier `pattern:{2,20}` limits the length, because domain zones are like `.uk` or `.com` or `.museum`, but can't be longer than 20 characters.
+
+    So the domain pattern is `pattern:(\w+\.)+\w{2,20}`. Now we replace `\w` with `[\w-]`, because dashes are also allowed in domains, and we get the final result.
+
+That regexp is not perfect, but usually works. It's short and good enough to fix errors or occasional mistypes.
+
+For instance, here we can find all emails in the string:
+
+```js run
+let reg = /[-.\w]+@([\w-]+\.)+[\w-]{2,20}/g;
+
+alert("my@mail.com @ his@site.com.uk".match(reg)); // my@mail.com,his@site.com.uk
+```
+
+
+## Contents of parentheses  
+
+Parentheses are numbered from left to right. The search engine remembers the content of each and allows to reference it in the pattern or in the replacement string.
+
+For instance, we can find an HTML-tag using a (simplified) pattern `pattern:<.*?>`. Usually we'd want to do something with the result after it.
+
+If we enclose the inner contents of `<...>` into parentheses, then we can access it like this:
+
+```js run
+let str = '<h1>Hello, world!</h1>';
+let reg = /<(.*?)>/;
+
+alert( str.match(reg) ); // Array: ["<h1>", "h1"]
+```
+
+The call to [String#match](mdn:js/String/match) returns groups only if the regexp has no `pattern:/.../g` flag.
+
+If we need all matches with their groups then we can use [RegExp#exec](mdn:js/RegExp/exec) method as described in <info:regexp-methods>:
+
+```js run
+let str = '<h1>Hello, world!</h1>';
+
+// two matches: opening <h1> and closing </h1> tags
+let reg = /<(.*?)>/g;
+
+let match;
+
+while (match = reg.exec(str)) {
+  // first shows the match: <h1>,h1
+  // then shows the match: </h1>,/h1
+  alert(match);
+}
+```
+
+Here we have two matches for `pattern:<(.*?)>`, each of them is an array with the full match and groups.
+
+## Nested groups
+
+Parentheses can be nested. In this case the numbering also goes from left to right.
+
+For instance, when searching a tag in `subject:<span class="my">` we may be interested in:
+
+1. The tag content as a whole: `match:span class="my"`.
+2. The tag name: `match:span`.
+3. The tag attributes: `match:class="my"`.
+
+Let's add parentheses for them:
+
+```js run
+let str = '<span class="my">';
+
+let reg = /<(([a-z]+)\s*([^>]*))>/;
+
+let result = str.match(reg);
+alert(result); // <span class="my">, span class="my", span, class="my"
+```
+
+Here's how groups look:
+
+![](regexp-nested-groups.png)
+
+At the zero index of the `result` is always the full match.
+
+Then groups, numbered from left to right. Whichever opens first gives the first group `result[1]`. Here it encloses the whole tag content.
+
+Then in `result[2]` goes the group from the second opening `pattern:(` till the corresponding `pattern:)` -- tag name, then we don't group spaces, but group attributes for `result[3]`.
+
+**If a group is optional and doesn't exist in the match, the corresponding `result` index is present (and equals `undefined`).**
+
+For instance, let's consider the regexp `pattern:a(z)?(c)?`. It looks for `"a"` optionally followed by `"z"` optionally followed by `"c"`.
+
+If we run it on the string with a single letter `subject:a`, then the result is:
+
+```js run
+let match = 'a'.match(/a(z)?(c)?/);
+
+alert( match.length ); // 3
+alert( match[0] ); // a (whole match)
+alert( match[1] ); // undefined
+alert( match[2] ); // undefined
+```
+
+The array has the length of `3`, but all groups are empty.
+
+And here's a more complex match for the string `subject:ack`:
+
+```js run
+let match = 'ack'.match(/a(z)?(c)?/)
+
+alert( match.length ); // 3
+alert( match[0] ); // ac (whole match)
+alert( match[1] ); // undefined, because there's nothing for (z)?
+alert( match[2] ); // c
+```
+
+The array length is permanent: `3`. But there's nothing for the group `pattern:(z)?`, so the result is `["ac", undefined, "c"]`.
+
+## Non-capturing groups with ?:
+
+Sometimes we need parentheses to correctly apply a quantifier, but we don't want their contents in the array.
+
+A group may be excluded by adding `pattern:?:` in the beginning.
+
+For instance, if we want to find `pattern:(go)+`, but don't want to put remember the contents (`go`) in a separate array item, we can write: `pattern:(?:go)+`.
+
+In the example below we only get the name "John" as a separate member of the `results` array:
+
+```js run
+let str = "Gogo John!";
+*!*
+// exclude Gogo from capturing
+let reg = /(?:go)+ (\w+)/i;
+*/!*
+
+let result = str.match(reg);
+
+alert( result.length ); // 2
+alert( result[1] ); // John
+```
diff --git a/5-regular-expressions/09-regexp-groups/regexp-nested-groups.png b/5-regular-expressions/09-regexp-groups/regexp-nested-groups.png
new file mode 100644
index 00000000..4434b7be
Binary files /dev/null and b/5-regular-expressions/09-regexp-groups/regexp-nested-groups.png differ
diff --git a/5-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png b/5-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png
new file mode 100644
index 00000000..2721e79d
Binary files /dev/null and b/5-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png differ
diff --git a/5-regular-expressions/10-regexp-backreferences/article.md b/5-regular-expressions/10-regexp-backreferences/article.md
new file mode 100644
index 00000000..f47515d7
--- /dev/null
+++ b/5-regular-expressions/10-regexp-backreferences/article.md
@@ -0,0 +1,62 @@
+# Backreferences: \n and $n
+
+Capturing groups may be accessed not only in the result, but in the replacement string, and in the pattern too.
+
+[cut]
+
+## Group in replacement: $n
+
+When we are using `replace` method, we can access n-th group in the replacement string using `$n`.
+
+For instance:
+
+```js run
+let name = "John Smith";
+
+name = name.replace(/(\w+) (\w+)/i, *!*"$2, $1"*/!*);
+alert( name ); // Smith, John
+```
+
+Here `pattern:$1` in the replacement string means "substitute the content of the first group here", and `pattern:$2` means "substitute the second group here".
+
+Referencing a group in the replacement string allows us to reuse the existing text during the replacement.
+
+## Group in pattern: \n
+
+A group can be referenced in the pattern using `\n`.
+
+To make things clear let's consider a task. We need to find a quoted string: either a single-quoted  `subject:'...'` or a double-quoted `subject:"..."` -- both variants need to match.
+
+How to look for them?
+
+We can put two kinds of quotes in the pattern: `pattern:['"](.*?)['"]`. That finds strings like  `match:"..."` and `match:'...'`, but it gives incorrect matches when one quote appears inside another one, like the string `subject:"She's the one!"`:
+
+```js run
+let str = "He said: \"She's the one!\".";
+
+let reg = /['"](.*?)['"]/g;
+
+// The result is not what we expect
+alert( str.match(reg) ); // "She'
+```
+
+As we can see, the pattern found an opening quote `match:"`, then the text is consumed lazily till the other quote `match:'`, that closes the match.
+
+To make sure that the pattern looks for the closing quote exactly the same as the opening one, let's make a group of it and use the backreference:
+
+```js run
+let str = "He said: \"She's the one!\".";
+
+let reg = /(['"])(.*?)\1/g;
+
+alert( str.match(reg) ); // "She's the one!"
+```
+
+Now everything's correct! The regular expression engine finds the first quote `pattern:(['"])` and remembers the content of `pattern:(...)`, that's the first capturing group.
+
+Further in the pattern `pattern:\1` means "find the same text as in the first group".
+
+Please note:
+
+- To reference a group inside a replacement string -- we use `$1`, while in the pattern -- a backslash `\1`.
+- If we use `?:` in the group, then we can't reference it. Groups that are excluded from capturing `(?:...)` are not remembered by the engine.
diff --git a/5-regular-expressions/11-regexp-alternation/01-find-programming-language/solution.md b/5-regular-expressions/11-regexp-alternation/01-find-programming-language/solution.md
new file mode 100644
index 00000000..3419aa49
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/01-find-programming-language/solution.md
@@ -0,0 +1,33 @@
+
+The first idea can be to list the languages with `|` in-between.
+
+But that doesn't work right:
+
+```js run
+let reg = /Java|JavaScript|PHP|C|C\+\+/g;
+
+let str = "Java, JavaScript, PHP, C, C++";
+
+alert( str.match(reg) ); // Java,Java,PHP,C,C
+```
+
+The regular expression engine looks for alternations one-by-one. That is: first it checks if we have  `match:Java`, otherwise -- looks for `match:JavaScript` and so on.
+
+As a result, `match:JavaScript` can never be found, just because `match:Java` is checked first.
+
+The same with `match:C` and `match:C++`.
+
+There are two solutions for that problem:
+
+1. Change the order to check the longer match first: `pattern:JavaScript|Java|C\+\+|C|PHP`.
+2. Merge variants with the same start: `pattern:Java(Script)?|C(\+\+)?|PHP`.
+
+In action:
+
+```js run
+let reg = /Java(Script)?|C(\+\+)?|PHP/g;
+
+let str = "Java, JavaScript, PHP, C, C++";
+
+alert( str.match(reg) ); // Java,JavaScript,PHP,C,C++
+```
diff --git a/5-regular-expressions/11-regexp-alternation/01-find-programming-language/task.md b/5-regular-expressions/11-regexp-alternation/01-find-programming-language/task.md
new file mode 100644
index 00000000..61b9526f
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/01-find-programming-language/task.md
@@ -0,0 +1,11 @@
+# Find programming languages
+
+There are many programming languages, for instance Java, JavaScript, PHP, C, C++.
+
+Create a regexp that finds them in the string `subject:Java JavaScript PHP C++ C`:
+
+```js
+let reg = /your regexp/g;
+
+alert("Java JavaScript PHP C++ C".match(reg)); // Java JavaScript PHP C++ C
+```
diff --git a/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/solution.md b/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/solution.md
new file mode 100644
index 00000000..03080f86
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/solution.md
@@ -0,0 +1,23 @@
+
+Opening tag is `pattern:\[(b|url|quote)\]`.
+
+Then to find everything till the closing tag -- let's the pattern `pattern:[\s\S]*?` to match any character including the newline and then a backreference to the closing tag.
+
+The full pattern: `pattern:\[(b|url|quote)\][\s\S]*?\[/\1\]`.
+
+In action:
+
+```js run
+let reg = /\[(b|url|quote)\][\s\S]*?\[\/\1\]/g;
+
+let str = `
+  [b]hello![/b]
+  [quote]
+    [url]http://google.com[/url]
+  [/quote]
+`;
+
+alert( str.match(reg) ); // [b]hello![/b],[quote][url]http://google.com[/url][/quote]
+```
+
+Please note that we had to escape a slash for the closing tag `pattern:[/\1]`, because normally the slash closes the pattern.
diff --git a/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/task.md b/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/task.md
new file mode 100644
index 00000000..e0919e03
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/02-find-matching-bbtags/task.md
@@ -0,0 +1,48 @@
+# Find bbtag pairs
+
+A "bb-tag" looks like `[tag]...[/tag]`, where `tag` is one of: `b`, `url` or `quote`.
+
+For instance:
+```
+[b]text[/b]
+[url]http://google.com[/url]
+```
+
+BB-tags can be nested. But a tag can't be nested into itself, for instance:
+
+```
+Normal:
+[url] [b]http://google.com[/b] [/url]
+[quote] [b]text[/b] [/quote]
+
+Impossible:
+[b][b]text[/b][/b]
+```
+
+Tags can contain line breaks, that's normal:
+
+```
+[quote]
+  [b]text[/b]
+[/quote]
+```
+
+Create a regexp to find all BB-tags with their contents.
+
+For instance:
+
+```js
+let reg = /your regexp/g;
+
+let str = "..[url]http://google.com[/url]..";
+alert( str.match(reg) ); // [url]http://google.com[/url]
+```
+
+If tags are nested, then we need the outer tag (if we want we can continue the search in its content):
+
+```js
+let reg = /your regexp/g;
+
+let str = "..[url][b]http://google.com[/b][/url]..";
+alert( str.match(reg) ); // [url][b]http://google.com[/b][/url]
+```
diff --git a/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/solution.md b/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/solution.md
new file mode 100644
index 00000000..143be870
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/solution.md
@@ -0,0 +1,17 @@
+The solution: `pattern:/"(\\.|[^"\\])*"/g`.
+
+Step by step:
+
+- First we look for an opening quote `pattern:"`
+- Then if we have a backslash `pattern:\\` (we technically have to double it in the pattern, because it is a special character, so that's a single backslash in fact), then any character is fine after it (a dot).
+- Otherwise we take any character except a quote (that would mean the end of the string) and a backslash (to prevent lonely backslashes, the backslash is only used with some other symbol after it): `pattern:[^"\\]`
+- ...And so on till the closing quote.
+
+In action:
+
+```js run
+let reg = /"(\\.|[^"\\])*"/g;
+let str = ' .. "test me" .. "Say \\"Hello\\"!" .. "\\\\ \\"" .. ';
+
+alert( str.match(reg) ); // "test me","Say \"Hello\"!","\\ \""
+```
diff --git a/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/task.md b/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/task.md
new file mode 100644
index 00000000..2ccac4bd
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/03-match-quoted-string/task.md
@@ -0,0 +1,32 @@
+# Find quoted strings
+
+Create a regexp to find strings in double quotes `subject:"..."`.
+
+The important part is that strings should support escaping, in the same way as JavaScript strings do. For instance, quotes can be inserted as `subject:\"` a newline as `subject:\n`, and the slash itself as `subject:\\`.
+
+```js
+let str = "Just like \"here\".";
+```
+
+For us it's important that an escaped quote `subject:\"` does not end a string.
+
+So we should look from one quote to the other ignoring escaped quotes on the way.
+
+That's the essential part of the task, otherwise it would be trivial.
+
+Examples of strings to match:
+```js
+.. *!*"test me"*/!* ..  
+.. *!*"Say \"Hello\"!"*/!* ... (escaped quotes inside)
+.. *!*"\\"*/!* ..  (double slash inside)
+.. *!*"\\ \""*/!* ..  (double slash and an escaped quote inside)
+```
+
+In JavaScript we need to double the slashes to pass them right into the string, like this:
+
+```js run
+let str = ' .. "test me" .. "Say \\"Hello\\"!" .. "\\\\ \\"" .. ';
+
+// the in-memory string
+alert(str); //  .. "test me" .. "Say \"Hello\"!" .. "\\ \"" ..
+```
diff --git a/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/solution.md b/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/solution.md
new file mode 100644
index 00000000..70c4de91
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/solution.md
@@ -0,0 +1,16 @@
+
+The pattern start is obvious: `pattern:<style`.
+
+...But then we can't simply write `pattern:<style.*?>`, because `match:<styler>` would match it.
+
+We need either a space after `match:<style` and then optionally something else or the ending `match:>`.
+
+In the regexp language: `pattern:<style(>|\s.*?>)`.
+
+In action:
+
+```js run
+let reg = /<style(>|\s.*?>)/g;
+
+alert( '<style> <styler> <style test="...">'.match(reg) ); // <style>, <style test="...">
+```
diff --git a/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/task.md b/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/task.md
new file mode 100644
index 00000000..85976a9e
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/04-match-exact-tag/task.md
@@ -0,0 +1,13 @@
+# Find the full tag
+
+Write a regexp to find the tag `<style...>`. It should match the full tag: it may have no attributes  `<style>` or have several of them `<style type="..." id="...">`.
+
+...But the regexp should not match `<styler>`!
+
+For instance:
+
+```js
+let reg = /your regexp/g;
+
+alert( '<style> <styler> <style test="...">'.match(reg) ); // <style>, <style test="...">
+```
diff --git a/5-regular-expressions/11-regexp-alternation/article.md b/5-regular-expressions/11-regexp-alternation/article.md
new file mode 100644
index 00000000..08ab486b
--- /dev/null
+++ b/5-regular-expressions/11-regexp-alternation/article.md
@@ -0,0 +1,72 @@
+# Alternation (OR) |
+
+Alternation is the term in regular expression that is actually a simple "OR".
+
+In a regular expression it is denoted with a vertial line character `pattern:|`.
+
+[cut]
+
+For instance, we need to find programming languages: HTML, PHP, Java or JavaScript.
+
+The corresponding regexp: `pattern:html|php|java(script)?`.
+
+A usage example:
+
+```js run
+let reg = /html|php|css|java(script)?/gi;
+
+let str = "First HTML appeared, then CSS, then JavaScript";
+
+alert( str.match(reg) ); // 'HTML', 'CSS', 'JavaScript'
+```
+
+We already know a similar thing -- square brackets. They allow to choose between multiple character, for instance `pattern:gr[ae]y` matches `match:gray` or `match:grey`.
+
+Alternation works not on a character level, but on expression level. A regexp `pattern:A|B|C` means one of expressions `A`, `B` or `C`.
+
+For instance:
+
+- `pattern:gr(a|e)y` means exactly the same as `pattern:gr[ae]y`.
+- `pattern:gra|ey` means "gra" or "ey".
+
+To separate a part of the pattern for alternation we usually enclose it in parentheses, like this: `pattern:before(XXX|YYY)after`.
+
+## Regexp for time
+
+In previous chapters there was a task to build a regexp for searching time in the form `hh:mm`, for instance `12:00`. But a simple `pattern:\d\d:\d\d` is too vague. It accepts `25:99` as the time.
+
+How can we make a better one?
+
+We can apply more careful matching:
+
+- The first digit must be `0` or `1` followed by any digit.
+- Or `2` followed by `pattern:[0-3]`
+
+As a regexp: `pattern:[01]\d|2[0-3]`.
+
+Then we can add a colon and the minutes part.
+
+The minutes must be from `0` to `59`, in the regexp language that means the first digit  `pattern:[0-5]` followed by any other digit `\d`.
+
+Let's glue them together into the pattern: `pattern:[01]\d|2[0-3]:[0-5]\d`.
+
+We're almost done, but there's a problem. The alternation `|` is between the `pattern:[01]\d` and `pattern:2[0-3]:[0-5]\d`. That's wrong, because it will match either the left or the right pattern:
+
+
+```js run
+let reg = /[01]\d|2[0-3]:[0-5]\d/g;
+
+alert("12".match(reg)); // 12 (matched [01]\d)
+```
+
+That's rather obvious, but still an often mistake when starting to work with regular expressions.
+
+We need to add parentheses to apply alternation exactly to hours: `[01]\d` OR `2[0-3]`.
+
+The correct variant:
+
+```js run
+let reg = /([01]\d|2[0-3]):[0-5]\d/g;
+
+alert("00:00 10:10 23:59 25:99 1:2".match(reg)); // 00:00,10:10,23:59
+```
diff --git a/5-regular-expressions/12-regexp-anchors/1-start-end/solution.md b/5-regular-expressions/12-regexp-anchors/1-start-end/solution.md
new file mode 100644
index 00000000..1a8cbe9a
--- /dev/null
+++ b/5-regular-expressions/12-regexp-anchors/1-start-end/solution.md
@@ -0,0 +1,6 @@
+
+The empty string is the only match: it starts and immediately finishes.
+
+The task once again demonstrates that anchors are not characters, but tests.
+
+The string is empty `""`. The engine first matches the `pattern:^` (input start), yes it's there, and then immediately the end `pattern:$`, it's here too. So there's a match.
diff --git a/5-regular-expressions/12-regexp-anchors/1-start-end/task.md b/5-regular-expressions/12-regexp-anchors/1-start-end/task.md
new file mode 100644
index 00000000..abdfec93
--- /dev/null
+++ b/5-regular-expressions/12-regexp-anchors/1-start-end/task.md
@@ -0,0 +1,3 @@
+# Regexp ^$
+
+Which string matches the pattern `pattern:^$`?
diff --git a/5-regular-expressions/12-regexp-anchors/2-test-mac/solution.md b/5-regular-expressions/12-regexp-anchors/2-test-mac/solution.md
new file mode 100644
index 00000000..422bc65e
--- /dev/null
+++ b/5-regular-expressions/12-regexp-anchors/2-test-mac/solution.md
@@ -0,0 +1,21 @@
+A two-digit hex number is `pattern:[0-9a-f]{2}` (assuming the `pattern:i` flag is enabled).
+
+We need that number `NN`, and then `:NN` repeated 5 times (more numbers);
+
+The regexp is: `pattern:[0-9a-f]{2}(:[0-9a-f]{2}){5}`
+
+Now let's show that the match should capture all the text: start at the beginning and end at the end. That's done by wrapping the pattern in `pattern:^...$`.
+
+Finally:
+
+```js run
+let reg = /^[0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}$/i;
+
+alert( reg.test('01:32:54:67:89:AB') ); // true
+
+alert( reg.test('0132546789AB') ); // false (no colons)
+
+alert( reg.test('01:32:54:67:89') ); // false (5 numbers, need 6)
+
+alert( reg.test('01:32:54:67:89:ZZ') ) // false (ZZ in the end)
+```
diff --git a/5-regular-expressions/12-regexp-anchors/2-test-mac/task.md b/5-regular-expressions/12-regexp-anchors/2-test-mac/task.md
new file mode 100644
index 00000000..e7265598
--- /dev/null
+++ b/5-regular-expressions/12-regexp-anchors/2-test-mac/task.md
@@ -0,0 +1,20 @@
+# Check MAC-address
+
+[MAC-address](https://en.wikipedia.org/wiki/MAC_address) of a network interface consists of 6 two-digit hex numbers separated by a colon.
+
+For instance: `subject:'01:32:54:67:89:AB'`.
+
+Write a regexp that checks whether a string is MAC-address.
+
+Usage:
+```js
+let reg = /your regexp/;
+
+alert( reg.test('01:32:54:67:89:AB') ); // true
+
+alert( reg.test('0132546789AB') ); // false (no colons)
+
+alert( reg.test('01:32:54:67:89') ); // false (5 numbers, must be 6)
+
+alert( reg.test('01:32:54:67:89:ZZ') ) // false (ZZ ad the end)
+```
diff --git a/5-regular-expressions/12-regexp-anchors/article.md b/5-regular-expressions/12-regexp-anchors/article.md
new file mode 100644
index 00000000..a1b4ff8b
--- /dev/null
+++ b/5-regular-expressions/12-regexp-anchors/article.md
@@ -0,0 +1,57 @@
+# String start ^ and finish $
+
+The caret `pattern:'^'` and dollar `pattern:'$'` characters have special meaning in a regexp. They are called "anchors".
+
+[cut]
+
+The caret `pattern:^` matches at the end of the text, and the dollar `pattern:$` -- in the end.
+
+For instance, let's test if the text starts with `Mary`:
+
+```js run
+let str1 = 'Mary had a little lamb, it's fleece was white as snow';
+let str2 = 'Everywhere Mary went, the lamp was sure to go';
+
+alert( /^Mary/.test(str1) ); // true
+alert( /^Mary/.test(str2) ); // false
+```
+
+The pattern `pattern:^Mary` means: "the string start and then Mary".
+
+Now let's test whether the text ends with an email.
+
+To match an email, we can use a regexp `pattern:[-.\w]+@([\w-]+\.)+[\w-]{2,20}`. It's not perfect, but mostly works.
+
+To test whether the string ends with the email, let's add `pattern:$` to the pattern:
+
+```js run
+let reg = /[-.\w]+@([\w-]+\.)+[\w-]{2,20}$/g;
+
+let str1 = 'My email is mail@site.com';
+let str2 = 'Everywhere Mary went, the lamp was sure to go';
+
+alert( reg.test(str1) ); // true
+alert( reg.test(str2) ); // false
+```
+
+We can use both anchors together to check whether the string exactly follows the pattern. That's often used for validation.
+
+For instance we want to check that `str` is exactly a color in the form `#` plus 6 hex digits. The pattern for the color is `pattern:#[0-9a-f]{6}`.
+
+To check that the *whole string* exactly matches it, we add `pattern:^...$`:
+
+```js run
+let str = "#abcdef";
+
+alert( /^#[0-9a-f]{6}$/i.test(str) ); // true
+```
+
+The regexp engine looks for the text start, then the color, and then immediately the text end. Just what we need.
+
+```smart header="Anchors have zero length"
+Anchors just like `\b` are tests. They have zero-width.
+
+In other words, they do not match a character, but rather force the regexp engine to check the condition (text start/end).
+```
+
+The behavior of anchors changes if there's a flag `pattern:m` (multiline mode). We'll explore it in the next chapter.
diff --git a/5-regular-expressions/13-regexp-multiline-mode/article.md b/5-regular-expressions/13-regexp-multiline-mode/article.md
new file mode 100644
index 00000000..fe95ca50
--- /dev/null
+++ b/5-regular-expressions/13-regexp-multiline-mode/article.md
@@ -0,0 +1,78 @@
+# Multiline mode, flag "m"
+
+The multiline mode is enabled by the flag `pattern:/.../m`.
+
+[cut]
+
+It only affects the behavior of `pattern:^` and `pattern:$`.
+
+In the multiline mode they match not only at the beginning and end of the string, but also at start/end of line.
+
+## Line start ^
+
+In the example below the text has multiple lines. The pattern `pattern:/^\d+/gm` takes a number from the beginning of each one:
+
+```js run
+let str = `1st place: Winnie
+2nd place: Piglet
+33rd place: Eeyore`;
+
+*!*
+alert( str.match(/^\d+/gm) ); // 1, 2, 33
+*/!*
+```
+
+Without the flag  `pattern:/.../m` only the first number is matched:
+
+
+```js run
+let str = `1st place: Winnie
+2nd place: Piglet
+33rd place: Eeyore`;
+
+*!*
+alert( str.match(/^\d+/g) ); // 1
+*/!*
+```
+
+That's because by default a caret `pattern:^` only matches at the beginning of the text, and in the multiline mode -- at the start of a line.
+
+The regular expression engine moves along the text and looks for a string start `pattern:^`, when finds -- continues to match the rest of the pattern `pattern:\d+`.
+
+## Line end $
+
+The dollar sign `pattern:$` behaves similarly.
+
+The regular expression `pattern:\w+$` finds the last word in every line
+
+```js run
+let str = `1st place: Winnie
+2nd place: Piglet
+33rd place: Eeyore`;
+
+alert( str.match(/\w+$/gim) ); // Winnie,Piglet,Eeyore
+```
+
+Without the `pattern:/.../m` flag the dollar `pattern:$` would only match the end of the whole string, so only the very last word would be found.
+
+## Anchors ^$ versus \n
+
+To find a newline, we can use not only `pattern:^` and `pattern:$`, but also the newline character `\n`.
+
+The first difference is that unlike anchors, the character `\n` "consumes" the newline character and adds it to the result.
+
+For instance, here we use it instead of `pattern:$`:
+
+```js run
+let str = `1st place: Winnie
+2nd place: Piglet
+33rd place: Eeyore`;
+
+alert( str.match(/\w+\n/gim) ); // Winnie\n,Piglet\n
+```
+
+Here every match is a word plus a newline character.
+
+And one more difference -- the newline `\n` does not match at the string end. That's why `Eeyore` is not found in the example above.
+
+So, anchors are usually better, they are closer to what we want to get.
diff --git a/5-regular-expressions/14-regexp-lookahead/article.md b/5-regular-expressions/14-regexp-lookahead/article.md
new file mode 100644
index 00000000..70484b7d
--- /dev/null
+++ b/5-regular-expressions/14-regexp-lookahead/article.md
@@ -0,0 +1,3 @@
+# Lookahead (in progress)
+
+The article is under development, will be here when it's ready.
diff --git a/5-regular-expressions/15-regexp-infinite-backtracking-problem/article.md b/5-regular-expressions/15-regexp-infinite-backtracking-problem/article.md
new file mode 100644
index 00000000..bb4c7d6f
--- /dev/null
+++ b/5-regular-expressions/15-regexp-infinite-backtracking-problem/article.md
@@ -0,0 +1,272 @@
+# Infinite backtracking problem
+
+Some regular expressions are looking simple, but can execute veeeeeery long time, and even "hang" the JavaScript engine.
+
+Sooner or later all developers occasionally meets this behavior.
+
+The typical situation -- a regular expression works fine for some time, and then starts to "hang" the script and make it consume 100% of CPU.
+
+That may even be a vulnerability. For instance, if JavaScript is on the server and uses regular expressions on user data. There were many vulnerabilities of that kind even in widely distributed systems.
+
+So the problem is definitely worth to deal with.
+
+[cut]
+
+## Example
+
+The plan will be like this:
+
+1. First we see the problem how it may occur.
+2. Then we simplify the situation and see why it occurs.
+3. Then we fix it.
+
+For instance let's consider searching tags in HTML.
+
+We want to find all tags, with or without attributes -- like `subject:<a href="..." class="doc" ...>`. We need the regexp to work reliably, because HTML comes from the internet and can be messy.
+
+In particular, we need it to match tags like `<a test="<>" href="#">` -- with `<` and `>` in attributes. That's allowed by [HTML standard](https://html.spec.whatwg.org/multipage/syntax.html#syntax-attributes).
+
+Now we can see that a simple regexp like `pattern:<[^>]+>` doesn't work, because it stops at the first `>`, and we need to ignore `<>` inside an attribute.
+
+```js run
+// the match doesn't reach the end of the tag - wrong!
+alert( '<a test="<>" href="#">'.match(/<[^>]+>/) ); // <a test="<>
+```
+
+We need the whole tag.
+
+To correctly handle such situations we need a more complex regular expression. It will have the form  `pattern:<tag (key=value)*>`.
+
+In the regexp language that is: `pattern:<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>`:
+
+1. `pattern:<\w+` -- is the tag start,
+2. `pattern:(\s*\w+=(\w+|"[^"]*")\s*)*` -- is an arbitrary number of pairs `word=value`, where the value can be either a word `pattern:\w+` or a quoted string `pattern:"[^"]*"`.
+
+That doesn't yet support the details of HTML grammer, for instance strings can be in 'single' quotes, but these can be added later, so that's somewhat close to real life. For now we want the regexp to be simple.
+
+Let's try it in action:
+
+```js run
+let reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
+
+let str='...<a test="<>" href="#">... <b>...';
+
+alert( str.match(reg) ); // <a test="<>" href="#">, <b>
+```
+
+Great, it works! It found both the long tag `match:<a test="<>" href="#">` and the short one `match:<b>`.
+
+Now let's see the problem.
+
+If you run the example below, it may hang the browser (or another JavaScript engine):
+
+```js run
+let reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
+
+let str = `<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  
+  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b`;
+
+*!*
+// The search will take a long long time
+alert( str.match(reg) );
+*/!*
+```
+
+Some regexp engines can handle that search, but most of them don't.
+
+What's the matter? Why a simple regular expression on such a small string "hangs"?
+
+Let's simplify the situation by removing the tag and quoted strings, we'll look only for attributes:
+
+```js run
+// only search for space-delimited attributes
+let reg = /<(\s*\w+=\w+\s*)*>/g;
+
+let str = `<a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b
+  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b`;
+
+*!*
+// the search will take a long, long time
+alert( str.match(reg) );
+*/!*
+```
+
+The same.
+
+Here we end the demo of the problem and start looking into what's going on.
+
+## Backtracking
+
+To make an example even simpler, let's consider `pattern:(\d+)*$`.
+
+In most regexp engines that search takes a very long time (careful -- can hang):
+
+```js run
+alert( '12345678901234567890123456789123456789z'.match(/(\d+)*$/) );
+```
+
+So what's wrong with the regexp?
+
+Actually, it looks a little bit strange. The quantifier `pattern:*` looks extraneous. If we want a number, we can use `pattern:\d+$`.
+
+Yes, the regexp is artificial, but the reason why it is slow is the same as those we saw above. So let's understand it.
+
+What happen during the search of `pattern:(\d+)*$` in the line `subject:123456789z`?
+
+1. First, the regexp engine tries to find a number `pattern:\d+`. The plus `pattern:+` is greedy by default, so it consumes all digits:
+
+    ```
+    \d+.......
+    (123456789)z
+    ```
+2. Then it tries to apply the start around the parentheses `pattern:(\d+)*`, but there are no more digits, so it the star doesn't give anything.
+
+    Then the pattern has the string end anchor `pattern:$`, and in the text we have `subject:z`.
+
+    ```
+               X
+    \d+........$
+    (123456789)z
+    ```
+
+    No match!
+3. There's no match, so the greedy quantifier `pattern:+` decreases the count of repetitions (backtracks).
+
+    Now `\d+` is not all digits, but all except the last one:
+    ```
+    \d+.......
+    (12345678)9z
+    ```
+4. Now the engine tries to continue the search from the new position (`9`).
+
+    The start `pattern:(\d+)*` can now be applied -- it gives the number `match:9`:
+
+    ```
+
+    \d+.......\d+
+    (12345678)(9)z
+    ```
+
+    The engine tries to match `$` again, but fails, because meets `subject:z`:
+
+    ```
+                 X
+    \d+.......\d+
+    (12345678)(9)z
+    ```
+
+    There's no match, so the engine will continue backtracking.
+5. Now the first number `pattern:\d+` will have 7 digits, and the rest of the string `subject:89` becomes the second `pattern:\d+`:
+
+    ```
+                 X
+    \d+......\d+
+    (1234567)(89)z
+    ```
+
+    ...Still no match for `pattern:$`.
+
+    The search engine backtracks again. Backtracking generally works like this: the last greedy quantifier decreases the number of repetitions until it can. Then the previous greedy quantifier decreases, and so on. In our case the last greedy quantifier is the second `pattern:\d+`, from `subject:89` to `subject:8`, and then the star takes `subject:9`:
+
+    ```
+                   X
+    \d+......\d+\d+
+    (1234567)(8)(9)z
+    ```
+6. ...Fail again. The second and third `pattern:\d+` backtracked to the end, so the first quantifier shortens the match to `subject:123456`, and the star takes the rest:
+
+    ```
+                 X
+    \d+.......\d+
+    (123456)(789)z
+    ```
+
+    Again no match. The process repeats: the last greedy quantifier releases one character (`9`):
+
+    ```
+                   X
+    \d+.....\d+ \d+
+    (123456)(78)(9)z
+    ```
+7. ...And so on.
+
+The regular expression engine goes through all combinations of `123456789` and their subsequences. There are a lot of them, that's why it takes so long.
+
+A smart guy can say here: "Backtracking? Let's turn on the lazy mode -- and no more backtracking!".
+
+Let's replace `pattern:\d+` with `pattern:\d+?` and see if it works (careful, can hang the browser)
+
+```js run
+// sloooooowwwwww
+alert( '12345678901234567890123456789123456789z'.match(/(\d+?)*$/) );
+```
+
+No, it doesn't.
+
+Lazy quantifiers actually do the same, but in the reverse order. Just think about how the search engine would work in this case.
+
+Some regular expression engines have tricky built-in checks to detect infinite backtracking or other means to work around them, but there's no universal solution.
+
+In the example above, when we search `pattern:<(\s*\w+=\w+\s*)*>` in the string `subject:<a=b  a=b  a=b  a=b` -- the similar thing happens.
+
+The string has no `>` at the end, so the match is impossible, but the regexp engine does not know about it. The search backtracks trying different combinations of `pattern:(\s*\w+=\w+\s*)`:
+
+```
+(a=b a=b a=b) (a=b)
+(a=b a=b) (a=b a=b)
+...
+```
+
+## How to fix?
+
+The problem -- too many variants in backtracking even if we don't need them.
+
+For instance, in the pattern `pattern:(\d+)*$` we (people) can easily see that `pattern:(\d+)` does not need to backtrack.
+
+Decreasing the count of `pattern:\d+` can not help to find a match, there's no matter between these two:
+
+```
+\d+........
+(123456789)z
+
+\d+...\d+....
+(1234)(56789)z
+```
+
+Let's get back to more real-life example: `pattern:<(\s*\w+=\w+\s*)*>`. We want it to find pairs `name=value` (as many as it can). There's no need in backtracking here.
+
+In other words, if it found many `name=value` pairs and then can't find `>`, then there's no need to decrease the count of repetitions. Even if we match one pair less, it won't give us the closing `>`:
+
+Modern regexp engines support so-called "possessive" quantifiers for that. They are like greedy, but don't backtrack at all. Pretty simple, they capture whatever they can, and the search continues. There's also another tool called "atomic groups" that forbid backtracking inside parentheses.
+
+Unfortunately, but both these features are not supported by JavaScript.
+
+Although we can get a similar affect using lookahead. There's more about the relation between possessive quantifiers and lookahead in articles [Regex: Emulate Atomic Grouping (and Possessive Quantifiers) with LookAhead](http://instanceof.me/post/52245507631/regex-emulate-atomic-grouping-with-lookahead) and [Mimicking Atomic Groups](http://blog.stevenlevithan.com/archives/mimic-atomic-groups).
+
+The pattern to take as much repetitions as possible without backtracking is: `pattern:(?=(a+))\1`.
+
+In other words, the lookahead `pattern:?=` looks for the maximal count `pattern:a+` from the current position. And then they are "consumed into the result" by the backreference `pattern:\1`.
+
+There will be no backtracking, because lookahead does not backtrack. If it found like 5 times of `pattern:a+` and the further match failed, then it doesn't go back to 4.
+
+Let's fix the regexp for a tag with attributes from the beginning of the chapter`pattern:<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>`. We'll use lookahead to prevent backtracking of `name=value` pairs:
+
+```js run
+// regexp to search name=value
+let attrReg = /(\s*\w+=(\w+|"[^"]*")\s*)/
+
+// use it inside the regexp for tag
+let reg = new RegExp('<\\w+(?=(' + attrReg.source + '*))\\1>', 'g');
+
+let good = '...<a test="<>" href="#">... <b>...';
+
+let bad = `<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b
+  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b`;
+
+alert( good.match(reg) ); // <a test="<>" href="#">, <b>
+alert( bad.match(reg) ); // null (no results, fast!)
+```
+
+Great, it works! We found a long tag  `match:<a test="<>" href="#">` and a small one `match:<b>` and didn't hang the engine.
+
+Please note the `attrReg.source` property. `RegExp` objects provide access to their source string in it. That's convenient when we want to insert one regexp into another.
diff --git a/5-regular-expressions/index.md b/5-regular-expressions/index.md
new file mode 100644
index 00000000..ac25aaa6
--- /dev/null
+++ b/5-regular-expressions/index.md
@@ -0,0 +1,3 @@
+# Regular expressions
+
+Regular expressions is a powerful way of doing search and replace in strings.
diff --git a/archive/widget-tasks/8-autocomplete/solution.md b/6-async/01-callbacks/01-animate-circle-callback/solution.md
similarity index 100%
rename from archive/widget-tasks/8-autocomplete/solution.md
rename to 6-async/01-callbacks/01-animate-circle-callback/solution.md
diff --git a/6-async/01-callbacks/01-animate-circle-callback/solution.view/index.html b/6-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
new file mode 100644
index 00000000..b2192681
--- /dev/null
+++ b/6-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .message-ball {
+      font-size: 20px;
+      line-height: 200px;
+      text-align: center;
+    }
+    .circle {
+      transition-property: width, height, margin-left, margin-top;
+      transition-duration: 2s;
+      position: fixed;
+      transform: translateX(-50%) translateY(-50%);
+      background-color: red;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <button onclick="go()">Click me</button>
+
+  <script>
+
+  function go() {
+    showCircle(150, 150, 100, div => {
+      div.classList.add('message-ball');
+      div.append("Hello, world!");
+    });
+  }
+
+  function showCircle(cx, cy, radius, callback) {
+    let div = document.createElement('div');
+    div.style.width = 0;
+    div.style.height = 0;
+    div.style.left = cx + 'px';
+    div.style.top = cy + 'px';
+    div.className = 'circle';
+    document.body.append(div);
+
+    setTimeout(() => {
+      div.style.width = radius * 2 + 'px';
+      div.style.height = radius * 2 + 'px';
+
+      div.addEventListener('transitionend', function handler() {
+        div.removeEventListener('transitionend', handler);
+        callback(div);
+      });
+    }, 0);
+  }
+  </script>
+
+
+</body>
+</html>
diff --git a/6-async/01-callbacks/01-animate-circle-callback/task.md b/6-async/01-callbacks/01-animate-circle-callback/task.md
new file mode 100644
index 00000000..4a20ca60
--- /dev/null
+++ b/6-async/01-callbacks/01-animate-circle-callback/task.md
@@ -0,0 +1,25 @@
+
+# Animated circle with callback
+
+In the task <info:task/animate-circle> an animated growing circle is shown.
+
+Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly.
+
+In the solution of the task, the function `showCircle(cx, cy, radius)` draws the circle, but gives no way to track when it's ready.
+
+Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle `<div>` as an argument.
+
+Here's the example:
+
+```js
+showCircle(150, 150, 100, div => {
+  div.classList.add('message-ball');
+  div.append("Hello, world!");
+});
+```
+
+Demo:
+
+[iframe src="solution" height=260]
+
+Take the solution of the task <info:task/animate-circle> as the base.
diff --git a/6-async/01-callbacks/article.md b/6-async/01-callbacks/article.md
new file mode 100644
index 00000000..9faa49a2
--- /dev/null
+++ b/6-async/01-callbacks/article.md
@@ -0,0 +1,270 @@
+
+
+# Introduction: callbacks
+
+Many actions in Javascript are *asynchronous*.
+
+For instance, take a look at the function `loadScript(src)`:
+
+```js
+function loadScript(src) {
+  let script = document.createElement('script');
+  script.src = src;
+  document.head.append(script);
+}
+```
+
+The purpose of the function is to load a new script. When it adds the `<script src="…">` to the document, the browser loads and executes it.
+
+We can use it like this:
+
+```js
+// loads and executes the script
+loadScript('/my/script.js');
+```
+
+The function is called "asynchronous", because the action (script loading) finishes not now, but later.
+
+The call initiates the script loading, then the execution continues. While the script is loading, the code below may finish executing, and if the loading takes time, other scripts may run meanwhile too.
+
+```js
+loadScript('/my/script.js');
+// the code below doesn't wait for the script loading to finish
+```
+
+Now let's say we want to use the new script when it loads. It probably declares new functions, so we'd like to run them.
+
+...But if we do that immediately after the `loadScript(…)` call, that wouldn't work:
+
+```js
+loadScript('/my/script.js'); // the script has "function newFunction() {…}"
+
+*!*
+newFunction(); // no such function!
+*/!*
+```
+
+Naturally, the browser probably didn't have time to load the script. As of now, `loadScript` function doesn't provide a way to track the load completion. The script loads and eventually runs, that's all. But we'd like to know when happens, to use new functions and variables from that script.
+
+Let's add a `callback` function as a second argument to `loadScript` that should execute when the script loads:
+
+```js
+function loadScript(src, *!*callback*/!*) {
+  let script = document.createElement('script');
+  script.src = src;
+
+*!*
+  script.onload = () => callback(script);
+*/!*
+
+  document.head.append(script);
+}
+```
+
+Now if we want to call new functions from the script, we should write that in the callback:
+
+```js
+loadScript('/my/script.js', function() {
+  // the callback runs after the script is loaded
+  newFunction(); // so now it works
+  ...
+});
+```
+
+That's the idea: the second argument is a function (usually anonymous) that runs when the action is completed.
+
+Here's a runnable example with a real script:
+
+```js run
+function loadScript(src, callback) {
+  let script = document.createElement('script');
+  script.src = src;
+  script.onload = () => callback(script);
+  document.head.append(script);
+}
+
+*!*
+loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
+  alert(`Cool, the ${script.src} is loaded`);
+  alert( _ ); // function declared in the loaded script
+});
+*/!*
+```
+
+That's called a "callback-based" style of asynchronous programming. A function that does something asynchronously should provide a `callback` argument where we put the function to run after it's complete.
+
+Here we did it in `loadScript`, but of course it's a general approach.
+
+## Callback in callback
+
+How to load two scripts sequentially: the first one, and then the second one after it?
+
+The natural solution would be to put the second `loadScript` call inside the callback, like this:
+
+```js
+loadScript('/my/script.js', function(script) {
+
+  alert(`Cool, the ${script.src} is loaded, let's load one more`);
+
+*!*
+  loadScript('/my/script2.js', function(script) {
+    alert(`Cool, the second script is loaded`);
+  });
+*/!*
+
+});
+```
+
+After the outer `loadScript` is complete, the callback initiates the inner one.
+
+...What if we want one more script?
+
+```js
+loadScript('/my/script.js', function(script) {
+
+  loadScript('/my/script2.js', function(script) {
+
+*!*
+    loadScript('/my/script3.js', function(script) {
+      // ...continue after all scripts are loaded
+    });
+*/!*
+
+  })
+
+});
+```
+
+So, every new action is inside a callback. That's fine for few actions, but not good for many, so we'll see other variants soon.
+
+## Handling errors
+
+In examples above we didn't consider errors. What if the script loading fails? Our callback should be able to react on that.
+
+Here's an improved version of `loadScript` that tracks loading errors:
+
+```js run
+function loadScript(src, callback) {
+  let script = document.createElement('script');
+  script.src = src;
+
+*!*
+  script.onload = () => callback(null, script);
+  script.onerror = () => callback(new Error(`Script load error ` + src));
+*/!*
+
+  document.head.append(script);
+}
+```
+
+It calls `callback(null, script)` for successful load and `callback(error)` otherwise.
+
+The usage:
+```js
+loadScript('/my/script.js', function(error, script) {
+  if (error) {
+    // handle error
+  } else {
+    // script loaded successfully
+  }
+});
+```
+
+Once again, the recipe that we used for `loadScript` is actually quite common. It's called the "error-first callback" style.
+
+The convention is:
+1. The first argument of `callback` is reserved for an error if it occurs. Then `callback(err)` is called.
+2. The second argument (and the next ones if needed) are for the successful result. Then `callback(null, result1, result2…)` is called.
+
+So the single `callback` function is used both for reporting errors and passing back results.
+
+## Pyramid of doom
+
+From the first look it's a viable way of asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
+
+But for multiple asynchronous actions that follow one after another we'll have a code like this:
+
+```js
+loadScript('1.js', function(error, script) {
+
+  if (error) {
+    handleError(error);
+  } else {
+    // ...
+    loadScript('2.js', function(error, script) {
+      if (error) {
+        handleError(error);
+      } else {
+        // ...
+        loadScript('3.js', function(error, script) {
+          if (error) {
+            handleError(error);
+          } else {
+  *!*
+            // ...continue after all scripts are loaded (*)
+  */!*
+          }
+        });
+
+      }
+    })
+  }
+});
+```
+
+In the code above:
+1. We load `1.js`, then if there's no error.
+2. We load `2.js`, then if there's no error.
+3. We load `3.js`, then if there's no error -- do something else `(*)`.
+
+As calls become more nested, the code becomes deeper and increasingly more difficult to manage, especially if we have a real code instead of `...`, that may include more loops, conditional statements and so on.
+
+That's sometimes called "callback hell" or "pyramid of doom".
+
+![](callback-hell.png)
+
+The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirales out of control.
+
+So this way of coding isn't very good.
+
+We can try to alleviate the problem by making every action a standalone function, like this:
+
+```js
+loadScript('1.js', step1);
+
+function step1(error, script) {
+  if (error) {
+    handleError(error);
+  } else {
+    // ...
+    loadScript('2.js', step2);
+  }
+}
+
+function step2(error, script) {
+  if (error) {
+    handleError(error);
+  } else {
+    // ...
+    loadScript('3.js', step3);
+  }
+}
+
+function step3(error, script) {
+  if (error) {
+    handleError(error);
+  } else {
+    // ...continue after all scripts are loaded (*)
+  }
+};
+```
+
+See? It does the same, and there's no deep nesting now, because we made every action a separate top-level function.
+
+It works, but the code looks like a torn apart spreadsheet. It's difficult to read, you probably noticed that. One needs to eye-jump between pieces while reading it. That's inconvenient, especially the reader is not familiar with the code and doesn't know where to eye-jump.
+
+Also the functions named `step*` are all of a single use, they are created only to evade the "pyramid of doom". No one is going to reuse them outside of the action chain. So there's a bit of a namespace cluttering here.
+
+We'd like to have a something better.
+
+Luckily, there are other ways to evade such pyramids. One of the best ways is to use "promises", described in the next chapter.
diff --git a/6-async/01-callbacks/callback-hell.png b/6-async/01-callbacks/callback-hell.png
new file mode 100644
index 00000000..f42224a2
Binary files /dev/null and b/6-async/01-callbacks/callback-hell.png differ
diff --git a/6-async/01-callbacks/callback-hell@2x.png b/6-async/01-callbacks/callback-hell@2x.png
new file mode 100644
index 00000000..7c9a3ab5
Binary files /dev/null and b/6-async/01-callbacks/callback-hell@2x.png differ
diff --git a/6-async/01-callbacks/one.js b/6-async/01-callbacks/one.js
new file mode 100644
index 00000000..948a60e0
--- /dev/null
+++ b/6-async/01-callbacks/one.js
@@ -0,0 +1,3 @@
+function one() {
+  alert(1);
+}
diff --git a/6-async/02-promise-basics/01-re-resolve/solution.md b/6-async/02-promise-basics/01-re-resolve/solution.md
new file mode 100644
index 00000000..57046a25
--- /dev/null
+++ b/6-async/02-promise-basics/01-re-resolve/solution.md
@@ -0,0 +1,3 @@
+The output is: `1`.
+
+The second call to `resolve` is ignored, because only the first call of `reject/resolve` is taken into account. Further calls are ignored.
diff --git a/6-async/02-promise-basics/01-re-resolve/task.md b/6-async/02-promise-basics/01-re-resolve/task.md
new file mode 100644
index 00000000..185806ed
--- /dev/null
+++ b/6-async/02-promise-basics/01-re-resolve/task.md
@@ -0,0 +1,15 @@
+
+# Re-resolve a promise?
+
+
+What's the output of the code below? 
+
+```js
+let promise = new Promise(function(resolve, reject) {
+  resolve(1);
+
+  setTimeout(() => resolve(2), 1000);
+});
+
+promise.then(alert);
+```
diff --git a/6-async/02-promise-basics/02-delay-promise/solution.md b/6-async/02-promise-basics/02-delay-promise/solution.md
new file mode 100644
index 00000000..85e8baa4
--- /dev/null
+++ b/6-async/02-promise-basics/02-delay-promise/solution.md
@@ -0,0 +1,9 @@
+```js run
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+delay(3000).then(() => alert('runs after 3 seconds'));
+```
+
+Please note that in this task `resolve` is called without arguments. We don't return any value from `delay`, just ensure the delay.
diff --git a/6-async/02-promise-basics/02-delay-promise/task.md b/6-async/02-promise-basics/02-delay-promise/task.md
new file mode 100644
index 00000000..0d74cf45
--- /dev/null
+++ b/6-async/02-promise-basics/02-delay-promise/task.md
@@ -0,0 +1,14 @@
+
+# Delay with a promise
+
+The built-in function `setTimeout` uses callbacks. Create a promise-based alternative.
+
+The function `delay(ms)` should return a promise. That promise should resolve after `ms` milliseconds, so that we can add `.then` to it, like this:
+
+```js
+function delay(ms) {
+  // your code
+}
+
+delay(3000).then(() => alert('runs after 3 seconds'));
+```
diff --git a/archive/widget-tasks/9-hover-menu-onclick/solution.md b/6-async/02-promise-basics/03-animate-circle-promise/solution.md
similarity index 100%
rename from archive/widget-tasks/9-hover-menu-onclick/solution.md
rename to 6-async/02-promise-basics/03-animate-circle-promise/solution.md
diff --git a/6-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html b/6-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
new file mode 100644
index 00000000..3229daf8
--- /dev/null
+++ b/6-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .message-ball {
+      font-size: 20px;
+      line-height: 200px;
+      text-align: center;
+    }
+    .circle {
+      transition-property: width, height, margin-left, margin-top;
+      transition-duration: 2s;
+      position: fixed;
+      transform: translateX(-50%) translateY(-50%);
+      background-color: red;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <button onclick="go()">Click me</button>
+
+  <script>
+
+  function go() {
+    showCircle(150, 150, 100).then(div => {
+      div.classList.add('message-ball');
+      div.append("Hello, world!");
+    });
+  }
+
+  function showCircle(cx, cy, radius) {
+    let div = document.createElement('div');
+    div.style.width = 0;
+    div.style.height = 0;
+    div.style.left = cx + 'px';
+    div.style.top = cy + 'px';
+    div.className = 'circle';
+    document.body.append(div);
+
+    return new Promise(resolve => {
+      setTimeout(() => {
+        div.style.width = radius * 2 + 'px';
+        div.style.height = radius * 2 + 'px';
+
+        div.addEventListener('transitionend', function handler() {
+          div.removeEventListener('transitionend', handler);
+          resolve(div);
+        });
+      }, 0);
+    })
+  }
+  </script>
+
+
+</body>
+</html>
diff --git a/6-async/02-promise-basics/03-animate-circle-promise/task.md b/6-async/02-promise-basics/03-animate-circle-promise/task.md
new file mode 100644
index 00000000..7860a71d
--- /dev/null
+++ b/6-async/02-promise-basics/03-animate-circle-promise/task.md
@@ -0,0 +1,15 @@
+
+# Animated circle with promise
+
+Rewrite the `showCircle` function in the solution of the task <info:task/animate-circle-callback> so that it returns a promise instead of accepting a callback.
+
+The new usage:
+
+```js
+showCircle(150, 150, 100).then(div => {
+  div.classList.add('message-ball');
+  div.append("Hello, world!");
+});
+```
+
+Take the solution of the task <info:task/animate-circle-callback> as the base.
diff --git a/6-async/02-promise-basics/article.md b/6-async/02-promise-basics/article.md
new file mode 100644
index 00000000..6bf1d67b
--- /dev/null
+++ b/6-async/02-promise-basics/article.md
@@ -0,0 +1,290 @@
+# Promise
+
+Imagine that you're a top singer, and fans ask for your next upcoming single day and night.
+
+To get a relief, you promise to send it to them when it's published. You give your fans a list. They can fill in their coordinates, so that when the song becomes available, all subscribed parties instantly get it. And if something goes very wrong, so that the song won't be published ever, then they are also to be notified.
+
+Everyone is happy: you, because the people don't crowd you any more, and fans, because they won't miss the single.
+
+That was a real-life analogy for things we often have in programming:
+
+1. A "producing code" that does something and needs time. For instance, it loads a remote script. That's a "singer".
+2. A "consuming code" wants the result when it's ready. Many functions may need that result. These are  "fans".
+3. A *promise* is a special JavaScript object that links them together. That's a "list". The producing code creates it and gives to everyone, so that they can subscribe for the result.
+
+The analogy isn't very accurate, because JavaScript promises are more complex than a simple list: they have additional features and limitations. But still they are alike.
+
+The constructor syntax for a promise object is:
+
+```js
+let promise = new Promise(function(resolve, reject) {
+  // executor (the producing code, "singer")
+});
+```
+
+The function passed to `new Promise` is called *executor*. When the promise is created, it's called automatically. It contains the producing code, that should eventually finish with a result. In terms of the analogy above, the executor is a "singer".
+
+The resulting `promise` object has internal properties:
+
+- `state` -- initially is "pending", then changes to "fulfilled" or "rejected",
+- `result` -- an arbitrary value, initially `undefined`.
+
+When the executor finishes the job, it should call one of:
+
+- `resolve(value)` -- to indicate that the job finished successfully:
+    - sets `state` to `"fulfilled"`,
+    - sets `result` to `value`.
+- `reject(error)` -- to indicate that an error occured:
+    - sets `state` to `"rejected"`,
+    - sets `result` to `error`.
+
+![](promise-resolve-reject.png)
+
+Here's a simple executor, to gather that all together:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  // the function is executed automatically when the promise is constructed
+
+  alert(resolve); // function () { [native code] }
+  alert(reject);  // function () { [native code] }
+
+  // after 1 second signal that the job is done with the result "done!"
+  setTimeout(() => *!*resolve("done!")*/!*, 1000);
+});
+```
+
+We can see two things by running the code above:
+
+1. The executor is called automatically and immediately (by `new Promise`).
+2. The executor receives two arguments: `resolve` and `reject` -- these functions come from JavaScript engine. We don't need to create them. Instead the executor should call them when ready.
+
+After one second of thinking the executor calls `resolve("done")` to produce the result:
+
+![](promise-resolve-1.png)
+
+That was an example of the "successful job completion".
+
+And now an example where the executor rejects promise with an error:
+
+```js
+let promise = new Promise(function(resolve, reject) {
+  // after 1 second signal that the job is finished with an error
+  setTimeout(() => *!*reject(new Error("Whoops!"))*/!*, 1000);
+});
+```
+
+![](promise-reject-1.png)
+
+To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding promise object.
+
+The promise that is either resolved or rejected is called "settled", as opposed to a "pending" promise.
+
+````smart header="There can be only one result or an error"
+The executor should call only one `resolve` or `reject`. The promise state change is final.
+
+All further calls of `resolve` and `reject` are ignored:
+
+```js
+let promise = new Promise(function(resolve, reject) {
+  resolve("done");
+
+  reject(new Error("…")); // ignored
+  setTimeout(() => resolve("…")); // ignored
+});
+```
+
+The idea is that a job done by the executor may have only one result or an error. In programming, there exist other data structures that allow many "flowing" results, for instance streams and queues. They have their own advantages and disadvantages versus promises. They are not supported by JavaScript core and lack certain language features that promises provide, we don't cover them here to concentrate on promises.
+
+Also we if we call `resolve/reject` with more then one argument -- only the first argument is used, the next ones are ignored.
+````
+
+```smart header="Reject with `Error` objects"
+Technically we can call `reject` (just like `resolve`) with any type of argument. But it's recommended to use `Error` objects in `reject` (or inherit from them). The reasoning for that will become obvious soon.
+```
+
+````smart header="Resolve/reject can be immediate"
+In practice an executor usually does something asynchronously and calls `resolve/reject` after some time, but it doesn't have to. We can call `resolve` or `reject` immediately, like this:
+
+```js
+let promise = new Promise(function(resolve, reject) {
+  resolve(123); // immediately give the result: 123
+});
+```
+
+For instance, it happens when we start to do a job and then see that everything has already been done. Technically that's fine: we have a resolved promise right now.
+````
+
+```smart header="The `state` and `result` are internal"
+Properties `state` and `result` of a promise object are internal. We can't directly access them from our code, but we can use methods `.then/catch` for that, they are described below.
+```
+
+## Consumers: ".then" and ".catch"
+
+A promise object serves as a link between the producing code (executor) and the consuming functions -- those that want to receive the result/error. Consuming functions can be registered using methods `promise.then` and `promise.catch`.
+
+
+The syntax of `.then` is:
+
+```js
+promise.then(
+  function(result) { /* handle a sucessful result */ },
+  function(error) { /* handle an error */ }
+);
+```
+
+The first function argument runs when the promise is resolved and gets the result, and the second one -- when it's rejected and gets the error.
+
+For instance:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  setTimeout(() => resolve("done!"), 1000);
+});
+
+// resolve runs the first function in .then
+promise.then(
+*!*
+  result => alert(result), // shows "done!" after 1 second
+*/!*
+  error => alert(error) // doesn't run
+);
+```
+
+In case of a rejection:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  setTimeout(() => reject(new Error("Whoops!")), 1000);
+});
+
+// reject runs the second function in .then
+promise.then(
+  result => alert(result), // doesn't run
+*!*
+  error => alert(error) // shows "Error: Whoops!" after 1 second
+*/!*
+);
+```
+
+If we're interested only in successful completions, then we can provide only one argument to `.then`:
+
+```js run
+let promise = new Promise(resolve => {
+  setTimeout(() => resolve("done!"), 1000);
+});
+
+*!*
+promise.then(alert); // shows "done!" after 1 second
+*/!*
+```
+
+If we're interested only in errors, then we can use `.then(null, function)` or an "alias" to it: `.catch(function)`
+
+
+```js run
+let promise = new Promise((resolve, reject) => {
+  setTimeout(() => reject(new Error("Whoops!")), 1000);
+});
+
+*!*
+// .catch(f) is the same as promise.then(null, f)
+promise.catch(alert); // shows "Error: Whoops!" after 1 second
+*/!*
+```
+
+The call `.catch(f)` is a complete analog of `.then(null, f)`, it's just a shorthand.
+
+````smart header="On settled promises `then` runs immediately"
+If a promise is pending, `.then/catch` handlers wait for the result. Otherwise, if a promise has already settled, they execute immediately:
+
+```js run
+// an immediately resolved promise
+let promise = new Promise(resolve => resolve("done!"));
+
+promise.then(alert); // done! (shows up right now)
+```
+
+That's handy for jobs that may sometimes require time and sometimes finish immediately. The handler is guaranteed to run in both cases.
+````
+
+````smart header="Handlers of `.then/catch` are always asynchronous"
+To be even more precise, when `.then/catch` handler should execute, it first gets into an internal queue. The JavaScript engine takes handlers from the queue and executes when the current code finishes, similar to `setTimeout(..., 0)`.
+
+In other words, when `.then(handler)` is going to trigger, it does something like `setTimeout(handler, 0)` instead.
+
+In the example below the promise is immediately resolved, so `.then(alert)` triggers right now: the `alert` call is queued and runs immediately after the code finishes.
+
+```js run
+// an immediately resolved promise
+let promise = new Promise(resolve => resolve("done!"));
+
+promise.then(alert); // done! (right after the current code finishes)
+
+alert("code finished"); // this alert shows first
+```
+
+So the code after `.then` always executes before the handler (even in the case of a pre-resolved promise). Usually that's unimportant, in some scenarios may matter.
+````
+
+Now let's see more practical examples how promises can help us in writing asynchronous code.
+
+## Example: loadScript
+
+We've got the `loadScript` function for loading a script from the previous chapter.
+
+Here's the callback-based variant, just to remind it:
+
+```js
+function loadScript(src, callback) {
+  let script = document.createElement('script');
+  script.src = src;
+
+  script.onload = () => callback(null, script);
+  script.onerror = () => callback(new Error(`Script load error ` + src));
+
+  document.head.append(script);
+}
+```
+
+Let's rewrite it using promises.
+
+The new function `loadScript` will not require a callback. Instead it will create and return a promise object that settles when the loading is complete. The outer code can add handlers to it using `.then`:
+
+```js run
+function loadScript(src) {  
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+```
+
+Usage:
+
+```js run
+let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");
+
+promise.then(
+  script => alert(`${script.src} is loaded!`),
+  error => alert(`Error: ${error.message}`)
+);
+
+promise.then(script => alert('One more handler to do something else!'));
+```
+
+We can immediately see few benefits over the callback-based syntax:
+
+```compare minus="Callbacks" plus="Promises"
+- We must have a ready `callback` function when calling `loadScript`. In other words, we must know what to do with the result *before* `loadScript` is called.
+- There can be only one callback.
++ Promises allow us to code things in the natural order. First we run `loadScript`, and `.then` write what to do with the result.
++ We can call `.then` on a promise as many times as we want, at any time later.
+```
+
+So promises already give us better code flow and flexibility. But there's more. We'll see that in the next chapters.
diff --git a/6-async/02-promise-basics/head.html b/6-async/02-promise-basics/head.html
new file mode 100644
index 00000000..8dd44050
--- /dev/null
+++ b/6-async/02-promise-basics/head.html
@@ -0,0 +1,13 @@
+<script>
+function loadScript(src) {
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+</script>
diff --git a/6-async/02-promise-basics/promise-init.png b/6-async/02-promise-basics/promise-init.png
new file mode 100644
index 00000000..c54ce05f
Binary files /dev/null and b/6-async/02-promise-basics/promise-init.png differ
diff --git a/6-async/02-promise-basics/promise-init@2x.png b/6-async/02-promise-basics/promise-init@2x.png
new file mode 100644
index 00000000..82f0d713
Binary files /dev/null and b/6-async/02-promise-basics/promise-init@2x.png differ
diff --git a/6-async/02-promise-basics/promise-reject-1.png b/6-async/02-promise-basics/promise-reject-1.png
new file mode 100644
index 00000000..38f27c73
Binary files /dev/null and b/6-async/02-promise-basics/promise-reject-1.png differ
diff --git a/6-async/02-promise-basics/promise-reject-1@2x.png b/6-async/02-promise-basics/promise-reject-1@2x.png
new file mode 100644
index 00000000..f9b748ff
Binary files /dev/null and b/6-async/02-promise-basics/promise-reject-1@2x.png differ
diff --git a/6-async/02-promise-basics/promise-resolve-1.png b/6-async/02-promise-basics/promise-resolve-1.png
new file mode 100644
index 00000000..0dfe7bad
Binary files /dev/null and b/6-async/02-promise-basics/promise-resolve-1.png differ
diff --git a/6-async/02-promise-basics/promise-resolve-1@2x.png b/6-async/02-promise-basics/promise-resolve-1@2x.png
new file mode 100644
index 00000000..269b8f29
Binary files /dev/null and b/6-async/02-promise-basics/promise-resolve-1@2x.png differ
diff --git a/6-async/02-promise-basics/promise-resolve-reject.png b/6-async/02-promise-basics/promise-resolve-reject.png
new file mode 100644
index 00000000..505726ef
Binary files /dev/null and b/6-async/02-promise-basics/promise-resolve-reject.png differ
diff --git a/6-async/02-promise-basics/promise-resolve-reject@2x.png b/6-async/02-promise-basics/promise-resolve-reject@2x.png
new file mode 100644
index 00000000..31128dbe
Binary files /dev/null and b/6-async/02-promise-basics/promise-resolve-reject@2x.png differ
diff --git a/6-async/03-promise-chaining/01-then-vs-catch/solution.md b/6-async/03-promise-chaining/01-then-vs-catch/solution.md
new file mode 100644
index 00000000..5a00f348
--- /dev/null
+++ b/6-async/03-promise-chaining/01-then-vs-catch/solution.md
@@ -0,0 +1,20 @@
+The short answer is: **no, they are not the equal**:
+
+The difference is that if an error happens in `f1`, then it is handled by `.catch` here:
+
+```js run
+promise
+  .then(f1)
+  .catch(f2);
+```
+
+...But not here:
+
+```js run
+promise
+  .then(f1, f2);
+```
+
+That's because an error is passed down the chain, and in the second code piece there's no chain below `f1`.
+
+In other words, `.then` passes results/errors to the next `.then/catch`. So in the first example, there's a `catch` below, and in the second one -- there isn't, so the error is unhandled.
diff --git a/6-async/03-promise-chaining/01-then-vs-catch/task.md b/6-async/03-promise-chaining/01-then-vs-catch/task.md
new file mode 100644
index 00000000..51c08d7c
--- /dev/null
+++ b/6-async/03-promise-chaining/01-then-vs-catch/task.md
@@ -0,0 +1,12 @@
+# Promise: then versus catch
+
+Are these code fragments equal? In other words, do they behave the same way in any circumstances, for any handler functions?
+
+```js
+promise.then(f1, f2);
+```
+
+Versus;
+```js
+promise.then(f1).catch(f2);
+```
diff --git a/6-async/03-promise-chaining/02-error-async/solution.md b/6-async/03-promise-chaining/02-error-async/solution.md
new file mode 100644
index 00000000..0d43f55e
--- /dev/null
+++ b/6-async/03-promise-chaining/02-error-async/solution.md
@@ -0,0 +1,13 @@
+The answer is: **no, it won't**:
+
+```js run
+new Promise(function(resolve, reject) {
+  setTimeout(() => {
+    throw new Error("Whoops!");
+  }, 1000);
+}).catch(alert);
+```
+
+As said in the chapter, there's an "implicit `try..catch`" around the function code. So all synchronous errors are handled.
+
+But here the error is generated not while the executor is running, but later. So the promise can't handle it. 
diff --git a/6-async/03-promise-chaining/02-error-async/task.md b/6-async/03-promise-chaining/02-error-async/task.md
new file mode 100644
index 00000000..f3fdf62b
--- /dev/null
+++ b/6-async/03-promise-chaining/02-error-async/task.md
@@ -0,0 +1,11 @@
+# Error in setTimeout
+
+How do you think, does the `.catch` trigger? Explain your answer?
+
+```js
+new Promise(function(resolve, reject) {
+  setTimeout(() => {
+    throw new Error("Whoops!");
+  }, 1000);
+}).catch(alert);
+```
diff --git a/6-async/03-promise-chaining/article.md b/6-async/03-promise-chaining/article.md
new file mode 100644
index 00000000..229a6309
--- /dev/null
+++ b/6-async/03-promise-chaining/article.md
@@ -0,0 +1,685 @@
+
+# Promises chaining
+
+Let's return to the problem mentioned in the chapter <info:callbacks>:
+
+- We have a sequence of asynchronous tasks to be done one after another. For instance, loading scripts.
+- How to code it well?
+
+Promises provide a couple of recipes to do that.
+
+[cut]
+
+In this chapter we cover promise chaining.
+
+It looks like this:
+
+```js run
+new Promise(function(resolve, reject) {
+
+  setTimeout(() => resolve(1), 1000); // (*)
+
+}).then(function(result) { // (**)
+
+  alert(result); // 1
+  return result * 2;
+
+}).then(function(result) { // (***)
+
+  alert(result); // 2
+  return result * 2;
+
+}).then(function(result) {
+
+  alert(result); // 4
+  return result * 2;
+
+});
+```
+
+The idea is that the result is passed through the chain of `.then` handlers.
+
+Here the flow is:
+1. The initial promise resolves in 1 second `(*)`,
+2. Then the `.this` handler is called `(**)`.
+3. The value that it returns is passed to the next `.this` handler `(***)`
+4. ...and so on.
+
+As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`.
+
+![](promise-then-chain.png)
+
+The whole thing works, because a call to `promise.then` returns a promise, so that we can call next `.then` on it.
+
+When a handler returns a value, it becomes the result of that promise, so the next `.then` is called with it.
+
+To make these words more clear, here's the start of the chain:
+
+```js run
+new Promise(function(resolve, reject) {
+
+  setTimeout(() => resolve(1), 1000);
+
+}).then(function(result) {
+
+  alert(result);
+  return result * 2; // <-- (1)
+
+}) // <-- (2)
+// .then…
+```
+
+The value returned by `.then` is a promise, that's why we are able to add another `.then` at `(2)`. When the value is returned in `(1)`, that promise becomes resolved, so the next handler runs with the value.
+
+Unlike the chaining, technically we can also add many `.then` to a single promise, like this:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  setTimeout(() => resolve(1), 1000);
+});
+
+promise.then(function(result) {
+  alert(result); // 1
+  return result * 2;
+});
+
+promise.then(function(result) {
+  alert(result); // 1
+  return result * 2;
+});
+
+promise.then(function(result) {
+  alert(result); // 1
+  return result * 2;
+});
+```
+
+...But that's a totally different thing. Here's the picture (compare it with the chaining above):
+
+![](promise-then-many.png)
+
+All `.then` on the same promise get the same result -- the result of that promise. So in the code above all `alert` show the same: `1`. There is no result-passing between them.
+
+In practice we rarely need multiple handlers for one promise. Chaining is used much more often.
+
+## Returning promises
+
+Normally, a value returned by a `.then` handler is immediately passed to the next handler. But there's an exception.
+
+If the returned value is a promise, then the further execution is suspended until it settles. After that, the result of that promise is given to the next `.then` handler.
+
+For instance:
+
+```js run
+new Promise(function(resolve, reject) {
+
+  setTimeout(() => resolve(1), 1000);
+
+}).then(function(result) {
+
+  alert(result); // 1
+
+*!*
+  return new Promise((resolve, reject) => { // (*)
+    setTimeout(() => resolve(result * 2), 1000);
+  });
+*/!*
+
+}).then(function(result) { // (**)
+
+  alert(result); // 2
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(result * 2), 1000);
+  });
+
+}).then(function(result) {
+
+  alert(result); // 4
+
+});
+```
+
+Here the first `.then` shows `1` returns `new Promise(…)` in the line `(*)`. After one second it resolves, and the result (the argument of `resolve`, here it's `result*2`) is passed on to handler of the second `.then` in the line `(**)`. It shows `2` and does the same thing.
+
+So the output is again 1 -> 2 > 4, but now with 1 second delay between `alert` calls.
+
+Returning promises allows us to build chains of asynchronous actions.
+
+## Example: loadScript
+
+Let's use this feature with `loadScript` to load scripts one by one, in sequence:
+
+```js run
+loadScript("/article/promise-chaining/one.js")
+  .then(function(script) {
+    return loadScript("/article/promise-chaining/two.js");
+  })
+  .then(function(script) {
+    return loadScript("/article/promise-chaining/three.js");
+  })
+  .then(function(script) {
+    // use functions declared in scripts
+    // to show that they indeed loaded
+    one();
+    two();
+    three();
+  });
+```
+
+Here each `loadScript` call returns a promise, and the next `.then` runs when it resolves. Then it initiates the loading of the next script. So scripts are loaded one after another.
+
+We can add more asynchronous actions to the chain. Please note that code is still "flat", it grows down, not to the right. There are no signs of "pyramid of doom".
+
+Please note that technically it is also possible to write `.then` directly after each promise, without returning them, like this:
+
+```js run
+loadScript("/article/promise-chaining/one.js").then(function(script1) {
+  loadScript("/article/promise-chaining/two.js").then(function(script2) {
+    loadScript("/article/promise-chaining/three.js").then(function(script3) {
+      // this function has access to variables script1, script2 and script3
+      one();
+      two();
+      three();
+    });
+  });
+});
+```
+
+This code does the same: loads 3 scripts in sequence. But it "grows to the right". So we have the same problem as with callbacks. Use chaining (return promises from `.then`) to evade it.
+
+Sometimes it's ok to write `.then` directly, because the nested function has access to the outer scope (here the most nested callback has access to all variables `scriptX`), but that's an exception rather than a rule.
+
+
+````smart header="Thenables"
+To be precise, `.then` may return an arbitrary "thenable" object, and it will be treated the same way as a promise.
+
+A "thenable" object is any object with a method `.then`.
+
+The idea is that 3rd-party libraries may implement "promise-compatible" objects of their own. They can have extended set of methods, but also be compatible with native promises, because they implement `.then`.
+
+Here's an example of a thenable object:
+
+```js run
+class Thenable {
+  constructor(num) {
+    this.num = num;
+  }
+  then(resolve, reject) {
+    alert(resolve); // function() { native code }
+    // resolve with this.num*2 after the 1 secound
+    setTimeout(() => resolve(this.num * 2), 1000); // (**)
+  }
+}
+
+new Promise(resolve => resolve(1))
+  .then(result => {
+    return new Thenable(result); // (*)
+  })
+  .then(alert); // shows 2 after 1000ms
+```
+
+JavaScript checks the object returned by `.then` handler in the line `(*)`: if it has a callable method named `then`, then it calls that method providing native functions `resolve`, `reject` as arguments (similar to executor) and waits until one of them is called. In the example above `resolve(2)` is called after 1 second `(**)`. Then the result is passed further down the chain.
+
+This feature allows to integrate custom objects with promise chains without having to inherit from `Promise`.
+````
+
+
+## Bigger example: fetch
+
+In frontend programming promises are often used for network requests. So let's see an extended example of that.
+
+We'll use the [fetch](mdn:api/WindowOrWorkerGlobalScope/fetch) method to load the information about the user from the remote server. The method is quite complex, it has many optional parameters, but the basic usage is quite simple:
+
+```js
+let promise = fetch(url);
+```
+
+This makes a network request to the `url` and returns a promise. The promise resolves with a `response` object when the remote server responds with headers, but *before the full response is downloaded*.
+
+To read the full response, we should call a method `response.text()`: it returns a promise that resolves  when the full text downloaded from the remote server, with that text as a result.
+
+The code below makes a request to `user.json` and loads its text from the server:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+  // .then below runs when the remote server responds
+  .then(function(response) {
+    // response.text() returns a new promise that resolves with the full response text
+    // when we finish downloading it
+    return response.text();
+  })
+  .then(function(text) {
+    // ...and here's the content of the remote file
+    alert(text); // {"name": "iliakan", isAdmin: true}
+  });
+```
+
+There is also a method `response.json()` that reads the remote data and parses it as JSON. In our case that's even more convenient, so let's switch to it.
+
+We'll also use arrow functions for brevity:
+
+```js run
+// same as above, but response.json() parses the remote content as JSON
+fetch('/article/promise-chaining/user.json')
+  .then(response => response.json())
+  .then(user => alert(user.name)); // iliakan
+```
+
+Now let's do something with the loaded user.
+
+For instance, we can make one more request to github, load the user profile and show the avatar:
+
+```js run
+// Make a request for user.json
+fetch('/article/promise-chaining/user.json')
+  // Load it as json
+  .then(response => response.json())
+  // Make a request to github
+  .then(user => fetch(`https://api.github.com/users/${user.name}`))
+  // Load the response as json
+  .then(response => response.json())
+  // Show the avatar image (githubUser.avatar_url) for 3 seconds (maybe animate it)
+  .then(githubUser => {
+    let img = document.createElement('img');
+    img.src = githubUser.avatar_url;
+    img.className = "promise-avatar-example";
+    document.body.append(img);
+
+    setTimeout(() => img.remove(), 3000); // (*)
+  });
+```
+
+The code works, see comments about the details, but it should be quite self-descriptive. Although, there's a potential problem in it, a typical error of those who begin to use promises.
+
+Look at the line `(*)`: how can we do something *after* the avatar has finished showing and gets removed? For instance, we'd like to show a form for editing that user or something else. As of now, there's no way.
+
+To make the chain extendable, we need to return a promise that resolves when the avatar finishes showing.
+
+Like this:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+  .then(response => response.json())
+  .then(user => fetch(`https://api.github.com/users/${user.name}`))
+  .then(response => response.json())
+*!*
+  .then(githubUser => new Promise(function(resolve, reject) {
+*/!*
+    let img = document.createElement('img');
+    img.src = githubUser.avatar_url;
+    img.className = "promise-avatar-example";
+    document.body.append(img);
+
+    setTimeout(() => {
+      img.remove();
+*!*
+      resolve(githubUser);
+*/!*
+    }, 3000);
+  }))
+  // triggers after 3 seconds
+  .then(githubUser => alert(`Finished showing ${githubUser.name}`));
+```
+
+Now right after `setTimeout` runs `img.remove()`, it calls `resolve(githubUser)`, thus passing the control to the next `.then` in the chain and passing forward the user data.
+
+As a rule, an asynchronous action should always return a promise.
+
+That makes possible to plan actions after it. Even if we don't plan to extend the chain now, we may need it later.
+
+Finally, we can split the code into reusable functions:
+
+```js run
+function loadJson(url) {
+  return fetch(url)
+    .then(response => response.json());
+}
+
+function loadGithubUser(name) {
+  return fetch(`https://api.github.com/users/${name}`)
+    .then(response => response.json());
+}
+
+function showAvatar(githubUser) {
+  return new Promise(function(resolve, reject) {
+    let img = document.createElement('img');
+    img.src = githubUser.avatar_url;
+    img.className = "promise-avatar-example";
+    document.body.append(img);
+
+    setTimeout(() => {
+      img.remove();
+      resolve(githubUser);
+    }, 3000);
+  });
+}
+
+// Use them:
+loadJson('/article/promise-chaining/user.json')
+  .then(user => loadGithubUser(user.name))
+  .then(showAvatar)
+  .then(githubUser => alert(`Finished showing ${githubUser.name}`));
+  // ...
+```
+
+## Error handling
+
+Asynchronous actions may sometimes fail: in case of an error the corresponding promises becomes rejected. For instance, `fetch` fails if the remote server is not available. We can use `.catch` to handle errors (rejections).
+
+Promise chaining is great at that aspect. When a promise rejects, the control jumps to the closest rejection handler down the chain. That's very convenient in practice.
+
+For instance, in the code below the URL is wrong (no such server) and `.catch` handles the error:
+
+```js run
+*!*
+fetch('https://no-such-server.blabla') // rejects
+*/!*
+  .then(response => response.json())
+  .catch(err => alert(err)) // TypeError: failed to fetch (the text may vary)
+```
+
+Or, maybe, everything is all right with the server, but the response is not a valid JSON:
+
+```js run
+fetch('/') // fetch works fine now, the server responds successfully
+*!*
+  .then(response => response.json()) // rejects: the page is HTML, not a valid json
+*/!*
+  .catch(err => alert(err)) // SyntaxError: Unexpected token < in JSON at position 0
+```
+
+
+In the example below we append `.catch` to handle all errors in the avatar-loading-and-showing chain:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+  .then(response => response.json())
+  .then(user => fetch(`https://api.github.com/users/${user.name}`))
+  .then(response => response.json())
+  .then(githubUser => new Promise(function(resolve, reject) {
+    let img = document.createElement('img');
+    img.src = githubUser.avatar_url;
+    img.className = "promise-avatar-example";
+    document.body.append(img);
+
+    setTimeout(() => {
+      img.remove();
+      resolve(githubUser);
+    }, 3000);
+  }))
+  .catch(error => alert(error.message));
+```
+
+Here `.catch` doesn't trigger at all, because there are no errors. But if any of the promises above rejects, then it would execute.
+
+## Implicit try..catch
+
+The code of the executor and promise handlers has an "invisible `try..catch`" around it. If an error happens, it gets caught and treated as a rejection.
+
+For instance, this code:
+
+```js run
+new Promise(function(resolve, reject) {
+*!*
+  throw new Error("Whoops!");
+*/!*
+}).catch(alert); // Error: Whoops!
+```
+
+...Works the same way as this:
+
+```js run
+new Promise(function(resolve, reject) {
+*!*
+  reject(new Error("Whoops!"));
+*/!*  
+}).catch(alert); // Error: Whoops!
+```
+
+The "invisible `try..catch`" around the executor automatically catches the error and treats it as a rejection.
+
+That's so not only in the executor, but in handlers as well. If we `throw` inside `.then` handler, that means a rejected promise, so the control jumps to the nearest error handler.
+
+Here's an example:
+
+```js run
+new Promise(function(resolve, reject) {
+  resolve("ok");
+}).then(function(result) {
+*!*
+  throw new Error("Whoops!"); // rejects the promise
+*/!*
+}).catch(alert); // Error: Whoops!
+```
+
+That's so not only for `throw`, but for any errors, including programming errors as well:
+
+```js run
+new Promise(function(resolve, reject) {
+  resolve("ok");
+}).then(function(result) {
+*!*
+  blabla(); // no such function
+*/!*
+}).catch(alert); // ReferenceError: blabla is not defined
+```
+
+As a side effect, the final `.catch` not only catches explicit rejections, but also occasional errors in the handlers above.
+
+## Rethrowing
+
+As we already noticed, `.catch` behaves like `try..catch`. We may have as many `.then` as we want, and then use a single `.catch` at the end to handle errors in all of them.
+
+In a regular `try..catch` we can analyze the error and maybe rethrow it if can't handle. The same thing is possible for promises. If we `throw` inside `.catch`, then the control goes to the next closest error handler. And if we handle the error and finish normally, then it continues to the closest successful `.then` handler.
+
+In the example below the `.catch` successfully handles the error:
+```js run
+// the execution: catch -> then
+new Promise(function(resolve, reject) {
+
+  throw new Error("Whoops!");
+
+}).catch(function(error) {
+
+  alert("The error is handled, continue normally");
+
+}).then(() => alert("Next successful handler runs"));
+```
+
+Here the `.catch` block finishes normally. So the next successful handler is called. Or it could return something, that would be the same.
+
+...And here the `.catch` block analyzes the error and throws it again:
+
+```js run
+// the execution: catch -> catch -> then
+new Promise(function(resolve, reject) {
+
+  throw new Error("Whoops!");
+
+}).catch(function(error) { // (*)
+
+  if (error instanceof URIError) {
+    // handle it
+  } else {
+    alert("Can't handle such error");
+
+*!*
+    throw error; // throwing this or another error jumps to the next catch
+*/!*
+  }
+
+}).then(function() {
+  /* never runs here */
+}).catch(error => { // (**)
+
+  alert(`The unknown error has occured: ${error}`);
+  // don't return anything => execution goes the normal way
+
+});
+```
+
+The handler `(*)` catches the error and just can't handle it, because it's not `URIError`, so it throws it again. Then the execution jumps to the next `.catch` down the chain `(**)`.
+
+In the section below we'll see a practical example of rethrowing.
+
+## Fetch error handling example
+
+Let's improve error handling for the user-loading example.
+
+The promise returned by [fetch](mdn:api/WindowOrWorkerGlobalScope/fetch) rejects when it's impossible to make a request. For instance, a remote server is not available, or the URL is malformed. But if the remote server responds with error 404, or even error 500, then it's considered a valid response.
+
+What if the server returns a non-JSON page with error 500 in the line `(*)`? What if there's no such user, and github returns a page with error 404 at `(**)`?
+
+```js run
+fetch('no-such-user.json') // (*)
+  .then(response => response.json())
+  .then(user => fetch(`https://api.github.com/users/${user.name}`)) // (**)
+  .then(response => response.json())
+  .catch(alert); // SyntaxError: Unexpected token < in JSON at position 0
+  // ...
+```
+
+
+As of now, the code tries to load the response as JSON no matter what and dies with a syntax error. You can see that by running the example above, as the file `no-such-user.json` doesn't exist.
+
+That's not good, because the error just falls through the chain, without details: what failed and where.
+
+So let's add one more step: we should check the `response.status` property that has HTTP status, and if it's not 200, then throw an error.
+
+```js run
+class HttpError extends Error { // (1)
+  constructor(response) {
+    super(`${response.status} for ${response.url}`);
+    this.name = 'HttpError';
+    this.response = response;
+  }
+}
+
+function loadJson(url) { // (2)
+  return fetch(url)
+    .then(response => {
+      if (response.status == 200) {
+        return response.json();
+      } else {
+        throw new HttpError(response);
+      }
+    })
+}
+
+loadJson('no-such-user.json') // (3)
+  .catch(alert); // HttpError: 404 for .../no-such-user.json
+```
+
+1. We make a custom class for HTTP Errors to distinguish them from other types of errors. Besides, the new class has a constructor that accepts the `response` object and saves it in the error. So error-handling code will be able to access it.
+2. Then we put together the requesting and error-handling code into a function that fetches the `url` *and* treats any non-200 status as an error. That's convenient, because we often need such logic.
+3. Now `alert` shows better message.
+
+The great thing about having our own class for errors is that we can easily check for it in error-handling code.
+
+For instance, we can make a request, and then if we get 404 -- ask the user to modify the information.
+
+The code below loads a user with the given name from github. If there's no such user, then it asks for the correct name:
+
+```js run
+function demoGithubUser() {
+  let name = prompt("Enter a name?", "iliakan");
+
+  return loadJson(`https://api.github.com/users/${name}`)
+    .then(user => {
+      alert(`Full name: ${user.name}.`); // (1)
+      return user;
+    })
+    .catch(err => {
+*!*
+      if (err instanceof HttpError && err.response.status == 404) { // (2)
+*/!*
+        alert("No such user, please reenter.");
+        return demoGithubUser();
+      } else {
+        throw err;
+      }
+    });
+}
+
+demoGithubUser();
+```
+
+Here:
+
+1. If `loadJson` returns a valid user object, then the name is shown `(1)`, and the user is returned, so that we can add more user-related actions to the chain. In that case the `.catch` below is ignored, everything's very simple and fine.
+2. Otherwise, in case of an error, we check it in the line `(2)`. Only if it's indeed the HTTP error, and the status is 404 (Not found), we ask the user to reenter. For other errors -- we don't know how to handle, so we just rethrow them.
+
+## Unhandled rejections
+
+What happens when an error is not handled? For instance, after the rethrow as in the example above. Or if we forget to append an error handler to the end of the chain, like here:
+
+```js untrusted run refresh
+new Promise(function() {
+  noSuchFunction(); // Error here (no such function)
+});
+```
+
+Or here:
+
+```js untrusted run refresh
+new Promise(function() {
+  throw new Error("Whoops!");
+}).then(function() {
+  // ...something...
+}).then(function() {
+  // ...something else...
+}).then(function() {
+  // ...but no catch after it!
+});
+```
+
+In theory, nothing should happen. In case of an error happens, the promise state becomes "rejected", and the execution should jump to the closest rejection handler. But there is no such handler in the examples above. So the error gets "stuck".
+
+In practice, that means that the code is bad. Indeed, how come that there's no error handling?
+
+Most JavaScript engines track such situations and generate a global error in that case. We can see it in the console.
+
+In the browser we can catch it using the event `unhandledrejection`:
+
+```js run
+*!*
+window.addEventListener('unhandledrejection', function(event) {
+  // the event object has two special properties:
+  alert(event.promise); // [object Promise] - the promise that generated the error
+  alert(event.reason); // Error: Whoops! - the unhandled error object
+});
+*/!*
+
+new Promise(function() {
+  throw new Error("Whoops!");
+}); // no catch to handle the error
+```
+
+The event is the part of the [HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#unhandled-promise-rejections). Now if an error occurs, and there's no `.catch`, the `unhandledrejection` handler triggers: the `event` object has the information about the error, so we can do something with it.
+
+Usually such errors are unrecoverable, so our best way out is to inform the user about the problem and probably report about the incident to the server.
+
+In non-browser environments like Node.JS there are other similar ways to track unhandled errors.
+
+## Summary
+
+To summarize, `.then/catch(handler)` returns a new promise that changes depending on what handler does:
+
+1. If it returns a value or finishes without a `return` (same as `return undefined`), then the new promise becomes resolved, and the closest resolve handler (the first argument of `.then`) is called with that value.
+2. If it throws an error, then the new promise becomes rejected, and the closest rejection handler (second argument of `.then` or `.catch`) is called with it.
+3. If it returns a promise, then JavaScript waits until it settles and then acts on its outcome the same way.
+
+The picture of how the promise returned by `.then/catch` changes:
+
+![](promise-handler-variants.png)
+
+The smaller picture of how handlers are called:
+
+![](promise-handler-variants-2.png)
+
+In the examples of error handling above the `.catch` was always the last in the chain. In practice though, not every promise chain has a `.catch`. Just like regular code is not always wrapped in `try..catch`.
+
+We should place `.catch` exactly in the places where we want to handle errors and know how to handle them. Using custom error classes can help to analyze errors and rethrow those that we can't handle.
+
+For errors that fall outside of our scope we should have the `unhandledrejection` event handler (for browsers, and analogs for other environments). Such unknown errors are usually unrecoverable, so all we should do is to inform the user and probably report to our server about the incident.
diff --git a/6-async/03-promise-chaining/getMessage.js b/6-async/03-promise-chaining/getMessage.js
new file mode 100644
index 00000000..6c589343
--- /dev/null
+++ b/6-async/03-promise-chaining/getMessage.js
@@ -0,0 +1,3 @@
+function getMessage() {
+  return "Hello, world!";
+}
diff --git a/6-async/03-promise-chaining/head.html b/6-async/03-promise-chaining/head.html
new file mode 100644
index 00000000..31c6b427
--- /dev/null
+++ b/6-async/03-promise-chaining/head.html
@@ -0,0 +1,41 @@
+<script>
+function loadScript(src) {
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+
+class HttpError extends Error {
+  constructor(response) {
+    super(`${response.status} for ${response.url}`);
+    this.name = 'HttpError';
+    this.response = response;
+  }
+}
+
+function loadJson(url) {
+  return fetch(url)
+    .then(response => {
+      if (response.status == 200) {
+        return response.json();
+      } else {
+        throw new HttpError(response);
+      }
+    })
+}
+</script>
+
+<style>
+.promise-avatar-example {
+  border-radius: 50%;
+  position: fixed;
+  left: 10px;
+  top: 10px;
+}
+</style>
diff --git a/6-async/03-promise-chaining/one.js b/6-async/03-promise-chaining/one.js
new file mode 100644
index 00000000..948a60e0
--- /dev/null
+++ b/6-async/03-promise-chaining/one.js
@@ -0,0 +1,3 @@
+function one() {
+  alert(1);
+}
diff --git a/6-async/03-promise-chaining/promise-handler-variants-2.png b/6-async/03-promise-chaining/promise-handler-variants-2.png
new file mode 100644
index 00000000..1b4eff7a
Binary files /dev/null and b/6-async/03-promise-chaining/promise-handler-variants-2.png differ
diff --git a/6-async/03-promise-chaining/promise-handler-variants-2@2x.png b/6-async/03-promise-chaining/promise-handler-variants-2@2x.png
new file mode 100644
index 00000000..241733fb
Binary files /dev/null and b/6-async/03-promise-chaining/promise-handler-variants-2@2x.png differ
diff --git a/6-async/03-promise-chaining/promise-handler-variants.png b/6-async/03-promise-chaining/promise-handler-variants.png
new file mode 100644
index 00000000..541c18eb
Binary files /dev/null and b/6-async/03-promise-chaining/promise-handler-variants.png differ
diff --git a/6-async/03-promise-chaining/promise-handler-variants@2x.png b/6-async/03-promise-chaining/promise-handler-variants@2x.png
new file mode 100644
index 00000000..3a2f6b1d
Binary files /dev/null and b/6-async/03-promise-chaining/promise-handler-variants@2x.png differ
diff --git a/6-async/03-promise-chaining/promise-then-chain.png b/6-async/03-promise-chaining/promise-then-chain.png
new file mode 100644
index 00000000..7cd1baa9
Binary files /dev/null and b/6-async/03-promise-chaining/promise-then-chain.png differ
diff --git a/6-async/03-promise-chaining/promise-then-chain@2x.png b/6-async/03-promise-chaining/promise-then-chain@2x.png
new file mode 100644
index 00000000..3d981342
Binary files /dev/null and b/6-async/03-promise-chaining/promise-then-chain@2x.png differ
diff --git a/6-async/03-promise-chaining/promise-then-many.png b/6-async/03-promise-chaining/promise-then-many.png
new file mode 100644
index 00000000..199867f8
Binary files /dev/null and b/6-async/03-promise-chaining/promise-then-many.png differ
diff --git a/6-async/03-promise-chaining/promise-then-many@2x.png b/6-async/03-promise-chaining/promise-then-many@2x.png
new file mode 100644
index 00000000..2e7847eb
Binary files /dev/null and b/6-async/03-promise-chaining/promise-then-many@2x.png differ
diff --git a/6-async/03-promise-chaining/three.js b/6-async/03-promise-chaining/three.js
new file mode 100644
index 00000000..8536e85a
--- /dev/null
+++ b/6-async/03-promise-chaining/three.js
@@ -0,0 +1,3 @@
+function three() {
+  alert(3);
+}
diff --git a/6-async/03-promise-chaining/two.js b/6-async/03-promise-chaining/two.js
new file mode 100644
index 00000000..b04795b8
--- /dev/null
+++ b/6-async/03-promise-chaining/two.js
@@ -0,0 +1,3 @@
+function two() {
+  alert(2);
+}
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/user.json b/6-async/03-promise-chaining/user.json
similarity index 100%
rename from 1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/user.json
rename to 6-async/03-promise-chaining/user.json
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/solution.md b/6-async/04-promise-api/01-promise-errors-as-results/solution.md
new file mode 100644
index 00000000..a8646364
--- /dev/null
+++ b/6-async/04-promise-api/01-promise-errors-as-results/solution.md
@@ -0,0 +1,44 @@
+The solution is actually pretty simple.
+
+Take a look at this:
+
+```js
+Promise.all(
+  fetch('https://api.github.com/users/iliakan'),
+  fetch('https://api.github.com/users/remy'),
+  fetch('http://no-such-url')
+)
+```
+
+Here we have an array of `fetch(...)` promises that goes to `Promise.all`.
+
+We can't change the way `Promise.all` works: if it detects an error, then it rejects with it. So we need to prevent any error from occuring. Instead, if a `fetch` error happens, we need to treat it as a "normal" result.
+
+Here's how:
+
+```js
+Promise.all(
+  fetch('https://api.github.com/users/iliakan').catch(err => err),
+  fetch('https://api.github.com/users/remy').catch(err => err),
+  fetch('http://no-such-url').catch(err => err)
+)
+```
+
+In other words, the `.catch` takes an error for all of the promises and returns it normally. By the rules of how promises work, if a `.then/catch` handler returns a value (doesn't matter if it's an error object or something else), then the execution continues the "normal" flow.
+
+So the `.catch` returns the error as a "normal" result into the outer `Promise.all`.
+
+This code:
+```js
+Promise.all(
+  urls.map(url => fetch(url))
+)
+```
+
+Can be rewritten as:
+
+```js
+Promise.all(
+  urls.map(url => fetch(url).catch(err => err))
+)
+```
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/solution.view/index.html b/6-async/04-promise-api/01-promise-errors-as-results/solution.view/index.html
new file mode 100644
index 00000000..209e6064
--- /dev/null
+++ b/6-async/04-promise-api/01-promise-errors-as-results/solution.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <script>
+
+    let urls = [
+      'https://api.github.com/users/iliakan',
+      'https://api.github.com/users/remy',
+      'http://no-such-url'
+    ];
+
+    Promise.all(
+        urls.map(url => fetch(url).catch(err => err))
+      )
+      .then(responses => {  
+        alert(responses[0].status); // 200
+        alert(responses[1].status); // 200
+        alert(responses[2]); // TypeError: failed to fetch (text may vary)
+      });
+  </script>
+
+</body>
+</html>
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/source.view/index.html b/6-async/04-promise-api/01-promise-errors-as-results/source.view/index.html
new file mode 100644
index 00000000..241b09ad
--- /dev/null
+++ b/6-async/04-promise-api/01-promise-errors-as-results/source.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <script>
+
+    // if any of URLs fails, other results are ignored
+    // change that:
+    // make errors appear as members of the responses array, together with normal results
+
+    let urls = [
+      'https://api.github.com/users/iliakan',
+      'https://api.github.com/users/remy',
+      'http://no-such-url'
+    ];
+
+    // Fix me:
+    Promise.all(urls.map(url => fetch(url)))
+      // Demo output (no need to change):
+      .then(responses => {
+        alert(responses[0].status); // 200
+        alert(responses[1].status); // 200
+        alert(responses[2]); // TypeError: failed to fetch (text may vary)
+      ));
+  </script>
+
+</body>
+</html>
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/task.md b/6-async/04-promise-api/01-promise-errors-as-results/task.md
new file mode 100644
index 00000000..4d53cbc1
--- /dev/null
+++ b/6-async/04-promise-api/01-promise-errors-as-results/task.md
@@ -0,0 +1,48 @@
+# Fault-tolerant Promise.all
+
+We'd like to fetch multiple URLs in parallel.
+
+Here's the code to do that:
+
+```js run
+let urls = [
+  'https://api.github.com/users/iliakan',
+  'https://api.github.com/users/remy',
+  'https://api.github.com/users/jeresig'
+];
+
+Promise.all(urls.map(url => fetch(url)))
+  // for each response show its status
+  .then(responses => { // (*)
+    for(let response of responses) {
+      alert(`${response.url}: ${response.status}`);
+    }
+  ));
+```
+
+The problem is that if any of requests fails, then `Promise.all` rejects with the error, and we loose results of all the other requests.
+
+That's not good.
+
+Modify the code so that the array `responses` in the line `(*)` would include the response objects for successful fetches and error objects for failed ones.
+
+For instance, if one of URLs is bad, then it should be like:
+
+```js
+let urls = [
+  'https://api.github.com/users/iliakan',
+  'https://api.github.com/users/remy',
+  'http://no-such-url'
+];
+
+Promise.all(...) // your code to fetch URLs...
+  // ...and pass fetch errors as members of the resulting array...
+  .then(responses => {  
+    // 3 urls => 3 array members
+    alert(responses[0].status); // 200
+    alert(responses[1].status); // 200
+    alert(responses[2]); // TypeError: failed to fetch (text may vary)
+  });
+```
+
+P.S. In this task you don't have to load the full response using `response.text()` or `response.json()`. Just handle fetch errors the right way.
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/solution.md b/6-async/04-promise-api/02-promise-errors-as-results-2/solution.md
new file mode 100644
index 00000000..e69de29b
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/solution.view/index.html b/6-async/04-promise-api/02-promise-errors-as-results-2/solution.view/index.html
new file mode 100644
index 00000000..744efd2b
--- /dev/null
+++ b/6-async/04-promise-api/02-promise-errors-as-results-2/solution.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <script>
+
+    let urls = [
+      'https://api.github.com/users/iliakan',
+      '/',
+      'http://no-such-url'
+    ];
+
+    Promise.all(
+        urls.map(url => fetch(url).catch(err => err))
+      )
+      .then(responses => Promise.all(
+        // if it's an error then pass on
+        // otherwise response.json() and catch errors as results
+        responses.map(r => r instanceof Error ? r : r.json().catch(err => err))
+      ))
+      .then(results => {
+        alert(results[0].name); // Ilya Kantor
+        alert(results[1]); // SyntaxError: Unexpected token < in JSON at position 0
+        alert(results[2]); // TypeError: failed to fetch (text may vary)
+      });
+  </script>
+
+</body>
+</html>
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/source.view/index.html b/6-async/04-promise-api/02-promise-errors-as-results-2/source.view/index.html
new file mode 100644
index 00000000..adb86d41
--- /dev/null
+++ b/6-async/04-promise-api/02-promise-errors-as-results-2/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <script>
+
+    // the whole promise chain fails with an error here
+    // change that:
+    // make errors appear as members of the results array
+
+    let urls = [
+      'https://api.github.com/users/iliakan',
+      // this URL is HTML page, it's invalid JSON, so response.json() fails
+      '/',
+      // this URL is invalid, so fetch fails
+      'http://no-such-url'
+    ];
+
+    // Fix it:
+    Promise.all(urls.map(url => fetch(url)))
+      .then(responses => Promise.all(
+        responses.map(r => r.json())
+      ))
+      // Demo output (no need to change):
+      .then(results => {
+        alert(results[0].name); // Ilya Kantor
+        alert(results[1]); // SyntaxError: Unexpected token < in JSON at position 0
+        alert(results[2]); // TypeError: failed to fetch (text may vary)
+      });
+  </script>
+
+</body>
+</html>
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/task.md b/6-async/04-promise-api/02-promise-errors-as-results-2/task.md
new file mode 100644
index 00000000..ec28728b
--- /dev/null
+++ b/6-async/04-promise-api/02-promise-errors-as-results-2/task.md
@@ -0,0 +1,34 @@
+# Fault-tolerant fetch with JSON
+
+Improve the solution of the previous task <info:task/promise-errors-as-results>. Now we need not just to call `fetch`, but to load the JSON objects from given URLs.
+
+Here's the example code to do that:
+
+```js run
+let urls = [
+  'https://api.github.com/users/iliakan',
+  'https://api.github.com/users/remy',
+  'https://api.github.com/users/jeresig'
+];
+
+// make fetch requests
+Promise.all(urls.map(url => fetch(url)))
+  // map each response to response.json()
+  .then(responses => Promise.all(
+    responses.map(r => r.json())
+  ))
+  // show name of each user
+  .then(users => {  // (*)
+    for(let user of users) {
+      alert(user.name);
+    }
+  });
+```
+
+The problem is that if any of requests fails, then `Promise.all` rejects with the error, and we loose results of all the other requests. So the code above is not fault-tolerant, just like the one in the previous task.
+
+Modify the code so that the array in the line `(*)` would include parsed JSON for successful requests and error for errored ones.
+
+Please note that the error may occur both in `fetch` (if the network request fails) and in `response.json()` (if the response is invalid JSON). In both cases the error should become a member of the results object.
+
+The sandbox has both of these cases.
diff --git a/6-async/04-promise-api/article.md b/6-async/04-promise-api/article.md
new file mode 100644
index 00000000..7607a46d
--- /dev/null
+++ b/6-async/04-promise-api/article.md
@@ -0,0 +1,202 @@
+# Promise API
+
+There are 4 static methods in the `Promise` class. We'll quickly cover their use cases here.
+
+## Promise.resolve
+
+The syntax:
+
+```js
+let promise = Promise.resolve(value);
+```
+
+Returns a resolved promise with the given `value`.
+
+Same as:
+
+```js
+let promise = new Promise(resolve => resolve(value));
+```
+
+The method is used when we already have a value, but would like to have it "wrapped" into a promise.
+
+For instance, the `loadCached` function below fetches the `url` and remembers the result, so that future calls on the same URL return it immediately:
+
+```js
+function loadCached(url) {
+  let cache = loadCached.cache || (loadCached.cache = new Map());
+
+  if (cache.has(url)) {
+*!*
+    return Promise.resolve(cache.get(url)); // (*)
+*/!*
+  }
+
+  return fetch(url)
+    .then(response => response.text())
+    .then(text => {
+      cache[url] = text;
+      return text;
+    });
+}
+```
+
+We can use `loadCached(url).then(…)`, because the function is guaranteed to return a promise. That's the purpose `Promise.resolve` in the line `(*)`: it makes sure the interface unified. We can always use `.then` after `loadCached`.
+
+## Promise.reject
+
+The syntax:
+
+```js
+let promise = Promise.reject(error);
+```
+
+Create a rejected promise with the `error`.
+
+Same as:
+
+```js
+let promise = new Promise((resolve, reject) => reject(error));
+```
+
+We cover it here for completeness, rarely used in real code.
+
+## Promise.all
+
+The method to run many promises in parallel and wait till all of them are ready.
+
+The syntax is:
+
+```js
+let promise = Promise.all(iterable);
+```
+
+It takes an `iterable` object with promises, technically it can be any iterable, but usually it's an array, and returns a new promise. The new promise resolves with when all of them are settled and has an array of their results.
+
+For instance, the `Promise.all` below settles after 3 seconds, and then its result is an array `[1, 2, 3]`:
+
+```js run
+Promise.all([
+  new Promise((resolve, reject) => setTimeout(() => resolve(1), 3000)), // 1
+  new Promise((resolve, reject) => setTimeout(() => resolve(2), 2000)), // 2
+  new Promise((resolve, reject) => setTimeout(() => resolve(3), 1000))  // 3
+]).then(alert); // 1,2,3 when promises are ready: each promise contributes an array member
+```
+
+Please note that the relative order is the same. Even though the first promise takes the longest time to resolve, it is still first in the array of results.
+
+A common trick is to map an array of job data into an array of promises, and then wrap that into `Promise.all`.
+
+For instance, if we have an array of URLs, we can fetch them all like this:
+
+```js run
+let urls = [
+  'https://api.github.com/users/iliakan',
+  'https://api.github.com/users/remy',
+  'https://api.github.com/users/jeresig'
+];
+
+// map every url to the promise fetch(github url)
+let requests = urls.map(url => fetch(url));
+
+// Promise.all waits until all jobs are resolved
+Promise.all(requests)
+  .then(responses => responses.forEach(
+    response => alert(`${response.url}: ${response.status}`)
+  ));
+```
+
+A more real-life example with fetching user information for an array of github users by their names (or we could fetch an array of goods by their ids, the logic is same):
+
+```js run
+let names = ['iliakan', 'remy', 'jeresig'];
+
+let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));
+
+Promise.all(requests)
+  .then(responses => {
+    // all responses are ready, we can show HTTP status codes
+    for(let response of responses) {
+      alert(`${response.url}: ${response.status}`); // shows 200 for every url
+    }
+
+    return responses;
+  })
+  // map array of responses into array of response.json() to read their content
+  .then(responses => Promise.all(responses.map(r => r.json())))
+  // all JSON answers are parsed: "users" is the array of them
+  .then(users => users.forEach(user => alert(user.name)));
+```
+
+If any of the promises is rejected, `Promise.all` immediately rejects with that error.
+
+For instance:
+
+
+```js run
+Promise.all([
+  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
+*!*
+  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
+*/!*
+  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
+]).catch(alert); // Error: Whoops!
+```
+
+Here the second promise rejects in two seconds. That leads to immediate rejection of `Promise.all`, so `.catch` executes: the rejection error becomes the outcome of the whole `Promise.all`.
+
+The important detail is that promises provide no way to "cancel" or "abort" their execution. So other promises continue to execute, and the eventually settle, but all their results are ignored.
+
+There are ways to avoid this: we can either write additional code to `clearTimeout` (or otherwise cancel) the promises in case of an error, or we can make errors show up as members in the resulting array (see the task below this chapter about it).
+
+````smart header="`Promise.all(iterable)` allows non-promise items in `iterable`"
+Normally, `Promise.all(iterable)` accepts an iterable (in most cases an array) of promises. But if any of those objects is not a promise, it's wrapped in `Promise.resolve`.
+
+For instance, here the results are `[1, 2, 3]`:
+
+```js run
+Promise.all([
+  new Promise((resolve, reject) => {
+    setTimeout(() => resolve(1), 1000)
+  }),
+  2, // treated as Promise.resolve(2)
+  3  // treated as Promise.resolve(3)
+]).then(alert); // 1, 2, 3
+```
+
+So we are able to pass non-promise values to `Promise.all` where convenient.
+
+````
+
+## Promise.race
+
+Similar to `Promise.all` takes an iterable of promises, but instead of waiting for all of them to finish -- waits for the first result (or error), and goes on with it.
+
+The syntax is:
+
+```js
+let promise = Promise.race(iterable);
+```
+
+For instance, here the result will be `1`:
+
+```js run
+Promise.race([
+  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
+  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
+  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
+]).then(alert); // 1
+```
+
+So, the first result/error becomes the result of the whole `Promise.race`. After the first settled promise "wins the race", all further results/errors are ignored.
+
+## Summary
+
+There are 4 static methods of `Promise` class:
+
+1. `Promise.resolve(value)` -- makes a resolved promise with the given value,
+2. `Promise.reject(error)` -- makes a rejected promise with the given error,
+3. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, then it becomes the error of `Promise.all`, and all other results are ignored.
+4. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome.
+
+Of these four, `Promise.all` is the most common in practice.
diff --git a/6-async/04-promise-api/head.html b/6-async/04-promise-api/head.html
new file mode 100644
index 00000000..8dd44050
--- /dev/null
+++ b/6-async/04-promise-api/head.html
@@ -0,0 +1,13 @@
+<script>
+function loadScript(src) {
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+</script>
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/source.view/user.json b/6-async/04-promise-api/iliakan.json
similarity index 100%
rename from 1-js/10-es-modern/11-promise/2-promise-sequence/source.view/user.json
rename to 6-async/04-promise-api/iliakan.json
diff --git a/6-async/04-promise-api/one.js b/6-async/04-promise-api/one.js
new file mode 100644
index 00000000..948a60e0
--- /dev/null
+++ b/6-async/04-promise-api/one.js
@@ -0,0 +1,3 @@
+function one() {
+  alert(1);
+}
diff --git a/6-async/04-promise-api/two.js b/6-async/04-promise-api/two.js
new file mode 100644
index 00000000..b04795b8
--- /dev/null
+++ b/6-async/04-promise-api/two.js
@@ -0,0 +1,3 @@
+function two() {
+  alert(2);
+}
diff --git a/6-async/05-async-await/01-rewrite-async-2/solution.md b/6-async/05-async-await/01-rewrite-async-2/solution.md
new file mode 100644
index 00000000..10594883
--- /dev/null
+++ b/6-async/05-async-await/01-rewrite-async-2/solution.md
@@ -0,0 +1,49 @@
+
+There are no tricks here. Just replace `.catch` with `try...catch` inside `demoGithubUser` and add `async/await` where needed:
+
+```js run
+class HttpError extends Error {
+  constructor(response) {
+    super(`${response.status} for ${response.url}`);
+    this.name = 'HttpError';
+    this.response = response;
+  }
+}
+
+async function loadJson(url) {
+  let response = await fetch(url);
+  if (response.status == 200) {
+    return response.json();
+  } else {
+    throw new HttpError(response);
+  }
+}
+
+// Ask for a user name until github returns a valid user
+async function demoGithubUser() {
+
+  let user;
+  while(true) {
+    let name = prompt("Enter a name?", "iliakan");
+
+    try {
+      user = await loadJson(`https://api.github.com/users/${name}`);
+      break; // no error, exit loop
+    } catch(err) {
+      if (err instanceof HttpError && err.response.status == 404) {
+        // loop continues after the alert
+        alert("No such user, please reenter.");
+      } else {
+        // unknown error, rethrow
+        throw err;
+      }
+    }      
+  }
+
+
+  alert(`Full name: ${user.name}.`);
+  return user;
+}
+
+demoGithubUser();
+```
diff --git a/6-async/05-async-await/01-rewrite-async-2/task.md b/6-async/05-async-await/01-rewrite-async-2/task.md
new file mode 100644
index 00000000..94af2e57
--- /dev/null
+++ b/6-async/05-async-await/01-rewrite-async-2/task.md
@@ -0,0 +1,48 @@
+
+# Rewrite "rethrow" async/await
+
+Below you can find the "rethrow" example from the chapter <info:promise-chaining>. Rewrite it using `async/await` instead of `.then/catch`.
+
+And get rid of the recursion in favour of a loop in `demoGithubUser`: with `async/await` that becomes easy to do.
+
+```js run
+class HttpError extends Error {
+  constructor(response) {
+    super(`${response.status} for ${response.url}`);
+    this.name = 'HttpError';
+    this.response = response;
+  }
+}
+
+function loadJson(url) {
+  return fetch(url)
+    .then(response => {
+      if (response.status == 200) {
+        return response.json();
+      } else {
+        throw new HttpError(response);
+      }
+    })
+}
+
+// Ask for a user name until github returns a valid user
+function demoGithubUser() {
+  let name = prompt("Enter a name?", "iliakan");
+
+  return loadJson(`https://api.github.com/users/${name}`)
+    .then(user => {
+      alert(`Full name: ${user.name}.`);
+      return user;
+    })
+    .catch(err => {
+      if (err instanceof HttpError && err.response.status == 404) {
+        alert("No such user, please reenter.");
+        return demoGithubUser();
+      } else {
+        throw err;
+      }
+    });
+}
+
+demoGithubUser();
+```
diff --git a/6-async/05-async-await/01-rewrite-async/solution.md b/6-async/05-async-await/01-rewrite-async/solution.md
new file mode 100644
index 00000000..c736defe
--- /dev/null
+++ b/6-async/05-async-await/01-rewrite-async/solution.md
@@ -0,0 +1,33 @@
+
+The notes are below the code:
+
+```js run
+async function loadJson(url) { // (1)
+  let response = await fetch(url); // (2)
+
+  if (response.status == 200) {
+    let json = await response.json(); // (3)
+    return json;
+  }
+
+  throw new Error(response.status);
+}
+
+loadJson('no-such-user.json')
+  .catch(alert); // Error: 404 (4)
+```
+
+Notes:
+
+1. The function `loadUrl` becomes `async`.
+2. All `.then` inside are replaced with `await`.
+3. We can `return response.json()` instead of awaiting for it, like this:
+
+    ```js
+    if (response.status == 200) {
+      return response.json(); // (3)
+    }
+    ```
+
+    Then the outer code would have to `await` for that promise to resolve. In our case it doesn't matter.
+4. The error thrown from `loadJson` is handled by `.catch`. We can't use `await loadJson(…)` there, because we're not in an `async` function.
diff --git a/6-async/05-async-await/01-rewrite-async/task.md b/6-async/05-async-await/01-rewrite-async/task.md
new file mode 100644
index 00000000..bf54e6f6
--- /dev/null
+++ b/6-async/05-async-await/01-rewrite-async/task.md
@@ -0,0 +1,20 @@
+
+# Rewrite using async/await
+
+Rewrite the one of examples from the chapter <info:promise-chaining> using `async/await` instead of `.then/catch`:
+
+```js run
+function loadJson(url) {
+  return fetch(url)
+    .then(response => {
+      if (response.status == 200) {
+        return response.json();
+      } else {
+        throw new Error(response.status);
+      }
+    })
+}
+
+loadJson('no-such-user.json') // (3)
+  .catch(alert); // Error: 404
+```
diff --git a/6-async/05-async-await/article.md b/6-async/05-async-await/article.md
new file mode 100644
index 00000000..aef4a073
--- /dev/null
+++ b/6-async/05-async-await/article.md
@@ -0,0 +1,298 @@
+# Async/await
+
+There's a special syntax to work with promises in a more comfort fashion, called "async/await". It's surprisingly easy to understand and use.
+
+## Async functions
+
+Let's start with the `async` keyword. It can be placed before function, like this:
+
+```js
+async function f() {
+  return 1;
+}
+```
+
+The word "async" before a function means one simple thing: a function always returns a promise. If it's not so, then the value is wrapped in `Promise.resolve`.
+
+For instance, the code above returns `Promise.resolve(1)`:
+
+```js run
+async function f() {
+  return 1;
+}
+
+f().then(alert); // 1
+```
+
+...We can explicitly return a promise, that would be the same:
+
+```js run
+async function f() {
+  return Promise.resolve(1);
+}
+
+f().then(alert); // 1
+```
+
+So, `async` ensures that the function returns a promise, wraps non-promises in it. Simple enough, right? But not only that. There's another keyword `await` that works only inside `async` functions, and it's pretty cool.
+
+## Await
+
+The syntax:
+
+```js
+// works only inside async functions
+let value = await promise;
+```
+
+The keyword `await` makes JavaScript wait until that promise settles and returns its result.
+
+Here's example with a promise that resolves in 1 second:
+```js run
+async function f() {
+
+  let promise = new Promise((resolve, reject) => {
+    setTimeout(() => resolve("done!"), 1000)
+  });
+
+*!*
+  let result = await promise; // wait till the promise resolves (*)
+*/!*
+
+  alert(result); // "done!"
+}
+
+f();
+```
+
+The function execution "pauses" at the line `(*)` and resumes when the promise settles, with `result` becoming its result. So the code above shows "done!" in one second.
+
+Let's emphasize that: `await` literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn't cost any CPU resources, because the engine can do other jobs meanwhile: execute other scripts, handle events etc.
+
+It's just a more elegant syntax of getting the promise result than `promise.then`, easier to read and write.
+
+````warn header="Can't use `await` in regular functions"
+If we try to use `await` in non-async function, that would be a syntax error:
+
+```js run
+function f() {
+  let promise = Promise.resolve(1);
+*!*
+  let result = await promise; // Syntax error
+*/!*
+}
+```
+
+We can get such error in case if we forget to put `async` before a function. As said, `await` only works inside `async function`.
+````
+
+Let's take `showAvatar()` example from the chapter <info:promise-chaining> and rewrite it using `async/await`:
+
+1. First we'll need to replace `.then` calls by `await`.
+2. And we should make the function `async` for them to work.
+
+```js run
+async function showAvatar() {
+
+  // read our JSON
+  let response = await fetch('/article/promise-chaining/user.json');
+  let user = await response.json();
+
+  // read github user
+  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
+  let githubUser = await githubResponse.json();
+
+  // show the avatar
+  let img = document.createElement('img');
+  img.src = githubUser.avatar_url;
+  img.className = "promise-avatar-example";
+  document.body.append(img);
+
+  // wait 3 seconds
+  await new Promise((resolve, reject) => setTimeout(resolve, 3000));
+
+  img.remove();
+
+  return githubUser;
+}
+
+showAvatar();
+```
+
+Pretty clean and easy to read, right? Much better than before.
+
+````smart header="`await` won't work in the top-level code"
+People who are just starting to use `await` tend to forget that, but we can't write `await` in the top-level code. That wouldn't work:
+
+```js run
+// syntax error in top-level code
+let response = await fetch('/article/promise-chaining/user.json');
+let user = await response.json();
+```
+
+So we need to have a wrapping async function for the code that awaits. Just as in the example above.
+````
+````smart header="`await` accepts thenables"
+Like `promise.then`, `await` allows to use thenable objects (those with a callable `then` method). Again, the idea is that a 3rd-party object may be not a promise, but promise-compatible: if it supports `.then`, that's enough to use with `await`.
+
+For instance, here `await` accepts `new Thenable(1)`:
+```js run
+class Thenable {
+  constructor(num) {
+    this.num = num;
+  }
+  then(resolve, reject) {
+    alert(resolve); // function() { native code }
+    // resolve with this.num*2 after 1000ms
+    setTimeout(() => resolve(this.num * 2), 1000); // (*)
+  }
+};
+
+async function f() {
+  // waits for 1 second, then result becomes 2
+  let result = await new Thenable(1);
+  alert(result);
+}
+
+f();
+```
+
+If `await` gets a non-promise object with `.then`, it calls that method providing native functions `resolve`, `reject` as arguments. Then `await` waits until one of them is called (in the example above it happens in the line `(*)`) and then proceeds with the result.
+````
+
+````smart header="Async methods"
+A class method can also be async, just put `async` before it.
+
+Like here:
+
+```js run
+class Waiter {
+*!*
+  async wait() {
+*/!*
+    return await Promise.resolve(1);
+  }
+}
+
+new Waiter()
+  .wait()
+  .then(alert); // 1
+```
+The meaning is the same: it ensures that the returned value is a promise and enables `await`.
+
+````
+## Error handling
+
+If a promise resolves normally, then `await promise` returns the result. But in case of a rejection it throws the error, just if there were a `throw` statement at that line.
+
+This code:
+
+```js
+async function f() {
+*!*
+  await Promise.reject(new Error("Whoops!"));
+*/!*
+}
+```
+
+...Is the same as this:
+
+```js
+async function f() {
+*!*
+  throw new Error("Whoops!");
+*/!*
+}
+```
+
+In real situations the promise may take some time before it rejects. So `await` will wait, and then throw an error.
+
+We can catch that error using `try..catch`, the same way as a regular `throw`:
+
+```js run
+async function f() {
+
+  try {
+    let response = await fetch('http://no-such-url');
+  } catch(err) {
+*!*
+    alert(err); // TypeError: failed to fetch
+*/!*
+  }
+}
+
+f();
+```
+
+In case of an error, the control jumps to the `catch` block. We can also wrap multiple lines:
+
+```js run
+async function f() {
+
+  try {
+    let response = await fetch('/no-user-here');
+    let user = await response.json();
+  } catch(err) {
+    // catches errors both in fetch and response.json
+    alert(err);
+  }
+}
+
+f();
+```
+
+If we don't have `try..catch`, then the promise generated by the call of the async function `f()` becomes rejected. We can append `.catch` to handle it:
+
+```js run
+async function f() {
+  let response = await fetch('http://no-such-url');
+}
+
+// f() becomes a rejected promise
+*!*
+f().catch(alert); // TypeError: failed to fetch // (*)
+*/!*
+```
+
+If we forget to add `.catch` there, then we get an unhandled promise error (and can see it in the console). We can catch such errors using a global event handler as described in the chapter <info:promise-chaining>.
+
+
+```smart header="`async/await` and `promise.then/catch`"
+When we use `async/await`, we rarely need `.then`, because `await` handles the waiting for us. And we can use a regular `try..catch` instead of `.catch`. That's usually (not always) more convenient.
+
+But at the top level of the code, when we're outside of any `async` function, we're syntactically unable to use `await`, so it's a normal practice to add `.then/catch` to handle the final result or falling-through errors.
+
+Like in the line `(*)` of the example above.
+```
+
+````smart header="`async/await` works well with `Promise.all`"
+When we need to wait for multiple promises, we can wrap them in `Promise.all` and then `await`:
+
+```js
+// wait for the array of results
+let results = await Promise.all([
+  fetch(url1),
+  fetch(url2),
+  ...
+]);
+```
+
+In case of an error, it propagates as usual: from the failed promise to `Promise.all`, and then becomes an exception that we can catch using `try..catch` around the call.
+
+````
+
+## Summary
+
+The `async` keyword before a function has two effects:
+
+1. Makes it always return a promise.
+2. Allows to use `await` in it.
+
+The `await` keyword before a promise makes JavaScript wait until that promise settles, and then:
+
+1. If it's an error, the exception is generated, same as if `throw error` were called at that very place.
+2. Otherwise, it returns the result, so we can assign it to a value.
+
+Together they provide a great framework to write asynchronous code that is easy both to read and write.
+
+With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outmost scope) we have to use these methods. Also `Promise.all` is a nice thing to wait for many tasks simultaneously.
diff --git a/6-async/05-async-await/head.html b/6-async/05-async-await/head.html
new file mode 100644
index 00000000..f3457236
--- /dev/null
+++ b/6-async/05-async-await/head.html
@@ -0,0 +1,8 @@
+<style>
+.promise-avatar-example {
+  border-radius: 50%;
+  position: fixed;
+  left: 10px;
+  top: 10px;
+}
+</style>
diff --git a/6-async/index.md b/6-async/index.md
new file mode 100644
index 00000000..a6ec5439
--- /dev/null
+++ b/6-async/index.md
@@ -0,0 +1,2 @@
+
+# Promises, async/await
diff --git a/6-optimize/1-optimize-intro/article.md b/6-optimize/1-optimize-intro/article.md
deleted file mode 100644
index a0e9c5c3..00000000
--- a/6-optimize/1-optimize-intro/article.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Введение
-
-В отличие от ряда других курсов учебника, этот раздел -- не является курсом как таковым. Связное и грамотное изложение темы требует времени, которое я пока не могу ему уделить. Но, надеюсь, смогу в будущем.
-
-Пока что раздел содержит лишь некоторые статьи-заметки по теме оптимизации, которые, надеюсь, будут вам полезны.
diff --git a/6-optimize/2-minification/article.md b/6-optimize/2-minification/article.md
deleted file mode 100644
index 2ca21e36..00000000
--- a/6-optimize/2-minification/article.md
+++ /dev/null
@@ -1,513 +0,0 @@
-# Как работают сжиматели JavaScript
-
-Перед выкладыванием JavaScript на "боевую" машину -- пропускаем его через минификатор (также говорят "сжиматель"), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.
-
-В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.
-[cut]
-
-## Современные сжиматели
-
-Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.
-
-Вот их список:
-
-<ul>
-<li>[Google Closure Compiler](https://developers.google.com/closure/compiler/) </li>
-<li>[UglifyJS](https://github.com/mishoo/UglifyJS)</li>
-<li>[Microsoft AJAX Minifier](http://ajaxmin.codeplex.com/)</li>
-</ul>
-Самые широко используемые -- первые два, поэтому будем рассматривать в первую очередь их.
-
-Наша цель -- понять, как они работают, и что интересного с их помощью можно сотворить.
-
-## С чего начать?
-
-Для GCC:
-
-<ol>
-<li>Убедиться, что стоит [Java](http://java.oracle.com)</li>
-<li>Скачать и распаковать [](http://closure-compiler.googlecode.com/files/compiler-latest.zip), нам нужен файл `compiler.jar`.</li>
-<li>Сжать файл `my.js`: `java -jar compiler.jar --charset UTF-8 --js my.js --js_output_file my.min.js`</li>
-</ol>
-
-Обратите внимание на флаг `--charset` для GCC. Без него русские буквы будут закодированы во что-то типа `\u1234`.
-
-Google Closure Compiler также содержит [песочницу](http://closure-compiler.appspot.com/home) для тестирования сжатия и [веб-сервис](https://developers.google.com/closure/compiler/docs/gettingstarted_api?hl=ru), на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.
-
-Для UglifyJS:
-
-<ol>
-<li>Убедиться, что стоит [Node.js](http://nodejs.org)</li>
-<li>Поставить `npm install -g uglify-js`.</li>
-<li>Сжать файл `my.js`: `uglifyjs my.js -o my.min.js`</li>
-</ol>
-
-## Что делает минификатор?
-
-Все современные минификаторы работают следующим образом:
-<ol>
-<li>Разбирают JavaScript-код в синтаксическое дерево.
-
-Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода...</li>
-<li>Бегают по этому дереву, анализируют и оптимизируют его.</li>
-<li>Записывают из синтаксического дерева получившийся код.</li>
-</ol>
-
-## Как выглядит дерево?
-
-Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.
-
-Для GCC есть даже способ вывести его:
-
-<ol>
-<li>Сначала сгенерируем дерево в формате [DOT](http://en.wikipedia.org/wiki/DOT_language):
-
-```
-java -jar compiler.jar --js my.js --use_only_custom_externs --print_tree >my.dot
-```
-
-Здесь флаг `--print_tree` выводит дерево, а `--use_only_custom_externs` убирает лишнюю служебную информацию.
-</li>
-<li>Файл в этом формате используется в различных программах для графопостроения. 
-
-Чтобы превратить его в обычную картинку, подойдёт утилита `dot` из пакета [Graphviz](http://www.graphviz.org/):
-
-```
-// конвертировать в формат png
-dot -Tpng my.dot -o my.png
-
-// конвертировать в формат svg
-dot -Tsvg my.dot -o my.svg
-```
-
-</li>
-</ol>
-
-Пример кода `my.js`:
-
-```js
-function User(name) {
-
-  this.sayHi = function() {
-    alert( name );
-  };
-
-}
-```
-
-Результат, получившееся из `my.js` дерево:
-
-<img src="my.png">
-
-В узлах-эллипсах на иллюстрации выше стоит тип, например `FUNCTION` (функция) или `NAME` (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.
-
-Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.
-
-[smart header="Комментарии JSDoc"]
-Обычно когда код превращается в дерево -- из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.
-
-Но Google Closure Compiler добавляет в дерево информацию из *комментариев JSDoc*, т.е. комментариев вида `/** ... */`, например:
-
-```js
-*!*
-/**
- * Номер минимальной поддерживаемой версии IE
- * @const
- * @type {number}
- */
-*/!*
-var minIEVersion = 8;
-```
-
-Такие комментарии не создают новых узлов дерева, а добавляются в качестве информации к существующем. В данном случае -- к переменной `minIEVersion`.
-
-В них может содержаться информация о типе переменной (`number`) и другая, которая поможет сжимателю лучше оптимизировать код (`const` -- константа). 
-
-[/smart]
-
-## Оптимизации
-
-Сжиматель бегает по дереву, ищет "паттерны" -- известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево. 
-
-В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.
-
-
-<dl>
-<dt>Объединение и сжатие констант</dt>
-<dd>
-До оптимизации:
-
-```js
-function test(a, b) {
-  run(a, 'my' + 'string', 600 * 600 * 5, 1 && 0, b && 0)
-}
-```
-
-После:
-
-```js
-//+ no-beautify
-function test(a,b){run(a,"mystring",18E5,0,b&&0)};
-```
-
-<ul>
-<li>`'my' + 'string'` -> `"mystring"`.</li>
-<li>`600 * 600 * 5` -> `18E5` (научная форма числа, для краткости).</li>
-<li>`1 && 0` -> `0`.</li>
-<li>`b && 0` -> без изменений, т.к. результат зависит от `b`.</li>
-</ul>
-</dd>
-<dt>Укорачивание локальных переменных</dt>
-<dd>
-До оптимизации:
-
-```js
-function sayHi(*!*name*/!*, *!*message*/!*) {  
-  alert(name +" сказал: " + message);
-}
-```
-
-После оптимизации:
-
-```js
-//+ no-beautify
-function sayHi(a,b){alert(a+" сказал: "+b)};
-```
-
-<ul>
-<li>Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).</li>
-<li>Также переименовываются локальные функции.</li>
-<li>Вложенные функции обрабатываются корректно.</li>
-</ul>
-</dd>
-<dt>Объединение и удаление локальных переменных</dt>
-<dd>
-До оптимизации:
-
-```js
-function test(nodeId) {
-  var elem = document.getElementsById(nodeId);
-  var parent = elem.parentNode;
-  alert( parent );
-}
-```
-
-После оптимизации GCC:
-
-```js
-//+ no-beautify
-function test(a){a=document.getElementsById(a).parentNode;alert(a)};
-```
-
-<ul>
-<li>Локальные переменные были переименованы. </li>
-<li>Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о "пути использования" каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.</li>
-<li>Кроме того, операции `elem = getElementsById` и `elem.parentNode` объединены, но это уже другая оптимизация.</li>
-</ul>
-</dd>
-<dt>Уничтожение недостижимого кода, разворачивание `if`-веток</dt>
-<dd>
-
-До оптимизации:
-
-```js
-function test(node) {
-  var parent = node.parentNode;
-
-  if (0) {
-    alert( "Привет с параллельной планеты" );
-  } else {
-    alert( "Останется только один" );
-  }
-
-  return;
-
-  alert( 1 );
-}
-```
-
-После оптимизации:
-
-```js
-//+ no-beautify
-function test(){alert("Останется только один")}
-```
-
-<ul>
-<li>Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной `parent`, а затем и к параметру `node`.</li>
-<li>Заведомо ложная ветка `if(0) { .. }` убрана, заведомо истинная -- оставлена. 
-
-То же самое будет с условиями в других конструкциях, например `a = true ? c : d` превратится в `a = c`.</li>
-<li>Код после `return` удалён как недостижимый.</li>
-</ul>
-</dd>
-<dt>Переписывание синтаксических конструкций</dt>
-<dd>
-До оптимизации:
-
-```js
-var i = 0;
-while (i++ < 10) {
-  alert( i );
-}
-
-if (i) {
-  alert( i );
-}
-
-if (i == '1') {
-  alert( 1 );
-} else if (i == '2') {
-  alert( 2 );
-} else {
-  alert( i );
-}
-```
-
-После оптимизации:
-
-```js
-//+ no-beautify
-for(var i=0;10>i++;)alert(i);i&&alert(i);"1"==i?alert(1):"2"==i?alert(2):alert(i);
-```
-
-<ul>
-<li>Конструкция `while` переписана в `for`.</li>
-<li>Конструкция `if (i) ...` переписана в `i&&...`.</li>
-<li>Конструкция `if (cond) ... else ...` была переписана в `cond ? ... : ...`.</li>
-</ul>
-</dd>
-<dt>Инлайнинг функций</dt>
-<dd>
-*Инлайнинг функции* -- приём оптимизации, при котором функция заменяется на своё тело. 
-
-До оптимизации:
-
-```js
-function sayHi(message) {
-
-  var elem = createMessage('div', message);
-  showElement(elem);
-
-  function createMessage(tagName, message) {
-    var el = document.createElement(tagName);
-    el.innerHTML = message;
-    return el;
-  }
-
-  function showElement(elem) {
-    document.body.appendChild(elem);
-  }
-}
-```
-
-После оптимизации (переводы строк также будут убраны):
-
-```js
-function sayHi(b) {
-  var a = document.createElement("div");
-  a.innerHTML = b;
-  document.body.appendChild(a)
-};
-```
-
-<ul>
-<li>Вызовы функций `createMessage` и `showElement` заменены на тело функций. В данном случае это возможно, так как функции используются всего по разу.</li>
-<li>Эта оптимизация применяется не всегда. Если бы каждая функция использовалась много раз, то с точки зрения размера выгоднее оставить их "как есть".</li>
-</ul>
-</dd>
-<dt>Инлайнинг переменных</dt>
-<dd>Переменные заменяются на значение, если оно заведомо известно.
-
-До оптимизации:
-
-```js
-(function() {
-  var isVisible = true;
-  var hi = "Привет вам из JavaScript";
-
-  window.sayHi = function() {
-    if (isVisible) {
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-      alert( hi );
-    }
-  }
-
-})();
-```
-
-После оптимизации:
-
-```js
-(function() {
-    window.sayHi = function() {
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-      alert( "Привет вам из JavaScript" );
-    };
-  }
-})();
-```
-
-<ul>
-  <li>Переменная `isVisible` заменена на `true`, после чего `if` стало возможным убрать.</li>
-  <li>Переменная `hi` заменена на строку.</li>
-</ul>
-
-Казалось бы -- зачем менять `hi` на строку? Ведь код стал ощутимо длиннее!
-
-...Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают. 
-
-[Алгоритм работы gzip](http://www.gzip.org/algorithm.txt) заключается в том, что он ищет повторы в данных и выносит их в специальный "словарь", заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.
-
-Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия -- взяли `"Привет вам из JavaScript"` и заменили на идентификатор `hi`. Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.
-
-Плюс такого подхода станет очевиден, если сжать gzip оба кода -- до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.
-</dd>
-
-<dt>Разные мелкие оптимизации</dt>
-<dd>Кроме основных оптимизаций, описанных выше, есть ещё много мелких:
-
-<ul>
-<li>Убираются лишние кавычки у ключей
-
-```js
-//+ no-beautify
-{"prop" : "val" }   =>  {prop:"val"}
-```
-
-</li>
-<li>Упрощаются простые вызовы `Array/Object`
-
-```js
-//+ no-beautify
-a = new Array()   =>  a = []
-o = new Object()  => o = {}
-```
-
-Эта оптимизация предполагает, что `Array` и `Object` не переопределены программистом. Для включения её в UglifyJS нужен флаг `--unsafe`.
-</li>
-<li>...И еще некоторые другие мелкие изменения кода...</li>
-</ul>
-
-
-</dd>
-</dl>
-
-## Подводные камни
-
-Описанные оптимизации, в целом, безопасны, но есть ряд подводных камней.
-
-### Конструкция with
-
-Рассмотрим код:
-
-```js
-//+ no-beautify
-function changePosition(style) {
-  var position, test;
-
-*!*
-  with (style) {
-    position = 'absolute';
-  }
-*/!*
-}
-```
-
-Куда будет присвоено значение `position = 'absolute'`? 
-
-Это неизвестно до момента выполнения: если свойство `position` есть в `style` -- то туда, а если нет -- то в локальную переменную.
-
-Можно ли в такой ситуации заменить локальную переменную на более короткую? Очевидно, нет:
-
-```js
-//+ no-beautify
-function changePosition(style) {
-  var a, b;
-
-*!*
-  with (style) {          // а что, если в style нет такого свойства? 
-    position = 'absolute';// куда будет осуществлена запись? в window.position?
-  }
-*/!*
-}
-```
-
-Такая же опасность для сжатия кроется в использованном `eval`. Ведь `eval` может обращаться к локальным переменным:
-
-```js
-//+ no-beautify
-function f(code) {
-  var myVar;
-
-  eval(code); // а что, если будет присвоение eval("myVar = ...") ?
-
-  alert(myVar);
-```
-
-Получается, что при наличии `eval` мы не имеем права переименовывать локальные переменные. Причём (!), если функция является вложенноой, то и во внешних функциях тоже.
-
-А ведь сжатие переменных -- очень важная оптимизация. Как правило, она уменьшает размер сильнее всего.
-
-Что делать? Разные минификаторы поступают по-разному. 
-
-<ul>
-<li>UglifyJS -- не будет переименовывать переменные. Так что наличие `with/eval` сильно повлияет на степень сжатие кода.</li>
-<li>GCC -- всё равно сожмёт локальные переменные. Это, конечно же, может привести к ошибкам, причём в сжатом коде, отлаживать который не очень-то удобно. Поэтому он выдаст предупреждение о наличии опасной конструкции.</li>
-</ul>
-
-Ни тот ни другой вариант нас, по большому счёту, не устраивают.
-
-**Для того, чтобы код сжимался хорошо и работал правильно, не используем `with` и `eval`.**
-
-Либо, если уж очень надо использовать -- делаем это с оглядкой на поведение минификатора, чтобы не было проблем.
-
-### Условная компиляция IE10-
-
-В IE10- поддерживалось [условное выполнение JavaScript](http://msdn.microsoft.com/en-us/library/121hztk3.aspx).
-
-Синтаксис: `/*@cc_on код */`. 
-
-Такой код выполнится в IE10-, например:
-
-```js
-//+ run
-var isIE /*@cc_on =true@*/ ;
-
-alert( isIE ); // true в IE10-
-```
-
-Можно хитро сделать, чтобы комментарий остался, например так:
-
-```js
-//+ run
-var isIE = new Function('', '/*@cc_on return true@*/')();
-
-alert( isIE ); // true в IE.
-```
-
-
-...Однако, с учётом того, что в современных IE11+ эта компиляция не работает в любом случае, лучше избавиться от неё вообще.
-
-В следующих главах мы посмотрим, какие продвинутые возможности есть в минификаторах, как сделать сжатие более эффективным.
-
diff --git a/6-optimize/2-minification/my.png b/6-optimize/2-minification/my.png
deleted file mode 100644
index 624c2ad8..00000000
Binary files a/6-optimize/2-minification/my.png and /dev/null differ
diff --git a/6-optimize/2-minification/my.svg b/6-optimize/2-minification/my.svg
deleted file mode 100644
index a04ec2c4..00000000
--- a/6-optimize/2-minification/my.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="420pt" height="544pt" viewBox="0.00 0.00 420.00 544.00" xmlns="http://www.w3.org/2000/svg"><g class="graph" transform="scale(.6) translate(4 902)"><title>AST</title><path fill="#fff" stroke="#fff" d="M-4 5v-907h687V5H-4z"/><g class="node"><title>node0</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-879" rx="44.758" ry="18.385"/><text text-anchor="middle" x="173" y="-875.4" font-family="Consolas, monospace" font-size="14">BLOCK</text></g><g class="node"><title>node1</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-787" rx="48.083" ry="18.385"/><text text-anchor="middle" x="173" y="-783.4" font-family="Consolas, monospace" font-size="14">SCRIPT</text></g><g class="edge"><title>node0-&gt;node1</title><path fill="none" stroke="#000" d="M173-860.382v44.755"/><path stroke="#000" d="M176.5-815.59l-3.5 10-3.5-10h7z"/></g><g class="edge"><title>node0-&gt;node1</title><path fill="none" stroke="#f00" d="M179.666-860.413c1.776 5.817 3.446 12.312 4.334 18.413 1.152 7.917 1.152 10.083 0 18-.416 2.86-1.004 5.806-1.694 8.73"/><path fill="#f00" stroke="#f00" d="M185.673-814.315l-6.007 8.728-.747-10.57 6.753 1.842z"/><text text-anchor="middle" x="217" y="-829.4" font-family="Consolas, monospace" font-size="14" fill="#f00">UNCOND</text></g><g class="node"><title>RETURN</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="427" cy="-379" rx="53.033" ry="18.385"/><text text-anchor="middle" x="427" y="-375.4" font-family="Consolas, monospace" font-size="14">RETURN</text></g><g class="edge"><title>node0-&gt;RETURN</title><path fill="none" stroke="#f00" d="M206.737-866.543c14.848 6.26 32.095 14.63 46.263 24.543 104.8 73.33 154.197 85.768 203 204 32.557 78.873 1.41 182.093-17.253 230.986"/><path fill="#f00" stroke="#f00" d="M441.897-405.46l-6.915 8.027.4-10.588 6.515 2.56z"/><text text-anchor="middle" x="490" y="-661.4" font-family="Consolas, monospace" font-size="14" fill="#f00">SYN_BLOCK</text></g><g class="node"><title>node2</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-711" rx="63.848" ry="18.385"/><text text-anchor="middle" x="173" y="-707.4" font-family="Consolas, monospace" font-size="14">FUNCTION</text><text text-anchor="middle" x="173" y="-695.4" font-family="Consolas, monospace" fill="#008000" font-size="14">функция</text></g><g class="edge"><title>node1-&gt;node2</title><path fill="none" stroke="#000" d="M173-768.213v28.39"/><path stroke="#000" d="M176.5-739.57l-3.5 10-3.5-10h7z"/></g><g class="edge"><title>node1-&gt;RETURN</title><path fill="none" stroke="#f00" d="M200.79-771.71C241.73-747.948 318.425-698.524 365-638c53.572 69.615 61.776 178.55 62.445 230.103"/><path fill="#f00" stroke="#f00" d="M430.945-407.817l-3.458 10.015-3.542-9.986 7-.03z"/><text text-anchor="middle" x="420" y="-615.4" font-family="Consolas, monospace" font-size="14" fill="#f00">UNCOND</text></g><g class="node"><title>node3</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="41" cy="-619" rx="41.012" ry="18.385"/><text text-anchor="middle" x="41" y="-615.4" font-family="Consolas, monospace" font-size="14">NAME</text><text text-anchor="middle" x="41" y="-605.4" font-family="Consolas, monospace" fill="#008000" font-size="14">имя</text></g><g class="edge"><title>node2-&gt;node3</title><path fill="none" stroke="#000" d="M148.48-693.91c-21.55 15.02-53.028 36.96-76.353 53.215"/><path stroke="#000" d="M73.83-637.615l-10.205 2.846 6.203-8.588 4.002 5.743z"/></g><g class="node"><title>node4</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-619" rx="73.039" ry="18.385"/><text text-anchor="middle" x="173" y="-615.4" font-family="Consolas, monospace" font-size="14">PARAM_LIST</text><text text-anchor="middle" x="173" y="-605.4" font-family="Consolas, monospace" fill="#008000" font-size="14">список параметров</text></g><g class="edge"><title>node2-&gt;node4</title><path fill="none" stroke="#000" d="M173-692.382v44.755"/><path stroke="#000" d="M176.5-647.59l-3.5 10-3.5-10h7z"/></g><g class="node"><title>node6</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="311" cy="-619" rx="44.758" ry="18.385"/><text text-anchor="middle" x="311" y="-615.4" font-family="Consolas, monospace" font-size="14">BLOCK</text><text text-anchor="middle" x="311" y="-605.4" font-family="Consolas, monospace" fill="#008000" font-size="14">тело функции</text></g><g class="edge"><title>node2-&gt;node6</title><path fill="none" stroke="#f00" d="M184.468-692.607C192.608-680.813 204.46-665.91 218-656c8.315 6.086 28.884 14.474 48.57 21.724"/><path fill="#f00" stroke="#f00" d="M267.894-637.518l8.21 6.695-10.593-.114 2.384-6.58z"/><text text-anchor="middle" x="250" y="-661.4" font-family="Consolas, monospace" font-size="14" fill="#f00">UNCOND</text></g><g class="edge"><title>node2-&gt;node6</title><path fill="none" stroke="#000" d="M229.45-702.19c19.74 5.417 40.864 14.144 56.55 28.19 7.887 7.063 13.44 17.106 17.276 26.682"/><path stroke="#000" d="M306.66-648.247l.015 10.594-6.62-8.272 6.604-2.322z"/></g><g class="node"><title>node5</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="172" cy="-527" rx="41.012" ry="18.385"/><text text-anchor="middle" x="172" y="-523.4" font-family="Consolas, monospace" font-size="14">NAME</text><text text-anchor="middle" x="172" y="-513.4" font-family="Consolas, monospace" fill="#008000" font-size="14">имя</text></g><g class="edge"><title>node4-&gt;node5</title><path fill="none" stroke="#000" d="M172.798-600.382l-.487 44.755"/><path stroke="#000" d="M175.81-555.55l-3.608 9.96-3.39-10.037 7 .076z"/></g><g class="node"><title>node7</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="313" cy="-527" rx="82.024" ry="18.385"/><text text-anchor="middle" x="313" y="-523.4" font-family="Consolas, monospace" font-size="14">EXPR_RESULT</text><text text-anchor="middle" x="313" y="-513.4" font-family="Consolas, monospace" fill="#008000" font-size="14">выражение</text></g><g class="edge"><title>node6-&gt;node7</title><path fill="none" stroke="#f00" d="M276.446-606.903C254.84-597.253 233.026-582.337 244-564c3.743 6.255 8.946 11.512 14.832 15.916"/><path fill="#f00" stroke="#f00" d="M260.764-551.002l6.446 8.408-10.282-2.553 3.836-5.855z"/><text text-anchor="middle" x="276" y="-569.4" font-family="Consolas, monospace" font-size="14" fill="#f00">UNCOND</text></g><g class="edge"><title>node6-&gt;node7</title><path fill="none" stroke="#000" d="M311.405-600.382l.973 44.755"/><path stroke="#000" d="M315.878-555.664l-3.282 10.074-3.717-9.92 6.998-.154z"/></g><g class="node"><title>node8</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="313" cy="-435" rx="50.205" ry="18.385"/><text text-anchor="middle" x="313" y="-431.4" font-family="Consolas, monospace" font-size="14">ASSIGN</text><text text-anchor="middle" x="313" y="-421.4" font-family="Consolas, monospace" fill="#008000" font-size="14">присвоить</text></g><g class="edge"><title>node7-&gt;node8</title><path fill="none" stroke="#000" d="M313-508.382v44.755"/><path stroke="#000" d="M316.5-463.59l-3.5 10-3.5-10h7z"/></g><g class="edge"><title>node7-&gt;RETURN</title><path fill="none" stroke="#f00" d="M323.59-508.44c6.81 11.152 16.26 25.293 26.41 36.44 8.506 9.34 13.307 8.833 22 18 14.118 14.887 27.77 33.472 37.942 48.417"/><path fill="#f00" stroke="#f00" d="M412.858-407.518l2.648 10.258-8.467-6.368 5.818-3.89z"/><text text-anchor="middle" x="382" y="-477.4" font-family="Consolas, monospace" font-size="14" fill="#f00">UNCOND</text></g><g class="node"><title>node9</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="210" cy="-323" rx="60.104" ry="18.385"/><text text-anchor="middle" x="210" y="-319.4" font-family="Consolas, monospace" font-size="14">GETPROP</text><text text-anchor="middle" x="210" y="-309.4" font-family="Consolas, monospace" fill="#008000" font-size="14">получить свойство</text></g><g class="edge"><title>node8-&gt;node9</title><path fill="none" stroke="#000" d="M296.45-417.005c-17.042 18.533-43.756 47.58-62.978 68.482"/><path stroke="#000" d="M235.853-345.942l-9.345 4.992 4.193-9.73 5.153 4.738z"/></g><g class="node"><title>node12</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="402" cy="-323" rx="63.848" ry="18.385"/><text text-anchor="middle" x="402" y="-319.4" font-family="Consolas, monospace" font-size="14">FUNCTION</text><text text-anchor="middle" x="402" y="-309.4" font-family="Consolas, monospace" fill="#008000" font-size="14">функция</text></g><g class="edge"><title>node8-&gt;node12</title><path fill="none" stroke="#000" d="M324.328-416.766c10 15.61 25.336 38.403 40.672 56.766 3.336 3.994 7.03 8.053 10.758 11.948"/><path stroke="#000" d="M378.354-350.404l4.524 9.58-9.51-4.668 4.986-4.912z"/></g><g class="node"><title>node10</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="107" cy="-247" rx="34.857" ry="18.385"/><text text-anchor="middle" x="107" y="-243.4" font-family="Consolas, monospace" font-size="14">THIS</text></g><g class="edge"><title>node9-&gt;node10</title><path fill="none" stroke="#000" d="M186.628-305.754l-50.666 37.384"/><path stroke="#000" d="M137.617-265.24l-10.125 3.12 5.968-8.754 4.157 5.633z"/></g><g class="node"><title>node11</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="210" cy="-247" rx="50.205" ry="18.385"/><text text-anchor="middle" x="210" y="-243.4" font-family="Consolas, monospace" font-size="14">STRING</text><text text-anchor="middle" x="210" y="-233.4" font-family="Consolas, monospace" fill="#008000" font-size="14">строка-константа</text></g><g class="edge"><title>node9-&gt;node11</title><path fill="none" stroke="#000" d="M210-304.213v28.39"/><path stroke="#000" d="M213.5-275.57l-3.5 10-3.5-10h7z"/></g><g class="node"><title>node13</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="319" cy="-247" rx="41.012" ry="18.385"/><text text-anchor="middle" x="319" y="-243.4" font-family="Consolas, monospace" font-size="14">NAME</text></g><g class="edge"><title>node12-&gt;node13</title><path fill="none" stroke="#000" d="M382.33-304.99l-37.354 34.205"/><path stroke="#000" d="M347.13-268.012l-9.74 4.172 5.013-9.335 4.727 5.163z"/></g><g class="node"><title>node14</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="451" cy="-247" rx="73.039" ry="18.385"/><text text-anchor="middle" x="451" y="-243.4" font-family="Consolas, monospace" font-size="14">PARAM_LIST</text></g><g class="edge"><title>node12-&gt;node14</title><path fill="none" stroke="#000" d="M413.862-304.603l19.716 30.58"/><path stroke="#000" d="M436.6-275.793l2.478 10.302-8.36-6.51 5.883-3.793z"/></g><g class="node"><title>node15</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-247" rx="44.758" ry="18.385"/><text text-anchor="middle" x="587" y="-243.4" font-family="Consolas, monospace" font-size="14">BLOCK</text></g><g class="edge"><title>node12-&gt;node15</title><path fill="none" stroke="#000" d="M438.993-307.803l106.503 43.753"/><path stroke="#000" d="M547.088-267.18l7.92 7.037-10.58-.562 2.66-6.475z"/></g><g class="node"><title>node16</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-171" rx="82.024" ry="18.385"/><text text-anchor="middle" x="587" y="-167.4" font-family="Consolas, monospace" font-size="14">EXPR_RESULT</text></g><g class="edge"><title>node15-&gt;node16</title><path fill="none" stroke="#000" d="M587-228.213v28.39"/><path stroke="#000" d="M590.5-199.57l-3.5 10-3.5-10h7z"/></g><g class="node"><title>node17</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-95" rx="36.977" ry="18.385"/><text text-anchor="middle" x="587" y="-91.4" font-family="Consolas, monospace" font-size="14">CALL</text><text text-anchor="middle" x="587" y="-81.4" font-family="Consolas, monospace" fill="#008000" font-size="14">вызов функции</text></g><g class="edge"><title>node16-&gt;node17</title><path fill="none" stroke="#000" d="M587-152.213v28.39"/><path stroke="#000" d="M590.5-123.57l-3.5 10-3.5-10h7z"/></g><g class="node"><title>node18</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="537" cy="-19" rx="41.012" ry="18.385"/><text text-anchor="middle" x="537" y="-15.4" font-family="Consolas, monospace" font-size="14">NAME</text><text text-anchor="middle" x="537" y="-5.4" font-family="Consolas, monospace" fill="#008000" font-size="14">имя(функции)</text></g><g class="edge"><title>node17-&gt;node18</title><path fill="none" stroke="#000" d="M575.403-77.373c-6.265 9.524-14.126 21.47-21.1 32.073"/><path stroke="#000" d="M557.127-43.225l-8.42 6.43 2.572-10.277 5.847 3.847z"/></g><g class="node"><title>node19</title><ellipse fill="#b2dfee" stroke="#b2dfee" cx="637" cy="-19" rx="41.012" ry="18.385"/><text text-anchor="middle" x="637" y="-15.4" font-family="Consolas, monospace" font-size="14">NAME</text><text text-anchor="middle" x="637" y="-5.4" font-family="Consolas, monospace" fill="#008000" font-size="14">имя(параметр)</text></g><g class="edge"><title>node17-&gt;node19</title><path fill="none" stroke="#000" d="M598.597-77.373c6.265 9.524 14.126 21.47 21.1 32.073"/><path stroke="#000" d="M622.72-47.072l2.573 10.277-8.42-6.43 5.848-3.847z"/></g></g></svg>
\ No newline at end of file
diff --git a/6-optimize/2-minification/my@2x.png b/6-optimize/2-minification/my@2x.png
deleted file mode 100644
index 969467e6..00000000
Binary files a/6-optimize/2-minification/my@2x.png and /dev/null differ
diff --git a/6-optimize/3-better-minification/article.md b/6-optimize/3-better-minification/article.md
deleted file mode 100644
index 5220f678..00000000
--- a/6-optimize/3-better-minification/article.md
+++ /dev/null
@@ -1,172 +0,0 @@
-# Улучшаем сжатие кода
-
-Здесь мы обсудим разные приёмы, которые используются, чтобы улучшить сжатие кода.
-[cut]
-## Больше локальных переменных
-
-Например, код jQuery обёрнут в  функцию, запускаемую "на месте".
-
-```js
-(function(window, undefined) {
-  // ...
-  var jQuery = ...
-
-  window.jQuery = jQuery; // сделать переменную глобальной
-
-})(window);
-```
-
-Переменные `window` и `undefined` стали локальными. Это позволит сжимателю заменить их на более короткие.
-
-## ООП без прототипов
-
-Приватные переменные будут сжаты и заинлайнены.
-
-Например, этот код хорошо сожмётся:
-
-```js
-function User(firstName, lastName) {
-  var fullName = firstName + ' ' + lastName;
-
-  this.sayHi = function() {
-    showMessage(fullName);
-  }
-
-  function showMessage(msg) {
-    alert( '**' + msg + '**' );
-  }
-}
-```
-
-..А этот -- плохо:
-
-```js
-function User(firstName, lastName) {
-  this._firstName = firstName;
-  this._lastName = lastName;
-}
-
-User.prototype.sayHi = function() {
-  this._showMessage(this._fullName);
-}
-
-
-User.prototype._showMessage = function(msg) {
-  alert( '**' + msg + '**' );
-}
-```
-
-Сжимаются только локальные переменные, свойства объектов не сжимаются, поэтому эффект от сжатия для второго кода будет совсем небольшим.
-
-При этом, конечно, нужно иметь в виду общий стиль ООП проекта, достоинства и недостатки такого подхода.
-
-## Сжатие под платформу, define
-
-Можно делать разные сборки в зависимости от платформы (мобильная/десктоп) и браузера.
-
-Ведь не секрет, что ряд функций могут быть реализованы по разному, в зависимости от того, поддерживает ли среда выполнения нужную возможность.
-
-### Способ 1: локальная переменная
-
-Проще всего это сделать локальной переменной в модуле:
-
-```js
-(function($) {
-
-*!*
-  /** @const */
-  var platform = 'IE';
-*/!*
-
-  // .....
-
-  if (platform == 'IE') {
-    alert( 'IE' );
-  } else {
-    alert( 'NON-IE' );
-  }
-
-})(jQuery);
-```
-
-Нужное значение директивы можно вставить при подготовке JavaScript к сжатию.
-
-Сжиматель заинлайнит её и оптимизирует соответствующие IE.
-
-### Способ 2: define
-
-UglifyJS и GCC позволяют задать значение глобальной переменной из командной строки. 
-
-В GCC эта возможность доступна лишь в "продвинутом режиме" работы оптимизатора, который мы рассмотрим далее (он редко используется).
-
-Удобнее в этом плане устроен UglifyJS. В нём можно указать флаг `-d SYMBOL[=VALUE]`, который заменит все переменные `SYMBOL` на указанное значение `VALUE`. Если `VALUE` не указано, то оно считается равным `true`.
-
-Флаг не работает, если переменная определена явно.
-
-Например, рассмотрим код:
-
-```js
-// my.js
-if (isIE) {
-  alert( "Привет от IE" );
-} else {
-  alert( "Не IE :)" );
-}
-```
-
-Сжатие вызовом `uglifyjs -d isIE my.js` даст:
-
-```js
-alert( "Привет от IE" );
-```
-
-..Ну а чтобы код работал в обычном окружении, нужно определить в нём значение переменной по умолчанию. Это обычно делается в каком-то другом файле (на весь проект), так как если объявить `var isIE` в этом, то флаг `-d isIE` не сработает.
-
-Но можно и "хакнуть" сжиматель, объявив переменную так:
-
-```js
-// объявит переменную при отсутствии сжатия
-// при сжатии не повредит
-window.isIE = window.isIE || getBrowserVersion();
-```
-
-## Убираем вызовы console.*
-
-Минификатор имеет в своём распоряжении дерево кода и может удалить ненужные вызовы. 
-
-Для UglifyJS это делают опции компилятора:
-<ul>
-<li>`drop_debugger` -- убирает вызовы `debugger`.</li>
-<li>`drop_console` -- убирает вызовы `console.*`.</li>
-</ul>
-
-Можно написать и дополнительную функцию преобразования, которая убирает другие вызовы, например для `log.*`:
-
-```js
-var uglify = require('uglify-js');
-var pro = uglify.uglify;
-
-function ast_squeeze_console(ast) {
-  var w = pro.ast_walker(),
-    walk = w.walk,
-    scope;
-  return w.with_walkers({
-    "stat": function(stmt) {
-      if (stmt[0] === "call" && stmt[1][0] == "dot" && stmt[1][1] instanceof Array && stmt[1][1][0] == 'name' && stmt[1][1][1] == "log") {
-        return ["block"];
-      }
-      return ["stat", walk(stmt)];
-    },
-    "call": function(expr, args) {
-      if (expr[0] == "dot" && expr[1] instanceof Array && expr[1][0] == 'name' && expr[1][1] == "console") {
-        return ["atom", "0"];
-      }
-    }
-  }, function() {
-    return walk(ast);
-  });
-};
-```
-
-Эту функцию следует вызвать на результате `parse`, и она пройдётся по дереву и удалит все вызовы `log.*`.
-
diff --git a/6-optimize/4-memory-leaks/article.md b/6-optimize/4-memory-leaks/article.md
deleted file mode 100644
index 70357920..00000000
--- a/6-optimize/4-memory-leaks/article.md
+++ /dev/null
@@ -1,317 +0,0 @@
-# Утечки памяти 
-
-*Утечки памяти* происходят, когда браузер по какой-то причине не может освободить память от недостижимых объектов.
-
-Обычно это происходит автоматически ([](/memory-management)). Кроме того, браузер освобождает память при переходе на другую страницу. Поэтому утечки в реальной жизни проявляют себя в двух ситуациях:
-
-[cut]
-<ol>
-<li>Приложение, в котором посетитель все время на одной странице и работает со сложным JavaScript-интерфейсом. В этом случае утечки могут постепенно съедать доступную память.</li>
-<li>Страница регулярно делает что-то, вызывающее утечку памяти. Посетитель (например, менеджер) оставляет компьютер на ночь включенным, чтобы не закрывать браузер с кучей вкладок. Приходит утром -- а браузер съел всю память <strike>и рухнул</strike> и сильно тормозит.</li>
-</ol>
-Утечки бывают из-за ошибок браузера, ошибок в расширениях браузера и, гораздо реже, по причине ошибок в архитектуре JavaScript-кода. Мы разберём несколько наиболее частых и важных примеров.
-
-## Коллекция утечек в IE
-
-### Утечка DOM ↔ JS в IE8-
-
-IE до версии 8 не умел очищать циклические ссылки, появляющиеся между DOM-объектами и объектами JavaScript. В результате и DOM и JS оставались в памяти навсегда.
-
-В браузере IE8 была проведена серьёзная работа над ошибками, но утечка в IE8- появляется, если круговая ссылка возникает "через объект".
-
-Чтобы было понятнее, о чём речь, посмотрите на следующий код. Он вызывает утечку памяти в IE8-:
-
-```
-function leak() {
-  // Создаём новый DIV, добавляем к BODY
-  var elem = document.createElement('div');
-  document.body.appendChild(elem);
-
-  // Записываем в свойство жирный объект
-  elem.__expando = {
-    bigAss: new Array(1000000).join('lalala')
-  };
-
-*!*
-  // Создаём круговую ссылку. Без этой строки утечки не будет.
-  elem.__expando.__elem = elem;
-*/!*
-
-  // Удалить элемент из DOM. Браузер должен очистить память.
-  elem.parentElement.removeChild(elem);
-}
-```
-
-Полный пример (только для IE8-, а также IE9 в режиме совместимости с IE8):
-
-[codetabs src="leak-ie8"]
-
-
-Круговая ссылка и, как следствие, утечка может возникать и неявным образом, через замыкание:
-
-```js
-function leak() {
-  var elem = document.createElement('div');
-  document.body.appendChild(elem);
-
-  elem.__expando = {
-    bigAss: new Array(1000000).join('lalala'),
-*!*
-    method: function() {} // создаётся круговая ссылка через замыкание
-*/!*
-  };
-
-  // Удалить элемент из DOM. Браузер должен очистить память.
-  elem.parentElement.removeChild(elem);
-}
-```
-
-Полный пример (IE8-, IE9 в режиме совместимости с IE8):
-
-[codetabs src="leak-ie8-2"]
-
-Без привязки метода `method` к элементу здесь утечки не возникнет.
-
-Бывает ли такая ситуация в реальной жизни? Или это -- целиком синтетический пример, для заумных программистов?
-
-Да, конечно бывает. Например, при разработке графических компонент -- бывает удобно присвоить DOM-элементу ссылку на JavaScript-объект, который представляет собой компонент. Это упрощает делегирование и, в общем-то, логично, что DOM-элемент знает о компоненте на себе. Но в IE8- прямая привязка ведёт к утечке памяти!
-
-Примерно так:
-```js
-function Menu(elem) {
-  elem.onclick = function() {};
-}
-
-var menu = new Menu(elem); // Menu содержит ссылку на elem
-*!*
-elem.menu = menu; // такая привязка или что-то подобное ведёт к утечке в IE8
-*/!*
-```
-
-Полный пример (IE8-, IE9 в режиме совместимости с IE8):
-
-[codetabs src="leak-ie8-widget"]
-
-### Утечка IE8 при обращении к коллекциям таблицы
-
-Эта утечка происходит только в IE8 в стандартном режиме. В нём при обращении к табличным псевдо-массивам (напр. `rows`) создаются и не очищаются внутренние ссылки, что приводит к утечкам.
-
-Также воспроизводится в новых IE в режиме совместимости с IE8.
-
-Код:
-
-```js
-var elem = document.createElement('div'); // любой элемент
-
-function leak() {
-
-  elem.innerHTML = '<table><tr><td>1</td></tr></table>';
-
-*!*
-  elem.firstChild.rows[0]; // просто доступ через rows[] приводит к утечке
-  // при том, что мы даже не сохраняем значение в переменную
-*/!*
-
-  elem.removeChild(elem.firstChild); // удалить таблицу (*)
-  // alert(elem.childNodes.length) // выдал бы 0, elem очищен, всё честно
-}
-```
-
-Полный пример (IE8):
-
-[codetabs src="leak-ie8-table"]
-
-Особенности:
-<ul>
-<li>Если убрать отмеченную строку, то утечки не будет.</li>
-<li>Если заменить строку `(*)` на `elem.innerHTML = ''`, то память будет очищена, т.к. этот способ работает по-другому, нежели просто `removeChild` (см. главу [](/memory-management)).</li>
-<li>Утечка произойдёт не только при доступе к `rows`, но и к другим свойствам, например `elem.firstChild.tBodies[0]`.</li>
-</ul>
-
-Эта утечка проявляется, в частности, при удалении детей элемента следующей функцией:
-
-```js
-function empty(elem) {
-  while (elem.firstChild) elem.removeChild(elem.firstChild);
-}
-```
-
-Если идёт доступ к табличным коллекциям и регулярное обновление таблиц при помощи DOM-методов  -- утечка в IE8 будет расти.
-
-Более подробно вы можете почитать об этой утечке в статье [Утечки памяти в IE8, или страшная сказка со счастливым концом](http://habrahabr.ru/post/141451/).
-
-### Утечка через XmlHttpRequest в IE8-
- 
-Следующий код вызывает утечки памяти в IE8-:
-
-```js
-function leak() {
-  var xhr = new XMLHttpRequest();
-
-  xhr.open('GET', '/server.do', true);
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4 && xhr.status == 200) {
-      // ...
-    }
-  }
-
-  xhr.send(null);
-}
-```
-
-Как вы думаете, почему? Если вы внимательно читали то, что написано выше, то имеете информацию для ответа на этот вопрос..
-
-Посмотрим, какая структура памяти создается при каждом запуске:
-
-<img src="leak-xhr.png">
-
-Когда запускается асинхронный запрос `xhr`, браузер создаёт специальную внутреннюю ссылку (internal reference) на этот объект. находится в процессе коммуникации. Именно поэтому объект `xhr` будет жив после окончания работы функции.
-
-Когда запрос завершен, браузер удаляет внутреннюю ссылку, `xhr` становится недостижимым и память очищается... Везде, кроме IE8-.
-
-
-Полный пример (IE8):
-
-[codetabs src="leak-ie8-xhr"]
-
-Чтобы это исправить, нам нужно разорвать круговую ссылку `XMLHttpRequest ↔ JS`. Например, можно удалить `xhr` из замыкания:
-
-```js
-function leak() {
-  var xhr = new XMLHttpRequest();
-
-  xhr.open('GET', 'something.js?' + Math.random(), true);
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState != 4) return;
-
-    if (xhr.status == 200) {
-      document.getElementById('test').innerHTML++;
-    }
-
-*!*
-    xhr = null; // по завершении запроса удаляем ссылку из замыкания
-*/!*
-  }
-
-  xhr.send(null);
-}
-```
-
-<img src="leak-xhr-2.png">
-
-Теперь циклической ссылки нет -- и не будет утечки.
-
-
-## Объемы утечек памяти
-
-Объем "утекающей" памяти может быть небольшим. Тогда это почти не ощущается. Но так как замыкания ведут к сохранению переменных внешних функций, то одна функция может тянуть за собой много чего ещё.
-
-Представьте, вы создали функцию, и одна из ее переменных содержит очень большую по объему строку (например, получает с сервера).
-
-```js
-function f() {
-  var data = "Большой объем данных, например, переданных сервером"
-
-  /* делаем что-то хорошее (ну или плохое) с полученными данными */
-
-  function inner() {
-    // ...
-  }
-
-  return inner;
-}
-```
-
-Пока функция `inner` остается в памяти, `LexicalEnvironment` с переменной большого объема внутри висит в памяти.
-
-Висит до тех пор, пока функция `inner` жива.
-
-Как правило, JavaScript не знает, какие из переменных функции `inner` будут использованы, поэтому оставляет их все. Исключение -- виртуальная машина V8 (Chrome, Opera, Node.JS), она часто (не всегда) видит, что переменная не используется во внутренних функциях, и очистит память.
-
-В других же интерпретаторах, даже если код спроектирован так, что никакой утечки нет, по вполне разумной причине может создаваться множество функций, а память будет расти потому, что функция тянет за собой своё замыкание. 
-
-Сэкономить память здесь вполне можно. Мы же знаем, что переменная `data` не используется в `inner`. Поэтому просто обнулим её:
-
-```js
-function f() {
-  var data = "Большое количество данных, например, переданных сервером"
-
-  /* действия с data */
-
-  function inner() {
-    // ...
-  }
-
-*!*
-  data = null; // когда data станет не нужна -
-*/!*
-
-  return inner;
-}
-```
-
-## Поиск и устранение утечек памяти
-
-### Проверка на утечки
-
-Существует множество шаблонов утечек и ошибок в браузерах, которые могут приводить к утечкам. Для их устранения сперва надо постараться изолировать и воспроизвести утечку.
-
-<ul>
-<li>**Необходимо помнить, что браузер может очистить память не сразу когда объект стал недостижим, а чуть позже.** Например, сборщик мусора может ждать, пока не будет достигнут определенный лимит использования памяти, или запускаться время от времени.</li>
-
-Поэтому если вы думаете, что нашли проблему и тестовый код, запущенный в цикле, течёт -- подождите примерно минуту, добейтесь, чтобы памяти ело стабильно и много. Тогда будет понятно, что это не особенность сборщика мусора.</li><li>**Если речь об IE, то надо смотреть "Виртуальную память" в списке процессов, а не только обычную "Память".** Обычная может очищаться за счет того, что перемещается в виртуальную (на диск).</li>
-<li>Для простоты отладки, если есть подозрение на утечку конкретных объектов, в них добавляют большие свойства-маркеры. Например, подойдет фрагмент текста: `new Array(999999).join('leak')`.</li>
-</ul>
-
-### Настройка браузера
-
-Утечки могут возникать из-за расширений браузера, взимодействющих со страницей. Еще более важно, что **утечки могут быть следствием конфликта двух браузерных расширений** Например, было такое: память текла когда включены расширения Skype и плагин антивируса одновременно.
-
-Чтобы понять, в расширениях дело или нет, нужно отключить их:
-
-<ol>
-<li>Отключить Flash.</li>
-<li>Отключить анивирусную защиту, проверку ссылок и другие модули и дополнения.</li>
-<li>Отключить плагины. Отключить ВСЕ плагины.
-<ul>
-<li>
- Для IE есть параметр коммандной строки:
-
-```
-"C:\Program Files\Internet Explorer\iexplore.exe" -extoff
-```
-
-Кроме того необходимо отключить сторонние расширения в свойствах IE.
-
-<img src="ie9_disable1.png">
-<img src="ie9_disable2.png">
-
-</li>
-<li>Firefox необходимо запускать с чистым профилем. Используйте следующую команду для запуска менеджера профилей и создания чистого пустого профиля:
-
-```
-firefox --profilemanager
-```
-
-</li>
-</ul>
-</li>
-</ol>
-
-## Инструменты
-
-Пожалуй, единственный браузер с поддержкой отладки памяти -- это Chrome. В инструментах разработчика вкладка Timeline -- Memory показывает график использования памяти.
-
-<img src="chrome.png">
-
-Можем посмотреть, сколько памяти и куда он использует.
-
-Также в Profiles есть кнопка Take Heap Snapshot, здесь можно сделать и исследовать снимок текущего состояния страницы. Снимки можно сравнивать друг с другом, выяснять количество новых объектов. Можно смотреть, почему объект не очищен и кто на него ссылается.
-
-Замечательная статья на эту тему есть в документации: [Chrome Developer Tools: Heap Profiling](http://code.google.com/chrome/devtools/docs/heap-profiling.html).
-
-Утечки памяти штука довольно сложная. В борьбе с ними вам определенно понадобится одна вещь: *Удача!*
-
-<img src="goodluck.png">
diff --git a/6-optimize/4-memory-leaks/chrome.png b/6-optimize/4-memory-leaks/chrome.png
deleted file mode 100644
index 0c88b10b..00000000
Binary files a/6-optimize/4-memory-leaks/chrome.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/goodluck.png b/6-optimize/4-memory-leaks/goodluck.png
deleted file mode 100644
index 918b5022..00000000
Binary files a/6-optimize/4-memory-leaks/goodluck.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/ie1.png b/6-optimize/4-memory-leaks/ie1.png
deleted file mode 100644
index ae04e2cc..00000000
Binary files a/6-optimize/4-memory-leaks/ie1.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/ie2.png b/6-optimize/4-memory-leaks/ie2.png
deleted file mode 100644
index 93617434..00000000
Binary files a/6-optimize/4-memory-leaks/ie2.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/ie9_disable1.png b/6-optimize/4-memory-leaks/ie9_disable1.png
deleted file mode 100644
index 84c98b78..00000000
Binary files a/6-optimize/4-memory-leaks/ie9_disable1.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/ie9_disable2.png b/6-optimize/4-memory-leaks/ie9_disable2.png
deleted file mode 100644
index 3817bc53..00000000
Binary files a/6-optimize/4-memory-leaks/ie9_disable2.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/leak-ie8-2.view/index.html b/6-optimize/4-memory-leaks/leak-ie8-2.view/index.html
deleted file mode 100644
index b89b80de..00000000
--- a/6-optimize/4-memory-leaks/leak-ie8-2.view/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=8">
-</head>
-
-<body>
-
-
-  <script>
-    // Утечка в IE8 standards mode, а также в IE9 в режиме IE8
-    // См. http://blog.j15r.com/2009/07/memory-leaks-in-ie8.html
-    function leak() {
-      // Создаём новый DIV, добавляем к BODY
-      var elem = document.createElement('div');
-      document.body.appendChild(elem);
-
-      elem.__expando = {
-        bigAss: new Array(1000000).join('lalala'),
-        method: function() {} // создаётся круговая ссылка через замыкание
-      };
-
-      // Удалить элемент из DOM. Браузер должен очистить память.
-      elem.parentElement.removeChild(elem);
-    }
-  </script>
-
-  <p>Нажимайте на кнопку и наблюдайте, как увеличивается количество занимаемой браузером памяти.</p>
-  <button onclick="leak()">Создать утечку!</button>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/6-optimize/4-memory-leaks/leak-ie8-table.view/index.html b/6-optimize/4-memory-leaks/leak-ie8-table.view/index.html
deleted file mode 100644
index e0017dce..00000000
--- a/6-optimize/4-memory-leaks/leak-ie8-table.view/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <script>
-    var elem = document.createElement('div'); // любой элемент
-
-    // Течёт в настоящем IE8, Standards Mode
-    // Не течёт в других IE. Не течёт в IE9 в режиме совместимости с IE8
-    function leak() {
-
-      for (var i = 0; i < 2000; i++) {
-
-        elem.innerHTML = '<table><tr><td>1</td></tr></table>';
-
-        elem.firstChild.rows[0]; // просто доступ через rows[] приводит к утечке
-        // при том, что мы даже без сохраненяем значение в переменную
-
-        elem.removeChild(elem.firstChild); // удалить таблицу
-        // elem.innerHTML = '' очистил бы память, он работает по-другому, см. главу "управление памятью"
-      }
-
-    }
-  </script>
-
-
-  <p>Нажимайте на кнопку и наблюдайте, как увеличивается количество занимаемой браузером памяти.</p>
-  <button onclick="leak()">Создать утечку!</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/6-optimize/4-memory-leaks/leak-ie8-widget.view/index.html b/6-optimize/4-memory-leaks/leak-ie8-widget.view/index.html
deleted file mode 100644
index 1bdd947c..00000000
--- a/6-optimize/4-memory-leaks/leak-ie8-widget.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=8">
-</head>
-
-<body>
-
-
-  <script>
-    // Утечка в IE8 standards mode, а также в IE9 в режиме IE8
-    // См. http://blog.j15r.com/2009/07/memory-leaks-in-ie8.html
-    function leak() {
-      // Создаём новый DIV, добавляем к BODY
-      var elem = document.createElement('div');
-      document.body.appendChild(elem);
-
-      // Записываем в свойство ссылку на объект
-      var menu = new Menu(elem);
-      elem.menu = menu;
-
-      // Удалить элемент из DOM. Браузер должен очистить память.
-      elem.parentElement.removeChild(elem);
-    }
-
-    function Menu(elem) {
-      elem.onclick = function() {};
-      this.bigAss = new Array(1000000).join('lalala');
-    }
-  </script>
-
-  <p>Нажимайте на кнопку и наблюдайте, как увеличивается количество занимаемой браузером памяти.</p>
-  <button onclick="leak()">Создать утечку!</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/6-optimize/4-memory-leaks/leak-ie8-xhr.view/index.html b/6-optimize/4-memory-leaks/leak-ie8-xhr.view/index.html
deleted file mode 100644
index 67329b91..00000000
--- a/6-optimize/4-memory-leaks/leak-ie8-xhr.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <p>Страница создаёт объект <code>XMLHttpRequest</code> каждые 50мс.</p>
-
-  <p>Нажмите на кнопку и смотрите на память, она течёт в IE&lt;9.</p>
-
-  <button onclick="setInterval(leak, 50);">Запустить</button>
-
-  <script>
-    function leak() {
-      var xhr = new XMLHttpRequest();
-
-      xhr.open('GET', '?' + Math.random(), true);
-
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4 && xhr.status == 200) {
-          document.getElementById('test').innerHTML++;
-        }
-      }
-
-      xhr.send(null);
-    }
-
-  </script>
-
-  <div>Количество запросов: <span id="test">0</span></div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/6-optimize/4-memory-leaks/leak-ie8.view/index.html b/6-optimize/4-memory-leaks/leak-ie8.view/index.html
deleted file mode 100644
index c2c1a4fc..00000000
--- a/6-optimize/4-memory-leaks/leak-ie8.view/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=8">
-</head>
-
-<body>
-
-
-  <script>
-    // Утечка в IE8 standards mode, а также в IE9 в режиме IE8
-    // См. http://blog.j15r.com/2009/07/memory-leaks-in-ie8.html
-    function leak() {
-      // Создаём новый DIV, добавляем к BODY
-      var elem = document.createElement('div');
-      document.body.appendChild(elem);
-
-      // Записываем в свойство жирный объект
-      elem.__expando = {
-        bigAss: new Array(1000000).join('lalala')
-      };
-
-      // Создаём круговую ссылку. Без этой строки утечки не будет.
-      elem.__expando.__elem = elem;
-
-      // Удалить элемент из DOM. Браузер должен очистить память.
-      elem.parentElement.removeChild(elem);
-    }
-  </script>
-
-  <p>Нажимайте на кнопку и наблюдайте, как увеличивается количество занимаемой браузером памяти.</p>
-  <button onclick="leak()">Создать утечку!</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/6-optimize/4-memory-leaks/leak-xhr-2.png b/6-optimize/4-memory-leaks/leak-xhr-2.png
deleted file mode 100644
index 9f9e90f4..00000000
Binary files a/6-optimize/4-memory-leaks/leak-xhr-2.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/leak-xhr-2@2x.png b/6-optimize/4-memory-leaks/leak-xhr-2@2x.png
deleted file mode 100644
index 4cbddbf5..00000000
Binary files a/6-optimize/4-memory-leaks/leak-xhr-2@2x.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/leak-xhr.png b/6-optimize/4-memory-leaks/leak-xhr.png
deleted file mode 100644
index a649f114..00000000
Binary files a/6-optimize/4-memory-leaks/leak-xhr.png and /dev/null differ
diff --git a/6-optimize/4-memory-leaks/leak-xhr@2x.png b/6-optimize/4-memory-leaks/leak-xhr@2x.png
deleted file mode 100644
index e71fca8e..00000000
Binary files a/6-optimize/4-memory-leaks/leak-xhr@2x.png and /dev/null differ
diff --git a/6-optimize/5-memory-leaks-jquery/article.md b/6-optimize/5-memory-leaks-jquery/article.md
deleted file mode 100644
index d6f36a92..00000000
--- a/6-optimize/5-memory-leaks-jquery/article.md
+++ /dev/null
@@ -1,144 +0,0 @@
-
-# Утечки памяти при использовании jQuery
-
-В jQuery для хранения обработчиков событий и других вспомогательных данных, связанных с DOM-элементами, используется внутренний объект, который в jQuery 1 доступен через <a href="http://api.jquery.com/jQuery.data/">$.data</a>.
-
-В jQuery 2 доступ к нему закрыт через замыкание, он стал локальной переменной внутри jQuery с именем `data_priv`, но в остальном всё работает точно так, как описано, и с теми же последствиями.
-
-## $.data
-
-Встроенная функция `$.data` позволяет хранить привязывать произвольные значения к DOM-узлам. 
-
-Например:
-
-```js
-//+ no-beautify
-// присвоить
-$(document).data('prop', { anything: "любой объект" }) 
-
-// прочитать
-alert( $(document).data('prop').anything ) // любой объект
-```
-
-Реализована она хитрым образом. Данные не хранятся в самом элементе, а во внутреннем объекте jQuery.
-
-jQuery-вызов `elem.data(prop, val)` делает следующее:
-
-<ol>
-<li>Элемент получает уникальный идентификатор, если у него такого еще нет:
-
-```js
-elem[jQuery.expando] = id = ++jQuery.uuid; // средствами jQuery
-```
-
-`jQuery.expando` -- это случайная строка, сгенерированная jQuery один раз при входе на страницу. Уникальное свойство, чтобы ничего важного не перезаписать.</li> 
-<li>...А сами данные сохраняются в специальном объекте `jQuery.cache`:
-
-```js
-//+ no-beautify
-jQuery.cache[id]['prop'] = { anything: "любой объект" };
-```
-
-</li>
-</ol>
-
-Когда данные считываются из элемента:
-
-<ol>
-<li>Уникальный идентификатор элемента извлекается из `id = elem[ jQuery.expando]`.
-<li>Данные считываются из `jQuery.cache[id]`.</li>
-</ol>
-  
-Смысл этого API в том, что DOM-элемент никогда не ссылается на JavaScript объект напрямую. Задействуется идентификатор, а сами данные хранятся в `jQuery.cache`. Утечек в IE не будет. 
-
-К тому же все данные известны библиотеке, так что можно клонировать с ними и т.п.
-
-Как побочный эффект -- возникает утечка памяти, если элемент удален из DOM без дополнительной очистки.
-
-## Примеры утечек в jQuery
-
-Следующая функция `leak` создает jQuery-утечку во всех браузерах:
-
-
-```html
-<!--+ run -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<div id="data"></div>
-
-<script>
-  function leak() {
-
-*!*
-    $('<div/>')
-      .html(new Array(1000).join('text'))
-      .click(function() {})
-      .appendTo('#data');
-
-    document.getElementById('data').innerHTML = '';
-*/!*
-
-  }
-
-  var interval = setInterval(leak, 10)
-</script>
-
-Утечка идёт...
-
-<input type="button" onclick="clearInterval(interval)" value="stop" />
-```
-
-
-Утечка происходит потому, что обработчик события в jQuery хранится в данных элемента. В строке `(*)` элемент удален очисткой родительского `innerHTML`, но в `jQuery.cache` данные остались. 
-
-Более того, система обработки событий в jQuery устроена так, что вместе с обработчиком в данных хранится и ссылка на элемент, так что в итоге оба -- и обработчик и элемент -- остаются в памяти вместе со всем замыканием!
-
-Ещё более простой пример утечки:
-
-Этот код также создает утечку:
-
-```js
-function leak() {
-  $('<div/>')
-    .click(function() {})
-}
-```
-
-...То есть, мы создаём элемент, вешаем на него обработчик... И всё.
-
-Такой код ведёт к утечке памяти как раз потому, что элемент `<div>` создан, но нигде не размещен :). После выполнения функции ссылка на него теряется. Но обработчик события `click` уже сохранил данные в `jQuery.cache`, которые застревают там навсегда.
-
-## Используем jQuery без утечек
-
-Чтобы избежать утечек, описанных выше, для удаления элементов используйте функции jQuery API, а не чистый JavaScript.
-
-Методы <a href="http://api.jquery.com/remove/">remove()</a>, <a href="http://api.jquery.com/empty">empty()</a> и <a href="http://api.jquery.com/html">html()</a> проверяют дочерние элементы на наличие данных и очищают их. Это несколько замедляет процедуру удаления, но зато освобождается память.
-
-К счастью обнаружить такие утечки легко. Проверьте размер `$.cache`. Если  он большой и растет, то изучите кэш, посмотрите, какие записи остаются и почему.
-
-## Улучшение производительности jQuery
-
-У способа организации внутренних данных, применённого в jQuery, есть важный побочный эффект. 
-
-Функции, удаляющие элементы, также должны удалить и связанные с ними внутренние данные. Для этого нужно для каждого удаляемого элемента проверить -- а нет ли чего во внутреннем хранилище? И, если есть -- удалить.
-
-Представим, что у нас есть большая таблица `<table>`, и мы хотим обновить её содержимое на новое. Вызов `$('table').html(новые данные)` перед вставкой новых данных аккуратно удалит старые: пробежит по всем ячейкам и проверит внутреннее хранилище.
-
-Если это большая таблица, то обработчики, скорее всего, стоят не на ячейках, а на самом элементе `<table>`, то есть используется делегирование. А, значит, тратить время на проверку всех подэлементов ни к чему.
-
-Но jQuery-то об этом не знает!
-
-Чтобы "грязно" удалить элемент, без чистки, мы можем сделать это через "обычные" DOM-вызовы или воспользоваться методом <a href="http://api.jquery.com/detach">detach()</a>. Его официальное назначение -- в том, чтобы убрать элемент из DOM, но сохранить возможность для вставки (и, соответственно, оставить на нём все данные). А неофициальное -- быстро убрать элемент из DOM, без чистки.
-
-Возможен и промежуточный вариант: никто не мешает сделать  `elem.detach()` и поместить вызов `elem.remove()` в `setTimeout`. В результате очистка будет происходить асинхронно и незаметно.
-
-## Итого
-
-<ul>
-<li>Утечки памяти при использовании jQuery возможны, если через DOM-методы удалять элементы, к которым привязаны данные или обработчики.</li>
-<li>Чтобы утечки не было, достаточно убедиться, что элемент удаляется при помощи методов jQuery.</li>
-<li>Побочный эффект -- при удалении элементов jQuery должна проверить наличие данных для них. Это сильно замедляет процесс удаления большого поддерева DOM.</li>
-<li>Если мы значем, что обработчиков и данных нет -- гораздо быстрее удалять элементы при помощи вызова `detach` или обычного DOM.</li>
-</ul>
-
-
diff --git a/6-optimize/6-memory-removechild-innerhtml/article.md b/6-optimize/6-memory-removechild-innerhtml/article.md
deleted file mode 100644
index 5882124d..00000000
--- a/6-optimize/6-memory-removechild-innerhtml/article.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# Очистка памяти при removeChild/innerHTML
-
-Управление памятью в случае с DOM работает по сути так же, как и с обычными JavaScript-объектами. Пока объект достижим -- он остаётся в памяти.
-
-Но есть и особенности, поскольку DOM весь переплетён ссылками. 
-[cut]
-## Пример
-Для примера рассмотрим следующий HTML:
-
-```html
-<html>
-
-<body>
-  <div>
-    <ul>
-      <li>Список</li>
-    </ul>
-    Сосед
-  </div>
-</body>
-
-</html>
-```
-
-Его DOM (показаны только основные ссылки):
-
-<img src="html.png">
-
-## Удаление removeChild 
-
-Операция `removeChild` разрывает все связи удаляемым узлом и его родителем.
-
-Поэтому, если удалить `DIV` из `BODY`, то всё поддерево под `DIV` станет недостижимым и будет удалено.
-
-А что происходит, если на какой-то элемент внутри удаляемого поддерева есть ссылка?
-
-Например, `UL` сохранён в переменную `list`:
-
-```js
-var list = document.getElementsByTagName('UL')[0];
-document.body.removeChild(document.body.children[0]);
-```
-
-В этом случае, так как из этого `UL` можно по ссылкам добраться до любого другого места DOM, то получается, что все объекты по-прежнему достижимы и должны остаться в памяти:
-
-<img src="html-list.png">
-
-То есть, DOM-объекты при использовании `removeChild` работают по той же логике, что и обычные объекты.
-
-## Удаление через innerHTML
-
-А вот удаление через очистку `elem.innerHTML="..."` браузеры интерпретируют по-разному.
-
-По идее, при присвоении `elem.innerHTML=html` из DOM должны удаляться предыдущие узлы и добавляться новые,  из указанного `html`. Но стандарт ничего не говорит о том, что делать с узлами после удаления. И тут разные браузеры имеют разное мнение.
-
-Посмотрим, что произойдёт с DOM-структурой при очистке `BODY`, если на какой-либо элемент есть ссылка.
-
-```js
-var list = document.getElementsByTagName('UL')[0];
-document.body.innerHTML = "";
-```
-
-Обращаю внимание -- связь разрывается только между `DIV` и `BODY`, т.е. на верхнем уровне, а `list` -- это произвольный элемент.
-
-Чтобы увидеть, что останется в памяти, а что нет -- запустим код:
-
-```html
-<!--+ run -->
-<div>
-  <ul>
-    <li>Список</li>
-  </ul>
-  Сосед
-</div>
-
-<script>
-  var list = document.getElementsByTagName('ul')[0];
-  document.body.innerHTML = ''; // удалили DIV 
-
-  alert( list.parentNode ); // цела ли ссылка UL -> DIV ?
-  alert( list.nextSibling ); // живы ли соседи UL ?
-  alert( list.children.length ); // живы ли потомки UL ?
-</script>
-```
-
-Как ни странно, браузеры ведут себя по-разному:
-
-<table>
-<thead>
-<tr><th></th>
-<th>`parentNode`</th>
-<th>`nextSibling`</th>
-<th>`children.length`</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Chrome/Safari/Opera</td>
-<td>`null`</td>
-<td>`null`</td>
-<td>`1`</td>
-</tr>
-<tr>
-<td>Firefox</td>
-<td>узел DOM</td>
-<td>узел DOM</td>
-<td>`1`</td>
-</tr>
-<tr>
-<td>IE 11-</td>
-<td>`null`</td>
-<td>`null`</td>
-<td>`0`</td>
-</tr>
-</tbody>
-</table>
-
-Иными словами, браузеры ведут себя с различной степенью агрессивности по отношению к элементам.
-
-<dl>
-<dt>Firefox</dt>
-<dd>Главный пацифист. Оставляет всё, на что есть ссылки, т.е. элемент, его родителя, соседей и детей, в точности как при `removeChild`.</dd>
-<dt>Chrome/Safari/Opera</dt>
-<dd>Считают, что раз мы задали ссылку на `UL`, то нам нужно только это поддерево, а остальные узлы (соседей, родителей) можно удалить.</dd>
-<dt>Internet Explorer</dt>
-<dd>Как ни странно, самый агрессивный. Удаляет вообще всё, кроме узла, на который есть ссылка. Это поведение одинаково для всех версий IE.</dd>
-</dl>
-
-На иллюстрации ниже показано, какую часть DOM оставит каждый из браузеров:
-<img src="html-innerhtml.png">
-
-## Итого
-
-Если на какой-то DOM-узел есть ссылка, то:
-
-<ul>
-<li>При использовании `removeChild` на родителе (или на этом узле, не важно) все узлы, достижимые из данного, остаются в памяти. 
-
-То есть, фактически, в памяти может остаться большая часть дерева DOM. Это даёт наибольшую свободу в коде, но может привести к большим "утечкам памяти" из-за сохранения данных, которые реально не нужны.</li>
-<li>При удалении через `innerHTML` браузеры ведут себя с различной степенью агрессивности. Кросс-браузерно гарантировано одно: сам узел, на который есть ссылка, останется в памяти.
-
-Поэтому обращаться к соседям и детям узла, предок которого удалён через присвоение `innerHTML`, нельзя.</li>
-</ul>
-
-
-
-
diff --git a/6-optimize/6-memory-removechild-innerhtml/html-innerhtml.png b/6-optimize/6-memory-removechild-innerhtml/html-innerhtml.png
deleted file mode 100644
index ac9a0794..00000000
Binary files a/6-optimize/6-memory-removechild-innerhtml/html-innerhtml.png and /dev/null differ
diff --git a/6-optimize/6-memory-removechild-innerhtml/html-list.png b/6-optimize/6-memory-removechild-innerhtml/html-list.png
deleted file mode 100644
index 1ffd8ace..00000000
Binary files a/6-optimize/6-memory-removechild-innerhtml/html-list.png and /dev/null differ
diff --git a/6-optimize/6-memory-removechild-innerhtml/html.png b/6-optimize/6-memory-removechild-innerhtml/html.png
deleted file mode 100644
index ca8da064..00000000
Binary files a/6-optimize/6-memory-removechild-innerhtml/html.png and /dev/null differ
diff --git a/6-optimize/7-gcc-advanced-optimization/article.md b/6-optimize/7-gcc-advanced-optimization/article.md
deleted file mode 100644
index f2a84d14..00000000
--- a/6-optimize/7-gcc-advanced-optimization/article.md
+++ /dev/null
@@ -1,530 +0,0 @@
-# GCC: продвинутые оптимизации
-
-Продвинутый режим оптимизации google closure compiler включается опцией <code>--compilation_level ADVANCED_OPTIMIZATIONS.</code>
-
-Слово "продвинутый" (advanced) здесь, пожалуй, не совсем подходит. Было бы более правильно назвать его "супер-агрессивный-ломающий-ваш-неподготовленный-код-режим". Кардинальное отличие применяемых оптимизаций от обычных (simple) -- в том, что они небезопасны.
-
-Чтобы им пользоваться -- надо уметь это делать.
-[cut]
-
-## Основной принцип продвинутого режима
-
-<ul>
-<li>Если в обычном режиме переименовываются только локальные переменные внутри функций, то в "продвинутом" -- на более короткие имена заменяется все.</li>
-<li>Если в обычном режиме удаляется недостижимый код после <code>return</code>, то в продвинутом -- вообще весь код, который не вызывается в явном виде.</li>
-</ul>
-
-Например, если запустить продвинутую оптимизацию на таком коде:
-
-```js
-// my.js
-function test(node) {
-  node.innerHTML = "newValue"
-}
-```
-
-Строка запуска компилятора:
-
-```
-java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js my.js
-```
-
-...То результат будет -- пустой файл. Google Closure Compiler увидит, что функция <code>test</code> не используется, и с чистой совестью вырежет ее.  
-
-А в следующем скрипте функция сохранится:
-
-```js
-function test(n) {
-  alert( "this is my test number " + n );
-}
-test(1);
-test(2);
-```
-
-После сжатия:
-
-```js
-function a(b) {
-  alert("this is my test number " + b)
-}
-a(1);
-a(2);
-```
-
-Здесь в скрипте присутствует явный вызов функции, поэтому она сохранилась.
-
-Конечно, есть способы, чтобы сохранить функции, вызов которых происходит вне скрипта, и мы их обязательно рассмотрим.
-
-**Продвинутый режим сжатия не предусматривает сохранения глобальных переменных. Он  переименовывает, инлайнит, удаляет вообще все символы, кроме зарезервированных.**
-
-Иначе говоря, продвинутый режим (ADVANCED_OPTIMIZATIONS), в отличие от простого (SIMPLE_OPTIMIZATIONS -- по умолчанию), вообще не заботится о доступности кода извне и сохранении ссылочной целостности относительно внешних скриптов. 
-
-Единственное, что он гарантирует -- это внутреннюю ссылочную целостность, и то -- при соблюдении ряда условий и практик программирования.  
-
-Собственно, за счет такого агрессивного подхода и достигается дополнительный эффект оптимизации и сжатия скриптов.
-
-[summary]
-То есть, продвинутый режим - это не просто "улучшенный обычный", а принципиально другой, небезопасный и обфусцирующий подход к сжатию.
-
-Этот режим является "фирменной фишкой" Google Closure Compiler, недоступной при использовании других компиляторов.
-[/summary]
-
-Для того, чтобы эффективно сжимать Google Closure Compiler в продвинутом режиме, нужно понимать, что и как он делает. Это мы сейчас обсудим.
-
-### Сохранение ссылочной целостности
-
-Чтобы использовать сжатый скрипт, мы должны иметь возможность вызывать функции под теми именами, которые им дали. 
-
-То есть, перед нами стоит задача *сохранения ссылочной целостности*, которая заключается в том, чтобы обеспечить доступность нужных функций для обращений по исходному имени извне скрипта. 
-
-Существует два способа сохранения внешней ссылочной целостности: экстерны и экспорты. Мы в подробностях рассмотрим оба, но перед этим необходимо упомянуть о модулях -- другой важнейшей возможности GCC.
-
-### Модули
-
-При сжатии GCC можно указать одновременно много JavaScript-файлов. "Эка невидаль, " -- скажете вы, и будете правы. Да, пока что ничего особого.
-
-Но в дополнение к этому можно явно указать, какие исходные файлы сжать в какие файлы результата. То есть, разбить итоговую сборку на модули.
-
-Так что страницы могут грузить модули по мере надобности. Например, по умолчанию -- главный, а дополнительная функциональность -- загружаться лишь там, где она нужна.
-
-Для такой сборки используется флаг компилятора `--module имя:количество файлов`.
-
-Например:
-
-```
-java -jar compiler.jar --js base.js --js main.js  --js admin.js --module
-first:2 --module second:1:first
-```
-
-Эта команда создаст модули: first.js и second.js.
-
-Первый модуль, который назван "first", создан из объединённого и оптимизированного кода первых двух файлов (`base.js` и `main.js`).
-
-Второй модуль, который назван "second", создан из `admin.js` -- это следующий аргумент `--js` после включенных в первый модуль. 
-
-Второй модуль в нашем случае зависит от первого. Флаг `--module second:1:first` как раз означает, что модуль `second` будет создан из одного файла после вошедших в предыдущий модуль (`first`) и зависит от модуля `first`. 
-
-А теперь -- самое вкусное.
-
-**Ссылочная целостность между всеми получившимися файлами гарантируется.**
-
-Если в одном функция `doFoo` заменена на `b`, то и в другом тоже будет использоваться `b`. 
-
-Это означает, что проблем между JS-файлами не будет. Они могут свободно вызывать друг друга без экспорта, пока находятся в единой модульной сборке.
-
-### Экстерны
-
-Экстерн (extern) -- имя, которое числится в специальном списке компилятора. Он должен быть определен вне скрипта, в файле экстернов.
-
-**Компилятор никогда не переименовывает экстерны.** 
-
-Например:
-
-```js
-document.onkeyup = function(event) {
-  alert(event.type)
-}
-```
-
-После продвинутого сжатия:
-
-```js
-document.onkeyup = function(a) {
-  alert(a.type)
-}
-```
-
-Как видите, переименованной оказалась только переменная `event`. Такое переименование заведомо безопасно, т.к. `event` -- локальная переменная.
-
-Почему компилятор не тронул остального? Попробуем другой вариант:
-
-```js
-document.blabla = function(event) {
-  alert(event.megaProperty)
-}
-```
-
-После компиляции:
-
-```js
-document.a = function(a) {
-  alert(a.b)
-}
-```
-
-Теперь компилятор переименовал и <code>blabla</code> и <code>megaProperty</code>. 
-
-Дело в том, что названия, использованные до этого, были во внутреннем списке экстернов компилятора. Этот список охватывает основные объекты браузеров и находится (под именем <code>externs.zip</code>) в корне архива <code>compiler.jar</code>.
-
-**Компилятор переименовывает имя списка экстернов только когда так названа локальная переменная.**
-
-Например:
-
-```js
-window.resetNode = function(node) {
-  var innerHTML = "test";
-  node.innerHTML = innerHTML;
-}
-```
-
-На выходе:
-
-```js
-window.a = function(a) {
-  a.innerHTML = "test"
-};
-```
-
-Как видите, внутренняя переменная <code>innerHTML</code> не просто переименована - она заинлайнена (заменена на значение). Так как переменная локальна, то любые действия внутри функции с ней безопасны.
-
-А свойство <code>innerHTML</code> не тронуто, как и объект <code>window</code> -- так как они в списке экстернов и не являются локальными переменными.
-
-Это приводит к следующему побочному эффекту. Иногда свойства, которые следовало бы сжать, не сжимаются. Например:
-
-```js
-window['User'] = function(name, type, age) {
-  this.name = name
-  this.type = type
-  this.age = age
-}
-```
-
-После сжатия:
-
-```js
-window.User = function(a, b, c) {
-  this.name = a;
-  this.type = b;
-  this.a = c
-};
-```
-
-Как видно, свойство <code>age</code> сжалось, а <code>name</code> и <code>type</code> -- нет. Это побочный эффект экстернов:  <code>name</code> и <code>type</code> -- в списке объектов браузера, и компилятор просто старается не наломать дров.
-
-Поэтому отметим еще одно полезное правило оптимизации:
-
-**Названия своих свойств не должны совпадать с зарезервированными словами (экстернами). Тогда они будут хорошо сжиматься.**
-
-Для задания списка экстернов их достаточно перечислить в файле и указать этот файл флагом <code>--externs &lt;файл экстернов.js&gt;</code>.
-
-При перечислении объектов в файле экстернов - объявляйте их и перечисляйте свойства. Все эти объявления никуда не идут, они используются только для создания списка, который обрабатывается компилятором.
-
-Например, файл `myexterns.js`:
-
-```js
-var dojo = {}
-dojo._scopeMap;
-```
-
-Использование такого файла при сжатии (опция <code>--externs myexterns.js</code>) приведет к тому, что все обращения к символам <code>dojo</code> и к <code>dojo._scopeMap</code> будут не сжаты, а оставлены "как есть".
-
-
-### Экспорт
-
-*Экспорт* -- программный ход, основанный на следующем правиле поведения компилятора.
-
-**Компилятор заменяет обращения к свойствам через кавычки на точку, и при этом не трогает название свойства.**
-
-Например, <code>window['User']</code> превратится в <code>window.User</code>, но не дальше. 
-
-Таким образом можно *"экспортировать"* нужные функции и объекты:
-
-```js
-function SayWidget(elem) {
-  this.elem = elem
-  this.init()
-}
-window['SayWidget'] = SayWidget;
-```
-
-На выходе:
-
-```js
-function a(b) {
-  this.a = b;
-  this.b()
-}
-window.SayWidget = a;
-```
-
-Обратим внимание -- сама функция <code>SayWidget</code> была переименована в <code>a</code>. Но затем -- экспортирована как <code>window.SayWidget</code>, и таким образом доступна внешним скриптам.
-
-Добавим пару методов в прототип:
-
-```js
-function SayWidget(elem) {
-  this.elem = elem;
-  this.init();
-}
-
-SayWidget.prototype = {
-  init: function() {
-    this.elem.style.display = 'none'
-  },
-
-  setSayHandler: function() {
-    this.elem.onclick = function() {
-      alert("hi")
-    };
-  }
-}
-
-window['SayWidget'] = SayWidget;
-SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler;
-```
-
-После сжатия:
-
-```js
-//+ no-beautify
-function a(b) {
-  this.a = b;
-  this.b()
-}
-a.prototype = {b:function() {
-  this.a.style.display = "none"
-}, c:function() {
-  this.a.onclick = function() {
-    alert("hi")
-  }
-}};
-window.SayWidget = a;
-a.prototype.setSayHandler = a.prototype.c;
-```
-
-Благодаря строке
-
-```js
-SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler
-```
-
-метод <code>setSayHandler</code> экспортирован и доступен для внешнего вызова.
-
-Сама строка экспорта выглядит довольно глупо. По виду -- присваиваем свойство самому себе. 
-
-Но логика сжатия GCC работает так, что такая конструкция является экспортом. Справа переименование свойства <code>setSayHandler</code> происходит, а слева -- нет.
-
-[smart header="Планируйте жизнь после сжатия"]
-
-Рассмотрим следующий код:
-
-```js
-window['Animal'] = function() {
-  this.blabla = 1;
-  this['blabla'] = 2;
-}
-```
-
-После сжатия:
-
-```js
-window.Animal = function() {
-  this.a = 1;
-  this.blabla = 2
-};
-```
-
-Как видно, первое обращение к свойству <code>blabla</code> сжалось, а второе (как и все аналогичные) -- преобразовалось в синтаксис через точку.
-В результате получили некорректное поведение кода. 
-
-Так что, используя продвинутый режим оптимизации, планируйте поведение кода после сжатия. 
-
-**Если где-то возможно обращение к свойствам через квадратные скобки по полному имени -- такое свойство должно быть экспортировано.**
-[/smart] 
-
-### goog.exportSymbol и goog.exportProperty
-
-В библиотеке [Google Closure Library](https://developers.google.com/closure/library/) для экспорта есть специальная функция <code>goog.exportSymbol</code>. Вызывается так:
-
-```js
-goog.exportSymbol('my.SayWidget', SayWidget)
-```
-
-Эта функция по сути работает также, как и рассмотренная выше строка с присвоением свойства, но при необходимости создает нужные объекты.
-
-Она аналогична коду:
-
-```js
-window['my'] = window['my'] || {}
-window['my']['SayWidget'] = SayWidget
-```
-
-То есть, если путь к объекту не существует -- <code>exportSymbol</code> создаст нужные пустые объекты.
-
-Функция <code>goog.exportProperty</code> экспортирует свойство объекта:
-
-```js
-goog.exportProperty(SayWidget.prototype, 'setSayHandler', SayWidget.prototype.setSayHandler)
-```
-
-Строка выше - то же самое, что и:
-
-```js
-SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler
-```
-
-Зачем они нужны, если все можно сделать простым присваиванием?
-
-Основная цель этих функций -- во взаимодействии с Google Closure Compiler. Они дают информацию компилятору об экспортах, которую он может использовать.
-
-Например, есть недокументированная внутренняя опция <code>externExportsPath</code>, которая генерирует из всех экспортов файл экстернов. Таким образом можно распространять откомпилированный JavaScript-файл как внешнюю библиотеку, с файлом экстернов для удобного внешнего связывания.
-
-Кроме того, экспорт через эти функциями удобен и нагляден. 
-
-Если вы используете продвинутый режим оптимизации, то можно взять их из файла base.js Google Closure Library. Можно и подключить этот файл целиком -- оптимизатор при продвинутом сжатии вырежет из него почти всё лишнее, так что overhead будет минимальным.
-
-### Отличия экспорта от экстерна
-
-Между экспортом и экстерном есть кое-что общее. И то и другое дает возможность доступа к объектам под исходным именем, до переименования.
-
-Но, в остальном, это совершенно разные вещи.
-
-<table>
-<thead>
-<tr>
-<th>Экстерн</th>
-<th>Экспорт</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Служит для тотального запрета на переименование всех обращений к свойству. 
-Задумано для сохранения обращений к стандартным объектам браузера, внешним библиотекам.</td>
-<td>Служит для открытия доступа к свойству извне под указанным именем. 
-Задумано для открытия внешнего интерфейса к сжатому скрипту.</td>
-</tr>
-<tr>
-<td>Работает со свойством, объявленным вне скрипта. 
-Вы не можете объявить новое свойство в скрипте и сделать его экстерном.</td>
-<td>Создает ссылку на свойство, объявленное в скрипте.</td>
-</tr>
-<tr>
-<td>Если <code>window</code> - экстерн, то все обращения к  <code>window</code> в скрипте останутся как есть.</td>
-<td>Если <code>user</code> экспортируется, то создается только одна ссылка под полным именем, а все остальные обращения будут сокращены.</td>
-</tr>
-</tbody>
-</table>
-
-
-## Стиль разработки
-
-Посмотрим, как сжиматель поведёт себя на следующем, типичном, объявлении библиотеки:
-
-```js
-(function(window, undefined) {
-
-  // пространство имен и локальная перменная для него
-  var MyFramework = window.MyFramework = {};
-
-  // функция фреймворка, доступная снаружи
-  MyFramework.publicOne = function() {
-    makeElem();
-  };
-
-  // приватная функция фреймворка
-  function makeElem() {
-    var div = document.createElement('div');
-    document.body.appendChild(div);
-  }
-
-  // еще какая-то функция
-  MyFramework.publicTwo = function() {};
-
-})(window);
-
-// использование
-MyFramework.publicOne();
-```
-
-Результат компиляции в обычном режиме:
-
-```js
-//+ no-beautify
-// java -jar compiler.jar --js myframework.js --formatting PRETTY_PRINT
-(function(a) {
-  a = a.MyFramework = {};
-  a.publicOne = function() {
-    var a = document.createElement("div");
-    document.body.appendChild(a)
-  };
-  a.publicTwo = function() {
-  }
-})(window);
-MyFramework.publicOne();
-```
-
-Это -- примерно то, что мы ожидали. Неиспользованный метод `publicTwo` остался, локальные свойства переименованы и заинлайнены.
-
-А теперь продвинутый режим:
-
-```js
-// --compilation_level ADVANCED_OPTIMIZATIONS
-window.a = {};
-MyFramework.b();
-```
-
-Оно не работает! Компилятор попросту не разобрался, что и как вызывается, и превратил рабочий JS-файл в один сплошной баг.
-
-В зависимости от версии GCC у вас может быть и что-то другое.
-
-Всё дело в том, что такой стиль объявления нетипичен для инструментов, которые в самом Google разрабатываются и сжимаются этим минификатором. 
-
-Типичный правильный стиль:
-
-```js
-// пространство имен и локальная перменная для него
-var MyFramework = {};
-
-MyFrameWork._makeElem = function() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-};
-
-MyFramework.publicOne = function() {
-  MyFramework._makeElem();
-};
-
-MyFramework.publicTwo = function() {};
-
-// использование
-MyFramework.publicOne();
-```
-
-Обычное сжатие здесь будет бесполезно, а вот продвинутый режим идеален:
-
-```js
-// в зависимости от версии GCC результат может отличаться
-MyFrameWork.a = function() {
-  var a = document.createElement("div");
-  document.body.appendChild(a)
-};
-MyFrameWork.a();
-```
-
-Google Closure Compiler не только разобрался в структуре и удалил лишний метод - он заинлайнил функции, чтобы итоговый размер получился минимальным.
-
-Как говорится, преимущества налицо.
-
-## Резюме
-
-Продвинутый режим оптимизации сжимает, оптимизирует и, при возможности, удаляет все свойства и методы, за исключением экстернов. 
-
-Это является принципиальным отличием, по сравнению с другими упаковщиками.
-
-Отказ от сохранения внешней ссылочной целостности с одной стороны позволяет увеличить уровень сжатия, но требует поддержки со стороны разработчика.
-
-Основная проблема этого сжатия -- усложнение разработки. Добавляется дополнительный уровень возможных проблем: сжатие. Конечно, можно отлаживать и сжатый код, для этого придуманы [Source Maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), но клиентская разработка и без того достаточно сложна.
-
-Поэтому его используют редко. 
-
-Как правило, есть две причины для использования продвинутого режима:
-<ol>
-<li>**Обфускация кода.** 
-
-Если в коде после обычного сжатия ещё как-то можно разобраться, то после продвинутого -- уже нет. Всё переименовано и заинлайнено. В теории это, конечно, возможно, но "порог входа" в такой код несоизмеримо выше. 
-
-Судя по виду скриптов на сайтах, созданных Google, сам Google жмет свои скрипты именно продвинутым режимом оптимизации. И библиотека Google Closure Library тоже рассчитана на него.</li>
-<li>**Хорошие сжатие виджетов, счётчиков.**
-
-Небольшой код, который отдаётся наружу, может быть сжат в продвинутом режиме. Так как он небольшой -- все ошибки можно легко исправить, а продвинутый режим гарантирует наилучшее сжатие.</li>
-</ol>
diff --git a/6-optimize/8-gcc-check-types/article.md b/6-optimize/8-gcc-check-types/article.md
deleted file mode 100644
index 8c625359..00000000
--- a/6-optimize/8-gcc-check-types/article.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# GCC: статическая проверка типов 
-
-Google Closure Compiler, как и любой кошерный компилятор, старается проверить правильность кода и предупредить о возможных ошибках.
-
-Первым делом он, разумеется, проверяет структуру кода и сразу же выдает такие ошибки как пропущенная скобка или лишняя запятая. 
-
-Но, кроме этого, он умеет проверять типы переменных, используя как свои собственные знания о встроенных javascript-функциях и преобразованиях типов, 
-так и информацию о типах из JSDoc, указываемую javascript-разработчиком.
-
-Это обеспечивает то, чем так гордятся компилируемые языки -- статическую проверку типов, что позволяет избежать лишних ошибок во время выполнения.
-[cut]
-
-Для вывода предупреждений при проверки типов используется флаг `--jscomp_warning checkTypes`.
-
-## Задание типа при помощи аннотации
-
-Самый очевидный способ задать тип -- это использовать аннотацию. Полный список аннотаций вы найдете в <a href="http://code.google.com/intl/ru/closure/compiler/docs/js-for-compiler.html">документации</a>.
-
-В следующем примере параметр <code>id</code> функции <code>f1</code> присваивается переменной <code>boolVar</code> другого типа:
-
-```js
-/** @param {number} id */
-function f(id) {
-  /** @type {boolean} */
-  var boolVar;
-
-  boolVar = id; // (!)
-}
-```
-
-Компиляция с флагом `--jscomp_warning checkTypes` выдаст предупреждение:
-
-```
-f.js:6: WARNING - assignment
-found   : number
-required: boolean
-        boolVar = id; // (!)
-        ^
-```
-
-Действительно: произошло присвоение значения типа <code>number</code> переменной типа <code>boolean</code>.
-
-Типы отслеживаются по цепочке вызовов.
-
-Еще пример, на этот раз вызов функции с некорректным параметром:
-
-```js
-/** @param {number} id */
-function f1(id) {
-  f2(id); // (!)
-}
-
-/** @param {string} id */
-function f2(id) {}
-```
-
-Такой вызов приведёт к предупреждению со стороны минификатора:
-
-```
-f2.js:3: WARNING - actual parameter 1 of f2 does not match formal parameter
-found   : number
-required: string
-  f2(id); // (!)
-     ^
-```
-
-Действительно, вызов функции <code>f2</code> произошел с числовым типом вместо строки. 
-
-**Отслеживание приведений и типов идёт при помощи графа взаимодействий и выведению (infer) типов, который строит GCC по коду.**
-
-## Знания о преобразовании типов
-
-Google Closure Compiler знает, как операторы javascript преобразуют типы. Такой код уже не выдаст ошибку:
-
-```js
-/** @param {number} id */
-function f1(id) {
-  /** @type {boolean} */
-  var boolVar;
-
-  boolVar = !!id
-}
-```
-
-Действительно - переменная преобразована к типу boolean двойным оператором НЕ.
-А код <code>boolVar = 'test-'+id</code> выдаст ошибку, т.к. конкатенация со строкой дает тип <code>string</code>.
-
-## Знание о типах встроенных функций, объектные типы
-
-Google Closure Compiler содержит описания большинства встроенных объектов и функций javascript вместе с типами параметров и результатов.
-
-Например, объектный тип <code>Node</code> соответствует узлу DOM. 
-
-Пример некорректного кода:
-
-```js
-/** @param {Node} node */
-function removeNode(node) {
-  node.parentNode.removeChild(node)
-}
-document.onclick = function() {
-  removeNode("123")
-}
-```
-
-Выдаст предупреждение
-
-```
-f3.js:7: WARNING - actual parameter 1 of removeNode does not match formal parameter
-found   : string
-required: (Node|null)
-  removeNode("123")
-             ^
-```
-
-Обратите внимание - в этом примере компилятор выдает <code>required: Node|null</code>. Это потому, что указание объектного типа (не элементарного) подразумевает, что в функцию может быть передан <code>null</code>.
-
-В следующем примере тип указан жестко, без возможности обнуления:
-
-```js
-*!*
-/** @param {!Node} node */
-*/!*
-function removeNode(node) {
-  node.parentNode.removeChild(node)
-}
-```
-
-Восклицательный знак означает, что параметр обязатален.
-
-Найти описания встроенных типов и объектов javascript вы можете в файле экстернов: <code>externs.zip</code> находится в корне архива <code>compiler.jar</code>.
-
-## Интеграция с проверками типов из Google Closure Library
-
-В Google Closure Library есть функции проверки типов: <code>goog.isArray</code>, <code>goog.isDef</code>, <code>goog.isNumber</code> и т.п.
-
-Google Closure Compiler знает о них и понимает, что внутри следующего <code>if</code> переменная может быть только функцией:
-
-```js
-var goog = {
-  isFunction: function(f) {
-    return typeof f == 'function'
-  }
-}
-
-if (goog.isFunction(func)) {
-  func.apply(1, 2)
-}
-```
-
-Сжатие с проверкой выдаст предупреждение:
-
-```
-f.js:6: WARNING - actual parameter 2 of Function.apply does not match formal parameter
-found   : number
-required: (Object|null|undefined)
-  func.apply(1, 2)
-                ^      ^
-```
-
-То есть, компилятор увидел, что код, использующий <code>func</code> находится в `if (goog.isFunction(func))` и сделал соответствующий вывод, что это в этой ветке `func` является функцией, а значит вызов `func.apply(1,2)` ошибочен (второй аргумент не может быть числом).
-
-Дело тут именно в интеграции с Google Closure Library. Если поменять `goog` на `g` -- предупреждения не будет. 
-
-## Резюме
-
-Из нескольких примеров, которые мы рассмотрели, должна быть понятна общая логика проверки типов.
-
-Соответствующие различным типам и ограничениям на типы аннотации вы можете найти в <a href="http://code.google.com/intl/ru/closure/compiler/docs/js-for-compiler.html">Документации Google</a>. В частности, возможно указание нескольких возможных типов, типа <code>undefined</code> и т.п.
-
-Также можно указывать количество и тип параметров функции, ключевого слова <code>this</code>, объявлять классы, приватные методы и интерфейсы.
-
-Проверка типов javascript, предоставляемая Google Closure Compiler -- пожалуй, самая продвинутая из существующих на сегодняшний день.
-
-C ней аннотации, документирующие типы и параметры, становятся не просто украшением, а реальным средством проверки, уменьшающим количество ошибок на production.
-
-Очень подробно проверка типов описана в книге [Closure: The Definitive Guide](http://www.ozon.ru/context/detail/id/6089988/), автора Michael Bolin.
\ No newline at end of file
diff --git a/6-optimize/9-gcc-closure-library/article.md b/6-optimize/9-gcc-closure-library/article.md
deleted file mode 100644
index 0c02e685..00000000
--- a/6-optimize/9-gcc-closure-library/article.md
+++ /dev/null
@@ -1,180 +0,0 @@
-# GCC: интеграция с Google Closure Library
-
-Google Closure Compiler содержит ряд специальных возможностей для интеграции с Google Closure Library. 
-
-Здесь важны две вещи.
-<ol>
-<li>Для их использования возможно использовать минимум от Google Closure Library. Например, взять одну или несколько функций из библиотеки.</li>
-<li>GCC -- расширяемый компилятор, можно добавить к нему свои "фазы оптимизации" для интеграции с другими инструментами и фреймворками.</li>
-</ol>
-[cut]
-
-Интеграция с Google Closure Library подключается флагом <code>--process_closure_primitives</code>, который по умолчанию установлен в <code>true</code>. То есть, она включена по умолчанию.
-
-Этот флаг запускает специальный проход компилятора, описанный классом <code>ProcessClosurePrimitives</code> и подключает дополнительную проверку типов <code>ClosureReverseAbstractInterpreter</code>. 
-
-Мы рассмотрим все действия, которые при этом происходят, а также некоторые опции, которые безопасным образом используют символы Google Closure Library  без объявления флага.
-
-## Преобразование основных символов
-
-Следующие действия описаны в классе <code>ProcessClosurePrimitives</code>.
-
-### Замена константы <code>COMPILED</code>
-
-В Google Closure Library есть переменная:
-
-```js
-/**
- * @define {boolean} ...
- */
-var COMPILED = false;
-```
-
-Проход <code>ProcessClosurePrimitives</code> переопределяет ее в <code>true</code> и использует это при оптимизациях, удаляя ветки кода, не предназначены для запуска на production.
-
-Такие функции существуют, например, в ядре Google Closure Library. К ним в первую очередь относятся вызовы, предназначенные для сборки и проверки зависимостей. Они содержат код, обрамленный проверкой <code>COMPILED</code>, например:
-
-```js
-goog.require = function(rule) {
-  // ...
-  if (!COMPILED) {
-    // основное тело функции
-  }
-}
-```
-
-Аналогично может поступить и любой скрипт, даже без использования Google Closure Library:
-
-```js
-/** @define {boolean} */
-var COMPILED = false
-
-Framework = {}
-
-Framework.sayCompiled = function() {
-  if (!COMPILED) {
-    alert("Not compressed")
-  } else {
-    alert("Compressed")
-  }
-}
-```
-
-Для того, чтобы сработало, нужно сжать в продвинутом режиме:
-
-```js
-Framework = {};
-Framework.sayCompiled = Framework.a = function() {
-  alert( "Compressed" );
-};
-```
-
-Компилятор переопределил <code>COMPILED</code> в <code>true</code> и произвел соответствующие оптимизации. 
-
-### Автоподстановка локали
-
-В Google Closure Compiler есть внутренняя опция <code>locale</code>
-
-Эта опция переопределяет переменную <code>goog.LOCALE</code> на установленную при компиляции.
-
-Для использования опции <code>locale</code>, на момент написания статьи, ее нужно задать в Java коде компилятора, т.к. соответствующего флага нет.
-
-Как и <code>COMPILED</code>, константу <code>goog.LOCALE</code> можно и использовать в своем коде без библиотеки Google Closure Library.
-
-### Проверка зависимостей
-
-Директивы <code>goog.provide</code>, <code>goog.require</code>, <code>goog.addDependency</code> обрабатываются особым образом.
-
-Все зависимости проверяются, а сами директивы проверки -- удаляются из сжатого файла.
-
-### Экспорт символов
-
-Вызов <code>goog.exportSymbol</code> задаёт экспорт символа.
-
-Если подробнее, то код <code>goog.exportSymbol('a',myVar)</code> эквивалентен 
-`window['a'] = myVar`.
-
-
-### Автозамена классов CSS
-
-Google Closure Library умеет преобразовывать классы CSS на более короткие по списку, который задаётся при помощи `goog.setCssNameMapping`.
-
-Например, следующая функция задает такой список.
-
-```js
- goog.setCssNameMapping({
-   "goog-menu": "a",
-   "goog-menu-disabled": "a-b",
-   "CSS_LOGO": "b",
-   "hidden": "c"
- });
-```
-
-Тогда следующий вызов преобразуется в "a a-b":
-
-```js
-goog.getCssName('goog-menu') + ' ' + goog.getCssName('goog-menu', 'disabled')
-```
-
-Google Closure Compiler производит соответствующие преобразования в сжатом файле и удаляет вызов <code>setCssNameMapping</code> из кода.
-
-Чтобы это сжатие работало, в HTML/CSS классы тоже должны сжиматься. По всей видимости, в приложениях Google это и происходит, но соответствующие инструменты закрыты от публики.
-
-### Генерация списка экстернов
-
-При объявлении внутренней опции <code>externExportsPath</code>, содержащей путь к файлу, в этот файл будут записаны все экспорты, описанные через <code>goog.exportSymbol</code>/<code>goog.exportProperty</code>.
-
-В дальнейшем этот файл может быть использован как список экстернов для компиляции.
-
-Эта опция может быть полезна для создания внешних библиотек, распространяемых со списком экстернов.
-
-Для её использования нужна своя обёртка вокруг компилятора на Java. Соответствующий проход компилятора описан в классе <code>ExternExportsPass</code>.
-
-### Проверка типов
-
-В Google Closure Library есть ряд функций для проверки типов. Например: <code>goog.isArray</code>, <code>goog.isString</code>, <code>goog.isNumber</code>, <code>goog.isDef</code> и т.п.
-
-Компилятор использует их для проверки типов, более подробно см. [](/gcc-check-types)
-
-Эта логика описана в классе <code>ClosureReverseAbstractInterpreter</code>. Названия функций, определяющих типы, жестко прописаны в Java-коде, поменять их на свои без модификации исходников нельзя. 
-
-### Автогенерация экспортов из аннотаций
-
-Для этого в Google Closure Compiler есть внутренняя опция <code>generateExports</code>.
-
-Эта недокументированная опция добавляет проход компилятора, описанный классом <code>GenerateExports</code>.
-
-Он читает аннотации <code>@export</code> и создает из них экспортирующие вызовы <code>goog.exportSymbol/exportProperty</code>. Название экспортирующих функций находится в классе соглашений кодирования, каким по умолчанию является <code>GoogleCodingConvention</code>.
-
-Например:
-
-```js
-/** @export */
-function Widget() {}
-  /** @export */
-Widget.prototype.hide = function() {
-  this.elem.style.display = 'none'
-}
-```
-
-После компиляции в продвинутом режиме:
-
-```js
-function a() {}
-goog.d("Widget", a);
-a.prototype.a = function() {
-  this.b.style.display = "none"
-};
-goog.c(a.prototype, "hide", a.prototype.a);
-```
-
-Свойства благополучно экспортированы. Удобно.
-
-### Резюме
-
-Google Closure Compiler содержит дополнительные фичи, облегчающие интеграцию с Google Closure Library. Некоторые из них весьма полезны, но требуют создания своего Java-файла, который ставит внутренние опции.
-
-При обработке символов компилятор не смотрит, подключена ли библиотека, он находит обрабатывает их просто по именам. Поэтому вы можете использовать свою реализацию соответствующих функций.
-
-Google Closure Compiler можно легко расширить, добавив свои опции и проходы оптимизатора, для интеграции с вашими инструментами.
-
diff --git a/6-optimize/index.md b/6-optimize/index.md
deleted file mode 100644
index 66af82f4..00000000
--- a/6-optimize/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Оптимизация
-
-Утечки памяти, увеличение скорости выполнения и загрузки скриптов.
-
diff --git a/7-frames-and-windows/1-window-methods/article.md b/7-frames-and-windows/1-window-methods/article.md
deleted file mode 100644
index ab697bb6..00000000
--- a/7-frames-and-windows/1-window-methods/article.md
+++ /dev/null
@@ -1,241 +0,0 @@
-# Открытие окон и методы window
-
-Всплывающее окно ("попап" -- от англ. Popup window) -- один из старейших способов показать пользователю ещё один документ.
-
-В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.
-
-[cut]
-
-Простейший пример:
-
-```js
-//+ run
-window.open("http://ya.ru");
-```
-
-...При запуске откроется новое окно с указанным URL.
-
-Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и "заказать" именно окно.
-
-## Блокировщик всплывающих окон
-
-Рекламные попапы очень надоели посетителям, аж со времён 20го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.
-
-**Всплывающее окно блокируется в том случае, если вызов `window.open` произошёл не в результате действия посетителя.**
-
-Как же браузер понимает -- посетитель вызвал открытие окна или нет?
-
-Для этого при работе скрипта он хранит внутренний "флаг", который говорит -- инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг "инициировано посетителем" и попапы при этом разрешены.
-
-А если код был на странице и выполнился автоматически при её загрузке -- у него этого флага не будет. Попапы будут заблокированы.
-
-
-## Полный синтаксис window.open
-
-Полный синтаксис:
-
-```js
-win = window.open(url, name, params)
-```
-
-Функция возвращает ссылку но объект `window` нового окна, либо `null`, если окно было заблокировано браузером.
-
-Параметры:
-
-<dl>
-<dt>`url`</dt>
-<dd>URL для загрузки в новое окно.</dd>
-<dt>`name`</dt>
-<dd>Имя нового окна. Может быть использовано в параметре `target` в формах. Если позднее вызвать `window.open()` с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.</dd>
-<dt>`params`</dt>
-<dd>Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.</dd>
-</dl>
-
-Значения параметров `params`.
-
-<ol>
-<li>Настройки расположения окна:
-
-<dl>
-<dt>`left/top` (число)</dt>
-<dd>Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционированно за пределами экрана.</dd>
-<dt>`width/height` (число)</dt>
-<dd>Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.</dd>
-</dl>
-
-Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.
-
-</li>
-<li>Свойства окна:
-<dl>
-<dt>`menubar` (yes/no)</dt>
-<dd>Скрыть или показать строку меню браузера.</dd>
-<dt>`toolbar` (yes/no)</dt>
-<dd>Показать или скрыть панель навигации браузера (кнопки назад, вперед, обновить страницу и остальные) в новом окне.</dd>
-<dt>`location` (yes/no)</dt>
-<dd>Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.</dd>
-<dt>`status` (yes/no)</dt>
-<dd>Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния.</dd>
-<dt>`resizable` (yes/no)</dt>
-<dd>Позволяет отключить возможность изменять размеры нового окна. Значение `no` обычно неудобно посетителям.</dd>
-<dt>`scrollbars` (yes/no)</dt>
-<dd>Разрешает убрать полосы прокрутки для нового окна. Значение `no` обычно неудобно посетителям.</dd>
-</dl>
-</li>
-<li>Еще есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: [window.open](https://developer.mozilla.org/en/DOM/window.open).</li>
-</ol>
-
-[warn]
-Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются "пожеланиями", нежели "требованиями".
-[/warn]
-
-Важные моменты:
-
-<ul>
-<li>Если при вызове `open` указан только первый параметр,  параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.</li>
-<li>Если указана строка с параметрами, но некоторые `yes/no` параметры отсутствуют, то браузер выставляет их в `no`. Поэтому убедитесь, что все нужные вам параметры выставлены в `yes`.</li>
-<li>Когда не указан `top/left`, то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.</li>
-<li>Если не указаны `width/height`, новое окно будет такого же размера, как последнее открытое.</li>
-</ul>
-
-## Доступ к новому окну
-
-Вызов `window.open` возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.
-
-В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:
-
-```js
-//+ run
-var newWin = window.open("about:blank", "hello", "width=200,height=200");
-
-newWin.document.write("Привет, мир!");
-```
-
-А здесь модифицируем содержимое после загрузки:
-
-```js
-//+ run
-var newWin = window.open('/', 'example', 'width=600,height=400');
-
-alert(newWin.location.href); // (*) about:blank, загрузка ещё не началась
-
-newWin.onload = function() {
-
-  // создать div в документе нового окна
-  var div = *!*newWin*/!*.document.createElement('div');
-  div.innerHTML = 'Добро пожаловать!'
-  div.style.fontSize = '30px'
-
-  // вставить первым элементом в body нового окна
-  body.insertBefore(div, newWin.document.body.firstChild);
-}
-```
-
-Обратим внимание: сразу после `window.open` новое окно ещё не загружено. Это демонстрирует `alert` в строке `(*)`. Поэтому в примере выше окно модифицируется при `onload`. Можно было и поставить обработчик на `DOMContentLoaded` для `newWin.document`.
-
-**Связь между окнами -- двухсторонняя.**
-
-Родительское окно получает ссылку на новое через `window.open`, а дочернее -- ссылку на родителя `window.opener`.
-
-Оно тоже может его модифицировать.
-
-Если запустить пример ниже, то новое окно заменит содержимое текущего на `'Test'`: 
-
-```js
-//+ run
-var newWin = window.open("about:blank", "hello", "width=200,height=200");
-
-newWin.document.write(
-  "<script>*!*window.opener.document.body.innerHTML = 'Test'*/!*</script>"
-);
-```
-
-
-[warn header="Same Origin Policy -- защита проверкой протокол-сайт-порт"]
-Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если URL нового окна происходит из того же источника (англ. - *"Same Origin"*), т.е. совпадают домен, протокол и порт.
-
-Иначе говоря, если новое окно содержит документ с того же сайта.
-
-Больше информации об этом будет позже, в главе [](/same-origin-policy).
-[/warn]
-
-
-## События
-
-Наиболее важные события при работе с окном браузера:
-
-<ul>
-<li>`onresize` -- событие изменения размера окна.</li>
-<li>`onscroll` -- событие при прокрутке окна.</li>
-<li>`onload` -- полностью загрузилась страница со всеми ресурсами.</li>
-<li>`onfocus/onblur` -- получение/потеря фокуса.</li>
-</ul>
-
-## Методы и свойства
-
-<dl>
-<dt>`window.closed`
-<dd>Свойство `window.closed` равно `true`, если окно закрыто. Может быть использовано, чтобы проверить, закрыл ли посетитель попап.</dd>
-<dt>`window.close()`</dt>
-<dd>Закрывает попап без предупреждений и уведомлений. Вообще, метод `close()` можно вызвать для любого окна, в том числе, текущего. Но если окно открыто не с помощью `window.open()`, то браузер может проигнорировать вызов `close` или запросить подтверждение.
-</dd>
-</dl>
-
-## Перемещение и изменение размеров окна
-
-Существует несколько методов для перемещения/изменения размеров окна.
-
-<dl>
-<dt>`win.moveBy(x,y)`</dt>
-<dd>Перемещает окно относительно текущего положения на `x` пикселей вправо и `y` пикселей вниз. Допускаются отрицательные значения.</dd>
-<dt>`win.moveTo(x,y)`</dt>
-<dd>Передвигает окно в заданную координатами `x` и `y` точку экрана монитора.</dd>
-<dt>`win.resizeBy(width,height)`</dt>
-<dd>Изменяет размер окна на заданную величину `width/height` (ширина/высота). Допускаются отрицательные значения.</dd>
-<dt>`win.resizeTo(width,height)`</dt>
-<dd>Изменяет размер окна на заданное значение.</dd>
-</dl>
-
-[warn]
-Чтобы предотвратить использование этих методов с плохими целями, браузеры часто блокируют их выполнение. Как правило, они работают, если окно `win` открыто вызовом [window.open](https://developer.mozilla.org/en-US/docs/Web/API/window.open) из JavaScript текущей страницы и в нём нет дополнительных вкладок.
-[/warn]
-
-[warn header="Ни свернуть ни развернуть"]
-Заметим, что JavaScript не может ни свернуть ни развернуть ни "максимизировать" (Windows) окно.
-
-Эти функции операционной системы от Frontend-разработчиков скрыты. Вызовы, описанные выше, в случае свёрнутого или максимизированного окна не работают.
-[/warn]
-
-## Прокрутка окна
-
-Прокрутка окна требуется, пожалуй, чаще всего. Мы уже говорили о ней в главе [](/metrics-window):
-
-<dl>
-<dt>`win.scrollBy(x,y)`</dt>
-<dd>
-Прокрутка окна на заданное число пикселей вперед или назад. Допускаются отрицательные значения.</dd>
-<dt>`win.scrollTo(x,y)`</dt>
-<dd>Прокручивает окно к заданным координатам.</dd>
-<dt>`elem.scrollIntoView(top)`</dt>
-<dd>Этот метод прокрутки вызывается на элементе. При этом окно прокручивается так, чтобы элемент был полностью видим. Если параметр `top` равен `true` или не задан, то верх элемента совпадает с верхом окна. Если он равен `false`, то окно прокручивается так, чтобы нижний край элемента совпал с нижним краем окна.
-</dd>
-</dl>
-
-
-## Итого
-
-<ul>
-<li>Всплывающее окно открывается с помощью вызова `window.open(url, name, params)`.</li>
-<li>Метод `window.open` возвращает ссылку на новое окно или `null`, если окно было заблокировано.</li>
-<li>Современные браузеры блокируют окна, если `window.open` вызвано не в результате действия посетителя.</li>
-<li>Обычно открывается вкладка, но если заданы размеры и позиция -- то именно окно.</li>
-<li>Новое окно имеет ссылку на родительское в `window.opener`.</li>
-<li>Окна могут общаться между собой как угодно, если они из одного источника. Иначе действуют жёсткие ограничения безопасности.</li>
-</ul>
-
-Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, с помощью технологии AJAX, а показать -- в элементе `<div>`, расположенным над страницей (`z-index`). Ещё одна альтернатива -- тег `<iframe>`.
-
-Но в некоторых случаях всплывающие окна бывают очень даже полезны. Например, отдельное окно сервиса онлайн-консультаций. Посетитель может ходить по сайту в основном окне, а общаться в чате -- во вспомогательном.
-
-Если вы хотите использовать всплывающее окно, предупредите посетителя об этом, так же и при использовании `target="_blank"` в ссылках или формах. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.
-
diff --git a/7-frames-and-windows/2-iframes/article.md b/7-frames-and-windows/2-iframes/article.md
deleted file mode 100644
index 640d7df1..00000000
--- a/7-frames-and-windows/2-iframes/article.md
+++ /dev/null
@@ -1,178 +0,0 @@
-# Общение между окнами и фреймами
-
-Элемент `iframe` является обычным узлом DOM, как и любой другой. Существенное отличие -- в том, что с ним связан объект `window` внутреннего окна. Он доступен по ссылке `iframe.contentWindow`.
-
-[cut]
-
-Таким образом, `iframe.contentWindow.document` будет внутренним документом, `iframe.contentWindow.document.body` -- его `<body>` и так далее.
-
-[smart header="Когда-то..."]
-В старых браузерах использовались другие свойства, такие как `iframe.contentDocument` и даже `iframe.document`, но они давно не нужны.
-[/smart]
-
-## Переход внутрь ифрейма
-
-В примере ниже JavaScript получает документ внутри ифрейма и модифицирует его:
-
-```html
-<!--+ run height=100 -->
-<iframe src="javascript:'тест'" style="height:60px"></iframe>
-
-<script>
-  var iframe = document.getElementsByTagName('iframe')[0];
-
-  var iframeDoc = iframe.contentWindow.document;
-  
-  if (iframeDoc.readyState == 'complete') {
-    iframeDoc.body.style.backgroundColor = 'green';
-  } 
-  iframe.onload = function() {
-    var iframeDoc2 = iframe.contentWindow.document;
-    iframeDoc2.body.style.backgroundColor = 'orange';
-  }
-</script>
-```
-
-[smart header="src='javascript:\"текст\"'"]
-Атрибут `src` может использовать протокол `javascript`, как указано выше: `src="javascript:код"`. При этом код выполняется и его результат будет содержимым ифрейма. Этот способ описан в стандарте и поддерживается всеми браузерами.
-
-Атрибут `src` является обязательным, и его отсутствие может привести к проблемам, вплоть до игнорирования ифрейма браузером. Чтобы ничего не загружать в ифрейм, можно указать пустую строку: `src="javascript:''"` или специальную страницу: `src="about:blank"`.
-[/smart]
-
-В некоторых браузерах (Chrome) пример выше покажет `iframe` зелёным. А в некоторых (Firefox) -- оранжевым.
-
-Дело в том, что, когда `iframe` только создан, документ в нём обычно ещё не загружен. 
-
-При обычных значениях `iframe src="..."`, которые указывают на HTML-страницу (даже если она уже в кеше), это всегда так. Документ, который в `iframe` на момент срабатывания скрипта `iframeDoc` -- временный, он будет заменён на новый очень скоро. И работать надо уже с новым документом `iframeDoc2` -- например, по событию `iframe.onload`.
-
-В случае с `javascript`-протоколом, по идее, ифрейм уже загружен, и тогда `onload` у него уже не будет. Но здесь мнения браузеров расходятся, некоторые (Firefox) всё равно "подгрузят" документ позже. Поэтому факт "готовности" документа в скрипте проверяется через `iframeDoc.readyState`.  
-
-Ещё раз заметим, что при обычных URL в качестве `src` нужно работать не с начальным документом, а с тем, который появится позже.
-
-## Кросс-доменность: ограничение доступа к окну
-
-Элемент `<iframe>` является "двуличным". С одной стороны, это обычный узел DOM, с другой -- внутри находится окно, которое может иметь совершенно другой URL, содержать независимый документ из другого источника.
-
-Внешний документ имеет полный доступ к `<iframe>` как к DOM-узлу. А вот к окну -- если они с одного источника.
-
-Это приводит к забавным последствиям. Например, чтобы узнать об окончании загрузки `<iframe>`, мы можем повесить обработчик `iframe.onload`. По сути, это то же самое что `iframe.contentWindow.onload`, но его мы можем поставить лишь в случае, если окно с того же источника.
-
-```html
-<!--+ run height=120 -->
-<iframe src="https://example.com" style="height:100px"></iframe>
-
-<script>
-  var iframe = document.getElementsByTagName('iframe')[0];
-
-  // сработает
-  iframe.onload = function() {
-    alert( "iframe onload" );
-  };
-
-  // не сработает
-  iframe.contentWindow.onload = function() {
-    alert( "contentWindow onload" );
-  };
-</script>
-```
-
-Если бы в примере выше `<iframe src>` был с текущего сайта, то оба обработчика сработали бы.
-
-## Иерархия window.frames   
-
-Альтернативный способ доступа к окну ифрейма -- это получить его из коллекции `window.frames`.
-
-Есть два способа доступа:
-<ol>
-<li>`window.frames[0]` -- доступ по номеру.</li>
-<li>`window.frames.iframeName` -- доступ по `name` ифрейма.</li>
-</ol>
-
-Обратим внимание: в коллекции хранится именно окно (`contentWindow`), а не DOM-элемент.
-
-Демонстрация всех способов доступа к окну:
-
-```html
-<!--+ run -->
-<iframe src="javascript:''" style="height:80px" name="i"></iframe>
-
-<script>
-  var iframeTag = document.body.children[0];
-
-  var iframeWindow = iframe.contentWindow; // окно из тега
-
-  alert( frames[0] === iframeWindow ); // true, окно из коллекции frames
-  alert( frames.i == iframeWindow ); // true, окно из frames по имени
-</script>
-```
-
-Внутри ифрейма могут быть свои вложенные ифреймы. Всё это вместе образует иерархию.
-
-Ссылки для навигации по ней:
-
-<ul>
-<li>`window.frames` -- коллекция "детей" (вложенных ифреймов)</li>
-<li>`window.parent` -- содержит ссылку на родительское окно, позволяет обратиться к нему из ифрейма.
-
-Всегда верно:
-
-```js
-// (из окна со фреймом)
-window.frames[0].parent === window; // true
-```
-
-</li>
-<li>`window.top` -- содержит ссылку на самое верхнее окно (вершину иерархии).
-
-Всегда верно (в предположении, что вложенные фреймы существуют):
-
-```js
-window.frames[0].frames[0].frames[0].top === window
-```
-
-</li>
-</ul>
-
-**Свойство `top` позволяет легко проверить, во фрейме ли находится текущий документ:**
-
-```js
-//+ run
-if (window == top) {
-  alert( 'Этот скрипт является окном верхнего уровня в браузере' );
-} else {
-  alert( 'Этот скрипт исполняется во фрейме!' );
-}
-```
-
-## Песочница sandbox
-
-Атрибут `sandbox` позволяет построить "песочницу" вокруг ифрейма, запретив ему выполнять ряд действий.
-
-Наличие атрибута `sandbox`:
-<ul>
-<li>Заставляет браузер считать ифрейм загруженным с другого источника, так что он и внешнее окно больше не могут обращаться к переменным друг друга.</li>
-<li>Отключает формы и скрипты в ифрейме.</li>
-<li>Запрещает менять `parent.location` из ифрейма.</li>
-</ul>
-
-Пример ниже загружает в `<iframe sandbox>` документ с JavaScript и формой. Ни то ни другое не сработает:
-
-[codetabs src="sandbox"]
-
-Если у атрибута `sandbox` нет значения, то браузер применяет максимум ограничений.
-
-Атрибут `sandbox` может содержать через пробел список ограничений, которые не нужны:
-<dl>
-<dt>allow-same-origin</dt>
-<dd>Браузер будет считать документ в ифрейме пришедшим с другого домена и накладывать соответствущие ограничения на работу с ним. Если ифрейм и так с другого домена, то ничего не меняется.</dd>
-<dt>allow-top-navigation</dt>
-<dd>Разрешает ифрейму менять `parent.location`.</dd>
-<dt>allow-forms</dt>
-<dd>Разрешает отправлять формы из `iframe`.</dd>
-<dt>allow-scripts</dt>
-<dd>Разрешает выполнение скриптов из ифрейма. Но скриптам, всё же, будет запрещено открывать попапы.</dd>
-</dl>
-
-[smart]
-Цель атрибута `sandbox` -- наложить дополнительные ограничения. Он не может снять уже существующие, в частности, убрать ограничения безопасности, если ифрейм с другого источника. 
-[/smart]
\ No newline at end of file
diff --git a/7-frames-and-windows/2-iframes/sandbox.view/index.html b/7-frames-and-windows/2-iframes/sandbox.view/index.html
deleted file mode 100644
index 7e7467c1..00000000
--- a/7-frames-and-windows/2-iframes/sandbox.view/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <iframe sandbox src="sandboxed.html"></iframe>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/2-iframes/sandbox.view/sandboxed.html b/7-frames-and-windows/2-iframes/sandbox.view/sandboxed.html
deleted file mode 100644
index d4a22752..00000000
--- a/7-frames-and-windows/2-iframes/sandbox.view/sandboxed.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <script>
-    alert(1);
-  </script>
-
-  <form action="http://google.ru">
-    <input type="text">
-    <input type="submit" value="Отправить форму на http://google.ru">
-  </form>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/3-same-origin-policy/article.md b/7-frames-and-windows/3-same-origin-policy/article.md
deleted file mode 100644
index ec760b69..00000000
--- a/7-frames-and-windows/3-same-origin-policy/article.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# Кросс-доменные ограничения и их обход
-
-Ограничение "Same Origin" ("тот же источник") ограничивает доступ окон и фреймов друг к другу, а также влияет на AJAX-запросы к серверу.
-
-Причина, по которой оно существует -- безопасность. Если есть два окна, в одном из которых `vasya-pupkin.com`, а в другом `gmail.com`, то мы бы не хотели, чтобы скрипт из первого мог читать нашу почту.
-
-Сама концепция проста, но есть много важных исключений и особенностей, которые нужно знать для полного понимания этого правила.
-[cut]
-
-## Концепция Same Origin [#same-origin]
-
-Два URL считаются имеющим один источник ("same origin"), если у них одинаковый протокол, домен и порт.
-
-Эти URL имеют один источник:
-<ul>
-<li>`http://site.com`</li>
-<li>`http://site.com`/</li>
-<li>`http://site.com/my/page.html`</li>
-</ul>
-
-А вот эти -- все из других источников:
-<ul>
-<li>http://<span style="color:red;font-weight:bold">www.</span>site.com (другой домен)</li>
-<li>http://site.<span style="color:red;font-weight:bold">org</span>  (другой домен)</li>
-<li>http<span style="color:red; font-weight:bold">s</span>://site.com  (другой протокол)</li>
-<li>http://site.com<span style="color:red; font-weight:bold">:8080</span>  (другой порт)</li>
-</ul>
-
-Существует ряд исключений, позволяющих-таки окнам с разных доменов обмениваться информацией, но прямой вызов методов друг друга и чтение свойств запрещены.
-
-## В действии
-
-Если одно окно попытается обратиться к другому, то браузер проверит, из одного ли они источника. Если нет -- доступ будет запрещён.
-
-Например:
-
-```html
-<!--+ run -->
-<iframe src="https://example.com"></iframe>
-
-<script>
-  var iframe = document.body.children[0];
-
-  iframe.onload = function() {
-    try {
-      alert( iframe.contentWindow.document );
-    } catch (e) {
-      alert( "Ошибка: " + e.message );
-    }
-  }
-</script>
-```
-
-Пример выше выведет ошибку.
-
-## Исключение: запись в location
-
-Окна могут менять `location` друг друга, даже если они из разных источников.
-
-Причём *читать* свойства `location` нельзя, одно окно не имеет право знать, на каком URL пользователь в другом. А вот *запись* браузеры считают безопасной.
-
-Например, открыв на `javascript.ru` iframe с `http://example.com`, из этого ифрейма нельзя будет прочитать URL, а вот поменять его -- запросто:
-
-```html
-<!--+ run -->
-<iframe src="https://example.com"></iframe>
-
-<script>
-  var iframe = document.body.children[0];
-
-  iframe.onload = function() {
-    try {
-      // не сработает (чтение)
-      alert( iframe.contentWindow.location.href );
-    } catch (e) {
-      alert( "Ошибка при чтении: " + e.message );
-    }
-
-    // сработает (запись)
-    iframe.contentWindow.location.href = 'https://wikipedia.org';
-
-    iframe.onload = null;
-  }
-</script>
-```
-
-Если запустить код выше, то окно сначала начнёт  загрузит `example.com`, а потом будет перенаправлено на `wikipedia.org`. 
-
-## Исключение: поддомен 3го уровня
-
-Ещё одно важное исключение касается доменов третьего уровня.
-
-Если несколько окон имеют общий домен второго уровня, к примеру `john.site.com`, `peter.site.com`, `site.com`, и присваивают в `document.domain` свой общий поддомен 2го уровня `site.com`, то все ограничения снимаются.
-
-То есть, на всех этих сайтах должен быть код:
-```js
-document.domain = 'site.com';
-```
-
-Тогда между ними не будет кросс-доменных ограничений.
-
-Обратим внимание: свойство `document.domain` должно быть присвоено на всех окнах, участвующих в коммуникации. Выглядит абсурдно, но даже на документе с `site.com` нужно вызвать: `document.domain="site.com"`. Иначе не  будет работать.
-
-Таким образом разные подсайты в рамках одного общего проекта могут взаимодействовать без ограничений.
-
-## Исключения в IE
-
-В браузере Internet Explorer есть два своих, дополнительных исключения из Same Origin Policy.
-
-<ol>
-<li>Порт не входит в понятие "источник" (origin).
-
-Это означает, что окно с `http://site.com` может свободно общаться с `http://site.com:8080`. 
-
-Это иногда используют для общения серверов, использующих один IP-адрес. Но допустимо такое только в IE.</li>
-<li>Если сайт находится в зоне "Надёжные узлы", то в Internet Explorer ограничения к нему не применяются.
-
-При этом подразумевается, что для этой зоны в параметрах "Безопасность" включена опция "Доступ к источникам данных за пределами домена".</li>
-</ol>
-
-## Итого
-
-Ограничение "одного источника" запрещает окнам и фреймам с разных источников вызывать методы друг друга и читать данные друг из друга.
-
-При этом "из одного источника" означает "совпадают протокол, домен и порт".
-
-У этого подхода ряд существенных исключений:
-
-<ul>
-<li>Свойства `window.location.*` нельзя читать, но можно менять.</li>
-<li>Домены третьего уровня с общим наддоменом могут поменять `document.domain` на их общий домен второго уровня, и тогда они смогут взаимодействовать без ограничений.
-</li>
-<li>IE не включает порт в понятие источника. Кроме того, он позволяет снять ограничения для конкретного сайта включением в доверенную зону.</li>
-</ul>
-
diff --git a/7-frames-and-windows/4-cross-window-messaging-with-postmessage/article.md b/7-frames-and-windows/4-cross-window-messaging-with-postmessage/article.md
deleted file mode 100644
index 12cd7e6d..00000000
--- a/7-frames-and-windows/4-cross-window-messaging-with-postmessage/article.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Общение окон с разных доменов: postMessage 
-
-Интерфейс `postMessage` позволяет общаться друг с другом окнам и ифреймам с разных доменов.
-
-Он очень удобен, например, для взаимодействия внешних виджетов и сервисов, подключённых через ифрейм с основной страницей.
-[cut]
-
-## Отправитель: метод postMessage
-
-Первая часть интерфейса состоит из метода [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage). Его вызывает окно, которое хочет отправить сообщение, в контексте окна-получателя.
-
-Проще говоря, если мы хотим отправить сообщение в окно `win`, то нужно вызвать `win.postMessage(data, targetOrigin)`.
-
-Аргументы:
-
-<dl>
-<dt>data</dt>
-<dd>Данные. По спецификации, это может быть любой объект, который будет *клонирован с сохранением структуры* при передаче. 
-
-Но IE поддерживает только строки, поэтому обычно данные JSON-сериализуют.</dd>
-<dt>targetOrigin</dt>
-<dd>Разрешить получение сообщения только окнам с данного источника. 
-
-Мы ведь не можем из JavaScript узнать, на каком именно URL находится другое окно. Но иногда хочется быть уверенным, что данные передаются в доверенный документ. Для этого и нужен этот параметр. Проверку осуществляет браузер. При указании `'*'` ограничений нет.</dd>
-</dl>
-
-Например:
-```html
-<!--+ no-beautify -->
-<iframe src="http://target.com" name="target">
-
-<script>
-  var win = window.frames.target;
-  win.postMessage("сообщение", "http://javascript.ru");
-</script>
-```
-
-
-[warn header="В IE11- можно использовать `postMessage` только для ифреймов"]
-
-В браузере IE, интерфейс `postMessage` работает только с ифреймами. Он не работает между табами и окнами. 
-
-Это ошибка в данном конкретном браузере, в других -- всё в порядке. Детали по этой и связанным с ней ошибкам: [HTML5 Implementation Issues in IE8 and later](http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx).
-[/warn]
-
-## Получатель: событие onmessage
-
-Чтобы получить сообщение, окно должно поставить обработчик на событие `onmessage`.
-
-Свойства объекта события:
-<dl>
-<dt>`data`</dt>
-<dd>Присланные данные</dd>
-<dt>`origin`</dt>
-<dd>Источник, из которого пришло сообщение, например `http://javascript.ru`.</dd>
-<dt>`source`</dt>
-<dd>Ссылка на окно, с которого пришло сообщение. Можно тут же ответить.</dd>
-</dl>
-
-Назначать обработчик нужно обязательно через методы `addEventListener/attachEvent`, например:
-
-```js
-function listener(event) {
-  if (event.origin != 'http://javascript.ru') {
-    // что-то прислали с неизвестного домена - проигнорируем..    
-    return;
-  }
-
-  alert( "получено: " + event.data );
-}
-
-if (window.addEventListener) {
-  window.addEventListener("message", listener);
-} else {
-  // IE8
-  window.attachEvent("onmessage", listener);
-}
-```
-
-[smart header="Задержка отсутствуют"]
-Задержки между отправкой и получением нет, совсем.
-
-Если для `setTimeout` стандарт предусматривает минимальную задержку 4мс, то для `postMessage` она равна 0мс.
-Поэтому `postMessage` можно, в том числе, использовать как мгновенную альтернативу `setTimeout`.
-[/smart]
-
-## Итого
-
-Интерфейс `postMessage` позволяет общаться окнам и ифреймам с разных доменов (в IE8 -- только ифреймы), при этом обеспечивая проверки безопасности.
-
-<ol>
-<li>Отправитель вызывает `targetWin.postMessage(data, targetOrigin)`.</li>
-<li>Если `targetOrigin` не `'*'`, то браузер проверяет, совпадает ли источник с `targetWin`.</li>
-<li>Если совпадает, то на `targetWin` генерируется событие `onmessage`, в котором передаются:
-<ul>
-<li>`origin` -- источник, с которого пришло сообщение.</li>
-<li>`source` -- ссылка на окно-отправитель.</li>
-<li>`data` -- данные. Везде, кроме IE, допустимы объекты, которые клонируются, а в IE -- только строка.</li>
-</ul>
-</li>
-<li>Обработчик на `onmessage` необходимо вешать при помощи специализированных методов `addEventListener/attachEvent`.</li>
-</ol>
diff --git a/7-frames-and-windows/5-window-focus/article.md b/7-frames-and-windows/5-window-focus/article.md
deleted file mode 100644
index f23bc0ce..00000000
--- a/7-frames-and-windows/5-window-focus/article.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# Привлечение внимания к окну
-
-Проверить, находится ли окно в фокусе, а также перевести внимание посетителя на него -- сложно. 
-
-В первую очередь, это потому, что JavaScript не интегрирован с оконным менеджером ОС. Кроме того, браузер охраняет права посетителя: если он хочет скрыть окно, то JavaScript не может его остановить.
-
-Но кое-что сделать, конечно, можно. Об этом и поговорим.
-[cut]
-
-
-## Метод window.focus 
-
-Метод `window.focus` позволяет сфокусироваться на окне. Он работает по-разному в разных ОС и браузерах.
-
-Проверьте, например:
-
-```js
-//+ run no-beautify
-setInterval(function() { window.focus() }, 1000);
-```
-
-Что будет, если запустить этот код, и затем переключиться в другое окно или вкладку?
-
-Можно подумать, что окно будет оказываться в фокусе раз в секунду. Но это не так.
-
-Произойдет одно из трех:
- 
-<ol>
-<li>Вообще никакого эффекта. Самый распространённый случай, если в окне много вкладок.</li>
-<li>Окно развернется (при необходимости) и выйдет на передний план. Обычно это происходит, когда метод `window.focus()` вызывается для попапа, а активно  сейчас -- главное окно. То есть, в этом случае вызов сработает.</li>
-<li>Заголовок окна начнет мигать. Чтобы увидеть это в действии -- откройте данную страницу в IE, запустите код и переключитесь на другое окно. Браузер попытается привлечь Ваше внимание миганием/мерцанием заголовка окна.</li>
-</ol>
-
-
-## Мерцание заголовка
-
-В дополнение к `window.focus()` используют мерцание заголовка окна, как показано в примере ниже:
-
-```html
-<!--+ run -->
-<script>
-  var win = open('/', 'test', 'width=300,height=300')
-
-  function getAttention(win) {
-    if (win.closed) {
-      alert( "Окно закрыто, привлечь внимание к нему нельзя" );
-      return;
-    }
-
-    win.focus();
-    var i = 0;
-    var show = ['************', win.document.title];
-
-    var focusTimer = setInterval(function() {
-      if (win.closed) {
-        clearInterval(focusTimer);
-        return;
-      }
-      win.document.title = show[i++ % 2];
-    }, 1000);
-
-    win.document.onmousemove = function() {
-      clearInterval(focusTimer);
-      win.document.title = show[1];
-      win.document.onmousemove = null;
-    }
-  }
-</script>
-
-<input type="button" onclick="getAttention(win)" value="getAttention(win)">
-```
-
-Запустите код и сверните всплывающее окно. А затем -- нажмите кнопку с надписью "getAttention(win)". Браузер будет привлекать ваше внимание, как умеет ;)
-
-Обратите внимание: в коде есть проверка на `win.closed`. Попытка манипулирования закрытым окном вызовет исключение.
-
-Как только посетитель сфокусировался на окне индикация прекращается. Для определения момента фокусировки в примере выше используется событие `document.onmousemove`.
-
-Можно было использовать событие `window.onfocus`, но, оказывается, оно ненадежно.
-
-## Событие window.onfocus
-
-Вот переписанный вариант функции `getAtention(win)`, с использованием события `onfocus`:
-
-```html
-<!--+ run -->
-<script>
-  var win = open('/', 'test', 'width=300,height=300')
-
-  function getAttention(win) {
-    if (win.closed) {
-      alert( "Окно закрыто, привлечь внимание к нему нельзя" );
-      return;
-    }
-
-    var i = 0;
-    var show = ['************', win.document.title];
-
-    function stop() {
-      clearInterval(focusTimer);
-      win.document.title = show[1];
-    }
-
-    win.onfocus = function() {
-      stop();
-      win.onfocus = null;
-    }
-
-    var focusTimer = setInterval(function() {
-      if (win.closed) {
-        clearInterval(focusTimer);
-        return;
-      }
-
-      win.document.title = show[i++ % 2];
-    }, 1000);
-
-    win.focus();
-  }
-</script>
-
-<input type="button" onclick="getAttention(win)" value="getAttention(win)">
-```
-
-Далее мы посмотрим случаи, когда он не срабатывает, и почему нам всё же нужно `document.onmousemove`.
-
-### Когда событие onfocus не работает?
-
-Возможно такое, что посетитель переключается на окно, а `window.onfocus` не происходит.
-
-Это потому, что переключение между окнами и фокусировка -- это разные вещи. Например, если курсор находится в поле для ввода URL браузера, то считается, что окно не в фокусе, хотя посетитель переключился на это окно.
-
-Попробуйте проделать следующее:
-
-<ol>
-<li>Запустите пример с `getAttention` в Chrome или IE (кстати, в них нельзя отключить адресную панель).</li>
-<li>Поместите курсор в панель адреса всплывающего окна.</li>
-<li>Перейдите обратно к главному окну и нажмите кнопку `getAttention(win)`</li>
-</ol>
-
-**Вы увидите, что несмотря на то, что вы переключились на окно, и оно сейчас на переднем плане, событие `onfocus` не срабатывает.**
-
-Есть и другие случаи, когда переключение между окнами не вызывает `window.onfocus`. Скажем, если окно сфокусировать щелчком в поле ввода формы, то в IE события `window.onfocus` (а также `window.onfocusin`) -- не сработают!
-
-Можно попробовать поймать момент фокусировки и по-другому, повесив дополнительные обработчики событий на `document`. В главе [](/focus-blur) описана техника делегирования для `focus/blur`.
-
-Но этот получает фокус только если посетитель сфокусируется где-то в документе: щелкнет или сделает еще какое-то действие в документе, а не просто посмотрит на него и проведет над ним мышкой.
-
-Впрочем, никто не мешает использовать сочетание всех описанных методов.
-
-## Итого
-
-Фокусировка и привлечение внимания к окну:
-
-<ul>
-<li>Метод `focus` для `window` не надёжен. Окнами и вкладками браузера можно уверенно управлять только на уровне ОС.
-
-Поэтому для привлечения внимания посетителя к окну стоит также использовать  мерцающий заголовок окна.</li>
-</ul>
-
-Обнаружение переключения на окно:
-
-<ul>
-<li>У `window` есть событие `onfocus`, но оно также ненадёжно.
-
-Поэтому для определения переключения на окно -- используйте его вместе с делегируемым `focus` на документе, а также `document.onmousemove`.</li>
-</ul>
diff --git a/7-frames-and-windows/6-clickjacking/article.md b/7-frames-and-windows/6-clickjacking/article.md
deleted file mode 100644
index 18cb7cc5..00000000
--- a/7-frames-and-windows/6-clickjacking/article.md
+++ /dev/null
@@ -1,202 +0,0 @@
-# Атака Clickjacking и защита от неё
-
-Атака "кликджекинг" (англ. Clickjacking) позволяет хакеру выполнить клик на сайте-жертве *от имени посетителя*. 
-
-В русском языке встречается дословный перевод термина clickjacking: "угон клика". Так же применительно к clickjacking-атаке можно встретить термины "перекрытие iframe" и "подмена пользовательского интерфейса".
-
-Кликджекингу подверглись в своё время Twitter, Facebook , PayPal, YouTube и многие другие сайты. Сейчас, конечно, они уже защищены.
-[cut]
-## Идея атаки
-
-В целом идея очень проста.
-
-Вот как выглядел "угон клика" пользователя, который зарегистрирован на Facebook:
-
-<ol>
-<li>На вредоносной странице пользователю подсовывается безобидная ссылка (скажем, что-то скачать, "разбогатеть сейчас", посмотреть ролик или просто перейти по ссылке на интересный ресурс).</li>
-<li>Поверх этой заманчивой ссылки помещен прозрачный iframe со страницей facebook.com, так что кнопка "Like" находится чётко над ней.</li>
-<li>Кликая на ссылку, посетитель на самом деле нажимает на эту кнопку.</li>
-</ol>
-
-## Демо
-
-Вот пример вредоносной страницы (для наглядности `iframe` -- полупрозрачный):
-
-```html
-<!--+ run height=120  no-beautify -->
-<style>
-iframe { /* iframe с сайта-жертвы */
-  width: 400px;
-  height: 100px;
-  position: absolute;
-  top:0; left:-20px;
-*!*
-  opacity: 0.5; /* в реальности opacity:0 */
-*/!*
-  z-index: 1;
-}
-</style>
- 
-<div>Нажмите, чтобы разбогатеть сейчас:</div>
-     
-<!-- URL в реальности - с другого домена (атакуемого сайта) -->
-*!*
-<iframe src="facebook.html"></iframe>
- 
-<button>Жми тут!</button>
- */!*
-
-<div>..И всё получится (хе-хе, у меня, злого хакера, получится)!</div>
-```
-
-В действии:
-
-[codetabs src="clickjacking-visible" height=200]
-
-Так как `<iframe src="facebook.html">` полупрозрачный, то в примере выше легко видеть, как он перекрывает кнопку. При клике на "Жми тут" на самом деле происходит клик на `<iframe>` (на "Like").
-
-В итоге, если посетитель авторизован на facebook (а в большинстве случаев так и есть), то facebook.com получает щелчок от имени посетителя.
-
-На Twitter это была бы кнопка "Follow".
-
-Тот же самый пример, но ближе к реальности, с `opacity:0` для `<iframe>`. Вообще незаметно, что на самом деле посетитель кликает на `<iframe>`:
-
-[codetabs src="clickjacking" height=200]
-
-Итак, все, что нужно для проведения атаки --  это правильно расположить iframe на вредоносной странице, так чтобы кнопка с Facebook оказалась над "Жми тут!". В большинстве случаев это возможно и делается обычным CSS-позиционированием.
-
-[smart header="С клавиатурой так не сделаешь"]
-Атака назвается "Clickjacking", то есть "угон клика", так как события клавиатуры "угнать" гораздо труднее. 
-Посетителя можно заставить сфокусироваться на `<input>` прозрачного `<iframe>` с сайтом-жертвой, но этот `<input>` невидим, а значит текст в нём также будет невидимым. Посетитель начнёт печатать, но, не увидев текст, прекратит свои действия.
-[/smart]
-
-## Плохая защита
-
-Самый старый метод защиты -- это код JavaScript, не позволяющий отобразить веб-страницу внутри фрейма ("framebusting", также его называют "framekilling" и "framebreaking"). 
-
-Примерно такой:
-
-```js
-if (top != window) {
-  top.location = window.location;
-}
-```
-
-То есть, если окно обнаруживает, что оно загружено во фрейме, то оно автоматически делает себя верхним.
-
-Увы, в настоящий момент это уже не является сколько-нибудь надежной защитой.  Есть несколько способов обхода framebusting. Давайте рассмотрим некоторые из них.
-
-### Блокировка top-навигации.
-
-Можно заблокировать переход, инициированный сменой `top.location`, в событии [onbeforeunload](#window.onbeforeunload).
-
-Обработчик этого события ставится на внешней (хакерской) странице и, при попытке  `iframe` поменять `top.location`, спросит посетителя, хочет он покинуть данную страницу. В большинстве браузеров хакер может спросить посетителя, используя своё сообщение.
-
-```js
-window.onbeforeunload = function() {
-  window.onbeforeunload = null;
-  return "Хотите уйти с этой страницы, не узнав все её тайны (хе-хе)?";
-}
-```
-
-Так что, скорее всего, посетитель ответит на такой странный вопрос отрицательно (он же не знает про ифрейм, видит только страницу, причины для ухода нет). А значит, ожидаемая смена `top.location` не произойдёт!
-
-Пример в действии:
-
-[codetabs src="top-location"]
-
-### Атрибут sandbox
-
-Современные браузеры поддерживают атрибут [sandbox](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox)
-
-Он позволяет разрешить во фрейме скрипты `allow-scripts` и формы `allow-forms`, но запретить top-навигацию (не указать `allow-top-navigation`).
-
-"Защищённый" `<iframe>` хакер может подключить, к примеру, так:
-
-```html
-<iframe *!*sandbox="allow-scripts allow-forms"*/!* src="facebook.html"></iframe>
-```
-
-Есть и другие приёмы для обхода этой простейшей защиты. 
-
-Firefox и старый IE могут активировать designMode на исходной странице, это также предотвращает framebusting, у IE есть нестандартный атрибут [security](https://msdn.microsoft.com/en-us/library/ie/ms534622.aspx) для ифреймов, который можно использовать с той же целью.
-
-Как мы видим, эта защита не только не выдерживает реальной атаки, но и может скомпрометировать сайт (программист-то думает, что защитил его).
-
-## Заголовок X-Frame-Options
-
-Все современные браузеры поддерживают заголовок `X-Frame-Options`.
-
-Он разрешает или запрещает отображение страницы, если она открыта во фрейме.
-
-Браузеры игнорируют заголовок, если он определен в МЕТА тег. Таким образом, `<meta http-equiv="X-Frame-Options"...>` будет проигнорирован.
-
-У заголовка может быть три значения:
-
-<dl>
-<dt>SAMEORIGIN</dt>
-<dd>Рендеринг документа, при открытии во фрейме, производится только в том случае, когда верхний (top) документ -- с того же домена.</dd>
-<dt>DENY</dt>
-<dd>Рендеринг документа внутри фрейма запрещён.</dd>
-<dt>ALLOW-FROM domain</dt>
-<dd>Разрешает рендеринг, если внешний документ с данного домена (не поддерживается в Safari, Firefox).</dd>
-</dl>
-
-К примеру, Twitter использует `X-Frame-Options: SAMEORIGIN`. Результат:
-
-```html
-<iframe src="https://twitter.com"></iframe>
-```
-
-<iframe src="https://twitter.com"></iframe>
-
-В зависимости от браузера, `iframe` выше либо пустой, либо в нём находится сообщение о невозможности отобразить его (IE).
-
-## Показ с отключённым функционалом
-
-Заголовок `X-Frame-Options` имеет неприятный побочный эффект. Иногда поисковики, анонимайзеры или другие сайты хотели бы отобразить страницу в `iframe`, по вполне "легальным" причинам, но не могут.
-
-Хорошо бы показывать их посетителям не пустой `iframe`, а нечто, что может быть более интересно.
-
-Например, можно изначально "накрывать" документ `div` с `height:100%;width:100%`, который будет перехватывать все клики. И поставить на нём ссылку, ведующую на страницу в новом окне.
-
-```html
-<style>
-  #iframe-protector {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 99999999;
-  }
-</style>
-
-<div id="iframe-protector">
-  <a href="/" target="_blank">Перейти на сайт</a>
-</div>
-
-<script>
-  if (top.document.domain == document.domain) {
-    убрать iframe - protector
-  }
-</script>
-```
-
-Если страница -- не во фрейме или домен совпадает, то посетитель не увидит его.
-
-## Заключение
-
-Атаку "Clickjacking" легко осуществить, если на сайте есть действие, активируемое с помощью одного клика.
-
-Злоумышленник может осуществить атаку через целенаправленно на посетителей ресурса -- опубликовав ссылку на форуме, или "счастливой рассылкой". Существует масса вариантов.
-
-С первого взгляда, она "неглубокая": всё, что можно сделать -- это один клик. С другой стороны, если хакер знает, что после клика появляется какой-то другой управляющий элемент, то он, хитрыми сообщениями, может заставить посетителя кликнуть и по нему. А это уже не один, а два клика.
-
-Атака особенно опасна, поскольку, проектируя интерфейс сайта, обычно никто и не задумывается о том, что клик от имени юзера может сделать хакер. Точки уязвимости могут быть в совершенно непредсказуемых местах.
-
-
-<ul>
-<li>Рекомендуется использовать `X-Frame-Options` на страницах, заведомо не предназначеных для запуска во фрейме и на важнейших страницах (финансовые транзакции).</li>
-<li>Используйте перекрывающий `<div>`, если это допустимо вашим проектом и вы хотите разрешить безопасный показ документа во фреймах с любых доменов.</li>
-</ul>
diff --git a/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/facebook.html b/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/facebook.html
deleted file mode 100644
index 9d88ae28..00000000
--- a/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/facebook.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body style="margin:10px;padding:10px">
-
-  <input type="button" onclick="alert('Нажата кнопка Like с другого домена!')" value="I LIKE IT !">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/index.html b/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/index.html
deleted file mode 100644
index 5301b0f8..00000000
--- a/7-frames-and-windows/6-clickjacking/clickjacking-visible.view/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <style>
-    iframe {
-      /* iframe с сайта-жертвы */
-      
-      width: 400px;
-      height: 100px;
-      position: absolute;
-      top: 0;
-      left: -20px;
-      opacity: 0.5;
-      z-index: 1;
-    }
-  </style>
-
-  <div>Нажмите, чтобы разбогатеть сейчас:</div>
-
-  <!-- URL, в реальности - с другого домена (атакуемого сайта) -->
-  <iframe src="facebook.html"></iframe>
-
-  <button>Жми тут!</button>
-
-  <div>..И всё получится (хе-хе, у меня, злого хакера, получится)!</div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/6-clickjacking/clickjacking.view/facebook.html b/7-frames-and-windows/6-clickjacking/clickjacking.view/facebook.html
deleted file mode 100644
index 9d88ae28..00000000
--- a/7-frames-and-windows/6-clickjacking/clickjacking.view/facebook.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body style="margin:10px;padding:10px">
-
-  <input type="button" onclick="alert('Нажата кнопка Like с другого домена!')" value="I LIKE IT !">
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/6-clickjacking/clickjacking.view/index.html b/7-frames-and-windows/6-clickjacking/clickjacking.view/index.html
deleted file mode 100644
index 0e0599c4..00000000
--- a/7-frames-and-windows/6-clickjacking/clickjacking.view/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <style>
-    iframe {
-      /* iframe с сайта-жертвы */
-      
-      width: 400px;
-      height: 100px;
-      position: absolute;
-      top: 0;
-      left: -20px;
-      opacity: 0;
-      z-index: 1;
-    }
-  </style>
-
-  <div>Нажмите, чтобы разбогатеть сейчас:</div>
-
-  <!-- URL, в реальности - с другого домена (атакуемого сайта) -->
-  <iframe src="facebook.html"></iframe>
-
-  <button>Жми тут!</button>
-
-  <div>..И всё получится (хе-хе, у меня, злого хакера, получится)!</div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/6-clickjacking/top-location.view/iframe.html b/7-frames-and-windows/6-clickjacking/top-location.view/iframe.html
deleted file mode 100644
index 849ee4b1..00000000
--- a/7-frames-and-windows/6-clickjacking/top-location.view/iframe.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-
-  <div>Меняет top.location на javascript.ru</div>
-
-  <script>
-    top.location = 'http://javascript.ru';
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/6-clickjacking/top-location.view/index.html b/7-frames-and-windows/6-clickjacking/top-location.view/index.html
deleted file mode 100644
index ef10e519..00000000
--- a/7-frames-and-windows/6-clickjacking/top-location.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-
-  <style>
-    iframe {
-      /* iframe с сайта-жертвы */
-      
-      width: 400px;
-      height: 100px;
-      position: absolute;
-      top: 0;
-      left: -20px;
-      opacity: 0;
-      z-index: 1;
-    }
-  </style>
-
-  <script>
-    function attack() {
-
-      window.onbeforeunload = function() {
-        window.onbeforeunload = null;
-        return "Хотите уйти с этой страницы, не узнав все её тайны (хе-хе)?";
-      };
-
-      document.body.insertAdjacentHTML('beforeend', '<iframe src="iframe.html">');
-    }
-  </script>
-</head>
-
-<body>
-
-  <p>При нажатии на кнопку посетитель получит "странный" вопрос о том, не хочет ли уйти со страницы.</p>
-
-  <p>Наверно, он ответит "хочу остаться" и защита ифрейма будет провалена.</p>
-
-  <button onclick="attack()">Подключить "защищённый" iframe</button>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/7-frames-and-windows/index.md b/7-frames-and-windows/index.md
deleted file mode 100644
index 680aa953..00000000
--- a/7-frames-and-windows/index.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Окна и Фреймы
-
diff --git a/8-css-for-js/1-css-why/article.md b/8-css-for-js/1-css-why/article.md
deleted file mode 100644
index bb1c4943..00000000
--- a/8-css-for-js/1-css-why/article.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# О чём пойдёт речь
-
-Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
-
-[cut]
-Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком. 
-
-**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**. 
-
-Это требует отличного знания CSS в области позиционирования элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
-
-Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
-
-[summary]
-Если что-то можно сделать через CSS -- лучше делать это через CSS.
-[/summary]
-
-Причина проста -- обычно, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS. Поэтому овчинка стоит выделки.
-
-Кроме того, есть ещё одно наблюдение.
-
-[summary]
-Знание JavaScript не может заменить знание CSS.
-[/summary]
-
-Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript. 
-
-## Чек-лист
-
-Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
-
-<ul>
-<li>Блочная модель, включая:
-<ul>
-<li>`margin`, `padding`, `border`, `overflow`</li>
-<li>а также `height/width` и `min-height/min-width`.</li>
-</ul>
-</li>
-<li>Текст:
-<ul>
-<li>`font`</li><li>`line-height`.</li>
-</ul></li>
-<li>Различные курсоры `cursor`.</li>
-<li>Позиционирование:
-<ul><li>`position`, `float`, `clear`, `display`, `visibility`</li>
-<li>Центрирование при помощи CSS</li>
-<li>Перекрытие `z-index` и прозрачность `opacity`</li>
-</ul>
-</li>
-<li>Cелекторы:
-<ul><li>Приоритет селекторов</li>
-<li>Селекторы `#id`, `.class`, `a > b`</li>
-</ul>
-</li>
-<li>Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
-</li>
-</ul>
-
-## Почитать 
-
-Книжек много, но хороших -- как всегда, мало. 
-
-С уверенностью могу рекомендовать следующие:
-
-
-<ul>
-<li><a href="http://www.ozon.ru/context/detail/id/24493075/?partner=iliakan">Большая книга CSS3.</a>
-<i>Дэвид Макфарланд.</i></li>
-<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство.</a>
-<i>Эрик Мейер</i></li>
-</ul>
-
-Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них. 
-
-Это очерки для лучшей систематизации и дополнения уже существующих знаний.
\ No newline at end of file
diff --git a/8-css-for-js/10-box-sizing/article.md b/8-css-for-js/10-box-sizing/article.md
deleted file mode 100644
index 41b94b51..00000000
--- a/8-css-for-js/10-box-sizing/article.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# Свойство "box-sizing"
-
-Свойство `box-sizing` может принимать одно из двух значений -- `border-box` или `content-box`. В зависимости от выбранного значения браузер по-разному трактует значение свойств `width/height`.
-[cut]
-## Значения box-sizing
-
-
-
-<dl>
-<dt>`content-box`</dt>
-<dd>Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*.</dd>
-<dt>`border-box`</dt>
-<dd>Значения `width/height` задают высоту/ширину *всего элемента*.</dd>
-</dl>
-
-Для большей наглядности посмотрим на картинку этого `div` в зависимости от `box-sizing`:
-
-```css
-/*+ no-beautify */
-div {
-  width: 200px;
-  height: 100px;
-*!*
-  box-sizing: border-box (вверху) | content-box (внизу);
-*/!*
-
-  padding: 20px;
-  border:5px solid brown;
-}
-```
-
-<img src="border-box.png">
-
-В верхнем случае браузер нарисовал весь элемент размером в `width x height`, в нижнем -- интерпретировал `width/height` как размеры внутренней области.
-
-Исторически сложилось так, что по умолчанию принят `content-box`, а `border-box` некоторые браузеры используют если не указан `DOCTYPE`, в режиме совместимости. 
-
-Но есть как минимум один случай, когда явное указание `border-box` может быть полезно: растягивание элемента до ширины родителя.
-
-## Пример: подстроить ширину к родителю
-
-Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
-
-Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
-
-```html
-<!--+ autorun -->
-<style>
-  form {
-    width: 200px;
-    border: 2px solid green;
-  }
-  
-  form input,
-  form select {
-    display: block;
-    padding-left: 5px;
-    /* padding для красоты */
-  }
-</style>
-
-<form>
-*!*
-  <input>
-  <input>
-  <select>
-    <option>опции</option>
-  </select>
-*/!*
-</form>
-```
-
-Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
-
-### Попытка width:100%
-
-Первое, что приходит в голову -- поставить всем `INPUT'ам` ширину `width: 100%`. 
-
-Попробуем:
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-  form {
-    width: 200px;
-    border: 2px solid green;
-  }
-
-  form input, form select {
-    display: block;
-    padding-left: 5px;
-*!*
-    width: 100%;
-*/!*
-  }
-</style>
-
-<form>
-  <input>
-  <input>
-  <select><option>опции</option></select>
-</form>
-```
-
-Как видно, не получается. **Элементы вылезают за пределы родителя.** 
-
-**Причина -- ширина элемента 100% по умолчанию относится к внутренней области, не включающей `padding` и `border`.** То есть, внутренняя область растягивается до `100%` родителя, и к ней снаружи прибавляются `padding/border`, которые и вылезают.
-
-Есть два решения этой проблемы.
-
-### Решение: дополнительный элемент
-
-Можно убрать `padding/border` у элементов `INPUT/SELECT` и завернуть каждый из них в дополнительный `DIV`, который будет обеспечивать дизайн:
-
-```html
-<!--+ autorun height=100 -->
-<style>
-  form {
-    width: 200px;
-    border: 2px solid green;
-  }
-  /* убрать padding/border */
-  
-  form input,
-  form select {
-    padding: 0;
-    border: 0;
-    width: 100%;
-  }
-  /* внешний div даст дизайн */
-  
-  form div {
-    padding-left: 5px;
-    border: 1px solid black;
-  }
-</style>
-
-<form>
-  <div>
-    <input>
-  </div>
-  <div>
-    <input>
-  </div>
-  <div>
-    <select>
-      <option>опции</option>
-    </select>
-  </div>
-</form>
-```
-
-В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще -- любой интерфейс, где элементов и так много, то лишние нам точно не нужны. 
-
-Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов `INPUT/SELECT`.
-
-### Решение: box-sizing
-
-Существует другой способ, гораздо более естественный, чем предыдущий.
-
-**При помощи `box-sizing: border-box` мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая `border` и `padding`**:
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-  form {
-    width: 200px;
-    border: 2px solid green;
-  }
-
-  form input, form select {
-    display: block;
-    padding-left: 5px;
-*!*
-    -moz-box-sizing: border-box; /* в Firefox нужен префикс */
-    box-sizing: border-box;
-    width: 100%;
-*/!*
-  }
-</style>
-
-<form>
-  <input>
-  <input>
-  <select><option>опции</option></select>
-</form>
-```
-
-Мы сохранили "родную" рамку вокруг `INPUT/SELECT` и не добавили лишних элементов. Всё замечательно.
-
-Свойство `box-sizing` поддерживается в IE начиная с версии 8.
\ No newline at end of file
diff --git a/8-css-for-js/10-box-sizing/border-box.png b/8-css-for-js/10-box-sizing/border-box.png
deleted file mode 100644
index d828c760..00000000
Binary files a/8-css-for-js/10-box-sizing/border-box.png and /dev/null differ
diff --git a/8-css-for-js/10-box-sizing/border-box@2x.png b/8-css-for-js/10-box-sizing/border-box@2x.png
deleted file mode 100644
index b45ef3f5..00000000
Binary files a/8-css-for-js/10-box-sizing/border-box@2x.png and /dev/null differ
diff --git a/8-css-for-js/11-margin/1-failing-margins/solution.md b/8-css-for-js/11-margin/1-failing-margins/solution.md
deleted file mode 100644
index a2899ad1..00000000
--- a/8-css-for-js/11-margin/1-failing-margins/solution.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Ошибка заключается в том, что `margin` при задании в процентах высчитавается *относительно ширины*. Так написано [в стандарте](http://www.w3.org/TR/CSS2/box.html#margin-properties).
-
-При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
-
-Ситуацию можно исправить, например, заданием `margin-top/margin-bottom` в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, `position` или `padding-top/padding-bottom` на родителе.
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/1-failing-margins/task.md b/8-css-for-js/11-margin/1-failing-margins/task.md
deleted file mode 100644
index 4db46598..00000000
--- a/8-css-for-js/11-margin/1-failing-margins/task.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Нерабочие margin?
-
-[importance 3]
-
-В примере ниже находится блок `.block` фиксированной высоты, а в нём -- прямоугольник `.spacer`.
-
-При помощи `margin-left: 20%` и `margin-right: 20%`, прямоугольник центрирован в родителе по горизонтали. Это работает.
-
-Далее делается попытка при помощи свойств `height: 80%`, `margin-top: 10%` и  `margin-bottom: 10%` расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал `80%` высоты родителя, а сверху и снизу был одинаковый отступ.
-
-Однако, как видите, это не получается. Почему? Как поправить?
-
-```html
-<!--+ autorun run  no-beautify -->
-  
-<style>
-  .block {
-    height: 150px;
-
-    border: 1px solid #CCC;
-    background: #eee;
-  }
-
-  .spacer {
-    margin-left: 20%;
-    margin-right: 20%;
-
-*!*   
-    height: 80%;
-    margin-top: 10%;
-    margin-bottom: 10%;
-*/!*
-
-    border: 1px solid black;
-    background: #FFF;
-  }
-</style>
- 
-<div class="block">
-  <div class="spacer"></div>
-</div>
-```
-
diff --git a/8-css-for-js/11-margin/2-position-text-into-input/solution.md b/8-css-for-js/11-margin/2-position-text-into-input/solution.md
deleted file mode 100644
index 27896351..00000000
--- a/8-css-for-js/11-margin/2-position-text-into-input/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Подсказка
-Надвиньте элемент с текстом на `INPUT` при помощи отрицательного `margin`.
-
-# Решение
-
-Надвинем текст на `INPUT` при помощи отрицательного `margin-top`. Поднять следует на одну строку, т.е. на `1.25em`, можно для красоты чуть больше -- `1.3em`:
-
-Также нам понадобится обнулить "родной" `margin` у `INPUT`, чтобы не сбивал вычисления.
-
-```html
-<!--+ run -->
-<style>
-  input {
-    *!*margin: 0;*/!* 
-    width: 12em;
-  }
-
-  #placeholder {
-    color: red;
-*!*
-    margin: -1.3em 0 0 0.2em;
-*/!*
-  }
-</style>
-
-<input type="password" id="input">
-<div id="placeholder">Скажи пароль, друг</div>
-```
-
-[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html b/8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
deleted file mode 100644
index 2b41ddf7..00000000
--- a/8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    input {
-      margin: 0;
-      width: 12em;
-    }
-    
-    #placeholder {
-      color: red;
-      margin: -1.3em 0 0 0.2em;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div>Добро пожаловать</div>
-  <input type="password" id="input">
-
-  <div id="placeholder">Скажи пароль, друг</div>
-
-  <div>.. и заходи</div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html b/8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
deleted file mode 100644
index 306f31e3..00000000
--- a/8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <div>Добро пожаловать</div>
-
-  <input type="password" id="input">
-
-  <div id="placeholder">Скажи пароль, друг</div>
-
-  <div>.. и заходи</div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/2-position-text-into-input/task.md b/8-css-for-js/11-margin/2-position-text-into-input/task.md
deleted file mode 100644
index 9de1de56..00000000
--- a/8-css-for-js/11-margin/2-position-text-into-input/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Расположить текст внутри INPUT
-
-[importance 5]
-
-Создайте `<input type="password">` с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
-
-[iframe src="solution" height=90 border="1"]
-
-В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
-
-
-
-P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
-
-P.P.S. Вокруг `INPUT` с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
diff --git a/8-css-for-js/11-margin/article.md b/8-css-for-js/11-margin/article.md
deleted file mode 100644
index 35f88e56..00000000
--- a/8-css-for-js/11-margin/article.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# Свойство "margin" 
-
-Свойство `margin` задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.
-[cut]
-## Объединение отступов
-
-Вертикальные отступы поглощают друг друга, горизонтальные -- нет.
-
-Например, вот документ с вертикальными и горизонтальными отступами:
-
-```html
-<!--+ autorun height=100 -->
-<body style="background: #aef">
-  <p style="*!*margin:20px;*/!* background:white">
-   
-    <span style="*!*margin:20px;*/!* background:orange">Горизонтальный 20px</span>
-    ← 40px →
-    <span style="*!*margin:20px;*/!* background:orange">20px Отступ </span>
-
-  </p>
-  <p style="*!*margin:15px;*/!* background:white">Вертикальный 20px</p>
-</body>
-```
-
-Расстояние по горизонтали между элементами `SPAN` равно `40px`, так как горизонтальные отступы по `20px` сложились.
-
-А вот по вертикали расстояние от `SPAN` до `P` равно `20px`: из двух вертикальных отступов выбирается больший `max(20px, 15px) = 20px` и применяется. 
-
-## Отрицательные margin-top/left
-
-Отрицательные значения `margin-top/margin-left` смещают элемент со своего обычного места.
-
-В CSS есть другой способ добиться похожего эффекта -- а именно, `position:relative`. Но между ними есть одно принципиальное различие.
-
-**При сдвиге через `margin` соседние элементы занимают освободившееся пространство, в отличие от `position: relative`, при котором элемент визуально сдвигается, но место, где он был, остается "занятым".**
-
-То есть, элемент продолжает полноценно участвовать в потоке.
-
-## Пример: вынос заголовка
-
-Например, есть документ с информационными блоками:
-
-```html
-<!--+ autorun height=400 -->
-<style>
-  div {
-    border: 1px solid blue;
-    margin: 2em;
-    font: .8em/1.25 Arial, sans-serif;
-  }
-  
-  h2 {
-    background: #aef;
-    margin: 0 0 0.8em 0;
-  }
-</style>
-
-<div>
-  <h2>Общие положения</h2>
-
-  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
-</div>
-
-<div>
-  <h2>Общие обязанности водителей</h2>
-
-  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
-  <ul>
-    <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
-    <li>...и так далее...</li>
-  </ul>
-</div>
-```
-
-**Использование отрицательного `margin-top` позволяет вынести заголовки над блоком**.
-
-```css
-/* вверх чуть больше, чем на высоту строки (1.25em) */
-
-h2 {
-  margin-top: -1.3em;
-}
-```
-
-Результат:
-[iframe src="h2-margin-top" height=330 border=1 link]
-
-А вот, что бы было при использовании `position`:
-
-```css
-h2 {
-  position: relative;
-  top: -1.3em;
-}
-```
-
-Результат:
-[iframe src="h2-margin-top-position" height=330 border=1 link]
-
-**При использовании `position`, в отличие от `margin`, на месте заголовков, внутри блоков, осталось пустое пространство.**
-
-## Пример: вынос отчерка
-
-Организуем информацию чуть по-другому. Пусть после каждого заголовка будет отчерк:
-
-```html
-<div>
-  <h2>Заголовок</h2>
-  <hr>
-
-  <p>Текст Текст Текст.</p>
-</div>
-```
-
-Пример документа с такими отчерками:
-
-[iframe src="hr-margin-left-src" height=320 border=1 link]
-
-Для красоты мы хотим, чтобы отчерк `HR` начинался левее, чем основной текст. Отрицательный `margin-left` нам поможет:
-
-```css
-/*+ no-beautify */
-hr.margin { margin-left: -2em; }
-
-/* для сравнения */
-hr.position { position: relative; left: -2em; }
-```
-
-Результат:
-[iframe src="hr-margin-left" height=320 border=1 link]
-
-Обратите внимание на разницу между методами сдвига!
-<ul>
-<li>`hr.margin` сначала сдвинулся, а потом нарисовался до конца блока.</li>
-<li>`hr.position` сначала нарисовался, а потом сдвинулся -- в результате справа осталось пустое пространство.</li>
-</ul>
-
-Уже отсюда видно, что отрицательные `margin` -- исключительно полезное средство позиционирования!
-
-## Отрицательные margin-right/bottom
-
-Отрицательные `margin-right/bottom` ведут себя по-другому, чем `margin-left/top`. Они не сдвигают элемент, а "укорачивают" его.
-
-То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в `margin-right/bottom` значение.
-
-Например, в примере ниже вторая строка налезает на первую:
-
-```html
-<!--+ autorun height=80 -->
-<div style="border: 1px solid blue; *!*margin-bottom: -0.5em*/!*">
-  Первый
-</div>
-
-<div style="border: 1px solid red">
-  Второй div думает, что высота первого на 0.5em меньше
-</div>
-```
-
-Это используют, в частности для красивых вносок, с приданием иллюзии глубины.
-
-Например:
-
-[iframe src="negative-margin-bottom" border=1 height=200 link="Посмотреть в отдельном окне" edit]
-
-## Итого
-
-<ul>
-<li>Отрицательные `margin-left/top` сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через `position`.</li>
-<li>Отрицательные `margin-right/bottom` заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.</li>
-</ul>
-
-Отличная статья на тему отрицательных `margin`: [The Definitive Guide to Using Negative Margins](http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/)
-
diff --git a/8-css-for-js/11-margin/h2-margin-top-position.view/index.html b/8-css-for-js/11-margin/h2-margin-top-position.view/index.html
deleted file mode 100644
index 38108996..00000000
--- a/8-css-for-js/11-margin/h2-margin-top-position.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      border: 1px solid blue;
-      margin: 2em;
-      font: .8em/1.25 Arial, sans-serif;
-    }
-    
-    h2 {
-      margin: 0 0 0.8em 0;
-      background: #aef;
-      position: relative;
-      top: -1.3em;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div>
-    <h2>Общие положения</h2>
-
-    <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
-  </div>
-
-  <div>
-    <h2>Общие обязанности водителей</h2>
-
-    <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
-    <ul>
-      <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
-      <li>...и так далее...</li>
-    </ul>
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/h2-margin-top.view/index.html b/8-css-for-js/11-margin/h2-margin-top.view/index.html
deleted file mode 100644
index da5df0f9..00000000
--- a/8-css-for-js/11-margin/h2-margin-top.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      border: 1px solid blue;
-      margin: 2em;
-      font: .8em/1.25 Arial, sans-serif;
-    }
-    
-    h2 {
-      margin: 0 0 0.8em 0;
-      background: #aef;
-      margin-top: -1.3em;
-      /* или изменить margin выше */
-    }
-  </style>
-</head>
-
-<body>
-
-  <div>
-    <h2>Общие положения</h2>
-
-    <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
-  </div>
-
-  <div>
-    <h2>Общие обязанности водителей</h2>
-
-    <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
-    <ul>
-      <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
-      <li>...и так далее...</li>
-    </ul>
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/hr-margin-left-src.view/index.html b/8-css-for-js/11-margin/hr-margin-left-src.view/index.html
deleted file mode 100644
index 44045004..00000000
--- a/8-css-for-js/11-margin/hr-margin-left-src.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      margin: 2em;
-      font: .8em/1.25 Arial, sans-serif;
-    }
-    
-    h2 {
-      margin-bottom: 0;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div>
-
-    <h2>Общие положения</h2>
-    <hr class="margin">
-
-    <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
-  </div>
-
-  <div>
-    <h2>Общие обязанности водителей</h2>
-    <hr class="position">
-
-    <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
-    <ul>
-      <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
-      <li>...и так далее...</li>
-    </ul>
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/hr-margin-left.view/index.html b/8-css-for-js/11-margin/hr-margin-left.view/index.html
deleted file mode 100644
index cf6bfadc..00000000
--- a/8-css-for-js/11-margin/hr-margin-left.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      margin: 2em;
-      font: .8em/1.25 Arial, sans-serif;
-    }
-    
-    h2 {
-      margin-bottom: 0;
-    }
-    
-    hr.margin {
-      margin-left: -2em;
-    }
-    
-    hr.position {
-      position: relative;
-      left: -2em;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div>
-
-    <h2>Общие положения (hr.margin)</h2>
-    <hr class="margin">
-
-    <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
-  </div>
-
-  <div>
-    <h2>Общие обязанности водителей (hr.position)</h2>
-    <hr class="position">
-
-    <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
-    <ul>
-      <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
-      <li>...и так далее...</li>
-    </ul>
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/11-margin/negative-margin-bottom.view/index.html b/8-css-for-js/11-margin/negative-margin-bottom.view/index.html
deleted file mode 100644
index 2e953c2b..00000000
--- a/8-css-for-js/11-margin/negative-margin-bottom.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .content {
-      background: #aef;
-      padding: 1em 2em 2em 2em;
-      margin-bottom: -1em;
-    }
-    
-    .comment {
-      margin: 0 1em;
-      padding: .2em;
-      text-align: center;
-      background: black;
-      color: white;
-    }
-  </style>
-</head>
-
-<body>
-  <div>У DIV'а с холодильниками стоит margin-bottom: -1em</div>
-
-  <div class="content">
-    Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире!
-  </div>
-
-  <span class="comment">
-  Так считают: 5 человек
-</span>
-
-  <span class="comment">
-  Оставьте <u>свой</u> отзыв!
-</span>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/article.md b/8-css-for-js/12-space-under-img/article.md
deleted file mode 100644
index 31d971f4..00000000
--- a/8-css-for-js/12-space-under-img/article.md
+++ /dev/null
@@ -1,148 +0,0 @@
-# Лишнее место под IMG
-
-Иногда под `IMG` "вдруг" появляется лишнее место. Посмотрим на эти грабли внимательнее, почему такое бывает и как этого избежать.
-[cut]
-## Демонстрация проблемы
-Например:
-
-```html
-<style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-</style>
-<table>
-  <tr>
-    <td style="border:1px red solid">
-      <img src="square.png">
-    </td>
-  </tr>
-</table>
-```
-
-[iframe src="inline" height=80]
-
-Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что **браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв**.
-
-Вот так выглядит та же картинка с выступающим вниз символом рядом:
-[iframe src="inline-p" height=80]
-
-В примере картинка обёрнута в красный `TD`. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг `IMG` будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под `IMG`, хотя оно там не нужно.
-
-## Решение: сделать элемент блочным
-
-Самый лучший способ избежать этого -- поставить `display: block` таким картинкам:
-
-```html
-<!--+ no-beautify -->
-<style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-  
-*!*
-  img {
-    display: block
-  } 
-*/!*
-</style>
-<table>
-  <tr>
-    <td style="border:1px red solid">
-      <img src="square.png">
-    </td>
-  </tr>
-</table>
-```
-
-[iframe src="block" height=80]
-
-Под блочным элементом ничего не резервируется. Проблема исчезла.
-
-## Решение: задать vertical-align
-
-А что, если мы, по каким-то причинам, *не хотим* делать элемент блочным? 
-
-Существует ещё один способ избежать проблемы -- использовать свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align).
-
-**Если установить `vertical-align` в `top`, то инлайн-элемент будет отпозиционирован по верхней границе текущей строки.**
-
-При этом браузер не будет оставлять место под изображением, так как запланирует продолжение строки сверху, а не снизу:
-
-```html
-<!--+ no-beautify -->
-<style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-  
-*!*
-  img {
-    vertical-align: top
-  }
-*/!*
-</style>
-<table>
-  <tr>
-    <td style="border:1px red solid">
-      <img src="square.png">
-    </td>
-  </tr>
-</table>
-```
-
-[iframe src="valign" height=80]
-
-А вот, как браузер отобразит соседние символы в этом случае: `p<img src="square.png">p`
-
-[iframe src="valign-p" height=80]
-
-С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
-
-Например, для `<img src="square.png" style="height:10px">`:
-
-[iframe src="valign-small" height=80]
-
-Таким образом, требуется уменьшить еще и `line-height` контейнера. Окончательное решение для маленьких изображений с `vertical-align`:
-
-```html
-<!--+ no-beautify -->
-<style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-  
-*!*
-  td {
-    line-height: 1px
-  }
-  
-  img {
-    vertical-align: top
-  } 
-*/!*
-</style>
-<table>
-  <tr>
-    <td style="border:1px red solid">
-      <img src="square.png" style="height:10px">
-    </td>
-  </tr>
-</table>
-```
-
-Результат:
-
-[iframe src="valign-small-lh" height=80]
-
-## Итого
-
-<ul>
-<li>Пробелы под картинками появляются, чтобы оставить место под "хвосты" букв в строке. Строка "подразумевается", т.к. `display:inline`.</li>
-<li>Можно избежать пробела, если изменить `display`, например, на `block`.</li>
-<li>Альтернатива: `vertical-align:top` (или `bottom`), но для маленьких изображений может понадобиться уменьшить `line-height`, чтобы контейнер не оставлял место под строку.</li>
-</ul>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/block.view/index.html b/8-css-for-js/12-space-under-img/block.view/index.html
deleted file mode 100644
index 3605458e..00000000
--- a/8-css-for-js/12-space-under-img/block.view/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-    
-    img {
-      display: block;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid">
-        <img src="https://js.cx/clipart/square_50.png" width="50" height="50">
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/inline-p.view/index.html b/8-css-for-js/12-space-under-img/inline-p.view/index.html
deleted file mode 100644
index 3e4e16f2..00000000
--- a/8-css-for-js/12-space-under-img/inline-p.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid; font-size:120%">
-        <img src="https://js.cx/clipart/square_50.png" width="50" height="50">p
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/inline.view/index.html b/8-css-for-js/12-space-under-img/inline.view/index.html
deleted file mode 100644
index 5f937926..00000000
--- a/8-css-for-js/12-space-under-img/inline.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid">
-        <img src="https://js.cx/clipart/square_50.png" width="50" height="50">
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/valign-p.view/index.html b/8-css-for-js/12-space-under-img/valign-p.view/index.html
deleted file mode 100644
index 168f31b6..00000000
--- a/8-css-for-js/12-space-under-img/valign-p.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid">
-        p<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/valign-small-lh.view/index.html b/8-css-for-js/12-space-under-img/valign-small-lh.view/index.html
deleted file mode 100644
index 4edbcf67..00000000
--- a/8-css-for-js/12-space-under-img/valign-small-lh.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid; line-height: 1px">
-        <img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/valign-small.view/index.html b/8-css-for-js/12-space-under-img/valign-small.view/index.html
deleted file mode 100644
index f7ad70cc..00000000
--- a/8-css-for-js/12-space-under-img/valign-small.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid">
-        <img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/12-space-under-img/valign.view/index.html b/8-css-for-js/12-space-under-img/valign.view/index.html
deleted file mode 100644
index 3de1901c..00000000
--- a/8-css-for-js/12-space-under-img/valign.view/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-  <table>
-    <tr>
-      <td style="border:1px red solid">
-        <img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
-      </td>
-    </tr>
-  </table>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/13-overflow/article.md b/8-css-for-js/13-overflow/article.md
deleted file mode 100644
index 666fdca8..00000000
--- a/8-css-for-js/13-overflow/article.md
+++ /dev/null
@@ -1,162 +0,0 @@
-# Свойство "overflow"
-
-Свойство `overflow` управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
-[cut]
-Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.
-
-Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством `overflow`.
-
-Возможные значения
-<ul>
-<li>`visible` (по умолчанию)</li>
-<li>`hidden`</li>
-<li>`scroll`</li>
-<li>`auto`</li>
-</ul>
-
-## visible
-
-Если не ставить `overflow` явно или поставить `visible`, то содержимое отображается за границами блока.
-
-Например:
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-  .overflow {
-*!*
-    /* overflow не задан */
-*/!*
-    width: 200px;
-    height: 80px;
-    border: 1px solid black;
-  }
-</style>
-
-<div class="overflow">
-  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
-  Этот текст вылезает снизу Этот текст вылезает снизу
-  Этот текст вылезает снизу Этот текст вылезает снизу
-</div>
-```
-
-Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера -- используют другие значения.
-
-## hidden
-
-Переполняющее содержимое не отображается.
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-  .overflow {
-*!*
-    overflow: hidden;
-*/!*
-    width: 200px;
-    height: 80px;
-    border: 1px solid black;
-  }
-</style>
-
-<div class="overflow">
-  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
-  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
-  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
-</div>
-```
-
-Вылезающее за границу содержимое становится недоступно.
-
-Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.
-
-## auto
-
-При переполнении отображается полоса прокрутки.
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-  .overflow {
-*!*
-    overflow: auto;
-*/!*
-    width: 200px;
-    height: 100px;
-    border: 1px solid black;
-  }
-</style>
-
-<div class="overflow">
-  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
-  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
-  Этот текст даст прокрутку снизу
-</div>
-```
-
-## scroll
-
-Полоса прокрутки отображается всегда.
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-  .overflow {
-*!*
-    overflow: scroll;
-*/!*
-    width: 200px;
-    height: 80px;
-    border: 1px solid black;
-  }
-</style>
-
-<div class="overflow">
-  scroll
-  Переполнения нет.
-</div>
-```
-
-То же самое, что `auto`, но полоса прокрутки видна всегда, даже если переполнения нет.
-
-## overflow-x, overflow-y
-
-Можно указать поведение блока при переполнении по ширине в `overflow-x` и высоте -- в `overflow-y`:
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-  .overflow {
-*!*
-    overflow-x: auto;
-    overflow-y: hidden;
-*/!*
-    width: 200px;
-    height: 80px;
-    border: 1px solid black;
-  }
-</style>
-
-<div class="overflow">
-  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
-  Этот текст вылезает снизу Этот текст вылезает снизу
-  Этот текст вылезает снизу Этот текст вылезает снизу
-</div>
-```
-
-## Итого
-
-Свойства `overflow-x/overflow-y` (или оба одновременно: `overflow`) задают поведение контейнера при переполнении:
-
-<dl>
-<dt>`visible`</dt>
-<dd>По умолчанию, содержимое вылезает за границы блока.</dd>
-<dt>`hidden`</dt>
-<dd>Переполняющее содержимое невидимо.</dd>
-<dt>`auto`</dt>
-<dd>Полоса прокрутки при переполнении.</dd>
-<dt>`scroll`</dt>
-<dd>Полоса прокрутки всегда.</dd>
-</dl>
-
-Кроме того, значение `overflow: auto | hidden` изменяет поведение контейнера, содержащего `float'ы`. Так как элемент с `float` находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой `overflow`, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье [](/float).
\ No newline at end of file
diff --git a/8-css-for-js/14-height-percent/article.md b/8-css-for-js/14-height-percent/article.md
deleted file mode 100644
index 17fa95ce..00000000
--- a/8-css-for-js/14-height-percent/article.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# Особенности свойства "height" в %
-
-Обычно свойство `height`, указанное в процентах, означает высоту относительно внешнего блока.
-
-Однако, всё не так просто. Интересно, что для произвольного блочного элемента `height` в процентах работать не будет!
-
-[cut]
-
-Чтобы лучше понимать ситуацию, рассмотрим пример.
-
-## Пример
-
-Наша цель -- получить вёрстку такого вида:
-
-[iframe src="height-percent" height=160 link edit]
-
-**При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.** 
-
-Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
-
-То есть, HTML-код требуется такой:
-
-```html
-<div class="container">
-  <div class="toggler">
-    <!-- стрелка влево при помощи CSS, ширина фиксирована -->
-  </div>
-  <div class="content">
-    ...Текст...
-  </div>
-</div>
-```
-
-Как это реализовать? Подумайте перед тем, как читать дальше...
-
-Придумали?... Если да -- продолжаем.
-
-Есть разные варианты, но, возможно, вы решили сдвинуть `.toggler` влево, при помощи `float:left` (тем более что он фиксированной ширины) и увеличить до `height: 100%`, чтобы он занял всё пространство по вертикали.
-
-**Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с `height: 100%`...**
-
-## Демо height:100% + float:left
-
-CSS:
-
-```css
-.container { 
-  border: 1px solid black;
-}
-
-.content {
-  *!*/* margin-left нужен, так как слева от содержимого будет стрелка */*/!*
-  margin-left: 35px;
-}
-
-.toggler {
-  *!*/* Зададим размеры блока со стрелкой */*/!* 
-  height: 100%;
-  width: 30px;
-  float: left;
-
-  background: #EEE url("arrow_left.png") center center no-repeat;
-  border-right: #AAA 1px solid;
-  cursor: pointer;
-}
-```
-
-А теперь -- посмотрим этот вариант в действии:
-
-[iframe src="height-percent-float" height=160 link edit]
-
-Как видно, блок со стрелкой вообще исчез! Куда же он подевался?
-
-Ответ нам даст спецификация CSS 2.1 [пункт 10.5](http://www.w3.org/TR/CSS2/visudet.html#propdef-height).
-
-**"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на `height:auto`. Кроме случая, когда у элемента стоит `position:absolute`."**
-
-В нашем случае высота `.container` как раз определяется по содержимому, поэтому для `.toggler` проценты не действуют, а размер вычисляется как при `height:auto`.
-
-Какая же она -- эта автоматическая высота? Вспоминаем, что обычно размеры `float` определяются по содержимому ([10.3.5](http://www.w3.org/TR/CSS2/visudet.html#float-width)). А содержимого-то в `.toggler` нет, так что высота нулевая. Поэтому этот блок и не виден.
-
-Если бы мы точно знали высоту внешнего блока и добавили её в CSS -- это решило бы проблему. 
-
-Например:
-
-```css
-/*+ no-beautify */
-.container {
-  height: 200px; /* теперь height в % внутри будет работать */
-}
-```
-
-Результат:
-
-[iframe src="height-percent-float-exact" height="230" link edit]
-
-...Но в данном случае этот путь неприемлем! Ведь мы не знаем, сколько будет текста и какой будет итоговая высота.
-
-Поэтому решим задачу по-другому.
-
-## Правильно: height:100% + position:absolute
-
-Проценты будут работать, если поставить `.toggler` свойство `position: absolute` и спозиционировать его в левом-верхнем углу `.container` (у которого сделать `position:relative`):
-
-```css
-.container {
-  *!*position: relative;*/!*
-  border: 1px solid black;
-}
-
-.content {
-  margin-left: 35px;
-}
-
-.toggler {
-*!*
-  position: absolute;
-  left: 0;
-  top: 0;
-*/!*
-
-  height: 100%;
-  width: 30px;
-  cursor: pointer;
-
-  border-right: #AAA 1px solid; 
-  background: #EEE url("arrow_left.png") center center no-repeat;
-}
-```
-
-Результат:
-
-[iframe src="height-percent" height=160 link edit]
-
-## Итого
-
-<ul>
-<li>Свойство `height`, указанное в %, работает только если для внешнего блока указана высота.</li>
-<li>Стандарт CSS 2.1 предоставляет обход этой проблемы, отдельно указывая, что проценты работают при `position:absolute`. На практике это часто выручает.
-</li>
-</ul>
\ No newline at end of file
diff --git a/8-css-for-js/14-height-percent/height-percent-float-exact.view/index.html b/8-css-for-js/14-height-percent/height-percent-float-exact.view/index.html
deleted file mode 100644
index 22c6bf4c..00000000
--- a/8-css-for-js/14-height-percent/height-percent-float-exact.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .container {
-      border: 1px solid black;
-      height: 200px;
-    }
-    
-    .toggler {
-      height: 100%;
-      background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
-      border-right: #AAA 1px solid;
-      width: 30px;
-      float: left;
-      margin-le cursor: pointer;
-    }
-    
-    .content {
-      margin-left: 35px;
-    }
-    
-    p {
-      font-size: 80%;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div class="container">
-    <div class="toggler"></div>
-    <div class="content">
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/14-height-percent/height-percent-float.view/index.html b/8-css-for-js/14-height-percent/height-percent-float.view/index.html
deleted file mode 100644
index d071d54b..00000000
--- a/8-css-for-js/14-height-percent/height-percent-float.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .container {
-      border: 1px solid black;
-    }
-    
-    .toggler {
-      height: 100%;
-      background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
-      border-right: #AAA 1px solid;
-      width: 30px;
-      float: left;
-      cursor: pointer;
-    }
-    
-    .content {
-      margin-left: 35px;
-    }
-    
-    p {
-      font-size: 80%;
-    }
-  </style>
-
-</head>
-
-<body>
-
-  <div class="container">
-    <div class="toggler"></div>
-    <div class="content">
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/14-height-percent/height-percent.view/index.html b/8-css-for-js/14-height-percent/height-percent.view/index.html
deleted file mode 100644
index 5bedeeea..00000000
--- a/8-css-for-js/14-height-percent/height-percent.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .container {
-      border: 1px solid black;
-      position: relative;
-    }
-    
-    .content {
-      margin-left: 35px;
-    }
-    
-    .toggler {
-      height: 100%;
-      background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
-      border-right: #AAA 1px solid;
-      width: 30px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      cursor: pointer;
-    }
-    
-    p {
-      font-size: 80%;
-    }
-  </style>
-
-</head>
-
-<body>
-
-  <div class="container">
-    <div class="toggler"></div>
-    <div class="content">
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/1-select-elements-selector/index.html b/8-css-for-js/15-css-selectors/1-select-elements-selector/index.html
deleted file mode 100644
index 23cdc40c..00000000
--- a/8-css-for-js/15-css-selectors/1-select-elements-selector/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <input type="checkbox">
-  <input type="checkbox" checked>
-  <input type="text" id="message">
-
-  <h3 id="widget-title">Сообщения:</h3>
-  <ul id="messages">
-    <li id="message-1">Сообщение 1</li>
-    <li id="message-2">Сообщение 2</li>
-    <li id="message-3" data-action="delete">Сообщение 3</li>
-    <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
-    <li id="message-5" data-action="edit delete">Сообщение 5</li>
-    <li><a href="#">...</a></li>
-  </ul>
-
-
-  <a href="http://site.com/list.zip">Ссылка на архив</a>
-  <a href="http://site.com/list.pdf">..И на PDF</a>
-
-
-  <script>
-    // тестовая функция для селекторов 
-    // проверяет, чтобы элементов по селектору selector было ровно count
-    function test(selector, count) {
-      var elems = document.querySelectorAll(selector);
-      var ok = (elems.length == count);
-
-      if (!ok) alert(selector + ": " + elems.length + " != " + count);
-    }
-
-    // ------------- селекторы --------------
-
-    // Выбрать input типа checkbox
-    test('input[type="checkbox"]', 1);
-
-    // Выбрать input типа checkbox, НЕ отмеченный
-    test('input[type="checkbox"]:not(:checked)', 1);
-
-    // Найти все элементы с id=message или message-*
-    test('[id|="message"]', 6);
-
-    // Найти все элементы с id=message-*
-    test('[id^="message-"]', 5);
-
-    // Найти все ссылки с расширением href="...zip"
-    test('a[href$=".zip"]', 1);
-
-    // Найти все элементы с data-action, содержащим delete в списке (через пробел)
-    test('[data-action~="delete"]', 2);
-
-    // Найти все элементы, у которых ЕСТЬ атрибут data-action, 
-    // но он НЕ содержащит delete в списке (через пробел)
-    test('[data-action]:not([data-action~="delete"])', 1);
-
-    // Выбрать все чётные элементы списка #messages
-    test('#messages li:nth-child(2n)', 3);
-
-    // Выбрать один элемент сразу за заголовком h3#widget-title
-    // на том же уровне вложенности
-    test('h3#widget-title + *', 1);
-
-    // Выбрать все ссылки, следующие за заголовком h3#widget-title
-    // на том же уровне вложенности
-    test('h3#widget-title ~ a', 2);
-
-    // Выбрать ссылку внутри последнего элемента списка #messages
-    test('#messages li:last-child a', 1);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/1-select-elements-selector/solution.md b/8-css-for-js/15-css-selectors/1-select-elements-selector/solution.md
deleted file mode 100644
index e77a01b9..00000000
--- a/8-css-for-js/15-css-selectors/1-select-elements-selector/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-```html
-<!--+ src="index.html" -->
-```
-
diff --git a/8-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html b/8-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
deleted file mode 100644
index d3419afa..00000000
--- a/8-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <input type="checkbox">
-  <input type="checkbox" checked>
-  <input type="text" id="message">
-
-  <h3 id="widget-title">Сообщения:</h3>
-  <ul id="messages">
-    <li id="message-1">Сообщение 1</li>
-    <li id="message-2">Сообщение 2</li>
-    <li id="message-3" data-action="delete">Сообщение 3</li>
-    <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
-    <li id="message-5" data-action="edit delete">Сообщение 5</li>
-    <li><a href="#">...</a></li>
-  </ul>
-
-
-  <a href="http://site.com/list.zip">Ссылка на архив</a>
-  <a href="http://site.com/list.pdf">..И на PDF</a>
-
-
-  <script>
-    /**
-     * Функция test(selector, count) находит элементы по селектору 
-     * и сравнивает их число с count. 
-     * 
-     * Иными словами, вызовы ниже проверяют, 
-     * что число элементов по селектору - правильное  
-     **/
-    test('input', 3); // далее вместо '...' вставьте правильные селекторы
-
-    // Выбрать input типа checkbox
-    test('...', 1);
-
-    // Выбрать input типа checkbox, НЕ отмеченный
-    test('...', 1);
-
-    // Найти все элементы с id=message или message-*
-    test('...', 6);
-
-    // Найти все элементы с id=message-*
-    test('...', 5);
-
-    // Найти все ссылки с расширением href="...zip"
-    test('...', 1);
-
-    // Найти все элементы с data-action, содержащим delete в списке (через пробел)
-    test('...', 2);
-
-    // Найти все элементы, у которых ЕСТЬ атрибут data-action, 
-    // но он НЕ содержит delete в списке (через пробел)
-    test('...', 1);
-
-    // Выбрать все чётные элементы списка #messages
-    test('...', 3);
-
-    // Выбрать один элемент сразу за заголовком h3#widget-title
-    // на том же уровне вложенности
-    test('...', 1);
-
-    // Выбрать все ссылки, следующие за заголовком h3#widget-title
-    // на том же уровне вложенности
-    test('...', 2);
-
-    // Выбрать ссылку внутри последнего элемента списка #messages
-    test('...', 1);
-
-
-    function test(selector, count) {
-      if (selector === '...') return;
-
-      var elems = document.querySelectorAll(selector);
-      var ok = (elems.length == count);
-
-      if (!ok) alert(selector + ": " + elems.length + " != " + count);
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/1-select-elements-selector/task.md b/8-css-for-js/15-css-selectors/1-select-elements-selector/task.md
deleted file mode 100644
index 304c3a4a..00000000
--- a/8-css-for-js/15-css-selectors/1-select-elements-selector/task.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Выберите элементы селектором
-
-[importance 5]
-
-HTML-документ:
-
-```html
-<input type="checkbox">
-<input type="checkbox" checked>
-<input type="text" id="message">
-
-<h3 id="widget-title">Сообщения:</h3>
-<ul id="messages">
-  <li id="message-1">Сообщение 1</li>
-  <li id="message-2">Сообщение 2</li>
-  <li id="message-3" data-action="delete">Сообщение 3</li>
-  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
-  <li id="message-5" data-action="edit delete">Сообщение 5</li>
-  <li><a href="#">...</a></li>
-</ul>
-
-
-<a href="http://site.com/list.zip">Ссылка на архив</a>
-<a href="http://site.com/list.pdf">..И на PDF</a>
-```
-
-Задания:
-<ol>
-<li>Выбрать `input` типа `checkbox`.</li>
-<li>Выбрать `input` типа `checkbox`, НЕ отмеченный.</li>
-<li>Найти все элементы с `id=message` или `message-*`.</li>
-<li>Найти все элементы с `id=message-*`.</li>
-<li>Найти все ссылки с расширением `href="...zip"`.</li>
-<li>Найти все элементы с атрибутом `data-action`, содержащим `delete` в списке (через пробел).</li>
-<li>Найти все элементы, у которых ЕСТЬ атрибут `data-action`, но он НЕ содержит `delete` в списке (через пробел).</li>
-<li>Выбрать все чётные элементы списка `#messages`.</li>
-<li>Выбрать один элемент сразу за заголовком `h3#widget-title` на том же уровне вложенности.</li>
-<li>Выбрать все ссылки, следующие за заголовком `h3#widget-title` на том же уровне вложенности.</li>
-<li>Выбрать ссылку внутри последнего элемента списка `#messages`.</li>
-</ol>
-
diff --git a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md b/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md
deleted file mode 100644
index 06e97d0a..00000000
--- a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Выбор элементов
-
-Для выбора элементов, начиная с первого, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
-
-Его вид: `li:nth-child(n+2)`, т.к. `n` идёт от нуля, соответственно первым будет второй элемент (`n=0`), что нам и нужно.
-
-# Решение
-
-Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
-
-Правило:
-
-```css
-li:nth-child(n+2) {
-  margin-top: 1.5em;
-}
-```
-
-Полный код [edit src="solution"]в песочнице[/edit].
-
-# Ещё решение
-
-Ещё один вариант селектора: `li + li`
-
-```css
-li + li {
-  margin-top: 1.5em;
-}
-```
-
diff --git a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html b/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html
deleted file mode 100644
index ca550ebc..00000000
--- a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      font: 14px/1.5 Georgia, serif;
-    }
-    
-    ul {
-      margin: 0;
-    }
-    
-    li:nth-child(n+2) {
-      margin-top: 1.5em;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст вверху без отступа от списка.
-  <ul>
-    <li>Маша</li>
-    <li>Паша</li>
-    <li>Даша</li>
-    <li>Женя</li>
-    <li>Саша</li>
-    <li>Гоша</li>
-  </ul>
-  Текст внизу без отступа от списка.
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html b/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html
deleted file mode 100644
index bc2bed05..00000000
--- a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      font: 14px/1.5 Georgia, serif;
-    }
-    
-    ul {
-      margin: 0;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст вверху без отступа от списка.
-  <ul>
-    <li>Маша</li>
-    <li>Паша</li>
-    <li>Даша</li>
-    <li>Женя</li>
-    <li>Саша</li>
-    <li>Гоша</li>
-  </ul>
-  Текст внизу без отступа от списка.
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md b/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md
deleted file mode 100644
index 9bfe9fda..00000000
--- a/8-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Отступ между элементами, размер одна строка
-
-[importance 4]
-
-Есть список `UL/LI`.
-
-```html
-Текст вверху без отступа от списка.
-<ul>
-  <li>Маша</li>
-  <li>Паша</li>
-  <li>Даша</li>
-  <li>Женя</li>
-  <li>Саша</li>
-  <li>Гоша</li>
-</ul>
-Текст внизу без отступа от списка.
-```
-
-Размеры шрифта и строки заданы стилем:
-
-```css
-body {
-  font: 14px/1.5 Georgia, serif;
-}
-```
-
-**Сделайте, чтобы между элементами был вертикальный отступ.**
-<ul>
-<li>Размер отступа: ровно 1 строка.</li>
-<li>Нужно добавить только одно правило CSS с одним псевдоселектором, можно использовать CSS3.</li>
-<li>Не должно быть лишних отступов сверху и снизу списка.</li>
-</ul>
-
-Результат:
-[iframe src="solution" border=1 link]
-
diff --git a/8-css-for-js/15-css-selectors/3-margin-between-pairs/index.html b/8-css-for-js/15-css-selectors/3-margin-between-pairs/index.html
deleted file mode 100644
index be0d58bc..00000000
--- a/8-css-for-js/15-css-selectors/3-margin-between-pairs/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      font: 14px/1.5 Georgia, serif;
-    }
-    
-    ul {
-      margin: 0;
-    }
-    
-    li:nth-child(odd):not(:first-child) {
-      margin-top: 1.5em;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст вверху без отступа от списка.
-  <ul>
-    <li>Маша</li>
-    <li>Паша</li>
-    <li>Даша</li>
-    <li>Женя</li>
-    <li>Саша</li>
-    <li>Гоша</li>
-  </ul>
-  Текст внизу без отступа от списка.
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md b/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md
deleted file mode 100644
index 1d4b8551..00000000
--- a/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Селектор
-
-Для отступа между парами, то есть перед каждым нечётным элементом, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
-
-Селектор будет `li:nth-child(odd)`, к нему нужно ещё добавить отсечение первого элемента: `li:nth-child(odd):not(:first-child)`.
-
-Можно поступить и по-другому: `li:nth-child(2n+3)` выберет все элементы для `n=0,1,2...`, то есть 3й, 5й и далее, те же, что и предыдущий селектор. Немного менее очевидно, зато короче.
-
-# Правило
-
-Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
-
-Поставим отступ перед каждым *нечётным* элементом, кроме первого:
-
-```css
-li:nth-child(odd):not(:first-child) {
-  margin-top: 1.5em;
-}
-```
-
-Получится так:
-
-```html
-<!--+ run src="index.html" -->
-```
-
diff --git a/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html b/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html
deleted file mode 100644
index be0d58bc..00000000
--- a/8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      font: 14px/1.5 Georgia, serif;
-    }
-    
-    ul {
-      margin: 0;
-    }
-    
-    li:nth-child(odd):not(:first-child) {
-      margin-top: 1.5em;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст вверху без отступа от списка.
-  <ul>
-    <li>Маша</li>
-    <li>Паша</li>
-    <li>Даша</li>
-    <li>Женя</li>
-    <li>Саша</li>
-    <li>Гоша</li>
-  </ul>
-  Текст внизу без отступа от списка.
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html b/8-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html
deleted file mode 100644
index bc2bed05..00000000
--- a/8-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      font: 14px/1.5 Georgia, serif;
-    }
-    
-    ul {
-      margin: 0;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст вверху без отступа от списка.
-  <ul>
-    <li>Маша</li>
-    <li>Паша</li>
-    <li>Даша</li>
-    <li>Женя</li>
-    <li>Саша</li>
-    <li>Гоша</li>
-  </ul>
-  Текст внизу без отступа от списка.
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md b/8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
deleted file mode 100644
index a091ae54..00000000
--- a/8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Отступ между парами, размером со строку
-
-[importance 4]
-
-Есть список `UL/LI`.
-
-```html
-Текст вверху без отступа от списка.
-<ul>
-  <li>Маша</li>
-  <li>Паша</li>
-  <li>Даша</li>
-  <li>Женя</li>
-  <li>Саша</li>
-  <li>Гоша</li>
-</ul>
-Текст внизу без отступа от списка.
-```
-
-Размеры шрифта и строки заданы стилем:
-
-```css
-body {
-  font: 14px/1.5 Georgia, serif;
-}
-```
-
-**Сделайте, чтобы между каждой парой элементов был вертикальный отступ.**
-<ul>
-<li>Размер отступа: ровно 1 строка.</li>
-<li>Нужно добавить только одно правило CSS, можно использовать CSS3.</li>
-<li>Не должно быть лишних отступов сверху и снизу списка.</li>
-</ul>
-
-Результат:
-[iframe src="solution" border=1 link]
-
diff --git a/8-css-for-js/15-css-selectors/article.md b/8-css-for-js/15-css-selectors/article.md
deleted file mode 100644
index c9282ae3..00000000
--- a/8-css-for-js/15-css-selectors/article.md
+++ /dev/null
@@ -1,254 +0,0 @@
-# Знаете ли вы селекторы?
-
-CSS3-селекторы -- фундаментально полезная вещь. 
-
-Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
-
-Поэтому эти селекторы необходимо знать.
-[cut]
-
-## Основные виды селекторов
-
-Основных видов селекторов всего несколько:
-
-<ul>
-<li>`*` -- любые элементы.</li>
-<li>`div` -- элементы с таким тегом.</li>
-<li>`#id` -- элемент с данным `id`.</li>
-<li>`.class` -- элементы с таким классом.</li>
-<li>`[name="value"]` -- селекторы на атрибут (см. далее).</li>
-<li>`:visited` -- "псевдоклассы", остальные разные условия на элемент (см. далее).</li>
-</ul>
-
-**Селекторы можно комбинировать, записывая последовательно, без пробела:**
-
-<ul>
-<li>`.c1.c2` -- элементы одновременно с двумя классами `c1` и `c2`</li>
-<li>`a#id.c1.c2:visited` -- элемент `a` с данным `id`, классами `c1` и `c2`, и псевдоклассом `visited`</li>
-</ul>
-
-## Отношения
-
-В CSS3 предусмотрено четыре вида отношений между элементами.
-
-Самые известные вы наверняка знаете:
-<ul>
-<li>`div p` -- элементы `p`, являющиеся потомками `div`.</li>
-<li>`div > p` -- только непосредственные потомки</li>
-</ul>
-
-Есть и два более редких:
-<ul>
-<li>`div ~ p` -- правые соседи: все `p` на том же уровне вложенности, которые идут после `div`.</li>
-<li>`div + p` -- первый правый сосед: `p` на том же уровне вложенности, который идёт сразу после `div` (если есть).</li>
-</ul>
-
-Посмотрим их на примере HTML:
-
-```html
-<h3>Балтославянские языки</h3>
-
-<ol id="languages">
-  ...Вложенный OL/LI список языков...
-</ol>
-```
-
-CSS-селекторы:
-
-```css
-/*+ no-beautify */
-#languages li {
-  color: brown;   /* потомки #languages, подходящие под селектор  LI */
-}
-
-#languages > li {
-  color: black;   /* первый уровень детей #languages подходящих под LI */
-}
-
-#e-slavic { font-style: italic; }
-
-*!*
-#e-slavic ~ li {  /* правые соседи #e-slavic с селектором LI */
-  color: red;
-}
-*/!*
-
-#latvian { 
-  font-style: italic;
-}
-
-#latvian * {      /* потомки #latvian, подходяще под * (т.е. любые) */
-  font-style: normal;
-}
-
-*!*
-#latvian + li {  /* первый правый сосед #latvian с селектором LI */
- color: green;
-}
-*/!*
-```
-
-Результат:
-[iframe src="relation" border="1" edit link] 
-
-
-## Фильтр по месту среди соседей
-
-При выборе элемента можно указать его место среди соседей.
-
-Список псевдоклассов для этого:
-
-<ul>
-<li>`:first-child` -- первый потомок своего родителя.</li>
-<li>`:last-child` -- последний потомок своего родителя.</li>
-<li>`:only-child` -- единственный потомок своего родителя, соседних элементов нет.</li>
-<li>`:nth-child(a)` -- потомок номер `a` своего родителя, например `:nth-child(2)` -- второй потомок. Нумерация начинается с `1`.</li>
-<li>`:nth-child(an+b)` -- расширение предыдущего селектора через указание номера потомка формулой, где `a,b` -- константы, а под `n` подразумевается любое целое число.
-
-Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо `n`. Например:
-<ul>
-<li>`:nth-child(2n)` даст элементы номер `2`, `4`, `6`..., то есть чётные.</li>
-<li>`:nth-child(2n+1)` даст элементы номер `1`, `3`..., то есть нечётные.</li>
-<li>`:nth-child(3n+2)` даст элементы номер `2`, `5`, `8` и так далее.</li>
-</ul>
-</li>
-</ul>
-
-Пример использования для выделения в списке:
-[iframe src="nthchild" border="1" edit link]
-
-```css
-/*+ hide="CSS к примеру выше"  no-beautify */
-li:nth-child(2n) { /* чётные */
-  background: #eee;
-}
-
-li:nth-child(3) {  /* 3-ий потомок */
-  color: red;
-}
-```
-
-<ul>
-<li>`:nth-last-child(a)`, `:nth-last-child(an+b)` -- то же самое, но отсчёт начинается с конца, например `:nth-last-child(2)` -- второй элемент с конца.</li>
-</ul>
-
-## Фильтр по месту среди соседей с тем же тегом
-
-Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
-
-<ul>
-<li>`:first-of-type`</li>
-<li>`:last-of-type`</li>
-<li>`:only-of-type`</li>
-<li>`:nth-of-type`</li>
-<li>`:nth-last-of-type`</li>
-</ul>
-
-Они имеют в точности тот же смысл, что и обычные `:first-child`, `:last-child` и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
-
-Пример использования для раскраски списка `DT` "через один" и предпоследнего `DD`:
-
-[iframe src="nthchild-type" border="1" edit link]
-
-```css
-/*+ hide="CSS к примеру выше"  no-beautify */
-dt:nth-of-type(2n) {
-  /* чётные dt (соседи с другими тегами игнорируются) */
-  background: #eee;
-}
-
-dd:nth-last-of-type(2) {
-  /* второй dd снизу */
-  color: red;
-}
-```
-
-Как видим, селектор `dt:nth-of-type(2n)` выбрал каждый второй элемент `dt`, причём другие элементы (`dd`) в подсчётах не участвовали.
-
-## Селекторы атрибутов
-
-<dl>
-<dt>На атрибут целиком</dt>
-<dd>
-<ul>
-<li>`[attr]` -- атрибут установлен,</li>
-<li>`[attr="val"]` -- атрибут равен `val`.</li>
-</ul>
-</dd>
-<dt>На начало атрибута</dt>
-<dd>
-<ul>
-<li>`[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.</li>
-<li>`[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.</li>
-</ul>
-</dd>
-<dt>На содержание</dd>
-<dd>
-<ul>
-<li>`[attr*="val"]` -- атрибут содержит подстроку `val`, например равен `"myvalue"`.</li>
-<li>`[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел.
-Например: `[attr~="delete"]` верно для `"edit delete"` и неверно для `"undelete"` или `"no-delete"`.</li>
-</ul>
-</dd>
-<dt>На конец атрибута</dt>
-<dd>
-<ul>
-<li>`[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.</li>
-</ul>
-</dd>
-</dl>
-
-## Другие псевдоклассы
-
-<ul>
-<li>`:not(селектор)` -- все, кроме подходящих под селектор.</li>
-<li>`:focus` -- в фокусе.</li>
-<li>`:hover` -- под мышью.</li>
-<li>`:empty` -- без детей (даже без текстовых).</li>
-<li>`:checked`, `:disabled`, `:enabled` -- состояния `INPUT`.</li>
-<li>`:target` -- этот фильтр сработает для элемента, `ID` которого совпадает с анкором  `#...` текущего URL.
-
-Например, если на странице есть элемент с `id="intro"`, то правило `:target { color: red }` подсветит его в том случае, если текущий URL имеет вид `http://...#intro`.
-</li>
-</ul>
-
-## Псевдоэлементы ::before, ::after
-
-"Псевдоэлементы" -- различные вспомогательные элементы, которые браузер записывает или может записать в документ.
-
-При помощи *псевдоэлементов* `::before` и `::after` можно добавлять содержимое в начало и конец элемента:
-
-```html
-<!--+ autorun -->
-<style>
-  li::before {
-    content: " [[ ";
-  }
-  
-  li::after {
-    content: " ]] ";
-  }
-</style>
-
-Обратите внимание: содержимое добавляется <b>внутрь</b> LI.
-
-<ul>
-  <li>Первый элемент</li>
-  <li>Второй элемент</li>
-</ul>
-```
-
-Псевдоэлементы `::before`/`::after` добавили содержимое в начало и конец каждого `LI`.
- 
-[smart header="`:before` или `::before`?"]
-Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: `:after/:before`. 
-
-Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно. 
-
-Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие.
-[/smart]
-
-## Практика
-
-Вы можете использовать информацию выше как справочную для решения задач ниже, которые уже реально покажут, владеете вы CSS-селекторами или нет.
-
diff --git a/8-css-for-js/15-css-selectors/nthchild-type.view/index.html b/8-css-for-js/15-css-selectors/nthchild-type.view/index.html
deleted file mode 100644
index 6cd90276..00000000
--- a/8-css-for-js/15-css-selectors/nthchild-type.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    dt:nth-of-type(2n) {
-      /* чётные dt (соседи с другими тегами игнорируются) */
-      
-      background: #eee;
-    }
-    
-    dd:nth-last-of-type(2) {
-      /* второй dd снизу */
-      
-      color: red;
-    }
-    
-    code {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <dl>
-    <dt>Первый dt</dt>
-    <dd>Описание dd</dd>
-    <dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
-    <dd>Описание dd</dd>
-    <dt>Третий dt</dt>
-    <dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
-    <dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
-    <dd>Описание dd</dd>
-  </dl>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/nthchild.view/index.html b/8-css-for-js/15-css-selectors/nthchild.view/index.html
deleted file mode 100644
index b0bfad48..00000000
--- a/8-css-for-js/15-css-selectors/nthchild.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    li:nth-child(2n) {
-      /* чётные */
-      
-      background: #eee;
-    }
-    
-    li:nth-child(3) {
-      /* 3-ий потомок */
-      
-      color: red;
-    }
-    
-    code {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul>
-    <li>Древнерусский язык</li>
-    <li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
-    <li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
-    <li>Украинский язык <code>li:nth-child(2n)</code></li>
-    <li>Белорусский язык</li>
-    <li>Другие языки <code>li:nth-child(2n)</code></li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/15-css-selectors/relation.view/index.html b/8-css-for-js/15-css-selectors/relation.view/index.html
deleted file mode 100644
index a555bd2a..00000000
--- a/8-css-for-js/15-css-selectors/relation.view/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #languages li {
-      color: brown;
-    }
-    
-    #languages > li {
-      color: black;
-    }
-    
-    #e-slavic {
-      font-style: italic;
-    }
-    
-    #e-slavic ~ li {
-      color: red;
-    }
-    
-    #latvian {
-      font-style: italic;
-    }
-    
-    #latvian * {
-      font-style: normal
-    }
-    
-    #latvian + li {
-      color: green;
-    }
-    
-    code {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <h3>Балтославянские языки</h3>
-
-  <ol id="languages">
-    <li>Славянские языки
-      <ol>
-        <li>Славянские микроязыки</li>
-        <li>Праславянский язык</li>
-        <li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
-        <li>Западнославянские языки <code>#e-slavic ~ li</code></li>
-        <li>Южнославянские языки <code>#e-slavic ~ li</code></li>
-        <li> ... <code>#e-slavic ~ li</code></li>
-      </ol>
-    </li>
-    <li>Балтийские языки
-      <ol>
-        <li>Литовский язык</li>
-        <li id="latvian">Латышский язык <code>#latvian</code>
-          <ol>
-            <li>Латгальский язык <code>#latvian *</code></li>
-          </ol>
-        </li>
-        <li>Прусский язык <code>#latvian + li </code></li>
-        <li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
-      </ol>
-    </li>
-  </ol>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/article.gif b/8-css-for-js/17-css-sprite/article.gif
deleted file mode 100644
index 9867f4d2..00000000
Binary files a/8-css-for-js/17-css-sprite/article.gif and /dev/null differ
diff --git a/8-css-for-js/17-css-sprite/article.md b/8-css-for-js/17-css-sprite/article.md
deleted file mode 100644
index eba98240..00000000
--- a/8-css-for-js/17-css-sprite/article.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# CSS-спрайты 
-
-CSS-спрайт -- способ объединить много изображений в одно, чтобы:
-<ol>
-<li>Cократить количество обращений к серверу.</li>
-<li>Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.</li>
-<li>Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.</li>
-</ol>
-[cut]
-Рассмотрим, как это работает, на примере дерева:
-
-```html
-<ul>
-  <li class="open">
-    <div class="icon"></div>
-    <div class="text">Раздел 1
-      <br>В две строки</div>
-    <ul>
-      <li class="closed">
-        <div class="icon"></div>
-        <div class="text">Раздел 1.1 в одну строку</div>
-      </li>
-      <li class="leaf">
-        <div class="icon"></div>
-        <div class="text">Страница 1.2
-          <br> в две строки</div>
-      </li>
-    </ul>
-  </li>
-  <li class="closed">
-    <div class="icon"></div>
-    <div class="text">Раздел 2
-      <br>В две строки</div>
-  </li>
-</ul>
-```
-
-[iframe src="sprite-tree-src" border=1 height=200 link edit]
-
-Сейчас "плюс", "минус" и "статья" -- три отдельных изображения. Объединим их в спрайт.
-
-
-
-## Шаг 1. Использовать background
-
-Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`., а не через тег `IMG`.
-
-В данном случае он уже сделан. Стиль для дерева:
-
-```css
-.icon {
-  width: 16px;
-  height: 16px;
-  float: left;
-}
-
-.open .icon {
-  cursor: pointer;
-  background: url(minus.gif);
-}
-
-.closed .icon {
-  cursor: pointer;
-  background: url(plus.gif);
-}
-
-.leaf .icon {
-  cursor: text;
-  background: url(article.gif);
-}
-```
-
-## Шаг 2. Объединить изображения
-
-Составим из нескольких изображений одно `icons.gif`, расположив их, например, по вертикали.
-
-Из <img src="plus.gif">, <img src="minus.gif"> и <img src="article.gif"> получится одна картинка: <img src="icons.gif">
-
-## Шаг 3. Показать часть спрайта в "окошке"
-
-А теперь самое забавное. Размер `DIV'а` для иконки -- жёстко фиксирован:
-
-```css
-/*+ no-beautify */
-.icon {
-*!*
-  width: 16px;
-  height: 16px;
-*/!*
-  float: left;
-}
-```
-
-Это значит, что если поставить `background'ом` объединённую картинку, то вся она не поместится, будет видна только верхняя часть:
-
-[iframe src="sprite-tree-1" height=60 border=1]
-
-Если бы высота иконки была больше, например, `16x48`, как в примере ниже, то было бы видно и остальное:
-
-[iframe src="height48" height=80 border=1]
-..Но так как там всего `16px`, то помещается только одно изображение.
-
-## Шаг 4. Сдвинуть спрайт
-
-Сдвиг фона `background-position` позволяет выбирать, какую именно часть спрайта видно.
-
-В спрайте `icons.gif` изображения объединены так, что сдвиг на `16px` покажет следующую иконку:
-
-```css
-/*+ no-beautify */
-.icon {
-  width: 16px;
-  height: 16px;
-  float: left;
-  background: url(icons.gif) no-repeat;
-}
-
-.open .icon {
-  background-position: 0 -16px; /* вверх на 16px */
-  cursor: pointer;
-}
-
-.closed .icon {
-  background-position: 0 0px; /* по умолчанию */
-  cursor: pointer;
-}
-
-.leaf .icon {
-  background-position: 0 -32px; /* вверх на 32px */
-  cursor: text;
-}
-```
-
-Результат:
-
-[iframe src="sprite-tree" border=1 height=200 link edit]
-
-<ul>
-<li>В спрайт могут объединяться изображения разных размеров, т.е. сдвиг может быть любым.</li>
-<li>Сдвигать можно и по горизонтали и по вертикали.</li>
-</ul>
-
-### Отступы
-
-Обычно отступы делаются `margin/padding`, но иногда их бывает удобно предусмотреть в спрайте.
-
-Тогда если элемент немного больше, чем размер изображения, то в "окошке" не появится лишнего.
-
-Пример спрайта с отступами:
-
-<img src="sprites-example.png">
-
-Иконка RSS находится в нём на координатах `(90px, 40px)`:
-
-<img src="sprites-example-lines2.png">
-
-Это значит, что чтобы показать эту иконку, нужно сместить фон:
-
-```css
-background-position: -90px -40px;
-```
-
-При этом в левом-верхнем углу фона как раз и будет эта иконка:
-
-[iframe src="sprite-example" border=1]
-
-Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка. 
-
-Его стиль:
-
-```css
-/*+ no-beautify */
-.rss {
-  width: 35px; /* ширина/высота больше чем размер иконки */
-  height: 35px;
-  border: 1px solid black;
-  float: left;
-  background-image: url(sprite.png);
-  background-position: -90px -40px;
-}
-```
-
-Если бы в спрайте не было отступов, то в такое большое "окошко" наверняка влезли бы другие иконки.
-
-
-## Итого
-
-[smart header="Когда использовать для изображений `IMG`, а когда -- `CSS background`?"]
-
-Решение лучше всего принимать, исходя из принципов семантической вёрстки.
-
-Задайте вопрос -- что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?
-
-Элемент `IMG` следует использовать в первом случае, а для оформления у нас есть CSS.
-[/smart]
-
-
-Спрайты позволяют:
-<ol>
-<li>Cократить количество обращений к серверу.</li>
-<li>Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.</li>
-<li>Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.</li>
-</ol>
-
-Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут -- изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не "решёткой".
-
-Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида -- осуществляться при помощи сдвига `background-position`.
-
-Для автоматизированной сборки спрайтов используются специальные инструменты, например <a href="http://csssprites.org/">SmartSprites</a>.
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/height48.view/index.html b/8-css-for-js/17-css-sprite/height48.view/index.html
deleted file mode 100644
index d38bc117..00000000
--- a/8-css-for-js/17-css-sprite/height48.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 48px;
-      float: left;
-      outline: 1px dotted black;
-      background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Пример раздела</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/icons.gif b/8-css-for-js/17-css-sprite/icons.gif
deleted file mode 100644
index 9c24751e..00000000
Binary files a/8-css-for-js/17-css-sprite/icons.gif and /dev/null differ
diff --git a/8-css-for-js/17-css-sprite/minus.gif b/8-css-for-js/17-css-sprite/minus.gif
deleted file mode 100644
index e4e6e6eb..00000000
Binary files a/8-css-for-js/17-css-sprite/minus.gif and /dev/null differ
diff --git a/8-css-for-js/17-css-sprite/plus.gif b/8-css-for-js/17-css-sprite/plus.gif
deleted file mode 100644
index 9f52ccdd..00000000
Binary files a/8-css-for-js/17-css-sprite/plus.gif and /dev/null differ
diff --git a/8-css-for-js/17-css-sprite/sprite-example/index.html b/8-css-for-js/17-css-sprite/sprite-example/index.html
deleted file mode 100644
index d23710b6..00000000
--- a/8-css-for-js/17-css-sprite/sprite-example/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .rss {
-      width: 35px;
-      height: 35px;
-      border: 1px solid black;
-      float: left;
-      background-image: url(https://js.cx/sprite-example/sprite.png);
-      background-position: -90px -40px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div class="rss"></div>
-  Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html b/8-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html
deleted file mode 100644
index d38bc117..00000000
--- a/8-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 48px;
-      float: left;
-      outline: 1px dotted black;
-      background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Пример раздела</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/sprite-tree-1/index.html b/8-css-for-js/17-css-sprite/sprite-tree-1/index.html
deleted file mode 100644
index eaee2391..00000000
--- a/8-css-for-js/17-css-sprite/sprite-tree-1/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 16px;
-      float: left;
-      outline: 1px dotted black;
-      background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Пример раздела</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/sprite-tree-src.view/index.html b/8-css-for-js/17-css-sprite/sprite-tree-src.view/index.html
deleted file mode 100644
index 28c9ff67..00000000
--- a/8-css-for-js/17-css-sprite/sprite-tree-src.view/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 16px;
-      float: left;
-    }
-    
-    .open .icon {
-      cursor: pointer;
-      background: url(https://js.cx/sprite-tree/minus.gif);
-    }
-    
-    .closed .icon {
-      cursor: pointer;
-      background: url(https://js.cx/sprite-tree/plus.gif);
-    }
-    
-    .leaf .icon {
-      cursor: text;
-      background: url(https://js.cx/sprite-tree/article.gif);
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-
-  <ul>
-    <li class="open">
-      <div class="icon"></div>
-      <div class="text">Раздел 1
-        <br>В две строки</div>
-      <ul>
-        <li class="closed">
-          <div class="icon"></div>
-          <div class="text">Раздел 1.1 в одну строку</div>
-        </li>
-        <li class="leaf">
-          <div class="icon"></div>
-          <div class="text">Страница 1.2
-            <br> в две строки</div>
-        </li>
-      </ul>
-    </li>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Раздел 2
-        <br>В две строки</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/sprite-tree.view/index.html b/8-css-for-js/17-css-sprite/sprite-tree.view/index.html
deleted file mode 100644
index ee59bc06..00000000
--- a/8-css-for-js/17-css-sprite/sprite-tree.view/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 16px;
-      float: left;
-      background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
-    }
-    
-    .open .icon {
-      background-position: 0 -16px;
-      cursor: pointer;
-    }
-    
-    .closed .icon {
-      background-position: 0 0px;
-      cursor: pointer;
-    }
-    
-    .leaf .icon {
-      background-position: 0 -32px;
-      cursor: text;
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-
-  <ul>
-    <li class="open">
-      <div class="icon"></div>
-      <div class="text">Раздел 1
-        <br>В две строки</div>
-      <ul>
-        <li class="closed">
-          <div class="icon"></div>
-          <div class="text">Раздел 1.1 в одну строку</div>
-        </li>
-        <li class="leaf">
-          <div class="icon"></div>
-          <div class="text">Страница 1.2
-            <br> в две строки</div>
-        </li>
-      </ul>
-    </li>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Раздел 2
-        <br>В две строки</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/17-css-sprite/sprites-example-lines2.png b/8-css-for-js/17-css-sprite/sprites-example-lines2.png
deleted file mode 100644
index cf82b462..00000000
Binary files a/8-css-for-js/17-css-sprite/sprites-example-lines2.png and /dev/null differ
diff --git a/8-css-for-js/17-css-sprite/sprites-example.png b/8-css-for-js/17-css-sprite/sprites-example.png
deleted file mode 100644
index 73c560dd..00000000
Binary files a/8-css-for-js/17-css-sprite/sprites-example.png and /dev/null differ
diff --git a/8-css-for-js/18-css-format/article.md b/8-css-for-js/18-css-format/article.md
deleted file mode 100644
index 580a92a7..00000000
--- a/8-css-for-js/18-css-format/article.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Правила форматирования CSS
-
-Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.
-[cut]
-
-## Каждое свойство -- на отдельной строке
-
-Так -- неверно:
-
-```css
-/*+ no-beautify */
-#snapshot-box h2 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }
-```
-
-Так -- правильно:
-
-```css
-/*+ no-beautify */
-#snapshot-box h2 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 0 0 6px 0; 
-  font-weight: bold; 
-}
-```
-
-Цель -- лучшая читаемость, проще найти и поправить свойство.
-
-## Каждый селектор -- на отдельной строке
-
-Неправильно:
-
-```css
-/*+ no-beautify */
-#snapshot-box h2, #profile-box h2, #order-box h2 {
-  padding: 0 0 6px 0; 
-  font-weight: bold; 
-}
-```
-
-Правильно:
-
-```css
-/*+ no-beautify */
-#snapshot-box h2, 
-#profile-box h2, 
-#order-box h2 {
-  padding: 0 0 6px 0; 
-  font-weight: bold; 
-}
-```
-
-Цель -- лучшая читаемость, проще найти селектор.
-
-## Свойства, сильнее влияющие на документ, идут первыми
-
-Рекомендуется располагать свойства в следующем порядке:
-<ol>
-<li>Сначала положение элемента относительно других: 
-`position`, `left/right/top/bottom`, `float`, `clear`, `z-index`.</li>
-<li>Затем размеры и отступы: 
-`width`, `height`, `margin`, `padding`...</li>
-<li>Рамка `border`, она частично относится к размерам.</li>
-<li>Общее оформление содержимого: 
-`list-style-type`, `overflow`...</li>
-<li>Цветовое и стилевое оформление: 
-`background`, `color`, `font`...</li>
-</ol>
-
-**Общая логика сортировки: "от общего -- к локальному и менее важному".**
-
-При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) -- в конце.
-
-Например:
-
-```css
-/*+ no-beautify */
-#snapshot-box h2 {
-  position: absolute; /* позиционирование */
-  left: 0;
-  top: 0;
-
-  padding: 0 0 6px 0; /* размеры и отступы */
-
-  color: red;         /* стилевое оформление */
-  font-weight: bold;  
-}
-```
-
-</li>
-<li>**Свойство без префикса пишется последним.**
-
-Например:
-
-```css
--webkit-box-shadow:0 0 100px 20px #000;
-box-shadow:0 0 100px 20px #000;
-```
-
-Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные. 
-</li>
-
-## Организация CSS-файлов проекта
-
-Стили можно разделить на две основные группы:
-<ol>
-<li>**Блоки-компоненты имеют свой CSS.** Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.
-
-Такой CSS идёт "в комплекте" с модулем, его удобно выделять в отдельные файлы и подключать через `@import`. 
-
-Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы `@import` на их содержимое, объединяя все CSS в один файл.
-</li>
-<li>**Страничный и интегрирующий CSS**.
-Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.
-
-```css
-/*+ no-beautify */
-.tab .profile { /* профиль внутри вкладки */
-  float: left;
-  width: 300px;
-  height: 200px;
-}
-```
-
-Важные страничные блоки можно выделять особыми комментариями:
-
-```css
-/** ===========================
- *  Профиль посетителя
- *  ===========================
-*/
-
-.profile {
-  border: 1px solid gray;
-}
-
-.profile h2 {
-  color: blue;
-  font-size: 1.8em;
-}
-```
-
-</li>
-</ol>
-
-
-CSS-препроцессоры, такие как [SASS](http://sass-lang.com/), [LESS](http://lesscss.org/), [Stylus](http://learnboost.github.com/stylus/), [Autoprefixer](https://github.com/postcss/autoprefixer) делают написание CSS сильно удобнее.. 
-
-Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.
-
diff --git a/8-css-for-js/2-css-units/article.md b/8-css-for-js/2-css-units/article.md
deleted file mode 100644
index c0271390..00000000
--- a/8-css-for-js/2-css-units/article.md
+++ /dev/null
@@ -1,319 +0,0 @@
-# Единицы измерения: "px", "em", "rem" и другие
-
-В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину -- что и когда выбирать. 
-
-[cut]
-## Пиксели: px
-
-Пиксель `px` -- это самая базовая, абсолютная и окончательная единица измерения.
-
-Количество пикселей задаётся в настроках [разрешения экрана](http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0), один `px` -- это как раз один такой пиксель на экране.  Все значения браузер в итоге пересчитает в пиксели.
-
-Пиксели могут быть дробными, например размер можно задать в `16.5px`. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в `100px`, его нужно разделить на три части -- волей-неволей появляются `33.333...px`. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
-
-Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование. 
-
-[compare]
-+Главное достоинство пикселя -- чёткость и понятность
--Другие единицы измерения -- в некотором смысле "мощнее", они являются относительными и позволяют устанавливать соотношения между различными размерами
-[/compare]
-
-
-[warn header="Давно на свалке: `mm`, `cm`, `pt`, `pc`"]
-
-Существуют также  "производные" от пикселя единицы измерения: `mm`, `cm`, `pt` и `pc`, но они давно отправились на свалку истории.
-
-Вот, если интересно, их значения:
-<ul>
-<li>`1mm` (мм) = `3.8px`</li>
-<li>`1cm` (см) = `38px`</li>
-<li>`1pt` (типографский пункт) = `4/3 px`</li>
-<li>`1pc` (типографская пика) = `16px`</li>
-</ul>
-Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет. 
-[/warn]
-
-[smart header="Почему сантиметре `cm` содержится ровно 38 пикселей?"]
-В реальной жизни сантиметр -- это эталон длины, одна сотая метра. А [пиксель](http://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C) может быть разным, в зависимости от экрана.
-
-Но в формулах выше под пикселем понимается "сферический пиксель в вакууме", точка на "стандартизованном экране", характеристики которого описаны в [спецификации](http://www.w3.org/TR/CSS2/syndata.html#length-units). 
-
-Поэтому ни о каком соответствии `cm` реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
-[/smart]
-
-
-## Относительно шрифта: em
-
-`1em` -- текущий размер шрифта.
-
-Можно брать любые пропорции от текущего шрифта: `2em`, `0.5em` и т.п.
-
-**Размеры в `em` -- *относительные*, они определяются по текущему контексту.**
-
-Например, давайте сравним `px` с `em` на таком примере:
-
-```html
-<!--+ autorun height=80 -->
-<div style="font-size:24px">
-  Страусы
-  <div style="font-size:24px">Живут также в Африке</div>
-</div>
-```
-
-`24` пикселей -- и в Африке `24` пикселей, поэтому размер шрифта в `<div>` одинаков.
-
-А вот аналогичный пример с `em` вместо `px`:
-
-```html
-<!--+ autorun height=120 -->
-<div style="font-size:1.5em">
-  Страусы
-  <div style="font-size:1.5em">Живут также в Африке</div>
-</div>
-```
-
-Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая.
-
-Выходит, размеры, заданные в `em`, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
-
-[smart header="Что такое размер шрифта?"]
-Что такое "размер шрифта"? Это вовсе не "размер самой большой буквы в нём", как можно было бы подумать.
-
-Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт. 
-
-Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом  "хвосты" букв, таких как `р`, `g` могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
-[/smart]
-
-[smart header="Единицы `ex` и `ch`"]
-
-В спецификации указаны также единицы [ex](http://www.w3.org/TR/css3-values/#ex-unit) и [ch](http://www.w3.org/TR/css3-values/#ch-unit), которые означают размер символа `"x"` и размер символа `"0"`. 
-
-Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква `"x"` и ноль `"0"`. В этом случае они носят более условный характер.
-
-Эти единицы используются чрезвычайно редко, так как "размер шрифта" `em` обычно вполне подходит.
-[/smart]
-
-## Проценты %
-
-Проценты `%`, как и `em` -- относительные единицы.
-
-Когда мы говорим "процент", то возникает вопрос -- "Процент от чего?" 
-
-Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
-
-Это очень важная особенность процентов, про которую, увы, часто забывают.
-
-Отличный источник информации по этой теме -- стандарт, [Visual formatting model details](http://www.w3.org/TR/CSS2/visudet.html).
-
-Вот пример с `%`, он выглядит в точности так же, как с `em`:
-
-```html
-<!--+ autorun height=120 -->
-<div style="font-size:150%">
-  Страусы
-  <div style="font-size:150%">Живут также в Африке</div>
-</div>
-```
-
-В примере выше процент берётся от размера шрифта родителя.
-
-А вот примеры-исключения, в которых `%` берётся не так:
-<dl>
-<dt>`margin-left`</dt>
-<dd>При установке свойства `margin-left` в `%`, процент берётся от *ширины* родительского блока, а вовсе не от его `margin-left`.</dd>
-<dt>`line-height`</dt>
-<dd>При установке свойства `line-height` в `%`, процент берётся от текущего *размера шрифта*, а вовсе не от `line-height` родителя. Детали по `line-height` и размеру шрифта вы также можете найти в статье [](/font-size-line-height).</dd>
-<dt>`width/height`</dt>
-<dd>Для `width/height` обычно процент от ширины/высоты родителя, но при `position:fixed`, процент берётся от ширины/высоты *окна* (а не родителя и не документа). Кроме того, иногда `%` требует соблюдения дополнительных условий, за примером -- обратитесь к главе [](/height-percent).</dd>
-</dl>
-
-## Единица rem: смесь px и em
-
-Итак, мы рассмотрели:
-<ul>
-<li>`px` -- абсолютные, чёткие, понятные, не зависящие ни от чего.</li>
-<li>`em` -- относительно размера шрифта.</li>
-<li>`%` -- относительно такого же свойства родителя (а может и не родителя, а может и не такого же -- см. примеры выше).</li>
-</ul>
-
-Может быть, пора уже остановиться, может этого достаточно? 
-
-Э-э, нет! Не все вещи делаются удобно.
-
-Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки "Шрифт больше" и "Шрифт меньше". При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт. 
-
-Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде [key Ctrl++], но они работают слишком тупо -- берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать? 
-
-Какую единицу использовать для задания шрифтов? Наверно не `px`, ведь значения в `px` абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
-
-Следующие кандидаты -- `em` и `%`. 
-
-Разницы между ними здесь нет, так как при задании `font-size` в процентах, эти проценты берутся от `font-size` родителя, то есть ведут себя так же, как и `em`.
-
-Вроде бы, использовать можно, однако есть проблема.
-
-Попробуем использовать этот подход для `<li>`.
-
-Протестируем на таком списке:
-
-```html
-<!--+ run autorun height=150  no-beautify -->
-<ul>
-<li>Собака
-  <ul>
-  <li>бывает
-    <ul>
-    <li>кусачей
-      <ul>
-      <li>только
-        <ul>
-        <li>от жизни
-          <ul>
-          <li>собачей</li>
-          </ul>
-        </li>
-        </ul>
-      </li>
-      </ul>
-    </li>
-    </ul>
-  </li>
-  </ul>
-</li>
-</ul>
-```
-
-Пока это обычный вложенный список.
-
-Теперь уменьшим размер шрифта до `0.8em`, вот что получится:
-
-```html
-<!--+ run autorun height=100  no-beautify -->
-<style>
-  li {
-    font-size: 0.8em;
-  }
-</style>
-
-<ul>
-<li>Собака
-  <ul>
-  <li>бывает
-    <ul>
-    <li>кусачей
-      <ul>
-      <li>только
-        <ul>
-        <li>от жизни
-          <ul>
-          <li>собачей</li>
-          </ul>
-        </li>
-        </ul>
-      </li>
-      </ul>
-    </li>
-    </ul>
-  </li>
-  </ul>
-</li>
-</ul>
-```
-
-Проблема очевидна. Хотели, как лучше, а получилось... Мелковато. Каждый вложенный `<li>` получил размер шрифта `0.8` от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.
-
-Можно уменьшить размер шрифта только на одном "корневом элементе"... Или воспользоваться единицей `rem`, которая, можно сказать, специально придумана для таких случаев!
-
-**Единица `rem` задаёт размер относительно размера шрифта элемента `<html>`.**
-
-Как правило, браузеры ставят этому элементу некоторый "разумный" (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать `rem` для задания шрифтов внутри относительно него:
-
-```html
-<!--+ run height=400 autorun  no-beautify -->
-<style>
-*!*
-  html {
-    font-size: 14px;
-  }
-  li {
-    font-size: 0.8rem;
-  }
-*/!*
-</style>
-
-<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
-
-<img src="https://js.cx/clipart/angry_dog.png">
-
-<ul>
-<li>Собака
-  <ul>
-  <li>бывает
-    <ul>
-    <li>кусачей
-      <ul>
-      <li>только
-        <ul>
-        <li>от жизни
-          <ul>
-          <li>собачей</li>
-          </ul>
-        </li>
-        </ul>
-      </li>
-      </ul>
-    </li>
-    </ul>
-  </li>
-  </ul>
-</li>
-</ul>
-
-<script>
-var html = document.documentElement;
-up.onclick = function() {
-  // при помощи JS увеличить размер шрифта html на 2px
-  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
-};
-</script>
-```
-
-Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы. 
-
-Элементы, рамер которых задан в `rem`, не зависят друг от друга и от контекста -- и этим похожи на `px`, а с другой стороны они все заданы относительно размера шрифта `<html>`.
-
-Единица `rem` не поддерживается в IE8-. 
-
-## Относительно экрана: vw, vh, vmin, vmax
-
-Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](http://dev.w3.org/csswg/css3-values/): 
-
-<ul>
-<li>`vw` -- 1% ширины окна</li>
-<li>`vh` -- 1% высоты окна</li>
-<li>`vmin` -- наименьшее из (`vw`, `vh`), в IE9 обозначается `vm`</li>
-<li>`vmax` -- наибольшее из (`vw`, `vh`)</li>
-</ul>
-
-**Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.**
-
-Их основное преимущество -- в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
-
-[online]
-<p style="font-size:5vh">Этот текст написан с размером `5vh`.</p>
-
-Вы сможете легко увидеть, как работает `vh`, если поменяете размер окна браузера. Текст выше будет расти/уменьшаться.
-[/online]
-
-## Итого
-
-Мы рассмотрели единицы измерения:
-
-<ul>
-<li>`px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.</li>
-<li>`em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.</li>
-<li>`rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.</li>
-<li>`%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.</li>
-<li>`vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.</li>
-</ul>
-
diff --git a/8-css-for-js/3-display/article.md b/8-css-for-js/3-display/article.md
deleted file mode 100644
index f6bf03dc..00000000
--- a/8-css-for-js/3-display/article.md
+++ /dev/null
@@ -1,265 +0,0 @@
-# Все значения свойства "display"
-
-Свойство `display` имеет много разных значений. Обычно, используются только три из них: `none`, `inline` и `block`, потому что когда-то браузеры другие не поддерживали.
-
-Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
-
-## Значение none
-
-Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
-
-```html
-<!--+ autorun height=40 -->
-<div style="border:1px solid black">
-Невидимый div (
-  <div style="*!*display: none*/!*">Я - невидим!</div>
-) Стоит внутри скобок
-</div>
-```
-
-## Значение block
-
-<ul>
-<li>Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например `float`).</li>
-<li>Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.</li>
-</ul>
-
-Это значение `display` многие элементы имеют по умолчанию: `<div>`, заголовок `<h1>`, параграф `<p>`.
-
-```html
-<!--+ autorun height=80 -->
-<div style="border:1px solid black">
-  <div style="border:1px solid blue; width: 50%">Первый</div>
-  <div style="border:1px solid red">Второй</div>
-</div>
-```
-
-Блоки прилегают друг к другу вплотную, если у них нет `margin`.
-
-## Значение inline
-
-<ul>
-<li>Элементы располагаются на той же строке, последовательно.</li>
-<li>Ширина и высота элемента определяются по содержимому. Поменять их нельзя.</li>
-</ul>
-
-Например, инлайновые элементы по умолчанию: `<span>`, `<a>`.
-
-```html
-<!--+ autorun height=40  no-beautify -->
-<span style="border:1px solid black">
-  <span style="border:1px solid blue; width:50%">Ширина</span>
-  <a style="border:1px solid red">Игнорируется</a>
-</span>
-```
-
-Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними `<span>` и `<a>` есть пробел. Это потому, что он есть в HTML. 
-
-Если расположить элементы вплотную -- его не будет:
-
-```html
-<!--+ autorun height=40 -->
-<span style="border:1px solid black">
-  <span style="border:1px solid blue; width:50%">Без</span><a style="border:1px solid red">Пробела</a>
-</span>
-```
-
-Содержимое инлайн-элемента может переноситься на другую строку. 
-
-При этом каждая строка в смысле отображения является отдельным прямоугольником ("line box"). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
-
-Это проявляется, например, при назначении фона. 
-
-Например, три прямоугольника подряд:
-
-```html
-<!--+ autorun height=80  no-beautify -->
-<div style="width:400px">
-...<span style="background: lightgreen">
-  Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
-  Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
-</span>...
-</div>
-```
-
-Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
-
-```html
-<!--+ autorun height=80 -->
-<div style="border:1px solid black">
-  <span style="border:1px solid red">Инлайн</span>
-  <div style="border:1px solid blue; width:50%">Блок</div>
-  <span style="border:1px solid red">Инлайн</span>
-</div>
-```
-
-## Значение inline-block
-
-Это значение -- означает элемент, который продолжает находиться в строке (`inline`), но при этом может иметь важные свойства блока.
-
-Как и инлайн-элемент:
-<ul>
-<li>Располагается в строке.</li>
-<li>Размер устанавливается по содержимому.</li>
-</ul>
-
-Во всём остальном -- это блок, то есть:
-<ul>
-<li>Элемент всегда прямоугольный.</li>
-<li>Работают свойства `width/height`.</li>
-</ul>
-
-Это значение `display` используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров. 
-
-Например:
-
-```html
-<!--+ autorun height=160  no-beautify -->
-<style>
-li {
-*!*
-  display: inline-block;
-*/!*
-  list-style: none;
-  border: 1px solid red;
-}
-</style>
-
-<ul style="border:1px solid black; padding:0">
-  <li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
-  <li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
-  <li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
-  <li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
-  <li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
-</ul>
-```
-
-Свойство `vertical-align` позволяет выровнять такие элементы внутри внешнего блока:
-
-```html
-<!--+ autorun height=160  no-beautify -->
-<style>
-li {
-  display: inline-block;  
-  list-style: none;
-  border:1px solid red;
-*!*
-  vertical-align: middle;
-*/!*
-}
-</style>
-
-<ul style="border:1px solid black; padding:0">
-  <li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
-  <li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
-  <li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
-  <li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
-  <li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
-</ul>
-```
-
-Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript -- их не будет.
-
-## Значения table-*
-
-Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения `display`.
-
-Для таблицы целиком `table`, для строки -- `table-row`, для ячейки -- `table-cell` и т.д.
-
-Пример использования:
-
-```html
-<!--+ run autorun -->
-<form style="display: *!*table*/!*">
-  <div style="display: *!*table-row*/!*">
-    <label style="display: *!*table-cell*/!*">Имя:</label>
-    <input style="display: *!*table-cell*/!*">
-  </div>
-  <div style="display: *!*table-row*/!*">
-    <label style="display: *!*table-cell*/!*">Фамилия:</label>
-    <input style="display: *!*table-cell*/!*">
-  </div>
-</form>
-```
-
-Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента,  [описанные в стандарте](http://www.w3.org/TR/CSS2/tables.html#width-layout). 
-
-**Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.**
-
-С точки зрения современного CSS, обычные `<table>`, `<tr>`, `<td>` и т.д. -- это просто элементы с предопределёнными значениями `display`:
-
-```css
-/*+ no-beautify */
-table    { display: table }
-tr       { display: table-row }
-thead    { display: table-header-group }
-tbody    { display: table-row-group }
-tfoot    { display: table-footer-group }
-col      { display: table-column }
-colgroup { display: table-column-group }
-td, th   { display: table-cell }
-caption  { display: table-caption }
-```
-
-Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт [CSS 2.1 - Tables](http://www.w3.org/TR/CSS2/tables.html).
-
-### Вертикальное центрирование с table-cell
-
-Внутри ячеек свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) выравнивает содержимое по вертикали.
-
-Это можно использовать для центрирования:
-
-```html
-<!--+ run autorun height=120 -->
-<style>
-  div { border:1px solid black }
-</style>
-
-<div style="height:100px; *!*display: table-cell; vertical-align: middle*/!*">
-  <div>Элемент<br>С неизвестной<br>Высотой</div>
-</div>
-```
-
-CSS не требует, чтобы вокруг `table-cell` была структура таблицы: `table-row` и т.п. Может быть просто такой одинокий `DIV`, это допустимо.
-
-При этом он ведёт себя как ячейка `TD`, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи `vertical-align`.
-
-## Значения list-item и run-in
-
-У свойства `display` есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
-
-<dl>
-<dt>`list-item`</dt>
-<dd>Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
-
-```html
-<!--+ autorun height=40 -->
-<div style="*!*display: list-item*/!*; list-style:inside square">Пункт 1</div>
-```
-
-</dd>
-<dt>`run-in`</dt>
-<dd>Если после `run-in` идёт `block`, то `run-in` становится его первым инлайн-элементом, то есть отображается в начале `block`.
-
-Если ваш браузер поддерживает это значение,** то примере ниже `h3`, благодаря `display:run-in`, окажется визуально внутри `div`:
-
-```html
-<!--+ autorun height=100 -->
-<h3 style="*!*display: run-in*/!*; border:2px solid red">Про пчёл.</h3>
-<div style="border:2px solid black">Пчёлы - отличные создания, они делают мёд.</div>
-```
-
-Если же вы видите две строки, то ваш браузер НЕ поддерживает `run-in`. 
-
-Вот, для примера, правильный вариант отображения `run-in`, оформленный другим кодом:
-
-```html
-<!--+ autorun height=60 -->
-<div style="border:2px solid black">
-  <h3 style="display: inline; border:2px solid red">Про пчёл.</h3>Пчёлы - отличные создания, они делают мёд.
-</div>
-```
-
-Если этот вариант отличается от того, что вы видите выше -- ваш браузер не поддерживает `run-in`. На момент написания этой статьи только IE поддерживал `display:run-in`.
-</dd>
-</dl>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png b/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png
deleted file mode 100644
index 1ed65c66..00000000
Binary files a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png and /dev/null differ
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html b/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html
deleted file mode 100644
index ca8375bb..00000000
--- a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .gallery li {
-      float: left;
-      width: 130px;
-      list-style: none;
-      /* красивости */
-      
-      border: 1px solid black;
-      text-align: center;
-      margin: 5px;
-    }
-    
-    .gallery li:nth-child(2n) {
-      height: 200px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="gallery">
-    <li>
-      <img src="https://js.cx/carousel/1.png" width="130" height="130">
-      <div>Картинка 1</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/2.png" width="130" height="130">
-      <div>Картинка 2</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/3.png" width="130" height="130">
-      <div>Картинка 3</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/4.png" width="130" height="130">
-      <div>Картинка 4</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/5.png" width="130" height="130">
-      <div>Картинка 5</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/6.png" width="130" height="130">
-      <div>Картинка 6</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/7.png" width="130" height="130">
-      <div>Картинка 7</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/8.png" width="130" height="130">
-      <div>Картинка 8</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/9.png" width="130" height="130">
-      <div>Картинка 9</div>
-    </li>
-
-  </ul>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html b/8-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html
deleted file mode 100644
index 2fc7abca..00000000
--- a/8-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .gallery li {
-      display: inline-block;
-      vertical-align: middle;
-      width: 130px;
-      list-style: none;
-      /* красивости */
-      
-      border: 1px solid black;
-      text-align: center;
-      margin: 5px;
-    }
-    
-    .gallery li:nth-child(2n) {
-      height: 200px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="gallery">
-    <li>
-      <img src="https://js.cx/carousel/1.png" width="130" height="130">
-      <div>Картинка 1</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/2.png" width="130" height="130">
-      <div>Картинка 2</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/3.png" width="130" height="130">
-      <div>Картинка 3</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/4.png" width="130" height="130">
-      <div>Картинка 4</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/5.png" width="130" height="130">
-      <div>Картинка 5</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/6.png" width="130" height="130">
-      <div>Картинка 6</div>
-    </li>
-
-  </ul>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/solution.md b/8-css-for-js/4-float/1-inline-block-vs-float/solution.md
deleted file mode 100644
index 2a3a6118..00000000
--- a/8-css-for-js/4-float/1-inline-block-vs-float/solution.md
+++ /dev/null
@@ -1,45 +0,0 @@
-Разница колоссальная. 
-
-В первую очередь она в том, что `inline-block` продолжают участвовать в потоке, а `float` -- нет.
-
-Чтобы её ощутить, достаточно задать себе следующие вопросы:
-
-<ol>
-<li>Что произойдёт, если контейнеру `UL` поставить рамку `border` -- в первом и во втором случае?</li>
-<li>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</li>
-<li>Как будут вести себя блоки, находящиеся под галереей?</ul>
-</ol>
-
-Попробуйте сами на них ответить.
-
-Затем читайте дальше.
-
-
-<dl>
-<dt>Что будет, если контейнеру `UL` поставить рамку `border`?</dt>
-<dd>Контейнер не выделяет пространство под `float`. А больше там ничего нет. В результате он просто сожмётся в одну линию сверху.
-
-Попробуйте сами, добавьте рамку в [edit src="solution"]песочнице[/edit].
-
-А в случае с `inline-block` всё будет хорошо, т.к. элементы остаются в потоке.
-</dd>
-<dt>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</dt>
-<dd>При `float:left` элементы двигаются направо до тех пор, пока не наткнутся на границу внешнего блока (с учётом `padding`) или на другой `float`-элемент. 
-
-Может получиться вот так:
-
-<img src="gallery-float-diffsize.png">
-
-Вы можете увидеть это, открыв демо-галерею в отдельном окне и изменяя его размер:
-
-[demo src="gallery-float-diffsize"]
-
-При использовании `inline-block` таких странностей не будет, блоки перенесутся корректно на новую строку. И, кроме того, можно выровнять элементы по высоте при помощи `li { vertical-align:middle }`: 
-
-[iframe height=500 src="gallery-inline-block" link edit]
-</dd>
-<dt>Как будут вести себя блоки, находящиеся под галереей?</dt>
-<dd>В случае с `float` нужно добавить дополнительную очистку с `clear`, чтобы поведение было идентично обычному блоку. 
-
-Иначе блоки, находящиеся под галереей, вполне могут "заехать" по вертикали на территорию галереи.</dd>
-</dl>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html b/8-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html
deleted file mode 100644
index 7118da0b..00000000
--- a/8-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .gallery li {
-      float: left;
-      width: 130px;
-      list-style: none;
-      /* красивости */
-      
-      border: 1px solid black;
-      text-align: center;
-      margin: 5px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="gallery">
-    <li>
-      <img src="https://js.cx/carousel/1.png" width="130" height="130">
-      <div>Картинка 1</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/2.png" width="130" height="130">
-      <div>Картинка 2</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/3.png" width="130" height="130">
-      <div>Картинка 3</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/4.png" width="130" height="130">
-      <div>Картинка 4</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/5.png" width="130" height="130">
-      <div>Картинка 5</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/6.png" width="130" height="130">
-      <div>Картинка 6</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/7.png" width="130" height="130">
-      <div>Картинка 7</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/8.png" width="130" height="130">
-      <div>Картинка 8</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/9.png" width="130" height="130">
-      <div>Картинка 9</div>
-    </li>
-
-  </ul>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/1-inline-block-vs-float/task.md b/8-css-for-js/4-float/1-inline-block-vs-float/task.md
deleted file mode 100644
index d53eec7a..00000000
--- a/8-css-for-js/4-float/1-inline-block-vs-float/task.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Разница inline-block и float
-
-[importance 5]
-
-Галерея изображений состоит из картинок в рамках с подписями (возможно, с другой дополнительной информацией).
-
-Пример галереи:
-[iframe src="solution" height=400 link edit].
-
-Технически вывод такой галереи можно реализовать при помощи списка UL/LI, где:
-<ol>
-<li>каждый LI имеет `display:inline-block`</li>
-<li>каждый LI имеет `float:left`</li>
-</ol>
-
-Какие различия между этими подходами? Какой вариант выбрали бы вы?
diff --git a/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md b/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md
deleted file mode 100644
index 3d2345e9..00000000
--- a/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Для решения можно применить принцип двухколоночной верстки `float` + `margin`. Иконка будет левой колонкой, а содержимое -- правой.
-
diff --git a/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html b/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html
deleted file mode 100644
index 129809a6..00000000
--- a/8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .icon {
-      width: 16px;
-      height: 16px;
-      float: left;
-    }
-    
-    .open .icon {
-      cursor: pointer;
-      background: url(https://js.cx/sprite-tree/minus.gif);
-    }
-    
-    .closed .icon {
-      cursor: pointer;
-      background: url(https://js.cx/sprite-tree/plus.gif);
-    }
-    
-    .leaf .icon {
-      cursor: text;
-      background: url(https://js.cx/sprite-tree/article.gif);
-    }
-    
-    li {
-      list-style: none;
-    }
-    
-    .text {
-      margin: 6px 0 6px 16px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-
-  <ul>
-    <li class="open">
-      <div class="icon"></div>
-      <div class="text">Раздел 1
-        <br>(занимает две строки)</div>
-      <ul>
-        <li class="closed">
-          <div class="icon"></div>
-          <div class="text">Раздел 1.1</div>
-        </li>
-        <li class="leaf">
-          <div class="icon"></div>
-          <div class="text">Страница 1.2
-            <br>(занимает две строки)</div>
-        </li>
-      </ul>
-    </li>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Раздел 2
-        <br>(занимает две строки)</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html b/8-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html
deleted file mode 100644
index bc57bddf..00000000
--- a/8-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    /* ваш стиль */
-  </style>
-</head>
-
-<body>
-
-  <!-- картинки для узлов -->
-  <img src="https://js.cx/sprite-tree/minus.gif" width="16" height="16">
-  <img src="https://js.cx/sprite-tree/plus.gif" width="16" height="16">
-  <img src="https://js.cx/sprite-tree/article.gif" width="16" height="16">
-
-
-  <ul>
-    <li class="open">
-      <div class="icon"></div>
-      <div class="text">Раздел 1
-        <br>(занимает две строки)</div>
-      <ul>
-        <li class="closed">
-          <div class="icon"></div>
-          <div class="text">Раздел 1.1</div>
-        </li>
-        <li class="leaf">
-          <div class="icon"></div>
-          <div class="text">Страница 1.2
-            <br>(занимает две строки)</div>
-        </li>
-      </ul>
-    </li>
-    <li class="closed">
-      <div class="icon"></div>
-      <div class="text">Раздел 2
-        <br>(занимает две строки)</div>
-    </li>
-  </ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/2-tree-with-multiline-nodes/task.md b/8-css-for-js/4-float/2-tree-with-multiline-nodes/task.md
deleted file mode 100644
index 77f3a27e..00000000
--- a/8-css-for-js/4-float/2-tree-with-multiline-nodes/task.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Дерево с многострочными узлами
-
-[importance 3]
-
-Сделайте дерево при помощи семантической вёрстки и CSS-спрайта с иконками (есть готовый).
-
-Выглядеть должно так (не кликабельно):
-
-[iframe src="solution" border="1" height=200 link edit]
-
-<ul>
-<li>Поддержка многострочных названий узлов</li>
-<li>Над иконкой курсор становится указателем.</li>
-</ul>
-
-Исходный документ содержит список UL/LI и ссылку на картинку.
-
-P.S. Достаточно сделать HTML/CSS-структуру, действия добавим позже.
\ No newline at end of file
diff --git a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg b/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg
deleted file mode 100644
index e9d29b87..00000000
Binary files a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg and /dev/null differ
diff --git a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg b/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg
deleted file mode 100644
index 964f5acb..00000000
Binary files a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg and /dev/null differ
diff --git a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html b/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html
deleted file mode 100644
index ed0bd4de..00000000
--- a/8-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .nav {
-      height: 40px;
-      width: 80%;
-      margin: auto;
-    }
-    
-    .nav .left {
-      float: left;
-      border: 1px solid black;
-    }
-    
-    .nav .right {
-      float: right;
-      border: 1px solid black;
-    }
-    
-    .nav .pages {
-      text-align: center;
-      line-height: 40px;
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст Сверху
-
-  <div class="nav">
-    <img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
-    <div class="pages">1 2 3 4 5 6 7 8 9</div>
-    <img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
-  </div>
-
-  Текст Снизу
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/3-paginator-css/solution.md b/8-css-for-js/4-float/3-paginator-css/solution.md
deleted file mode 100644
index 7773741a..00000000
--- a/8-css-for-js/4-float/3-paginator-css/solution.md
+++ /dev/null
@@ -1,101 +0,0 @@
-HTML-структура:
-
-```html
-<div class="nav">
-  <img src="arrow-left.jpg" class="left" width="40" height="40">
-  <img src="arrow-right.jpg" class="right" width="40" height="40">
-  <ul class="pages">
-    <li>...</li>
-  </ul>
-</div>
-```
-
-Стили:
-
-```css
-.nav {
-  height: 40px;
-  width: 80%;
-  margin: auto;
-}
-
-.nav .left {
-  float: left;
-  cursor: pointer;
-}
-
-.nav .right {
-  float: right;
-  cursor: pointer;
-}
-
-.nav .pages {
-  list-style: none;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-}
-
-.nav .pages li {
-  display: inline;
-  margin: 0 3px;
-  line-height: 40px;
-  cursor: pointer;
-}
-```
-
-Основные моменты:
-<ul>
-<li>**Сначала идёт левая кнопка, затем правая, а лишь затем -- текст.** 
-Почему так, а не лево - центр - право?
-
-Дело в том, что `float` смещает элемент вправо относительно обычного места. А какое обычное место будет у правого `IMG` без `float`? 
-
-Оно будет под списком, так как список -- блочный элемент, а `IMG` -- инлайн-элемент. При добавлении `float:right` элемент `IMG` сдвинется вправо, оставшись под списком.
-
-Код в порядке лево-центр-право (неправильный):
-
-```html
-<!--+ no-beautify -->
-<div...>
-  <img src="arrow-left.jpg" class="left" width="40" height="40">
-  <ul class="pages"> (li) 1 2 3 4 5 6 7 8 9</ul>
-  <img src="arrow-right.jpg" class="right" width="40" height="40">
-</div>
-```
-
-Его демо:
-[iframe src="nav-div-wrong" border=1 height="140"]
-Правильный порядок: лево-право-центр, тогда `float` останется на верхней строке.
-
-Код, который даёт правильное отображение:
-
-```html
-<div ...>
-  <img src="arrow-left.jpg" class="left" width="40" height="40">
-  <img src="arrow-right.jpg" class="right" width="40" height="40">
-  <ul class="pages"> .. список .. </ul>
-</div>
-```
-
-Также можно расположить стрелки при помощи `position: absolute`. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки -- нужно добавить в контейнер левый и правый `padding`:
-
-Выглядеть будет примерно так:
-
-```html
-<div style="position:relative; padding: 0 40px;">
-  <img style="position:absolute;left:0" src="..left.." width="40" height="40">
-  <ul> (li) 1 2 3 4 5 6 7 8 9 </ul>
-  <img style="position:absolute;right:0" srr="..right.." width="40" height="40">
-</div>
-```
-
-</li>
-
-<li>**Центрирование одной строки по вертикали осуществляется указанием `line-height`, равной высоте.**
-
-Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две -- получается некрасиво, хотя и читаемо. 
-
-Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
-</ul>
-
diff --git a/8-css-for-js/4-float/3-paginator-css/solution.view/index.html b/8-css-for-js/4-float/3-paginator-css/solution.view/index.html
deleted file mode 100644
index 6bc093cb..00000000
--- a/8-css-for-js/4-float/3-paginator-css/solution.view/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .nav {
-      height: 40px;
-      width: 80%;
-      margin: auto;
-    }
-    
-    .nav .left {
-      float: left;
-      cursor: pointer;
-    }
-    
-    .nav .right {
-      float: right;
-      cursor: pointer;
-    }
-    
-    .nav .pages {
-      list-style: none;
-      text-align: center;
-      margin: 0;
-      padding: 0;
-    }
-    
-    .nav .pages li {
-      display: inline;
-      margin: 0 3px;
-      line-height: 40px;
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  Текст Сверху
-
-  <div class="nav">
-    <img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
-    <img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
-    <ul class="pages">
-      <li>1</li>
-      <li>2</li>
-      <li>3</li>
-      <li>4</li>
-      <li>5</li>
-      <li>6</li>
-      <li>7</li>
-      <li>8</li>
-      <li>9</li>
-    </ul>
-  </div>
-
-  Текст Снизу
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/3-paginator-css/source.view/index.html b/8-css-for-js/4-float/3-paginator-css/source.view/index.html
deleted file mode 100644
index 18d75488..00000000
--- a/8-css-for-js/4-float/3-paginator-css/source.view/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .nav {
-      height: 40px;
-      width: 80%;
-      margin: auto;
-    }
-    /* ваш код */
-  </style>
-</head>
-
-<body>
-
-  Текст Сверху
-
-  <div class="nav">
-    <img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
-
-    <ul class="pages">
-      <li>1</li>
-      <li>2</li>
-      <li>3</li>
-      <li>4</li>
-      <li>5</li>
-      <li>6</li>
-      <li>7</li>
-      <li>8</li>
-      <li>9</li>
-    </ul>
-
-    <img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
-  </div>
-  Текст Снизу
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/3-paginator-css/task.md b/8-css-for-js/4-float/3-paginator-css/task.md
deleted file mode 100644
index bcb903af..00000000
--- a/8-css-for-js/4-float/3-paginator-css/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Постраничная навигация (CSS)
-
-[importance 5]
-
-Оформите навигацию, центрированную внутри `DIV'а`:
-
-[iframe src="solution" height="100" border="1"]
-
-Требования:
-<ul>
-<li>Левая стрелка -- слева, правая -- справа, список страниц -- по центру.</li>
-<li>Список страниц центрирован вертикально.</li>
-<li>Текст сверху и снизу ни на что не наползает.</li>
-<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
-</ul>
-
-P.S. Без использования таблиц.
\ No newline at end of file
diff --git a/8-css-for-js/4-float/4-add-border-keep-width/solution.md b/8-css-for-js/4-float/4-add-border-keep-width/solution.md
deleted file mode 100644
index 7e199ad1..00000000
--- a/8-css-for-js/4-float/4-add-border-keep-width/solution.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Подсказка
-
-Используйте свойство `box-sizing`.
-
-# Решение
-
-Да, можно -- указываем `box-sizing: border-box` и добавляем свойства:
-
-```html
-<!--+ run  no-beautify -->
-<style>
-  .left {
-    float:left; 
-    width:30%; 
-    background: #aef;
-  }
-
-  .right {
-    float:right; 
-    width:70%;
-
-*!*
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-
-    border-left: 2px solid green;
-    padding-left: 10px;
-*/!*
-
-    background: tan;
-  }
-</style>
-
-<div class="left">
- Левая<br>Колонка
-</div>
-<div class="right">
- Правая<br>Колонка<br>...
-</div>
-```
-
diff --git a/8-css-for-js/4-float/4-add-border-keep-width/task.md b/8-css-for-js/4-float/4-add-border-keep-width/task.md
deleted file mode 100644
index cac31736..00000000
--- a/8-css-for-js/4-float/4-add-border-keep-width/task.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Добавить рамку, сохранив ширину
-
-[importance 4]
-
-Есть две колонки `30%/70%`:
-
-```html
-<!--+ autorun height=70 run play  no-beautify -->
-<style>
-  .left {
-    float:left; 
-    width:30%; 
-    background: #aef;
-  }
-
-  .right {
-    float:right; 
-    width:70%;
-    background: tan;
-  }
-</style>
-
-<div class="left">
- Левая<br>Колонка
-</div>
-<div class="right">
- Правая<br>Колонка<br>...
-</div>
-```
-
-Добавьте к правой колонке рамку `border-left` и отступ `padding-left`.
-
-Двухколоночная вёрстка при этом не должна сломаться! 
-
-Желательно не трогать свойство `width` ни слева ни справа и не создавать дополнительных элементов. 
-
diff --git a/8-css-for-js/4-float/article.md b/8-css-for-js/4-float/article.md
deleted file mode 100644
index 1a117113..00000000
--- a/8-css-for-js/4-float/article.md
+++ /dev/null
@@ -1,439 +0,0 @@
-# Свойство "float"
-
-Свойство `float` в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании `float` станет вашим верным другом и помощником.
-	
-Далее мы рассмотрим, как работает `float`, разберём решения сопутствующих проблем, а также ряд полезных рецептов.
-	
-[cut]
-
-## Как работает float [#float-algorithm]
-
-Синтаксис:
-
-```css
-float: left | right | none | inherit;
-```
-
-При применении этого свойства происходит следующее:
-
-<ol>
-<li>Элемент позиционируется как обычно, а затем *вынимается из <strike>документа</strike> потока* и сдвигается влево (для `left`) или вправо (для `right`) до того как коснётся либо границы родителя, либо другого элемента с `float`.</li>
-<li>Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.</li>
-<li>Другие непозиционированные блочные элементы без `float` ведут себя так, как будто элемента с `float` нет, так как он убран из потока.</li>
-<li>Строки (inline-элементы), напротив, "знают" о `float` и обтекают элемент по сторонам.</li>
-</ol>
-
-Ещё детали:
-<ol>
-<li>Элемент при наличии `float` получает `display:block`.
-
-То есть, указав элементу, у которого `display:inline` свойство `float: left/right`, мы автоматически сделаем его блочным. В частности, для него будут работать  `width/height`. 
-
-Исключением являются некоторые редкие `display` наподобие `inline-table` и `run-in` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo))</li>
-<li>Ширина `float`-блока определяется по содержимому. (["CSS 2.1, 10.3.5"](http://www.w3.org/TR/CSS2/visudet.html#float-width)).</li>
-<li>Вертикальные отступы `margin` элементов с `float` не сливаются с отступами соседей, в отличие от обычных блочных элементов.</li>
-</ol>
-
-Это пока только теория. Далее мы рассмотрим происходящее на примере.
-
-### Текст с картинками
-
-Одно из первых применений `float`, для которого это свойство когда-то было придумано -- это вёрстка текста с картинками, отжатыми влево или вправо.
-
-Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство `float`:
-
-<img src="text.png">
-
-Её HTML-код ([edit src="winnie"]открыть[/edit]) выглядит примерно так:
-
-```html
-<img src="1.jpg" style="float:right">
-<p>Текст...</p>
-<p>Текст...</p>
-
-<img src="2.jpg" style="float:left">
-<p>Текст...</p>
-
-<img src="3.jpg" style="float:right">
-<p>Текст...</p>
-```
-
-Каждая картинка, у которой есть `float`, обрабатывается в точности [по алгоритму](#float-algorithm), указанному выше.
-
-Посмотрим, например, как выглядело бы начало текста без float:
-
-[iframe src="winnie-nofloat" height=300 border=1 link edit]
-
-
-<ol>
-<li>Элемент `IMG` вынимается из <strike>документа</strike> потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
-
-[iframe src="winnie-nofloat-1" height=250 border=1 link edit]
-
-</li>
-<li>Элемент `IMG` сдвигается максимально вправо(при `float:right`):
-
-[iframe src="winnie-nofloat-2" height=250 border=1 link edit]
-
-</li>
-<li>Строки, в отличие от блочных элементов, "чувствуют" `float` и уступают ему место, обтекая картинку слева:
-
-[iframe src="winnie-nofloat-3" height=250 border=1 link edit]
-</li>
-</ol>
-
-При `float:left` -- всё то же самое, только `IMG` смещается влево (или не смещается, если он и так у левого края), а строки -- обтекают справа
-
-
-**Строки и инлайн-элементы смещаются, чтобы уступить место `float`. Обычные блоки -- ведут себя так, как будто элемента нет.**
-
-Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:
-
-[iframe src="winnie-block-bg" height=300 border=1 link edit]
-
-Как видно из рисунка, параграфы проходят "за" `float`. При этом строки в них о `float'ах` знают и обтекают их, поэтому соответствующая часть параграфа пуста. 
-
-
-### Блок с float
-
-Свойство `float` можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным. 
-
-Посмотрим, как это работает, на конкретной задаче -- сделать рамку с названием вокруг картинки с Винни.
-
-HTML будет такой:
-
-```html
-<h2>Винни-Пух</h2>
-
-*!*
-<div class="left-picture">
-  <img src="winnie-mult.jpg" width="200" height="150">
-  <div>Кадр из советского мультфильма</div>
-</div>
-*/!*
-
-<p>Текст...</p>
-```
-
-..То есть, `div.left-picture` включает в себя картинку и заголовок к ней. Добавим стиль с `float`:
-
-```css
-/*+ no-beautify */
-.left-picture {
-*!*
-  float: left;
-*/!*
-
-  /* рамочка и отступ для красоты (не обязательно) */
-  margin: 0 10px 5px 0;
-  text-align: center;
-  border: 1px solid black;
-}
-```
-
-Результат:
-
-[iframe src="winnie-block" height=300 border=1 link edit]
-
-Заметим, что блок `div.left-picture` "обернул" картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с `float` определяется по содержимому.
-
-## Очистка под float
-
-Разберём еще одну особенность использования свойства `float`. 
-
-Для этого выведем персонажей из мультфильма "Винни-Пух". Цель:
-
-[iframe src="winnie-clear-3" height=600 border=1 link edit]
-
-Реализуем её, шаг за шагом.
-
-### Шаг 1. Добавляем информацию
-
-Попробуем просто добавить Сову после Винни-Пуха:
-
-```html
-<h2>Винни-Пух</h2>
-<div class="left">Картинка</div>
-<p>..Текст о Винни..</p>
-
-<h2>Сова</h2>
-<div class="left">Картинка</div>
-<p>..Текст о Сове..</p>
-```
-
-Результат [edit src="winnie-clear-1"]такого кода[/edit] будет странным, но предсказуемым:
-
-[iframe src="winnie-clear-1" border="1" height=500 link edit]
-
-Произошло следующее:
-<ul>
-<li>**Заголовок `<h2>Сова</h2>` не заметил `float`** (он же блочный элемент) и расположился сразу после предыдущего параграфа `<p>..Текст о Винни..</p>`.</li>
-<li>После него идёт `float`-элемент -- картинка "Сова". Он был сдвинут влево. Согласно [алгоритму](#float-algorithm), он двигается до левой границы или до касания с другим `float`-элементом, что и произошло (картинка "Винни-Пух").</li>
-<li>Так как у совы `float:left`, то **последующий текст обтекает её справа**.</li>
-</ul>
-
-### Шаг 2. Свойство clear
-
-Мы, конечно же, хотели бы расположить заголовок "Сова" и остальную информацию ниже Винни-Пуха.
-
-Для решения возникшей проблемы придумано свойство `clear`. 
-
-Синтаксис:
-
-```css
-clear: left | right | both;
-```
-
-Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся  `float'ы` слева/справа/с обеих сторон.
-
-Применим его к заголовку `H2`:
-
-```css
-h2 {
-  clear: left;
-}
-```
-
-Результат [edit src="winnie-clear-2"]получившегося кода[/edit] будет ближе к цели, но всё еще не идеален:
-
-<img src="float-small-margin.png">
-
-Элементы теперь в нужном порядке. Но куда пропал отступ `margin-top` у заголовка "Сова"? 
-
-Теперь заголовок "Сова" прилегает снизу почти вплотную к картинке, с учётом её `margin-bottom`, но без своего большого отступа `margin-top`.
-
-Таково поведение свойства `clear`. Оно сдвинуло элемент `h2` вниз ровно настолько, чтобы элементов `float` не было *сбоку от его верхней границы*. 
-
-Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ `margin-top` у заголовка по-прежнему есть, но он располагается "за" элементом `float` и не учитывается при работе в `clear`. 
-
-Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством `clear:both`. Тогда уже под ним отступ заголовка будет работать нормально:
-
-```html
-<h2>Винни-Пух</h2>
-<div class="left">Картинка</div>
-<p>Текст</p>
-
-*!*
-<div style="clear:both"></div>
-*/!*
-
-<h2>Сова</h2>
-<div class="left">Картинка</div>
-<p>Текст</p>
-```
-
-Результат [edit src="winnie-clear-3"]получившегося кода[/edit]:
-
-[iframe src="winnie-clear-3" border="1" height=600 link edit]
-
-<ul>
-<li>Свойство `clear` гарантировало, что `<div style="clear:both">` будет под картинкой с `float`.</li>
-<li>Заголовок `<h2>Сова</h2>` идёт после этого `<div>`. Так что его отступ учитывается.</li>
-</ul>
-
-## Заполнение блока-родителя
-
-Итак, мы научились располагать другие элементы *под* `float`. Теперь рассмотрим следующую особенность.
-
-**Из-за того, что блок с `float` удалён из потока, родитель не выделяет под него места.**
-
-Например, выделим для информации о Винни-Пухе красивый элемент-контейнер `<div class="hero">`:
-
-```html
-<div class="hero">
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left">Картинка</div>
-
-  <p>Текст.</p>
-</div>
-```
-
-Стиль контейнера:
-
-```css
-.hero {
-  background: #D2B48C;
-  border: 1px solid red;
-}
-```
-
-Результат [edit src="winnie-clear-4"]получившегося кода[/edit]:
-
-[iframe src="winnie-clear-4" border="1" height=300 link edit]
-
-Элемент с `float` оказался выпавшим за границу родителя `.hero`. 
-
-Чтобы этого не происходило, используют одну из следующих техник.
-
-### Поставить родителю float
-
-Элемент с `float` обязан расшириться, чтобы вместить вложенные `float`.
-
-Поэтому, если это допустимо, то установка `float` контейнеру всё исправит:
-
-```css
-/*+ no-beautify */
-.hero {
-  background: #D2B48C;
-  border: 1px solid red;
-  *!*
-  float: left;
-  */!*
-}
-```
-
-[iframe src="winnie-clearfill-float" border="1" height=300 link edit]
-
-Разумеется, не всегда можно поставить родителю `float`, так что смотрим дальше.
-
-### Добавить в родителя элемент с clear
-
-Добавим элемент `div style="clear:both"` в самый конец контейнера `.hero`.
-
-Он с одной стороны будет "нормальным" элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой -- он знает о `float` и сместится вниз.
-
-Соответственно, и контейнер вырастет в размере:
-
-```html
-<div class="hero">
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left">Картинка</div>
-
-  <p>Текст.</p>
-
-*!*
-  <div style="clear:both"></div>
-*/!*
-</div>
-```
-
-Результат -- правильное отображение, как и в примере выше. [edit src="winnie-clearfill-div"]Открыть код[/edit].
-
-Единственный недостаток этого метода -- лишний HTML-элемент в разметке.
-
-### Универсальный класс clearfix
-
-Чтобы не добавлять в HTML-код лишний элемент, можно задать его через `:after`.
-
-```css
-/*+ no-beautify */
-.clearfix:after {
-  content: "."; /* добавить содержимое: "." */
-  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
-  clear: both;  /* с обеих сторон clear */
-  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
-  height: 0;  /* сделать высоту 0, чтобы не занимал место */
-}
-```
-
-Добавив этот класс к родителю, получим тот же результат, что и выше. [edit src="winnie-clearfill-clearfix"]Открыть код[/edit].
-
-### overflow:auto/hidden
-
-Если добавить родителю `overflow: hidden` или `overflow: auto`, то всё станет хорошо.
-
-```css
-/*+ no-beautify */
-.hero {
-*!*
-  overflow: auto;
-*/!*
-}
-```
-
-Этот метод работает во всех браузерах, [edit src="winnie-clearfill-overflow"]полный код в песочнице[/edit].
-
-Несмотря на внешнюю странность, этот способ не является "хаком". Такое поведение прописано в спецификации CSS.
-
-Однако, установка `overflow` может привести к появлению полосы прокрутки, способ с псевдоэлементом `:after` более безопасен.
-
-
-## float вместо display:inline-block
-
-При помощи `float` можно размещать блочные элементы в строке, похоже на `display: inline-block`:
-
-[codetabs src="gallery-float" border="1" height=550 link edit]
-
-Стиль здесь: 
-
-```css
-.gallery li {
-  float: left;
-  width: 130px;
-  list-style: none;
-}
-```
-
-Элементы `float:left` двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера, получается эффект, аналогичный `display: inline-block`, но с особенностями `float`.
-
-## Вёрстка в несколько колонок
-
-Свойство `float` позволяет делать несколько вертикальных колонок.
-
-### float:left + float:right
-
-Например, для вёрстки в две колонки можно сделать два `<div>`. Первому указать `float:left` (левая колонка), а второму -- `float:right` (правая колонка). 
-
-Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:
-
-```html
-<div>Шапка</div>
-<div class="column-left">Левая колонка</div>
-<div class="column-right">Правая колонка</div>
-<div class="footer">Низ</div>
-```
-
-Стили:
-
-```css
-.column-left {
-  float: left;
-  width: 30%;
-}
-
-.column-right {
-  float: left;
-  width: 70%;
-}
-
-.footer {
-  clear: both;
-}
-```
-
-Результат (добавлены краски):
-[codetabs src="two-columns" border="1" height=440]
-
-В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и `float:right`. 
-
-### float + margin
-
-Ещё вариант -- сделать `float` для левой колонки, а правую оставить в потоке, но с отбивкой через `margin`:
-
-```css
-.column-left {
-  float: left;
-  width: 30%;
-}
-
-.column-right {
-  margin-left: 30%;
-}
-
-.footer {
-  clear: both;
-}
-```
-
-Результат (добавлены краски):
-[codetabs src="two-columns-2" border="1" height=440]
-
-В примере выше -- показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?
-
-В современных браузерах (кроме IE10-) эту же задачу лучше решает flexbox.
-
-Для старых есть различные обходы и трюки, которые позволяют обойти проблему в ряде ситуаций, но они выходят за рамки нашего обсуждения. Если интересно -- посмотрите, например, [Faux Columns](http://goodline.spb.ru/III-05-002.html). 
diff --git a/8-css-for-js/4-float/float-small-margin.png b/8-css-for-js/4-float/float-small-margin.png
deleted file mode 100644
index 79a065b0..00000000
Binary files a/8-css-for-js/4-float/float-small-margin.png and /dev/null differ
diff --git a/8-css-for-js/4-float/gallery-float.view/index.html b/8-css-for-js/4-float/gallery-float.view/index.html
deleted file mode 100644
index 7118da0b..00000000
--- a/8-css-for-js/4-float/gallery-float.view/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .gallery li {
-      float: left;
-      width: 130px;
-      list-style: none;
-      /* красивости */
-      
-      border: 1px solid black;
-      text-align: center;
-      margin: 5px;
-    }
-  </style>
-</head>
-
-<body>
-
-  <ul class="gallery">
-    <li>
-      <img src="https://js.cx/carousel/1.png" width="130" height="130">
-      <div>Картинка 1</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/2.png" width="130" height="130">
-      <div>Картинка 2</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/3.png" width="130" height="130">
-      <div>Картинка 3</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/4.png" width="130" height="130">
-      <div>Картинка 4</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/5.png" width="130" height="130">
-      <div>Картинка 5</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/6.png" width="130" height="130">
-      <div>Картинка 6</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/7.png" width="130" height="130">
-      <div>Картинка 7</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/8.png" width="130" height="130">
-      <div>Картинка 8</div>
-    </li>
-
-    <li>
-      <img src="https://js.cx/carousel/9.png" width="130" height="130">
-      <div>Картинка 9</div>
-    </li>
-
-  </ul>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/text.png b/8-css-for-js/4-float/text.png
deleted file mode 100644
index 23969f08..00000000
Binary files a/8-css-for-js/4-float/text.png and /dev/null differ
diff --git a/8-css-for-js/4-float/two-columns-2.view/index.html b/8-css-for-js/4-float/two-columns-2.view/index.html
deleted file mode 100644
index de022207..00000000
--- a/8-css-for-js/4-float/two-columns-2.view/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
-    
-    .column-left {
-      float: left;
-      width: 30%;
-    }
-    
-    .column-right {
-      margin-left: 30%;
-      width: 70%;
-      overflow: auto;
-      /* расшириться вниз захватить float'ы */
-    }
-    
-    .footer {
-      clear: both;
-    }
-    
-    .inner {
-      margin: 1em;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div style="background:yellow">Шапка</div>
-
-  <div class="column-left" style="background:#aef">
-    <div class="inner">
-      <!-- див для отступа внутри ширины родителя -->
-      <h3>Персонажи:</h3>
-      <ul>
-        <li>Винни-Пух</li>
-        <li>Ослик Иа</li>
-        <li>Сова</li>
-        <li>Кролик</li>
-      </ul>
-    </div>
-  </div>
-  <div class="column-right" style="background:tan">
-    <div class="inner">
-
-      <h3>Винни-Пух</h3>
-
-      <img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
-
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-
-    </div>
-  </div>
-
-  <div class="footer" style="background:yellow">Низ</div>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/two-columns.view/index.html b/8-css-for-js/4-float/two-columns.view/index.html
deleted file mode 100644
index 55ecf832..00000000
--- a/8-css-for-js/4-float/two-columns.view/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
-    
-    .column-left {
-      float: left;
-      width: 30%;
-    }
-    
-    .column-right {
-      float: left;
-      width: 70%;
-      overflow: auto;
-      /* расшириться вниз захватить float'ы */
-    }
-    
-    .footer {
-      clear: both;
-    }
-    
-    .inner {
-      margin: 1em;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div style="background:yellow">Шапка</div>
-
-  <div class="column-left" style="background:#aef">
-    <div class="inner">
-      <!-- див для отступа внутри ширины родителя -->
-      <h3>Персонажи:</h3>
-      <ul>
-        <li>Винни-Пух</li>
-        <li>Ослик Иа</li>
-        <li>Сова</li>
-        <li>Кролик</li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="column-right" style="background:tan">
-    <div class="inner">
-      <h3>Винни-Пух</h3>
-
-      <img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
-
-      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-    </div>
-  </div>
-
-  <div class="footer" style="background:yellow">Низ</div>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-block-bg.view/index.html b/8-css-for-js/4-float/winnie-block-bg.view/index.html
deleted file mode 100644
index c5689dd6..00000000
--- a/8-css-for-js/4-float/winnie-block-bg.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left-picture {
-      float: left;
-      /* рамочка и центрирование */
-      
-      margin: 0 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-    
-    p {
-      background: #aef;
-      border: 1px solid red;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <h2>Винни-Пух</h2>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
-
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-block.view/index.html b/8-css-for-js/4-float/winnie-block.view/index.html
deleted file mode 100644
index cc891eeb..00000000
--- a/8-css-for-js/4-float/winnie-block.view/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left-picture {
-      float: left;
-      /* рамочка и центрирование */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left-picture">
-    <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-  <p>Один из самых известных героев детской литературы XX века. </p>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clear-1.view/index.html b/8-css-for-js/4-float/winnie-clear-1.view/index.html
deleted file mode 100644
index afa3f277..00000000
--- a/8-css-for-js/4-float/winnie-clear-1.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-    
-    h2 {
-      background: #aef;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-  <p>Один из самых известных героев детской литературы XX века.</p>
-
-  <h2>Сова</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
-
-  <p>Говорит редко, но чрезвычайно мудро.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clear-2.view/index.html b/8-css-for-js/4-float/winnie-clear-2.view/index.html
deleted file mode 100644
index 51f79c32..00000000
--- a/8-css-for-js/4-float/winnie-clear-2.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-    
-    h2 {
-      background: #aef;
-      clear: left;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-  <p>Один из самых известных героев детской литературы XX века.</p>
-
-  <h2>Сова</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
-
-  <p>Говорит редко, но чрезвычайно мудро.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clear-3.view/index.html b/8-css-for-js/4-float/winnie-clear-3.view/index.html
deleted file mode 100644
index 8b54c8a6..00000000
--- a/8-css-for-js/4-float/winnie-clear-3.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-    
-    h2 {
-      background: #aef;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-
-  <h2>Винни-Пух</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-  <p>Один из самых известных героев детской литературы XX века.</p>
-
-  <div style="clear:both"></div>
-  <h2>Сова</h2>
-
-  <div class="left">
-    <img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
-    <div>Кадр из советского мультфильма</div>
-  </div>
-
-  <p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
-
-  <p>Говорит редко, но чрезвычайно мудро.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clear-4.view/index.html b/8-css-for-js/4-float/winnie-clear-4.view/index.html
deleted file mode 100644
index c1e30e8c..00000000
--- a/8-css-for-js/4-float/winnie-clear-4.view/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-    }
-    
-    .hero {
-      background: #D2B48C;
-      border: 1px solid red;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <div class="hero">
-
-    <h2>Винни-Пух</h2>
-
-    <div class="left">
-      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-      <div>Кадр из советского мультфильма</div>
-    </div>
-
-    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-    <p>Один из самых известных героев детской литературы XX века.</p>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html b/8-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html
deleted file mode 100644
index 03d04dda..00000000
--- a/8-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-      background: white;
-    }
-    
-    .hero {
-      background: #D2B48C;
-      border: 1px solid red;
-    }
-    
-    .clearfix:after {
-      content: ".";
-      display: block;
-      height: 0;
-      clear: both;
-      visibility: hidden;
-    }
-    
-    .clearfix {
-      zoom: 1;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <div class="hero clearfix">
-
-    <h2>Винни-Пух</h2>
-
-    <div class="left">
-      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-      <div>Кадр из советского мультфильма</div>
-    </div>
-
-    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-    <p>Один из самых известных героев детской литературы XX века.</p>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clearfill-div.view/index.html b/8-css-for-js/4-float/winnie-clearfill-div.view/index.html
deleted file mode 100644
index 75ce75bc..00000000
--- a/8-css-for-js/4-float/winnie-clearfill-div.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-      background: white;
-    }
-    
-    .hero {
-      background: #D2B48C;
-      border: 1px solid red;
-      float: left;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <div class="hero">
-
-    <h2>Винни-Пух</h2>
-
-    <div class="left">
-      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-      <div>Кадр из советского мультфильма</div>
-    </div>
-
-    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-    <p>Один из самых известных героев детской литературы XX века.</p>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clearfill-float.view/index.html b/8-css-for-js/4-float/winnie-clearfill-float.view/index.html
deleted file mode 100644
index 75ce75bc..00000000
--- a/8-css-for-js/4-float/winnie-clearfill-float.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-      background: white;
-    }
-    
-    .hero {
-      background: #D2B48C;
-      border: 1px solid red;
-      float: left;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <div class="hero">
-
-    <h2>Винни-Пух</h2>
-
-    <div class="left">
-      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-      <div>Кадр из советского мультфильма</div>
-    </div>
-
-    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-    <p>Один из самых известных героев детской литературы XX века.</p>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-clearfill-overflow.view/index.html b/8-css-for-js/4-float/winnie-clearfill-overflow.view/index.html
deleted file mode 100644
index 273c37f8..00000000
--- a/8-css-for-js/4-float/winnie-clearfill-overflow.view/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .left {
-      float: left;
-      width: 200px;
-      /* для красоты */
-      
-      margin: 5px 10px 5px 0;
-      text-align: center;
-      border: 1px solid black;
-      background: white;
-    }
-    
-    .hero {
-      background: #D2B48C;
-      border: 1px solid red;
-      overflow: auto;
-    }
-  </style>
-</head>
-
-<body style="font-size:0.8em">
-
-  <div class="hero clearfix">
-
-    <h2>Винни-Пух</h2>
-
-    <div class="left">
-      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-      <div>Кадр из советского мультфильма</div>
-    </div>
-
-    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
-
-    <p>Один из самых известных героев детской литературы XX века.</p>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-nofloat-1.view/index.html b/8-css-for-js/4-float/winnie-nofloat-1.view/index.html
deleted file mode 100644
index 040147b2..00000000
--- a/8-css-for-js/4-float/winnie-nofloat-1.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    p {
-      font-size: 80%;
-    }
-    
-    img {
-      border: 1px solid black;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-nofloat-2.view/index.html b/8-css-for-js/4-float/winnie-nofloat-2.view/index.html
deleted file mode 100644
index a0359902..00000000
--- a/8-css-for-js/4-float/winnie-nofloat-2.view/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    p {
-      font-size: 80%;
-    }
-    
-    img {
-      border: 1px solid black;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-nofloat-3.view/index.html b/8-css-for-js/4-float/winnie-nofloat-3.view/index.html
deleted file mode 100644
index a86557b8..00000000
--- a/8-css-for-js/4-float/winnie-nofloat-3.view/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    p {
-      font-size: 80%;
-    }
-    
-    img {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie-nofloat.view/index.html b/8-css-for-js/4-float/winnie-nofloat.view/index.html
deleted file mode 100644
index 84549fb4..00000000
--- a/8-css-for-js/4-float/winnie-nofloat.view/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    p {
-      font-size: 80%;
-    }
-    
-    img {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/4-float/winnie.view/index.html b/8-css-for-js/4-float/winnie.view/index.html
deleted file mode 100644
index 01338689..00000000
--- a/8-css-for-js/4-float/winnie.view/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    img.right {
-      float: right;
-      margin: 5px 0 5px 10px;
-    }
-    
-    img.left {
-      float: left;
-      margin: 5px 10px 5px 0;
-    }
-    
-    img {
-      border: 1px solid black;
-    }
-  </style>
-</head>
-
-<body>
-
-  <h2>Винни-Пух</h2>
-
-  <img src="https://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
-
-  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
-
-  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
-
-  <img src="https://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
-
-  <p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом,
-    существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
-
-  <p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
-
-
-  <img src="https://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
-
-  <p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
-
-  <p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/5-position/1-modal-window/solution.md b/8-css-for-js/5-position/1-modal-window/solution.md
deleted file mode 100644
index 2f7da85d..00000000
--- a/8-css-for-js/5-position/1-modal-window/solution.md
+++ /dev/null
@@ -1,20 +0,0 @@
-Если использовать `position: absolute`, то `DIV` не растянется на всю высоту документа, т.к. координаты вычисляются *относительно окна*. 
-
-Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать `position:fixed`:
-
-Стиль:
-
-```css
-#box {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-}
-```
-
-Свойство `z-index` должно превосходить все другие элементы управления, чтобы они перекрывались.
-
-[edit src="solution"]Полный текст решения[/edit]
\ No newline at end of file
diff --git a/8-css-for-js/5-position/1-modal-window/solution.view/index.html b/8-css-for-js/5-position/1-modal-window/solution.view/index.html
deleted file mode 100644
index 77b5f5b5..00000000
--- a/8-css-for-js/5-position/1-modal-window/solution.view/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    /* модальный DIV, который всё перекрывает */
-    
-    #box {
-      position: fixed;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 999;
-      /* нужно если в документе есть элементы с z-index > 0 */
-      
-      background: #aef;
-      opacity: 0.7;
-    }
-    
-    p,
-    button {
-      margin: 35px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="box"></div>
-
-
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/5-position/1-modal-window/source.view/index.html b/8-css-for-js/5-position/1-modal-window/source.view/index.html
deleted file mode 100644
index 6a763e69..00000000
--- a/8-css-for-js/5-position/1-modal-window/source.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    /* модальный DIV, который всё перекрывает */
-    
-    #box {
-      /* ...ваш стиль... */
-      
-      background: #aef;
-      opacity: 0.7;
-    }
-    
-    p,
-    button {
-      margin: 35px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="box"></div>
-
-
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-  <p>Текст Текст Текст</p>
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/5-position/1-modal-window/task.md b/8-css-for-js/5-position/1-modal-window/task.md
deleted file mode 100644
index 01a6a561..00000000
--- a/8-css-for-js/5-position/1-modal-window/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Модальное окно
-
-[importance 5]
-
-Создайте при помощи HTML/CSS "модальное окно", то есть `DIV`, который полностью перекрывает документ и находится над ним.
-
-При этом все элементы управления на документе перестают работать, т.к. клики попадают в `DIV`.
-
-В примере ниже `DIV'у` дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:
-
-[iframe height=150 src="solution" border=1 link]
-
-Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
-
-
-
-
diff --git a/8-css-for-js/5-position/article.md b/8-css-for-js/5-position/article.md
deleted file mode 100644
index f438c027..00000000
--- a/8-css-for-js/5-position/article.md
+++ /dev/null
@@ -1,374 +0,0 @@
-# Свойство "position"
-
-Свойство `position` позволяет сдвигать элемент со своего обычного места. Цель этой главы -- не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
-[cut]
-## position: static   
-
-*Статическое позиционирование* производится по умолчанию, в том случае, если свойство `position` не указано.
-
-Его можно также явно указать через CSS-свойство:
-
-```css
-position: static;
-```
-
-Такая запись встречается редко и используется для переопределения других значений `position`.
-
-Здесь и далее, для примеров мы будем использовать следующий документ:
-
-```html
-<!--+ autorun height=200  no-beautify -->
-<div style="background: #fee; width: 500px">
-    Без позиционирования ("position: static").
-
-    <h2 style="background: #aef; margin: 0">Заголовок</h2>
-
-    <div>А тут - всякий разный текст... <br/>
-         ... В две строки!</div>
-</div>
-```
-
-В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
-
-[summary]
-Элемент с `position: static` еще называют *не позиционированым*.
-[/summary]
-
-
-## position: relative   
-
-*Относительное позиционирование* сдвигает элемент относительно его обычного положения.
-
-Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство `position: relative` и координаты `left/right/top/bottom`.
-
-Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
-
-```css
-position: relative;
-top: 10px;
-```
-
-
-
-```html
-<!--+ autorun height=200  no-beautify -->
-*!*
-<style>
-  h2 {
-    position: relative;
-    top: 10px;
-  }
-</style>
-*/!*
-
-<div style="background: #fee; width: 500px">
-    Заголовок сдвинут на 10px вниз.
-
-    <h2 style="background: #aef; margin: 0;">Заголовок</h2>
-
-    <div>А тут - всякий разный текст... <br/>
-         ... В две строки!</div>
-</div>
-```
-
-### Координаты
-
-Для сдвига можно использовать координаты:
-
-<ul>
-<li>`top` - сдвиг от "обычной" верхней границы</li>
-<li>`bottom` - сдвиг от нижней границы</li>
-<li>`left` - сдвиг слева</li>
-<li>`right` - сдвиг справа</li>
-</ul>
-
-Не будут работать одновременно указанные `top` и `bottom`, `left` и `right`. Нужно использовать только одну границу из каждой пары.
-
-**Возможны отрицательные координаты** и координаты, использующие другие единицы измерения. Например, `left: 10%` сдвинет элемент на 10% его ширины вправо, а `left: -10%` -- влево. При этом часть элемента может оказаться за границей окна:
-
-```html
-<!--+ autorun height=200  no-beautify -->
-*!*
-<style>
-  h2 {
-    position: relative;
-    left: -10%;
-  }
-</style>
-*/!*
-
-<div style="background: #fee; width: 500px">
-    Заголовок сдвинут на 10% влево.
-
-    <h2 style="background: #aef; margin: 0;">Заголовок</h2>
-
-    <div>А тут - всякий разный текст... <br/>
-         ... В две строки!</div>
-</div>
-```
-
-**Свойства `left/top` не будут работать для `position:static`**. Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
-
-## position: absolute   
-
-Синтаксис:
-
-```css
-position: absolute;
-```
-
-Абсолютное позиционирование делает две вещи:
-<ol>
- <li>**Элемент исчезает с того места, где он должен быть и позиционируется заново.** Остальные элементы, располагаются так, как будто этого элемента никогда не было.</li>
- <li>**Координаты `top/bottom/left/right` для нового местоположения отсчитываются от ближайшего позиционированного родителя**, т.е. родителя с позиционированием, отличным от `static`. Если такого родителя нет -- то относительно документа.</li>
-</ol>
-
-Кроме того:
-<ul>
-<li>**Ширина элемента с `position: absolute` устанавливается по содержимому.** Детали алгоритма вычисления ширины [описаны в стандарте](http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width).</li>
-<li>**Элемент получает `display:block`**, который перекрывает почти все возможные `display` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo)).</li>
-</ul>
-
-Например, отпозиционируем заголовок в правом-верхнем углу документа:
-
-```html
-<!--+ autorun height=200  no-beautify -->
-*!*
-<style>
-  h2 {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-</style>
-*/!*
-
-<div style="background: #fee; width: 500px">
-    Заголовок в правом-верхнем углу документа.
-
-    <h2 style="background: #aef; margin: 0;">Заголовок</h2>
-
-    <div>А тут - всякий разный текст... <br/>
-         ... В две строки!</div>
-</div>
-```
-
-Важное отличие от `relative`: **так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство**. Это видно в примере выше: строки идут одна за другой.
-
-Так как при `position:absolute` размер блока устанавливается по содержимому, то
-широкий `Заголовок` "съёжился" до прямоугольника в углу.
-
-Иногда бывает нужно поменять элементу `position` на `absolute`, но так, чтобы элементы вокруг не сдвигались. Как правило это делают, меняя соседей -- добавляют `margin/padding` или вставляют в документ пустой элемент с такими же размерами.
-
-
-[smart header="Одновременное указание `left/right`, `top/bottom`"]
-
-**В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.**
-
-Браузер растянет такой элемент до границ. 
-
-```html
-<!--+ autorun height=50  no-beautify -->
-<style>
-*!*
-div {
-  position: absolute;
-  left: 10px; right: 10px; top: 10px; bottom: 10px;
-}
-*/!*
-</style>
-<div style="background:#aef;text-align:center">10px от границ</div>
-```
-
-[/smart]
-
-
-[smart header="Внешним блоком является окно"]
-Как растянуть абсолютно позиционированный блок на всю ширину документа?
-
-Первое, что может прийти в голову:
-
-```css
-/*+ no-beautify */
-div {
-  position: absolute;
-  left: 0; top: 0; /* в левый-верхний угол */
-  width: 100%; height: 100%; /* .. и растянуть */
-}
-```
-
-Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!
-
-Прокрутите вниз ифрейм:
-[iframe src="position-100-wrong" height=200 link]
-
-**Вы увидите, что голубой фон оканчивается задолго до конца документа.**
-
-Дело в том, что в CSS `100%` относится к ширине внешнего блока ("containing block"). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?
-
-В данном случае им является так называемый (["\"initial containing block\""](http://www.w3.org/TR/CSS21/visudet.html#containing-block-details)), которым является окно, *а не документ*. 
-
-**То есть, координаты и ширины вычисляются относительно окна, а не документа.**
-
-Может быть, получится так?
-
-```css
-/*+ no-beautify */
-div {
-  position: absolute;
-  left: 0; top: 0; /* в левый-верхний угол, и растянуть..  */
-  right: 0; bottom: 0; /* ..указанием противоположных границ */
-}
-```
-  
-С виду логично, но нет, не получится! 
-
-Координаты `top/right/left/bottom` вычисляются относительно *окна*. Значение `bottom: 0` -- нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
-
-[/smart]
-
-
-## position: absolute в позиционированном родителе  
-
-Если у элемента есть позиционированный предок, то `position: absolute` работает относительно него, а не относительно документа.
-
-То есть, достаточно поставить родительскому `div` позицию `relative`, даже без координат -- и заголовок будет в его правом-верхнем углу, вот так:
-
-```html
-<!--+ autorun height=200 -->
-*!*
-<style>
-  h2 {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-</style>
-*/!*
-
-<div style="background: #fee; width: 500px; *!*position: relative*/!*">
-    Заголовок в правом-верхнем углу DIV'а.
-
-    <h2 style="background: #aef; margin: 0;">Заголовок</h2>
-
-    <div>А тут - всякий разный текст... <br/>
-         ... В две строки!</div>
-</div>
-```
-
-Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от `float`. 
-
-Сравните:
-<ul>
-<li>Используем `position` для размещения элемента управления:
-
-```html
-<!--+ autorun height=80  no-beautify -->
-<button style="position: absolute; right: 10px; opacity: 0.8">
-  Кнопка
-</button>
-1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
-1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
-```
-
-**Часть текста перекрывается.** Кнопка более не участвует в потоке.
-</li>
-<li>Используем `float` для размещения элемента управления:
-
-```html
-<!--+ autorun height=80  no-beautify -->
-<button style="float: right; margin-right: 10px; opacity: 0.8;">
-  Кнопка
-</button>
-1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
-1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
-```
-
-**Браузер освобождает место справа, текст перенесён.** Кнопка продолжает находиться в потоке, просто сдвинута.
-</li>
-</ul>
-
-
-
-## position: fixed   
-
-Это подвид абсолютного позиционирования.
-
-Синтаксис:
-
-```css
-position: fixed;
-```
-
-Позиционирует объект точно так же, как `absolute`, но относительно `window`.
-
-Разница в нескольких словах:
-
-**Когда страницу прокручивают, фиксированный элемент остается на своем месте и не прокручивается вместе со страницей.**
-
-В следующем примере, при прокрутке документа, ссылка `#top` всегда остается на своем месте.
-
-```html
-<!--+ autorun untrusted height=200 -->
-<style>
-*!* 
-  #top {
-    position: fixed;
-    right: 10px;
-    top: 10px;
-    background: #fee;
-  }
-*/!*
-</style>
-
-*!*<a href="#" id="top">Наверх (остается при прокрутке)</a>*/!*
-
-Фиксированное позиционирование.
-
-<p>Текст страницы.. Прокрути меня...</p>
-<p>Много строк..</p><p>Много строк..</p>
-<p>Много строк..</p><p>Много строк..</p>
-<p>Много строк..</p><p>Много строк..</p>
-<p>Много строк..</p><p>Много строк..</p>
-```
-
-
-## Итого
-
-Виды позиционирования и их особенности.
-
-<dl>
-<dt>`static`</dt>
-<dd>Иначе называется "без позиционирования". В явном виде задаётся только если надо переопределить другое правило CSS.</dd>
-<dt>`relative`</dt>
-<dd>Сдвигает элемент относительно текущего места.
-
-<ul>
-<li>Противоположные границы `left/right` (`top/bottom`) одновременно указать нельзя.</li>
-<li>Окружающие элементы ведут себя так, как будто элемент не сдвигался.</li>
-</ul>
-</dd>
-<dt>`absolute`</dt>
-<dd>Визуально переносит элемент на новое место.
-
-Новое место вычисляется по координатам `left/top/right/bottom` относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.
-
-<ul>
-<li>Ширина элемента по умолчанию устанавливается по содержимому.</li>
-<li>Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется.</li>
-<li>Окружающие элементы заполняют освободившееся место.</li>
-</ul>
-</li>
-</dd>
-<dt>`fixed`</dt>
-<dd>Подвид абсолютного позиционирования, при котором элемент привязывается к координатам окна, а не документа. 
-
-При прокрутке он остаётся на том же месте.</dd>
-</dl>
-
-## Почитать
-
-CSS-позиционирование по-настоящему глубоко в спецификации <a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">Visual Formatting Model, 9.3 и ниже</a>.
-
-Еще есть хорошее руководство <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">CSS Positioning in 10 steps</a>, которое охватывает основные типы позиционирования.
-
diff --git a/8-css-for-js/5-position/position-100-wrong.view/index.html b/8-css-for-js/5-position/position-100-wrong.view/index.html
deleted file mode 100644
index d3d9b03c..00000000
--- a/8-css-for-js/5-position/position-100-wrong.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    div {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
-</head>
-
-<body style="height:2000px">
-  <div style="background:#aef;text-align:center">Прокрутите меня...</div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/1-center-ball-css/solution.md b/8-css-for-js/6-css-center/1-center-ball-css/solution.md
deleted file mode 100644
index aaf9b801..00000000
--- a/8-css-for-js/6-css-center/1-center-ball-css/solution.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Сместим мяч в центр при помощи `left/top=50%`, а затем приподымем его указанием `margin`:
-
-```css
-#ball {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -20px;
-  margin-top: -20px;
-}
-```
-
-[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html b/8-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html
deleted file mode 100644
index 5f1b13ec..00000000
--- a/8-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #field {
-      width: 200px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-    }
-    
-    #ball {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -20px;
-      margin-top: -20px;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/1-center-ball-css/source.view/index.html b/8-css-for-js/6-css-center/1-center-ball-css/source.view/index.html
deleted file mode 100644
index 8b54beed..00000000
--- a/8-css-for-js/6-css-center/1-center-ball-css/source.view/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <style>
-    #field {
-      width: 200px;
-      border: 10px groove black;
-      background-color: #00FF00;
-      position: relative;
-    }
-    
-    #ball {
-      position: absolute;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-  </div>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/1-center-ball-css/task.md b/8-css-for-js/6-css-center/1-center-ball-css/task.md
deleted file mode 100644
index cf748928..00000000
--- a/8-css-for-js/6-css-center/1-center-ball-css/task.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Поместите мяч в центр поля (CSS)
-
-[importance 5]
-
-Поместите мяч в центр поля при помощи CSS.
-
-Исходный код:
-[iframe height=200 src="source"]
-
-Используйте CSS, чтобы поместить мяч в центр:
-[iframe height=200 src="solution"]
-
-<ul>
-<li>CSS для центрирования может использовать размеры мяча.</li>
-<li>CSS для центрирования не должен опираться на конкретный размер поля.</li>
-</ul>
-
-[edit src="source"]Исходный документ[/edit].
-
-
diff --git a/8-css-for-js/6-css-center/2-form-modal/solution.md b/8-css-for-js/6-css-center/2-form-modal/solution.md
deleted file mode 100644
index 9f406151..00000000
--- a/8-css-for-js/6-css-center/2-form-modal/solution.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Структура решения
-
-Шаги решения:
-<ol><li>
-Для того, чтобы элементы окна не работали, их нужно перекрыть `DIV'ом` с большим `z-index`.</li>
-<li>Внутри него будет лежать "экран" с полупрозрачностью. Чтобы он растягивался, можно дать ему `position: absolute` и указать все координаты `top/left/right/bottom`. Это работает в IE8+.</li>
-<li>Форму можно отцентрировать при помощи `margin` или `display: table-cell` + `vertical-align` на внешнем `DIV`.</li>
-</ol>
-
-# Решение
-
diff --git a/8-css-for-js/6-css-center/2-form-modal/solution.view/index.html b/8-css-for-js/6-css-center/2-form-modal/solution.view/index.html
deleted file mode 100644
index f1be4fb7..00000000
--- a/8-css-for-js/6-css-center/2-form-modal/solution.view/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    /* внешний DIV перекрывает всё окно */
-    
-    #box {
-      position: fixed;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 999;
-    }
-    /* в нём находится полупрозрачный экран, на 20px меньше */
-    
-    #box-inner {
-      position: absolute;
-      left: 20px;
-      right: 20px;
-      top: 20px;
-      bottom: 20px;
-      background: blue;
-      opacity: 0.3;
-      filter: alpha(opacity=30);
-    }
-    /* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
-    
-    #box form {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0;
-      /* центрирование */
-      
-      margin: auto;
-      /* центрирование */
-      
-      height: 120px;
-      width: 300px;
-      border: 1px solid black;
-      padding: 5px 5px 5px 55px;
-      background: url(https://js.cx/clipart/key.png) 3px 5px white no-repeat;
-    }
-  </style>
-</head>
-
-<body style="height:2000px">
-
-  <p>Текст Текст Текст</p>
-
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-
-  <p>Текст Текст Текст</p>
-
-
-  <div id="box">
-    <div id="box-inner">
-    </div>
-
-    <form>
-      Добро пожаловать!
-      <table>
-        <tr>
-          <td>Логин</td>
-          <td>
-            <input>
-          </td>
-        </tr>
-        <tr>
-          <td>Пароль</td>
-          <td>
-            <input>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <input type="submit" value="Войти">
-          </td>
-        </tr>
-      </table>
-
-    </form>
-
-  </div>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/2-form-modal/source.view/index.html b/8-css-for-js/6-css-center/2-form-modal/source.view/index.html
deleted file mode 100644
index 4c8ea9be..00000000
--- a/8-css-for-js/6-css-center/2-form-modal/source.view/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body style="height:2000px">
-
-  <p>Текст Текст Текст</p>
-
-  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
-
-  <p>Текст Текст Текст</p>
-
-  <img src="https://js.cx/clipart/key.png" />
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/2-form-modal/task.md b/8-css-for-js/6-css-center/2-form-modal/task.md
deleted file mode 100644
index 801e52d2..00000000
--- a/8-css-for-js/6-css-center/2-form-modal/task.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Форма + модальное окно
-
-[importance 5]
-
-Создайте при помощи HTML/CSS форму для логина в модальном окне.
-
-[iframe height=280 src="solution" border=1 link]
-
-Требования:
-
-<ul>
-<li>Кнопки окна вне формы не работают (даже на левый край нажать нельзя).</li>
-<li>Полупрозрачный голубой "экран" отстоит от границ на `20px`.</li>
-<li>Форма центрирована вертикально и горизонтально, её размеры фиксированы.</li>
-<li>Посетитель может менять размер окна браузера, геометрия должна сохраняться.</li>
-<li>Не ломается при прокрутке.</li>
-</ul>
-
-Браузеры: все основные, IE8+.
-
-
-
-
diff --git a/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md b/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md
deleted file mode 100644
index 5ad299dd..00000000
--- a/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Подсказка
-
-Центрирование не работает из-за `position: absolute`.
-
-# Решение
-
-Центрирование не работает потому, что `position: absolute` автоматически меняет элементу `display` на `block`. 
-
-В однострочном случае можно сделать центрирование при помощи `line-height`:
-
-```html
-<!--+ run  no-beautify -->
-<style>
-  .arrow {
-    position: absolute;
-    height: 60px;
-    border: 1px solid black;
-    font-size: 28px;
-
-*!*
-    line-height: 60px;
-*/!*
-  }
-</style>
-
-<div class="arrow">«</div>
-```
-
-Если же центрировать нужно несколько строк или блок, то есть и другие [техники центрирования](/css-center), которые сработают без `display:table-cell`.
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md b/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md
deleted file mode 100644
index 68e0b041..00000000
--- a/8-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# vertical-align + table-cell + position = ?
-
-[importance 5]
-
-В коде ниже используется вертикальное центрирование при помощи `table-cell + vertical-align`.
-
-Почему оно не работает? Нажмите на просмотр, чтобы увидеть (стрелка должна быть в центре по вертикали).
-
-```html
-<!--+ run height=70  no-beautify -->
-<style>
-  .arrow {
-    position: absolute;
-    height: 60px;
-    border: 1px solid black;
-    font-size: 28px;
-
-*!*
-    display: table-cell;
-    vertical-align: middle;
-*/!*
-  }
-</style>
-
-<div class="arrow">«</div>
-```
-
-Как починить центрирование при помощи CSS? Свойства `position/height` менять нельзя.
\ No newline at end of file
diff --git a/8-css-for-js/6-css-center/article.md b/8-css-for-js/6-css-center/article.md
deleted file mode 100644
index 199c724b..00000000
--- a/8-css-for-js/6-css-center/article.md
+++ /dev/null
@@ -1,412 +0,0 @@
-# Центрирование горизонтальное и вертикальное
-
-В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.
-[cut]
-## Горизонтальное
-
-### text-align
-
-Для центрирования инлайновых элементов -- достаточно поставить родителю `text-align: center`.:
-
-```html
-<!--+ autorun height=50 -->
-<style>
-  .outer {
-    *!*text-align: center;*/!*
-    border: 1px solid blue;
-  }
-</style>
-
-<div class="outer">Текст</div>
-```
-
-Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:
-
-```html
-<!--+ autorun height=50 -->
-<style>
-  .outer {
-    *!*text-align: center;*/!*
-    border: 1px solid blue;
-  }
-  .inner {
-    width: 100px;
-    border: 1px solid red;
-  }
-</style>
-
-<div class="outer">
-  <div class="inner">Текст</div>
-</div>
-```
-
-### margin: auto
-
-Блок по горизонтали центрируется `margin: auto`:
-
-```html
-<!--+ autorun height=50 -->
-<style>
-  .outer {
-    border: 1px solid blue;
-  }
-  .inner {
-    width: 100px;
-    border: 1px solid red;
-    *!*margin: auto;*/!*
-  }
-</style>
-
-<div class="outer">
-  <div class="inner">Текст</div>
-</div>
-```
-
-В отличие от `width/height`, значение `auto` для `margin` само не появляется. Обычно `margin` равно конкретной величине для элемента, например `0` для `DIV`. Нужно поставить его явно.
-
-Значение `margin-left:auto/margin-right:auto` заставляет браузер выделять под `margin` всё доступное сбоку пространство. А если и то и другое `auto`, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации [Calculating widths and margins](http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins).
-
-## Вертикальное 
-
-Для горизонтального центрирования всё просто. Вертикальное же изначальное не было предусмотрено в спецификации  CSS и по сей день вызывает ряд проблем. 
-
-Есть три основных решения.
-
-### position:absolute + margin
-
-Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи `top:50%`:
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-  .outer {
-    position: relative;
-    height: 5em;
-    border: 1px solid blue;
-  }
-
-  .inner {
-*!*
-    position: absolute;
-    top: 50%;
-*/!*
-    border: 1px solid red;
-  }
-</style>
-
-<div class="outer">
-  <div class="inner">Текст</div>
-</div>
-```
-
-Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.
-
-**Высота центрируемого элемента должна быть известна.** Родитель может иметь любую высоту.
-
-Если мы знаем, что это ровно одна строка, то её высота равна `line-height`. 
-
-**Приподнимем элемент на пол-высоты при помощи `margin-top`:**
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-  .outer {
-    position: relative;
-    height: 5em;
-    border: 1px solid blue;
-  }
-
-  .inner {
-    position: absolute;
-    top: 50%;
-*!*
-    margin-top: -0.625em;
-*/!*
-    border: 1px solid red;
-  }
-</style>
-
-<div class="outer">
-  <div class="inner">Текст</div>
-</div>
-```
-
-[smart header="Почему -0.625em?"]
-При стандартных настройках браузера высота строки `line-height: 1.25`, если поделить на два `1.25em / 2 = 0.625em`.
-
-Конечно, высота может быть и другой, главное чтобы мы её знали заранее.
-[/smart]
-
-Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи `left:50%` и отрицательного `margin-left`.
-
-### Одна строка: line-height
-
-Вертикально отцентрировать одну строку в элементе с известной высотой `height` можно, указав эту высоту в свойстве `line-height`:
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-  .outer {
-    height: 5em;
-*!*
-    line-height: 5em;
-*/!*
-    border: 1px solid blue;
-  }
-</style>
-
-<div class="outer">
-  <span style="border:1px solid red">Текст</span>
-</div>
-```
-
-Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо. 
-
-### Таблица с vertical-align
-
-У свойства [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align), которое управляет вертикальным расположением элемента, есть два режима работы.
-
-**В таблицах свойство `vertical-align` указывает расположение *содержимого* ячейки.**
-
-Его возможные значения:
-<dl>
-<dt>`baseline`</dt>
-<dd>Значение по умолчанию.</dd>
-<dt>`middle`, `top`, `bottom`</dt>
-<dd>Располагать содержимое посередине, вверху, внизу ячейки.</dd>
-</dl>
-
-Например, ниже есть таблица со всеми 3-мя значениями:
-
-```html
-<!--+ autorun height=130  no-beautify -->
-<style>
-  table {  border-collapse: collapse; }
-  td {    
-    border: 1px solid blue;
-    height: 100px;
-  }
-</style>
-
-<table>
-<tr>
-*!*
-  <td style="vertical-align: top">top</td>
-  <td style="vertical-align: middle">middle</td>
-  <td style="vertical-align: bottom">bottom</td>
-*/!*
-</tr>
-</table>
-```
-
-Обратим внимание, что в ячейке с `vertical-align: middle` содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера `width:100%;height:100%` с одной ячейкой, у которой указать `vertical-align:middle`, и он будет отцентрирован.
-
-Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение `display:table-cell`. Для элемента с таким `display` используются те же алгоритмы вычисления ширины и центрирования, что и в `TD`. И, в том числе, работает `vertical-align`:
-
-Пример центрирования:
-
-```html
-<!--+ autorun height=130 -->
-<div style="*!*display: table-cell; vertical-align: middle; */!* height: 100px; border: 1px solid red">
-  <button>Кнопка<br>с любой высотой<br>и шириной</button>
-</div>
-```
-
-**Этот способ замечателен тем, что он не требует знания высоты элементов.**
-
-Однако у него есть особенность. Вместе с `vertical-align` родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.
-
-Чтобы его растянуть, нужно указать `width` явно, например: `300px`:
-
-```html
-<!--+ autorun height=130 -->
-<div style="display: table-cell; vertical-align: middle; height: 100px; *!*width: 300px*/!*; border: 1px solid red">
-  <button>Кнопка<br>с любой высотой<br>и шириной</button>
-</div>
-```
-
-Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы "сломана" -- ячейка есть, а собственно таблицы-то нет.
-
-Это можно починить, завернув "псевдоячейку" в элемент с `display:table`, которому и поставим ширину:
-
-```html
-<!--+ autorun height=130 -->
-<div style="*!*display: table; width: 100%*/!*">
-<div style="display: table-cell; vertical-align: middle; height: 100px; border: 1px solid blue">
-  <button>Кнопка<br>с любой высотой<br>и шириной</button>
-</div>
-</div>
-```
-
-Если дополнительно нужно горизонтальное центрирование -- оно обеспечивается другими средствами, например `margin: 0 auto` для блочных элементов или `text-align:center` на родителе -- для других. 
-
-### Центрирование в строке с vertical-align
-
-Для инлайновых элементов (`display:inline/inline-block`), включая картинки, свойство `vertical-align` центрирует *сам инлайн-элемент в окружающем его тексте*.
-
-В этом случае набор значений несколько другой:
-[iframe src="vertical-align" height="300" link edit border="1"]
-
-Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента -- нет.
-
-Допустим, высота внешнего элемента `120px`. Укажем её в свойстве `line-height`:
-
-```html
-<!--+ autorun height=150  no-beautify -->
-<style>
-  .outer {
-    line-height: 120px;
-  }
-  .inner {
-    display: inline-block; /* центрировать..*/
-    vertical-align: middle;  /* ..по вертикали */
-    line-height: 1.25; /* переопределить высоту строки на обычную */
-    border: 1px solid red;
-  }
-</style>
-<div class="outer" style="height: 120px;border: 1px solid blue">
-  <span class="inner">Центрирован<br>вертикально</span>
-</div>
-```
-
-Работает во всех браузерах и IE8+.
-
-Свойство `line-height` наследуется, поэтому надо знать "правильную" высоту строки и переопределять её для `inner`.
-
-### Центрирование с vertical-align без таблиц
-
-Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или `display:table-cell` с `vertical-align`.
-
-Если центрируются не-блочные элементы, например `inline` или `inline-block`, то `vertical-align` может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через `:before`).
-
-Пример:
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-.before {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.inner {
-  display: inline-block;
-  vertical-align: middle;
-}
-</style>
-
-<div class="outer" style="height:100px;border:1px solid blue">
-  <span class="before"></span>
-  <span class="inner" style="border:1px solid red">
-    Центрированный<br>Элемент
-  </span>
-</div>
-```
-
-<ul>
-<li>Перед центрируемым элементом помещается вспомогательный инлайн-блок `before`, занимающий всю возможную высоту.</li>
-<li>Центрируемый блок выровнен по его середине.</li>
-</ul>
-
-Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через `:before`:
-
-```html
-<!--+ autorun -->
-<style>
-*!*.outer:before*/!* {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.inner {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* добавим горизонтальное центрирование */
-.outer {
-  text-align: center;
-}
-</style>
-
-<div class="outer" style="height:100px; width: 100%; border:1px solid black">
-  <span class="inner" style="border:1px solid red">
-    Центрированный<br>Элемент
-  </span>
-</div>
-```
-
-В пример выше добавлено также горизонтальное центрирование `text-align: center`. Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.
-
-Это происходит потому, что центрируется *весь текст*, а перед `inner` находится пробел, который занимает место.
-
-Варианта два:
-<ol>
-<li>Убрать лишний пробел между `div` и началом `inner`, будет `<div class="outer"><span class="inner">...`.</li>
-<li>Оставить пробел, но сделать отрицательный `margin-left` у `inner`, равный размеру пробела, чтобы `inner` сместился левее.</li>
-</ol>
-
-Второе решение:
-
-```html
-<!--+ autorun  no-beautify -->
-<style>
-.outer:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.inner {
-  display: inline-block;
-  vertical-align: middle;
-*!*
-  margin-left: -0.35em;
-*/!*
-}
-
-.outer {
-  text-align: center;
-}
-</style>
-
-<div class="outer" style="height:100px; width: 100%; border:1px solid black">
-  <span class="inner" style="border:1px solid red">
-    Центрированный<br>Элемент
-  </span>
-</div>
-```
-
-## Итого
-
-Обобщим решения, которые обсуждались в этой статье.
-
-Для горизонтального центрирования:
-<ul>
-<li>`text-align: center` -- центрирует инлайн-элементы в блоке.</li>
-<li>`margin: 0 auto` -- центрирует блок внутри родителя. У блока должна быть указана ширина.</li>
-</ul>
-
-Для вертикального центрирования одного блока внутри другого:
-
-<dl>
-<dt>Если размер центрируемого элемента известен, а родителя - нет</dt>
-<dd>Родителю `position:relative`, потомку `position:absolute; top:50%` и `margin-top:-<половина-высоты-потомка>`. Аналогично можно отцентрировать и по горизонтали.</dd>
-<dt>Если нужно отцентрировать одну строку в блоке, высота которого известна</dt>
-<dd>Поставить блоку `line-height: <высота>`. Нужны конкретные единицы высоты (`px`,`em`...). Значение `line-height:100%` не будет работать, т.к. проценты берутся не от высоты блока, а от текущей `line-height`.</dd>
-<dt>Высота родителя известна, а центрируемого элемента - нет.</dt>
-<dd>Поставить `line-height` родителю во всю его высоту, а потомку поставить `display:inline-block`.</dd>
-<dt>Высота обоих элементов неизвестна.</dt>
-<dd>Два варианта:
-<ol>
-<li>Сделать элемент-родитель ячейкой таблицы при помощи `display:table-cell`(IE8) или реальной таблицы, и поставить ему `vertical-align:middle`. Отлично работает, но мы имеем дело с таблицей вместо обычного блока.</li>
-<li>Решение с вспомогательным элементом `outer:before` и инлайн-блоками. Вполне универсально и не создаёт таблицу.</li>
-</ol>
-</dd>
-</dl>
-
-
diff --git a/8-css-for-js/6-css-center/vertical-align.view/index.html b/8-css-for-js/6-css-center/vertical-align.view/index.html
deleted file mode 100644
index b7968b8c..00000000
--- a/8-css-for-js/6-css-center/vertical-align.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:
-
-  <pre>
-baseline(по умолчанию) <img src="https://js.cx/clipart/30.png">
-middle(по середине) <img src="https://js.cx/clipart/30.png" style="vertical-align: middle">
-sub<sub>вровень с &lt;sub&gt;</sub> <img src="https://js.cx/clipart/30.png" style="vertical-align: sub">
-super<sup>вровень с &lt;sup&gt;</sup> <img src="https://js.cx/clipart/30.png" style="vertical-align: super">
-text-top(верхняя граница вровень с текстом) <img src="https://js.cx/clipart/30.png" style="vertical-align: text-top">
-text-bottom(нижняя граница вровень с текстом) <img src="https://js.cx/clipart/30.png" style="vertical-align: text-bottom">
-</pre>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/8-css-for-js/7-font-size-line-height/article.md b/8-css-for-js/7-font-size-line-height/article.md
deleted file mode 100644
index 80faaaf0..00000000
--- a/8-css-for-js/7-font-size-line-height/article.md
+++ /dev/null
@@ -1,127 +0,0 @@
-# Свойства "font-size" и "line-height"
-
-Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
-
-## font-size и line-height
-<ul>
-<li>`font-size` -- *размер шрифта*, в частности, определяющий высоту букв.</li>
-<li>`line-height` -- *высота строки*.</li>
-</ul>
-
-Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
-
-```html
-<!--+ autorun height=100  no-beautify -->
-<style>
-body { 
-*!*
-    font-size: 30px;
-    font-family: monospace;
-    line-height: 30px;
-*/!*
-  }
-</style>
-
-<div style="outline: 1px dotted red">Ёрш р</div>
-<div style="outline: 1px dotted red">Ёрш Ё</div>
-```
-
-Размер шрифта `font-size` -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.
-
-Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая "нижние хвосты" букв, таких как `р`, `g`. Как видно из примера выше, при размере строки, равном `font-size`, строка не будет размером точно "под букву". 
-
-В зависимости от шрифта, "хвосты" букв при этом могут вылезать, правые буквы `Ё` и `р` в примере выше пересекаются как раз поэтому.
-
-В некоторых особо размашистых шрифтах "хвосты букв" могут быть размером с саму букву, а то и больше больше. Но это, всё же исключение.
-
-Обычно размер строки делают чуть больше, чем шрифт.
-
-**По умолчанию в браузерах используется специальное значение `line-height:normal`.**
-
-Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне `1.1 - 1.25`, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть "разумным" (дословно -- англ. reasonable).
-
-## Множитель для line-height
-
-Значение `line-height` можно указать при помощи `px` или `em`, но гораздо лучше -- задать его числом.
-
-Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем `line-height: 2` при `font-size: 16px` будет аналогично `line-height: 32px (=16px*2)`.
-
-Однако, между множителем и точным значением есть одна существенная разница.
-
-<ul>
-<li>**Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.**
-
-То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
-</li>
-<li>**Значение, заданное в единицах измерения, запоминается и наследуется "как есть".**
-
-Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.</li>
-</ul>
-
-Давайте посмотрим, как это выглядит, на примерах:
-
-<dl>
-<dt>Множитель, `line-height:1.25`</dt>
-<dd>
-
-```html
-<!--+ autorun -->
-<div style="*!*line-height: 1.25*/!*">
-  стандартная строка
-  <div style="font-size:2em">
-    шрифт в 2 раза больше<br>
-    шрифт в 2 раза больше
-  </div>
-</div>
-```
-
-</dd>
-<dt>Конкретное значение, `line-height:1.25em`</dt>
-<dd>
-
-```html
-<!--+ autorun -->
-<div style="*!*line-height: 1.25em*/!*">
-  стандартная строка
-  <div style="font-size:2em">
-    шрифт в 2 раза больше<br>
-    шрифт в 2 раза больше
-  </div>
-</div>
-```
-
-</dd>
-</dl>
-
-Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.
-
-**В обычных ситуациях рекомендуется использовать именно множитель, за исключением особых случаев, когда вы действительно знаете что делаете.** 
-
-## Синтаксис font: size/height family
-
-Установить `font-size` и `line-height` можно одновременно.
-
-Соответствующий синтаксис выглядит он так:
-
-```css
-font: *!*20px/1.5*/!* Arial,sans-serif;
-```
-
-При этом нужно обязательно указать сам шрифт, например `Arial,sans-serif`. Укороченный вариант `font: 20px/1.5` работать не будет.
-
-Дополнительно можно задать и свойства `font-style`, `font-weight`:
-
-```css
-font: *!*italic bold*/!* 20px/1.5 Arial,sans-serif;
-```
-
-## Итого
-
-<dl>
-<dt>`line-height`</dt>
-<dd>Размер строки, обычно он больше размера шрифта. При установке множителем расчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения -- фиксируется.</dd>
-<dt>`font-size`</dt>
-<dd>Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.</dd>
-<dt>`font: 125%/1.5 FontFamily`</dt>
-<dd>Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.</dd>
-</dl>
diff --git a/8-css-for-js/8-white-space/article.md b/8-css-for-js/8-white-space/article.md
deleted file mode 100644
index a3f14533..00000000
--- a/8-css-for-js/8-white-space/article.md
+++ /dev/null
@@ -1,124 +0,0 @@
-# Свойство white-space
-
-Свойство `white-space` позволяет сохранять пробелы и переносы строк. 
-
-У него есть два известных значения:
-<ul>
-<li>`white-space: normal` -- обычное поведение</li>
-<li>`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.</li>
-</ul>
-
-Но браузеры поддерживают и другие, которые также бывают очень полезны.
-[cut]
-
-## pre / nowrap
-
-Встречаем первую "сладкую парочку" -- `pre` и `nowrap`. 
-
-Оба этих значения меняют стандартное поведение HTML при работе с текстом:
-
-**`pre`**:
-<ul>
-<li>Сохраняет пробелы.</li>
-<li>Переносит текст при явном разрыве строки.</li>
-</ul>
-
-**`nowrap`**
-<ul>
-<li>Не сохраняет пробелы.</li>
-<li>Игнорирует явные разрывы строки (не переносит текст).</li>
-</ul>
-
-Оба этих значения поддерживаются кросс-браузерно.
-
-**Их основной недостаток -- текст может вылезти из контейнера.**
-
-Для примера, рассмотрим следующий фрагмент кода:
-
-```js
-//+ no-beautify
-if (hours > 18) {
-      // Пойти поиграть в теннис
-}
-```
-
-**`white-space: pre`:**
-
-```html
-<!--+ autorun height=100 -->
-<style>
-  div { font-family: monospace; width: 200px; border: 1px solid black; }
-</style>
-
-<div style="white-space:pre">if (hours > 18) {
-      // Пойти поиграть в теннис
-}
-</div>
-```
-
-Здесь пробелы и переводы строк сохранены. В HTML этому значению `white-space` соответствует тег `PRE`.
-
-**`white-space: nowrap`:**
-
-```html
-<!--+ autorun height=100 -->
-<style>
-  div { font-family: monospace; width: 200px; border: 1px solid black; }
-</style>
-
-<div style="white-space:nowrap">if (hours > 18) {
-      // Пойти поиграть в теннис
-} 
-</div>
-```
-
-Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться -- сжаты в один (например, перед комментарием `//`).
-
-Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег `PRE` и описанные выше значения `white-space` для этого не подойдут!
-
-Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы. 
-
-Можно скрыть вылезшее значение при помощи `overflow-x: hidden` или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения `white-space`, специально для таких случаев.
-
-## pre-wrap/pre-line
-
-<dl>
-<dt>`pre-wrap`</dt>
-<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.</dd>
-<dt>`pre-line`</dt>
-<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера и не сохраняет пробелы.</dd>
-</dl>
-
-Оба поведения отлично прослеживаются на примерах:
-
-**`white-space: pre-wrap`:**
-
-```html
-<!--+ autorun height=100 -->
-<style>
-  div { font-family: monospace; width: 200px; border: 1px solid black; }
-</style>
-
-<div style="white-space:pre-wrap">if (hours > 18) {
-      // Пойти поиграть в теннис
-}
-</div>
-```
-
-Отличный выбор для безопасной вставки кода посетителями.
-
-**`white-space: pre-line`:**
-
-```html
-<!--+ autorun height=100 -->
-<style>
-  div { font-family: monospace; width: 200px; border: 1px solid black; }
-</style>
-
-<div style="white-space:pre-line">if (hours > 18) {
-      // Пойти поиграть в теннис
-} 
-</div>
-```
-
-Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.
diff --git a/8-css-for-js/9-outline/article.md b/8-css-for-js/9-outline/article.md
deleted file mode 100644
index 6dbfdd1a..00000000
--- a/8-css-for-js/9-outline/article.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Свойство "outline"
-
-Свойство `outline` задаёт дополнительную рамку вокруг элемента, *за пределами его CSS-блока*. Поддерживается во всех браузерах, IE8+.
-[cut]
-Для примера, рассмотрим его вместе с обычной рамкой `border`:
-
-```html
-<!--+ autorun height=60 -->
-<div style="border:3px solid blue; *!*outline: 3px solid red*/!*">
- Элемент
-</div>
-```
-
-<ul>
-<li>**В отличие от `border`, рамка `outline` не участвует в блочной модели CSS.** Она не занимает места и не меняет размер элемента. Поэтому его используют, когда хотят добавить рамку без изменения других CSS-параметров.
-</li>
-<li>Также, в отличие от `border`, рамку `outline` можно задать только со всех сторон: свойств `outline-top`, `outline-left` не существует.</li>
-</ul>
-
-Так как `outline` находится за границами элемента -- **`outline`-рамки соседей могут перекрывать друг друга**:
-
-```html
-<!--+ height=60 autorun -->
-<div style="*!*outline: 3px solid green*/!*">
- Элемент
-</div>
-<div style="*!*outline: 3px solid red*/!*">
- Элемент
-</div>
-```
-
-В примере выше верхняя рамка нижнего элемента находится на территории верхнего и наоборот.
-
-Все браузеры, кроме IE9-, также поддерживают свойство `outline-offset`, задающее отступ `outline` от внешней границы элемента:
-
-```html
-<!--+ autorun height=60  no-beautify -->
-<div style="border:3px solid blue; outline: 3px solid red; outline-offset:5px">
- Везде, кроме IE9-, между рамками будет расстояние 5px
-</div>
-```
-
-Ещё раз заметим, что основная особенность `outline` -- в том, что при наличии  `outline-offset` или без него -- он не занимает места в блоке.
-
-Поэтому его часто используют для стилей `:hover` и других аналогичных, когда нужно выделить элемент, но чтобы ничего при этом не прыгало.
\ No newline at end of file
diff --git a/8-css-for-js/index.md b/8-css-for-js/index.md
deleted file mode 100644
index c35c778b..00000000
--- a/8-css-for-js/index.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# CSS для JavaScript-разработчика 
-
diff --git a/9-tools/1-tools-browser-extensions/article.md b/9-tools/1-tools-browser-extensions/article.md
deleted file mode 100644
index c91ffc92..00000000
--- a/9-tools/1-tools-browser-extensions/article.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# Полезные расширения Firefox и Chrome
-
-Здесь мы посмотрим ряд полезных расширений, которые, надеюсь, смогут вам пригодиться.
-[cut]
-
-Если какое-то из расширений вас заинтересует -- его можно поставить. В Firefox расширения устанавливаются из меню "Инструменты -> Дополнения", в Chrome -- через меню "Настройки -> Расширения -> (внизу) Ещё расширения" или напрямую из "магазина" `https://chrome.google.com/webstore/category/home`. 
-
-Для расширений других браузеров такого единого способа нет.
-
-## Web Developer (FF, Ch)
-
-Это расширение добавляет наверх браузера панель с разнообразными инструментами:
-
-<img src="webdeveloper.png">
-
-
-Большинство возможностей, скорее, полезны для верстальщиков, но и для  разработчиков кое-что есть.
-
-Например:
-
-<ul>
-<li>**Disable Cache** -- полностью отключает кэш браузера</li>
-<li>**Disable Cookies** -- браузер перестанет посылать и принимать Cookie. Впрочем, Firebug это тоже умеет (вкладка Cookie)</li>
-<li>**Disable JavaScript** -- нужно редко, но иногда полезно</li>
-<li>**Resize** на нужное разрешение -- у разработчиков мониторы большие, а у пользователей разные. Можно добавить своё разрешение.</li>
-</ul>
-
-Иконок там много, поэтому наверняка вы чем-то не будете пользоваться. Лишние иконки можно убрать. В Firefox(Win) это делается так: Правый клик на панель -> Настроить -> Перетащить лишние иконки с панели.
-
-## DNS Flusher (FF) / DNS Flusher for Chrome
-
-Это расширение позволяет сбросить кэш DNS одним кликом.
-
-Оно нужно в тех случаях, когда вы меняете адреса в файле `hosts` и хотите, чтобы изменения вступили в действие тут же.
-
-При установке в статусной строке, снизу, появляется кнопочка с IP-адресом. По клику на ней кэш DNS сбрасывается.
-
-<img src="dnsflusher.png">
-
-
-## Более удобный Firebug (FF)
-
-Здесь собраны расширения, улучшающие работу отладчика Firebug для Firefox.
-
-<dl>
-<dt>Fire Rainbow</dt>
-<dd>Подсветка кода для Firebug</dd>
-<dt>FireQuery</dt>
-<dd>Для разработки под jQuery -- выводит в разных местах вспомогательную информацию. </dd>
-<dt>Firebug Autocompleter</dt>
-<dd>Включает автодополнение для консоли, когда она в многострочном режиме.</dd> 
-<dt>[CSS-X-Fire](http://code.google.com/p/css-x-fire/)</dt>
-<dd>Позволяет редактировать CSS в Firebug и сохранять изменения, интегрировано с редакторами от JetBrains (IntelliJ IDEA и другие).</dd>
-</dl>
-
-## JsonView (FF,Ch)
-
-Даёт возможность открыть JSON-документ прямо в браузере.
-
-Обычно браузер не понимает `Content-Type: application/json` и пытается сохранить JSON-файлы. 
-
-Но если в нём стоит это расширение, то он покажет файл в удобном виде, с возможностью навигации:
-
-<img src="jsonview.png">
-
-## Xml Tree (Ch)
-
-Расширение для просмотра XML для Chrome. 
-
-Остальные браузеры умеют это делать "из коробки".
-
-
-## YSlow, PageSpeed Insights (FF, Ch)
-
-Эти два расширения позволяют по-быстрому оценить скорость загрузки страницы, проанализировать массу возможных причин тормозов и получить советы по улучшению производительности. 
-
-Они очень похожи, но не идентичны, так что можно поставить оба.
-
-<img src="pageinsight.png">
-
-## AdBlock (FF, Ch)
-
-Расширение для отключения назойливой рекламы и баннеров.
-
-Режет не всё, но многое. Да, оно не для разработки, но настолько полезное, что я не смог удержаться и опубликовал его здесь.
-
-Кстати, насчёт разработки... Бывает так, что AdBlock прячет рекламу на сайтах, которые мы разрабатываем. К хорошему быстро привыкаешь, и если юзер будет слать вам ошибки на страницах (а у вас их нет) -- проверьте! Может быть, стоит отключить AdBlock для конкретной страницы и посмотреть без него? Исключения можно поставить в настройках расширения.
-
-## DownloadHelper (FF)
-
-Расширение для скачивания видео из Youtube, Blip TV и других хостингов.
-
-С одной стороны, это расширение тоже напрямую не связано с разработкой...
-
-..Но с другой -- бывает ли, что работая на компьютере вы получаете ссылку на интересное видео с конференции? Или заходите на сайт и видите там набор прекрасных выступлений, которые хочется скачать и посмотреть в более удобное время с планшетника. Скажем, во время поездки, когда нет интернет.
-
-Если бывает, то это расширение -- для вас. Скачиваем отличные видео и смотрим, когда захотим.
-
-Способ использования: 
-<ol>
-<li>Зайти на страницу.</li>
-<li>Начать смотреть видео.</li>
-<li>Увидеть, как иконка расширения "ожила", кликнуть на нее и выбрать видео в нужном разрешении (если есть несколько).</li>
-<li>Файл будет скачан в папку `dwhelper` (по умолчанию), место можно поменять в настройках.</li>
-</ol>
-
-<img src="downloadhelper.jpg">
-
-## P.S.
-
-В этот список расширений я включил самое любимое и полезное, что связано именно с расширениями браузера. 
-
-Есть дополнительные инструменты, которые становятся в систему, они идут в отдельном разделе.
-
-У вас есть, что добавить? Расширения, которые вам очень помогли? Укажите их в комментариях.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/9-tools/1-tools-browser-extensions/dnsflusher.png b/9-tools/1-tools-browser-extensions/dnsflusher.png
deleted file mode 100644
index 21291249..00000000
Binary files a/9-tools/1-tools-browser-extensions/dnsflusher.png and /dev/null differ
diff --git a/9-tools/1-tools-browser-extensions/downloadhelper.jpg b/9-tools/1-tools-browser-extensions/downloadhelper.jpg
deleted file mode 100644
index 57642dad..00000000
Binary files a/9-tools/1-tools-browser-extensions/downloadhelper.jpg and /dev/null differ
diff --git a/9-tools/1-tools-browser-extensions/jsonview.png b/9-tools/1-tools-browser-extensions/jsonview.png
deleted file mode 100644
index efb92baa..00000000
Binary files a/9-tools/1-tools-browser-extensions/jsonview.png and /dev/null differ
diff --git a/9-tools/1-tools-browser-extensions/pageinsight.png b/9-tools/1-tools-browser-extensions/pageinsight.png
deleted file mode 100644
index 4faa5b96..00000000
Binary files a/9-tools/1-tools-browser-extensions/pageinsight.png and /dev/null differ
diff --git a/9-tools/1-tools-browser-extensions/webdeveloper.png b/9-tools/1-tools-browser-extensions/webdeveloper.png
deleted file mode 100644
index 12ef5760..00000000
Binary files a/9-tools/1-tools-browser-extensions/webdeveloper.png and /dev/null differ
diff --git a/9-tools/2-fiddler/article.md b/9-tools/2-fiddler/article.md
deleted file mode 100644
index bcef5f94..00000000
--- a/9-tools/2-fiddler/article.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Скриптуемый отладочный прокси Fiddler
-
-Fiddler -- прокси, который работает с трафиком между Вашим компьютером и удаленным сервером, и позволяет инспектировать и менять его.
-
-Fiddler можно расширять с помощью скриптов на языке JScript.NET (писать их очень просто), менять меню программы, и вообще -- замечательный инструмент.
-
-Использовать его можно с любым браузером.
-
-Эта статья описывает Fiddler 2.4. В вашей версии Fiddler какие-то возможности могут измениться, какие-то образоваться.
-[cut]
-
-## Режимы подключения
-
-У Fiddler есть 2 способа подключения. 
-
-<ol>
-<li>Первый -- это просто запустить его. При этом он автоматически будет работать для программ, использующих WinINET.
-
-Это, например, Internet Explorer, Chrome, приложения MS Office.
-
-Firefox тоже автоматически подхватит Fiddler, за счёт того что при установке Fiddler в него ставится соответствующее расширение:
-
-<img src="fiddler-hook.png">
-</li>
-<li>Второй -- это явно поставить Fiddler как прокси для браузера, по адресу `127.0.0.1:8888`. Например, так можно сделать для Opera, если уж не хочется перезапускать.</li>
-</ol>
-
-## Fiddler не под Windows
-
-Если вы работаете не под Windows, то Fiddler можно поставить в виртуальную машину.
-
-Чтобы сделать возможной подключение внешних браузеров, нужно включить настройках Fiddler: Tools -> Fiddler Options -> Connections(вкладка) галочку "Allow remote clients to connect".  После этого Fiddler станет доступен как прокси на интерфейсе `0.0.0.0`, так что можно будет браузеру из внешней ОС указать в качестве прокси виртуальную машину. И пользоваться Fiddler.
-
-Если вы так захотите поступить, то вдобавок возьмите удобный переключатель прокси, например Elite Proxy Switcher под Firefox или [Proxy Pick](http://www.bayden.com/ietoys/) для IE, чтобы переключение на прокси осуществлялось в один клик.
-
-## Операции над запросами
-
-При заходе в Fiddler, открывается окно запросов слева и рабочие вкладки справа.
-
-<img src="fiddler.png">
-
-Как видно, опций много, на изображении они еле-еле помещаются. И, поверьте, возможностей -- ещё больше.
-
-## Возможности
-
-<ul>
-<li>**В окне запросов** слева можно просматривать и выбирать запросы, смотреть их заголовки, сохранять их на диск все вместе или по отдельности.</li>
-<li>**AutoResponder** -- позволяет подставить свой файл вместо сервера.
-
-Например, приятель попросил поправить скрипт `vasya.js` на сайте, но доступа к серверу не дал. 
-
-С Fiddler задача решается просто -- сохраняете скрипт на диске, в AutoResponder указываете, что `vasya.js` нужно брать с диска, а не с сайта -- и исправляете, что нужно, перезагружаете страницу, проверяете -- всё с комфортом.</li>
-<li>**Composer** -- позволяет составить запрос на сервер вручную.
-
-Например, вы хотите сделать такой же AJAX-запрос, как только что делали. Для этого можно просто выбрать его слева и нажать кнопку Replay (слева-сверху).
-
-А если хочется поменять? Нет ничего проще -- выбираем справа Composer и перетаскиваем запрос слева в него. После этого исправляем, что хотим и Execute.</li>
-<li>**Filters** -- позволяет назначить действия в зависимости от вида запроса. Опции станут понятны после перехода на вкладку.</li>
-<li>**FiddlerScript** -- основа мощи Fiddler: скрипт, задающий функционал. Его редактированием можно добавить или удалить пункты меню, колонки в списке запросов, и, вообще, поменять почти всё. 
-
-Язык программирования JScript.NET, который здесь используется, может взаимодействовать с Windows в полном объеме, включая коммуникацию с базой данных, Word, Excel.</li>
-</ul>
-
-## Правила
-
-Слева-сверху в меню находится пункт Rules (правила). В нём изначально находятся некоторые возможности FiddlerScript, которые поставляются "из коробки".
-
-Хотите посмотреть, как ваш сайт будет грузиться "на GPRS"? Выбирайте Rules -> Performance -> Simulate Modem speeds.
-
-Для добавления новых правил можно их задать через пункт "Customize Rules" (на JScript.NET, разумеется). В открывающемся скрипте есть пункты меню и их реализация.
-
-При наступлении любого события из обширного списка, Fiddler вызывает соответствующий обработчик из правил. Например, onBeforeRequest, onShutdown. Стандартные правила отлично прокомментированы, и писать новые весьма просто.
-
-FiddlerScript позволяет манипулировать заголовками, запросом, менять ширину канала, управлять выводом запроса в Fiddler и так далее и т.п.
-
-## Брейкпойнт на запросе
-В меню Rules -&gt; Automatic Breakpoints можно включить автоматическое прерывание Fiddler при обработке запроса.
-
-После этого, если сделать запрос в браузере, подключенном к Fiddler, то  его выполнение зависнет, а в левом окошке Fiddler этот запрос будет отмечен специальным значком.
-
-Если выбрать такой подвисший запрос мышкой, то во вкладке SessionInspector им можно управлять: менять сам запрос и ответ сервера (после Break on Response, когда сервер уже ответил).
-
-Задавать прерывание на запросах определенного вида также можно через Filters.
-
-## Отладка HTTPS
-
-Fiddler является прокси, а HTTPS шифруется от браузера до сервера-получателя, поэтому по умолчанию Fiddler не имеет доступа к содержимому HTTPS-запросов.
-
-Чтобы его получить, Fiddler должен сыграть роль хакера-перехватчика: расшифровывать запросы, и потом отправлять дальше. Это возможно, если инсталлировать специальный сертификат: Tools -> Fiddler Options -> HTTPS(вкладка) -> выбрать все галочки.
-
-После окончания отладки этот сертификат можно убрать.
-
-## Скачать
-
-Fiddler можно бесплатно скачать с <a href="http://www.fiddler2.com/fiddler2/">сайта разработчика</a>. Там же доступна <a href="http://www.fiddler2.com/Fiddler/help/">документация и видео</a>.
-
-К фиддлеру прилагается галерея расширений <a href="http://www.fiddlertool.com/fiddler2/extensions.asp">http://www.fiddlertool.com/fiddler2/extensions.asp</a>. 
-
-Примеры скриптов для Fiddler, которые дают общее представление о том, на что он может быть способен: <a href="http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp">http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp</a>.
\ No newline at end of file
diff --git a/9-tools/2-fiddler/fiddler-hook.png b/9-tools/2-fiddler/fiddler-hook.png
deleted file mode 100644
index f3f527e2..00000000
Binary files a/9-tools/2-fiddler/fiddler-hook.png and /dev/null differ
diff --git a/9-tools/2-fiddler/fiddler.png b/9-tools/2-fiddler/fiddler.png
deleted file mode 100644
index bea021b0..00000000
Binary files a/9-tools/2-fiddler/fiddler.png and /dev/null differ
diff --git a/9-tools/3-ie-http-analyzer/article.md b/9-tools/3-ie-http-analyzer/article.md
deleted file mode 100644
index 56818c7b..00000000
--- a/9-tools/3-ie-http-analyzer/article.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# IE HTTP Analyzer 
-
-Под Windows есть как минимум два весьма основных инструмента для отладки на уровне HTTP.
-
-Один из них -- Fiddler. Другой -- IE HTTP Analyzer, который представляет собой "другой угол зрения" на задачу.
-[cut]
-
-## Возможности
-IE HTTP Analyzer -- платный, и имеет две ипостаси.
-
-Первая - это обычная программа, запущенная в отдельном окне. При нажатии на кнопку "Play" - начинает перехват HTTP для всех браузеров, включая Firefox.
-
-<img src="ie-http-analyzer.gif">
-
-Вторая -- наподобие Firebug, раскрывающаяся полоса внизу браузера Internet Explorer. Это -- плагин, вызывается из панели или меню браузера.
-
-<img src="ie-http-analyzer-2.gif">
-
-Существуют другие программы похожего вида, но, перебрав несколько, я остановился на этой, как самой удобной.
-
-Основные возможности сводятся к удобной отладке HTTP-запросов, да и кнопочки на скриншотах выше достаточно очевидны.
-
-## Просмотр и создание HTTP-запросов.
-Этим сейчас никого не удивишь, если бы не одно БОЛЬШОЕ НО.
-
-Программа дает возможность удобно просматривать потоковые запросы.
-
-Т.е, например,  отлаживаете Вы чат. А он держит непрерывный iframe, через который сервер передает данные. Программы типа Fiddler будут честно ждать конца запроса, чтобы показать Вам его, а IE HTTP Analyzer не менее честно будет сбрасывать поток пред Ваши светлы очи.
-
-Запросы могут поступать все новые и новые, но в панели инспектора есть кнопка <img src="ie-http-analyzer-3.gif">, которая управляет автопереходом к следующему запросу. При анализе потока она должна быть выключена.
-
-Эта "потоковость" IE Http Analyzer- один из важных его плюсов.
-
-## Конструирование фильтров
-
-В отличие от правил на языке JScript.NET, которые используются для фильтрации в Fiddler, здесь фильтры на интересующие Вас запросы можно конструировать из стандартных компонент, объединяя их условиями ИЛИ/И.
-
-## Дополнительные возможности
-Очистка куков и кеша браузера. Проверено, работает.
-
-Программа платная. 
-
-Живет на <a href="http://www.ieinspector.com/httpanalyzer/">http://www.ieinspector.com/httpanalyzer/</a>. 
\ No newline at end of file
diff --git a/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif b/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif
deleted file mode 100644
index c4cf73c4..00000000
Binary files a/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif and /dev/null differ
diff --git a/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif b/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif
deleted file mode 100644
index 2ba8113d..00000000
Binary files a/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif and /dev/null differ
diff --git a/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif b/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif
deleted file mode 100644
index 021a9dec..00000000
Binary files a/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif and /dev/null differ
diff --git a/9-tools/index.md b/9-tools/index.md
deleted file mode 100644
index a5dc0ab0..00000000
--- a/9-tools/index.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Сундучок с инструментами
-
diff --git a/README.md b/README.md
index eea6cb63..ffc297f6 100755
--- a/README.md
+++ b/README.md
@@ -1,38 +1,22 @@
 
-# Учебник JavaScript
+# The JavaScript Tutorial
 
-Этот репозитарий содержит учебник JavaScript [https://learn.javascript.ru](https://learn.javascript.ru).
+This repository hosts the content of the JavaScript Tutorial, published at [https://javascript.info](https://javascript.info).
 
-Движок, написанный на io.js, находится в отдельном репозитарии https://github.com/iliakan/javascript-nodejs, а здесь &mdash; текст.
+Please use this repository to file issues and suggest PRs for the text.
 
-Делать исправления и предлагать PR по коду нужно там, по тексту учебника — здесь.
+## Structure
 
-## Структура
+Every chapter, article or a task has its folder.
 
-Каждому разделу, статье или задаче соответствует директория.
+The folder is named like `N-url`, where `N` is a number for the sorting purposes and `url` is the URL part with title of the material.
 
-Эта директория имеет вид `N-url`, где `N` - это номер для сортировки статей и разделов (они упорядочены), а `url` &mdash; URL-имя, по которому материал будет доступен.
+The type of the material is defined by the file inside the folder:
 
-В директории находится один из файлов:
+  - `index.md` stands for a chapter
+  - `article.md` stands for an article
+  - `task.md` stands for a task (solution must be provided in `solution.md` file aswell)
 
-  - `index.md` для раздела
-  - `article.md` для статьи
-  - `task.md` для условия задачи (+там же `solution.md` с решением)
+Each of these files starts from the `# Main header`.
 
-Каждый из этих файлов начинается с `# Заголовка материала`.
-
-Абсолютный URL для разделов и статей -- это URL-имя без номера и родителей, для задачи -- с префиксом `/task/`.
-
-Например:
-
-  - директория `2-ui/3-event-details` с файлом `index.md` - это раздел сайта "События в деталях", он будет доступен по URL `/event-details`.
-  - директория `2-ui/3-event-details/6-drag-and-drop` с файлом `article.md` содержит статью "Мышь: Drag'n'Drop`, доступную по URL `/drag-and-drop`.
-  - директория `2-ui/3-event-details/6-drag-and-drop/slider` с файлом `task.md` содержит задачу с названием "Слайдер", доступную по адресу `/task/slider`.
-
-<blockquote>
-Заметим, что хотя структура директорий вложенная — URL-адреса "плоские". То есть, для URL берётся только название самой глубокой директории, без родителей: https://learn.javascript.ru/event-details, https://learn.javascript.ru/drag-and-drop и т.п. Это сделано специально, чтобы удобно было упорядочивать учебник, переносить статьи без изменения URL.
-</blockquote>
-
-Ресурсы и примеры, необходимые для статьи, раздела или задачи, находятся в её директории. На них можно ссылаться из материала.
-
-Все исправления и замечания, оформленные в виде Pull Request, будут учтены.
+Assets required for the material reside in the same folder.
diff --git a/archive/01-hello-world/1-hello-alert/solution.md b/archive/01-hello-world/1-hello-alert/solution.md
new file mode 100644
index 00000000..e69de29b
diff --git a/archive/01-hello-world/1-hello-alert/solution.view/index.html b/archive/01-hello-world/1-hello-alert/solution.view/index.html
new file mode 100644
index 00000000..45e6744b
--- /dev/null
+++ b/archive/01-hello-world/1-hello-alert/solution.view/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    alert( "I'm JavaScript!" );
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/01-hello-world/1-hello-alert/task.md b/archive/01-hello-world/1-hello-alert/task.md
new file mode 100644
index 00000000..afed6a91
--- /dev/null
+++ b/archive/01-hello-world/1-hello-alert/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# Show an alert
+
+Create a page that shows a message "I'm JavaScript!".
+
+Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
+
+[demo src="solution"]
+
diff --git a/archive/01-hello-world/article.md b/archive/01-hello-world/article.md
new file mode 100644
index 00000000..bfab9428
--- /dev/null
+++ b/archive/01-hello-world/article.md
@@ -0,0 +1,92 @@
+# Hello, world!
+
+About 98% of the tutorial is core Javascript, that is platform-independant. So you'll be able to learn how to use Node.JS and other things based on that knowledge.
+
+But we need something like a "base environment" to run our scripts, and browser is probably a good choice.
+
+So we'll start with attaching a script to the webpage. For other environments like Node.JS there are other ways to run it.
+
+[cut]
+
+[todo remove defer/async from here and move to 2nd part?]
+
+## The "script" tag
+
+[todo need this? and special (need it too?)]
+```smart header="What if I want to move faster?"
+In the case if you've developed with JavaScript already or have a lot of experience in another language, you can skip detailed explanatins and jump to <info:javascript-specials>. There you can find an essense of important features.
+
+If you have enough time and want to learn things in details then read on :)
+```
+
+JavaScript programs can be inserted in any place of HTML with the help of the `<script>` tag.
+
+For instance:
+
+```html run height=100
+<!DOCTYPE HTML>
+<html>
+
+<body>
+
+  <p>Before the script...</p>
+
+*!*
+  <script>
+    alert( 'Hello, world!' );
+  </script>
+*/!*
+
+  <p>...After the script.</p>
+
+</body>
+
+</html>
+```
+
+```online
+You can run the example clicking on a "Play" button in it's right-top corner.
+```
+
+The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
+
+Please note the execution sequence:
+
+1. Browser starts to parse the document and display the page.
+2. When the browser meets `<script>`, it switches to the JavaScript execution mode. In this mode it executes the script.
+3. The `alert` command shows a message and pauses the execution.
+4. Note that at this moment a part of the page before the script is shown already.
+5. When the script is finished, it gets back to the HTML-mode, and *only then* it shows the rest of the document.
+
+![Rendering order](hello-world-render.png)
+
+A visitor won't see the content after the script until it is executed. In other words, a `<script>` tag blocks rendering.
+
+## The modern markup
+
+The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in the old code:
+
+ The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
+
+ : The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
+
+ The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
+  : This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.
+
+Comments before and after scripts.
+: In really ancient books and guides, one may find comments inside `<script>`, like this:
+
+    ```html no-beautify
+    <script type="text/javascript"><!--
+        ...
+    //--></script>
+    ```
+
+    These comments were supposed to hide the code from an old browser that did't understand a `<script>` tag. But for all browsers born in the past 15+ years that's not an issue. I only mention it here, because it serves as a pointer. If you see that in a code somewhere -- it's probably really old and probably not worth looking into.
+
+## Summary
+
+- We can use a `<script>` tag to add JavaScript code to the page.
+- The `type` and `language` attributes are not required.
+- A `<script>` tag blocks page rendering. Later we'll see how to evade that where needed.
+
diff --git a/archive/01-hello-world/hello-world-render.png b/archive/01-hello-world/hello-world-render.png
new file mode 100644
index 00000000..ffe81069
Binary files /dev/null and b/archive/01-hello-world/hello-world-render.png differ
diff --git a/archive/01-hello-world/hello-world-render@2x.png b/archive/01-hello-world/hello-world-render@2x.png
new file mode 100644
index 00000000..c4411027
Binary files /dev/null and b/archive/01-hello-world/hello-world-render@2x.png differ
diff --git a/archive/02-external-script/1-hello-alert-ext/alert.js b/archive/02-external-script/1-hello-alert-ext/alert.js
new file mode 100644
index 00000000..4de72597
--- /dev/null
+++ b/archive/02-external-script/1-hello-alert-ext/alert.js
@@ -0,0 +1 @@
+alert("I'm JavaScript!");
\ No newline at end of file
diff --git a/archive/02-external-script/1-hello-alert-ext/index.html b/archive/02-external-script/1-hello-alert-ext/index.html
new file mode 100644
index 00000000..10895f8f
--- /dev/null
+++ b/archive/02-external-script/1-hello-alert-ext/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script src="alert.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/02-external-script/1-hello-alert-ext/solution.md b/archive/02-external-script/1-hello-alert-ext/solution.md
new file mode 100644
index 00000000..f42c41e6
--- /dev/null
+++ b/archive/02-external-script/1-hello-alert-ext/solution.md
@@ -0,0 +1,8 @@
+The HTML code:
+
+[html src="index.html"]
+
+For the file `alert.js` in the same folder:
+
+[js src="alert.js"]
+
diff --git a/archive/02-external-script/1-hello-alert-ext/task.md b/archive/02-external-script/1-hello-alert-ext/task.md
new file mode 100644
index 00000000..fe38de40
--- /dev/null
+++ b/archive/02-external-script/1-hello-alert-ext/task.md
@@ -0,0 +1,9 @@
+importance: 5
+
+---
+
+# Show an alert with an external script
+
+Take the solution of the previous task <info:task/hello-alert>. Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
+
+Open the page, ensures that the alert works.
diff --git a/archive/02-external-script/2-async-defer-first/solution.md b/archive/02-external-script/2-async-defer-first/solution.md
new file mode 100644
index 00000000..0513e5fc
--- /dev/null
+++ b/archive/02-external-script/2-async-defer-first/solution.md
@@ -0,0 +1,5 @@
+Answers:
+
+1. The first is `big.js`, that's a normal sequence for external `<script>` tags.
+2. The first is `small.js`, because `async` makes script behave independently of each other and the page. The first to loads runs first.
+3. The first is `big.js`, because "deferred" scripts keep relative execution order.
diff --git a/archive/02-external-script/2-async-defer-first/task.md b/archive/02-external-script/2-async-defer-first/task.md
new file mode 100644
index 00000000..90093a4c
--- /dev/null
+++ b/archive/02-external-script/2-async-defer-first/task.md
@@ -0,0 +1,29 @@
+importance: 4
+
+---
+
+# Which script executes first?
+
+In the questions below, there are two scripts: `small.js` and `big.js`.
+
+If we assume that `small.js` loads much faster compared to `big.js` -- which script executes first?
+
+```html
+<script src="big.js"></script>
+<script src="small.js"></script>
+```
+
+What if we add `async`?
+
+```html
+<script async src="big.js"></script>
+<script async src="small.js"></script>
+```
+
+What if we switch to `defer`?
+
+```html
+<script defer src="big.js"></script>
+<script defer src="small.js"></script>
+```
+
diff --git a/archive/02-external-script/article.md b/archive/02-external-script/article.md
new file mode 100644
index 00000000..786fb276
--- /dev/null
+++ b/archive/02-external-script/article.md
@@ -0,0 +1,251 @@
+# External scripts
+
+If we have a lot of JavaScript code, we can it put it into a separate file.
+
+The script file is attached to HTML like this:
+
+```html
+<script src="/path/to/script.js"></script>
+```
+
+Here `/path/to/script.js` is an absolute path to the file with the script (from the site root).
+
+It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"` from the current folder.
+
+We can give a full URL al well, for instance:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
+```
+
+To attach several scripts, use multiple tags:
+
+```html
+<script src="/js/script1.js"></script>
+<script src="/js/script2.js"></script>
+…
+```
+
+```smart
+As a rule, only simplest scripts are put into HTML. More complex ones reside in separate files.
+
+The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache).
+
+After it, other pages which want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
+
+That saves traffic and makes pages faster.
+```
+
+````warn header="If `src` is set, the script content is ignored."
+A single `<script>` tag may not have both an `src` and the code inside.
+
+This won't work:
+
+```html
+<script *!*src*/!*="file.js">
+  alert(1); // the content is ignored, because src is set
+</script>
+```
+
+We must choose: either it's an external `<script src="…">` or a regular `<script>` with code.
+
+The example above can be split into two scripts to work:
+
+```html
+<script src="file.js"></script>
+<script>
+  alert(1);
+</script>
+```
+````
+
+## Asynchronous scripts: defer/async
+
+Browser loads and shows HTML gradually as it comes. That's clearly noticeable on the slow internet connection. The browser doesn't wait for the page to load fully. It shows the part that has been loaded already, and then adds content to it as it loads.
+
+As we noted before, when the browser meets a `<script>` tag, it must execute it first and after that show the rest of the page.
+
+For example, in the code below -- until all rabbits are counted, the bottom `<p>` is not shown:
+
+```html run height=100
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <p>Let's count:</p>
+
+*!*
+  <script>
+    alert( 'The 1st rabbit!' );
+    alert( 'The 2nd rabbit!' );
+    alert( 'The 3rd rabbit!' );
+  </script>
+*/!*
+
+  <p>Rabbits counted!</p>
+
+</body>
+</html>
+```
+
+The behavior is called "synchronous". Usually it causes no problems, but there's an important consequence.
+
+**If a script is external, then until the browser downloads and executes it, a visitor has to wait.**
+
+So, in this document, until `big.js` loads and executes, the `<body>` content is hidden:
+
+```html
+<html>
+<head>
+*!*
+  <script src="big.js"></script>
+*/!*
+</head>
+<body>
+  This text is not shown until the browser executes big.js.
+</body>
+</html>
+```
+
+The question is -- do we really want the visitor to wait until the script finishes?
+
+Most of time, we don't.
+
+Sometimes, a script may contain a very important code that really must be loaded before the rest of the page is parsed (and the scripts below executed). But that's only sometimes.
+
+Usually a visitor should be able to see the page while the script is loading. That's especially true for sites with an important content (like the tutorial) -- even if some interfaces are yet inactive (scripts not loaded yet), the visitor can read the text and navigate.
+
+There are situations when such blocking is even dangerous. For example, when we attach a script from the banner system, or a 3rd-party integration code.
+
+Like this:
+
+```html run height=100
+Wait. The text below will shown up only after the script executes.
+
+<!-- this banner script takes time to load -->
+<script src="/article/external-script/banner.js?speed=0"></script>
+
+<p>…Important information!</p>
+```
+
+It's just wrong that the rest of the page is not shown until the banner is loaded. And what if their server is overloaded and responds slowly? Our visitors will have wait even more, maybe even leave for  another, faster site.
+
+So, how to "fix" the blocking behavior?
+
+Our first attempt could be to put all such scripts to the bottom of the `<body>`, after all content.
+
+But the solution is not perfect:
+
+1. The script won't start loading until the HTML loads. If the HTML is large, then the delay may be significant. We'd like the browser to start loading a script early, but still do not block the page.
+2. If there are many scripts at the bottom of the page, then they queue up. Browser executes only one `<script>` tag in one moment. Please note that it tries to downloads scripts in parallel (for better network utilization), but the execution order is still strictly one after another. So, the first script can block the rest if it's slow. That's not always welcome: some scripts, like ads and web analytics scripts should run independantly and immediately as they load, not block each other. 
+
+And here come the attributes `async` and `defer`.
+
+The `async` attribute.
+: The script is executed asynchronously. In other words, when the browser meets `<script async src="...">`, it does not stop showing the page. It just initiates script loading and goes on. When the script loads -- it runs.
+
+The `defer` attribute.
+: The script with `defer` also executes asynchronously, like async. But there are two essential differences:
+
+1. The browser guarantees to keep the relative order of "deferred" scripts.
+2. A "deferred" script always executes after the HTML-document is fully loaded.
+
+
+Let's modify the "blocking script" example that we've seen before, adding `async`:
+
+```html run height=100
+Wait. The text belown will shown up only after the script executes.
+
+<!-- This banner script take some time to load... But nobody cares. -->
+<script *!*async*/!* src="/article/external-script/banner.js?speed=0"></script>
+
+<p>…Important information!</p>
+```
+
+Now if we run it, we'll see that the whole document is displayed immediately, and the external script runs when it loads.
+
+Let's see more examples with `defer` and `async` to clearly understand the similarities and the differences.
+
+Both attributes allow the browser to show the page without waiting for the script to load. But...
+
+1. Deferred scripts keep the relative order, while async scripts do not.
+
+    For example, in the code below (with `async`) there are two scripts. The one which loads first will run first.
+
+    ```html
+    <script src="1.js" async></script>
+    <script src="2.js" async></script>
+    ```
+
+    If `2.js` is bigger than `1.js`, it may happen that `2.js` will run before `1.js`. That's normal. Async scripts are totally independent.
+
+    And in the code below `defer` is used, which forces browser to keeps execution order. Even if `2.js` loads first, it waits and executes after `1.js`:
+
+    ```html
+    <script src="1.js" defer></script>
+    <script src="2.js" defer></script>
+    ```
+
+    This feature of "deferred" scripts is important when `2.js` relies on the result of `1.js` and we must be sure that the order is determined.
+
+2. A script with `defer` always waits for the HTML-document to fully load. The `async` script runs immediately as it loads.
+
+    For instance, when the document is large, like:
+
+    ```html
+    <script src="async.js" async></script>
+    <script src="defer.js" defer></script>
+
+    A long long text. Many words.
+    ...
+    ```
+
+    ...Here `async.js` executes when it loads -- possibly, before the document is fully loaded. In contrast, `defer.js` always waits for the full document to be ready.
+
+    So, if a script doesn't need the rest of the document (like a web counter), then `async` is superb. And in another case a script may need the whole document to do some work with it. Then `defer` is preferable.
+
+
+```smart header="Either `async` or `defer`"
+We can't use both `defer` and `async` on a single script. If we do that, `async` takes precedence, `defer` is ignored.
+```
+
+```warn header="Attributes `async/defer` are only for external scripts"
+The attributes `async/defer` work only when set on a script with `src`.
+
+On a script without `src` like <code>&lt;script&gt;...&lt;/script&gt;</code>, they will be ignored.
+```
+
+
+## Summary
+
+- Scripts in an external file can be inserted on the page via `<script src="path"></script>`.
+- The browser doesn't show the content below the script until it executes. Unless the script has `async` or `defer` attributes.
+- Both `async` and `defer` allow the browser to start script loading and then continue to parse/show the page. They only work on external scripts.
+- The difference is that `defer` keeps the relative script order and always executes after the document is fully loaded. In contrast, `async` script executes when it loads, without any conditions.
+
+Before inserting an external `<script src="…">` tag, we should always consider the side-effect of blocking the page rendering. Especially if it's a 3rd-party script. And if we don't want that, then `defer/async` can come in handy.
+
+````smart header="Running ahead..."
+For an advanced reader who already knows how to add new tags on the page using DOM: dynamic `<script>` tags behave as `async`. In other words, they run as they load, independantly.
+
+But we can adjust that. If we set `script.async = false`, then such scripts are run in the load of insertion. That's a way to keep the relative order for dynamically added tags.
+
+For example:
+```js
+function addScript(src){
+  let script = document.createElement('script');
+  script.src = src;
+*!*
+  script.async = false;
+*/!*
+  document.head.appendChild(script);
+}
+
+addScript('1.js'); // all these scripts will start loading immediately
+addScript('2.js'); // but execute in the order of insertion
+addScript('3.js'); // that is: 1 -> 2 -> 3
+```
+
+We'll surely cover dynamic tags and page manipulation in detail later, in the second part of the tutorial.
+````
+
diff --git a/archive/02-external-script/banner.js b/archive/02-external-script/banner.js
new file mode 100644
index 00000000..6569ffd5
--- /dev/null
+++ b/archive/02-external-script/banner.js
@@ -0,0 +1 @@
+alert("Banner loaded!");
diff --git a/archive/06-events-and-timing-in-depth/article.md b/archive/06-events-and-timing-in-depth/article.md
new file mode 100644
index 00000000..f7068803
--- /dev/null
+++ b/archive/06-events-and-timing-in-depth/article.md
@@ -0,0 +1,306 @@
+
+# Sync and async events
+
+JavaScript is a single-threaded language: only one script may execute at a given moment of time.
+
+Other activities like rendering, downloading etc may be managed by separate threads. For instance, JavaScript may execute while the browser is downloading a file, that's normal. But it is impossible that two event handlers or two `setTimeout`-scheduled function execute simultaneously.
+
+There is a [Web Workers](http://www.w3.org/TR/workers) standard which defines the support for multiple JavaScript *workers* -- subprocesses that may execute in parallel with the main code, but their abilities are limited. In the browser workers don't have access to DOM, so again we come to a single "main" JavaScript thread.
+
+## Asynchronous events   
+
+Most events are asynchronous.
+
+When an asynchronous event occurs, it gets into the *Event queue*.
+
+The browser has inner loop, called *Event Loop*, which checks the queue and processes events, executes functions etc.
+
+For example, if the browser is busy processing your `onclick`, and another event happens in the background, it is appended to the queue. When the `onclick` handler is complete, the queue is checked and the script is executed.
+
+Calls scheduled by `setTimeout/setInterval` are also passed through the event queue, so that they wait until the JavaScript engine gets free.
+
+
+## Synchronous events   
+
+There are events which don't use the event queue. They are called *synchronous events* and work immediately even when inside other handlers.</b>
+
+
+### DOM mutation events are synchronous.   
+
+In the example below, the `onclick` handler changes an attribute of the link, which has a `DOMAttrModified(onpropertychange for IE)` listener.
+
+[summary]
+Synchronous mutation events are processed immediately during `onclick`.
+[/summary]
+
+Click the link to see:
+[html autorun height=auto]
+<a href="#">Click me!</a>
+
+<script>
+let a = document.body.children[0]
+
+a.onclick = function() {
+  alert('in onlick')
+  this.setAttribute('href', 'lala')
+  alert('out onclick')
+  return false
+}
+
+function onpropchange() {
+  alert('onpropchange')
+}
+
+if (a.addEventListener) { // FF, Opera
+  a.addEventListener('DOMAttrModified', onpropchange, false)
+}
+if (a.attachEvent) { // IE
+  a.attachEvent('onpropertychange', onpropchange)
+}
+</script>
+[/html]
+
+The `click` processing order:
+<ol>
+<li>`alert('in onclick')` works.</li>
+<li>The attribute is changed and the DOM mutation event is processed synchronously, immediately triggering `onchange`. It outputs `alert('onpropchange')`.</li>
+<li>The rest of `onclick` executes, leading to `alert('out onclick')`.</li>
+</ol>
+
+
+### Nested DOM events are synchronous.   
+
+[summary]
+There are methods which trigger an immediate event, like `elem.focus()`. These events are also processed in a synchronous manner.
+[/summary]
+
+Run the example below and click on the button. Notice that `onfocus`
+doesn't wait `onclick` to complete, it works immediately.
+
+[html autorun height=auto]
+<input type="button" value="click me">
+<input type="text">
+
+<script>
+  let button = document.body.children[0]
+  let text = document.body.children[1]
+
+  button.onclick = function() {
+    alert('in onclick')
+
+    text.focus()
+
+    alert('out onclick')
+  }
+
+  text.onfocus = function() {
+    alert('onfocus')
+    text.onfocus = null  //(*)
+  }
+</script>
+[/html]
+
+In the example above, the alert order is in <code>onclick-&gt;focus-&gt;out onclick</code>, that clearly demonstrates the synchronous behavior.
+
+[smart]
+The line labelled (*) is required, because `alert(message)` focuses on the message window. When it is disposed, the browser refocuses back.
+
+So without (*) the `focus` would be triggered one extra time after the alert.
+[/smart]
+
+[summary]
+Events are also processed immediately when triggered from JavaScript by `dispatchEvent/fireEvent`.
+[/summary]
+
+Usually event handlers are executed one by one. So we assume that one handler finishes before the other starts.
+
+**Synchronous events break this one-by-one rule, that may can cause side-effects.**
+
+For example, the `onfocus` handler may assume that `onclick` has completed the job.
+
+There are two ways to fix it:
+<ol>
+<li>Move `text.focus()` to the end of the `onclick` code.</li>
+<li>Wrap `text.focus()` into `setTimeout(.., 0)`:
+[js]
+button.onclick = function() {
+  alert(1)
+  setTimeout(function() { text.focus() }, 0)
+  alert(2)
+}
+[/js]
+</li>
+</ol>
+
+The concrete way is chosen according to your architecture.
+
+
+## JavaScript execution and rendering   
+
+[summary]In most browsers, rendering and JavaScript use single event queue. It means that while JavaScript is running, no rendering occurs.[/summary]
+
+Check it on the demo below. **When you press `run`, the browser may halt for some time**, because it changes `div.style.backgroundColor` from #A00000 to #FFFFFF.
+
+In most browsers, you see nothing until the script finishes, or until the browser pauses it with a message that 'a script is running too long'.
+
+The exception is Opera.
+
+[html run]
+<div style="width:200px;height:50px;background-color:#A00000"></div>
+
+<input type="button" onclick="run()" value="run()">
+
+<script>
+function run() {
+  let div = document.getElementsByTagName('div')[0]
+  for(let i=0xA00000;i<0xFFFFFF;i++) {
+    div.style.backgroundColor = '#'+i.toString(16)
+  }
+}
+</script>
+[/html]
+
+In Opera, you may notice `div` is redrawn. Not every change causes a repaint, probably because of Opera internal scheduling. That's because event queues for rendering and JavaScript are different in this browser.
+
+In other browsers the repaint is postponed until the JavaScript finishes.
+
+Again, the implementation may be different, but generally **the nodes are marked as "dirty" (want to be recalculated and redrawn), and repaint is queued**. Or, the browser may just look for dirty nodes after every script and process them.
+
+[smart header="Immediate reflow"]
+The browser contains many optimizations to speedup rendering and painting. Generally, it tries to postpone them until the script is finished, but some actions require nodes to be rerendered immediately.
+
+For example:
+[js]
+elem.innerHTML = 'new content'
+alert(elem.offsetHeight)  // <-- rerenders elem to get offsetHeight
+[/js]
+
+In the case above, the browser has to perform relayouting to get the height.
+But it doesn't have to repaint `elem` on the screen.
+
+Sometimes other dependant nodes may get involved into calculations. This process is called *reflow* and may consume lots of resources if script causes it often.
+
+Surely, there's much more to talk about rendering. It will be covered by a separate article [todo].
+[/smart]
+
+
+## Modal and synchronous calls   
+
+[summary]Modal and synchronous calls like `alert` pause the JavaScript thread.
+
+That causes related activities to freeze.
+[/summary]
+
+The example below demonstrates it.
+
+<ol>
+<li>Press "Run". The `setInterval`-based animation will start and and `alert` button will appear.</li>
+<li>Press the button, note that the animation stops.</li>
+</ol>
+
+<input type="button" onclick="alert('Hello!')" value="alert('Hello!')  [ main window ]">
+[html run height=60]
+<div style="height:20px;width:0px;background-color:green"></div>
+<script>
+let timer = setInterval(function() {
+  let style = document.getElementsByTagName('div')[0].style
+  style.width = (parseInt(style.width)+2)%400 + 'px'
+}, 30)
+
+</script>
+<input type="button" onclick="alert('Hello!')" value="alert('Hello!')  [ iframe ]">
+<input type="button" onclick="clearInterval(timer)" value="clearInterval(timer)">
+[/html]
+
+When you press `alert('Hello!')`, the `alert` blocks JavaScript execution and blocks the whole UI thread. That's how `alert`, `confirm` and `prompt` work. And there is only one thread. So, **`setTimeout/setInterval` can't execute while the thread is blocked.**
+
+
+### Opera: `iframes` exception.   
+
+[summary]Usually, `iframes` run in the same thread with the page. [/summary]
+
+But there is an exception called Opera. **Run the example above in Opera** and press alert in the <u>main window</u>. The iframe animation will continue!
+That's because the example is actually running in an iframe.
+
+Other browsers use single thread for whole tab, so the iframe animation is paused there.
+
+
+
+## Script taking too long and heavy jobs   
+
+JavaScript can be heavy.
+
+In this case, the browser may hangup for a moment or come with a warning "Script is taking too long".
+
+We'd want to evade that. It can be done by split the job into parts which get scheduled after each other.
+
+Then there is a "free time" for the browser to respond between parts. It is can render and react on other events. Both the visitor and the browser are happy.
+
+The background color in the example below is changed once per tick. So the browser has the time to render it, and there are no hangups. Changes are applied incrementally.
+
+Press the run button on the example to start.
+[html run]
+<div style="width:200px;height:50px;background-color:#100"></div>
+
+<input type="button" onclick="run()" value="run()">
+<input type="button" onclick="stop()" value="stop()">
+
+<script>
+let timer
+
+function run() {
+  let div = document.getElementsByTagName('div')[0]
+  let i=0x100000
+
+  function func() {
+    timer = setTimeout(func, 0)
+    div.style.backgroundColor = '#'+i.toString(16)
+    if (i++ == 0xFFFFFF) stop()
+  }
+
+*!*
+  timer = setTimeout(func, 0)
+*/!*
+}
+
+function stop() {
+  clearInterval(timer)
+}
+</script>
+[/html]
+
+The internal order:
+<ol>
+<li>`setTimeout` appends the `func` call to the event queue.</li>
+<li>The new call is scheduled on the next tick.</li>
+<li>The func executes and changes the `div` which appends a repaint request to the queue.</li>
+<li>The function finishes. The browser takes the next event from the queue which is repaint and executes it. Then it waits the next tick to execute one more `func` call (see step 2).</li>
+<li>Repeated until `stop()`</li>
+</ol>
+
+A delay may be increased from 0 to 100 ms, depending on your needs. The longer delay leads to less CPU load.
+
+[smart header="Evade the 'script is running for too long' warning"]
+As an important side-effect, splitting the long job into parts which are executed by `setTimeout` helps to fix browser hangups and evade warnings.
+
+For example, modern syntax highlighters employ such technique. When a visitor opens a large text, they highlight a part of it then call something like `setTimeout(highlightNext, 50)` which highlights the next part etc.
+
+It would hangup otherwise, because the syntax highlighting takes time.
+[/smart]
+
+
+
+## Summary   
+
+Most browsers use single thread for UI and JavaScript, which is blocked by synchronous calls. So, JavaScript execution blocks the rendering.
+
+Events are processed asynchronously with the exception of DOM events.
+
+The `setTimeout(..,0)` trick is very useful. It allows to:
+<ul>
+<li>Let the browser render current changes.</li>
+<li>Evade the "script is running too long" warning.</li>
+<li>Change the execution flow.</li>
+</ul>
+
+Opera is special in many places when it comes to timeouts and threading.
diff --git a/archive/1-class-property/article.md b/archive/1-class-property/article.md
deleted file mode 100644
index 34572c52..00000000
--- a/archive/1-class-property/article.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Секретное свойство [[Class]]
-
-Для встроенных объектов есть одна "секретная" возможность узнать их тип, которая связана с методом `toString`. 
-
-Во всех встроенных объектах есть специальное свойство `[[Class]]`, в котором хранится информация о его типе или конструкторе.
-
-Оно взято в квадратные скобки, так как это свойство -- внутреннее. Явно получить его нельзя, но можно прочитать его "в обход", воспользовавшись методом `toString` из `Object`.
-
-[cut]
-
-## Получение [[Class]]
-
-Вернёмся к примеру, который видели раньше:
-
-```js
-//+ run
-var obj = {};
-alert( obj ); // [object Object]
-```
-
-**В выводе стандартного `toString` для объектов внутри `[object ...]` указано как раз значение `[[Class]]`.**
-
-Для обычного объекта это как раз и есть `"Object"`, но если бы такой `toString` запустить для даты, то будет `[object Date]`, для массивов -- `[object Array]` и т.п.
-
-К сожалению или к счастью, но большинство встроенных объектов в JavaScript имеют свой собственный метод `toString`: для массивов он выводит элементы через запятую, для дат -- строчное представление и так далее.
-
-То есть, просто вызов `[1,2,3].toString()` вернёт нам `1,2,3` и никакой информации про `[[Class]]`.
-
-Поэтому для получения `[[Class]]` мы одолжим функцию `toString` у стандартного объекта и запустим её в контексте тех значений, для которых нужно получить тип. В этом нам поможет метод `call`:
-
-```js
-//+ run
-var toClass = {}.toString; // (1)
-
-var arr = [1, 2];
-alert( toClass.call(arr) ); // (2) [object Array]
-
-var date = new Date;
-alert( toClass.call(date) ); // [object Date]
-
-var type = toClass.call(date).slice(8, -1); // (3)
-alert( type ); // Date
-```
-
-Разберем происходящее более подробно.
-
-<ol>
-<li>Можно переписать эту строку в две:
-
-```js
-var obj = {};
-var toClass = obj.toString;
-```
-
-Иначе говоря, мы создаём пустой объект `{}` и копируем ссылку на его метод `toString` в переменную `toClass`.
-
-**Для получения `[[Class]]` нужна именно внутренняя реализация `toString` стандартного объекта `Object`, другая не подойдёт.**</li>
-<li>Вызываем скопированный метод в контексте нужного объекта `obj`. 
-
-Мы могли бы поступить проще -- одолжить метод под другим названием:
-
-```js
-//+ run
-var arr = [1, 2];
-arr.toClass = {}.toString;
-
-alert( arr.toClass() ); // [object Array]
-```
-
-...Но зачем копировать лишнее свойство в объект? Синтаксис `toClass.call(arr)` делает то же самое, поэтому используем его.
-</li>
-<li>Всё, класс получен. При желании можно убрать обёртку `[object ...]`, взяв подстроку вызовом `slice(8,-1)`.</li>
-</ol>
-
-Метод также можно использовать с примитивами:
-
-```js
-//+ run
-alert( {}.toString.call(123) ); // [object Number]
-alert( {}.toString.call("строка") ); // [object String]
-```
-
-[warn header="Вызов `{}.toString` в консоли может выдать ошибку"]
-При тестировании кода в консоли вы можете обнаружить, что если ввести в командную строку `{}.toString.call(...)` -- будет ошибка. С другой стороны, вызов `alert( {}.toString... )` -- работает.
-
-Эта ошибка возникает потому, что фигурные скобки `{ }` в основном потоке кода интерпретируются как блок. Интерпретатор читает `{}.toString.call(...)` так:
-
-```js
-//+ no-beautify
-{ } // пустой блок кода
-.toString.call(...) // а что это за точка в начале? не понимаю, ошибка!
-```
-
-Фигурные скобки считаются объектом, только если они находятся в контексте выражения. В частности, оборачивание в скобки `( {}.toString... )` тоже сработает нормально.
-[/warn]
-
-## Итого
-
-<ul>
-<li>Свойство `[[Class]]` позволяет получить тип для встроенных объектов. Далее мы будем рассматривать создание своих объектов через функцию-конструктор, с ними `[[Class]]` не работает.</li>
-<li>Для доступа к `[[Class]]` используется `{}.toString.call(obj).slice(8, -1)`.</li>
-</ul>
-
-Обычно в JavaScript используется "утиная" типизация. Свойство `[[Class]]` -- самое надёжное средство проверки типа встроенных объектов, но обычно утиной типизации вполне хватает.
\ No newline at end of file
diff --git a/archive/2-eval-calculator-errors/solution.md b/archive/2-eval-calculator-errors/solution.md
new file mode 100644
index 00000000..c564d3ee
--- /dev/null
+++ b/archive/2-eval-calculator-errors/solution.md
@@ -0,0 +1,34 @@
+Вычислить любое выражение нам поможет `eval`:
+
+```js run
+alert( eval("2+2") ); // 4
+```
+
+Считываем выражение в цикле `while(true)`. Если при вычислении возникает ошибка -- ловим её в `try..catch`.
+
+Ошибкой считается, в том числе, получение `NaN` из `eval`, хотя при этом исключение не возникает. Можно бросить своё исключение в этом случае.
+
+Код решения:
+
+```js run demo
+let expr, res;
+
+while (true) {
+  expr = prompt("Введите выражение?", '2-');
+  if (expr == null) break;
+
+  try {
+    res = eval(expr);
+    if (isNaN(res)) {
+      throw new Error("Результат неопределён");
+    }
+
+    break;
+  } catch (e) {
+    alert( "Ошибка: " + e.message + ", повторите ввод" );
+  }
+}
+
+alert( res );
+```
+
diff --git a/archive/2-eval-calculator-errors/task.md b/archive/2-eval-calculator-errors/task.md
new file mode 100644
index 00000000..b317d52e
--- /dev/null
+++ b/archive/2-eval-calculator-errors/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+#  Eval-калькулятор с ошибками [todo: NO EVAL YET]
+
+Напишите интерфейс, который принимает математическое выражение (в `prompt`) и результат его вычисления через `eval`.
+
+**При ошибке нужно выводить сообщение и просить переввести выражение**.
+
+Ошибкой считается не только некорректное выражение, такое как `2+`, но и выражение, возвращающее `NaN`, например `0/0`.
+
+[demo]
+
diff --git a/archive/2-events-and-timing-depth/article.md b/archive/2-events-and-timing-depth/article.md
new file mode 100644
index 00000000..b56243f0
--- /dev/null
+++ b/archive/2-events-and-timing-depth/article.md
@@ -0,0 +1,172 @@
+# Порядок обработки событий
+
+События могут возникать не только по очереди, но и "пачкой" по много сразу. Возможно и такое, что во время обработки одного события возникают другие, например пока выполнялся код для `onclick` -- посетитель нажал кнопку на клавиатуре (событие `keydown`).
+
+Здесь мы разберём, как браузер обычно работает с одновременно возникающими событиями и какие есть исключения из общего правила.
+
+[cut]
+
+## Главный поток
+
+В каждом окне выполняется только один *главный* поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM.
+
+Он выполняет команды последовательно, может делать только одно дело одновременно и блокируется при выводе модальных окон, таких как `alert`.
+
+```smart header="Дополнительные потоки тоже есть"
+Есть и другие, служебные потоки, например, для сетевых коммуникаций.
+
+Поэтому скачивание файлов может продолжаться пока главный поток ждёт реакции на `alert`. Но управлять служебными потоками мы не можем.
+```
+
+```smart header="Web Workers"
+Существует спецификация <a href="http://www.w3.org/TR/workers/">Web Workers</a>, которая позволяет запускать дополнительные JavaScript-процессы(workers).
+
+Они могут обмениваться сообщениями с главным процессом, но у них свои переменные, и работают они также сами по себе.
+
+Такие дополнительные процессы не имеют доступа к DOM, поэтому они полезны, преимущественно, при вычислениях, чтобы загрузить несколько ядер/процессоров одновременно.
+```
+
+## Очередь событий
+
+Произошло одновременно несколько событий или во время работы одного случилось другое -- как главному потоку обработать это?
+
+Если главный поток прямо сейчас занят, то он не может срочно выйти из середины одной функции и прыгнуть в другую. А потом третью. Отладка при этом могла бы превратиться в кошмар, потому что пришлось бы разбираться с совместным состоянием нескольких функций сразу.
+
+Поэтому используется альтернативный подход.
+
+**Когда происходит событие, оно попадает в очередь.**
+
+Внутри браузера непрерывно работает "главный внутренний цикл", который следит за состоянием очереди и обрабатывает события, запускает соответствующие обработчики и т.п.
+
+**Иногда события добавляются в очередь сразу пачкой.**
+
+Например, при клике на элементе генерируется несколько событий:
+
+1. Сначала `mousedown` -- нажата кнопка мыши.
+2. Затем `mouseup` -- кнопка мыши отпущена и, так как это было над одним элементом, то дополнительно генерируется `click` (два события сразу).
+
+````online
+В действии:
+
+```html autorun height=150 no-beautify
+<textarea rows="8" cols="40" id="area">Кликни меня
+</textarea>
+
+<script>
+  area.onmousedown = function(e) { this.value += "mousedown\n"; this.scrollTop = this.scrollHeight; };
+  area.onmouseup = function(e) { this.value += "mouseup\n"; this.scrollTop = this.scrollHeight; };
+  area.onclick = function(e) { this.value += "click\n"; this.scrollTop = this.scrollHeight; };
+</script>
+```
+````
+
+Таким образом, при нажатии кнопки мыши в очередь попадёт событие `mousedown`, а при отпускании -- сразу два события: `mouseup` и `click`. Браузер обработает их строго одно за другим: `mousedown` -> `mouseup` -> `click`.
+
+При этом каждое событие из очереди обрабатывается полностью отдельно от других.
+
+## Вложенные (синхронные) события
+
+Обычно возникающие события "становятся в очередь".
+
+Но в тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас.
+
+Рассмотрим в качестве примера событие `onfocus`.
+
+### Пример: событие onfocus
+
+Когда посетитель фокусируется на элементе, возникает событие `onfocus`. Обычно оно происходит, когда посетитель кликает на поле ввода, например:
+
+```html run height=80 autorun
+<p>При фокусе на поле оно изменит значение.</p>
+<input type="text" onfocus="this.value = 'Фокус!'" value="Кликни меня">
+```
+
+Но ту же фокусировку можно вызвать и явно, вызовом метода `elem.focus()`:
+
+```html run
+<input type="text" id="elem" onfocus="this.value = 'Фокус!'">
+
+<script>
+*!*
+  // сфокусируется на input и вызовет обработчик onfocus
+  elem.focus();
+*/!*
+</script>
+```
+
+В главе <info:focus-blur> мы познакомимся с этим событием подробнее, а пока -- нажмите на кнопку в примере ниже.
+
+При этом обработчик `onclick` вызовет метод `focus()` на текстовом поле `text`. Код обработчика `onfocus`, который при этом запустится, сработает синхронно, прямо сейчас, до завершения `onclick`.
+
+```html autorun height=80 no-beautify
+<input type="button" id="button" value="Нажми меня">
+<input type="text" id="text" size="60">
+
+<script>
+
+  button.onclick = function() {
+    text.value += ' ->в onclick ';
+
+    text.focus(); // вызов инициирует событие onfocus
+
+    text.value += ' из onclick-> ';
+  };
+
+  text.onfocus = function() {
+    text.value += ' !focus! ';
+  };
+</script>
+```
+
+При клике на кнопке в примере выше будет видно, что управление вошло в `onclick`, затем перешло в `onfocus`, затем вышло из `onclick`.
+
+```warn header="Исключение в IE"
+Так ведут себя все браузеры, кроме IE.
+
+В нём событие `onfocus` -- всегда асинхронное, так что будет сначала полностью обработан клик, а потом -- фокус. В остальных -- фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу.
+```
+
+## Делаем события асинхронными через setTimeout(...,0)
+
+А что, если мы хотим, чтобы *сначала* закончилась обработка `onclick`, а потом уже произошла обработка `onfocus` и связанные с ней действия?
+
+Можно добиться и этого.
+
+Один вариант -- просто переместить строку `text.focus()` вниз кода обработчика `onclick`.
+
+Если это неудобно, можно запланировать `text.focus()` чуть позже через `setTimeout(..., 0)`, вот так
+
+```html autorun height=80
+<input type="button" id="button" value="Нажми меня">
+<input type="text" id="text" size="60">
+
+<script>
+  button.onclick = function() {
+    text.value += ' ->в onclick ';
+
+*!*
+    setTimeout(function() {
+      text.focus(); // сработает после onclick
+    }, 0);
+*/!*
+
+    text.value += ' из onclick-> ';
+  };
+
+  text.onfocus = function() {
+    text.value += ' !focus! ';
+  };
+</script>
+```
+
+Такой вызов обеспечит фокусировку через минимальный "тик" таймера, по стандарту равный 4 мс. Обычно такая задержка не играет роли, а необходимую асинхронность мы получили.
+
+## Итого
+
+- JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы <a href="http://www.w3.org/TR/workers/">Web Workers</a>, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM.
+- Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.
+- Синхронными являются вложенные события,  инициированные из кода.
+- Чтобы сделать событие гарантированно асинхронным, используется вызов через `setTimeout(func, 0)`.
+
+Отложенный вызов через `setTimeout(func, 0)` используется не только в событиях, а вообще -- всегда, когда мы хотим, чтобы некая функция `func` сработала после того, как текущий скрипт завершится.
+
diff --git a/archive/2-request-with-auth/solution.md b/archive/2-request-with-auth/solution.md
deleted file mode 100644
index 23ca3e88..00000000
--- a/archive/2-request-with-auth/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Решение: <a href="/zip/tutorial/ajax/xhr/get.zip">get.zip</a>
\ No newline at end of file
diff --git a/archive/2-request-with-auth/task.md b/archive/2-request-with-auth/task.md
deleted file mode 100644
index 25395567..00000000
--- a/archive/2-request-with-auth/task.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Запрос с авторизацией
-
-[importance 5]
-
-Создайте функцию `get(url, password)`, которая отправляет GET-запрос на `url` и передаёт `password` в качестве значения HTTP-заголовка `Authorization`.
-
-Она должна выводить `responseText`. Если же сервер вернул ошибку -- то выводить "Ошибка" и добавлять информацию из `status` и `statusText`.
-
-Примеры ошибок:
-<ul>
-<li>404 -- неправильный `url`.</li>
-<li>403 -- отсутствует или неверен заголовок `Authorization`.</li>
-</ul>
-
-Заготовку вы можете скачать здесь: <a href="/zip/tutorial/ajax/xhr/get-src.zip">get-src.zip</a>. Серверный код написан так, что возвращает успешный результат при запросе на адрес `'info'` с паролем `'password'`. 
diff --git a/archive/3-jquery-stub/1-jquery-intro/article.md b/archive/3-jquery-stub/1-jquery-intro/article.md
deleted file mode 100644
index 6d78279c..00000000
--- a/archive/3-jquery-stub/1-jquery-intro/article.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Введение
-
-Эта глава содержит основную информацию, которая нужна, чтобы при помощи jQuery работать с документом. 
-
-Я также постараюсь изложить в ней структуру методов и основные особенности jQuery, которые не очевидны из документации.
-
-**Глава находится "в работе". Это означает, что раскрыты далеко не все темы, а то, что раскрыто, является скорее очерком, который постепенно обрастает "мясом" разъяснений и задач.**
-
-
-[cut]
-## О библиотеке jQuery
-
-[jQuery](http://jquery.com) -- библиотека, которая позволяет делать код короче, а также устраняет наиболее одиозные кросс-браузерные различия.
-
-Она не содержит встроенных архитектурных решений и, таким образом, не навязывает свой стиль. Просто делает код короче. За это её и любим.
-
-## Подключаем jQuery
-
-Библиотеку jQuery можно скачать себе на диск с сайта [](http://jquery.com), а можно -- вставить в документ, используя известные интернет адреса:
-
-<ul>
-<li>По адресу [](https://code.jquery.com/jquery-latest.js) -- доступна всегда последняя версия</li>
-<li>С сети Google: [](https://developers.google.com/speed/libraries/devguide?hl=ru#jquery) можно загрузить любую из не слишком старых версий. Синтаксис такой: `src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"`, где `1.8.3` -- версия, причём можно указать её приблизительно: `1.8` означает последнюю версию вида `1.8.*`, а `1` -- последнюю версию вида `1.*`. Файл `jquery.min.js` обозначает сжатый код, а `jquery.js` -- несжатый, для удобства отладки.</li>
-</ul>
-
-Например, подключим на страницу последнюю версию jQuery в несжатом виде и проверим её работу:
-
-```html
-<!--+ run -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<script>
-  alert( typeof $ ); // если jQuery загрузилась -- выведет function
-</script>
-```
-
-Или так:
-
-```html
-<!--+ run -->
-<script src="https://code.jquery.com/jquery-latest.js"></script>
-
-<script>
-  alert( typeof $ ); // если jQuery загрузилась -- выведет function
-</script>
-```
-
diff --git a/archive/3-jquery-stub/2-jquery-search/article.md b/archive/3-jquery-stub/2-jquery-search/article.md
deleted file mode 100644
index c908669f..00000000
--- a/archive/3-jquery-stub/2-jquery-search/article.md
+++ /dev/null
@@ -1,295 +0,0 @@
-# jQuery: поиск элементов
-
-Когда-то давным давно, когда деревья были большими, один молодой парень по имени <a href="http://ejohn.org/">Джон Ресиг</a> решил создать библиотеку для поиска элементов в DOM.
-[cut]
-
-## Немного истории
-
-Браузеры тогда не давали возможности искать по CSS-селекторам, поэтому библиотеку назвали "jQuery" (**J**avaScript **Query**). 
-
-Поиск получился хорошо, и Джон стал прикручивать к библиотеке новые возможности, и со временем jQuery стала такой, как мы видим её сейчас. 
-
-[smart header="Sizzle"]
-...А функционал поиска со временем был выделен в отдельный проект: [движок Sizzle](http://sizzlejs.com/).
-
-Это позволяет взять от jQuery только поиск и встроить в другую библиотеку. Например, фреймворк [Dojo Toolkit](http://dojotoolkit.org) можно собрать со своим поиском, а можно и с Sizzle.
-[/smart] 
-
-## Поиск в jQuery
-
-"Сердцем" jQuery является функция `$()`. Все вызовы делаются через `$`. Это самая обычная функция, которая объявлена библиотекой. Как мы помним, символ `"$"` является допустимым символом для имён в JavaScript. 
-
-Простейший поиск элементов выглядит так:
-
-```js
-var result = $('...CSS-селектор...');
-```
-
-Например, `$("div a")` -- ссылки `a` внутри `div`. 
-
-Возможны и более сложные запросы, например:
-
-```js
-var list = $('li > a:odd:not([href^="http://"])');
-// расшифровка: нечётные (:odd) ссылки внутри li,
-// кроме тех (:not), у которых атрибут href начинается c http://
-```
-
-Вызов `$(селектор)` аналогичен `document.querySelectorAll(селектор)`, но:
-<ol>
-<li>Во-первых, поддерживается всеми браузерами, включая старые IE. Список CSS3-селекторов можно найти в главе [](/css-selectors).</li>
-<li>Во-вторых, jQuery предоставляет свои поисковые расширения, например псевдофильтр `:checked` -- выбранные элементы `input` и `option`, `:header` -- заголовок `h1..6`, и другие, более полный список которых доступен [в документации](http://api.jquery.com/category/selectors/).</li>
-</ol>
-
-[warn header="Поиск: `querySelectorAll` и Sizzle"]
-
-При выполнении выборки jQuery сначала определяет, имеет ли селектор простой вид, например `#menu` или `body`, то есть можно ли получить результат сразу вызовом `getElementById` или через `document.body`. Проверяется и ряд других простейших случаев. Если да -- отлично, если нет -- jQuery пытается получить результат вызовом `querySelectorAll`. 
-
-Если и `querySelectorAll` не срабатывает, то jQuery задействует свой поисковой движок [Sizzle](http://sizzlejs.com).
-
-Обычно "не срабатывает", когда либо браузер старый, либо запрос использует jQuery-расширения, не входящие в CSS3. Стоит ли говорить, что поиск по Sizzle обычно медленнее, чем встроенный браузерный? Поэтому к использованию jQuery-расширений стоит подходить осторожно и не применять их в "узких" местах.
-[/warn]
-
-## Перебор результатов
-
-Результатом поиска является jQuery-объект. Он похож на массив: в нём есть нумерованные элементы и `length`.
-
-jQuery-объект также называют "jQuery-коллекцией", "элементами, обёрнутыми в jQuery" и десятком других жаргонных терминов.
-
-Используем jQuery, чтобы выбрать все элементы по селектору `li > a` и перебрать их:
-
-```html
-<!--+ run -->
-<!-- подключить библиотеку -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<ul>
-  <li><a href="http://jquery.com">jQuery</a></li>
-  <li><a href="http://jqueryui.com">jQuery UI</a></li>
-  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
-</ul>
-
-<script>
-*!*
-  var links = $('li > a');
-*/!*
-
-  // перебор результатов
-  for (var i = 0; i < links.length; i++) {
-    alert( links[i].href );
-  }
-</script>
-```
-
-## Поиск внутри элемента
-
-Для поиска внутри какого-либо элемента -- можно передать его вторым аргументом `$`.
-
-Например, найдём все `a` внутри `#menu`:
-
-```js
-var menu = document.getElementById('menu');
-*!*
-$('a', menu); // поиск аналогичен menu.querySelectorAll('a')
-*/!*
-```
-
-Второй аргумент в этом случае называются "контекстом поиска". 
-
-В качестве контекста можно передать не только DOM-элемент, но и селектор:
-
-```js
-//+ no-beautify
-   
-$('a', '#menu' );
-```
-
-Также можно передать результат другого поиска:
-
-```js
-var menu = $('#menu');
-$('a', menu);
-```
-
-**Не важно, в каком виде мы хотим указать контекст: DOM-элемент, строка или результат поиска -- jQuery понимает всё.**
-
-А что, если контекст поиска содержит много элементов? Например, как будет работать запрос `$('a', 'li')`, если `<li>` в документе много? 
-
-Здесь все немного сложнее, но, тем не менее, интуитивно понятно.
-
-**Если в контексте много элементов, то поиск будет произведён в каждом из них. А затем результаты будут объединены.** 
-
-Повторы элементов при этом отфильтровываются, то есть два раза один и тот же элемент в результате не появится.
-
-Например, найдём `$('a', 'li')` в многоуровневом списке:
-
-```html
-<!--+ run -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<ul>
-  <li>
-    <a href="http://jquery.com">jQuery</a>
-    <ul>
-      <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
-    </ul>
-  </li>
-  <li><a href="http://sizzlejs.com">Sizzle</a></li>
-</ul>
-
-<script>
-*!*
-  var links = $('a', 'li');
-*/!*
-
-  for (var i = 0; i < links.length; i++) {
-    alert( i + ": " + links[i].href ); // 3 ссылки по очереди
-  }
-</script>
-```
-
-## Метод each 
-
-Для более удобного перебора у jQuery-коллекции есть метод [each](http://api.jquery.com/each/). Его синтаксис похож на [forEach](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) массива:
-
-```js
-.each(function(index, item))
-```
-
-Он выполняет для каждого элемента коллекции перед точкой функцию-аргумент, и передаёт ей номер `index` и  очередной элемент `item`.
-
-Используем его вместо `for`, чтобы перебрать коллекцию найденных ссылок:
-
-```js
-$('li a').each(function(i, a) {
-  alert( i + ": " + a.href );
-});
-```
-
-**У `.each` есть важная возможность, которой нет в `forEach`: возврат `false` из функции прекращает перебор.**
-
-Например:
-
-```html
-<!--+ run -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<a href="http://wikipedia.ru">Википедия</a>
-
-<ul>
-  <li><a href="http://jquery.com">jQuery</a></li>
-  <li><a href="http://sizzlejs.com">Sizzle</a></li>
-  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
-</ul>
-
-<script>
-  var links = $('li a'); // найти все ссылки на странице внутри LI
-
-*!*
-  links.each(function(i, a) {
-    alert( i + ': ' + a.innerHTML );
-
-    if (i == 1) return false; // стоп на элементе коллекции с индексом 1
-  });
-*/!*
-</script>
-```
-
-**При переборе `each`, текущий элемент передаётся как `this`.**
-
-Можно было бы использовать это, чтобы сделать код короче:
-
-```js
-$('li a').each(function(i) {
-  alert(i + ': ' + *!*this*/!*.innerHTML);
-
-  if (i == 1) return false; 
-});
-```
-
-## Получение конкретного элемента
-
-Даже если элемент найден только один, всё равно результатом поиска будет jQuery-коллекция.
-
-Если нам нужен один элемент из неё -- есть много способов его получить. Рассмотрим основные:
-
-<ol>
-<li>**Прямой доступ по номеру:**
-
-```js
-//+ run
-alert( $('body')[0] ); // BODY
-```
-
-Это -- самый быстрый и прямой доступ, он использует внутреннюю структуру jQuery-коллекции: элементы там хранятся по индексам. Но этим он нарушает принцип инкапсуляции. 
-
-Вообще-то, в jQuery есть специальные методы для получения элемента по номеру, и сейчас мы будем говорить о них.
-
-</li>
-<li>**Метод [get(индекс)](http://api.jquery.com/get/), работает так же, как прямой доступ:**
-
-```js
-//+ run
-alert( $('body').get(0) ); // BODY
-```
-
-Если элемента с таким номером нет -- вызов `get` возвратит `undefined`.
-
-</li>
-<li>**Метод [eq(индекс)](http://api.jquery.com/eq/) возвращает коллекцию из одного элемента -- с данным номером.**
-
-Он отличается от метода [get(индекс)](http://api.jquery.com/get/) и прямого обращения по индексу тем, что возвращает именно jQuery-коллекцию с одним элементом, а не сам элемент.
-
-Например:
-
-```js
-// DOM-элемент для первой ссылки
-$('a').get(0);
-
-// jQuery-объект из одного элемента: первой ссылки
-$('a').eq(0);
-```
-
-Во втором случае вызов `eq` создаёт новую jQuery-коллекцию, добавляет в нее нулевой элемент и возвращает. Это удобно, если мы хотим дальше работать с этим элементом, используя методы jQuery.
-
-Если элемента с таким номером нет -- `eq` возвратит пустую коллекцию.
-</li>
-</ol>
-
-
-## "Сцепление" вызовов
-
-Почти все методы jQuery-объекта возвращают jQuery-объект -- либо новый, либо тот  на котором вызваны.
-
-**Поэтому можно вызывать методы один за другим.**
-
-Это называют *"сцепление"* вызовов, или *"чейнинг"* (от англ. "chaining"):
-
-```js
-$('li a[href$=".pdf"]') // ссылки, оканчивающиеся на pdf
-*!*
-  .each(function() {
-*/!*
-    this.className = "pdf"; // дать им класс
-  })
-*!*
-  .each(function() {
-*/!*
-    alert( this.href ); // вывести
-  });
-```
-
-Для удобства чтения каждый новый вызов в чейнинге идёт с отступом и с новой строки.
-
-## Итого
-
-Для поиска элементов можно вызвать `$(CSS-селектор[, контекст])`. Результатом будет jQuery-объект, который можно:
-<ul>
-<li>Перебирать как массив.</li>
-<li>Перебирать методом [each](http://api.jquery.com/each/).</li>
-<li>Получить один элемент прямым доступом по индексу, либо вызовом [get](http://api.jquery.com/get/) или  [eq](http://api.jquery.com/eq/).</li>
-</ul>
-
-Для поиска используется, по возможности, `querySelectorAll`, либо если он не может обработать запрос -- встроенный движок Sizzle.
-
-
diff --git a/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md b/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md
deleted file mode 100644
index 290f6050..00000000
--- a/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-```js
-var result = $(elem).parents().addBack();
-```
-
diff --git a/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md b/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md
deleted file mode 100644
index 5571aa61..00000000
--- a/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Выберите всех родителей вместе с элементом
-
-[importance 5]
-
-Есть элемент `elem`. Выберите в jQuery всех его родителей и сам элемент. 
-
-Например, для `LI` из примера выше должна получиться коллекция `HTML, BODY, UL, LI`:
-
-```html
-<html>
-
-<body>
-  <ul>
-    <li>Текст</li>
-  </ul>
-</body>
-
-</html>
-```
-
-Код должен быть как можно короче.
\ No newline at end of file
diff --git a/archive/3-jquery-stub/3-jquery-traversal/article.md b/archive/3-jquery-stub/3-jquery-traversal/article.md
deleted file mode 100644
index c8930afd..00000000
--- a/archive/3-jquery-stub/3-jquery-traversal/article.md
+++ /dev/null
@@ -1,461 +0,0 @@
-# Навигация по jQuery-коллекции
-
-Мы умеем перебирать коллекцию, получать нужный элемент по номеру. Достаточно ли этого?
-
-Конечно нет! По коллекции нужно путешествовать. Получать детей, искать родителей, выбирать элементы по условию, и чтобы это было удобно. 
-[cut]
-
-## Шпаргалка по методам
-
-Методов для навигации по коллекции много. Их гораздо проще воспринять, если разбить на группы.
-
-Итак, на картинке ниже:
-<ul>
-<li>По центру -- действия с текущей коллекцией: фильтрация, добавление, изменение и т.п.</li>
-<li>Сверху -- методы для доступа к родителям.</li>
-<li>Снизу -- для поиска среди потомков.</li>
-<li>Слева/справа -- для поиска соседей.</li>
-</ul>
-
-[pre]
-<style>
-.jqt-td {
-  border: 2px solid #F79646;
-  text-align: center;
-  border-radius: 2px;
-}
-.jqt-table {
-  border-collapse: separate;
-  border-spacing: 10px 10px;
-}
-.jqt-table a {
-  color: blue;
-  margin: 0 2px;
-}
-</style>
-
-
-<table class="jqt-table">
-<tr>
-<td>&nbsp;</td>
-<td class="jqt-td">
-<a href="http://api.jquery.com/parent">parent</a>
-<a href="http://api.jquery.com/parents">parents</a>
-<a href="http://api.jquery.com/parentsUntil">parentsUntil</a><br>
-<a href="http://api.jquery.com/closest">closest</a>
-</td>
-<td>&nbsp;</td>
-</tr>
-<tr>
-<td class="jqt-td">
-<a href="http://api.jquery.com/prev">prev</a>
-<a href="http://api.jquery.com/prevAll">prevAll</a> 
-<a href="http://api.jquery.com/prevUntil">prevUntil</a><br>
-<a href="http://api.jquery.com/siblings">siblings</a>
-</td>
-<td class="jqt-td" style="border-color: red">
-<a href="http://api.jquery.com/filter">filter</a> 
-<a href="http://api.jquery.com/not">not</a>
-<a href="http://api.jquery.com/has">has</a><br>
-<a href="http://api.jquery.com/eq">eq</a> 
-<a href="http://api.jquery.com/first">first</a>
-<a href="http://api.jquery.com/last">last</a>
-<a href="http://api.jquery.com/slice">slice</a><br>
-<a href="http://api.jquery.com/is">is</a> 
-<a href="http://api.jquery.com/add">add</a>
-<a href="http://api.jquery.com/add">map</a>
-</td>
-<td class="jqt-td">
-<a href="http://api.jquery.com/next">next</a> 
-<a href="http://api.jquery.com/nextAll">nextAll</a> 
-<a href="http://api.jquery.com/nextUntil">nextUntil</a><br>
-<a href="http://api.jquery.com/siblings">siblings</a>
-</td>
-</tr>
-<tr>
-<td>&nbsp;</td>
-<td class="jqt-td">
-<a href="http://api.jquery.com/find">find</a><br>
-<a href="http://api.jquery.com/children">children</a> 
-<a href="http://api.jquery.com/contents">contents</a>
-</td>
-<td>&nbsp;</td>
-</tr>
-</table>
-[/pre]
-
-Так как методов много, то запомнить их все сложно, да и не нужно. Достаточно знать, какие есть, а при необходимости -- обратиться к этой странице или к [официальной документации](http://api.jquery.com/category/traversing/).
-
-У этих методов очень хорошие названия, они станут очевидны, как только мы их рассмотрим чуть подробнее.
-
-## По текущей коллекции
-
-<dl>
-<dt><a href="http://api.jquery.com/filter">filter(фильтр)</a>, <a href="http://api.jquery.com/not">not(фильтр)</a>, <a href="http://api.jquery.com/has">has(фильтр)</a></dt>
-<dd>Возвращают отфильтрованную коллекцию, содержащую только элементы...
-<ul>
-<li>для `filter` -- подходящие под фильтр,</li>
-<li>для `not` -- не подходящие под фильтр,</li>
-<li>для `has` -- содержащие потомка, подходящего под фильтр.</li>
-</ul>
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li>...</li>
-</ul>
-
-<script>
-  var list = $('li');
-
-  // вызовом css('color', ..) поставим цвет элементам:
-
-*!*
-  list.filter(':even').css('color', 'blue'); // ФИЛЬТР: чётные 
-  list.not(':even').css('color', 'green'); // НЕ чётные
-  list.has('em').css('background', 'pink'); // СОДЕРЖАТ em
-*/!*
-</script>
-```
-
-В качестве фильтра может быть использована также функция, принимающая элемент как `this` и возвращающая `true/false`:
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li>...</li>
-</ul>
-
-<script>
-  var list = $('li');
-
-  // ФИЛЬТР: первый ребёнок - текстовый узел
-*!*
-  var result = list.filter(function() {
-    return this.firstChild.nodeType == 3;
-  });
-*/!*
-
-  alert( result.length ); // 1, это последний LI
-</script>
-```
-
-</dd>
-<dt><a href="http://api.jquery.com/eq">eq(n)</a>, <a href="http://api.jquery.com/first">first</a>, <a href="http://api.jquery.com/last">last</a>, <a href="http://api.jquery.com/slice">slice(start, end)</a></dt>
-<dd>Возвращает новую коллекцию...
-<ul>
-<li>`eq(n)` -- с одним элементом по его номеру,</li>
-<li>`first/last` -- из первого/последнего элемента,</li>
-<li>`slice(start[, end])` -- из элементов с номера `start` до `end`.</li>
-</ul>
-</dd>
-<dt><a href="http://api.jquery.com/is">is(фильтр)</a></dt>
-<dd>Возвращает `true`, если *какой-нибудь* элемент из коллекции подходит под фильтр.
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li class="other">...</li>
-</ul>
-
-<script>
-  var list = $('ul').children();
-
-*!*
-  alert( list.is('li') ); // true
-  alert( list.is('.other') ); // true
-  alert( list.is(':hidden') ); // false
-*/!*
-</script>
-```
-
-</dd>
-<dt><a href="http://api.jquery.com/add">add(элементы)</a></dd>
-<dd>Возвращает новую коллекцию из элементов текущей и новых, по селектору.
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li class="other">...</li>
-</ul>
-
-<script>
-  var elems = $('ul');
-
-  // можно добавить элемент DOM
-  var li = document.getElementsByTagName('li')[0];
-*!*
-  elems = elems.add(li);
-*/!*
-  alert( elems.length ); // 2
-
-*!*
-  elems = elems.add('.other'); // можно - по селектору
-*/!*
-  alert( elems.length ); // 3
-
-*!*
-  elems = elems.add($('li')); // можно - коллекцию
-*/!*
-  alert( elems.length ); // 5, дубликаты удаляются
-</script>
-```
-
-Важно: эта функция не меняет текущую коллекцию, она создаёт новую из существующих и добавленных элементов.
-
-</dd>
-<dt><a href="http://api.jquery.com/add">map(функция)</a></dt>
-<dd>Этот метод стоит особняком. Он не меняет коллекцию, не ищет в ней, а пропускает её через функцию и возвращает результаты.
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li class="other">...</li>
-</ul>
-
-<script>
-  $('code')
-    .css('color', 'red') // подсветить CODE красным
-*!*
-    .map(function() {
-      return this.parentNode; // получить коллекцию родителей CODE
-    })
-*/!*
-    .css('color', 'green'); // подсветить их зелёным
-</script>
-```
-
-</dd>
-</dl>
-
-Заметим две приятные особенности:
-<ul>
-<li>Большинство методов, которые осуществляют фильтрацию, могут принимать как селектор так и фильтрующую функцию. jQuery любит функции.</li>
-<li>Большинство методов, которые принимают элементы, могут получать их в виде jQuery-коллекции или селектора. Главное, чтобы найти по этому можно было.</li>
-</ul>
-
-## По родителям
-
-<dl>
-<dt>[parent()](http://api.jquery.com/parent/), [parents(фильтр)](http://api.jquery.com/parents/), [parentsUntil(стоп, фильтр)](http://api.jquery.com/parentsUntil/)</dt>
-<dd>Родители -- один `parent`, все `parents(фильтр)` (с фильтром по селектору) и до определённого `parentsUntil(где остановиться, селектор для элементов)`.</dd>
-<dt>[closest(фильтр, элемент-контейнер)](http://api.jquery.com/closest/)</dt>
-<dd>Ищет одного, ближайшего, родителя, подходящего под селектор.
-
-Второй, необязательный, аргумент `элемент-контейнер`, если он передан, ограничивает поиск. jQuery будет идти вверх до тех пор, пока не встретит этот DOM-элемент.
-
-```html
-<!--+ run -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-<ul id="1">
-  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
-  <li><a href="http://sizzlejs.com">Sizzle</a></li>
-</ul>
-
-<script>
-  var link = $('a[href*="blog"]'); // ссылка, атрибут href содержит "blog"
-
-*!*
-  var ul = link.closest('ul'); // ближайший сверху UL
-*/!*
-  alert( ul[0].id ); // 1
-
-*!*
-  var li = $('li')[0];
-  ul = link.closest('ul', li); // ближайший сверху UL, но внутри LI
-*/!*
-  alert( ul.length ); // 0, нет таких
-</script>
-```
-
-</dd>
-</dl>
-
-## По потомкам
-
-<dl>
-<dt>[find(селектор)](http://api.jquery.com/find/)</dt>
-<dd>Ищет в потомках по селектору.
-
-```js
-// для каждого LI искать CODE среди потомков, вернуть их коллекцию
-$('li').find('code');
-```
-
-</dd>
-<dt>[children(селектор)](http://api.jquery.com/children/), [contents()](http://api.jquery.com/contents/)</dt>
-<dd>Выбирает детей по селектору, без аргументов -- всех детей:
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li class="other">...</li>
-</ul>
-
-<script>
-  $('li')
-*!*
-    .children('code') // вернуть всех детей LI, подходящих под селектор code  
-*/!*
-    .css('color', 'red'); // подсветить
-</script>
-```
-
-Метод [contents()](http://api.jquery.com/contents/) -- также возвращает детей, но в отличие от `children` -- узлы всех типов, включая текстовые и комментарии, а не только узлы-элементы.
-
-```html
-<!--+ jquery run -->
-<ul>
-  <li><code>filter</code>: <i>только подходящие</i>.</li>
-  <li><code>not</code>: <em>не подходящие</em>.</li>
-  <li><code>has</code>: <i>по потомкам</i>.</li>
-  <li class="other">...</li>
-</ul>
-
-<script>
-  $('li')
-*!*
-    .contents() // все узлы-дети LI
-*/!*
-    .map(function() { // обернуть текстовые узлы в скобки
-      if (this.nodeType == 3) this.data = "(" + this.data + ")"
-    });
-</script>
-```
-
-</dd>
-</dl>
-
-## По соседям
-
-<dl>
-<dt><a href="http://api.jquery.com/prev">prev()</a>, <a href="http://api.jquery.com/prevAll">prevAll(фильтр)</a>, <a href="http://api.jquery.com/prevUntil">prevUntil(элемент, фильтр)</a></dt>
-<dd>Получить левого соседа `prev`, всех левых соседей `prevAll` или всех левых соседей `prevUntil` до указанного (`элемент`), подходящих под фильтр.</dd>
-<dt><a href="http://api.jquery.com/next">next()</a>, <a href="http://api.jquery.com/nextAll">nextAll(фильтр)</a>, <a href="http://api.jquery.com/nextUntil">nextUntil(элемент, фильтр)</a></dt>
-<dd>То же самое, но правые соседи.</dd>
-<dt><a href="http://api.jquery.com/siblings">siblings()</a></dt>
-<dd>Получить коллекцию всех соседей.</dd>
-</dl>
-
-
-## Стек селекторов: методы end и addBack
-
-Все методы не влияют на текущую коллекцию, они создают и возвращают новую.
-
-При каждом новом поиске возвращается jQuery-объект с результатом.
-
-**Предыдущий jQuery-объект при этом не теряется, к нему всегда можно вернуться вызовом [end()](http://api.jquery.com/end/).**
-
-Посмотрим это на примере задачи. Допустим, мы нашли форму `$('form')` и хотим выбрать все чекбоксы в ней.
-
-Можно сделать это так:
-
-```js
-//+ no-beautify
-$('form')
-  .find(':checkbox')
-  .each(function() { ... }); // сделать что-то с элементами коллекции
-```
-
-...И теперь хотим поискать в этой же форме что-то ещё. 
-
-Самый очевидный способ это сделать -- сохранить `$('form')` в переменной:
-
-```js
-//+ no-beautify
-var form = $('form');
-
-form
-  .find(':checkbox')
-  .each(function() { ... });
-
-form
-  .find(':radio')
-  .each(function() { ... });
-```
-
-...Но на самом деле в этом нет необходимости.
-
-jQuery, при вызове `find` сохраняет предыдущую найденную коллекцию, к которой можно вернуться вызовом `end()`:
-
-```js
-//+ no-beautify
-$('form')
-  .find(':checkbox') // нашли чекбоксы внутри
-  .each(function() { ... }) // обработали
-*!*
-  .end() // вернулись обратно на форму
-*/!*
-  .find(':radio') // поискали другие элементы внутри..
-  .each(function() { ... }); // сделали с ними что-то ещё
-```
-
-**Метод [addBack(selector)](http://api.jquery.com/addBack/) добавляет элементы из предыдущей коллекции к текущей.**
- 
-Если указать селектор, то он отфильтрует их.
-
-Этот метод бывает очень удобен, когда какую-то операцию нужно сделать как с детьми, так и с самим элементом, например:
-
-```js
-//+ no-beautify
-$('ul')       // коллекция: UL
-  .children() // получить коллекцию LI
-  .addBack()  // добавить к ней сам UL
-  .each(...)   // теперь у нас коллекция LI и UL-родитель
-```
-
-Полный список методов вы найдёте в [разделе Traversing](http://api.jquery.com/category/traversing/) документации. При использовании jQuery, вы часто будете иметь с ними дело и отлично запомните.
-
-## Неэффективность jQuery
-
-Для ряда задач jQuery-методы поиска по коллекции неэффективны.
-
-Например, нужно найти первого потомка. Некоторые способы:
-
-```js
-elem.children(':first');
-elem.children().first();
-$(':first-child', elem);
-```
-
-Все эти способы неэффективны. Особенно первые два.
-
-<ol>
-<li>Первый проходит всех детей, по псевдо-фильтру выбирая нужного.</li>
-<li>Второй копирует детей в коллекцию, а потом получает из неё первый элемент.</li>
-<li>Третий запускает `querySelectorAll(':first-child)` (на самом деле там чуть сложнее, но не суть важно) в контексте `elem`. Здесь, с первого взгляда, нет копирования всех детей, но внутренний алгоритм браузера для выполнения `querySelectorAll` всё равно работает полным перебором. Впрочем, это будет намного быстрее, чем предыдущие решения.</li>
-</ol>
-
-Обычный же вызов `elem[0].children[0]` на порядки обгонит все вышеприведённые способы, особенно если детей много.
-
-Какой вывод из этого?
-
-**Там, где потеря в производительности некритична, используем jQuery -- для удобства. Это большинство случаев. Там, где она важна -- обращаемся к обычному DOM.**
-
-
-
-
-
-
-
-
-
diff --git a/archive/3-jquery-stub/4-jquery-dom/article.md b/archive/3-jquery-stub/4-jquery-dom/article.md
deleted file mode 100644
index c06e68a9..00000000
--- a/archive/3-jquery-stub/4-jquery-dom/article.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Методы для работы с DOM [в работе]
-
-jQuery-коллекции предоставляют полный набор методов для DOM-манипуляций. И кое-что сверху...
-
-[cut]
-
-## Классы и стили
-
-<ul>
-<li>addClass, hasClass, removeClass</li>
-</ul>
-
-attr
-prop
-css
-
-Таблица методов:
-
-
-
-<dl>
-<dt>.append(parent)</dt>
-<dd>Вставить последним потомком `parent`</dd>
-<dt>.prepend(parent)</dt>
-<dd>Вставить первым потомком `parent`</dd>
-<dt>.insertAfter(sibling)</dt>
-<dd>Вставить сразу после элемента `sibling`</dd>
-<dt>.insertBefore(sibling)</dt>
-<dd>Вставить сразу перед элементом `sibling`</dd>
-<dt>.remove()</dt>
-<dd>Удалить элемент из DOM, удалить связанные с ним данные и обработчики событий.</dd>
-<dt>.detach()</dt>
-<dd>Удалить элемент из DOM, не удаляя связанные с ним данные и обработчики.</dd>
-<dt>.empty()</dt>
-<dd>Удалить всех потомков вызовом remove</dd>
-
-</dl>
-
-Зеркальные методы:
-<ul>
-<li>append -> appendTo</li>
-<li>prepend -> prependTo</li>
-<li>insertAfter -> after</li>
-<li>insertBefore -> before</li>
-</ul>
-
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css
deleted file mode 100644
index 3b45c840..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css
+++ /dev/null
@@ -1,55 +0,0 @@
-#bagua-table th {
-  text-align: center;
-  font-weight: bold;
-}
-
-#bagua-table td {
-  width: 150px;
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: bottom;
-  padding-top: 5px;
-  padding-bottom: 12px;
-}
-
-#bagua-table .nw {
-  background-color: #999;
-}
-
-#bagua-table .n {
-  background-color: #03f;
-  color: #fff;
-}
-
-#bagua-table .ne {
-  background-color: #ff6;
-}
-
-#bagua-table .w {
-  background-color: #ff0;
-}
-
-#bagua-table .c {
-  background-color: #60c;
-  color: #fff;
-}
-
-#bagua-table .e {
-  background-color: #09f;
-  color: #fff;
-}
-
-#bagua-table .sw {
-  background-color: #963;
-  color: #fff;
-}
-
-#bagua-table .s {
-  background-color: #f60;
-  color: #fff;
-}
-
-#bagua-table .se {
-  background-color: #0c3;
-  color: #fff;
-}
\ No newline at end of file
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html
deleted file mode 100644
index a0e5d0d4..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link type="text/css" rel="stylesheet" href="bagua.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-</head>
-
-<body>
-
-  <table id="bagua-table">
-    <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
-    </tr>
-    <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
-      </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
-      </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
-      </td>
-    </tr>
-    <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
-      </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
-      </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
-      </td>
-    </tr>
-    <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
-      </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
-      </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
-      </td>
-    </tr>
-
-  </table>
-
-  <script>
-    var highlightedCell;
-
-    $('#bagua-table').on('click', 'td', function() {
-      if (highlightedCell) {
-        highlightedCell.css('background-color', '');
-      }
-      highlightedCell = $(this)
-        .css('background-color', 'red');
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css
deleted file mode 100644
index 3b45c840..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css
+++ /dev/null
@@ -1,55 +0,0 @@
-#bagua-table th {
-  text-align: center;
-  font-weight: bold;
-}
-
-#bagua-table td {
-  width: 150px;
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: bottom;
-  padding-top: 5px;
-  padding-bottom: 12px;
-}
-
-#bagua-table .nw {
-  background-color: #999;
-}
-
-#bagua-table .n {
-  background-color: #03f;
-  color: #fff;
-}
-
-#bagua-table .ne {
-  background-color: #ff6;
-}
-
-#bagua-table .w {
-  background-color: #ff0;
-}
-
-#bagua-table .c {
-  background-color: #60c;
-  color: #fff;
-}
-
-#bagua-table .e {
-  background-color: #09f;
-  color: #fff;
-}
-
-#bagua-table .sw {
-  background-color: #963;
-  color: #fff;
-}
-
-#bagua-table .s {
-  background-color: #f60;
-  color: #fff;
-}
-
-#bagua-table .se {
-  background-color: #0c3;
-  color: #fff;
-}
\ No newline at end of file
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html
deleted file mode 100644
index 7af879b5..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <link type="text/css" rel="stylesheet" href="bagua.css">
-</head>
-
-<body>
-
-  <table id="bagua-table">
-    <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
-    </tr>
-    <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
-      </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
-      </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
-      </td>
-    </tr>
-    <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
-      </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
-      </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
-      </td>
-    </tr>
-    <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
-      </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
-      </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
-      </td>
-    </tr>
-  </table>
-
-  <script>
-    var table = document.getElementById('bagua-table');
-
-    var highlightedCell;
-
-    table.onclick = function(event) {
-      event = event || window.event;
-      var target = event.target || event.srcElement;
-
-      while (target != table) {
-        if (target.nodeName == 'TD') {
-          highlight(target);
-          return;
-        }
-        target = target.parentNode;
-      }
-    }
-
-    function highlight(node) {
-      if (highlightedCell) {
-        highlightedCell.style.backgroundColor = '';
-      }
-      highlightedCell = node;
-      node.style.backgroundColor = 'red';
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md
deleted file mode 100644
index d6a3c7a0..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Перепишите на jQuery
-
-[importance 5]
-
-Перепишите делегирование на jQuery.
-
diff --git a/archive/3-jquery-stub/5-jquery-stub-article/article.md b/archive/3-jquery-stub/5-jquery-stub-article/article.md
deleted file mode 100644
index e9b923b6..00000000
--- a/archive/3-jquery-stub/5-jquery-stub-article/article.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# ... [в работе]
-
-Раздел не будет доступен еще некоторое время.
diff --git a/archive/3-jquery-stub/index.md b/archive/3-jquery-stub/index.md
deleted file mode 100644
index 90817524..00000000
--- a/archive/3-jquery-stub/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# jQuery [todo]
-
-Небольшой раздел. Самые основы jQuery. 
diff --git a/archive/3-reflow/article.md b/archive/3-reflow/article.md
deleted file mode 100644
index 7004cdf6..00000000
--- a/archive/3-reflow/article.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Reflow
-
-
-[iframe src="reflow"]
\ No newline at end of file
diff --git a/archive/3-reflow/reflow.view/index.html b/archive/3-reflow/reflow.view/index.html
deleted file mode 100644
index ac86c1c5..00000000
--- a/archive/3-reflow/reflow.view/index.html
+++ /dev/null
@@ -1,494 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <script>
-    function resize() {
-      // calculate -> set, repeat
-      var t = new Date();
-
-      for (var i = 0; i < firstRow.cells.length; i++) {
-        var td = firstRow.cells[i];
-        td.style.width = td.offsetWidth + 10 + 'px';
-      }
-
-      alert('Done in ' + (new Date - t));
-    }
-
-    function resize2() {
-      // optimizes against reflow
-      // 1. calculate -> repeat
-      // 2. set -> repeat
-      var t = new Date();
-
-      var widths = [];
-
-      for (var i = 0; i < firstRow.cells.length; i++) {
-        widths[i] = firstRow.cells[i].offsetWidth;
-      }
-
-      for (var i = 0; i < widths.length; i++) {
-        firstRow.cells[i].style.width = widths[i] + 10 + 'px';
-      }
-
-      alert('Done in ' + (new Date - t));
-    }
-  </script>
-
-</head>
-
-<body>
-
-  <table id="table" style="font-size:80%">
-    <tr id="firstRow">
-      <td>0:0</td>
-      <td>0:1</td>
-      <td>0:2</td>
-      <td>0:3</td>
-      <td>0:4</td>
-      <td>0:5</td>
-      <td>0:6</td>
-      <td>0:7</td>
-      <td>0:8</td>
-      <td>0:9</td>
-      <td>0:10</td>
-      <td>0:11</td>
-      <td>0:12</td>
-      <td>0:13</td>
-      <td>0:14</td>
-      <td>0:15</td>
-      <td>0:16</td>
-      <td>0:17</td>
-      <td>0:18</td>
-      <td>0:19</td>
-    </tr>
-    <tr>
-      <td>1:0</td>
-      <td>1:1</td>
-      <td>1:2</td>
-      <td>1:3</td>
-      <td>1:4</td>
-      <td>1:5</td>
-      <td>1:6</td>
-      <td>1:7</td>
-      <td>1:8</td>
-      <td>1:9</td>
-      <td>1:10</td>
-      <td>1:11</td>
-      <td>1:12</td>
-      <td>1:13</td>
-      <td>1:14</td>
-      <td>1:15</td>
-      <td>1:16</td>
-      <td>1:17</td>
-      <td>1:18</td>
-      <td>1:19</td>
-    </tr>
-    <tr>
-      <td>2:0</td>
-      <td>2:1</td>
-      <td>2:2</td>
-      <td>2:3</td>
-      <td>2:4</td>
-      <td>2:5</td>
-      <td>2:6</td>
-      <td>2:7</td>
-      <td>2:8</td>
-      <td>2:9</td>
-      <td>2:10</td>
-      <td>2:11</td>
-      <td>2:12</td>
-      <td>2:13</td>
-      <td>2:14</td>
-      <td>2:15</td>
-      <td>2:16</td>
-      <td>2:17</td>
-      <td>2:18</td>
-      <td>2:19</td>
-    </tr>
-    <tr>
-      <td>3:0</td>
-      <td>3:1</td>
-      <td>3:2</td>
-      <td>3:3</td>
-      <td>3:4</td>
-      <td>3:5</td>
-      <td>3:6</td>
-      <td>3:7</td>
-      <td>3:8</td>
-      <td>3:9</td>
-      <td>3:10</td>
-      <td>3:11</td>
-      <td>3:12</td>
-      <td>3:13</td>
-      <td>3:14</td>
-      <td>3:15</td>
-      <td>3:16</td>
-      <td>3:17</td>
-      <td>3:18</td>
-      <td>3:19</td>
-    </tr>
-    <tr>
-      <td>4:0</td>
-      <td>4:1</td>
-      <td>4:2</td>
-      <td>4:3</td>
-      <td>4:4</td>
-      <td>4:5</td>
-      <td>4:6</td>
-      <td>4:7</td>
-      <td>4:8</td>
-      <td>4:9</td>
-      <td>4:10</td>
-      <td>4:11</td>
-      <td>4:12</td>
-      <td>4:13</td>
-      <td>4:14</td>
-      <td>4:15</td>
-      <td>4:16</td>
-      <td>4:17</td>
-      <td>4:18</td>
-      <td>4:19</td>
-    </tr>
-    <tr>
-      <td>5:0</td>
-      <td>5:1</td>
-      <td>5:2</td>
-      <td>5:3</td>
-      <td>5:4</td>
-      <td>5:5</td>
-      <td>5:6</td>
-      <td>5:7</td>
-      <td>5:8</td>
-      <td>5:9</td>
-      <td>5:10</td>
-      <td>5:11</td>
-      <td>5:12</td>
-      <td>5:13</td>
-      <td>5:14</td>
-      <td>5:15</td>
-      <td>5:16</td>
-      <td>5:17</td>
-      <td>5:18</td>
-      <td>5:19</td>
-    </tr>
-    <tr>
-      <td>6:0</td>
-      <td>6:1</td>
-      <td>6:2</td>
-      <td>6:3</td>
-      <td>6:4</td>
-      <td>6:5</td>
-      <td>6:6</td>
-      <td>6:7</td>
-      <td>6:8</td>
-      <td>6:9</td>
-      <td>6:10</td>
-      <td>6:11</td>
-      <td>6:12</td>
-      <td>6:13</td>
-      <td>6:14</td>
-      <td>6:15</td>
-      <td>6:16</td>
-      <td>6:17</td>
-      <td>6:18</td>
-      <td>6:19</td>
-    </tr>
-    <tr>
-      <td>7:0</td>
-      <td>7:1</td>
-      <td>7:2</td>
-      <td>7:3</td>
-      <td>7:4</td>
-      <td>7:5</td>
-      <td>7:6</td>
-      <td>7:7</td>
-      <td>7:8</td>
-      <td>7:9</td>
-      <td>7:10</td>
-      <td>7:11</td>
-      <td>7:12</td>
-      <td>7:13</td>
-      <td>7:14</td>
-      <td>7:15</td>
-      <td>7:16</td>
-      <td>7:17</td>
-      <td>7:18</td>
-      <td>7:19</td>
-    </tr>
-    <tr>
-      <td>8:0</td>
-      <td>8:1</td>
-      <td>8:2</td>
-      <td>8:3</td>
-      <td>8:4</td>
-      <td>8:5</td>
-      <td>8:6</td>
-      <td>8:7</td>
-      <td>8:8</td>
-      <td>8:9</td>
-      <td>8:10</td>
-      <td>8:11</td>
-      <td>8:12</td>
-      <td>8:13</td>
-      <td>8:14</td>
-      <td>8:15</td>
-      <td>8:16</td>
-      <td>8:17</td>
-      <td>8:18</td>
-      <td>8:19</td>
-    </tr>
-    <tr>
-      <td>9:0</td>
-      <td>9:1</td>
-      <td>9:2</td>
-      <td>9:3</td>
-      <td>9:4</td>
-      <td>9:5</td>
-      <td>9:6</td>
-      <td>9:7</td>
-      <td>9:8</td>
-      <td>9:9</td>
-      <td>9:10</td>
-      <td>9:11</td>
-      <td>9:12</td>
-      <td>9:13</td>
-      <td>9:14</td>
-      <td>9:15</td>
-      <td>9:16</td>
-      <td>9:17</td>
-      <td>9:18</td>
-      <td>9:19</td>
-    </tr>
-    <tr>
-      <td>10:0</td>
-      <td>10:1</td>
-      <td>10:2</td>
-      <td>10:3</td>
-      <td>10:4</td>
-      <td>10:5</td>
-      <td>10:6</td>
-      <td>10:7</td>
-      <td>10:8</td>
-      <td>10:9</td>
-      <td>10:10</td>
-      <td>10:11</td>
-      <td>10:12</td>
-      <td>10:13</td>
-      <td>10:14</td>
-      <td>10:15</td>
-      <td>10:16</td>
-      <td>10:17</td>
-      <td>10:18</td>
-      <td>10:19</td>
-    </tr>
-    <tr>
-      <td>11:0</td>
-      <td>11:1</td>
-      <td>11:2</td>
-      <td>11:3</td>
-      <td>11:4</td>
-      <td>11:5</td>
-      <td>11:6</td>
-      <td>11:7</td>
-      <td>11:8</td>
-      <td>11:9</td>
-      <td>11:10</td>
-      <td>11:11</td>
-      <td>11:12</td>
-      <td>11:13</td>
-      <td>11:14</td>
-      <td>11:15</td>
-      <td>11:16</td>
-      <td>11:17</td>
-      <td>11:18</td>
-      <td>11:19</td>
-    </tr>
-    <tr>
-      <td>12:0</td>
-      <td>12:1</td>
-      <td>12:2</td>
-      <td>12:3</td>
-      <td>12:4</td>
-      <td>12:5</td>
-      <td>12:6</td>
-      <td>12:7</td>
-      <td>12:8</td>
-      <td>12:9</td>
-      <td>12:10</td>
-      <td>12:11</td>
-      <td>12:12</td>
-      <td>12:13</td>
-      <td>12:14</td>
-      <td>12:15</td>
-      <td>12:16</td>
-      <td>12:17</td>
-      <td>12:18</td>
-      <td>12:19</td>
-    </tr>
-    <tr>
-      <td>13:0</td>
-      <td>13:1</td>
-      <td>13:2</td>
-      <td>13:3</td>
-      <td>13:4</td>
-      <td>13:5</td>
-      <td>13:6</td>
-      <td>13:7</td>
-      <td>13:8</td>
-      <td>13:9</td>
-      <td>13:10</td>
-      <td>13:11</td>
-      <td>13:12</td>
-      <td>13:13</td>
-      <td>13:14</td>
-      <td>13:15</td>
-      <td>13:16</td>
-      <td>13:17</td>
-      <td>13:18</td>
-      <td>13:19</td>
-    </tr>
-    <tr>
-      <td>14:0</td>
-      <td>14:1</td>
-      <td>14:2</td>
-      <td>14:3</td>
-      <td>14:4</td>
-      <td>14:5</td>
-      <td>14:6</td>
-      <td>14:7</td>
-      <td>14:8</td>
-      <td>14:9</td>
-      <td>14:10</td>
-      <td>14:11</td>
-      <td>14:12</td>
-      <td>14:13</td>
-      <td>14:14</td>
-      <td>14:15</td>
-      <td>14:16</td>
-      <td>14:17</td>
-      <td>14:18</td>
-      <td>14:19</td>
-    </tr>
-    <tr>
-      <td>15:0</td>
-      <td>15:1</td>
-      <td>15:2</td>
-      <td>15:3</td>
-      <td>15:4</td>
-      <td>15:5</td>
-      <td>15:6</td>
-      <td>15:7</td>
-      <td>15:8</td>
-      <td>15:9</td>
-      <td>15:10</td>
-      <td>15:11</td>
-      <td>15:12</td>
-      <td>15:13</td>
-      <td>15:14</td>
-      <td>15:15</td>
-      <td>15:16</td>
-      <td>15:17</td>
-      <td>15:18</td>
-      <td>15:19</td>
-    </tr>
-    <tr>
-      <td>16:0</td>
-      <td>16:1</td>
-      <td>16:2</td>
-      <td>16:3</td>
-      <td>16:4</td>
-      <td>16:5</td>
-      <td>16:6</td>
-      <td>16:7</td>
-      <td>16:8</td>
-      <td>16:9</td>
-      <td>16:10</td>
-      <td>16:11</td>
-      <td>16:12</td>
-      <td>16:13</td>
-      <td>16:14</td>
-      <td>16:15</td>
-      <td>16:16</td>
-      <td>16:17</td>
-      <td>16:18</td>
-      <td>16:19</td>
-    </tr>
-    <tr>
-      <td>17:0</td>
-      <td>17:1</td>
-      <td>17:2</td>
-      <td>17:3</td>
-      <td>17:4</td>
-      <td>17:5</td>
-      <td>17:6</td>
-      <td>17:7</td>
-      <td>17:8</td>
-      <td>17:9</td>
-      <td>17:10</td>
-      <td>17:11</td>
-      <td>17:12</td>
-      <td>17:13</td>
-      <td>17:14</td>
-      <td>17:15</td>
-      <td>17:16</td>
-      <td>17:17</td>
-      <td>17:18</td>
-      <td>17:19</td>
-    </tr>
-    <tr>
-      <td>18:0</td>
-      <td>18:1</td>
-      <td>18:2</td>
-      <td>18:3</td>
-      <td>18:4</td>
-      <td>18:5</td>
-      <td>18:6</td>
-      <td>18:7</td>
-      <td>18:8</td>
-      <td>18:9</td>
-      <td>18:10</td>
-      <td>18:11</td>
-      <td>18:12</td>
-      <td>18:13</td>
-      <td>18:14</td>
-      <td>18:15</td>
-      <td>18:16</td>
-      <td>18:17</td>
-      <td>18:18</td>
-      <td>18:19</td>
-    </tr>
-    <tr>
-      <td>19:0</td>
-      <td>19:1</td>
-      <td>19:2</td>
-      <td>19:3</td>
-      <td>19:4</td>
-      <td>19:5</td>
-      <td>19:6</td>
-      <td>19:7</td>
-      <td>19:8</td>
-      <td>19:9</td>
-      <td>19:10</td>
-      <td>19:11</td>
-      <td>19:12</td>
-      <td>19:13</td>
-      <td>19:14</td>
-      <td>19:15</td>
-      <td>19:16</td>
-      <td>19:17</td>
-      <td>19:18</td>
-      <td>19:19</td>
-    </tr>
-  </table>
-
-  <input type="button" onclick="resize()" value="resize" />
-  <input type="button" onclick="resize2()" value="resize2" />
-
-
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/4-random-from-array/solution.md b/archive/4-random-from-array/solution.md
new file mode 100644
index 00000000..c07a93bc
--- /dev/null
+++ b/archive/4-random-from-array/solution.md
@@ -0,0 +1,12 @@
+We need to generate a random integer value from `0` to `arr.length-1`, and then take the element with that index.
+
+Here we go:
+
+```js run
+let arr = ["Apple", "Orange", "Pear", "Lemon"];
+
+let rand = Math.floor(Math.random() * arr.length);
+
+alert( arr[rand] );
+```
+
diff --git a/archive/4-random-from-array/task.md b/archive/4-random-from-array/task.md
new file mode 100644
index 00000000..c40a10c1
--- /dev/null
+++ b/archive/4-random-from-array/task.md
@@ -0,0 +1,11 @@
+importance: 3
+
+---
+
+# A random array value
+
+Write the code to `alert` a random value from the array:
+
+```js
+let arr = ["Apple", "Orange", "Pear", "Lemon"];
+```
diff --git a/archive/4-script-place-optimize/article.md b/archive/4-script-place-optimize/article.md
deleted file mode 100644
index 235bc872..00000000
--- a/archive/4-script-place-optimize/article.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Оптимизация скриптов: dom, async, defer [в работе]
-
-Скрипт может быть размещен в любом месте HTML. 
-
-Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.
-
-[cut]
-
-
-## Перемещение скрипта в HEAD
-
-Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это `HEAD`:
-
-```html
-<!--+ run height=100 -->
-<html>
-
-<head>
-*!*
-  <script>
-    function count_rabbits() {
-      for (var i = 1; i <= 3; i++) {
-        alert( "Кролик номер " + i );
-      }
-    }
-  </script>
-*/!*
-</head>
-
-<body>
-
-  <h3>Нажмите на кнопку, чтобы начать</h3>
-
-  <input type="button" onclick="count_rabbits()" value="Считать кроликов!" />
-
-</body>
-
-</html>
-```
-
-## Скрипты в конце BODY   
-
-Скрипт может быть и в конце документа, например перед закрывающим `</body>`. В таком случае он выполняется *после* отрисовки страницы. 
-
-[compare]
-+ Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.
-- Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки.
-[/compare]
-
-[smart header="Рендеринг и CSS"]
-По стандарту, CSS-стили могут располагаться только внутри тега `HEAD`, и они тоже блокируют отображение. 
-
-В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают.
-[/smart]
-
-## Итоги
-
-Скрипты могут быть внутренними и подключаться напрямую в тег `SCRIPT` и внешними, в виде отдельных файлов, подключаемых с помощью атрибута `src="path/to/file.js"` тега `SCRIPT`
-
-В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в `HEAD` стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.
-
-Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец `BODY` или ставят им атрибуты `async` или `defer`. В таком случае страница будет показана до загрузки скрипта. 
-
-Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово.
\ No newline at end of file
diff --git a/archive/5-drag-and-drop-objects/article.md b/archive/5-drag-and-drop-objects/article.md
new file mode 100644
index 00000000..74c58d1d
--- /dev/null
+++ b/archive/5-drag-and-drop-objects/article.md
@@ -0,0 +1,514 @@
+# Мышь: Drag'n'Drop более глубоко
+
+В [предыдущей статье](/drag-and-drop) мы рассмотрели основы Drag'n'Drop. Здесь мы разберём дополнительные "тонкие места" и приёмы реализации, которые возникают на практике.
+
+Почти все javascript-библиотеки реализуют Drag'n'Drop так, как написано (хотя бывает что и менее эффективно).
+
+Зная, что и как, вы сможете легко написать свой код переноса или поправить, адаптировать существующую библиотеку под себя.
+
+Этот материал не строго обязателен для изучения, он специфичен именно для Drag'n'Drop.
+
+[cut]
+
+## Документ
+
+Как пример задачи -- возьмём документ с иконками браузера ("объекты переноса"), которые можно переносить в компьютер ("цель переноса"):
+
+- Элементы, которые можно переносить (иконки браузеров), помечены классом `draggable`.
+- Элементы, на которые можно положить (компьютер), имеют класс `droppable`.
+
+```html
+<img src="chrome.png" class="*!*draggable*/!*">
+<img src="firefox.png" class="*!*draggable*/!*">
+<img src="ie.png" class="*!*draggable*/!*">
+<img src="opera.png" class="*!*draggable*/!*">
+<img src="safari.png" class="*!*draggable*/!*">
+
+<p>Браузер переносить сюда:</p>
+
+<img src="computer.gif" class="*!*droppable*/!*">
+```
+
+Работающий пример с переносом:
+
+[iframe border=1 src="dragDemo" height=280 link edit]
+
+Далее мы рассмотрим, как делается фреймворк для таких переносов, а в перспективе -- и для более сложных.
+
+Требования:
+
+- Поддержка большого количества элементов без "тормозов".
+- Продвинутые возможности по анимации переноса.
+- Удобная обработка успешного и неудачного переноса.
+
+## Начало переноса
+
+Чтобы начать перенос элемента, мы должны отловить нажатие левой кнопки мыши на нём. Для этого используем событие `mousedown`... И, конечно, делегирование.
+
+Переносимых элементов может быть много. В нашем документе-примере это всего лишь несколько иконок, но если мы хотим переносить элементы списка или дерева, то их может быть 100 штук и более.
+
+Поэтому повесим обработчик `mousedown` на контейнер, который содержит переносимые элементы, и будем определять нужный элемент поиском ближайшего `draggable` вверх по иерархии от `event.target`.
+
+В качестве контейнера здесь будем брать `document`, хотя это может быть и любой элемент.
+
+Найденный `draggable`-элемент сохраним в свойстве `dragObject.elem` и начнём двигать.
+
+Код обработчика `mousedown`:
+
+```js
+let dragObject = {};
+
+document.onmousedown = function(e) {
+
+  if (e.which != 1) { // если клик правой кнопкой мыши
+    return; // то он не запускает перенос
+  }
+
+  let elem = e.target.closest('.draggable');
+
+  if (!elem) return; // не нашли, клик вне draggable-объекта
+
+  // запомнить переносимый объект
+  dragObject.elem = elem;
+
+  // запомнить координаты, с которых начат перенос объекта
+  dragObject.downX = e.pageX;
+  dragObject.downY = e.pageY;
+}
+```
+
+```warn header="Не начинаем перенос по `mousedown`"
+Ранее мы по `mousedown` начинали перенос.
+
+Но на самом деле нажатие на элемент вовсе не означает, что его собираются куда-то двигать. Возможно, на нём просто кликают.
+
+Это важное различие. Снимать элемент со своего места и куда-то двигать нужно только при переносе.
+
+Чтобы отличить перенос от клика, в том числе -- от клика, который сопровождается нечаянным перемещением на пару пикселей (рука дрогнула), мы будем запоминать в `dragObject`, какой элемент (`elem`) и где (`downX/downY`) был зажат, а начало переноса будем инициировать из `mousemove`, если он передвинут хотя бы на несколько пикселей.
+```
+
+## Перенос элемента
+
+Первой задачей обработчика `mousemove` является инициировать начало переноса, если элемент передвинули в зажатом состоянии.
+
+Ну а второй задачей -- отображать его перенос при каждом передвижении мыши.
+
+Схематично, обработчик будет иметь такой вид:
+
+```js
+document.onmousemove = function(e) {
+  if (!dragObject.elem) return; // элемент не зажат
+
+  if (!dragObject.avatar) { // элемент нажат, но пока не начали его двигать
+    ...начать перенос, присвоить dragObject.avatar = переносимый элемент
+  }
+
+  ...отобразить перенос элемента...
+}
+```
+
+Здесь мы видим новое свойство `dragObject.avatar`. При начале переноса "аватар" делается из элемента и сохраняется в свойство `dragObject.avatar`.
+
+**"Аватар" -- это DOM-элемент, который перемещается по экрану.**
+
+Почему бы не перемещать по экрану сам `draggable`-элемент? Зачем, вообще, нужен аватар?
+
+Дело в том, что иногда сам элемент передвигать неудобно, например потому, что он слишком большой. А удобно создать некоторое визуальное представление элемента, и его уже переносить. Аватар дает такую возможность.
+
+А в простейшем случае аватаром можно будет сделать сам элемент, и это не повлечёт дополнительных расходов.
+
+### Визуальное перемещение аватара
+
+Для того, чтобы отобразить перенос аватара, достаточно поставить ему `position: absolute` и менять координаты `left/top`.
+
+Для использования абсолютных координат относительно документа, аватар должен быть прямым потомком `BODY`.
+
+Следующий код готовит аватар к переносу:
+
+```js
+// в начале переноса:
+if (avatar.parentNode != document.body) {
+  document.body.appendChild(avatar); // переместить в BODY, если надо
+}
+avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими
+avatar.style.position = 'absolute';
+```
+
+... А затем его можно двигать:
+
+```js
+// при каждом движении мыши
+
+avatar.style.left = новая координата + 'px';
+avatar.style.top = новая координата + 'px';
+```
+
+Как вычислять новые координаты `left/top` при переносе?
+
+Чтобы элемент сохранял свою позицию под курсором, необходимо при нажатии запомнить его изначальный сдвиг относительно курсора, и сохранять его при переносе.
+
+![](shiftx.png)
+
+Этот сдвиг по горизонтали обозначен `shiftX` на рисунке выше. Аналогично, есть `shiftY`. Они вычисляются как расстояние между курсором и левой/верхней границей элемента при `mousedown`. Детали вычислений описаны в главе <info:drag-and-drop>.
+
+Таким образом, при `mousemove` мы будем назначать элементу координаты курсора с учетом сдвига `shiftX/shiftY`:
+
+```js
+avatar.style.left = e.pageX - shiftX + 'px';
+avatar.style.top = e.pageY - shiftY + 'px';
+```
+
+## Полный код mousemove
+
+Код `mousemove`, решающий задачу начала переноса и позиционирования аватара:
+
+```js
+document.onmousemove = function(e) {
+  if (!dragObject.elem) return; // элемент не зажат
+
+  if ( !dragObject.avatar ) { // если перенос не начат...
+
+    // посчитать дистанцию, на которую переместился курсор мыши
+    let moveX = e.pageX - dragObject.downX;
+    let moveY = e.pageY - dragObject.downY;
+    if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) {
+      return; // ничего не делать, мышь не передвинулась достаточно далеко
+    }
+
+    *!*dragObject.avatar = createAvatar(e)*/!*; // захватить элемент
+    if (!dragObject.avatar) {
+      dragObject = {}; // аватар создать не удалось, отмена переноса
+      return; // возможно, нельзя захватить за эту часть элемента
+    }
+
+    // аватар создан успешно
+    // создать вспомогательные свойства shiftX/shiftY
+    let coords = getCoords(dragObject.avatar);
+    dragObject.shiftX = dragObject.downX - coords.left;
+    dragObject.shiftY = dragObject.downY - coords.top;
+
+    *!*startDrag(e)*/!*; // отобразить начало переноса
+  }
+
+  // отобразить перенос объекта при каждом движении мыши
+  dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
+  dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
+
+  return false;
+}
+```
+
+Здесь используются две функции для начала переноса: `createAvatar(e)` и `startDrag(e)`.
+
+Функция `createAvatar(e)` создает аватар. В нашем случае в качестве аватара берется сам `draggable` элемент. После создания аватара в него записывается функция `avatar.rollback`, которая задает поведение при отмене переноса.
+
+Как правило, отмена переноса влечет за собой разрушение аватара, если это был клон, или возвращение его на прежнее место, если это сам элемент.
+
+В нашем случае для отмены переноса нужно запомнить старую позицию элемента и его родителя.
+
+```js
+function createAvatar(e) {
+
+  // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
+  let avatar = dragObject.elem;
+  let old = {
+    parent: avatar.parentNode,
+    nextSibling: avatar.nextSibling,
+    position: avatar.position || '',
+    left: avatar.left || '',
+    top: avatar.top || '',
+    zIndex: avatar.zIndex || ''
+  };
+
+  // функция для отмены переноса
+  avatar.rollback = function() {
+    old.parent.insertBefore(avatar, old.nextSibling);
+    avatar.style.position = old.position;
+    avatar.style.left = old.left;
+    avatar.style.top = old.top;
+    avatar.style.zIndex = old.zIndex
+  };
+
+  return avatar;
+}
+```
+
+Функция `startDrag(e)`, которую вызывает `mousemove`, если видит, что элемент в "зажатом" состоянии перенесли достаточно далеко, инициирует начало переноса и позиционирует аватар на странице:
+
+```js
+function startDrag(e) {
+  let avatar = dragObject.avatar;
+
+  document.body.appendChild(avatar);
+  avatar.style.zIndex = 9999;
+  avatar.style.position = 'absolute';
+}
+```
+
+## Окончание переноса
+
+Окончание переноса происходит по событию `mouseup`.
+
+Его обработчик можно поставить на аватаре, т.к. аватар всегда под курсором и `mouseup` происходит на нем. Но для универсальности и большей гибкости (вдруг мы захотим перемещать аватар *рядом* с курсором?) поставим его, как и остальные, на `document`.
+
+Задача обработчика `mouseup`:
+
+1. Обработать успешный перенос, если он идет (существует аватар)
+2. Очистить данные `dragObject`.
+
+Это дает нам следующий код:
+
+```js
+document.onmouseup = function(e) {
+  // (1) обработать перенос, если он идет
+  if (dragObject.avatar) {
+    *!*finishDrag(e)*/!*;
+  }
+
+  // в конце mouseup перенос либо завершился, либо даже не начинался
+  // (2) в любом случае очистим "состояние переноса" dragObject
+  dragObject = {};
+}
+```
+
+Для завершения переноса в функции `finishDrag(e)` нам нужно понять, на каком элементе мы находимся, и если над `droppable` -- обработать перенос, а нет -- откатиться:
+
+```js
+function finishDrag(e) {
+  let dropElem = *!*findDroppable(e)*/!*;
+
+  if (dropElem) {
+    ... успешный перенос ...
+  } else {
+    ... отмена переноса ...
+  }
+}
+```
+
+### Определяем элемент под курсором
+
+Чтобы понять, над каким элементом мы остановились -- используем метод [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint), который мы обсуждали в разделе [координаты](info:coordinates#elementFromPoint). Этот метод получает координаты *относительно окна* и возвращает самый глубокий элемент, который там находится.
+
+Функция `findDroppable(event)`, описанная ниже, использует его и находит самый глубокий элемент с атрибутом `droppable` под курсором мыши:
+
+```js
+// возвратит ближайший droppable или null
+*!*
+// это предварительный вариант findDroppable, исправлен ниже!
+*/!*
+function findDroppable(event) {
+
+  // взять элемент на данных координатах
+  let elem = document.elementFromPoint(event.clientX, event.clientY);
+
+  // найти ближайший сверху droppable
+  return elem.closest('.droppable');
+}
+```
+
+Обратите внимание -- для `elementFromPoint` нужны координаты относительно окна `clientX/clientY`, а не `pageX/pageY`.
+
+Вариант выше -- предварительный. Он не будет работать. Если попробовать применить эту функцию, будет все время возвращать один и тот же элемент! А именно -- *текущий переносимый*. Почему так?
+
+...Дело в том, что в процессе переноса под мышкой находится именно аватар. При начале переноса ему даже `z-index` ставится большой, чтобы он был поверх всех остальных.
+
+**Аватар перекрывает остальные элементы. Поэтому функция `document.elementFromPoint()` увидит на текущих координатах именно его.**
+
+Чтобы это изменить, нужно либо поправить код переноса, чтобы аватар двигался *рядом* с курсором мыши, либо дать аватару стиль `pointer-events:none` (кроме IE10-), либо:
+
+1. Спрятать аватар.
+2. Вызывать `elementFromPoint`.
+3. Показать аватар.
+
+Напишем функцию `findDroppable(event)`, которая это делает:
+
+```js
+function findDroppable(event) {
+  // спрячем переносимый элемент
+  dragObject.avatar.hidden = true;
+
+  // получить самый вложенный элемент под курсором мыши
+  let elem = document.elementFromPoint(event.clientX, event.clientY);
+
+  // показать переносимый элемент обратно
+  dragObject.avatar.hidden = false;
+
+  if (elem == null) {
+    // такое возможно, если курсор мыши "вылетел" за границу окна
+    return null;
+  }
+
+  return elem.closest('.droppable');
+}
+```
+
+## DragManager
+
+Из фрагментов кода, разобранных выше, можно собрать мини-фреймворк.
+
+Объект `DragManager` будет запоминать текущий переносимый объект и отслеживать его перенос.
+
+Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики:
+
+```js no-beautify
+let DragManager = new function() {
+
+  let dragObject = {};
+
+  let self = this; // для доступа к себе из обработчиков
+
+  function onMouseDown(e) { ... }
+  function onMouseMove(e) { ... }
+  function onMouseUp(e) { ... }
+
+  document.onmousedown = onMouseDown;
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+
+  this.onDragEnd = function(dragObject, dropElem) { };
+  this.onDragCancel = function(dragObject) { };
+}
+```
+
+Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но это легко поменять на `addEventListener`.
+
+Код функции `onMouse*` мы подробно рассмотрели ранее, но вы сможете увидеть их в полном примере ниже.
+
+Внутренний объект `dragObject` будет содержать информацию об объекте переноса.
+
+У него будут следующие свойства, которые также разобраны выше:
+
+`elem`
+: Текущий зажатый мышью объект, если есть (ставится в `mousedown`).
+
+`avatar`
+: Элемент-аватар, который передвигается по странице.
+
+`downX/downY`
+: Координаты, на которых был клик `mousedown`
+
+`shiftX/shiftY`
+: Относительный сдвиг курсора от угла элемента, вспомогательное свойство вычисляется в начале переноса.
+
+Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`.
+
+Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при завершении или отмене переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий.
+
+С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто:
+
+```js no-beautify
+DragManager.onDragEnd = function(dragObject, dropElem) {
+
+  // скрыть/удалить переносимый объект
+  dragObject.elem.hidden = true;
+
+  // успешный перенос, показать улыбку классом computer-smile
+  dropElem.className = 'computer computer-smile';
+
+  // убрать улыбку через 0.2 сек
+  setTimeout(function() {
+    dropElem.classList.remove('computer-smile');
+  }, 200);
+};
+
+DragManager.onDragCancel = function(dragObject) {
+  // откат переноса
+  dragObject.avatar.rollback();
+};
+```
+
+Полный пример с кодом:
+
+[codetabs src="dragDemo" height=280]
+
+## Расширения
+
+Существует масса возможных применений Drag'n'Drop. Здесь мы не будем реализовывать их все, поскольку не стоит цель создать фреймворк-монстр.
+
+Однако, мы рассмотрим их, чтобы, при необходимости, легко было написать то, что нужно.
+
+### Захватывать элемент можно только за "ручку"
+
+Часто бывает, что перенос должен быть инициирован только при захвате за определённую зону элемента. К примеру, модальное окно можно "взять", только захватив его за заголовок.
+
+Для этого достаточно добавить необходимую проверку, к примеру, в функцию `createAvatar` или перед её запуском.
+
+Если `mousedown` был внутри элемента, помеченного, к примеру, классом `draghandle`, то начинаем перенос, иначе -- нет.
+
+### Проверка прав на droppable
+
+Бывает и так, что не на любое место в `droppable` можно положить элемент.
+
+Например: в админке есть дерево всех объектов сайта: статей, разделов, посетителей и т.п.
+
+- В этом дереве есть узлы различных типов: "статьи", "разделы" и "пользователи".
+- Все узлы являются переносимыми объектами.
+- Узел "статья" (draggable) можно переносить в "раздел" (droppable), а узел "пользователи" -- нельзя. Но и то и другое можно поместить в "корзину".
+
+Здесь решение: "можно или нет" переносить или нельзя зависит от "типа" переносимого объекта.
+
+Есть и более сложные варианты, когда решение зависит от конкретного места в `droppable`, над которым посетитель отпустил кнопку мыши. К примеру, переносить в верхнюю часть можно, а в нижнюю -- нет.
+
+Эта задача решается добавлением проверки в `findDroppable(e)`. Эта функция знает и об аватаре и о событии, включая координаты. При попытке положить в "неправильное" место функция `findDroppable(e)` должна возвращать `null`.
+
+Однако, на практике бывают ситуации, когда решение "прямо сейчас" принять невозможно. Например, нужно сделать запрос на сервер: "А разрешено ли текущему посетителю производить такую операцию?"
+
+Как при этом должен вести себя интерфейс? Можно, конечно сделать, чтобы элемент после отпускания кнопки мыши "завис" над `droppable`, ожидая ответа. Однако, такое решение неудобно в реализации и странновато выглядит для посетителя.
+
+Как правило, применяют "оптимистичный" алгоритм, по которому мы считаем, что перенос обычно успешен, но при необходимости можем отменить его.
+
+При нём посетитель кладет объект туда, куда он хочет, а затем, в коде `onDragEnd`:
+
+1. Визуально обрабатывается завершение переноса, как будто все ок.
+2. Производится асинхронный запрос к серверу, содержащий информацию о переносе.
+3. Сервер обрабатывает перенос и возвращает ответ, все ли в порядке.
+4. Если нет -- выводится ошибка и возвращается `avatar.rollback()`. Аватар в этом случае должен предусматривать возможность отката после успешного завершения.
+
+Процесс общения с сервером сопровождается индикацией загрузки и, при необходимости, блокировкой новых операций переноса до получения подтверждения.
+
+### Подсветка текущего droppable
+
+Удобно, когда пользователь во время переноса наглядно видит, куда он сейчас положит draggable. Например, текущий droppable (или его часть) подсвечиваются.
+
+Для этого в `DragManager` можно добавить дополнительные методы интеграции с внешним кодом:
+
+- `onDragEnter` -- будет вызываться при заходе на `droppable`, из `onMouseMove`.
+- `onDragMove` -- при каждом передвижении внутри `droppable`, из `onMouseMove`.
+- `onDragLeave` -- при выходе с `droppable`, из `onMouseMove` и `onMouseUp`.
+
+Возможен более сложный вариант, когда нужно поддерживать не только перенос *в элемент*, но и перенос *между элементами*, например вставку одной статьи между двумя другими.
+
+Для этого код, который обрабатывает перенос, может "делить на части" droppable, к примеру, в отношении 25% - 50% - 25%, и смотреть:
+
+- Если перенос в верхнюю четверть, то это -- "над".
+- Если перенос в середину, то это "внутрь".
+- Если перенос в нижнюю четверть, то это -- "под".
+
+Текущий `droppable` и позиция относительно него при этом могут помечаться подсветкой и жирной чертой над/под, если требуется.
+
+Пример индикации из Firefox:
+![](between.png)
+
+### Анимация отмены переноса
+
+Отмену переноса и возврат аватара на место можно красиво анимировать.
+
+Один из частых вариантов -- скольжение объекта обратно к исходному месту, откуда его взяли. Для этого достаточно поправить `avatar.rollback()`.
+
+## Итого
+
+Уточнённый алгоритм Drag'n'Drop:
+
+1. При `mousedown` запомнить координаты нажатия.
+2. При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`. При этом:
+<ol>
+3. Создать аватар, если можно начать перенос элемента `draggable` с данной позиции курсора.
+4. Переместить аватар по экрану, установив его новую позицию из `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.
+5. Сообщить во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.
+6. При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`.
+
+Получившаяся реализация Drag'n'Drop проста, эффективна, изящна.
+
+Её очень легко поменять или адаптировать под "особые" потребности.
+
+ООП-вариант фреймворка находится в статье <info:drag-and-drop-plus>.
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/between.png b/archive/5-drag-and-drop-objects/between.png
similarity index 100%
rename from 2-ui/3-event-details/5-drag-and-drop-objects/between.png
rename to archive/5-drag-and-drop-objects/between.png
diff --git a/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js b/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js
new file mode 100644
index 00000000..24a208db
--- /dev/null
+++ b/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js
@@ -0,0 +1,157 @@
+let DragManager = new function() {
+
+  /**
+   * составной объект для хранения информации о переносе:
+   * {
+   *   elem - элемент, на котором была зажата мышь
+   *   avatar - аватар
+   *   downX/downY - координаты, на которых был mousedown
+   *   shiftX/shiftY - относительный сдвиг курсора от угла элемента
+   * }
+   */
+  let dragObject = {};
+
+  let self = this;
+
+  function onMouseDown(e) {
+
+    if (e.which != 1) return;
+
+    let elem = e.target.closest('.draggable');
+    if (!elem) return;
+
+    dragObject.elem = elem;
+
+    // запомним, что элемент нажат на текущих координатах pageX/pageY
+    dragObject.downX = e.pageX;
+    dragObject.downY = e.pageY;
+
+    return false;
+  }
+
+  function onMouseMove(e) {
+    if (!dragObject.elem) return; // элемент не зажат
+
+    if (!dragObject.avatar) { // если перенос не начат...
+      let moveX = e.pageX - dragObject.downX;
+      let moveY = e.pageY - dragObject.downY;
+
+      // если мышь передвинулась в нажатом состоянии недостаточно далеко
+      if (Math.abs(moveX) < 3 && Math.abs(moveY) < 3) {
+        return;
+      }
+
+      // начинаем перенос
+      dragObject.avatar = createAvatar(e); // создать аватар
+      if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента
+        dragObject = {};
+        return;
+      }
+
+      // аватар создан успешно
+      // создать вспомогательные свойства shiftX/shiftY
+      let coords = getCoords(dragObject.avatar);
+      dragObject.shiftX = dragObject.downX - coords.left;
+      dragObject.shiftY = dragObject.downY - coords.top;
+
+      startDrag(e); // отобразить начало переноса
+    }
+
+    // отобразить перенос объекта при каждом движении мыши
+    dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
+    dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
+
+    return false;
+  }
+
+  function onMouseUp(e) {
+    if (dragObject.avatar) { // если перенос идет
+      finishDrag(e);
+    }
+
+    // перенос либо не начинался, либо завершился
+    // в любом случае очистим "состояние переноса" dragObject
+    dragObject = {};
+  }
+
+  function finishDrag(e) {
+    let dropElem = findDroppable(e);
+
+    if (!dropElem) {
+      self.onDragCancel(dragObject);
+    } else {
+      self.onDragEnd(dragObject, dropElem);
+    }
+  }
+
+  function createAvatar(e) {
+
+    // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
+    let avatar = dragObject.elem;
+    let old = {
+      parent: avatar.parentNode,
+      nextSibling: avatar.nextSibling,
+      position: avatar.position || '',
+      left: avatar.left || '',
+      top: avatar.top || '',
+      zIndex: avatar.zIndex || ''
+    };
+
+    // функция для отмены переноса
+    avatar.rollback = function() {
+      old.parent.insertBefore(avatar, old.nextSibling);
+      avatar.style.position = old.position;
+      avatar.style.left = old.left;
+      avatar.style.top = old.top;
+      avatar.style.zIndex = old.zIndex
+    };
+
+    return avatar;
+  }
+
+  function startDrag(e) {
+    let avatar = dragObject.avatar;
+
+    // инициировать начало переноса
+    document.body.appendChild(avatar);
+    avatar.style.zIndex = 9999;
+    avatar.style.position = 'absolute';
+  }
+
+  function findDroppable(event) {
+    // спрячем переносимый элемент
+    dragObject.avatar.hidden = true;
+
+    // получить самый вложенный элемент под курсором мыши
+    let elem = document.elementFromPoint(event.clientX, event.clientY);
+
+    // показать переносимый элемент обратно
+    dragObject.avatar.hidden = false;
+
+    if (elem == null) {
+      // такое возможно, если курсор мыши "вылетел" за границу окна
+      return null;
+    }
+
+    return elem.closest('.droppable');
+  }
+
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+  document.onmousedown = onMouseDown;
+
+  this.onDragEnd = function(dragObject, dropElem) {};
+  this.onDragCancel = function(dragObject) {};
+
+};
+
+
+function getCoords(elem) { // кроме IE8-
+  let box = elem.getBoundingClientRect();
+
+  return {
+    top: box.top + pageYOffset,
+    left: box.left + pageXOffset
+  };
+
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/dragDemo.css b/archive/5-drag-and-drop-objects/dragDemo.view/dragDemo.css
similarity index 100%
rename from 2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/dragDemo.css
rename to archive/5-drag-and-drop-objects/dragDemo.view/dragDemo.css
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/index.html b/archive/5-drag-and-drop-objects/dragDemo.view/index.html
similarity index 100%
rename from 2-ui/3-event-details/5-drag-and-drop-objects/dragDemo.view/index.html
rename to archive/5-drag-and-drop-objects/dragDemo.view/index.html
diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/shiftx.png b/archive/5-drag-and-drop-objects/shiftx.png
similarity index 100%
rename from 2-ui/3-event-details/5-drag-and-drop-objects/shiftx.png
rename to archive/5-drag-and-drop-objects/shiftx.png
diff --git a/archive/backticks.md b/archive/backticks.md
new file mode 100644
index 00000000..1f1dd5cd
--- /dev/null
+++ b/archive/backticks.md
@@ -0,0 +1,51 @@
+
+Backticks allow to specify a "template function" before the first backtick. 
+
+The syntax is: 
+```js
+let str = func`my string`;
+```
+
+The function `func` is automatically called and receives the array of string pieces split by `${...}` embeds and the list of embedded `${...}` values.
+
+It's better to see the example:
+
+```js run
+function love(s, v1, v2) {
+  alert( s[0] ); // Hello:
+  alert( s[1] ); //  and 
+  alert( s[2] ); // !
+
+  alert( v1 ); // Ilya
+  alert( v2 ); // Julia
+
+  alert( s.raw[0] ); // Hello:\n
+
+  return v1 + ' ♥ ' + v2;
+}
+
+let mom = "Julia";
+let dad = "Ilya";
+
+//              s[0]    | v1 |  s[1] | v2 | s[2]
+let str = love`Hello:\n ${mom}  and  ${dad}!`;
+
+alert(str); // 'Julia ♥ Ilya'
+```
+
+The string inside <code>love&#96;string&#96;</code> is split into pieces by embeds. The result is passed to `love`:
+
+- The first parameter `s` stores the pieces, here `s = ["Hello:\n ", " and ", "!"]`.
+- The special proeprty `s.raw` contains unparsed values, the special characters are not processes.
+- Then follow the values of embeds: `v1 = mom`, `v2 = data`.
+
+Templating functions allow to 
+
+
+
+
+- The first parameter `strings` is a
+
+In the example above, `love` is the name for the function. It is called with an array 
+
+
diff --git a/archive/commend.md b/archive/commend.md
new file mode 100644
index 00000000..acc2c27e
--- /dev/null
+++ b/archive/commend.md
@@ -0,0 +1,22 @@
+### Don't hesitate to comment
+
+Please, don't hesitate to comment.
+
+Comments increase the overall code footprint, but that's not a problem at all, because there are many tools which minify the code before publishing to production server. They remove comments, so they do not appear in the working scripts.
+
+The code clarity is what we should hunt for. And comments can really help to make it easier to understand.
+
+There are various types of comments, answering different questions:
+
+- What the code does?
+- Why the code is written like that?
+- Which counter-intuitive or implicit connections it has with other parts of the program?
+
+Further in the tutorial we'll make more notes about how to write the code better, easier to read and maintain. We'll also talk more about comments.
+
+```smart header="The good code is inherently readable and self-commenting"
+Please note that the first type of comments ("what the code does") should be used to describe a "high-level" action, like the overall architecture, a function or a chunk of code. It's purpose is to give an overview, so a reader doesn't need to delve into the code and figure out.
+
+Novice programmers sometimes tend to elaborate too much. Please don't. The good code is inherently readable. No need to describe what few lines do. Unless it's something hard to grasp, and *then* it's worth to consider rewriting the code at the first place rather than commenting it.
+```
+
diff --git a/archive/descriptors.md b/archive/descriptors.md
new file mode 100644
index 00000000..14f11009
--- /dev/null
+++ b/archive/descriptors.md
@@ -0,0 +1,37 @@
+
+
+## Property descriptors
+
+An object property is actually a more complex and tunable thing than just a "key-value" mapping.
+
+There are two kinds of properties. 
+
+The first is *data properties*.
+
+They assiciate a key with the attributes:
+
+- **`value`** -- the value of the property.
+- **`writable`** -- if `true`, can be changed, otherwise it's read-only.
+- **`enumerable`** -- if `true`, then listed in loops, otherwise not listed.
+- **`configurable`** -- if `true`, the property can be deleted and these attributes can be modified, otherwise not.
+
+All properties that we've seen yet were data properties.
+
+By default when a property is created, all attributes are `true`.
+
+We can get the the information about an existing property using [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor):
+
+
+```js run
+let user = {
+  name: "John"
+};
+
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+alert( descriptor.value ); // John
+alert( descriptor.writable ); // true
+alert( descriptor.enumerable ); // true
+alert( descriptor.configurable ); // true
+```
+
diff --git a/archive/menu.html b/archive/menu.html
deleted file mode 100644
index c41de1c7..00000000
--- a/archive/menu.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .menu ul {
-      margin: 0;
-      list-style: none;
-      padding-left: 20px;
-      display: none;
-    }
-    
-    .menu .title {
-      font-size: 18px;
-      cursor: pointer;
-    }
-    
-    .menu .title::before {
-      color: green;
-      font-size: 80%;
-      content: '▶ ';
-    }
-    
-    .menu_open .title::before {
-      color: green;
-      font-size: 80%;
-      content: '▼ ';
-    }
-    
-    .menu_open ul {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="sweeties" class="menu">
-    <span class="title">Сладости (нажми меня)!</span>
-    <ul>
-      <li>Торт</li>
-      <li>Пончик</li>
-      <li>Пирожное</li>
-    </ul>
-  </div>
-
-  <script>
-    function Menu(options) {
-      var elem = options.elem;
-
-      function toggle() {
-        elem.classList.toggle('menu_open');
-      }
-
-      elem.onclick = function(event) {
-        console.log(event);
-        console.log(this == elem);
-        toggle();
-      }
-
-      this.toggle = toggle;
-    }
-
-    var menu = new Menu({
-      elem: document.querySelector('#sweeties')
-    });
-
-    setInterval(function() {
-      menu.toggle();
-    }, 3000)
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/nfe.md b/archive/nfe.md
new file mode 100644
index 00000000..7f7e2044
--- /dev/null
+++ b/archive/nfe.md
@@ -0,0 +1,140 @@
+
+## Named Function Expression
+
+Named Function Expression or, shortly, NFE, is a term a Function Expression that has a name.
+
+For instance, let's take an ordinary Function Expression:
+
+```js
+let sayHi = function(who) {
+  alert(`Hello, ${who}`);
+};
+```
+
+...And add a name to it:
+
+```js
+let sayHi = function *!*func*/!*(who) {
+  alert(`Hello, ${who}`);
+};
+```
+
+What's the role of that additional `"func"` name?
+
+First let's note, that we're still having a Function Expression. Adding the name `"func"` after `function` did not make it a Function Declaration, because it is still created as a part of an assignment expression.
+
+Adding such a name also did not break anything. 
+
+The function is still available as `sayHi()`:
+
+```js
+//+ run
+let sayHi = function *!*func*/!*(who) {
+  alert(`Hello, ${who}`);
+};
+
+sayHi("John"); // Hello, John
+```
+
+There are two special things about the name `func`:
+<ol>
+<li>It allows to reference the function from inside itself.</li>
+<li>It is not visible outside of the function.</li>
+</ol>
+
+For instance, the function `sayHi` below re-calls itself with `"Guest"` if no `who` is provided:
+
+```js
+//+ run
+let sayHi = function *!*func*/!*(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    func("Guest"); // use func to re-call itself
+*/!* 
+  }
+};
+
+sayHi(); // Hello, Guest
+
+// But this won't work: 
+func(); // Error, func is not defined (not visible outside of the function)
+```
+
+Later we'll see more cases when a function wants to re-call itself with modified parameters.
+
+So, why won't we use `sayHi` for the nested call?
+
+Actually, in most cases we can:
+
+```js
+let sayHi = function(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    sayHi("Guest");
+*/!* 
+  }
+};
+```
+
+The problem with the latter code is that the value of `sayHi` may change. The function may go to another variable:
+
+```js
+//+ run
+let sayHi = function *!*func*/!*(who) {
+  if (who) {
+    alert(`Hello, ${who}`);
+  } else {
+*!*
+    func("Guest"); // (*)
+*/!* 
+  }
+};
+
+let welcome = sayHi;
+sayHi = null;
+
+welcome(); // Hello, Guest (still works under different name)
+```
+
+Using `func` in the line `(*)` *guarantees* that this exactly function will be called. Using `sayHi` there 
+
+
+...But the name `func` is not visible outside of the function:
+
+```js
+//+ run
+let sayHi = function *!*func*/!*(who) {
+  // ...
+};
+
+*!*
+func(); // Error: func is not defined
+*/!*
+```
+
+Named Function Expressions are used in rare cases when:
+<ul>
+<li>The function needs to reference itself from inside. For instance, call itself with another arguments.</li>
+<li>The function travels between variables.</li>
+</ul>
+
+The code below demonstrates both conditions:
+
+```js
+//+ run
+let sayHi = function *!*func*/!*(name) {
+  if (name) {
+    alert(`Hello, ${name}!`)
+  } else {
+    func("Guest");
+  }
+};
+
+welcome(); // Works
+```
+
+
diff --git a/archive/promise/async-then.js b/archive/promise/async-then.js
new file mode 100644
index 00000000..87150473
--- /dev/null
+++ b/archive/promise/async-then.js
@@ -0,0 +1,60 @@
+
+````smart header="Handlers are always asynchronous, like `setTimeout(...,0)`"
+Handlers assigned by `.then/catch` are always asynchronous. But if the promise is settled they run as soon as possible, similar to `setTimeout(...,0)`.
+
+Here's the example to demonstrate that:
+
+```js run
+// the promise is immediately resolved with "done!"
+let promise = new Promise(resolve => resolve("done!"));
+
+// alert runs asynchronously, like if it were wrapped in setTimeout(..., 0);
+promise.then(alert); // (2)
+
+alert('code end'); // (1)
+```
+
+We'll first see "code end" `(1)`, and then "done!" `(2)`.
+
+Like if we had this instead of `(2)`:
+```js
+promise.then(result => setTimeout(() => alert(result), 0));
+```
+
+The inner mechanics is like this:
+- Promise handlers form a queue.
+- When the current code is complete, the queue shifts and the next handler is executed.
+````
+
+````smart header="Functions resolve/reject accept at most one argument"
+Functions `resolve/reject` accept only one argument.
+
+We can call them without any arguments too, that's the same as passing `undefined`:
+
+```js run
+let promise = new Promise(resolve => resolve());
+
+promise.then(alert); // undefined
+```
+
+...But if we pass many arguments: `resolve(1, 2, 3)`, then all arguments after the first one are ignored.
+The idea is that a promise may have only one result (or an error). Use objects and destructuring if you need to pass many values, like this:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  let name = "John";
+  let age = 25;
+
+  resolve({name, age}); // "pack" the values in an object
+});
+
+// destructuring
+promise.then(function({name, age}) {
+  // here we have name and age variables as if the promise had two results
+  alert(`${name} ${age}`); // John 25
+})
+```
+
+````
+
+
diff --git a/archive/promise/fetch.js b/archive/promise/fetch.js
new file mode 100644
index 00000000..b4719af8
--- /dev/null
+++ b/archive/promise/fetch.js
@@ -0,0 +1,37 @@
+## Example: fetch
+
+
+## Example: fetch
+
+Promises are also returned by some built-in browser methods.
+
+For instance, [fetch](https://fetch.spec.whatwg.org/#fetch-method) allows to load arbitrary content over the network. We can use it to send information to the server and load data from it.
+
+The syntax is:
+
+```js
+let promise = fetch(url[, options]);
+```
+
+Here:
+- `url` is the URL to load,
+- `options` are various request options.
+
+There are many options, full information about them is in the [spec](https://fetch.spec.whatwg.org/#requestinit), here we won't need them.
+
+The promise returned by `fetch` resolves with the `response` object when the server responds.
+
+The most important properties of `response` are:
+- `status` -- HTTP-code: 200 for OK, 404 for "Page not found" etc.
+- `headers` -- HTTP headers.
+- 
+
+The important thing
+
+
+```js run
+fetch('/article/promise-chaining/1.html?speed=1')
+  .then(console.log);
+```
+
+
diff --git a/archive/promise/thenable.js b/archive/promise/thenable.js
new file mode 100644
index 00000000..b72c0871
--- /dev/null
+++ b/archive/promise/thenable.js
@@ -0,0 +1,23 @@
+function loadScript(src) {  
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+loadScript("/article/promise-chaining/one.js")
+  .then(script => {
+    return {
+      then(resolve, reject) {
+        setTimeout(() => resolve(script), 1000);
+      }
+    };
+  })
+  .then(function(script) {
+    alert(one);
+  });
+
diff --git a/archive/promise/thenable.md b/archive/promise/thenable.md
new file mode 100644
index 00000000..7f528f13
--- /dev/null
+++ b/archive/promise/thenable.md
@@ -0,0 +1,25 @@
+````smart header="Thenables"
+To be precise, any object that has a method `.then` is treated as a promise here. So we can use custom "promise-compatible" objects in the chain. Such objects are called "thenable".
+
+Here's an example:
+
+```js run
+class Thenable {
+  constructor(result, delay) {
+    this.result = result;
+  }
+  then(resolve, reject) {
+    setTimeout(() => resolve(this.result * 2), delay);
+  }
+};
+
+new Promise(resolve => resolve(1))
+  .then(result => {
+    return new Thenable(result, 1000);
+  })
+  .then(alert); // shows 2 after 1000ms
+```
+
+That allows to use custom implementations of promises from 3rd-party libraries along with native promises.
+````
+
diff --git a/archive/promise/thenable2.js b/archive/promise/thenable2.js
new file mode 100644
index 00000000..3b72aaf3
--- /dev/null
+++ b/archive/promise/thenable2.js
@@ -0,0 +1,19 @@
+'use strict';
+
+new Promise()
+  .then(result => {
+    return {
+      then(resolve, reject) {
+        setTimeout(() => resolve("two"), 1000);
+      }
+    };
+  })
+  .then(result => {
+    console.log("HERE", result);
+    return result;
+  })
+  .then(console.log)
+  .catch(err => console.error("ERROR", err));
+
+// https://tc39.github.io/ecma262/#sec-promise-resolve-functions
+
diff --git a/archive/promise/whereto.txt b/archive/promise/whereto.txt
new file mode 100644
index 00000000..2100b9b3
--- /dev/null
+++ b/archive/promise/whereto.txt
@@ -0,0 +1,58 @@
+
+## Extending promises, thenables
+
+Promises are very simple by design. One of the thing they miss is the ability to cancel the process.
+
+For instance, `loadScript(src)` in previous examples returns a promise that allows to track success/failure of the loading. But can we abort it? No.
+
+We can inherit from `Promise` to introduce such functionality, like this:
+
+
+```js run
+function loadScript(src) {
+  let script = document.createElement('script');
+  alert(1);
+  script.src = src;
+
+  let promise = new Promise(function(resolve, reject) {
+    script.onload = () => { alert('onload'); resolve(script); }
+*!*
+    script.onerror = err => reject(new Error("Script load error: " + src)); // (*)
+*/!*
+  });
+
+  alert(2);
+
+  document.head.append(script);
+  alert(3);
+  promise.abort = () => {
+    script.src = 'javascript:""
+    ';
+  };
+  return promise;
+}
+
+let promise = loadScript("/article/promise-chaining/one.js?speed=0");
+promise.then(alert);
+promise.abort();
+alert(4);
+```
+
+
+
+
+
+
+
+## Inheriting from promise, thenables, promise api, async/await
+
+--------
+
+
+An object that has a method called `.then` is called a "thenable".
+
+Instead of checking if something is `instanceof Promise`, we should usually check it for being thenable, and if it is, then treat it as a promise ("duck typing").
+
+JavaScript specification also checks the value returned by a handler for being a thenable, not exactly a promise, when it decides whether to pass it along the chain or wait for the result. So in the examples above we could use custom thenables instead of `Promise` instances.
+
+For instance, native promises give no way to "abort" the execution. The `loadScript` above cannot "cancel" script loading, just because there's no `.abort` method on promises, we can only listen for the state change using `.then/catch`.
diff --git a/archive/proto/user.js b/archive/proto/user.js
new file mode 100644
index 00000000..e79d0b42
--- /dev/null
+++ b/archive/proto/user.js
@@ -0,0 +1,16 @@
+```js run
+function User(name, birthday) {
+  let age = calcAge();
+
+  function calcAge() {
+    new Date().getFullYear() - birthday.getFullYear();
+  }
+
+  this.sayHi = function() {
+    alert(name + ', age:' + age);
+  };
+}
+
+let user = new User("John", new Date(2000,0,1));
+user.sayHi(); // John
+```
diff --git a/archive/proto/wrong/javascript-prototype-confusion-and.html b/archive/proto/wrong/javascript-prototype-confusion-and.html
new file mode 100644
index 00000000..abc8f71a
--- /dev/null
+++ b/archive/proto/wrong/javascript-prototype-confusion-and.html
@@ -0,0 +1,1353 @@
+<!DOCTYPE html>
+<html class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
+<head>
+<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
+<meta content='width=1100' name='viewport'/>
+<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
+<meta content='blogger' name='generator'/>
+<link href='http://www.nowherenearithaca.com/favicon.ico' rel='icon' type='image/x-icon'/>
+<link href='http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html' rel='canonical'/>
+<link rel="alternate" type="application/atom+xml" title="Nowhere Near Ithaca - Atom" href="http://www.nowherenearithaca.com/feeds/posts/default" />
+<link rel="alternate" type="application/rss+xml" title="Nowhere Near Ithaca - RSS" href="http://www.nowherenearithaca.com/feeds/posts/default?alt=rss" />
+<link rel="service.post" type="application/atom+xml" title="Nowhere Near Ithaca - Atom" href="https://www.blogger.com/feeds/7620301364506750761/posts/default" />
+
+<link rel="alternate" type="application/atom+xml" title="Nowhere Near Ithaca - Atom" href="http://www.nowherenearithaca.com/feeds/4739099319381019739/comments/default" />
+<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/1803938243-ieretrofit.js"></script>
+<![endif]-->
+<link href='http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s1600/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png' rel='image_src'/>
+<meta content='http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html' property='og:url'/>
+<meta content='http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/w1200-h630-p-nu/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png' property='og:image'/>
+<!--[if IE]> <script> (function() { let html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (let i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
+<title>Nowhere Near Ithaca: Javascript "Prototype" Confusion, and the Dubiously Useful "instanceof"</title>
+<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/2340730481-css_bundle_v2.css' />
+<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7620301364506750761&zx=30835729-d154-494d-a7b3-dfa51767ecca' />
+<style id='page-skin-1' type='text/css'><!--
+/*
+-----------------------------------------------
+Blogger Template Style
+Name:     Simple
+Designer: Josh Peterson
+URL:      www.noaesthetic.com
+----------------------------------------------- */
+/* Variable definitions
+====================
+<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd"/>
+<Group description="Page Text" selector="body">
+<Variable name="body.font" description="Font" type="font"
+default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
+<Variable name="body.text.color" description="Text Color" type="color" default="#222222"/>
+</Group>
+<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
+<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd"/>
+<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff"/>
+<Variable name="header.background.color" description="Header Background" type="color" default="transparent"/>
+</Group>
+<Group description="Links" selector=".main-outer">
+<Variable name="link.color" description="Link Color" type="color" default="#2288bb"/>
+<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888"/>
+<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff"/>
+</Group>
+<Group description="Blog Title" selector=".header h1">
+<Variable name="header.font" description="Font" type="font"
+default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
+<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" />
+</Group>
+<Group description="Blog Description" selector=".header .description">
+<Variable name="description.text.color" description="Description Color" type="color"
+default="#777777" />
+</Group>
+<Group description="Tabs Text" selector=".tabs-inner .widget li a">
+<Variable name="tabs.font" description="Font" type="font"
+default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
+<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999"/>
+<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000"/>
+</Group>
+<Group description="Tabs Background" selector=".tabs-outer .PageList">
+<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5"/>
+<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee"/>
+</Group>
+<Group description="Post Title" selector="h3.post-title, .comments h4">
+<Variable name="post.title.font" description="Font" type="font"
+default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
+</Group>
+<Group description="Date Header" selector=".date-header">
+<Variable name="date.header.color" description="Text Color" type="color"
+default="#222222"/>
+<Variable name="date.header.background.color" description="Background Color" type="color"
+default="transparent"/>
+</Group>
+<Group description="Post Footer" selector=".post-footer">
+<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666"/>
+<Variable name="post.footer.background.color" description="Background Color" type="color"
+default="#f9f9f9"/>
+<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee"/>
+</Group>
+<Group description="Gadgets" selector="h2">
+<Variable name="widget.title.font" description="Title Font" type="font"
+default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
+<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000"/>
+<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999"/>
+</Group>
+<Group description="Images" selector=".main-inner">
+<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff"/>
+<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee"/>
+<Variable name="image.text.color" description="Caption Text Color" type="color" default="#222222"/>
+</Group>
+<Group description="Accents" selector=".content-inner">
+<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee"/>
+<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="#eeeeee"/>
+</Group>
+<Variable name="body.background" description="Body Background" type="background"
+color="#f0f0f0" default="$(color) none repeat scroll top left"/>
+<Variable name="body.background.override" description="Body Background Override" type="string" default=""/>
+<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
+default="url(http://www.blogblog.com/1kt/simple/gradients_light.png)"/>
+<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
+default="url(http://www.blogblog.com/1kt/simple/body_gradient_tile_light.png)"/>
+<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner"/>
+<Variable name="content.padding" description="Content Padding" type="length" default="10px"/>
+<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="10px"/>
+<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px"/>
+<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px"/>
+<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px"/>
+<Variable name="main.border.width" description="Main Border Width" type="length" default="0"/>
+<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none"/>
+<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px"/>
+<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px"/>
+<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px"/>
+<Variable name="header.padding" description="Header Padding" type="length" default="15px"/>
+<Variable name="header.border.size" description="Header Border Size" type="length" default="1px"/>
+<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="1px"/>
+<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0"/>
+<Variable name="description.text.size" description="Description Text Size" type="string" default="140%"/>
+<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" />
+<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" />
+<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
+default="url(http://www.blogblog.com/1kt/simple/gradients_light.png)"/>
+<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px"/>
+<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px"/>
+<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit"/>
+<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit"/>
+<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit"/>
+<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px"/>
+<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px"/>
+<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px"/>
+<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner"/>
+<Variable name="page.width" description="Page Width" type="string" default="auto"/>
+<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px"/>
+<Variable name="main.padding" description="Main Padding" type="length" default="15px"/>
+<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px"/>
+<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px"/>
+<Variable name="paging.background"
+color="#ffffff"
+description="Background of blog paging area" type="background"
+default="transparent none no-repeat scroll top center"/>
+<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0"/>
+<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
+default="transparent none repeat scroll top left"/>
+<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto"/>
+<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" />
+<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
+<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
+*/
+/* Content
+----------------------------------------------- */
+body {
+font: normal normal 14px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
+color: #222222;
+background: #f0f0f0 none repeat scroll top left;
+padding: 0 40px 40px 40px;
+}
+html body .region-inner {
+min-width: 0;
+max-width: 100%;
+width: auto;
+}
+a:link {
+text-decoration:none;
+color: #2288bb;
+}
+a:visited {
+text-decoration:none;
+color: #888888;
+}
+a:hover {
+text-decoration:underline;
+color: #33aaff;
+}
+.body-fauxcolumn-outer .fauxcolumn-inner {
+background: transparent url(http://www.blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
+_background-image: none;
+}
+.body-fauxcolumn-outer .cap-top {
+position: absolute;
+z-index: 1;
+height: 400px;
+width: 100%;
+background: #f0f0f0 none repeat scroll top left;
+}
+.body-fauxcolumn-outer .cap-top .cap-left {
+width: 100%;
+background: transparent url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
+_background-image: none;
+}
+.content-outer {
+-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
+-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
+-goog-ms-box-shadow: 0 0 10px #333333;
+box-shadow: 0 0 40px rgba(0, 0, 0, .15);
+margin-bottom: 1px;
+}
+.content-inner {
+padding: 10px 10px;
+}
+.content-inner {
+background-color: #ffffff;
+}
+/* Header
+----------------------------------------------- */
+.header-outer {
+background: transparent none repeat-x scroll 0 -400px;
+_background-image: none;
+}
+.Header h1 {
+font: italic normal 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
+color: #000000;
+text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
+}
+.Header h1 a {
+color: #000000;
+}
+.Header .description {
+font-size: 140%;
+color: #777777;
+}
+.header-inner .Header .titlewrapper {
+padding: 6px 15px;
+}
+.header-inner .Header .descriptionwrapper {
+padding: 0 15px;
+}
+/* Tabs
+----------------------------------------------- */
+.tabs-inner .section:first-child {
+border-top: 1px solid #eeeeee;
+}
+.tabs-inner .section:first-child ul {
+margin-top: -1px;
+border-top: 1px solid #eeeeee;
+border-left: 0 solid #eeeeee;
+border-right: 0 solid #eeeeee;
+}
+.tabs-inner .widget ul {
+background: #f5f5f5 url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
+_background-image: none;
+border-bottom: 1px solid #eeeeee;
+margin-top: 0;
+margin-left: -30px;
+margin-right: -30px;
+}
+.tabs-inner .widget li a {
+display: inline-block;
+padding: .6em 1em;
+font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
+color: #999999;
+border-left: 1px solid #ffffff;
+border-right: 1px solid #eeeeee;
+}
+.tabs-inner .widget li:first-child a {
+border-left: none;
+}
+.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
+color: #000000;
+background-color: #eeeeee;
+text-decoration: none;
+}
+/* Columns
+----------------------------------------------- */
+.main-outer {
+border-top: 0 solid #eeeeee;
+}
+.fauxcolumn-left-outer .fauxcolumn-inner {
+border-right: 1px solid #eeeeee;
+}
+.fauxcolumn-right-outer .fauxcolumn-inner {
+border-left: 1px solid #eeeeee;
+}
+/* Headings
+----------------------------------------------- */
+h2 {
+margin: 0 0 1em 0;
+font: normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
+color: #000000;
+text-transform: uppercase;
+}
+/* Widgets
+----------------------------------------------- */
+.widget .zippy {
+color: #999999;
+text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
+}
+.widget .popular-posts ul {
+list-style: none;
+}
+/* Posts
+----------------------------------------------- */
+.date-header span {
+background-color: transparent;
+color: #222222;
+padding: inherit;
+letter-spacing: inherit;
+margin: inherit;
+}
+.main-inner {
+padding-top: 30px;
+padding-bottom: 30px;
+}
+.main-inner .column-center-inner {
+padding: 0 15px;
+}
+.main-inner .column-center-inner .section {
+margin: 0 15px;
+}
+.post {
+margin: 0 0 25px 0;
+}
+h3.post-title, .comments h4 {
+font: normal bold 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
+margin: .75em 0 0;
+}
+.post-body {
+font-size: 110%;
+line-height: 1.4;
+position: relative;
+}
+.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
+.BlogList .item-thumbnail img {
+padding: 2px;
+background: #ffffff;
+border: 1px solid #eeeeee;
+-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
+-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
+box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
+}
+.post-body img, .post-body .tr-caption-container {
+padding: 5px;
+}
+.post-body .tr-caption-container {
+color: #222222;
+}
+.post-body .tr-caption-container img {
+padding: 0;
+background: transparent;
+border: none;
+-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
+-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
+box-shadow: 0 0 0 rgba(0, 0, 0, .1);
+}
+.post-header {
+margin: 0 0 1.5em;
+line-height: 1.6;
+font-size: 90%;
+}
+.post-footer {
+margin: 20px -2px 0;
+padding: 5px 10px;
+color: #666666;
+background-color: #f9f9f9;
+border-bottom: 1px solid #eeeeee;
+line-height: 1.6;
+font-size: 90%;
+}
+#comments .comment-author {
+padding-top: 1.5em;
+border-top: 1px solid #eeeeee;
+background-position: 0 1.5em;
+}
+#comments .comment-author:first-child {
+padding-top: 0;
+border-top: none;
+}
+.avatar-image-container {
+margin: .2em 0 0;
+}
+#comments .avatar-image-container img {
+border: 1px solid #eeeeee;
+}
+/* Comments
+----------------------------------------------- */
+.comments .comments-content .icon.blog-author {
+background-repeat: no-repeat;
+background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
+}
+.comments .comments-content .loadmore a {
+border-top: 1px solid #999999;
+border-bottom: 1px solid #999999;
+}
+.comments .comment-thread.inline-thread {
+background-color: #f9f9f9;
+}
+.comments .continue {
+border-top: 2px solid #999999;
+}
+/* Accents
+---------------------------------------------- */
+.section-columns td.columns-cell {
+border-left: 1px solid #eeeeee;
+}
+.blog-pager {
+background: transparent none no-repeat scroll top center;
+}
+.blog-pager-older-link, .home-link,
+.blog-pager-newer-link {
+background-color: #ffffff;
+padding: 5px;
+}
+.footer-outer {
+border-top: 0 dashed #bbbbbb;
+}
+/* Mobile
+----------------------------------------------- */
+body.mobile  {
+background-size: auto;
+}
+.mobile .body-fauxcolumn-outer {
+background: transparent none repeat scroll top left;
+}
+.mobile .body-fauxcolumn-outer .cap-top {
+background-size: 100% auto;
+}
+.mobile .content-outer {
+-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+padding: 0 40px;
+}
+body.mobile .AdSense {
+margin: 0 -40px;
+}
+.mobile .tabs-inner .widget ul {
+margin-left: 0;
+margin-right: 0;
+}
+.mobile .post {
+margin: 0;
+}
+.mobile .main-inner .column-center-inner .section {
+margin: 0;
+}
+.mobile .date-header span {
+padding: 0.1em 10px;
+margin: 0 -10px;
+}
+.mobile h3.post-title {
+margin: 0;
+}
+.mobile .blog-pager {
+background: transparent none no-repeat scroll top center;
+}
+.mobile .footer-outer {
+border-top: none;
+}
+.mobile .main-inner, .mobile .footer-inner {
+background-color: #ffffff;
+}
+.mobile-index-contents {
+color: #222222;
+}
+.mobile-link-button {
+background-color: #2288bb;
+}
+.mobile-link-button a:link, .mobile-link-button a:visited {
+color: #ffffff;
+}
+.mobile .tabs-inner .section:first-child {
+border-top: none;
+}
+.mobile .tabs-inner .PageList .widget-content {
+background-color: #eeeeee;
+color: #000000;
+border-top: 1px solid #eeeeee;
+border-bottom: 1px solid #eeeeee;
+}
+.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
+border-left: 1px solid #eeeeee;
+}
+.kwd{color:#93C763}
+.com{color:#66747B}
+.typ{color:#678CB1}
+.lit{color:#FACD22}
+.tag{color:#8AC763}
+.atn{color:#E0E2E4}
+.dec{color:purple}
+pre.prettyprint{border:0 solid #888}
+.prettyprint{background:#000}
+li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}
+li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}
+.str,.atv{color:#EC7600}
+.pun,.pln{color:#F1F2F3}
+.prettyprinted{word-wrap:break-word;background:#000;border-radius:10px}
+@media print {
+.com{color:#600;font-style:italic}
+.typ{color:#404;font-weight:700}
+.lit{color:#044}
+.pun{color:#440}
+.pln{color:#000}
+.atn{color:#404}
+.str,.atv{color:#060}
+.kwd,.tag{color:#006;font-weight:700}
+}.descriptionwrapper {
+margin-bottom:5px !important;
+}
+.Header h1 {
+margin-bottom:2px !important;
+}
+.titlewrapper {
+line-height:1.01 !important;
+padding-bottom:1px !important;
+}
+.main-inner {
+padding-top:5px !important;
+}
+.post-title {
+margin-top:5px !important;
+}
+--></style>
+<style id='template-skin-1' type='text/css'><!--
+body {
+min-width: 1024px;
+}
+.content-outer, .content-fauxcolumn-outer, .region-inner {
+min-width: 1024px;
+max-width: 1024px;
+_width: 1024px;
+}
+.main-inner .columns {
+padding-left: 0px;
+padding-right: 200px;
+}
+.main-inner .fauxcolumn-center-outer {
+left: 0px;
+right: 200px;
+/* IE6 does not respect left and right together */
+_width: expression(this.parentNode.offsetWidth -
+parseInt("0px") -
+parseInt("200px") + 'px');
+}
+.main-inner .fauxcolumn-left-outer {
+width: 0px;
+}
+.main-inner .fauxcolumn-right-outer {
+width: 200px;
+}
+.main-inner .column-left-outer {
+width: 0px;
+right: 100%;
+margin-left: -0px;
+}
+.main-inner .column-right-outer {
+width: 200px;
+margin-right: -200px;
+}
+#layout {
+min-width: 0;
+}
+#layout .content-outer {
+min-width: 0;
+width: 800px;
+}
+#layout .region-inner {
+min-width: 0;
+width: auto;
+}
+--></style>
+<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
+    MathJax.Hub.Config({
+        HTML: ["input/TeX","output/HTML-CSS"],
+        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], 
+               equationNumbers: { autoNumber: "AMS" } },
+        extensions: ["tex2jax.js"],
+        jax: ["input/TeX","output/HTML-CSS"],
+        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+                   processEscapes: true },
+        "HTML-CSS": { availableFonts: ["TeX"],
+                      linebreaks: { automatic: true } }
+    });
+</script>
+<script type="text/javascript">function a(){let b=window.location.href,c=b.split("?");switch(c.length){case 1:return b+"?m=1";case 2:return 0<=c[1].search("(^|&)m=")?null:b+"&m=1";default:return null}}let d=navigator.userAgent;if(-1!=d.indexOf("Mobile")&&-1!=d.indexOf("WebKit")&&-1==d.indexOf("iPad")||-1!=d.indexOf("Opera Mini")||-1!=d.indexOf("IEMobile")){let e=a();e&&window.location.replace(e)};
+</script></head>
+<body class='loading'>
+<div class='navbar section' id='navbar'><div class='widget Navbar' data-version='1' id='Navbar1'><script type="text/javascript">
+    function setAttributeOnload(object, attribute, val) {
+      if(window.addEventListener) {
+        window.addEventListener('load',
+          function(){ object[attribute] = val; }, false);
+      } else {
+        window.attachEvent('onload', function(){ object[attribute] = val; });
+      }
+    }
+  </script>
+<div id="navbar-iframe-container"></div>
+<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
+<script type="text/javascript">
+      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
+        if (gapi.iframes && gapi.iframes.getContext) {
+          gapi.iframes.getContext().openChild({
+              url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d7620301364506750761\x26blogName\x3dNowhere+Near+Ithaca\x26publishMode\x3dPUBLISH_MODE_HOSTED\x26navbarType\x3dBLUE\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttp://www.nowherenearithaca.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://www.nowherenearithaca.com/\x26targetPostID\x3d4739099319381019739\x26blogPostOrPageUrl\x3dhttp://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html\x26vt\x3d3808413806741874143',
+              where: document.getElementById("navbar-iframe-container"),
+              id: "navbar-iframe"
+          });
+        }
+      });
+    </script><script type="text/javascript">
+(function() {
+let script = document.createElement('script');
+script.type = 'text/javascript';
+script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
+let head = document.getElementsByTagName('head')[0];
+if (head) {
+head.appendChild(script);
+}})();
+</script>
+</div></div>
+<div class='body-fauxcolumns'>
+<div class='fauxcolumn-outer body-fauxcolumn-outer'>
+<div class='cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left'>
+<div class='fauxborder-right'></div>
+<div class='fauxcolumn-inner'>
+</div>
+</div>
+<div class='cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+</div>
+<div class='content'>
+<div class='content-fauxcolumns'>
+<div class='fauxcolumn-outer content-fauxcolumn-outer'>
+<div class='cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left'>
+<div class='fauxborder-right'></div>
+<div class='fauxcolumn-inner'>
+</div>
+</div>
+<div class='cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+</div>
+<div class='content-outer'>
+<div class='content-cap-top cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left content-fauxborder-left'>
+<div class='fauxborder-right content-fauxborder-right'></div>
+<div class='content-inner'>
+<header>
+<div class='header-outer'>
+<div class='header-cap-top cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left header-fauxborder-left'>
+<div class='fauxborder-right header-fauxborder-right'></div>
+<div class='region-inner header-inner'>
+<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
+<div id='header-inner'>
+<div class='titlewrapper'>
+<h1 class='title'>
+<a href='http://www.nowherenearithaca.com/'>Nowhere Near Ithaca</a>
+</h1>
+</div>
+<div class='descriptionwrapper'>
+<p class='description'><span>In search of the Ahh and Aha via Data Visualization.
+<br>
+<a href="mailto:bradflyon@gmail.com">bradflyon@gmail.com</a>
+<br href="nowhere">
+<a href="http://www.nowherenearithaca.com/2014/02/a-summary-of-some-of-my-visualizations.html">A Summary of My Visualizations</a>
+<br>
+<a href="http://learnforeverlearn.com/hm/">About Me</a></span></p>
+</div>
+</div>
+</div></div>
+</div>
+</div>
+<div class='header-cap-bottom cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+</header>
+<div class='tabs-outer'>
+<div class='tabs-cap-top cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left tabs-fauxborder-left'>
+<div class='fauxborder-right tabs-fauxborder-right'></div>
+<div class='region-inner tabs-inner'>
+<div class='tabs no-items section' id='crosscol'></div>
+<div class='tabs no-items section' id='crosscol-overflow'></div>
+</div>
+</div>
+<div class='tabs-cap-bottom cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+<div class='main-outer'>
+<div class='main-cap-top cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left main-fauxborder-left'>
+<div class='fauxborder-right main-fauxborder-right'></div>
+<div class='region-inner main-inner'>
+<div class='columns fauxcolumns'>
+<div class='fauxcolumn-outer fauxcolumn-center-outer'>
+<div class='cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left'>
+<div class='fauxborder-right'></div>
+<div class='fauxcolumn-inner'>
+</div>
+</div>
+<div class='cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+<div class='fauxcolumn-outer fauxcolumn-left-outer'>
+<div class='cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left'>
+<div class='fauxborder-right'></div>
+<div class='fauxcolumn-inner'>
+</div>
+</div>
+<div class='cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+<div class='fauxcolumn-outer fauxcolumn-right-outer'>
+<div class='cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left'>
+<div class='fauxborder-right'></div>
+<div class='fauxcolumn-inner'>
+</div>
+</div>
+<div class='cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+<!-- corrects IE6 width calculation -->
+<div class='columns-inner'>
+<div class='column-center-outer'>
+<div class='column-center-inner'>
+<div class='main section' id='main'><div class='widget Blog' data-version='1' id='Blog1'>
+<div class='blog-posts hfeed'>
+
+          <div class="date-outer">
+        
+
+          <div class="date-posts">
+        
+<div class='post-outer'>
+<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
+<a name='4739099319381019739'></a>
+<h3 class='post-title entry-title' itemprop='name'>
+Javascript "Prototype" Confusion, and the Dubiously Useful "instanceof"
+</h3>
+<div class='post-header'>
+<div class='post-header-line-1'></div>
+</div>
+<div class='post-body entry-content' id='post-body-4739099319381019739' itemprop='articleBody'>
+
+
+<link href="http://yandex.st/highlightjs/7.5/styles/default.min.css" rel="stylesheet">
+<script src="http://yandex.st/highlightjs/7.5/highlight.min.js"></script>
+
+<script>hljs.initHighlightingOnLoad();</script>
+
+<style>
+ .main {
+   font-size:18px;
+ }
+
+.descriptionwrapper [href*='learnforever'] {
+
+  display:none !important;
+
+}
+
+
+.command {
+  padding-left:4px;
+  padding-right:4px;
+  border: 1px solid #ddd;
+  border-radius:3px;
+  background:#f8f8f8;
+}
+
+code {
+
+  padding-left:4px;
+  padding-right:4px;
+  border: 1px solid #eee;
+  border-radius:3px;
+  ibackground:#f8f8f8;
+  background:#f9f9f5;
+
+
+  font-size:90%;
+  font-family:inherit;
+
+  iborder-radius:5px;
+  iborder:1px solid #888;
+}
+
+span.keyword, code .keyword {
+    color: rgb(170, 13, 145);
+    font-weight:normal;
+  }
+  code .comment {
+    color: rgb(0,116,0);
+    font-weight:normal;
+  }
+  code .title {
+   color:black; 
+   font-weight:normal;
+  }
+  code .number {color: rgb(28, 0, 207);}
+  code .string {color: rgb(196, 26, 22);}
+
+
+.imageTitle {
+  font-size:100%;
+  text-align:center;
+  font-weight:bold;
+}
+
+.mySection {
+  margin-top:15px;
+  margin-bottom:10px;
+  font-size:120%;
+  font-weight:bold;
+}
+
+.mySubSection {
+  margin-top:15px;
+  margin-bottom:10px;
+  font-size:110%;
+  font-weight:bold;
+}
+
+blockquote {
+  ifont: 14px/22px normal helvetica, sans-serif;
+  font: normal helvetica, sans-serif;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 50px;
+  padding-left: 15px;
+  border-left: 3px solid #ccc;
+} 
+
+blockquote p {
+  ifont-style:italic;
+}
+
+.warning {
+
+  ifont-weight:bold;
+
+}
+
+</style>
+
+<div class="main">
+
+<!--
+<blockquote>
+    <p>Curious madness reigns when different things are named the same.</p>
+</blockquote>
+-->
+
+<p>Recently, I became aware that I was more confused than I realized regarding javascript's use of the word "prototype", as the word is used in two different ways.  
+</p>
+<p>This draft note is the result of pondering on this a bit more.  This pondering also resulted in some clarification (for me) of how the <code>instanceof</code> operator seems to work, and how its utility is doubtful.
+</p>
+
+<a name='more'></a>
+
+<!--
+<div class="mySection">
+  Javascript and its Confusing Use of the Word "prototype"
+</div>
+-->
+
+
+<div class="mySubSection">
+Every object has a prototype, accessed via its "__proto__" property
+</div>
+
+<p>Javascript objects are just bags of named things: properties.  Properties can be other objects, functions (which are also objects), or primitives like numbers and strings.  </p>
+
+<p>Every javascript object has a prototype, which can be accessed directly in most modern browsers via the named property <code>__proto__</code>. </p>
+
+<p>
+When a property named <code>foo</code> is requested from an object <code>obj</code> via <code>obj.foo</code>, first the set of properties for object itself is searched for the property.  If it is not found, then <code>obj.__proto__</code> is searched for a property named <code>foo</code>.  If not found there, then it searches <code>obj.__proto__.__proto__</code>, continuing up the "prototype chain" until it either finds the property or <code>obj.__proto__.__proto__....__proto__</code> is null, and <code>undefined</code> is returned.  
+Note that the javascript engine is supposed to prevent cyclic loops in the prototype chain.
+</p>
+
+
+<p><span class="warning">Again: the name of the property for the prototype of an object is not "prototype"</span>: its name is "__proto__".</p>
+
+<p>That is one part of the potential confusion.</p>
+
+<!--
+-->
+
+<div class="mySubSection">
+Every javascript function <code>f</code> has a property named "prototype" - which is not its prototype
+</div>
+
+
+<p>This is another part of the potential confusion.</p>
+
+<p>
+<span class="warning"><code>f.prototype</code>is not the function's
+        prototype.</span>  
+</p>
+
+<p>
+As for any object, <code>f.__proto__</code> is the function's prototype.
+</p>
+
+<div class="mySubSection">
+What is the purpose of <code>f.prototype</code>?
+</div>
+
+<p>Any function <code>f</code> can be used to generate new objects via <code>newObject = new f(args)</code>.
+When used this way, <code>f</code> is sometimes called the "constructor" for <code>newObject</code>.
+<!--  <span class="warning">Any function can be used as a constructor to make new objects.
+</span>  
+-->
+</p>
+
+<p>When an object is created from a function <code>f</code> via <code>newObject = new f(args)</code>, the new object's prototype <code>__proto__</code>
+property is set to the property named "prototype" of <code>f</code>:  
+<code>newObject.__proto__ = f.prototype </code>.</p>
+
+<p>That is what <code>f.prototype</code> is used for.</p>
+
+<p>Note that there are other ways to create an object with a specified prototype, and in fact these other methods are recommended by some folks, avoiding the "new" keyword altogether.</p>
+
+<div class="mySection">
+Aside: The "constructor" Property
+</div>
+
+<p>While every function can be used as a constructor, there is also a property named "constructor" for some objects.</p>
+
+<p>
+In particular, for any function <code>f</code>,  <code>f.prototype.constructor = f</code>.
+</p>
+
+<p>Since objects created from <code>f</code> via <code>new f(args)</code> have their "__proto__" property initialized to <code>f.prototype</code>, this means that for any object <code>newObject</code> created via <code>newObject = new f(args)</code> for some function <code>f</code>, <code>newObject.constructor</code> will refer to the function used to create the object.  Initially, at least, as you can change the <code>constructor</code> later.
+</p>
+
+<p>Other than a record of the object's ancestry that might be useful in a handful of cases (that I've never encountered), I don't know how the knowledge of the constructor would be generally useful.</p>
+
+
+<div class="mySection">
+  What this has to do with how javascript's <code>instanceof</code> works
+</div>
+
+<p>Javascript has an <code>instanceof</code> operator that returns true or false, and can be called like so:
+<pre><code>obj instanceof f
+</code></pre>
+<p>You can only use a function on the right side: <code>instanceof</code> will throw an error if <code>f</code> is not a function.</p>
+
+<p>The Mozilla Developer network <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">summarizes this operator quite succinctly</a>  (I have used "function" instead of "constructor", since every function can be a constructor):
+
+<blockquote>
+The instanceof operator tests whether an object has in its prototype chain the prototype property of a given function.
+</blockquote>
+
+</p>
+
+<!--
+<p>Note: Remember that every function can be used as a constructor, so "constructor" and "function" are really synonyms here.<p>
+-->
+
+
+<!--
+<p>You might thing this returns true if <code>obj.constructor === someFunction</code>, since that would imply that <code>obj</code> had been created via <code>obj = new someFunction()</code>.  
+</p>
+-->
+<!--Of course, if thinking in a classical OOP way, something could be an instance of something else if its parent class was built fromFunction, or its parent's parent, etc.</p>
+-->
+
+ 
+<p>This is illustrated in the figure below.</p>
+
+
+<!--
+<p>It's actually a stronger comparison check that is performed, as indicated in the figure below.</p>
+-->
+
+<!--
+<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s1600/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s1600/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png" /></a></div>
+-->
+<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-x-pC59QdbIQ/VODjCYbRaCI/AAAAAAAACjY/G3CNlkryfWI/s1600/Screen%2BShot%2B2015-02-15%2Bat%2B1.17.53%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-x-pC59QdbIQ/VODjCYbRaCI/AAAAAAAACjY/G3CNlkryfWI/s1600/Screen%2BShot%2B2015-02-15%2Bat%2B1.17.53%2BPM.png" /></a></div>
+
+<div class="imageTitle">
+(<code>obj</code> instanceof <code>f
+</code>) is true
+if <code>f.prototype</code> is equal to
+<br/>
+any <code>__proto__</code> in
+the prototype chain of <code>obj</code>
+</div>
+
+<div class="mySubSection">Do People Use <code>instanceof</code>?</div>
+
+<p>Answer: I think few do.</p>
+
+<!--
+<p>How often to folks even use the <code>instanceof</code> operator?  I don't think very often. 
+</p>
+-->
+
+<p> When <a href="https://twitter.com/bflyon/status/564456480318173185">queried on twitter</a>, both <a href="https://twitter.com/_ericelliott">Eric Elliot</a> and <a href="https://twitter.com/getify">Kyle Simpson</a> (two javascript folks I think a lot of) tweeted back that they never did.  When I <a href="https://news.ycombinator.com/item?id=9031262">asked on hacker news</a>, one commenter said it was a code smell, while another said it was useful when checking if an object is an array (it should be noted that jquery checks the result of a toString call to determine if something is an array).</p>
+
+<p>There are also problems with trying to use <code>instanceof</code> across iframes.</p>
+
+<p><a href="https://twitter.com/kangax">@kangax</a> <a href="http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/">discourages its use</a> (2009).  He also recommends the same method jquery uses to check if something is an array, btw.<p>
+
+<p>Crockford has remarked (in 2003) about the <a href="https://groups.google.com/forum/#!msg/comp.lang.javascript/XTWYCOwC96I/70rNoQ3L-xoJ">useless instanceof operator</a> (link via kangax's article).<p>
+
+<p>So, I don't foresee using it much myself, but it is personally satisfying to come to a better understanding of it and the surrounding javascript constructs.</p>
+
+
+
+<!--
+<p>This operator will return true if <code>someFunction.prototype</code> is equal to 
+<code>obj.__proto__</code>, or
+<code>obj.__proto__.__proto__</code>, etc.
+</p>
+-->
+
+
+<div class="mySection">
+And be Warned...
+</div>
+
+
+<p>Compared to "standard" OOP that can result in rigid, iron-like structures that complicate change and reuse, javascript with its prototype-based reuse pattern is as firm as a jello: you can change things bit more willy-nilly, if you so desire.</p>
+
+<p>In particular, you can muck with the prototype and constructor properties after-the-fact, and this would likely invalidate the notes above in whatever curious ways you (or the code you are using) has mucked with things.</p>
+
+<!--
+<p>While this malleability complicates cut-and-dry attempts at understanding and explaining, it also results in, as <a href="http://javascript.crockford.com/survey.html">noted by Crockford in 2002</a>, a "powerful and expressive language."  And, imo, there be beauty afoot as well.</p>
+-->
+
+</div>
+<div style='clear: both;'></div>
+</div>
+<div class='post-footer'>
+<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
+Posted by
+<span class='fn'>
+<a href='https://plus.google.com/102736576072808601046' itemprop='author' rel='author' title='author profile'>
+B Lyon
+</a>
+</span>
+</span>
+<span class='post-comment-link'>
+</span>
+<span class='post-icons'>
+<span class='item-control blog-admin pid-1612364394'>
+<a href='https://www.blogger.com/post-edit.g?blogID=7620301364506750761&postID=4739099319381019739&from=pencil' title='Edit Post'>
+<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
+</a>
+</span>
+</span>
+</div>
+<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
+Labels:
+<a href='http://www.nowherenearithaca.com/search/label/javascript' rel='tag'>javascript</a>
+</span>
+</div>
+<div class='post-footer-line post-footer-line-3'></div>
+</div>
+</div>
+<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
+<div class='cmt_iframe_holder' data-href='http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html' data-viewtype='FILTERED_POSTMOD'></div>
+</div>
+
+        </div></div>
+      
+</div>
+<div class='blog-pager' id='blog-pager'>
+<span id='blog-pager-newer-link'>
+<a class='blog-pager-newer-link' href='http://www.nowherenearithaca.com/2015/02/are-symbols-in-es6-worth-weight.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
+</span>
+<span id='blog-pager-older-link'>
+<a class='blog-pager-older-link' href='http://www.nowherenearithaca.com/2015/01/animating-family-trees-la-pachinko.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
+</span>
+<a class='home-link' href='http://www.nowherenearithaca.com/'>Home</a>
+</div>
+<div class='clear'></div>
+<div class='post-feeds'>
+<div class='feed-links'>
+Subscribe to:
+<a class='feed-link' href='http://www.nowherenearithaca.com/feeds/4739099319381019739/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
+</div>
+</div>
+<script type="text/javascript">window.___gcfg = {'lang': 'en'};</script>
+</div><div class='widget PopularPosts' data-version='1' id='PopularPosts1'>
+<h2>Popular Posts</h2>
+<div class='widget-content popular-posts'>
+<ul>
+<li>
+<div class='item-content'>
+<div class='item-thumbnail'>
+<a href='http://www.nowherenearithaca.com/2012/12/simulating-us-birthsdeaths-in-real-time.html' target='_blank'>
+<img alt='' border='0' src='http://4.bp.blogspot.com/--FlFNxOuXB4/VBxaQxKqE4I/AAAAAAAACPQ/jhzjBxnSHHQ/w72-h72-p-nu/Screen%2BShot%2B2014-09-19%2Bat%2B12.27.26%2BPM.png'/>
+</a>
+</div>
+<div class='item-title'><a href='http://www.nowherenearithaca.com/2012/12/simulating-us-birthsdeaths-in-real-time.html'>Simulating US Births/Deaths in Real-Time - a D3 Visualization</a></div>
+<div class='item-snippet'> Note: I have extended this to a visualization for the entire world, which is on googledrive here .   Recently, I was wondering how what it ...</div>
+</div>
+<div style='clear: both;'></div>
+</li>
+<li>
+<div class='item-content'>
+<div class='item-thumbnail'>
+<a href='http://www.nowherenearithaca.com/2014/02/a-summary-of-some-of-my-visualizations.html' target='_blank'>
+<img alt='' border='0' src='http://2.bp.blogspot.com/-c1yaJ-Jo9sY/Uwi4WM7omZI/AAAAAAAABh0/NwP5TWroB_A/w72-h72-p-nu/Screen+Shot+2014-02-22+at+9.26.49+AM.png'/>
+</a>
+</div>
+<div class='item-title'><a href='http://www.nowherenearithaca.com/2014/02/a-summary-of-some-of-my-visualizations.html'>A Summary of Some of My Visualizations</a></div>
+<div class='item-snippet'>     The purpose of this page is to summarize in one place some of the interactive visualizations I have worked on. Most of these were built...</div>
+</div>
+<div style='clear: both;'></div>
+</li>
+</ul>
+<div class='clear'></div>
+<span class='widget-item-control'>
+<span class='item-control blog-admin'>
+<a class='quickedit' href='//www.blogger.com/rearrange?blogID=7620301364506750761&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=main' onclick='return _WidgetManager._PopupConfig(document.getElementById("PopularPosts1"));' target='configPopularPosts1' title='Edit'>
+<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
+</a>
+</span>
+</span>
+<div class='clear'></div>
+</div>
+</div></div>
+</div>
+</div>
+<div class='column-left-outer'>
+<div class='column-left-inner'>
+<aside>
+</aside>
+</div>
+</div>
+<div class='column-right-outer'>
+<div class='column-right-inner'>
+<aside>
+<div class='sidebar section' id='sidebar-right-1'><div class='widget Text' data-version='1' id='Text2'>
+<div class='widget-content'>
+<span  iclass="Apple-style-span"  style="icolor: rgb(34, 34, 34); line-height: 16px;font-family:Georgia, Utopia, 'palatino linotype', Palatino, serif;font-size:12px;">"When you start on your journey to Ithaca, then pray that the road is long, full of adventure, full of knowledge... Always keep Ithaca fixed in your mind. To arrive there is your ultimate goal. But do not hurry the voyage at all." (from "Ithaca", by C. P. Cavafy)</span>
+</div>
+<div class='clear'></div>
+<span class='widget-item-control'>
+<span class='item-control blog-admin'>
+<a class='quickedit' href='//www.blogger.com/rearrange?blogID=7620301364506750761&widgetType=Text&widgetId=Text2&action=editWidget&sectionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("Text2"));' target='configText2' title='Edit'>
+<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
+</a>
+</span>
+</span>
+<div class='clear'></div>
+</div><div class='widget Label' data-version='1' id='Label1'>
+<h2>Labels</h2>
+<div class='widget-content list-label-widget-content'>
+<ul>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/d3'>d3</a>
+<span dir='ltr'>(59)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/javascript'>javascript</a>
+<span dir='ltr'>(30)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/Exploring...'>Exploring...</a>
+<span dir='ltr'>(16)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/algorithms'>algorithms</a>
+<span dir='ltr'>(7)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/pagerank'>pagerank</a>
+<span dir='ltr'>(5)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/quicksort'>quicksort</a>
+<span dir='ltr'>(4)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/design'>design</a>
+<span dir='ltr'>(3)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/bigrams'>bigrams</a>
+<span dir='ltr'>(2)</span>
+</li>
+<li>
+<a dir='ltr' href='http://www.nowherenearithaca.com/search/label/Summary'>Summary</a>
+<span dir='ltr'>(1)</span>
+</li>
+</ul>
+<div class='clear'></div>
+<span class='widget-item-control'>
+<span class='item-control blog-admin'>
+<a class='quickedit' href='//www.blogger.com/rearrange?blogID=7620301364506750761&widgetType=Label&widgetId=Label1&action=editWidget&sectionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("Label1"));' target='configLabel1' title='Edit'>
+<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
+</a>
+</span>
+</span>
+<div class='clear'></div>
+</div>
+</div></div>
+</aside>
+</div>
+</div>
+</div>
+<div style='clear: both'></div>
+<!-- columns -->
+</div>
+<!-- main -->
+</div>
+</div>
+<div class='main-cap-bottom cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+<footer>
+<div class='footer-outer'>
+<div class='footer-cap-top cap-top'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+<div class='fauxborder-left footer-fauxborder-left'>
+<div class='fauxborder-right footer-fauxborder-right'></div>
+<div class='region-inner footer-inner'>
+<div class='foot no-items section' id='footer-1'></div>
+<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
+<tbody>
+<tr>
+<td class='first columns-cell'>
+<div class='foot no-items section' id='footer-2-1'></div>
+</td>
+<td class='columns-cell'>
+<div class='foot no-items section' id='footer-2-2'></div>
+</td>
+</tr>
+</tbody>
+</table>
+<!-- outside of the include in order to lock Attribution widget -->
+<div class='foot no-items section' id='footer-3'></div>
+</div>
+</div>
+<div class='footer-cap-bottom cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+</footer>
+<!-- content -->
+</div>
+</div>
+<div class='content-cap-bottom cap-bottom'>
+<div class='cap-left'></div>
+<div class='cap-right'></div>
+</div>
+</div>
+</div>
+<script type='text/javascript'>
+    window.setTimeout(function() {
+        document.body.className = document.body.className.replace('loading', '');
+      }, 10);
+  </script>
+<script type='text/javascript'>
+        let _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-38095489-1']);
+        _gaq.push(['_trackPageview']);
+        (function() {
+          let ga = document.createElement('script');
+          ga.type = 'text/javascript';
+          ga.async = true;
+          ga.src = (document.location.protocol == 'https:' ?
+                    'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+          let s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(ga, s);
+        })();
+      </script>
+<script>
+//<![CDATA[
+window['PR_SHOULD_USE_CONTINUATION']=true;let prettyPrintOne;let prettyPrint;(function(){let win=window;let FLOW_CONTROL_KEYWORDS=["break,continue,do,else,for,if,return,while"];let C_KEYWORDS=[FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default,"+"double,enum,extern,float,goto,int,long,register,short,signed,sizeof,"+"static,struct,switch,typedef,union,unsigned,void,volatile"];let COMMON_KEYWORDS=[C_KEYWORDS,"catch,class,delete,false,import,"+"new,operator,private,protected,public,this,throw,true,try,typeof"];let CPP_KEYWORDS=[COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool,"+"concept,concept_map,const_cast,constexpr,decltype,"+"dynamic_cast,explicit,export,friend,inline,late_check,"+"mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,"+"template,typeid,typename,using,virtual,where"];let JAVA_KEYWORDS=[COMMON_KEYWORDS,"abstract,boolean,byte,extends,final,finally,implements,import,"+"instanceof,null,native,package,strictfp,super,synchronized,throws,"+"transient"];let CSHARP_KEYWORDS=[JAVA_KEYWORDS,"as,base,by,checked,decimal,delegate,descending,dynamic,event,"+"fixed,foreach,from,group,implicit,in,interface,internal,into,is,let,"+"lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,"+"sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,"+"var,virtual,where"];let COFFEE_KEYWORDS="all,and,by,catch,class,else,extends,false,finally,"+"for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,"+"throw,true,try,unless,until,when,while,yes";let JSCRIPT_KEYWORDS=[COMMON_KEYWORDS,"debugger,eval,export,function,get,null,set,undefined,var,with,"+"Infinity,NaN"];let PERL_KEYWORDS="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,"+"goto,if,import,last,local,my,next,no,our,print,package,redo,require,"+"sub,undef,unless,until,use,wantarray,while,BEGIN,END";let PYTHON_KEYWORDS=[FLOW_CONTROL_KEYWORDS,"and,as,assert,class,def,del,"+"elif,except,exec,finally,from,global,import,in,is,lambda,"+"nonlocal,not,or,pass,print,raise,try,with,yield,"+"False,True,None"];let RUBY_KEYWORDS=[FLOW_CONTROL_KEYWORDS,"alias,and,begin,case,class,"+"def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,"+"rescue,retry,self,super,then,true,undef,unless,until,when,yield,"+"BEGIN,END"];let SH_KEYWORDS=[FLOW_CONTROL_KEYWORDS,"case,done,elif,esac,eval,fi,"+"function,in,local,set,then,until"];let ALL_KEYWORDS=[CPP_KEYWORDS,CSHARP_KEYWORDS,JSCRIPT_KEYWORDS,PERL_KEYWORDS+PYTHON_KEYWORDS,RUBY_KEYWORDS,SH_KEYWORDS];let C_TYPES=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;let PR_STRING='str';let PR_KEYWORD='kwd';let PR_COMMENT='com';let PR_TYPE='typ';let PR_LITERAL='lit';let PR_PUNCTUATION='pun';let PR_PLAIN='pln';let PR_TAG='tag';let PR_DECLARATION='dec';let PR_SOURCE='src';let PR_ATTRIB_NAME='atn';let PR_ATTRIB_VALUE='atv';let PR_NOCODE='nocode';let REGEXP_PRECEDER_PATTERN='(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';function combinePrefixPatterns(regexs){let capturedGroupIndex=0;let needToFoldCase=false;let ignoreCase=false;for(let i=0,n=regexs.length;i<n;++i){let regex=regexs[i];if(regex.ignoreCase){ignoreCase=true}else if(/[a-z]/i.test(regex.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,''))){needToFoldCase=true;ignoreCase=false;break}}let escapeCharToCodeUnit={'b':8,'t':9,'n':0xa,'v':0xb,'f':0xc,'r':0xd};function decodeEscape(charsetPart){let cc0=charsetPart.charCodeAt(0);if(cc0!==92){return cc0}let c1=charsetPart.charAt(1);cc0=escapeCharToCodeUnit[c1];if(cc0){return cc0}else if('0'<=c1&&c1<='7'){return parseInt(charsetPart.substring(1),8)}else if(c1==='u'||c1==='x'){return parseInt(charsetPart.substring(2),16)}else{return charsetPart.charCodeAt(1)}}function encodeEscape(charCode){if(charCode<0x20){return(charCode<0x10?'\\x0':'\\x')+charCode.toString(16)}let ch=String.fromCharCode(charCode);return(ch==='\\'||ch==='-'||ch===']'||ch==='^')?"\\"+ch:ch}function caseFoldCharset(charSet){let charsetParts=charSet.substring(1,charSet.length-1).match(new RegExp('\\\\u[0-9A-Fa-f]{4}'+'|\\\\x[0-9A-Fa-f]{2}'+'|\\\\[0-3][0-7]{0,2}'+'|\\\\[0-7]{1,2}'+'|\\\\[\\s\\S]'+'|-'+'|[^-\\\\]','g'));let ranges=[];let inverse=charsetParts[0]==='^';let out=['['];if(inverse){out.push('^')}for(let i=inverse?1:0,n=charsetParts.length;i<n;++i){let p=charsetParts[i];if(/\\[bdsw]/i.test(p)){out.push(p)}else{let start=decodeEscape(p);let end;if(i+2<n&&'-'===charsetParts[i+1]){end=decodeEscape(charsetParts[i+2]);i+=2}else{end=start}ranges.push([start,end]);if(!(end<65||start>122)){if(!(end<65||start>90)){ranges.push([Math.max(65,start)|32,Math.min(end,90)|32])}if(!(end<97||start>122)){ranges.push([Math.max(97,start)&~32,Math.min(end,122)&~32])}}}}ranges.sort(function(a,b){return(a[0]-b[0])||(b[1]-a[1])});let consolidatedRanges=[];let lastRange=[];for(let i=0;i<ranges.length;++i){let range=ranges[i];if(range[0]<=lastRange[1]+1){lastRange[1]=Math.max(lastRange[1],range[1])}else{consolidatedRanges.push(lastRange=range)}}for(let i=0;i<consolidatedRanges.length;++i){let range=consolidatedRanges[i];out.push(encodeEscape(range[0]));if(range[1]>range[0]){if(range[1]+1>range[0]){out.push('-')}out.push(encodeEscape(range[1]))}}out.push(']');return out.join('')}function allowAnywhereFoldCaseAndRenumberGroups(regex){let parts=regex.source.match(new RegExp('(?:'+'\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'+'|\\\\u[A-Fa-f0-9]{4}'+'|\\\\x[A-Fa-f0-9]{2}'+'|\\\\[0-9]+'+'|\\\\[^ux0-9]'+'|\\(\\?[:!=]'+'|[\\(\\)\\^]'+'|[^\\x5B\\x5C\\(\\)\\^]+'+')','g'));let n=parts.length;let capturedGroups=[];for(let i=0,groupIndex=0;i<n;++i){let p=parts[i];if(p==='('){++groupIndex}else if('\\'===p.charAt(0)){let decimalValue=+p.substring(1);if(decimalValue){if(decimalValue<=groupIndex){capturedGroups[decimalValue]=-1}else{parts[i]=encodeEscape(decimalValue)}}}}for(let i=1;i<capturedGroups.length;++i){if(-1===capturedGroups[i]){capturedGroups[i]=++capturedGroupIndex}}for(let i=0,groupIndex=0;i<n;++i){let p=parts[i];if(p==='('){++groupIndex;if(!capturedGroups[groupIndex]){parts[i]='(?:'}}else if('\\'===p.charAt(0)){let decimalValue=+p.substring(1);if(decimalValue&&decimalValue<=groupIndex){parts[i]='\\'+capturedGroups[decimalValue]}}}for(let i=0;i<n;++i){if('^'===parts[i]&&'^'!==parts[i+1]){parts[i]=''}}if(regex.ignoreCase&&needToFoldCase){for(let i=0;i<n;++i){let p=parts[i];let ch0=p.charAt(0);if(p.length>=2&&ch0==='['){parts[i]=caseFoldCharset(p)}else if(ch0!=='\\'){parts[i]=p.replace(/[a-zA-Z]/g,function(ch){let cc=ch.charCodeAt(0);return'['+String.fromCharCode(cc&~32,cc|32)+']'})}}}return parts.join('')}let rewritten=[];for(let i=0,n=regexs.length;i<n;++i){let regex=regexs[i];if(regex.global||regex.multiline){throw new Error(''+regex);}rewritten.push('(?:'+allowAnywhereFoldCaseAndRenumberGroups(regex)+')')}return new RegExp(rewritten.join('|'),ignoreCase?'gi':'g')}function extractSourceSpans(node,isPreformatted){let nocode=/(?:^|\s)nocode(?:\s|$)/;let chunks=[];let length=0;let spans=[];let k=0;function walk(node){switch(node.nodeType){case 1:if(nocode.test(node.className)){return}for(let child=node.firstChild;child;child=child.nextSibling){walk(child)}let nodeName=node.nodeName.toLowerCase();if('br'===nodeName||'li'===nodeName){chunks[k]='\n';spans[k<<1]=length++;spans[(k++<<1)|1]=node}break;case 3:case 4:let text=node.nodeValue;if(text.length){if(!isPreformatted){text=text.replace(/[ \t\r\n]+/g,' ')}else{text=text.replace(/\r\n?/g,'\n')}chunks[k]=text;spans[k<<1]=length;length+=text.length;spans[(k++<<1)|1]=node}break}}walk(node);return{sourceCode:chunks.join('').replace(/\n$/,''),spans:spans}}function appendDecorations(basePos,sourceCode,langHandler,out){if(!sourceCode){return}let job={sourceCode:sourceCode,basePos:basePos};langHandler(job);out.push.apply(out,job.decorations)}let notWs=/\S/;function childContentWrapper(element){let wrapper=undefined;for(let c=element.firstChild;c;c=c.nextSibling){let type=c.nodeType;wrapper=(type===1)?(wrapper?element:c):(type===3)?(notWs.test(c.nodeValue)?element:wrapper):wrapper}return wrapper===element?undefined:wrapper}function createSimpleLexer(shortcutStylePatterns,fallthroughStylePatterns){let shortcuts={};let tokenizer;(function(){let allPatterns=shortcutStylePatterns.concat(fallthroughStylePatterns);let allRegexs=[];let regexKeys={};for(let i=0,n=allPatterns.length;i<n;++i){let patternParts=allPatterns[i];let shortcutChars=patternParts[3];if(shortcutChars){for(let c=shortcutChars.length;--c>=0;){shortcuts[shortcutChars.charAt(c)]=patternParts}}let regex=patternParts[1];let k=''+regex;if(!regexKeys.hasOwnProperty(k)){allRegexs.push(regex);regexKeys[k]=null}}allRegexs.push(/[\0-\uffff]/);tokenizer=combinePrefixPatterns(allRegexs)})();let nPatterns=fallthroughStylePatterns.length;let decorate=function(job){let sourceCode=job.sourceCode,basePos=job.basePos;let decorations=[basePos,PR_PLAIN];let pos=0;let tokens=sourceCode.match(tokenizer)||[];let styleCache={};for(let ti=0,nTokens=tokens.length;ti<nTokens;++ti){let token=tokens[ti];let style=styleCache[token];let match=void 0;let isEmbedded;if(typeof style==='string'){isEmbedded=false}else{let patternParts=shortcuts[token.charAt(0)];if(patternParts){match=token.match(patternParts[1]);style=patternParts[0]}else{for(let i=0;i<nPatterns;++i){patternParts=fallthroughStylePatterns[i];match=token.match(patternParts[1]);if(match){style=patternParts[0];break}}if(!match){style=PR_PLAIN}}isEmbedded=style.length>=5&&'lang-'===style.substring(0,5);if(isEmbedded&&!(match&&typeof match[1]==='string')){isEmbedded=false;style=PR_SOURCE}if(!isEmbedded){styleCache[token]=style}}let tokenStart=pos;pos+=token.length;if(!isEmbedded){decorations.push(basePos+tokenStart,style)}else{let embeddedSource=match[1];let embeddedSourceStart=token.indexOf(embeddedSource);let embeddedSourceEnd=embeddedSourceStart+embeddedSource.length;if(match[2]){embeddedSourceEnd=token.length-match[2].length;embeddedSourceStart=embeddedSourceEnd-embeddedSource.length}let lang=style.substring(5);appendDecorations(basePos+tokenStart,token.substring(0,embeddedSourceStart),decorate,decorations);appendDecorations(basePos+tokenStart+embeddedSourceStart,embeddedSource,langHandlerForExtension(lang,embeddedSource),decorations);appendDecorations(basePos+tokenStart+embeddedSourceEnd,token.substring(embeddedSourceEnd),decorate,decorations)}}job.decorations=decorations};return decorate}function sourceDecorator(options){let shortcutStylePatterns=[],fallthroughStylePatterns=[];if(options['tripleQuotedStrings']){shortcutStylePatterns.push([PR_STRING,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,'\'"'])}else if(options['multiLineStrings']){shortcutStylePatterns.push([PR_STRING,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,'\'"`'])}else{shortcutStylePatterns.push([PR_STRING,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,'"\''])}if(options['verbatimStrings']){fallthroughStylePatterns.push([PR_STRING,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}let hc=options['hashComments'];if(hc){if(options['cStyleComments']){if(hc>1){shortcutStylePatterns.push([PR_COMMENT,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,'#'])}else{shortcutStylePatterns.push([PR_COMMENT,/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,null,'#'])}fallthroughStylePatterns.push([PR_STRING,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])}else{shortcutStylePatterns.push([PR_COMMENT,/^#[^\r\n]*/,null,'#'])}}if(options['cStyleComments']){fallthroughStylePatterns.push([PR_COMMENT,/^\/\/[^\r\n]*/,null]);fallthroughStylePatterns.push([PR_COMMENT,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(options['regexLiterals']){let REGEX_LITERAL=('/(?=[^/*])'+'(?:[^/\\x5B\\x5C]'+'|\\x5C[\\s\\S]'+'|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'+'/');fallthroughStylePatterns.push(['lang-regex',new RegExp('^'+REGEXP_PRECEDER_PATTERN+'('+REGEX_LITERAL+')')])}let types=options['types'];if(types){fallthroughStylePatterns.push([PR_TYPE,types])}let keywords=(""+options['keywords']).replace(/^ | $/g,'');if(keywords.length){fallthroughStylePatterns.push([PR_KEYWORD,new RegExp('^(?:'+keywords.replace(/[\s,]+/g,'|')+')\\b'),null])}shortcutStylePatterns.push([PR_PLAIN,/^\s+/,null,' \r\n\t\xA0']);let punctuation=/^.[^\s\w\.$@\'\"\`\/\\]*/;fallthroughStylePatterns.push([PR_LITERAL,/^@[a-z_$][a-z_$@0-9]*/i,null],[PR_TYPE,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[PR_PLAIN,/^[a-z_$][a-z_$@0-9]*/i,null],[PR_LITERAL,new RegExp('^(?:'+'0x[a-f0-9]+'+'|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'+'(?:e[+\\-]?\\d+)?'+')'+'[a-z]*','i'),null,'0123456789'],[PR_PLAIN,/^\\[\s\S]?/,null],[PR_PUNCTUATION,punctuation,null]);return createSimpleLexer(shortcutStylePatterns,fallthroughStylePatterns)}let decorateSource=sourceDecorator({'keywords':ALL_KEYWORDS,'hashComments':true,'cStyleComments':true,'multiLineStrings':true,'regexLiterals':true});function numberLines(node,opt_startLineNum,isPreformatted){let nocode=/(?:^|\s)nocode(?:\s|$)/;let lineBreak=/\r\n?|\n/;let document=node.ownerDocument;let li=document.createElement('li');while(node.firstChild){li.appendChild(node.firstChild)}let listItems=[li];function walk(node){switch(node.nodeType){case 1:if(nocode.test(node.className)){break}if('br'===node.nodeName){breakAfter(node);if(node.parentNode){node.parentNode.removeChild(node)}}else{for(let child=node.firstChild;child;child=child.nextSibling){walk(child)}}break;case 3:case 4:if(isPreformatted){let text=node.nodeValue;let match=text.match(lineBreak);if(match){let firstLine=text.substring(0,match.index);node.nodeValue=firstLine;let tail=text.substring(match.index+match[0].length);if(tail){let parent=node.parentNode;parent.insertBefore(document.createTextNode(tail),node.nextSibling)}breakAfter(node);if(!firstLine){node.parentNode.removeChild(node)}}}break}}function breakAfter(lineEndNode){while(!lineEndNode.nextSibling){lineEndNode=lineEndNode.parentNode;if(!lineEndNode){return}}function breakLeftOf(limit,copy){let rightSide=copy?limit.cloneNode(false):limit;let parent=limit.parentNode;if(parent){let parentClone=breakLeftOf(parent,1);let next=limit.nextSibling;parentClone.appendChild(rightSide);for(let sibling=next;sibling;sibling=next){next=sibling.nextSibling;parentClone.appendChild(sibling)}}return rightSide}let copiedListItem=breakLeftOf(lineEndNode.nextSibling,0);for(let parent;(parent=copiedListItem.parentNode)&&parent.nodeType===1;){copiedListItem=parent}listItems.push(copiedListItem)}for(let i=0;i<listItems.length;++i){walk(listItems[i])}if(opt_startLineNum===(opt_startLineNum|0)){listItems[0].setAttribute('value',opt_startLineNum)}let ol=document.createElement('ol');ol.className='linenums';let offset=Math.max(0,((opt_startLineNum-1))|0)||0;for(let i=0,n=listItems.length;i<n;++i){li=listItems[i];li.className='L'+((i+offset)%10);if(!li.firstChild){li.appendChild(document.createTextNode('\xA0'))}ol.appendChild(li)}node.appendChild(ol)}function recombineTagsAndDecorations(job){let isIE8OrEarlier=/\bMSIE\s(\d+)/.exec(navigator.userAgent);isIE8OrEarlier=isIE8OrEarlier&&+isIE8OrEarlier[1]<=8;let newlineRe=/\n/g;let source=job.sourceCode;let sourceLength=source.length;let sourceIndex=0;let spans=job.spans;let nSpans=spans.length;let spanIndex=0;let decorations=job.decorations;let nDecorations=decorations.length;let decorationIndex=0;decorations[nDecorations]=sourceLength;let decPos,i;for(i=decPos=0;i<nDecorations;){if(decorations[i]!==decorations[i+2]){decorations[decPos++]=decorations[i++];decorations[decPos++]=decorations[i++]}else{i+=2}}nDecorations=decPos;for(i=decPos=0;i<nDecorations;){let startPos=decorations[i];let startDec=decorations[i+1];let end=i+2;while(end+2<=nDecorations&&decorations[end+1]===startDec){end+=2}decorations[decPos++]=startPos;decorations[decPos++]=startDec;i=end}nDecorations=decorations.length=decPos;let sourceNode=job.sourceNode;let oldDisplay;if(sourceNode){oldDisplay=sourceNode.style.display;sourceNode.style.display='none'}try{let decoration=null;while(spanIndex<nSpans){let spanStart=spans[spanIndex];let spanEnd=spans[spanIndex+2]||sourceLength;let decEnd=decorations[decorationIndex+2]||sourceLength;let end=Math.min(spanEnd,decEnd);let textNode=spans[spanIndex+1];let styledText;if(textNode.nodeType!==1&&(styledText=source.substring(sourceIndex,end))){if(isIE8OrEarlier){styledText=styledText.replace(newlineRe,'\r')}textNode.nodeValue=styledText;let document=textNode.ownerDocument;let span=document.createElement('span');span.className=decorations[decorationIndex+1];let parentNode=textNode.parentNode;parentNode.replaceChild(span,textNode);span.appendChild(textNode);if(sourceIndex<spanEnd){spans[spanIndex+1]=textNode=document.createTextNode(source.substring(end,spanEnd));parentNode.insertBefore(textNode,span.nextSibling)}}sourceIndex=end;if(sourceIndex>=spanEnd){spanIndex+=2}if(sourceIndex>=decEnd){decorationIndex+=2}}}finally{if(sourceNode){sourceNode.style.display=oldDisplay}}}let langHandlerRegistry={};function registerLangHandler(handler,fileExtensions){for(let i=fileExtensions.length;--i>=0;){let ext=fileExtensions[i];if(!langHandlerRegistry.hasOwnProperty(ext)){langHandlerRegistry[ext]=handler}else if(win['console']){console['warn']('cannot override language handler %s',ext)}}}function langHandlerForExtension(extension,source){if(!(extension&&langHandlerRegistry.hasOwnProperty(extension))){extension=/^\s*</.test(source)?'default-markup':'default-code'}return langHandlerRegistry[extension]}registerLangHandler(decorateSource,['default-code']);registerLangHandler(createSimpleLexer([],[[PR_PLAIN,/^[^<?]+/],[PR_DECLARATION,/^<!\w[^>]*(?:>|$)/],[PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],['lang-',/^<\?([\s\S]+?)(?:\?>|$)/],['lang-',/^<%([\s\S]+?)(?:%>|$)/],[PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],['lang-',/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],['lang-js',/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],['lang-css',/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],['lang-in.tag',/^(<\/?[a-z][^<>]*>)/i]]),['default-markup','htm','html','mxml','xhtml','xml','xsl']);registerLangHandler(createSimpleLexer([[PR_PLAIN,/^[\s]+/,null,' \t\r\n'],[PR_ATTRIB_VALUE,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,'\"\'']],[[PR_TAG,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[PR_ATTRIB_NAME,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],['lang-uq.val',/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[PR_PUNCTUATION,/^[=<>\/]+/],['lang-js',/^on\w+\s*=\s*\"([^\"]+)\"/i],['lang-js',/^on\w+\s*=\s*\'([^\']+)\'/i],['lang-js',/^on\w+\s*=\s*([^\"\'>\s]+)/i],['lang-css',/^style\s*=\s*\"([^\"]+)\"/i],['lang-css',/^style\s*=\s*\'([^\']+)\'/i],['lang-css',/^style\s*=\s*([^\"\'>\s]+)/i]]),['in.tag']);registerLangHandler(createSimpleLexer([],[[PR_ATTRIB_VALUE,/^[\s\S]+/]]),['uq.val']);registerLangHandler(sourceDecorator({'keywords':CPP_KEYWORDS,'hashComments':true,'cStyleComments':true,'types':C_TYPES}),['c','cc','cpp','cxx','cyc','m']);registerLangHandler(sourceDecorator({'keywords':'null,true,false'}),['json']);registerLangHandler(sourceDecorator({'keywords':CSHARP_KEYWORDS,'hashComments':true,'cStyleComments':true,'verbatimStrings':true,'types':C_TYPES}),['cs']);registerLangHandler(sourceDecorator({'keywords':JAVA_KEYWORDS,'cStyleComments':true}),['java']);registerLangHandler(sourceDecorator({'keywords':SH_KEYWORDS,'hashComments':true,'multiLineStrings':true}),['bsh','csh','sh']);registerLangHandler(sourceDecorator({'keywords':PYTHON_KEYWORDS,'hashComments':true,'multiLineStrings':true,'tripleQuotedStrings':true}),['cv','py']);registerLangHandler(sourceDecorator({'keywords':PERL_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['perl','pl','pm']);registerLangHandler(sourceDecorator({'keywords':RUBY_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['rb']);registerLangHandler(sourceDecorator({'keywords':JSCRIPT_KEYWORDS,'cStyleComments':true,'regexLiterals':true}),['js']);registerLangHandler(sourceDecorator({'keywords':COFFEE_KEYWORDS,'hashComments':3,'cStyleComments':true,'multilineStrings':true,'tripleQuotedStrings':true,'regexLiterals':true}),['coffee']);registerLangHandler(createSimpleLexer([],[[PR_STRING,/^[\s\S]+/]]),['regex']);function applyDecorator(job){let opt_langExtension=job.langExtension;try{let sourceAndSpans=extractSourceSpans(job.sourceNode,job.pre);let source=sourceAndSpans.sourceCode;job.sourceCode=source;job.spans=sourceAndSpans.spans;job.basePos=0;langHandlerForExtension(opt_langExtension,source)(job);recombineTagsAndDecorations(job)}catch(e){if(win['console']){console['log'](e&&e['stack']?e['stack']:e)}}}function prettyPrintOne(sourceCodeHtml,opt_langExtension,opt_numberLines){let container=document.createElement('pre');container.innerHTML=sourceCodeHtml;if(opt_numberLines){numberLines(container,opt_numberLines,true)}let job={langExtension:opt_langExtension,numberLines:opt_numberLines,sourceNode:container,pre:1};applyDecorator(job);return container.innerHTML}function prettyPrint(opt_whenDone){function byTagName(tn){return document.getElementsByTagName(tn)}let codeSegments=[byTagName('pre'),byTagName('code'),byTagName('xmp')];let elements=[];for(let i=0;i<codeSegments.length;++i){for(let j=0,n=codeSegments[i].length;j<n;++j){elements.push(codeSegments[i][j])}}codeSegments=null;let clock=Date;if(!clock['now']){clock={'now':function(){return+(new Date)}}}let k=0;let prettyPrintingJob;let langExtensionRe=/\blang(?:uage)?-([\w.]+)(?!\S)/;let prettyPrintRe=/\bprettyprint\b/;let prettyPrintedRe=/\bprettyprinted\b/;let preformattedTagNameRe=/pre|xmp/i;let codeRe=/^code$/i;let preCodeXmpRe=/^(?:pre|code|xmp)$/i;function doWork(){let endTime=(win['PR_SHOULD_USE_CONTINUATION']?clock['now']()+250:Infinity);for(;k<elements.length&&clock['now']()<endTime;k++){let cs=elements[k];let className=cs.className;if(prettyPrintRe.test(className)&&!prettyPrintedRe.test(className)){let nested=false;for(let p=cs.parentNode;p;p=p.parentNode){let tn=p.tagName;if(preCodeXmpRe.test(tn)&&p.className&&prettyPrintRe.test(p.className)){nested=true;break}}if(!nested){cs.className+=' prettyprinted';let langExtension=className.match(langExtensionRe);let wrapper;if(!langExtension&&(wrapper=childContentWrapper(cs))&&codeRe.test(wrapper.tagName)){langExtension=wrapper.className.match(langExtensionRe)}if(langExtension){langExtension=langExtension[1]}let preformatted;if(preformattedTagNameRe.test(cs.tagName)){preformatted=1}else{let currentStyle=cs['currentStyle'];let whitespace=(currentStyle?currentStyle['whiteSpace']:(document.defaultView&&document.defaultView.getComputedStyle)?document.defaultView.getComputedStyle(cs,null).getPropertyValue('white-space'):0);preformatted=whitespace&&'pre'===whitespace.substring(0,3)}let lineNums=cs.className.match(/\blinenums\b(?::(\d+))?/);lineNums=lineNums?lineNums[1]&&lineNums[1].length?+lineNums[1]:true:false;if(lineNums){numberLines(cs,lineNums,preformatted)}prettyPrintingJob={langExtension:langExtension,sourceNode:cs,numberLines:lineNums,pre:preformatted};applyDecorator(prettyPrintingJob)}}}if(k<elements.length){setTimeout(doWork,250)}else if(opt_whenDone){opt_whenDone()}}doWork()}let PR=win['PR']={'createSimpleLexer':createSimpleLexer,'registerLangHandler':registerLangHandler,'sourceDecorator':sourceDecorator,'PR_ATTRIB_NAME':PR_ATTRIB_NAME,'PR_ATTRIB_VALUE':PR_ATTRIB_VALUE,'PR_COMMENT':PR_COMMENT,'PR_DECLARATION':PR_DECLARATION,'PR_KEYWORD':PR_KEYWORD,'PR_LITERAL':PR_LITERAL,'PR_NOCODE':PR_NOCODE,'PR_PLAIN':PR_PLAIN,'PR_PUNCTUATION':PR_PUNCTUATION,'PR_SOURCE':PR_SOURCE,'PR_STRING':PR_STRING,'PR_TAG':PR_TAG,'PR_TYPE':PR_TYPE,'prettyPrintOne':win['prettyPrintOne']=prettyPrintOne,'prettyPrint':win['prettyPrint']=prettyPrint};if(typeof define==="function"&&define['amd']){define("google-code-prettify",[],function(){return PR})}})();
+//]]>
+</script>
+<script>
+prettyPrint();
+</script>
+
+
+<!-- 'Αποτελεί δική σας ευθύνη να ενημερώσετε τους επισκέπτες σχετικά με τα cookie που χρησιμοποιούνται στο ιστολόγιο. Ανατρέξτε στη διεύθυνση http://www.blogger.com/go/cookiechoices για περισσότερες λεπτομέρειες.' -->
+<script src="/js/cookiechoices.js" defer></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function(event) {
+    window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar(
+        (window.cookieOptions && cookieOptions.msg) || 'Αυτός ο ιστότοπος χρησιμοποιεί cookie από το Google για την παροχή των υπηρεσιών του, για την εξατομίκευση διαφημίσεων και για την ανάλυση της επισκεψιμότητας. Η Google κοινοποιεί πληροφορίες σχετικά με την από μέρους σας χρήση αυτού του ιστότοπου. Με τη χρήση αυτού του ιστότοπου, αποδέχεστε τη χρήση των cookie.',
+        (window.cookieOptions && cookieOptions.close) || 'Έγινε',
+        (window.cookieOptions && cookieOptions.learn) || 'Μάθετε Περισσότερα',
+        (window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
+  });
+</script>
+
+<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1045850488-widgets.js"></script>
+<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
+<script type='text/javascript'>
+_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7620301364506750761','//www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html','7620301364506750761');
+_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7620301364506750761', 'bloggerUrl': 'https://www.blogger.com', 'title': 'Nowhere Near Ithaca', 'pageType': 'item', 'postId': '4739099319381019739', 'url': 'http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html', 'canonicalUrl': 'http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html', 'homepageUrl': 'http://www.nowherenearithaca.com/', 'searchUrl': 'http://www.nowherenearithaca.com/search', 'canonicalHomepageUrl': 'http://www.nowherenearithaca.com/', 'blogspotFaviconUrl': 'http://www.nowherenearithaca.com/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'analyticsAccountNumber': 'UA-38095489-1', 'useUniversalAnalytics': false, 'pageName': 'Javascript \x22Prototype\x22 Confusion, and the Dubiously Useful \x22instanceof\x22', 'pageTitle': 'Nowhere Near Ithaca: Javascript \x22Prototype\x22 Confusion, and the Dubiously Useful \x22instanceof\x22', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nowhere Near Ithaca - Atom\x22 href\x3d\x22http://www.nowherenearithaca.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nowhere Near Ithaca - RSS\x22 href\x3d\x22http://www.nowherenearithaca.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nowhere Near Ithaca - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7620301364506750761/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nowhere Near Ithaca - Atom\x22 href\x3d\x22http://www.nowherenearithaca.com/feeds/4739099319381019739/comments/default\x22 /\x3e\n', 'meTag': '', 'openIdOpTag': '', 'postImageThumbnailUrl': 'http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s72-c/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png', 'postImageUrl': 'http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s1600/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png', 'mobileHeadScript': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'ieCssRetrofitLinks': '\x3c!--[if IE]\x3e\x3cscript type\x3d\x22text/javascript\x22 src\x3d\x22https://www.blogger.com/static/v1/jsbin/1803938243-ieretrofit.js\x22\x3e\x3c/script\x3e\n\x3c![endif]--\x3e', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b1f29a73a8a0bdce', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Google+', 'key': 'googlePlus', 'shareMessage': 'Share to Google+', 'target': 'googleplus'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}}}, {'name': 'features', 'data': {'euCookieNotice': true, 'templateBrowserTheme': true, 'widgetVisibility': true}}, {'name': 'messages', 'data': {'adsGoHere': 'Ads go here', 'archive': 'Archive', 'authorSaid': '%1 said...', 'authorSaidWithLink': '\x3ca href\x3d\x22%2\x22 rel\x3d\x22nofollow\x22\x3e%1\x3c/a\x3e said...', 'blogArchive': 'Blog Archive', 'by': 'By', 'byAuthor': 'By %1', 'byAuthorLink': 'By \x3ca href\x3d\x22%2\x22\x3e%1\x3c/a\x3e', 'comments': 'Comments', 'configurationRequired': 'Configuration required', 'deleteBacklink': 'Delete Backlink', 'deleteComment': 'Delete Comment', 'edit': 'Edit', 'euCookieNotice': 'This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.', 'euCookieResponsibility': 'It is your responsibility to notify your visitors about cookies used on your blog. See http://www.blogger.com/go/cookiechoices for more details.', 'emailAddress': 'Email Address', 'getEmailNotifications': 'Get email notifications', 'gotIt': 'Got it', 'hidden': 'Hidden', 'home': 'Home', 'joinTheConversation': 'Join the conversation', 'keepReading': 'Keep reading', 'labels': 'Labels', 'latestPosts': 'Latest Posts', 'learnMore': 'Learn More', 'loadMorePosts': 'Load more posts', 'loading': 'Loading...', 'myBlogList': 'My Blog List', 'myFavoriteSites': 'My favorite sites', 'myPhoto': 'My photo', 'newer': 'Newer', 'newerPosts': 'Newer Posts', 'newest': 'Newest', 'noResultsFound': 'No results found', 'noTitle': 'No title', 'numberOfComments': '{numComments, plural, \x3d0 {No comments} \x3d1 {1 comment} other {# comments}}', 'older': 'Older', 'olderPosts': 'Older Posts', 'oldest': 'Oldest', 'onlyTeamMembersCanComment': 'Note: Only a member of this blog may post a comment.', 'popularPosts': 'Popular Posts', 'popularPostsFromThisBlog': 'Popular posts from this blog', 'postAComment': 'Post a Comment', 'postedBy': 'Posted by', 'postedByAuthor': 'Posted by %1', 'postedByAuthorLink': 'Posted by \x3ca href\x3d\x22%2\x22\x3e%1\x3c/a\x3e', 'readMore': 'Read more', 'recentPosts': 'Recent posts', 'reportAbuse': 'Report Abuse', 'search': 'Search', 'searchBlog': 'Search blog', 'share': 'Share', 'showAll': 'Show all', 'showLess': 'Show less', 'showMore': 'Show more', 'someOfMyFavoriteSites': 'Some of my favorite sites', 'subscribe': 'Subscribe', 'subscribeTo': 'Subscribe to:', 'subscribeToThisBlog': 'Subscribe to this blog', 'theresNothingHere': 'There\x27s nothing here!', 'viewAll': 'View all', 'visible': 'Visible', 'visitProfile': 'Visit profile', 'widgetNotAvailableInPreview': 'This content is not available in blog preview.', 'widgetNotAvailableOnHttps': 'This content is not yet available over encrypted connections.'}}, {'name': 'skin', 'data': {'vars': {'post_footer_background_color': '#f9f9f9', 'tabs_text_color': '#999999', 'content_shadow_spread': '40px', 'date_header_letterspacing': 'inherit', 'body_background_override': '', 'body_background': '#f0f0f0 none repeat scroll top left', 'description_text_size': '140%', 'mobile_background_size': 'auto', 'header_shadow_spread': '1px', 'image_border_color': '#eeeeee', 'date_header_color': '#222222', 'header_shadow_offset_top': '-1px', 'header_border_horizontalsize': '0', 'widget_title_font': 'normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif', 'tabs_border_color': '#eeeeee', 'tabs_bevel_border_width': '1px', 'body_background_gradient_tile': 'url(http://www.blogblog.com/1kt/simple/body_gradient_tile_light.png)', 'description_text_color': '#777777', 'main_section_margin': '15px', 'post_title_font': 'normal bold 24px Georgia, Utopia, \x27Palatino Linotype\x27, Palatino, serif', 'page_width': 'auto', 'paging_background': 'transparent none no-repeat scroll top center', 'body_text_color': '#222222', 'content_padding': '10px', 'header_background_gradient': 'none', 'post_margin_bottom': '25px', 'header_shadow_offset_left': '-1px', 'tabs_background_color': '#f5f5f5', 'content_background_color': '#ffffff', 'body_background_gradient_cap': 'url(http://www.blogblog.com/1kt/simple/gradients_light.png)', 'main_padding_top': '30px', 'widget_alternate_text_color': '#999999', 'image_text_color': '#222222', 'link_visited_color': '#888888', 'tabs_margin_side': '30px', 'image_border_large_size': '5px', 'content_shadow_spread_webkit': '5px', 'mobile_button_color': '#ffffff', 'tabs_selected_text_color': '#000000', 'main_border_width': '0', 'content_background_color_selector': '.content-inner', 'link_color': '#2288bb', 'post_footer_border_color': '#eeeeee', 'tabs_background_gradient': 'url(http://www.blogblog.com/1kt/simple/gradients_light.png)', 'content_padding_horizontal': '10px', 'header_font': 'italic normal 60px Georgia, Utopia, \x27Palatino Linotype\x27, Palatino, serif', 'startSide': 'left', 'tabs_font': 'normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif', 'widget_title_text_color': '#000000', 'header_border_size': '1px', 'tabs_selected_background_color': '#eeeeee', 'date_header_margin': 'inherit', 'footer_bevel': '0', 'image_border_small_size': '2px', 'content_shadow_spread_ie': '10px', 'mobile_background_overlay': 'transparent none repeat scroll top left', 'endSide': 'right', 'image_background_color': '#ffffff', 'body_rule_color': '#eeeeee', 'header_bottom_border_size': '1px', 'date_header_padding': 'inherit', 'page_width_selector': '.region-inner', 'body_background_color': '#f0f0f0', 'header_text_color': '#000000', 'main_padding': '15px', 'date_header_background_color': 'transparent', 'tabs_border_width': '1px', 'body_font': 'normal normal 14px Georgia, Utopia, \x27Palatino Linotype\x27, Palatino, serif', 'link_hover_color': '#33aaff', 'header_background_color': 'transparent', 'keycolor': '#66bbdd', 'main_padding_bottom': '30px', 'post_footer_text_color': '#666666', 'tabs_margin_top': '0', 'header_padding': '15px'}, 'override': '.descriptionwrapper {\n  margin-bottom:5px !important;\n}\n\n\n.Header h1 {\n margin-bottom:2px !important;\n}\n\n.titlewrapper {\n line-height:1.01 !important;\npadding-bottom:1px !important;\n}\n\n.main-inner {\n  padding-top:5px !important;\n}\n\n.post-title {\n  margin-top:5px !important;\n}'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'title': 'Javascript \x22Prototype\x22 Confusion, and the Dubiously Useful \x22instanceof\x22', 'description': '             Recently, I became aware that I was more confused than I realized regarding javascript\x26#39;s use of the word \x26quot;prototype\x26qu...', 'featuredImage': 'http://3.bp.blogspot.com/-6DxZ4q1TjVY/VN7J4aym7zI/AAAAAAAACjE/1BpYZ28BG40/s1600/Screen%2BShot%2B2015-02-13%2Bat%2B11.03.58%2BPM.png', 'url': 'http://www.nowherenearithaca.com/2015/02/javascript-prototype-confusion-and.html', 'type': 'item', 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isSearch': false, 'postId': 4739099319381019739}}]);
+_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull'));
+_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', null, document.getElementById('Header1'), {}, 'displayModeFull'));
+_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'showBacklinks': true, 'postId': '4739099319381019739', 'legacyCommentModerationUrl': 'https://www.blogger.com/moderate-legacy-comment.g?blogID\x3d7620301364506750761', 'iframeCommentsId': 'gpluscomments', 'viewType': 'FILTERED_POSTMOD', 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2318976799-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/368954415-lightbox_bundle.css'}, 'displayModeFull'));
+_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'main', null, document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
+_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text2', 'sidebar-right-1', null, document.getElementById('Text2'), {}, 'displayModeFull'));
+_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar-right-1', null, document.getElementById('Label1'), {}, 'displayModeFull'));
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/archive/recursion.md b/archive/recursion.md
new file mode 100644
index 00000000..0af749b5
--- /dev/null
+++ b/archive/recursion.md
@@ -0,0 +1,285 @@
+# Recursion, stack
+
+It's ok for a function to rely on other functions for sub-tasks.
+
+We've already been using it when `welcome()` relied on `alert()` call to show the message.
+
+In particular, a function can make a sub-call *itself*. That's called *a recursion*.
+
+We'll fiddle around that advanced case to better learn how functions work.
+
+[cut]
+
+[smart header="A topic you already know?"]
+Recursion is a general programming term. If you are already familiar with it, then you may list the page to the next chapter. Please read on if you are new to functions or just prefer not to skip parts.
+[/smart]
+
+## Divide and conquer
+
+Divide and conquer (or "divide and rule") is an ancient strategy attributed to Philip II of Macedon and mentioned by the Roman emperor Julius Caesar, the French emperor Napolen and many other leaders.
+
+They used it to rule, but the similar thing is often done in programming. If we have a complex task, that we're not sure how to solve as a whole, then maybe we can split it and try to solve the smaller parts.
+
+And if smaller parts are still too big, then let's cut them and try to solve even smaller parts. 
+
+Repeat the cutting until the parts are so small that it's obvious how to deal with them.
+
+Sounds good? Now let's explore a case of this approach.
+
+## Eating an elephant
+
+Let's say we have a task "to eat an elephant". But how?
+
+The well-known humorous solution is: "piece by piece". We cut a piece, eat it and repeat the process. Sooner or later, the elephant is eaten.
+
+The algorithm can be reflected in the code:
+
+```
+function eat(elephant) {
+  cut a piece from the elephant
+  eat it
+  if (something left) {
+*!*
+    eat(what's left of the elephant)  // (*)
+*/!*
+  }
+}
+```
+
+The recursion occurs at line `(*)`: function `eat` after making things simpler passes the remaining data again to itself.
+
+Of course that's only one variant. For example, we could cut the elephant in 2 halves, then cut the halves in half again etc, until the parts are small enough to eat. Then put them into plates and pass to the guests.
+
+The core idea is the same: splitting the problem into multiple subproblems and doing the same with them if they're still big.
+
+## A power of a number
+
+
+
+## Степень pow(x, n) через рекурсию
+
+В качестве первого примера использования рекурсивных вызовов -- рассмотрим задачу возведения числа `x` в натуральную степень `n`.
+
+Её можно представить как совокупность более простого действия и более простой задачи того же типа вот так: 
+
+```js
+pow(x, n) = x * pow(x, n - 1)
+```
+
+То есть, <code>x<sup>n</sup> = x * x<sup>n-1</sup></code>.
+
+Например, вычислим `pow(2, 4)`, последовательно переходя к более простой задаче:
+
+<ol>
+<li>`pow(2, 4) = 2 * pow(2, 3)`</li>
+<li>`pow(2, 3) = 2 * pow(2, 2)`</li>
+<li>`pow(2, 2) = 2 * pow(2, 1)`</li>
+<li>`pow(2, 1) = 2`</li>
+</ol>
+
+На шаге 1 нам нужно вычислить `pow(2,3)`, поэтому мы делаем шаг 2, дальше нам нужно `pow(2,2)`, мы делаем шаг 3, затем шаг 4, и на нём уже можно остановиться, ведь очевидно, что результат возведения числа в степень 1 -- равен самому числу.
+
+Далее, имея результат на шаге 4, он подставляется обратно в шаг 3, затем имеем `pow(2,2)` -- подставляем в шаг 2 и на шаге 1 уже получаем результат.
+
+Этот алгоритм на JavaScript:
+
+```js
+//+ run
+function pow(x, n) {
+  if (n != 1) { // пока n != 1, сводить вычисление pow(x,n) к pow(x,n-1)
+    return x * pow(x, n - 1);
+  } else {
+    return x;
+  }
+}
+
+alert( pow(2, 3) ); // 8
+```
+
+Говорят, что "функция `pow` *рекурсивно вызывает сама себя*" до `n == 1`. 
+
+Значение, на котором рекурсия заканчивается называют *базисом рекурсии*. В примере выше базисом является `1`.
+
+Общее количество вложенных вызовов называют *глубиной рекурсии*. В случае со степенью, всего будет `n` вызовов. 
+
+Максимальная глубина рекурсии в браузерах ограничена, точно можно рассчитывать на `10000` вложенных вызовов, но некоторые интерпретаторы допускают и больше.
+
+Итак, рекурсию используют, когда вычисление функции можно свести к её более простому вызову, а его -- ещё к более простому, и так далее, пока значение не станет очевидно.
+
+## Контекст выполнения, стек
+
+Теперь мы посмотрим, как работают рекурсивные вызовы. Для этого мы рассмотрим, как вообще работают функции, что происходит при вызове.
+
+**У каждого вызова функции есть свой "контекст выполнения" (execution context).** 
+
+Контекст выполнения -- это служебная информация, которая соответствует текущему запуску функции. Она включает в себя локальные переменные функции и конкретное место в коде, на котором находится интерпретатор.
+
+Например, для вызова `pow(2, 3)` из примера выше будет создан контекст выполнения, который будет хранить переменные `x = 2, n = 3`. Мы схематично обозначим его так:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 1 }</li>
+</ul>
+
+Далее функция `pow` начинает выполняться. Вычисляется выражение `n != 1` -- оно равно `true`, ведь в текущем контексте `n=3`. Поэтому задействуется первая ветвь `if` :
+
+```js
+function pow(x, n) {
+  if (n != 1) { // пока n != 1 сводить вычисление pow(x,n) к pow(x,n-1)
+*!*
+    return x * pow(x, n - 1);
+*/!*
+  } else {
+    return x;
+  }
+}
+```
+
+Чтобы вычислить выражение `x * pow(x, n-1)`, требуется произвести запуск `pow` с новыми аргументами.
+
+**При любом вложенном вызове JavaScript запоминает текущий контекст выполнения в специальной внутренней структуре данных -- "стеке контекстов".**
+
+Затем интерпретатор приступает к выполнению вложенного вызова.
+
+В данном случае вызывается та же `pow`, однако это абсолютно неважно. Для любых функций процесс одинаков.
+
+Для нового вызова создаётся свой контекст выполнения, и управление переходит в него, а когда он завершён -- старый контекст достаётся из стека и выполнение внешней функции возобновляется.
+
+Разберём происходящее с контекстами более подробно, начиная с вызова `(*)`:
+
+```js
+//+ run
+function pow(x, n) {
+  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
+    return x * pow(x, n - 1);
+  } else {
+    return x;
+  }
+}
+
+*!*
+alert( pow(2, 3) ); // (*)
+*/!*
+```
+
+<dl>
+<dt>`pow(2, 3)`</dt>
+<dd>Запускается функция `pow`, с аргументами `x=2`, `n=3`. Эти переменные хранятся в контексте выполнения, схематично изображённом ниже:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 1 }</li>
+</ul>
+Выполнение в этом контексте продолжается, пока не встретит вложенный вызов в строке 3.
+</dd>
+<dt>`pow(2, 2)`</dt>
+<dd>В строке `3` происходит вложенный вызов `pow` с аргументами `x=2`, `n=2`. Текущий контекст сохраняется в стеке, а для вложеннного вызова создаётся новый контекст (выделен жирным ниже):
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
+  <li>Контекст: { x: 2, n: 2, строка 1 }</li>
+</ul>
+Обратим внимание, что контекст включает в себя не только переменные, но и место в коде, так что когда вложенный вызов завершится -- можно будет легко вернуться назад.
+
+Слово "строка" здесь условно, на самом деле, конечно, запомнено более точное место в цепочке команд.
+</dd>
+<dt>`pow(2, 1)`</dt>
+<dd>Опять вложенный вызов в строке `3`, на этот раз -- с аргументами `x=2`, `n=1`. Создаётся новый текущий контекст, предыдущий добавляется в стек:
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
+  <li>Контекст: { x: 2, n: 2, строка 3 }</li>
+  <li>Контекст: { x: 2, n: 1, строка 1 }</li>
+</ul>
+На текущий момент в стеке уже два старых контекста.
+</dd>
+<dt>Выход из `pow(2, 1)`.</dt>
+<dd>При выполнении `pow(2, 1)`, в отличие от предыдущих запусков, выражение `n != 1` будет равно `false`, поэтому  сработает вторая ветка `if..else`:
+
+```js
+function pow(x, n) {
+  if (n != 1) {
+    return x * pow(x, n - 1);
+  } else {
+*!*
+    return x; // первая степень числа равна самому числу
+*/!*
+  }
+}
+```
+
+Здесь вложенных вызовов нет, так что функция заканчивает свою работу, возвращая `2`. Текущий контекст больше не нужен и удаляется из памяти, из стека восстанавливается предыдущий:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
+  <li>Контекст: { x: 2, n: 2, строка 3 }</li>
+</ul>
+Возобновляется обработка внешнего вызова `pow(2, 2)`.
+</dd>
+<dt>Выход из `pow(2, 2)`.</dt>
+<dd>...И теперь уже `pow(2, 2)` может закончить свою работу, вернув `4`. Восстанавливается контекст предыдущего вызова:
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3, строка 3 }</li>
+</ul>
+Возобновляется обработка внешнего вызова `pow(2, 3)`.
+</dd>
+<dt>Выход из `pow(2, 3)`.</dt>
+<dd>Самый внешний вызов заканчивает свою работу, его результат: `pow(2, 3) = 8`.</dd>
+</dl>
+
+Глубина рекурсии в данном случае составила: **3**.
+
+Как видно из иллюстраций выше, глубина рекурсии равна максимальному числу контекстов, одновременно хранимых в стеке.
+
+Обратим внимание на требования к памяти. Рекурсия приводит к хранению всех данных для неоконченных внешних вызовов в стеке, в данном случае это приводит к тому, что возведение в степень `n` хранит в памяти `n` различных контекстов.
+
+Реализация возведения в степень через цикл гораздо более экономна:
+
+```js
+function pow(x, n) {
+  let result = x;
+  for let i = 1; i < n; i++) {
+    result *= x;
+  }
+  return result;
+}
+```
+
+У такой функции `pow` будет один контекст, в котором будут последовательно меняться значения `i` и `result`.
+
+**Любая рекурсия может быть переделана в цикл. Как правило, вариант с циклом будет эффективнее.**
+
+Но переделка рекурсии в цикл может быть нетривиальной, особенно когда в функции, в зависимости от условий, используются различные рекурсивные подвызовы, когда ветвление более сложное.
+
+## Итого
+
+Рекурсия -- это когда функция вызывает сама себя, как правило, с другими аргументами.
+
+Существуют много областей применения рекурсивных вызовов. Здесь мы посмотрели на один из них -- решение задачи путём сведения её к более простой (с меньшими аргументами), но также рекурсия используется для работы с "естественно рекурсивными" структурами данных, такими как HTML-документы, для "глубокого" копирования сложных объектов. 
+
+Есть и другие применения, с которыми мы встретимся по мере изучения JavaScript.
+
+Здесь мы постарались рассмотреть происходящее достаточно подробно, однако, если пожелаете, допустимо временно забежать вперёд и открыть главу [](/debugging-chrome), с тем чтобы при помощи отладчика построчно пробежаться по коду и посмотреть стек на каждом шаге. Отладчик даёт к нему доступ.
+
+
+
+[head]
+<style>
+.function-execution-context {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+.function-execution-context li {
+  float: left;
+  clear: both;
+  border: 1px solid black;
+  font-family: "Consolas", monospace;
+  padding: 3px 5px;
+}
+
+
+.function-execution-context li:last-child {
+  font-weight: bold;
+}
+</style>
+[/head]
+
diff --git a/archive/timing-decorator.md b/archive/timing-decorator.md
new file mode 100644
index 00000000..b412f5c4
--- /dev/null
+++ b/archive/timing-decorator.md
@@ -0,0 +1,105 @@
+
+
+## Instrumentation: timing decorator
+
+Let's say we have a function and want to measure time it takes to run.
+
+Of course, we could modify it. Add something like `timerStart()` to the start and `timerEnd()` to all exit points. Then later we may want to log which arguments it receives and results. That requires additional code as well. 
+
+That is called [instrumentation](https://en.wikipedia.org/wiki/Instrumentation) of the code -- adding stuff to measure times, log what's happening and do other watching/measuring without interfering with the main functionality.
+
+Putting instrumentation inside the function manually is not pretty at all. It takes space, shadows the core functionality and makes it harder to debug.
+
+There are tools that analyze javascript code and add instrumentation calls to it automatically. But here we'll take a "median" approach. We will "wrap" instrumentation over function without touching its code.
+
+What we going to do is a special function `timingDecorator(func)`, that takes a function `func` and returns a "wrapper" around it, that transfers all calls to `func` and measures time they take.
+
+For simplicity let's assume that `func` has only one argument. 
+
+The code with `timingDecorator` and example function:
+
+
+
+
+```js run
+function fibo(n) { // a function to measure, here we count fibonacci number
+  return (n > 2) ? fibo(n - 1) + fibo(n - 2) : 1; 
+}
+
+let timers = {}; // timers to store data
+
+function timingDecorator(func) {
+  return function(x) {
+    let start = performance.now();
+
+    let result = func(x);
+
+    let time = performance.now() - start;
+
+    if (!timers[func.name]) timers[func.name] = 0;
+    timers[func.name] += time;
+
+    return result;
+  };  
+}
+
+// decorate it
+fibo = timingDecorator(fibo);
+
+// run
+alert( fibo(10) ); // 55
+alert( fibo(20) ); // 6765
+alert( fibo(30) ); // 832040
+
+alert( `Total time: ${timers.fibo.toFixed(3)}ms` ); // total count of fibo calls
+```
+
+При помощи декоратора `timingDecorator` мы сможем взять произвольную функцию и одним движением руки прикрутить к ней измеритель времени.
+
+Его реализация:
+
+```js run
+let timers = {};
+
+// прибавит время выполнения f к таймеру timers[timer]
+function timingDecorator(f, timer) {
+  return function() {
+    let start = performance.now();
+
+    let result = f.apply(this, arguments); // (*)
+
+    if (!timers[timer]) timers[timer] = 0;
+    timers[timer] += performance.now() - start;
+
+    return result;
+  }
+}
+
+// функция может быть произвольной, например такой:
+let fibonacci = function f(n) {
+  return (n > 2) ? f(n - 1) + f(n - 2) : 1;
+}
+
+*!*
+// использование: завернём fibonacci в декоратор
+fibonacci = timingDecorator(fibonacci, "fibo");
+*/!*
+
+// неоднократные вызовы...
+alert( fibonacci(10) ); // 55
+alert( fibonacci(20) ); // 6765
+// ...
+
+*!*
+// в любой момент можно получить общее количество времени на вызовы
+alert( timers.fibo + 'мс' );
+*/!*
+```
+
+Обратим внимание на строку `(*)` внутри декоратора, которая и осуществляет передачу вызова:
+
+```js
+let result = f.apply(this, arguments); // (*)
+```
+
+Этот приём называется "форвардинг вызова" (от англ. forwarding): текущий контекст и аргументы через `apply` передаются в функцию `f`, так что изнутри `f` всё выглядит так, как была вызвана она напрямую, а не декоратор.
diff --git a/archive/upload-2way.view/index.html b/archive/upload-2way.view/index.html
deleted file mode 100644
index e8af0a2a..00000000
--- a/archive/upload-2way.view/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<body>
-
-  <head>
-    <meta charset="utf-8">
-    <script src="uploader.js"></script>
-  </head>
-  <form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
-    <input type="file" name="myfile">
-    <input type="submit" name="submit" value="Загрузить">
-  </form>
-
-  <div id="log">Индикация прогресса</div>
-
-  <script>
-    function log(html) {
-      document.getElementById('log').innerHTML = html;
-    }
-
-    function onSuccess() {
-      log('success');
-    }
-
-    function onError() {
-      log('error');
-    }
-
-    function onProgress(loaded, total) {
-      log(loaded + ' / ' + total);
-    }
-
-
-    var uploader;
-
-    document.forms.upload.onsubmit = function() {
-      var file = this.elements.myfile.files[0];
-      if (!file) return false;
-
-      uploader = new Uploader(file, onSuccess, onError, onProgress);
-      uploader.upload();
-      return false;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/upload-2way.view/server.js b/archive/upload-2way.view/server.js
deleted file mode 100644
index 9a814846..00000000
--- a/archive/upload-2way.view/server.js
+++ /dev/null
@@ -1,110 +0,0 @@
-var http = require('http');
-var static = require('node-static');
-var fileServer = new static.Server('.');
-var EventEmitter = require('events').EventEmitter;
-var fs = require('fs');
-var path = require('path');
-
-var uploads = {};
-
-function onUpload(req, res) {
-
-  var fileId = req.headers['x-file-id'];
-  if (!fileId) {
-    res.writeHead(400, "No file id");
-    res.end();
-  }
-
-  // инициализация новой загрузки
-  var upload = uploads[fileId];
-  if (!upload) {
-    res.writeHead(400, "No such upload");
-    res.end();
-    return;
-  }
-
-  upload.bytesWritten = 0;
-
-  var filePath = '/dev/null'; //path.join("/tmp", fileId);
-
-  // будем сохранять в файл с именем fileId
-  var fileStream = fs.createWriteStream(filePath);
-
-  // отправить тело запроса в файл
-  req.pipe(fileStream);
-
-  // при записи очередного фрагмента событие progress
-  fileStream.on('drain', function() {
-    upload.bytesWritten = fileStream.bytesWritten;
-    upload.emit("progress");
-  });
-
-  // в конце -- событие end
-  fileStream.on('close', function() {
-    upload.finished = true;
-    upload.emit("end");
-  });
-
-  // при ошибках - завершение запроса
-  fileStream.on('error', function(err) {
-    res.writeHead(500, "File error");
-    res.end('error');
-  });
-
-  // в конце запроса - очистка
-  req.on('end', function() {
-    res.end();
-    delete uploads[fileId];
-
-    // здесь обработка успешной загрузки
-  });
-
-}
-
-function onStatusStream(req, res) {
-
-  var fileId = req.headers['x-file-id'];
-  var upload = uploads[fileId];
-
-  if (!upload) {
-    upload = uploads[fileId] = new EventEmitter();
-    upload.bytesWritten = 0;
-  }
-
-  console.log("upload bytesWritten", upload.bytesWritten);
-
-  // сразу же пишем текущий прогресс
-  res.write(upload.bytesWritten + '-');
-
-  // и по мере загрузки дописываем
-  upload.on('progress', function() {
-    res.write(upload.bytesWritten + '-');
-  });
-
-  upload.on('end', function() {
-    res.end();
-  });
-}
-
-
-
-function accept(req, res) {
-  if (req.url == '/status-stream') {
-    onStatusStream(req, res);
-  } else if (req.url == '/upload' && req.method == 'POST') {
-    onUpload(req, res);
-  } else {
-    fileServer.serve(req, res);
-  }
-
-}
-
-
-// -----------------------------------
-
-if (!module.parent) {
-  http.createServer(accept).listen(8080);
-  console.log('Сервер запущен на порту 8080');
-} else {
-  exports.accept = accept;
-}
\ No newline at end of file
diff --git a/archive/upload-2way.view/uploader.js b/archive/upload-2way.view/uploader.js
deleted file mode 100644
index e17cdac5..00000000
--- a/archive/upload-2way.view/uploader.js
+++ /dev/null
@@ -1,84 +0,0 @@
-function Uploader(file, onSuccess, onError, onProgress) {
-
-  // идентификатор загрузки, чтобы стыковать два потока
-  var fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
-  fileId = hashCode(fileId);
-
-  var xhrUpload;
-  var xhrStatus;
-
-  // *!* Закачка: поток НА сервер */!*
-  function runUpload(startByte) {
-    console.log("run upload from ", startByte);
-    xhrUpload = new XMLHttpRequest();
-    xhrUpload.onload = xhrUpload.onerror = function() {
-      xhrStatus.abort(); // остановить отслеживание прогресса по завершении загрузки
-      if (this.status != 200) {
-        onError("Upload error " + this.statusText);
-      } else {
-        onSuccess();
-      }
-
-    };
-    xhrUpload.open("POST", "upload", true);
-    xhrUpload.setRequestHeader('X-File-Id', fileId);
-    xhrUpload.send(file.slice(startByte));
-  }
-
-  // *!* Получать статус: поток С сервера */!*  
-  function upload() {
-    xhrStatus = new XMLHttpRequest();
-    xhrStatus.onreadystatechange = function(e) {
-      console.log(this);
-    }
-
-    xhrStatus.onprogress = function() {
-      var lastByte = getLastProgress(xhrStatus.responseText);
-      console.log("lastByte", lastByte);
-      if (!xhrUpload) {
-        runUpload(lastByte + 1);
-      }
-      onProgress(lastByte, file.size);
-    }
-
-    xhrStatus.onerror = function() {
-      onError("Upload status error " + this.statusText);
-      xhrUpload.abort();
-    }
-
-    xhrStatus.open("POST", "status-stream", true);
-    xhrStatus.setRequestHeader('X-File-Id', fileId);
-    xhrStatus.send();
-  }
-
-  // *!* Функция для чтения количества байт из статуса сервера 12-345-... */!*
-  function getLastProgress(response) {
-    // читаем число между последним и предпоследним знаком -
-    var lastDelimiter = response.lastIndexOf('-');
-    if (lastDelimiter < 0) return 0;
-
-    var prevDelimiter = response.lastIndexOf('-', lastDelimiter - 1);
-    return response.slice(prevDelimiter + 1, lastDelimiter);
-  }
-
-  // внешний интерфейс
-  this.upload = upload;
-
-}
-
-
-
-// вспомогательная функция: получение 32-битного числа из строки
-
-function hashCode(str) {
-  if (str.length == 0) return 0;
-
-  var hash = 0,
-    i, chr, len;
-  for (i = 0; i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-};
\ No newline at end of file
diff --git a/archive/widget-tasks/1-date-selector/solution.view/dateselector.js b/archive/widget-tasks/1-date-selector/solution.view/dateselector.js
deleted file mode 100644
index 613b6ce1..00000000
--- a/archive/widget-tasks/1-date-selector/solution.view/dateselector.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * options:
- * yearFrom {number} начальный год в селекторе
- * yearTo {number} конечный год в селекторе
- * value {Date} текущая выбранная дата
- */
-function DateSelector(options) {
-  var self = this;
-
-  var monthNames = 'января февраля марта апреля мая июня июля августа сентября октября ноября декабря'.split(' ');
-
-  var value = options.value;
-
-  var elem;
-  var yearSelect, monthSelect, daySelect;
-
-  function render() {
-    var tmpl = _.template(options.template);
-    elem = $('<div class="date-selector"/>').html(tmpl({
-      yearFrom: options.yearFrom,
-      yearTo: options.yearTo,
-      dayTo: getLastDayOfMonth(value.getFullYear(), value.getMonth()),
-      monthNames: monthNames
-    }));
-
-    yearSelect = elem.find('.year');
-    monthSelect = elem.find('.month');
-    daySelect = elem.find('.day');
-
-    elem.on('change', onChange); // обычно оно не всплывает, но jQuery эмулирует всплытие
-    self.setValue(value, true);
-  }
-
-  this.getValue = function() {
-    return value;
-  };
-
-  this.setValue = function(newValue, quiet) {
-    value = newValue;
-
-    yearSelect.val(value.getFullYear());
-    monthSelect.val(value.getMonth());
-    daySelect.val(value.getDate());
-
-    if (!quiet) {
-      $(self).triggerHandler({
-        type: "select",
-        value: value
-      });
-    }
-  };
-
-  this.getElement = function() {
-    if (!elem) render();
-    return elem;
-  };
-
-  function onChange(e) {
-
-    var selectType = e.target.className;
-
-    if (selectType == "month" || selectType == "year") {
-      // поправить день с учетом месяца и, возможно, високосного года
-      adjustDayOptions(+yearSelect.val(), +monthSelect.val());
-    }
-
-    readValue(); // для простоты -- получим значения из всех селектов
-
-    $(self).triggerHandler({
-      type: "select",
-      value: value
-    });
-  }
-
-  function readValue() {
-    // если я сделаю сначала value.setMonth(),
-    // то может получится некорректная дата типа 31 марта -> 31 февраля,
-    // которая автоскорректируется в 2 марта, т.е месяц не поставится.
-    // поэтому сначала именно setDate, и так далее.
-    value.setDate(daySelect.val());
-    value.setMonth(monthSelect.val());
-    value.setFullYear(yearSelect.val());
-  }
-
-  function getLastDayOfMonth(year, month) {
-    var date = new Date(year, month + 1, 0);
-    return date.getDate();
-  }
-
-  function adjustDayOptions(year, month) {
-    var maxDay = getLastDayOfMonth(year, month);
-
-    // укоротить селект, если дней стало меньше
-    daySelect.children().filter(function() {
-      return this.value > maxDay;
-    }).remove();
-
-    // добавить дни, если новый месяц дольше
-    for (var i = +daySelect.last().val(); i <= maxDay; i++) {
-      daySelect.append(new Option(i, i));
-    }
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/1-date-selector/solution.view/index.html b/archive/widget-tasks/1-date-selector/solution.view/index.html
deleted file mode 100644
index 63ab9986..00000000
--- a/archive/widget-tasks/1-date-selector/solution.view/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="dateselector.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="date-selector-template">
-    <select class="year">
-      <% for(var year=y earFrom; year <=y earTo; year++) { %>
-        <option value="<%=year%>">
-          <%=year%>
-        </option>
-        <% } %>
-    </select>
-    <select class="month">
-      <% for(var month=0 ; month <=1 1; month++) { %>
-        <option value="<%=month%>">
-          <%=monthNames[month]%>
-        </option>
-        <% } %>
-    </select>
-    <select class="day">
-      <% for(var day=1 ; day <=d ayTo; day++) { %>
-        <option value="<%=day%>">
-          <%=day%>
-        </option>
-        <% } %>
-    </select>
-  </script>
-
-  <div id="selector-holder"></div>
-  <div id="value">тут будет значение даты при выборе</div>
-
-  <script>
-    var dateSelector = new DateSelector({
-      yearFrom: 2010,
-      yearTo: 2020,
-      value: new Date(2012, 2, 31), // 31 марта 2012
-      template: $('#date-selector-template').html().trim()
-    });
-
-    $('#selector-holder').append(dateSelector.getElement());
-
-    $(dateSelector).on("select", function(e) {
-      $('#value').html(e.value + '');
-    });
-  </script>
-
-  <button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/1-date-selector/source.view/dateselector.js b/archive/widget-tasks/1-date-selector/source.view/dateselector.js
deleted file mode 100644
index 51147de7..00000000
--- a/archive/widget-tasks/1-date-selector/source.view/dateselector.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * options:
- * yearFrom {number} начальный год в селекторе
- * yearTo {number} конечный год в селекторе
- * value {Date} текущая выбранная дата
- */
-function DateSelector(options) {
-  var self = this;
-
-
-  /* ваш код */
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/1-date-selector/source.view/index.html b/archive/widget-tasks/1-date-selector/source.view/index.html
deleted file mode 100644
index e012ba66..00000000
--- a/archive/widget-tasks/1-date-selector/source.view/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="dateselector.js"></script>
-</head>
-
-<body>
-
-  <script type="text/template" id="date-selector-template">
-    /* шаблон для виджета */
-  </script>
-
-  <div id="selector-holder"></div>
-  <div id="value">тут будет значение даты при выборе</div>
-
-  <script>
-    var dateSelector = new DateSelector({
-      yearFrom: 2010,
-      yearTo: 2020,
-      value: new Date(2012, 2, 31), // 31 марта 2012
-      template: $('#date-selector-template').html()
-    });
-
-    $('#selector-holder').append(dateSelector.getElement());
-
-    $(dateSelector).on("select", function(e) {
-      $('#value').html(e.value + '');
-    });
-  </script>
-
-  <button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/1-date-selector/task.md b/archive/widget-tasks/1-date-selector/task.md
deleted file mode 100644
index b135d47c..00000000
--- a/archive/widget-tasks/1-date-selector/task.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Селектор даты
-
-[importance 5]
-
-Создайте тройной селектор даты, который выступает как единый компонент. То есть, можно подписываться на `"select"` сразу у этого компонента.
-
-Конструктор:
-
-```js
-var dateSelector = new DateSelector({
-  yearFrom: 2010, // начальный год в селекторе
-  yearTo: 2020, // конечный год в селекторе
-  value: new Date(2012, 2, 31) // текущая выбранная дата
-});
-```
-
-События:
-<ul>
-<li>`select` -- при изменении даты.</li>
-</ul>
-Методы:
-<ul>
-<li>`setValue(date, quiet)` -- устанавливает дату `date`. Если второй аргумент `true`, то событие не генерируется.</li>
-<li>`getElement()` -- возвращает DOM-элемент для компоненты для вставки в документ.</li>
-</ul>
-
-Использование - добавление в документ:
-
-```js
-dateSelector.getElement().appendTo('body');
-```
-
-Использование - подписка на изменение и вывод значения:
-
-```js
-$(dateSelector).on("select", function(e) {
-  $('#value').html(e.value);
-});
-```
-
-Пример в действии:
-[iframe border=1 src="solution"]
-
-[edit task src="source"/]
-
-P.S. При выборе месяца дни должны подстраиваться под него. Чтобы не было доступно 31 февраля.
\ No newline at end of file
diff --git a/archive/widget-tasks/1-tooltip-over-element/solution.md b/archive/widget-tasks/1-tooltip-over-element/solution.md
deleted file mode 100644
index c327cd1e..00000000
--- a/archive/widget-tasks/1-tooltip-over-element/solution.md
+++ /dev/null
@@ -1,81 +0,0 @@
-# Подсказки
-
-Функция показа подсказки должна при первом показе сгенерировать элемент с подсказкой, а затем -- показать в нужном месте страницы. 
-
-Обсудим, как это сделать.
-
-Для генерации подсказки добавим вспомогательную функцию `getTooltipElem()`. Она будет возвращать существующий элемент, если он есть, а если нет -- генерировать новый.
-
-```js
-function getTooltipElem() {
-  if (!tooltipElem) {
-    tooltipElem = $('<div/>', {
-      "class": 'tooltip',
-      html: html
-    });
-  }
-  return tooltipElem;
-}
-```
-
-**Основная настройка вида подсказки -- в CSS-классе `tooltip`.**
-
-Например:
-
-```css
-/*+ no-beautify */
-.tooltip {
-  position:absolute;
-  z-index:100; /* подсказка должна перекрывать другие элементы */
-  padding: 10px 20px;
-
-  /* красивости... */
-  border: 1px solid #b3c9ce;
-  border-radius: 4px;
-  text-align: center;
-  font: italic 14px/1.3 arial, sans-serif; 
-  color: #333;
-  background: #fff;
-  box-shadow: 3px 3px 3px rgba(0,0,0,.3);
-}
-```
-
-**Как правильно отпозиционировать подсказку? Для начала, по горизонтали.**
-
-Центр подсказки должен быть ровно над центром элемента, который имеет координату `elem.offset().left + elem.outerWidth()/2`.
-
-Если поставить `tooltipElem.left` в это значение -- результат будет выглядеть так:
-<img src="tooltip-fixed-center.png">
-
-```js
-tooltipElem.left = elem.offset().left + elem.outerWidth() / 2
-```
-
-Дополнительно нужно сдвинуть подсказку на половину собственной ширины влево:
-
-<img src="tooltip-fixed-center2.png">
-
-```js
-left -= tooltipElem.outerWidth() / 2;
-```
-
-**Теперь отпозиционируем по вертикали.**
-
-Это гораздо проще: нужно взять координату Y элемента и вычесть из неё высоту подсказки и дополнительный отступ.
-
-```js
-elemCoords.top - tooltipElem.outerHeight() - 10
-```
-
-# Проверка решения
-
-Проверьте, пожалуйста, ваше решение на предмет возможных ошибок:
-
-<ul>
-<li>Подсказка корректно работает при прокрутке?</li>
-<li>Не используете ли вы события `mouseout/mouseover`? Лучше -- `mouseenter/mouseleave` (или, более кратко в jQuery: `hover`).</li>
-<li>Вторая подсказка с `offset:0` расположена сразу над элементом, а не как первая.</li>
-<li>Элемент с подсказкой генерируется динамически, при наведении, а не когда подсказка только создаётся?</li>
-<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
-</ul>
-
diff --git a/archive/widget-tasks/1-tooltip-over-element/solution.view/index.html b/archive/widget-tasks/1-tooltip-over-element/solution.view/index.html
deleted file mode 100644
index f4927dd5..00000000
--- a/archive/widget-tasks/1-tooltip-over-element/solution.view/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    
-    .tooltip {
-      position: absolute;
-      z-index: 100;
-      /* подсказка должна перекрывать другие элементы */
-      
-      padding: 10px 20px;
-      /* красивости... */
-      
-      border: 1px solid #b3c9ce;
-      border-radius: 4px;
-      text-align: center;
-      font: italic 14px/1.3 arial, sans-serif;
-      color: #333;
-      background: #fff;
-      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-
-  <a href="#" id="link">Ссылка с <i>подсказкой</i></a>
-  <a href="#" id="link2">Еще ссылка</a>
-
-  <script>
-    // должно работать даже если страница имеет прокрутку
-    // подсказка должна перекрывать текст под ней
-    // подсказка не должна вылезать за экран
-    function Tooltip(options) {
-
-      var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
-      var tooltipElem;
-      var isEnabled = true;
-
-      var elem = options.elem;
-      var html = options.html;
-
-      // обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
-      elem.hover(show, hide);
-
-      function hide() {
-        getTooltipElem().remove();
-      }
-
-      function show() {
-        var elemCoords = elem.offset();
-
-        var tooltipElem = getTooltipElem();
-
-        var winLeft = $(window).scrollLeft();
-        var winTop = $(window).scrollTop();
-
-        tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
-
-        var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth()) / 2 ^ 0;
-        if (left < winLeft) left = winLeft; // вылезли за левую границу
-
-        var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
-        if (top < winTop) { // вылезли за верхнюю границу
-          top = elemCoords.top + elem.outerHeight() + offsetFromElement;
-        }
-
-        tooltipElem.css({
-          left: left,
-          top: top
-        });
-      }
-
-      function getTooltipElem() {
-        if (!tooltipElem) {
-          tooltipElem = $('<div/>', {
-            "class": 'tooltip',
-            html: html
-          });
-        }
-        return tooltipElem;
-      }
-
-    }
-
-    new Tooltip({
-      elem: $('#link'),
-      html: "подсказка длиннее, чем элемент"
-    });
-
-
-    new Tooltip({
-      elem: $('#link2'),
-      html: "HTML<br>подсказка",
-      offset: 0
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/1-tooltip-over-element/source.view/index.html b/archive/widget-tasks/1-tooltip-over-element/source.view/index.html
deleted file mode 100644
index bee111fb..00000000
--- a/archive/widget-tasks/1-tooltip-over-element/source.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    
-    .tooltip {
-      /* ваш стиль */
-    }
-  </style>
-</head>
-
-<body>
-
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
-
-  <a href="#" id="link">Ссылка с <i>подсказкой</i></a>
-  <a href="#" id="link2">Еще ссылка</a>
-
-  <script>
-    // должно работать даже если страница имеет прокрутку
-    // подсказка должна перекрывать текст под ней
-    // подсказка не должна вылезать за экран
-    function Tooltip(options) {
-      /* ваш код */
-    }
-
-    new Tooltip({
-      elem: $('#link'),
-      html: "подсказка длиннее, чем элемент"
-    });
-
-
-    new Tooltip({
-      elem: $('#link2'),
-      html: "HTML<br>подсказка",
-      offset: 0
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/1-tooltip-over-element/task.md b/archive/widget-tasks/1-tooltip-over-element/task.md
deleted file mode 100644
index fd38ed19..00000000
--- a/archive/widget-tasks/1-tooltip-over-element/task.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Подсказка над элементом
-
-[importance 5]
-
-Создайте всплывающую подсказку над элементом. 
-
-Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.
-
-Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.
-
-[iframe src="solution" height=200 link border=1]
-
-Способ добавления подсказки к элементу:
-
-```js
-new Tooltip({
-  elem: $('#elem'),
-  html: "Вот <b>такая</b> подсказка!",
-  // вертикальное расстояние от подсказки до элемента
-  offset: 20 // необязательный параметр, по умолчанию 10
-});
-```
-
-<ul>
-<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
-<li>Подсказка не должна вылезать за пределы экрана, если нельзя показать сверху -- показывать снизу элемента.</li>
-<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
-</ul>
-
-
-
-P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.
\ No newline at end of file
diff --git a/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png b/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png
deleted file mode 100644
index d9d67cfa..00000000
Binary files a/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png and /dev/null differ
diff --git a/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png b/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png
deleted file mode 100644
index 6a85e4fa..00000000
Binary files a/archive/widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png and /dev/null differ
diff --git a/archive/widget-tasks/2-draggable-windows/index.html b/archive/widget-tasks/2-draggable-windows/index.html
deleted file mode 100644
index 20a0625b..00000000
--- a/archive/widget-tasks/2-draggable-windows/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <link type="text/css" rel="stylesheet" href="window.css" />
-  <style>
-    html,
-    body {
-      padding: 0;
-      margin: 0;
-    }
-  </style>
-  <script src="draggableWindow.js"></script>
-</head>
-
-<body style="height:2000px">
-
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-
-  <script type="text/template" id="draggable-window-template">
-    <div class="window-title">
-      <%=title%>
-    </div>
-    <div class="window-content"></div>
-    <form class="window-message-form">
-      <input type="text" name="message" class="window-message-text">
-      <input type="submit" name="submit" class="window-message-submit" value="Послать">
-    </form>
-  </script>
-
-  <script>
-    var win = new DraggableWindow({
-      title: "Чат с Петей",
-      template: $('#draggable-window-template').html()
-    });
-
-    win.getElement().appendTo('body');
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-draggable-windows/solution.md b/archive/widget-tasks/2-draggable-windows/solution.md
deleted file mode 100644
index 26212e1d..00000000
--- a/archive/widget-tasks/2-draggable-windows/solution.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Подсказки
-
-<ul>
-<li>Так как высота и ширина окна известны, вёрстка внутри может содержать точные пиксельные размеры.</li>
-<li>При обработке события `document.onmousemove`, мы вычисляем новые координаты `left/top` и смотрим, вылезает ли окно за границы. Если да -- меняем `left/top` на максимально возможные, чтобы не вылезало.</li>
-<li>На форме вешаем обработчик `onsubmit`, т.к. иначе Enter в поле отправить её на сервер.</li>
-</ul>
-
-# Решение
-
diff --git a/archive/widget-tasks/2-draggable-windows/solution.view/draggableWindow.js b/archive/widget-tasks/2-draggable-windows/solution.view/draggableWindow.js
deleted file mode 100644
index e8ca5032..00000000
--- a/archive/widget-tasks/2-draggable-windows/solution.view/draggableWindow.js
+++ /dev/null
@@ -1,127 +0,0 @@
-// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
-// в другие стороны
-
-// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
-// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
-
-// позиция мыши смещается
-function DraggableWindow(options) {
-  var self = this;
-
-  var title = options.title;
-  var template = typeof options.template == 'function' ? // компиляция, если строка
-    options.template : _.template(options.template);
-
-  var elem, contentElem;
-
-  var mouseDownShift;
-
-  function render() {
-    elem = $('<div/>', {
-      "class": "window",
-      html: template({
-        title: title
-      })
-    });
-
-    $('form', elem).on('submit', onSubmit);
-
-    titleElem = elem.find('.window-title');
-
-    titleElem.on('selectstart dragstart', false);
-    titleElem.on('mousedown', onTitleMouseDown);
-
-    contentElem = elem.find('.window-content'); // = children[1]
-  }
-
-  this.getElement = function() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function onTitleMouseDown(e) {
-    startDrag(e.pageX, e.pageY);
-    return false;
-  };
-
-  function startDrag(mouseDownX, mouseDownY) {
-    // запомнить координаты нажатия
-    var coords = elem.offset();
-    mouseDownShift = {
-      x: mouseDownX - coords.left,
-      y: mouseDownY - coords.top
-    };
-
-    // двигать
-    $(document).on({
-      'mousemove.draggablewindow': onDocumentMouseMove,
-      'mouseup.draggablewindow': onDocumentMouseUp
-    });
-
-    elem.addClass('window-moving');
-  }
-
-  function onDocumentMouseUp() {
-    $(document).off('.draggablewindow');
-    elem.removeClass('window-moving');
-  }
-
-  function onDocumentMouseMove(e) {
-    moveWindowAtCursor(e.pageX, e.pageY);
-  }
-
-  function moveWindowAtCursor(pageX, pageY) {
-    var newLeft = pageX - mouseDownShift.x;
-    var newTop = pageY - mouseDownShift.y;
-
-    // проверим, не вылезем ли мы за границы экрана
-    var windowLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    var windowTop = window.pageYOffset || document.documentElement.scrollTop;
-    var windowRight = windowLeft + document.documentElement.clientWidth;
-    var windowBottom = windowTop + document.documentElement.clientHeight;
-
-    // тут не if..else, а if т.к., возможно, обе координаты надо поправить
-    if (newLeft < windowLeft) {
-      newLeft = windowLeft;
-    }
-    if (newLeft > windowRight - elem.outerWidth()) {
-      newLeft = windowRight - elem.outerWidth(); // внешняя ширина с учетом рамки внешней
-    }
-    if (newTop < windowTop) {
-      newTop = windowTop;
-    }
-    if (newTop > windowBottom - titleElem.outerHeight()) {
-      newTop = windowBottom - titleElem.outerHeight();
-      // внизу заголовок будет немного залезать за край, т.к. нужно мерять вместе с рамкой верхней на самом деле
-      // но здесь это не страшно
-    }
-
-    elem.css({
-      left: newLeft,
-      top: newTop
-    });
-  };
-
-  function onSubmit(e) {
-    // принять события, совершить обработку события, связанную с формой
-    var form = e.currentTarget;
-    var value = form.elements.message.value;
-    form.elements.message.value = '';
-    if (value) {
-      submit(value); // логика по отправке сообщения
-    }
-    return false;
-  }
-
-  function submit(message) {
-    // добавить
-    var newMessageElem = $('<div>', {
-      text: message
-    }).appendTo(contentElem);
-
-    // прокрутить к новому сообщению
-    contentElem.prop('scrollTop', 999999999);
-  }
-
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/2-draggable-windows/solution.view/index.html b/archive/widget-tasks/2-draggable-windows/solution.view/index.html
deleted file mode 100644
index 20a0625b..00000000
--- a/archive/widget-tasks/2-draggable-windows/solution.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <link type="text/css" rel="stylesheet" href="window.css" />
-  <style>
-    html,
-    body {
-      padding: 0;
-      margin: 0;
-    }
-  </style>
-  <script src="draggableWindow.js"></script>
-</head>
-
-<body style="height:2000px">
-
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-
-  <script type="text/template" id="draggable-window-template">
-    <div class="window-title">
-      <%=title%>
-    </div>
-    <div class="window-content"></div>
-    <form class="window-message-form">
-      <input type="text" name="message" class="window-message-text">
-      <input type="submit" name="submit" class="window-message-submit" value="Послать">
-    </form>
-  </script>
-
-  <script>
-    var win = new DraggableWindow({
-      title: "Чат с Петей",
-      template: $('#draggable-window-template').html()
-    });
-
-    win.getElement().appendTo('body');
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-draggable-windows/solution.view/window.css b/archive/widget-tasks/2-draggable-windows/solution.view/window.css
deleted file mode 100644
index c6a25e60..00000000
--- a/archive/widget-tasks/2-draggable-windows/solution.view/window.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.window {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  width: 200px;
-  height: 300px;
-  border: 2px #ADD8E6 groove;
-  /* раскомментировать для проверки, вылезает ли внешняя рамка за экран
-    border: 2px red solid;
-    */
-  
-  background: white;
-}
-
-.window-title {
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  background-color: #4169E1;
-  color: white;
-  text-align: center;
-  cursor: pointer;
-}
-
-.window-moving .window-title {
-  cursor: move;
-}
-
-.window-message-form {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-  line-height: 30px;
-  width: 100%;
-  background: #ADD8E6;
-}
-
-.window-content {
-  height: 240px;
-  padding: 3px;
-  overflow-y: auto;
-}
-
-.window-message-text {
-  width: 120px;
-}
-
-.window-message-submit {
-  width: 70px;
-  margin-left: 2px;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/2-draggable-windows/source.view/index.html b/archive/widget-tasks/2-draggable-windows/source.view/index.html
deleted file mode 100644
index e87654d0..00000000
--- a/archive/widget-tasks/2-draggable-windows/source.view/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <style>
-    html,
-    body {
-      padding: 0;
-      margin: 0;
-    }
-    /* ваши стили */
-  </style>
-</head>
-
-<body>
-
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-
-  <script type="text/template" id="draggable-window-template">
-    /* шаблон для окна */
-  </script>
-
-  <script>
-    // если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
-    // в другие стороны
-
-    // чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
-    // исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
-
-    // позиция мыши смещается
-    function DraggableWindow(options) {
-      var self = this;
-
-      /* ваш код */
-    }
-
-    var win = new DraggableWindow({
-      title: "Чат с Петей",
-      template: $('#draggable-window-template').html()
-    });
-
-    win.getElement().appendTo('body');
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-draggable-windows/task.md b/archive/widget-tasks/2-draggable-windows/task.md
deleted file mode 100644
index ed59c651..00000000
--- a/archive/widget-tasks/2-draggable-windows/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Переносимые окна
-
-[importance 5]
-
-Создайте виджет окна для чата.
-
-Окно -- это `DIV`, который можно переносить, взявшись за заголовок. По нажатию на "Послать" данные передаются в содержание окна. 
-
-[demo src="index.html"/]
-
-Синтаксис:
-
-```js
-new DraggableWindow({
-  title: "Чат с Петей",
-  template: HTML - шаблон окна
-});
-```
-
-<ul>
-<li>Возможно появление прокрутки внутри окна, если сообщений много. Сообщения не должны вылезать вовне окна.</li>
-<li>Окно нельзя вытащить за пределы экрана, даже резкими движениями мыши. Влево-вправо-вверх оно вообще не должно вылезать за границу, а вниз -- только до заголовка. Попробуйте перемещать его в демо, чтобы увидеть.</li>
-<li>Для задания DOM-структуры окна используйте шаблон. Может быть создано несколько окон.</li>
-</ul>
-
diff --git a/archive/widget-tasks/2-moving-tooltip/solution.md b/archive/widget-tasks/2-moving-tooltip/solution.md
deleted file mode 100644
index d0cf3f29..00000000
--- a/archive/widget-tasks/2-moving-tooltip/solution.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# События
-
-Три события имеют отношение к подсказке:
-<ol>
-<li>При `mouseover` -- показать.</li>
-<li>При `mousemove` -- показать на новом месте.</li>
-<li>При `mouseout` -- спрятать.</li>
-</ol>
-
-...Но при заходе на элемент происходят сразу оба события: `mouseover` и `mousemove` на нём же. Зачем вызывать код для показа два раза? Можно оставить его только в `mousemove`.
-
-Стиль элемента подсказки:
-
-```css
-/*+ no-beautify */
-.tooltip {
-  position:absolute;
-  z-index:100; /* подсказка должна перекрывать другие элементы */
-  ...
-}
-```
-
-# Решение
-
-[edit src="solution"]Решение в песочнице[/edit]
-
-В нём есть две тонкости.
-<ol>
-<li>Для того, чтобы можно было получить высоту и ширину, подсказку надо сначала показать.</li>
-<li>При показе -- важно, чтобы подсказка не оказалась *под* курсором. Если такое произойдет, то дальнейшие события `mousemove` станут происходить *уже на подсказке*, а не на элементе, и их обработка сломается.</li>
-</ol>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-moving-tooltip/solution.view/index.html b/archive/widget-tasks/2-moving-tooltip/solution.view/index.html
deleted file mode 100644
index 6e5368d8..00000000
--- a/archive/widget-tasks/2-moving-tooltip/solution.view/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    
-    .tooltip {
-      position: absolute;
-      z-index: 100;
-      /* подсказка должна перекрывать другие элементы */
-      
-      padding: 10px 20px;
-      /* красивости... */
-      
-      border: 1px solid #b3c9ce;
-      border-radius: 4px;
-      text-align: center;
-      font: italic 14px/1.3 arial, sans-serif;
-      color: #333;
-      background: #fff;
-      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
-    }
-  </style>
-</head>
-
-<body>
-
-  <a href="#" id="link">Ссылка с подсказкой</a>
-  <a href="#" id="link2">Еще ссылка</a>
-
-  <div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
-    <em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
-  </div>
-
-  <script>
-    // должно работать даже если страница имеет прокрутку
-    // подсказка должна перекрывать текст под ней
-    // у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
-    function Tooltip(options) {
-
-      var offsetFromCursor = (options.offset === undefined) ? 10 : options.offset;
-      var tooltipElem;
-      var isEnabled = true;
-
-      var elem = options.elem;
-      var html = options.html;
-
-      elem.on({
-        mouseenter: onMouseEnter,
-        mouseleave: onMouseLeave,
-        mousemove: onMouseMove
-      });
-
-      function onMouseEnter(e) {
-        show(e.pageX, e.pageY);
-      }
-
-      function onMouseLeave() {
-        hide();
-      }
-
-      function onMouseMove(e) {
-        show(e.pageX, e.pageY);
-      }
-
-
-      function hide() {
-        getTooltipElem().remove();
-      };
-
-      function getTooltipElem() {
-        if (!tooltipElem) {
-          tooltipElem = $('<div/>', {
-            "class": 'tooltip',
-            html: html
-          });
-        }
-        return tooltipElem;
-      }
-
-      function show(pageX, pageY) {
-        var tooltipElem = getTooltipElem();
-
-        if (!tooltipElem.is(':visible')) {
-          // первым делом - отобразить подсказку, чтобы можно было получить её размеры
-          tooltipElem.appendTo('body');
-        }
-
-        var scrollY = $(window).scrollTop();
-        var winBottom = scrollY + $(window).height();
-
-        var scrollX = $(window).scrollLeft();
-        var winRight = scrollX + $(window).width();
-
-        var newLeft = pageX + offsetFromCursor;
-        var newTop = pageY + offsetFromCursor;
-
-        if (newLeft + tooltipElem.outerWidth() > winRight) { // если за правой границей окна
-          newLeft -= tooltipElem.outerWidth();
-          newLeft -= offsetFromCursor + 2; // немного левее, чтобы курсор был не над подсказкой
-        }
-
-        if (newTop + tooltipElem.outerHeight() > winBottom) { // если за нижней границей окна
-          newTop -= tooltipElem.outerHeight();
-          newTop -= offsetFromCursor + 2; // немного выше
-        }
-
-        tooltipElem.css({
-          left: newLeft,
-          top: newTop
-        });
-      };
-
-    }
-
-    new Tooltip({
-      elem: $('#elem'),
-      html: "Вот <b>такая</b> подсказка!"
-    });
-
-    new Tooltip({
-      elem: $('#link'),
-      html: $('#link').html()
-    });
-
-    new Tooltip({
-      elem: $('#link2'),
-      html: $('#link2').html()
-    });
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-moving-tooltip/source.view/index.html b/archive/widget-tasks/2-moving-tooltip/source.view/index.html
deleted file mode 100644
index 563d2b16..00000000
--- a/archive/widget-tasks/2-moving-tooltip/source.view/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    body {
-      height: 2000px;
-      /* подсказка должна работать независимо от прокрутки */
-    }
-    
-    .tooltip {
-      /* ваш стиль */
-    }
-  </style>
-</head>
-
-<body>
-
-  <a href="#" id="link">Ссылка с подсказкой</a>
-  <a href="#" id="link2">Еще ссылка</a>
-
-  <div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
-    <em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
-  </div>
-
-  <script>
-    // должно работать даже если страница имеет прокрутку
-    // подсказка должна перекрывать текст под ней
-    // у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
-    function Tooltip(options) {
-      /* ваш код */
-    }
-
-    new Tooltip({
-      elem: $('#elem'),
-      html: "Вот <b>такая</b> подсказка!"
-    });
-
-    new Tooltip({
-      elem: $('#link'),
-      html: $('#link').html()
-    });
-
-    new Tooltip({
-      elem: $('#link2'),
-      html: $('#link2').html()
-    });
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/2-moving-tooltip/task.md b/archive/widget-tasks/2-moving-tooltip/task.md
deleted file mode 100644
index e6b50613..00000000
--- a/archive/widget-tasks/2-moving-tooltip/task.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Подсказка, следующая за курсором
-
-[importance 4]
-
-Создайте всплывающую подсказку, следующую за курсором. 
-
-<ul>
-<li>Подсказка должна появляться при наведении на элемент, на небольшом расстоянии справа-снизу от курсора.</li>
-<li>При передвижении курсора подсказка следует за ним.</li>
-<li>Если курсор слишком низко/справа, то чтобы подсказка не вылезла за нижнюю/правую границу экрана -- пусть отображается сверху/слева от курсора.</li>
-</ul>
-
-Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на правый-нижний угол.
-
-[iframe src="solution" height=200 link border=1]
-
-Способ добавления подсказки к элементу:
-
-```js
-new Tooltip({
-  elem: $('#elem'),
-  html: "Вот <b>такая</b> подсказка!")
-});
-```
-
-Естественные пожелания:
-<ul>
-<li>Подсказка не должна "моргать" при движении мыши.</li>
-<li>Подсказка должна правильно работать, если у страницы есть прокрутка.</li>
-<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
-<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
-</ul>
-
-
diff --git a/archive/widget-tasks/3-resize-img/solution.md b/archive/widget-tasks/3-resize-img/solution.md
deleted file mode 100644
index 0be9b458..00000000
--- a/archive/widget-tasks/3-resize-img/solution.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# CSS
-
-Для захвата проще всего создать дополнительные `DIV'ы` и отпозиционировать их сбоку и справа-снизу `IMG`. При нажатии на них начинать смену размера. 
-
-CSS-структура:
-
-```html
-<div class="resize-wrapper" style="width: 503px; height: 285px;">
-  <img src="heroes.jpg" id="heroes" style="width:500px;height:282px">
-  <div class="resize-handle-s"></div>
-  <div class="resize-handle-e"></div>
-  <div class="resize-handle-se"></div>
-</div>
-```
-
-Внешний `DIV` подстраивается под размер картинки и имеет `position:relative`. Внутри него расположены абсолютно позиционированные "ручки" для захвата.
-
-Стиль:
-
-```css
-.resize-wrapper {
-  position: relative;
-}
-.resize-wrapper img {
-  /* img при таком DOCTYPE в некоторых браузерах имеет display:inline, в некоторых display:block
-     если оставить inline, то под img браузер оставит пустое место для "хвостов" букв
-  */
-  display: block;
-}
-
-.resize-handle-se { /* правый-нижний угол */
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  background: url(handle-se.png) no-repeat;
-  cursor: se-resize;
-}
-
-.resize-handle-s { /* нижняя "рамка", за которую можно потащить */
-  position: absolute;
-  bottom: 0;
-  height: 3px;
-  width:100%;
-  background: gray;
-  cursor: s-resize;
-}
-
-.resize-handle-e { /* правая "рамка", за которую можно потащить */
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 3px;
-  height:100%;
-  background: gray;
-  cursor: e-resize;
-}
-```
-
-Для обозначения низа используется буква "s" (south, "юг" по-английски), обозначения правой стороны -- буква "e" (east, "восток" по-английски).
-
-Использование сторон света для обозначения направления можно часто встретить в скриптах.
-
-# Алгоритм
-
-<ol>
-<li>При инициализации IMG оборачивается во внешнюю обертку и обкладывается `DIV'ами`, на которых ловим `mousedown`. Обертка нужна, чтобы абсолютно позиционировать `DIV'ы` внутри неё под/сбоку изображения.</li>
-<li>При наступлении `mousedown`, начинаем ловить `document.mousemove` и подгонять картинку под размер, а обертку -- под картинку.
-
-Желательно заодно отменить браузерное выделение и Drag'n'Drop, возвратив `false` из собработчиков событий `mousedown` и `dragstart`.
-</li>
-<li>При наступлении `mouseup` -- конец.</li>
-
-[edit src="solution"]Открыть полное решение[/edit]
\ No newline at end of file
diff --git a/archive/widget-tasks/3-resize-img/solution.view/index.html b/archive/widget-tasks/3-resize-img/solution.view/index.html
deleted file mode 100644
index 6ed14c12..00000000
--- a/archive/widget-tasks/3-resize-img/solution.view/index.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    .resize-wrapper {
-      position: relative;
-    }
-    
-    .resize-wrapper img {
-      /* img при таком DOCTYPE в некоторых браузерах имеет display:inline, в некоторых display:block
-         если оставить inline, то под img браузер оставит пустое место для "хвостов" букв
-      */
-      
-      display: block;
-    }
-    
-    .resize-handle-se {
-      /* правый-нижний угол */
-      
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      background: url(https://js.cx/clipart/handle-se.png) no-repeat;
-      cursor: se-resize;
-    }
-    
-    .resize-handle-s {
-      /* нижняя "рамка", за которую можно потащить */
-      
-      position: absolute;
-      bottom: 0;
-      height: 3px;
-      width: 100%;
-      background: gray;
-      cursor: s-resize;
-    }
-    
-    .resize-handle-e {
-      /* правая "рамка", за которую можно потащить */
-      
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 3px;
-      height: 100%;
-      background: gray;
-      cursor: e-resize;
-    }
-  </style>
-</head>
-
-<body>
-
-  <img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg">
-
-  <div id="info"></div>
-
-  <script>
-    function Resizeable(options) {
-      var self = this;
-
-      var elem = options.elem;
-      var handleSize = options.handleSize || 3;
-
-      var newWidth, newHeight, resizeType; // размеры в процессе ресайза
-
-      // внешняя обертка
-      var wrapper = $('<div class="resize-wrapper"/>')
-      wrapper.prependTo(elem.parent())
-      wrapper.append(elem);
-
-      // добавляем "ручки" в обертку
-      wrapper.append(
-        '<div class="resize-handle-s"/><div class="resize-handle-e"/><div class="resize-handle-se"/>'
-      );
-
-      // отменить перенос и выделение браузера
-      // в дополнение к return false из mousedown
-      wrapper.on('selectstart dragstart', false);
-
-      adjustWrapperSize();
-
-      wrapper.on('mousedown', onMouseDown);
-
-      function onMouseDown(e) {
-        var className = e.target.className;
-        if (className.indexOf("resize-handle-") == 0) {
-          // поймали клик на "ручке" - вызываем начало ресайза
-          resizeType = className.slice("resize-handle-".length);
-          startResize();
-        }
-        return false;
-      }
-
-      function adjustWrapperSize() {
-        // подгоняет размер обертки под картинку
-        wrapper.css({
-          width: elem.width() + handleSize,
-          height: elem.height() + handleSize
-        });
-      }
-
-      function startResize() {
-        $(document).on('mousemove.resizeable', onDocumentMouseMove);
-        $(document).on('mouseup.resizeable', onDocumentMouseUp);
-      }
-
-      function onDocumentMouseMove(e) {
-        var offset = wrapper.offset();
-
-        if (~resizeType.indexOf("s")) {
-          // в ручке есть буква "s" - значит меняем высоту картинки
-          newHeight = Math.max(e.pageY - offset.top, handleSize);
-          elem.css('height', newHeight);
-        }
-        if (~resizeType.indexOf("e")) {
-          // в ручке есть буква "e" - значит меняем ширину картинки
-          newWidth = Math.max(e.pageX - offset.left, handleSize);
-          elem.css('width', newWidth);
-        }
-
-        // подогнать обертку
-        adjustWrapperSize();
-      }
-
-      function onDocumentMouseUp() {
-        endResize();
-      }
-
-      function endResize() {
-        $(document).off('.resizeable');
-        $(self).triggerHandler({
-          type: "resize",
-          newWidth: newWidth,
-          newHeight: newHeight
-        });
-      }
-
-    }
-
-    var resizeMe = new Resizeable({
-      elem: $('#heroes')
-    });
-
-    $(resizeMe).on("resize", function(e) {
-      // вывести результат
-      $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/3-resize-img/source.view/index.html b/archive/widget-tasks/3-resize-img/source.view/index.html
deleted file mode 100644
index beea1c0d..00000000
--- a/archive/widget-tasks/3-resize-img/source.view/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-</head>
-
-<body>
-
-  <img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg"> Картинка для декорации правого-нижнего угла: <img src="https://js.cx/clipart/handle-se.png">
-
-  <div id="info"></div>
-
-  <script>
-    function Resizeable(options) {
-      /* ваш код */
-    }
-
-    var resizeMe = new Resizeable({
-      elem: $('#heroes')
-    });
-
-    $(resizeMe).on("resize", function(e) {
-      // вывести результат
-      $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/3-resize-img/task.md b/archive/widget-tasks/3-resize-img/task.md
deleted file mode 100644
index 07408569..00000000
--- a/archive/widget-tasks/3-resize-img/task.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Менять размер картинки при помощи мыши
-
-[importance 5]
-
-Реализуйте интерфейс для смены размера изображения мышью. 
-
-Пусть изображение "тянется" при захвате его снизу, справа и в правом-нижнем углу, вот так:
-[iframe height=350 src="solution" link]
-
-По окончанию смены размеров должно быть событие **`resize`** c новыми размерами.
-
-Синтаксис:
-
-```js
-var resizeMe = new Resizeable({
-  elem: $('#heroes')
-});
-
-$(resizeMe).on("resize", function(e) {
-  // вывести результат
-  $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
-});
-```
-
-Минимальный размер изображения 3x3, меньше ресайзить нельзя.
-
-В исходном документе есть ссылка на <a href="https://js.cx/clipart/handle-se.png">картинку handle-se.png</a> для правого-нижнего угла.
-
diff --git a/archive/widget-tasks/3-window-manager/solution.md b/archive/widget-tasks/3-window-manager/solution.md
deleted file mode 100644
index 62feb093..00000000
--- a/archive/widget-tasks/3-window-manager/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-[edit src="solution"]Открыть решение в новом окне[/edit]
diff --git a/archive/widget-tasks/3-window-manager/solution.view/draggableWindow.js b/archive/widget-tasks/3-window-manager/solution.view/draggableWindow.js
deleted file mode 100644
index 34976d55..00000000
--- a/archive/widget-tasks/3-window-manager/solution.view/draggableWindow.js
+++ /dev/null
@@ -1,145 +0,0 @@
-// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
-// в другие стороны
-
-// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
-// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
-
-// позиция мыши смещается
-function DraggableWindow(options) {
-  var self = this;
-
-  var title = options.title;
-  var template = typeof options.template == 'function' ? // компиляция, если строка
-    options.template : _.template(options.template);
-
-  var elem, contentElem;
-
-  var mouseDownShift;
-
-  function render() {
-    elem = $('<div tabindex="0" class="window"/>').html(template({
-      title: title
-    }));
-
-    $('form', elem).on('submit', onSubmit);
-
-    titleElem = elem.find('.window-title');
-
-    titleElem.on('selectstart dragstart', false);
-    titleElem.on('mousedown', onTitleMouseDown);
-
-    contentElem = elem.find('.window-content'); // = children[1]
-    elem.on('focusin', onFocus);
-  }
-
-  this.getElement = function() {
-    if (!elem) render();
-    return elem;
-  }
-
-  function onFocus() {
-    $(self).triggerHandler({
-      type: 'focus'
-    });
-  }
-
-  function onTitleMouseDown(e) {
-    startDrag(e.pageX, e.pageY);
-
-    setTimeout(onFocus, 0);
-    return false; // returning false prevents onfocus
-  };
-
-  function startDrag(mouseDownX, mouseDownY) {
-    // запомнить координаты нажатия
-    var coords = elem.offset();
-    mouseDownShift = {
-      x: mouseDownX - coords.left,
-      y: mouseDownY - coords.top
-    };
-
-    // двигать
-    $(document).on({
-      'mousemove.draggablewindow': onDocumentMouseMove,
-      'mouseup.draggablewindow': onDocumentMouseUp
-    });
-
-    elem.addClass('window-moving');
-  }
-
-  function onDocumentMouseUp() {
-    $(document).off('.draggablewindow');
-    elem.removeClass('window-moving');
-  }
-
-  function onDocumentMouseMove(e) {
-    moveWindowAtCursor(e.pageX, e.pageY);
-  }
-
-  function moveWindowAtCursor(pageX, pageY) {
-    var newLeft = pageX - mouseDownShift.x;
-    var newTop = pageY - mouseDownShift.y;
-
-    // проверим, не вылезем ли мы за границы экрана
-    var windowLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    var windowTop = window.pageYOffset || document.documentElement.scrollTop;
-    var windowRight = windowLeft + document.documentElement.clientWidth;
-    var windowBottom = windowTop + document.documentElement.clientHeight;
-
-    // тут не if..else, а if т.к., возможно, обе координаты надо поправить
-    if (newLeft < windowLeft) {
-      newLeft = windowLeft;
-    }
-    if (newLeft > windowRight - elem.outerWidth()) {
-      newLeft = windowRight - elem.outerWidth(); // внешняя ширина с учетом рамки внешней
-    }
-    if (newTop < windowTop) {
-      newTop = windowTop;
-    }
-    if (newTop > windowBottom - titleElem.outerHeight()) {
-      newTop = windowBottom - titleElem.outerHeight();
-      // внизу заголовок будет немного залезать за край, т.к. нужно мерять вместе с рамкой верхней на самом деле
-      // но здесь это не страшно
-    }
-
-    elem.css({
-      left: newLeft,
-      top: newTop
-    });
-  };
-
-  function onSubmit(e) {
-    // принять события, совершить обработку события, связанную с формой
-    var form = e.currentTarget;
-    var value = form.elements.message.value;
-    form.elements.message.value = '';
-    if (value) {
-      submit(value); // логика по отправке сообщения
-    }
-    return false;
-  }
-
-  function submit(message) {
-    // добавить
-    var newMessageElem = $('<div>', {
-      text: message
-    }).appendTo(contentElem);
-
-    // прокрутить к новому сообщению
-    contentElem.prop('scrollTop', 999999999);
-  }
-
-
-  this.setZIndex = function(zIndex) {
-    elem.css('z-index', zIndex);
-  };
-
-  this.getZIndex = function() {
-    return +elem.css('z-index') || 0;
-  };
-
-  this.toString = function() {
-    return "[Window " + options.title + " " + elem.css('z-index') + "]";
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/3-window-manager/solution.view/index.html b/archive/widget-tasks/3-window-manager/solution.view/index.html
deleted file mode 100644
index b4bc0711..00000000
--- a/archive/widget-tasks/3-window-manager/solution.view/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <link type="text/css" rel="stylesheet" href="window.css" />
-  <style>
-    html,
-    body {
-      padding: 0;
-      margin: 0;
-    }
-  </style>
-  <script src="draggableWindow.js"></script>
-  <script src="windowManager.js"></script>
-</head>
-
-<body>
-
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
-
-  <script type="text/template" id="draggable-window-template">
-    <div class="window-title">
-      <%=title%>
-    </div>
-    <div class="window-content"></div>
-    <form class="window-message-form">
-      <input type="text" name="message" class="window-message-text">
-      <input type="submit" name="submit" class="window-message-submit" value="Послать">
-    </form>
-  </script>
-
-  <script>
-    WindowManager.setTemplate($('#draggable-window-template').html().trim());
-
-    WindowManager.addWindow({
-      title: "Чат с Петей"
-    });
-
-    WindowManager.addWindow({
-      title: "Чат с Машей"
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/3-window-manager/solution.view/window.css b/archive/widget-tasks/3-window-manager/solution.view/window.css
deleted file mode 100644
index c6a25e60..00000000
--- a/archive/widget-tasks/3-window-manager/solution.view/window.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.window {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  width: 200px;
-  height: 300px;
-  border: 2px #ADD8E6 groove;
-  /* раскомментировать для проверки, вылезает ли внешняя рамка за экран
-    border: 2px red solid;
-    */
-  
-  background: white;
-}
-
-.window-title {
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  background-color: #4169E1;
-  color: white;
-  text-align: center;
-  cursor: pointer;
-}
-
-.window-moving .window-title {
-  cursor: move;
-}
-
-.window-message-form {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-  line-height: 30px;
-  width: 100%;
-  background: #ADD8E6;
-}
-
-.window-content {
-  height: 240px;
-  padding: 3px;
-  overflow-y: auto;
-}
-
-.window-message-text {
-  width: 120px;
-}
-
-.window-message-submit {
-  width: 70px;
-  margin-left: 2px;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/3-window-manager/solution.view/windowManager.js b/archive/widget-tasks/3-window-manager/solution.view/windowManager.js
deleted file mode 100644
index 77f26121..00000000
--- a/archive/widget-tasks/3-window-manager/solution.view/windowManager.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var WindowManager = new function() {
-
-  var windows = [];
-  var activeWindow;
-
-  var template;
-
-  this.setTemplate = function(newTemplate) {
-    template = _.template(newTemplate);
-  };
-
-  this.addWindow = function(options) {
-
-    var win = new DraggableWindow({
-      title: options.title,
-      template: template
-    });
-
-    $(win).on("focus", function() {
-      activateWindow(this);
-    });
-
-    win.getElement().appendTo('body');
-
-    windows.push(win);
-    activateWindow(win);
-
-    return win;
-  }
-
-  function activateWindow(win) {
-    if (activeWindow == win) return;
-    activeWindow = win;
-    sortWindows();
-  }
-
-  /**
-   * пересортировать окна
-   */
-  function sortWindows() {
-    windows.sort(function(a, b) {
-      if (activeWindow == a) return 1; // активное окно больше всех
-      if (activeWindow == b) return -1; // активное окно больше всех
-      return a.getZIndex() - b.getZIndex(); // порядок среди остальных - оставляем "как есть"
-    });
-    for (var i = 0; i < windows.length; i++) {
-      windows[i].setZIndex(i + 1);
-    }
-
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/3-window-manager/task.md b/archive/widget-tasks/3-window-manager/task.md
deleted file mode 100644
index 85652f58..00000000
--- a/archive/widget-tasks/3-window-manager/task.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Менеджер окон
-
-[importance 5]
-
-Эта задача является продолжением задачи [](/task/draggable-windows).
-
-Предусмотрите возможность создавать несколько окон. При этом то, которое получает фокус, становится выше всех.
-
-Общее управление окнами должен осуществлять объект `WindowManager`.
-
-Синтаксис:
-
-```js
-WindowManager.setTemplate(html-шаблон для окон);
-
-WindowManager.addWindow({ // создаёт окно по шаблону с заголовком
-  title: "Чат с Петей"    // и показывает его
-});
-
-WindowManager.addWindow({ // ещё одно окно
-  title: "Чат с Машей"
-});
-```
-
-Демо в ифрейме:
-[iframe src="solution" height=300 border=1]
-
-
-<ul>
-<li>Окна перекрывают друг-друга по `z-index`. Максимальный `z-index` должен быть ограничен: от 1 до количества окон.</li>
-<li>Информация от окна к менеджеру передаётся через события.</li>
-<li>Инкапсуляция: `WindowManager` использует объект `DraggableWindow`, но не лезет в DOM окна. Обработчики -- только на объект.</li>
-</ul>
-
-В качестве исходного документа можно взять решение [предыдущей задачи](/task/draggable-windows). Скорее всего, класс `DraggableWindow` понадобиться немного изменить, добавить события.
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.md b/archive/widget-tasks/4-double-calendar-with-arrows/solution.md
deleted file mode 100644
index e6e987ac..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.md
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-В решении присутствуют файлы из [задачи про календарь](/task/calendar), т.к. он используется в качестве компонента.
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.css b/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.css
deleted file mode 100644
index eb8885de..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.calendar-table {
-  border-collapse: collapse;
-}
-
-.calendar-table td,
-.calendar-table th {
-  border: 1px solid black;
-  padding: 3px;
-  text-align: center;
-}
-
-.calendar-table th {
-  font-weight: bold;
-  background-color: #E6E6E6;
-}
-
-.date-cell:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.date-cell.selected {
-  background: #0F0;
-}
-
-.calendar-table caption {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.js b/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.js
deleted file mode 100644
index be374d5a..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/calendar.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * options:
- *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
- *     если в объекте указаны только {year,month}, то день не выбран
- */
-function Calendar(options) {
-  var self = this;
-
-  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
-
-  var elem;
-  var year, month, day;
-
-  var showYear, showMonth;
-
-  parseValue(options.value);
-
-  // -----------------------
-
-  this.getElement = function() {
-    if (!elem) {
-      render();
-    }
-    return elem;
-  };
-
-  this.getValue = function() {
-    return day ? new Date(year, month, day) : null;
-  };
-
-  function parseValue(value) {
-    if (value instanceof Date) {
-      year = value.getFullYear();
-      month = value.getMonth();
-      day = value.getDate();
-    } else {
-      year = value.year;
-      month = value.month;
-      day = value.day;
-    }
-  }
-
-  /**
-   * Установить значение календаря
-   * @param newValue {Date или объект {year,month[,day]} Новое значение
-   * @param quiet Если true, то событие не генерируется
-   */
-  this.setValue = function(newValue, quiet) {
-    parseValue(newValue);
-
-    if (elem) {
-      clearSelected();
-      render();
-    }
-
-    if (!quiet) {
-      $(self).triggerHandler({
-        type: "select",
-        value: new Date(year, month, day)
-      });
-    }
-  };
-
-  this.clearValue = function() {
-    day = null;
-    clearSelected();
-  };
-
-  function render() {
-    if (!elem) {
-      elem = $('<div class="calendar"/>')
-        .on('click', '.date-cell', onDateCellClick);
-    }
-
-    if (showYear != year || showMonth != month) {
-      elem.html(renderCalendarTable(year, month));
-      elem.find('caption').html(monthNames[month] + ' ' + year);
-      showYear = year;
-      showMonth = month;
-    }
-
-    if (day) {
-      var num = getCellByDate(new Date(year, month, day));
-      elem.find('td').eq(num).addClass("selected");
-    }
-
-  }
-
-  function clearSelected() {
-    elem.find('.selected').removeClass('selected');
-  }
-
-
-  function onDateCellClick(e) {
-    day = $(e.target).html();
-    self.setValue({
-      year: year,
-      month: month,
-      day: day
-    });
-  }
-
-
-  /**
-   * Возвращает по дате номер TD в таблице
-   * Использование:
-   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
-   */
-  function getCellByDate(date) {
-    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
-
-    return getDay(dateDayOne) + date.getDate() - 1;
-  }
-
-  /**
-   * получить номер дня недели для date, от 0(пн) до 6(вс)
-   * @param date
-   */
-  function getDay(date) { //
-    var day = date.getDay();
-    if (day == 0) day = 7;
-    return day - 1;
-  }
-
-  /**
-   * Генерирует таблицу для календаря заданного месяца/года
-   */
-  function renderCalendarTable(year, month) {
-
-    var d = new Date(year, month);
-
-    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
-
-    for (var i = 0; i < getDay(d); i++) {
-      table.push('<td></td>');
-    }
-
-    // ячейки календаря с датами
-    while (d.getMonth() == month) {
-      table.push('<td class="date-cell">' + d.getDate() + '</td>');
-
-      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
-        table.push('</tr><tr>');
-      }
-
-      d.setDate(d.getDate() + 1);
-    }
-
-    // добить таблицу пустыми ячейками, если нужно
-    if (getDay(d) != 0) {
-      for (var i = getDay(d); i < 7; i++) {
-        table.push('<td></td>');
-      }
-    }
-
-    table.push('</tr></table>');
-
-    return table.join('\n')
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.css b/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.css
deleted file mode 100644
index 69159bcf..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.datepicker {
-  border: 1px solid black;
-  width: 350px;
-}
-
-.datepicker .body {
-  clear: both;
-  background: red;
-}
-
-.datepicker .prev-link {
-  float: left;
-  cursor: pointer;
-}
-
-.datepicker .next-link {
-  float: right;
-  cursor: pointer;
-}
-
-.datepicker .prev-link:hover,
-.datepicker .next-link:hover {
-  color: red;
-}
-
-.datepicker .header {
-  padding: 5px;
-  font-size: 120%;
-}
-
-.datepicker .calendar-left-holder {
-  float: left;
-}
-
-.datepicker .calendar-right-holder {
-  float: right;
-}
-
-.datepicker .title {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.js b/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.js
deleted file mode 100644
index 13ab042e..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/datepicker.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * options:
- *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
- *     если в объекте указаны только {year,month}, то день не выбран
- */
-function DatePicker(options) {
-  var elem;
-  var calendarLeft;
-  var calendarRight;
-  var calendarCache = {};
-
-  var showYear, showMonth;
-  var selectedYear, selectedMonth, selectedDay;
-
-  var self = this;
-
-  parseValue(options.value);
-  showYear = selectedYear;
-  showMonth = selectedMonth;
-
-  // -------------
-
-  this.getElement = function() {
-    if (!elem) render();
-    return elem;
-  };
-
-  this.getValue = function() {
-    if (!selectedDay) return null;
-
-    return new Date(selectedYear, selectedMonth, selectedDay);
-  };
-
-  function parseValue(value) {
-    if (value instanceof Date) {
-      selectedYear = value.getFullYear();
-      selectedMonth = value.getMonth();
-      selectedDay = value.getDate();
-    } else {
-      selectedYear = value.year;
-      selectedMonth = value.month;
-      selectedDay = value.day;
-    }
-  }
-
-  function getCalendar(year, month) {
-
-    var key = '' + year + month;
-    var calendar;
-
-    if (!calendarCache[key]) {
-      calendar = calendarCache[key] = new Calendar({
-        value: {
-          year: year,
-          month: month
-        }
-      });
-      $(calendar).on("select", onCalendarSelect);
-    } else {
-      calendar = calendarCache[key];
-    }
-
-    var value = {
-      year: year,
-      month: month,
-      // если календарь отображает текущий выбранный месяц, то передать и день для выбора
-      day: (year == selectedYear && month == selectedMonth) ? selectedDay : null
-    };
-
-    calendar.setValue(value, true);
-
-    return calendar;
-  }
-
-  function onCalendarSelect(e) {
-    parseValue(e.value);
-    if (e.target == calendarLeft) {
-      calendarRight.clearValue();
-    } else {
-      calendarLeft.clearValue();
-    }
-
-    $(self).triggerHandler({
-      type: "select",
-      value: e.target.getValue()
-    });
-  }
-
-
-  function render() {
-    elem = $('<div class="datepicker"/>').html(
-      _.template(options.template)()
-    );
-
-    elem.on('mousedown', '.next-link', onNextLinkMouseDown);
-    elem.on('mousedown', '.prev-link', onPrevLinkMouseDown);
-    renderCalendars();
-  }
-
-  function renderCalendars() {
-    calendarLeft = getCalendar(showYear, showMonth);
-    // использую children().detach() вместо empty(), 
-    // т.к. empty() убивает обработчики на календаре
-    elem.find('.calendar-left-holder').children().detach().end()
-      .append(calendarLeft.getElement());
-
-    var dateNextMonth = new Date(showYear, showMonth + 1);
-    calendarRight = getCalendar(dateNextMonth.getFullYear(), dateNextMonth.getMonth());
-    elem.find('.calendar-right-holder').children().detach().end()
-      .append(calendarRight.getElement());
-  }
-
-  function onNextLinkMouseDown() {
-    showMonth++;
-    if (showMonth > 11) {
-      showMonth = 0;
-      showYear++;
-    }
-    renderCalendars();
-    return false;
-  }
-
-  function onPrevLinkMouseDown() {
-    showMonth--;
-    if (showMonth < 0) {
-      showMonth = 11;
-      showYear--;
-    }
-    renderCalendars();
-    return false;
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/index.html b/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/index.html
deleted file mode 100644
index 4be8e9a8..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/solution.view/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <link type="text/css" rel="stylesheet" href="calendar.css">
-  <link type="text/css" rel="stylesheet" href="datepicker.css">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-  <script src="calendar.js"></script>
-  <script src="datepicker.js"></script>
-</head>
-
-<body>
-
-  <div id="value">тут будет выбранное значение (дата)</div>
-
-  <script type="text/template" id="template-datepicker">
-    <div class="header">
-      <div class="prev-link">&laquo;</div>
-      <div class="next-link">&raquo;</div>
-      <div class="title">Выберите дату</div>
-    </div>
-    <div class="body">
-      <div class="calendar-left-holder prev-month">
-        <!-- left calendar -->
-      </div>
-      <div class="calendar-right-holder next-month">
-        <!-- right calendar -->
-      </div>
-    </div>
-  </script>
-
-  <script>
-    var datePicker = new DatePicker({
-      template: $('#template-datepicker').html(),
-      value: {
-        year: 2012,
-        month: 2
-      }
-    });
-
-    datePicker.getElement().appendTo('body');
-
-    $(datePicker).on("select", function(e) {
-      $("#value").html(e.value + '');
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.css b/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.css
deleted file mode 100644
index eb8885de..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.calendar-table {
-  border-collapse: collapse;
-}
-
-.calendar-table td,
-.calendar-table th {
-  border: 1px solid black;
-  padding: 3px;
-  text-align: center;
-}
-
-.calendar-table th {
-  font-weight: bold;
-  background-color: #E6E6E6;
-}
-
-.date-cell:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.date-cell.selected {
-  background: #0F0;
-}
-
-.calendar-table caption {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.js b/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.js
deleted file mode 100644
index be374d5a..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/calendar.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * options:
- *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
- *     если в объекте указаны только {year,month}, то день не выбран
- */
-function Calendar(options) {
-  var self = this;
-
-  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
-
-  var elem;
-  var year, month, day;
-
-  var showYear, showMonth;
-
-  parseValue(options.value);
-
-  // -----------------------
-
-  this.getElement = function() {
-    if (!elem) {
-      render();
-    }
-    return elem;
-  };
-
-  this.getValue = function() {
-    return day ? new Date(year, month, day) : null;
-  };
-
-  function parseValue(value) {
-    if (value instanceof Date) {
-      year = value.getFullYear();
-      month = value.getMonth();
-      day = value.getDate();
-    } else {
-      year = value.year;
-      month = value.month;
-      day = value.day;
-    }
-  }
-
-  /**
-   * Установить значение календаря
-   * @param newValue {Date или объект {year,month[,day]} Новое значение
-   * @param quiet Если true, то событие не генерируется
-   */
-  this.setValue = function(newValue, quiet) {
-    parseValue(newValue);
-
-    if (elem) {
-      clearSelected();
-      render();
-    }
-
-    if (!quiet) {
-      $(self).triggerHandler({
-        type: "select",
-        value: new Date(year, month, day)
-      });
-    }
-  };
-
-  this.clearValue = function() {
-    day = null;
-    clearSelected();
-  };
-
-  function render() {
-    if (!elem) {
-      elem = $('<div class="calendar"/>')
-        .on('click', '.date-cell', onDateCellClick);
-    }
-
-    if (showYear != year || showMonth != month) {
-      elem.html(renderCalendarTable(year, month));
-      elem.find('caption').html(monthNames[month] + ' ' + year);
-      showYear = year;
-      showMonth = month;
-    }
-
-    if (day) {
-      var num = getCellByDate(new Date(year, month, day));
-      elem.find('td').eq(num).addClass("selected");
-    }
-
-  }
-
-  function clearSelected() {
-    elem.find('.selected').removeClass('selected');
-  }
-
-
-  function onDateCellClick(e) {
-    day = $(e.target).html();
-    self.setValue({
-      year: year,
-      month: month,
-      day: day
-    });
-  }
-
-
-  /**
-   * Возвращает по дате номер TD в таблице
-   * Использование:
-   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
-   */
-  function getCellByDate(date) {
-    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
-
-    return getDay(dateDayOne) + date.getDate() - 1;
-  }
-
-  /**
-   * получить номер дня недели для date, от 0(пн) до 6(вс)
-   * @param date
-   */
-  function getDay(date) { //
-    var day = date.getDay();
-    if (day == 0) day = 7;
-    return day - 1;
-  }
-
-  /**
-   * Генерирует таблицу для календаря заданного месяца/года
-   */
-  function renderCalendarTable(year, month) {
-
-    var d = new Date(year, month);
-
-    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
-
-    for (var i = 0; i < getDay(d); i++) {
-      table.push('<td></td>');
-    }
-
-    // ячейки календаря с датами
-    while (d.getMonth() == month) {
-      table.push('<td class="date-cell">' + d.getDate() + '</td>');
-
-      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
-        table.push('</tr><tr>');
-      }
-
-      d.setDate(d.getDate() + 1);
-    }
-
-    // добить таблицу пустыми ячейками, если нужно
-    if (getDay(d) != 0) {
-      for (var i = getDay(d); i < 7; i++) {
-        table.push('<td></td>');
-      }
-    }
-
-    table.push('</tr></table>');
-
-    return table.join('\n')
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.css b/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.css
deleted file mode 100644
index 89ebd23a..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.css
+++ /dev/null
@@ -1 +0,0 @@
-/* ваши стили */
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.js b/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.js
deleted file mode 100644
index 1f1dc2a3..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/datepicker.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * options:
- *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
- *     если в объекте указаны только {year,month}, то день не выбран
- */
-function DatePicker(options) {
-  /* ваш код */
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/index.html b/archive/widget-tasks/4-double-calendar-with-arrows/source.view/index.html
deleted file mode 100644
index b8e7548a..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/source.view/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <link type="text/css" rel="stylesheet" href="calendar.css">
-  <link type="text/css" rel="stylesheet" href="datepicker.css">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-
-  <script src="calendar.js"></script>
-  <script src="datepicker.js"></script>
-</head>
-
-<body>
-
-  <div id="value">тут будет выбранное значение (дата)</div>
-
-  <script type="text/template" id="template-datepicker">
-    /* ваш шаблон */
-  </script>
-
-  <script>
-    var datePicker = new DatePicker({
-      template: $('#template-datepicker').html(),
-      value: {
-        year: 2012,
-        month: 2
-      }
-    });
-
-    datePicker.getElement().appendTo('body');
-
-    $(datePicker).on("select", function(e) {
-      $("#value").html(e.value + '');
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/4-double-calendar-with-arrows/task.md b/archive/widget-tasks/4-double-calendar-with-arrows/task.md
deleted file mode 100644
index cd4a078e..00000000
--- a/archive/widget-tasks/4-double-calendar-with-arrows/task.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Двойной календарь со стрелками
-
-[importance 5]
-
-Создайте календарь, который показывает два месяца сразу. Стрелки позволяют менять текущий месяц.
-
-Конструктор:
-
-```js
-var datePicker = new DatePicker({
-  template: HTML-шаблон,
-  value: Date или объект {year, month, day}
-});
-```
-
-Если значение `value` передано в виде объекта `{year, month}`, т.е. без `day`, то дата не выбрана.
-
-События:
-<ul>
-<li>`select` -- при изменении даты.</li>
-</ul>
-Методы:
-<ul>
-<li>`setValue(date, quiet)` -- устанавливает значение даты, формат -- как в конструкторе. Если второй аргумент `true`, то событие не генерируется.</li>
-<li>`getElement()` -- возвращает DOM-элемент для компоненты для вставки в документ. При первом вызове создаёт DOM.</li>
-</ul>
-
-Использование -- добавление в документ:
-
-```js
-$('body').append(datePicker.getElement());
-```
-
-Использование - подписка на изменение и вывод значения:
-
-```js
-$(datePicker).on("select", function(e) {
-  $('#value').html( e.value + '' );
-});
-```
-
-Пример в действии:
-[iframe border=1 src="solution"]
-
-
-
-**В решении используйте готовый компонент -- календарь из задачи [](/task/calendar).**
diff --git a/archive/widget-tasks/4-img-select-mouse/solution.md b/archive/widget-tasks/4-img-select-mouse/solution.md
deleted file mode 100644
index 6ac51546..00000000
--- a/archive/widget-tasks/4-img-select-mouse/solution.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# HTML/CSS
-
-Область выделения можно оформить как `DIV`, серого цвета, полупрозрачный, с рамкой:
-
-```css
-.crop-area {
-  position: absolute;
-  border: 1px dashed black;
-  background: #F5DEB3;
-  opacity: 0.3;
-  filter:alpha(opacity=30); /* IE opacity */
-}
-```
-
-# Решение
-
-
-
-Обратите внимание: обработчики `mousemove/mouseup` ставятся на `document`, не на элемент. 
-
-Это для того, чтобы посетитель мог начать выделение на элементе, а продолжить и завершить его, двигая зажатой мышкой снаружи, вне его границ.
\ No newline at end of file
diff --git a/archive/widget-tasks/4-img-select-mouse/solution.view/index.html b/archive/widget-tasks/4-img-select-mouse/solution.view/index.html
deleted file mode 100644
index 522a519c..00000000
--- a/archive/widget-tasks/4-img-select-mouse/solution.view/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    .crop-area {
-      position: absolute;
-      border: 1px dashed black;
-      background: #F5DEB3;
-      opacity: 0.3;
-      filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-      /* IE opacity */
-    }
-  </style>
-</head>
-
-<body>
-
-  <img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
-
-  <div id="info"></div>
-  <script>
-    function Croppable(options) {
-      var self = this;
-
-      var elem = options.elem;
-
-      var cropArea;
-      var cropStartX, cropStartY;
-
-      elem.on('selectstart dragstart', false)
-        .on('mousedown', onImgMouseDown);
-
-      function initCropArea(pageX, pageY) {
-        cropArea = $('<div class="crop-area"/>')
-          .appendTo('body');
-
-        cropStartX = pageX;
-        cropStartY = pageY;
-      }
-
-      function onDocumentMouseMove(e) {
-        drawCropArea(e.pageX, e.pageY);
-      }
-
-      function onDocumentMouseUp(e) {
-        endCrop(e.pageX, e.pageY);
-
-        cropArea.remove();
-        $(document).off('.croppable');
-      }
-
-      function onImgMouseDown(e) {
-        initCropArea(e.pageX, e.pageY);
-
-        $(document).on({
-          'mousemove.croppable': onDocumentMouseMove,
-          'mouseup.croppable': onDocumentMouseUp
-        });
-
-        return false;
-      };
-
-      function drawCropArea(pageX, pageY) {
-        var dims = getCropDimensions(pageX, pageY);
-
-        cropArea.css(dims);
-
-        // вычитаем 2, т.к. ширина будет дополнена рамкой
-        // если не вычесть, то рамка может вылезти за изображение
-        cropArea.css({
-          height: Math.max(dims.height - 2, 0),
-          width: Math.max(dims.width - 2, 0)
-        });
-
-        // здесь мы просто рисуем полупрозрачный квадрат
-        // альтернативный подход - накладывать на каждую часть изображения div'ы с opacity и черным цветом, чтобы только кроп был ярким
-      }
-
-      function endCrop(pageX, pageY) {
-        var dims = getCropDimensions(pageX, pageY);
-
-        var coords = elem.offset();
-        // получить координаты относительно изображения
-        dims.left -= coords.left;
-        dims.top -= coords.top;
-
-        $(self).triggerHandler($.extend({
-          type: "crop"
-        }, dims));
-      }
-
-      function getCropDimensions(pageX, pageY) {
-        // 1. Делаем квадрат из координат нажатия и текущих
-        // 2. Ограничиваем размерами img, если мышь за его пределами
-
-        var left = Math.min(cropStartX, pageX);
-        var right = Math.max(cropStartX, pageX);
-        var top = Math.min(cropStartY, pageY);
-        var bottom = Math.max(cropStartY, pageY);
-
-        var coords = elem.offset();
-
-        left = Math.max(left, coords.left);
-        top = Math.max(top, coords.top);
-        right = Math.min(right, coords.left + elem.outerWidth());
-        bottom = Math.min(bottom, coords.top + elem.outerHeight());
-
-        return {
-          left: left,
-          top: top,
-          width: right - left,
-          height: bottom - top
-        };
-      }
-
-    }
-
-    var croppable = new Croppable({
-      elem: $('#heroes')
-    });
-
-    $(croppable).on("crop", function(event) {
-      // вывести координаты и размеры crop-квадрата относительно изображения
-      var str = "";
-      $(['left', 'top', 'width', 'height']).each(function() {
-        str += this + ":" + event[this] + " ";
-      });
-
-      $('#info').html("Crop: " + str);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/4-img-select-mouse/source.view/index.html b/archive/widget-tasks/4-img-select-mouse/source.view/index.html
deleted file mode 100644
index 0ab0d9dd..00000000
--- a/archive/widget-tasks/4-img-select-mouse/source.view/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-</head>
-
-<body>
-
-  <img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
-
-  <div id="info"></div>
-  <script>
-    function Croppable(options) {
-      /* ваш код */
-    }
-
-    var croppable = new Croppable({
-      elem: $('#heroes')
-    });
-
-    $(croppable).on("crop", function(event) {
-      // вывести координаты и размеры crop-квадрата относительно изображения
-      var str = "";
-      $(['left', 'top', 'width', 'height']).each(function() {
-        str += this + ":" + event[this] + " ";
-      });
-
-      $('#info').html("Crop: " + str);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/4-img-select-mouse/task.md b/archive/widget-tasks/4-img-select-mouse/task.md
deleted file mode 100644
index dec59f9e..00000000
--- a/archive/widget-tasks/4-img-select-mouse/task.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Выбор фрагмента картинки мышью
-
-[importance 3]
-
-Реализуйте интерфейс для выбора фрагмента изображения мышью. 
-
-Нажмите на изображении и проведите мышью для выбора:
-[iframe height=350 src="solution" link]
-
-По окончании смены размеров должно быть событие `crop` c `left/top` координатами и `width/height` размерами выбранной области.
-
-Синтаксис:
-
-```js
-var croppable = new Croppable({
-  elem: $('#heroes')
-});
-
-$(croppable).on("crop", function(e) {
-  // вывести crop-квадрат, left/top - относительно изображения
-  // e.left, e.top, e.width, e.height
-});
-```
-
-<ul>
-<li>Область можно выбирать, двигая курсором в любую сторону от исходной точки.</li>
-<li>Область не может вылезать за пределы изображения.</li>
-</ul>
-
-
-
diff --git a/archive/widget-tasks/5-menu-animated/solution.view/index.html b/archive/widget-tasks/5-menu-animated/solution.view/index.html
deleted file mode 100644
index 5f06e2cb..00000000
--- a/archive/widget-tasks/5-menu-animated/solution.view/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    .menu {
-      padding: 5px;
-      width: 250px;
-      border: 1px solid black;
-    }
-    
-    .menu ul {
-      margin: 0;
-      padding-left: 20px;
-      margin-left: 10px;
-      height: 0;
-      list-style-position: outside;
-      overflow: hidden;
-    }
-    
-    .menu .menu-title {
-      padding-left: 16px;
-      background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
-      font-size: 18px;
-      cursor: pointer;
-    }
-    
-    .menu-open .menu-title {
-      background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
-    }
-    
-    .menu-open ul {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="selected"></div>
-
-  <div id="sweeties" class="menu">
-    <span class="menu-title">Сладости (наведи курсор)!</span>
-    <ul>
-      <li><a href="#cake">Торт</a></li>
-      <li><a href="#donut">Пончик</a></li>
-      <li><a href="#cake-small">Пирожное</a></li>
-      <li><a href="#chokolate">Шоколадка</a></li>
-      <li><a href="#icecream">Мороженое</a></li>
-      <li><a href="#souflet">Суфле</a></li>
-      <li><a href="#rahatlukum">Рахат-Лукум</a></li>
-    </ul>
-
-  </div>
-
-  <script>
-    var menu = new SlidingMenu({
-      elem: $('#sweeties'),
-      duration: 1000
-    });
-
-    $(menu).on("select", function(e) {
-      $("#selected").html(e.value);
-    });
-
-
-    function SlidingMenu(options) {
-      var self = this;
-
-      var elem = options.elem;
-      var duration = options.duration || 100;
-
-      var titleElem = elem.find('.menu-title');
-      var listElem = elem.find('ul');
-
-      elem.hover(slideListShow, slideListHide);
-
-      elem.on('click', 'a', onItemClick);
-
-      function onItemClick(e) {
-        $(self).triggerHandler({
-          type: "select",
-          value: e.target.getAttribute('href').slice(1)
-        });
-        return false;
-      }
-
-      function slideListShow() {
-        // анимируем высоту от нуля до scrollHeight
-        // чтобы scrollHeight был верный - ставим overflow: hidden
-        // скрываем при помощи height: 0 вместо display: none, чтобы анимация могла определить высоту
-        listElem.stop().animate({
-          height: listElem.prop('scrollHeight')
-        }, {
-          // время на часть высоты, которую еще надо показать
-          duration: duration * (listElem.prop('scrollHeight') - listElem.height()) / listElem.prop('scrollHeight')
-        });
-
-      }
-
-      function slideListHide() {
-        listElem.stop().animate({
-          height: 0
-        }, {
-          duration: duration * (listElem.height() / listElem.prop('scrollHeight'))
-        });
-      }
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/5-menu-animated/source.view/index.html b/archive/widget-tasks/5-menu-animated/source.view/index.html
deleted file mode 100644
index d3887578..00000000
--- a/archive/widget-tasks/5-menu-animated/source.view/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <style>
-    .menu {
-      padding: 5px;
-      width: 250px;
-      border: 1px solid black;
-    }
-    
-    .menu ul {
-      margin: 0;
-      padding-left: 20px;
-      margin-left: 10px;
-      height: 0;
-      list-style-position: outside;
-      overflow: hidden;
-    }
-    
-    .menu .menu-title {
-      padding-left: 16px;
-      background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
-      font-size: 18px;
-      cursor: pointer;
-    }
-    
-    .menu-open .menu-title {
-      background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
-    }
-    
-    .menu-open ul {
-      display: block;
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="selected"></div>
-
-  <div id="sweeties" class="menu">
-    <span class="menu-title">Сладости (наведи курсор)!</span>
-    <ul>
-      <li><a href="#cake">Торт</a></li>
-      <li><a href="#donut">Пончик</a></li>
-      <li><a href="#cake-small">Пирожное</a></li>
-      <li><a href="#chokolate">Шоколадка</a></li>
-      <li><a href="#icecream">Мороженое</a></li>
-      <li><a href="#souflet">Суфле</a></li>
-      <li><a href="#rahatlukum">Рахат-Лукум</a></li>
-    </ul>
-
-  </div>
-
-  <script>
-    var menu = new SlidingMenu({
-      elem: $('#sweeties'),
-      duration: 1000
-    });
-
-    $(menu).on("select", function(e) {
-      $("#selected").html(e.value);
-    });
-
-
-    function SlidingMenu(options) {
-      /* ваш код, оживляющий меню */
-    }
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/5-menu-animated/task.md b/archive/widget-tasks/5-menu-animated/task.md
deleted file mode 100644
index f2846f53..00000000
--- a/archive/widget-tasks/5-menu-animated/task.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Меню с анимированным раскрытием
-
-[importance 3]
-
-Создайте раскрывающееся при наведении на заголовок меню:
-
-[iframe height=210 src="solution"]
-
-Меню должно плавно скрываться-раскрываться, когда курсор переводят в него, а затем обратно, затем опять в него...
-
-При клике меню должно генерировать событие `"select"`.
-
-```js
-var menu = new SlidingMenu({
-  elem: $('#sweeties'),
-  duration: 1000 // длительность анимации
-});
-
-$(menu).on("select", function(e) {
-  $("#selected").html(e.value);
-});
-```
-
-В исходном документе находится DOM-структура и стили для меню.
-
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.md b/archive/widget-tasks/5-tree-checkboxes/solution.md
deleted file mode 100644
index 03f7c6af..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Получение данных
-
-Данные регионов можно хранить в разном виде. 
-
-Наиболее естественное представление дерева -- в виде вложенного объекта: свойство `children` содержит поддеревья.
-
-Выглядит это так:
-
-```js
-var regions = [
-  {
-    title: 'Россия',
-    id: 1,
-    children: [
-      { 
-        title: 'Центр',
-        id: 2,
-        children: [ ... поддеревья ... ]
-      },
-      ...
-    }
-  }
-  ...
-]
-```
-
-У такого вложенного объекта есть важный недостаток: сложно перейти напрямую к узлу по ID. Нужно "прыгать" по дереву.
-
-Поэтому может быть более удобен другой вариант:
-
-```js
-var regions = [
-  {
-    title: 'Россия',
-    id: 1,
-    children: [ 2 ]
-  },
-  { 
-    title: 'Центр',
-    id: 2,
-    children: [ ... ]
-  },
-  ...
-]
-```
-
-..То есть, массив содержит все узлы дерева, и каждый узел хранит в `children` список `id` детей. 
-
-Но и это не совсем удобно. Ведь хочется по ID получить данные. Значит, нужно хранить не массив, а объект вида `id => { title: .., id: .., children: [... ] }`. 
-
-<ul>
-<li>Свойство `children` может отсутствовать, если детей нет.</li>
-<li>`id` есть и в ключе объекта и в данных узла. Так удобнее.</li>
-<li>Список внешних узлов дерева содержится в корневом узле без имени, с `id = 0`.</li> 
-</ul>
-
-**Выберите наиболее симпатичную структуру и получите её из исходного документа.**
-
-# Данные
-
-Скрипт для получения данных в последнем формате, описанном выше: [fetch.js](/files/tutorial/widgets/checkbox-tree/fetch.js).
-
-Результат в файле (после `JSON.stringify`): [regions.js](/files/tutorial/widgets/checkbox-tree/regions.js).
-
-# Исправления
-
-Желательно сделать следующие исправления:
-
-<ul>
-<li>Переделать вёрстку. В частности, заменить текстовые + - на оформление при помощи CSS.</li>
-<li>Оформить всё в виде виджета с шаблоном.</li>
-<li>Использовать ленивый рендеринг! Не рисовать всё дерево сразу (зачем рисовать то, чего не видно?), а дорисовывать при открытии.</li>
-
-# Решение
-
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.view/fetch.js b/archive/widget-tasks/5-tree-checkboxes/solution.view/fetch.js
deleted file mode 100644
index 7cb7abb7..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/fetch.js
+++ /dev/null
@@ -1,25 +0,0 @@
-var result = {
-  0: {
-    children: []
-  }
-};
-
-$('div[id^="region"]').each(function() {
-  el = $(this);
-  var id = el.attr('id').slice(6);
-  result[id] = {
-    title: el.children('label').html(),
-    children: [],
-    id: id
-  };
-
-  var parent = el.parent().closest('div[id^="region"]');
-  if (parent.length) {
-    var pid = parent.attr('id').slice(6);
-  } else {
-    pid = 0;
-  }
-
-  result[pid].children.push(+id);
-
-});
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.view/index.html b/archive/widget-tasks/5-tree-checkboxes/solution.view/index.html
deleted file mode 100644
index bbe5c809..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link href="tree.css" rel="stylesheet">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
-  <script src="regions.js"></script>
-  <script src="tree.js"></script>
-</head>
-
-<body>
-
-  <script id="tree-template" type="text/template">
-    <ul>
-      <% $(children).each(function() { var nodeData=d ata[this]; var hasChildren=n odeData.children && nodeData.children.length; %>
-        <li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
-          <% if (hasChildren) { %> <span class="tree-toggler"></span>
-            <% } %>
-              <input type="checkbox" value="<%=nodeData.id%>">
-              <%=nodeData.title%>
-        </li>
-        <% }); %>
-    </ul>
-  </script>
-
-  <script>
-    // требование - как можно меньше DOM-элементов
-    // работа с данными из 1000 узлов
-    /* пример структуры данных
-    var data = [
-        {
-        	children: [1,2,3]
-        },
-    	{
-    		title: 'Россия',
-    		id: 1,
-    		children: [4,5]
-    	},
-    	{
-    		title: 'Украина',
-    		id: 2
-    	},
-    	{
-    		title: 'Беларусь',
-    		id: 3
-    	},
-    	{
-    		title: 'Север',
-    		id: 4
-    	},
-    	{
-    		title: 'Юг',
-    		id: 5
-    	}
-
-    ];
-     */
-
-    var tree = new Tree({
-      template: _.template($('#tree-template').html().trim()),
-      data: regions
-    });
-
-    tree.getElement().appendTo('body');
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.view/regions.js b/archive/widget-tasks/5-tree-checkboxes/solution.view/regions.js
deleted file mode 100644
index 7d8d4af0..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/regions.js
+++ /dev/null
@@ -1,2365 +0,0 @@
-var regions = {
-  "0": {
-    "children": [225, 166, 111, 183, 241, 10002, 10003, 138]
-  },
-  "1": {
-    "title": "Москва и область",
-    "children": [213, 10716, 10722, 10723, 214, 215, 21622, 20571, 21623, 37147, 10734, 20728, 10735, 10739, 10745, 10747, 217, 10750, 10752, 10754, 21619, 219, 10765, 21620],
-    "id": "1"
-  },
-  "2": {
-    "title": "Санкт-Петербург",
-    "children": [],
-    "id": "2"
-  },
-  "3": {
-    "title": "Центр",
-    "children": [1, 10645, 10650, 10658, 10672, 10687, 10693, 10699, 10705, 10712, 10772, 10776, 10795, 10802, 10819, 10832, 10841],
-    "id": "3"
-  },
-  "4": {
-    "title": "Белгород",
-    "children": [],
-    "id": "4"
-  },
-  "6": {
-    "title": "Калуга",
-    "children": [],
-    "id": "6"
-  },
-  "8": {
-    "title": "Курск",
-    "children": [],
-    "id": "8"
-  },
-  "15": {
-    "title": "Тула",
-    "children": [],
-    "id": "15"
-  },
-  "16": {
-    "title": "Ярославль",
-    "children": [],
-    "id": "16"
-  },
-  "17": {
-    "title": "Северо-Запад",
-    "children": [10174, 10842, 10904, 10853, 10857, 10897, 10176, 10926, 10933, 10939],
-    "id": "17"
-  },
-  "18": {
-    "title": "Петрозаводск",
-    "children": [],
-    "id": "18"
-  },
-  "19": {
-    "title": "Сыктывкар",
-    "children": [],
-    "id": "19"
-  },
-  "20": {
-    "title": "Архангельск",
-    "children": [],
-    "id": "20"
-  },
-  "21": {
-    "title": "Вологда",
-    "children": [],
-    "id": "21"
-  },
-  "23": {
-    "title": "Мурманск",
-    "children": [],
-    "id": "23"
-  },
-  "25": {
-    "title": "Псков",
-    "children": [],
-    "id": "25"
-  },
-  "26": {
-    "title": "Юг",
-    "children": [10946, 10950, 10995, 11004, 11015, 11029],
-    "id": "26"
-  },
-  "35": {
-    "title": "Краснодар",
-    "children": [],
-    "id": "35"
-  },
-  "36": {
-    "title": "Ставрополь",
-    "children": [],
-    "id": "36"
-  },
-  "38": {
-    "title": "Волгоград",
-    "children": [],
-    "id": "38"
-  },
-  "39": {
-    "title": "Ростов-на-Дону",
-    "children": [],
-    "id": "39"
-  },
-  "40": {
-    "title": "Поволжье",
-    "children": [11070, 11079, 11084, 11095, 11108, 11111, 11077, 11117, 11119, 11131, 11146, 11148, 11153, 11156],
-    "id": "40"
-  },
-  "43": {
-    "title": "Казань",
-    "children": [],
-    "id": "43"
-  },
-  "44": {
-    "title": "Ижевск",
-    "children": [],
-    "id": "44"
-  },
-  "45": {
-    "title": "Чебоксары",
-    "children": [],
-    "id": "45"
-  },
-  "47": {
-    "title": "Нижний Новгород",
-    "children": [],
-    "id": "47"
-  },
-  "48": {
-    "title": "Оренбург",
-    "children": [],
-    "id": "48"
-  },
-  "50": {
-    "title": "Пермь",
-    "children": [],
-    "id": "50"
-  },
-  "51": {
-    "title": "Самара",
-    "children": [],
-    "id": "51"
-  },
-  "52": {
-    "title": "Урал",
-    "children": [11162, 11158, 11176, 11193, 11225, 11232],
-    "id": "52"
-  },
-  "54": {
-    "title": "Екатеринбург",
-    "children": [],
-    "id": "54"
-  },
-  "55": {
-    "title": "Тюмень",
-    "children": [],
-    "id": "55"
-  },
-  "56": {
-    "title": "Челябинск",
-    "children": [],
-    "id": "56"
-  },
-  "57": {
-    "title": "Ханты-Мансийск",
-    "children": [],
-    "id": "57"
-  },
-  "58": {
-    "title": "Салехард",
-    "children": [],
-    "id": "58"
-  },
-  "59": {
-    "title": "Сибирь",
-    "children": [11235, 21949, 11266, 11282, 11309, 11316, 11318, 10231, 11330, 10233, 11340, 11353],
-    "id": "59"
-  },
-  "62": {
-    "title": "Красноярск",
-    "children": [],
-    "id": "62"
-  },
-  "63": {
-    "title": "Иркутск",
-    "children": [],
-    "id": "63"
-  },
-  "64": {
-    "title": "Кемерово",
-    "children": [],
-    "id": "64"
-  },
-  "67": {
-    "title": "Томск",
-    "children": [],
-    "id": "67"
-  },
-  "73": {
-    "title": "Дальний Восток",
-    "children": [11375, 10243, 11398, 11403, 11409, 11443, 11457, 10251, 11450],
-    "id": "73"
-  },
-  "75": {
-    "title": "Владивосток",
-    "children": [],
-    "id": "75"
-  },
-  "76": {
-    "title": "Хабаровск",
-    "children": [],
-    "id": "76"
-  },
-  "77": {
-    "title": "Благовещенск",
-    "children": [],
-    "id": "77"
-  },
-  "84": {
-    "title": "США",
-    "children": [],
-    "id": "84"
-  },
-  "93": {
-    "title": "Аргентина",
-    "children": [],
-    "id": "93"
-  },
-  "94": {
-    "title": "Бразилия",
-    "children": [],
-    "id": "94"
-  },
-  "95": {
-    "title": "Канада",
-    "children": [],
-    "id": "95"
-  },
-  "96": {
-    "title": "Германия",
-    "children": [],
-    "id": "96"
-  },
-  "102": {
-    "title": "Великобритания",
-    "children": [],
-    "id": "102"
-  },
-  "111": {
-    "title": "Европа",
-    "children": [113, 114, 115, 102, 116, 96, 246, 203, 204, 205, 20574, 118, 119, 120, 180, 121, 122, 980, 983, 123, 124, 10083, 125, 126, 127],
-    "id": "111"
-  },
-  "113": {
-    "title": "Австрия",
-    "children": [],
-    "id": "113"
-  },
-  "114": {
-    "title": "Бельгия",
-    "children": [],
-    "id": "114"
-  },
-  "115": {
-    "title": "Болгария",
-    "children": [],
-    "id": "115"
-  },
-  "116": {
-    "title": "Венгрия",
-    "children": [],
-    "id": "116"
-  },
-  "117": {
-    "title": "Литва",
-    "children": [],
-    "id": "117"
-  },
-  "118": {
-    "title": "Нидерланды",
-    "children": [],
-    "id": "118"
-  },
-  "119": {
-    "title": "Норвегия",
-    "children": [],
-    "id": "119"
-  },
-  "120": {
-    "title": "Польша",
-    "children": [],
-    "id": "120"
-  },
-  "121": {
-    "title": "Словакия",
-    "children": [],
-    "id": "121"
-  },
-  "122": {
-    "title": "Словения",
-    "children": [],
-    "id": "122"
-  },
-  "123": {
-    "title": "Финляндия",
-    "children": [],
-    "id": "123"
-  },
-  "124": {
-    "title": "Франция",
-    "children": [],
-    "id": "124"
-  },
-  "125": {
-    "title": "Чехия",
-    "children": [],
-    "id": "125"
-  },
-  "126": {
-    "title": "Швейцария",
-    "children": [],
-    "id": "126"
-  },
-  "127": {
-    "title": "Швеция",
-    "children": [],
-    "id": "127"
-  },
-  "134": {
-    "title": "Китай",
-    "children": [],
-    "id": "134"
-  },
-  "135": {
-    "title": "Южная Корея",
-    "children": [],
-    "id": "135"
-  },
-  "137": {
-    "title": "Япония",
-    "children": [],
-    "id": "137"
-  },
-  "138": {
-    "title": "Австралия и Океания",
-    "children": [211, 139],
-    "id": "138"
-  },
-  "139": {
-    "title": "Новая Зеландия",
-    "children": [],
-    "id": "139"
-  },
-  "141": {
-    "title": "Днепропетровск",
-    "children": [],
-    "id": "141"
-  },
-  "142": {
-    "title": "Донецк",
-    "children": [],
-    "id": "142"
-  },
-  "143": {
-    "title": "Киев",
-    "children": [],
-    "id": "143"
-  },
-  "146": {
-    "title": "Симферополь",
-    "children": [],
-    "id": "146"
-  },
-  "149": {
-    "title": "Беларусь",
-    "children": [29632, 29633, 29631, 29634, 29630, 29629],
-    "id": "149"
-  },
-  "159": {
-    "title": "Казахстан",
-    "children": [29414, 29404, 29406, 29403, 29407, 29408, 29410, 29411, 29412, 29413, 29415, 29416, 29409, 29417],
-    "id": "159"
-  },
-  "162": {
-    "title": "Алматы",
-    "children": [],
-    "id": "162"
-  },
-  "163": {
-    "title": "Астана",
-    "children": [],
-    "id": "163"
-  },
-  "165": {
-    "title": "Семей",
-    "children": [],
-    "id": "165"
-  },
-  "166": {
-    "title": "СНГ (исключая Россию)",
-    "children": [29386, 167, 168, 149, 159, 207, 208, 209, 170, 171, 187],
-    "id": "166"
-  },
-  "167": {
-    "title": "Азербайджан",
-    "children": [],
-    "id": "167"
-  },
-  "168": {
-    "title": "Армения",
-    "children": [],
-    "id": "168"
-  },
-  "169": {
-    "title": "Грузия",
-    "children": [],
-    "id": "169"
-  },
-  "170": {
-    "title": "Туркмения",
-    "children": [],
-    "id": "170"
-  },
-  "171": {
-    "title": "Узбекистан",
-    "children": [],
-    "id": "171"
-  },
-  "172": {
-    "title": "Уфа",
-    "children": [],
-    "id": "172"
-  },
-  "179": {
-    "title": "Эстония",
-    "children": [],
-    "id": "179"
-  },
-  "180": {
-    "title": "Сербия",
-    "children": [],
-    "id": "180"
-  },
-  "181": {
-    "title": "Израиль",
-    "children": [],
-    "id": "181"
-  },
-  "183": {
-    "title": "Азия",
-    "children": [1004, 169, 994, 20975, 134, 995, 135, 137],
-    "id": "183"
-  },
-  "187": {
-    "title": "Украина",
-    "children": [20525, 20524, 977, 20528, 20527, 20526],
-    "id": "187"
-  },
-  "192": {
-    "title": "Владимир",
-    "children": [],
-    "id": "192"
-  },
-  "194": {
-    "title": "Саратов",
-    "children": [],
-    "id": "194"
-  },
-  "195": {
-    "title": "Ульяновск",
-    "children": [],
-    "id": "195"
-  },
-  "197": {
-    "title": "Барнаул",
-    "children": [],
-    "id": "197"
-  },
-  "203": {
-    "title": "Дания",
-    "children": [],
-    "id": "203"
-  },
-  "204": {
-    "title": "Испания",
-    "children": [],
-    "id": "204"
-  },
-  "205": {
-    "title": "Италия",
-    "children": [],
-    "id": "205"
-  },
-  "206": {
-    "title": "Латвия",
-    "children": [],
-    "id": "206"
-  },
-  "207": {
-    "title": "Киргизия",
-    "children": [],
-    "id": "207"
-  },
-  "208": {
-    "title": "Молдова",
-    "children": [],
-    "id": "208"
-  },
-  "209": {
-    "title": "Таджикистан",
-    "children": [],
-    "id": "209"
-  },
-  "210": {
-    "title": "Объединенные Арабские Эмираты",
-    "children": [],
-    "id": "210"
-  },
-  "211": {
-    "title": "Австралия",
-    "children": [],
-    "id": "211"
-  },
-  "213": {
-    "title": "Москва",
-    "children": [],
-    "id": "213"
-  },
-  "214": {
-    "title": "Долгопрудный",
-    "children": [],
-    "id": "214"
-  },
-  "215": {
-    "title": "Дубна",
-    "children": [],
-    "id": "215"
-  },
-  "217": {
-    "title": "Пущино",
-    "children": [],
-    "id": "217"
-  },
-  "219": {
-    "title": "Черноголовка",
-    "children": [],
-    "id": "219"
-  },
-  "222": {
-    "title": "Луганск",
-    "children": [],
-    "id": "222"
-  },
-  "225": {
-    "title": "Россия",
-    "children": [3, 17, 40, 26, 59, 73, 102444, 52],
-    "id": "225"
-  },
-  "235": {
-    "title": "Магнитогорск",
-    "children": [],
-    "id": "235"
-  },
-  "236": {
-    "title": "Набережные Челны",
-    "children": [],
-    "id": "236"
-  },
-  "237": {
-    "title": "Новокузнецк",
-    "children": [],
-    "id": "237"
-  },
-  "238": {
-    "title": "Новочеркасск",
-    "children": [],
-    "id": "238"
-  },
-  "239": {
-    "title": "Сочи",
-    "children": [],
-    "id": "239"
-  },
-  "240": {
-    "title": "Тольятти",
-    "children": [],
-    "id": "240"
-  },
-  "241": {
-    "title": "Африка",
-    "children": [],
-    "id": "241"
-  },
-  "246": {
-    "title": "Греция",
-    "children": [],
-    "id": "246"
-  },
-  "959": {
-    "title": "Севастополь",
-    "children": [],
-    "id": "959"
-  },
-  "964": {
-    "title": "Полтава",
-    "children": [],
-    "id": "964"
-  },
-  "967": {
-    "title": "Обнинск",
-    "children": [],
-    "id": "967"
-  },
-  "968": {
-    "title": "Череповец",
-    "children": [],
-    "id": "968"
-  },
-  "969": {
-    "title": "Выборг",
-    "children": [],
-    "id": "969"
-  },
-  "970": {
-    "title": "Новороссийск",
-    "children": [],
-    "id": "970"
-  },
-  "971": {
-    "title": "Таганрог",
-    "children": [],
-    "id": "971"
-  },
-  "972": {
-    "title": "Дзержинск",
-    "children": [],
-    "id": "972"
-  },
-  "973": {
-    "title": "Сургут",
-    "children": [],
-    "id": "973"
-  },
-  "974": {
-    "title": "Находка",
-    "children": [],
-    "id": "974"
-  },
-  "975": {
-    "title": "Бийск",
-    "children": [],
-    "id": "975"
-  },
-  "976": {
-    "title": "Братск",
-    "children": [],
-    "id": "976"
-  },
-  "977": {
-    "title": "Крым",
-    "children": [11463, 11464, 959, 146, 11469, 11470],
-    "id": "977"
-  },
-  "980": {
-    "title": "Страны Балтии",
-    "children": [206, 117, 179],
-    "id": "980"
-  },
-  "983": {
-    "title": "Турция",
-    "children": [103668, 103669, 103670, 103671, 103672, 103673, 103674, 103675, 103676, 103677, 103678, 103679, 103680, 103681, 103682, 103683, 103684, 103685, 103686, 103687, 103688, 103689, 103690, 103691, 103692, 103693, 103694, 103695, 103696, 103697, 103742, 103698, 103699, 103700, 103701, 103702, 103703, 103704, 103705, 103706, 103707, 103708, 103709, 103710, 103711, 103712, 103713, 103714, 103715, 103716, 103717, 103718, 103719, 103720, 103721, 103722, 103723, 103724, 103725, 103726, 103727, 103728, 103729, 103730, 103731, 103732, 103733, 103734, 103735, 103736, 103737, 103738, 103739, 103740, 103741, 103743, 103744, 103745, 103746, 103747, 103748],
-    "id": "983"
-  },
-  "994": {
-    "title": "Индия",
-    "children": [],
-    "id": "994"
-  },
-  "995": {
-    "title": "Таиланд",
-    "children": [],
-    "id": "995"
-  },
-  "1004": {
-    "title": "Ближний Восток",
-    "children": [1056, 181, 210],
-    "id": "1004"
-  },
-  "1056": {
-    "title": "Египет",
-    "children": [],
-    "id": "1056"
-  },
-  "1058": {
-    "title": "Туапсе",
-    "children": [],
-    "id": "1058"
-  },
-  "1091": {
-    "title": "Нижневартовск",
-    "children": [],
-    "id": "1091"
-  },
-  "1107": {
-    "title": "Анапа",
-    "children": [],
-    "id": "1107"
-  },
-  "10002": {
-    "title": "Северная Америка",
-    "children": [95, 84],
-    "id": "10002"
-  },
-  "10003": {
-    "title": "Южная Америка",
-    "children": [93, 94],
-    "id": "10003"
-  },
-  "10083": {
-    "title": "Хорватия",
-    "children": [],
-    "id": "10083"
-  },
-  "10174": {
-    "title": "Санкт-Петербург и Ленинградская область",
-    "children": [10864, 10865, 969, 10867, 10871, 2, 10891, 10892],
-    "id": "10174"
-  },
-  "10176": {
-    "title": "Ненецкий автономный округ",
-    "children": [],
-    "id": "10176"
-  },
-  "10231": {
-    "title": "Республика Алтай",
-    "children": [],
-    "id": "10231"
-  },
-  "10233": {
-    "title": "Республика Тыва",
-    "children": [],
-    "id": "10233"
-  },
-  "10243": {
-    "title": "Еврейская автономная область",
-    "children": [],
-    "id": "10243"
-  },
-  "10251": {
-    "title": "Чукотский автономный округ",
-    "children": [],
-    "id": "10251"
-  },
-  "10303": {
-    "title": "Талдыкорган",
-    "children": [],
-    "id": "10303"
-  },
-  "10306": {
-    "title": "Усть-Каменогорск",
-    "children": [],
-    "id": "10306"
-  },
-  "10347": {
-    "title": "Кривой Рог",
-    "children": [],
-    "id": "10347"
-  },
-  "10366": {
-    "title": "Мариуполь",
-    "children": [],
-    "id": "10366"
-  },
-  "10369": {
-    "title": "Белая Церковь",
-    "children": [],
-    "id": "10369"
-  },
-  "10645": {
-    "title": "Белгород и область",
-    "children": [4, 10649],
-    "id": "10645"
-  },
-  "10649": {
-    "title": "Старый Оскол",
-    "children": [],
-    "id": "10649"
-  },
-  "10650": {
-    "title": "Брянск и область",
-    "children": [],
-    "id": "10650"
-  },
-  "10658": {
-    "title": "Владимир и область",
-    "children": [192, 10664, 10668],
-    "id": "10658"
-  },
-  "10664": {
-    "title": "Ковров",
-    "children": [],
-    "id": "10664"
-  },
-  "10668": {
-    "title": "Муром",
-    "children": [],
-    "id": "10668"
-  },
-  "10672": {
-    "title": "Воронеж и область",
-    "children": [],
-    "id": "10672"
-  },
-  "10687": {
-    "title": "Иваново и область",
-    "children": [],
-    "id": "10687"
-  },
-  "10693": {
-    "title": "Калуга и область",
-    "children": [6, 967],
-    "id": "10693"
-  },
-  "10699": {
-    "title": "Кострома и область",
-    "children": [],
-    "id": "10699"
-  },
-  "10705": {
-    "title": "Курск и область",
-    "children": [10710, 8],
-    "id": "10705"
-  },
-  "10710": {
-    "title": "Железногорск",
-    "children": [],
-    "id": "10710"
-  },
-  "10712": {
-    "title": "Липецк и область",
-    "children": [],
-    "id": "10712"
-  },
-  "10716": {
-    "title": "Балашиха",
-    "children": [],
-    "id": "10716"
-  },
-  "10722": {
-    "title": "Воскресенск",
-    "children": [],
-    "id": "10722"
-  },
-  "10723": {
-    "title": "Дмитров",
-    "children": [],
-    "id": "10723"
-  },
-  "10734": {
-    "title": "Коломна",
-    "children": [],
-    "id": "10734"
-  },
-  "10735": {
-    "title": "Красногорск",
-    "children": [],
-    "id": "10735"
-  },
-  "10739": {
-    "title": "Можайск",
-    "children": [],
-    "id": "10739"
-  },
-  "10745": {
-    "title": "Орехово-Зуево",
-    "children": [],
-    "id": "10745"
-  },
-  "10747": {
-    "title": "Подольск",
-    "children": [],
-    "id": "10747"
-  },
-  "10750": {
-    "title": "Раменское",
-    "children": [],
-    "id": "10750"
-  },
-  "10752": {
-    "title": "Сергиев Посад",
-    "children": [],
-    "id": "10752"
-  },
-  "10754": {
-    "title": "Серпухов",
-    "children": [],
-    "id": "10754"
-  },
-  "10765": {
-    "title": "Щелково",
-    "children": [],
-    "id": "10765"
-  },
-  "10772": {
-    "title": "Орел и область",
-    "children": [],
-    "id": "10772"
-  },
-  "10776": {
-    "title": "Рязань и область",
-    "children": [],
-    "id": "10776"
-  },
-  "10795": {
-    "title": "Смоленск и область",
-    "children": [],
-    "id": "10795"
-  },
-  "10802": {
-    "title": "Тамбов и область",
-    "children": [],
-    "id": "10802"
-  },
-  "10819": {
-    "title": "Тверь и область",
-    "children": [],
-    "id": "10819"
-  },
-  "10830": {
-    "title": "Новомосковск",
-    "children": [],
-    "id": "10830"
-  },
-  "10832": {
-    "title": "Тула и область",
-    "children": [10830, 15],
-    "id": "10832"
-  },
-  "10839": {
-    "title": "Рыбинск",
-    "children": [],
-    "id": "10839"
-  },
-  "10841": {
-    "title": "Ярославль и область",
-    "children": [10839, 21154, 16],
-    "id": "10841"
-  },
-  "10842": {
-    "title": "Архангельск и область",
-    "children": [20, 10849],
-    "id": "10842"
-  },
-  "10849": {
-    "title": "Северодвинск",
-    "children": [],
-    "id": "10849"
-  },
-  "10853": {
-    "title": "Вологда и область",
-    "children": [21, 968],
-    "id": "10853"
-  },
-  "10857": {
-    "title": "Калининград и область",
-    "children": [],
-    "id": "10857"
-  },
-  "10864": {
-    "title": "Волхов",
-    "children": [],
-    "id": "10864"
-  },
-  "10865": {
-    "title": "Всеволожск",
-    "children": [],
-    "id": "10865"
-  },
-  "10867": {
-    "title": "Гатчина",
-    "children": [],
-    "id": "10867"
-  },
-  "10871": {
-    "title": "Кириши",
-    "children": [],
-    "id": "10871"
-  },
-  "10891": {
-    "title": "Сосновый Бор",
-    "children": [],
-    "id": "10891"
-  },
-  "10892": {
-    "title": "Тихвин",
-    "children": [],
-    "id": "10892"
-  },
-  "10894": {
-    "title": "Апатиты",
-    "children": [],
-    "id": "10894"
-  },
-  "10897": {
-    "title": "Мурманск и область",
-    "children": [10894, 23],
-    "id": "10897"
-  },
-  "10904": {
-    "title": "Великий Новгород и Новгородская область",
-    "children": [],
-    "id": "10904"
-  },
-  "10926": {
-    "title": "Псков и область",
-    "children": [10928, 25],
-    "id": "10926"
-  },
-  "10928": {
-    "title": "Великие Луки",
-    "children": [],
-    "id": "10928"
-  },
-  "10933": {
-    "title": "Республика Карелия",
-    "children": [10934, 18, 10937],
-    "id": "10933"
-  },
-  "10934": {
-    "title": "Кондопога",
-    "children": [],
-    "id": "10934"
-  },
-  "10937": {
-    "title": "Сортавала",
-    "children": [],
-    "id": "10937"
-  },
-  "10939": {
-    "title": "Республика Коми",
-    "children": [10940, 19, 10944, 10945],
-    "id": "10939"
-  },
-  "10940": {
-    "title": "Воркута",
-    "children": [],
-    "id": "10940"
-  },
-  "10944": {
-    "title": "Усинск",
-    "children": [],
-    "id": "10944"
-  },
-  "10945": {
-    "title": "Ухта",
-    "children": [],
-    "id": "10945"
-  },
-  "10946": {
-    "title": "Астрахань и область",
-    "children": [],
-    "id": "10946"
-  },
-  "10950": {
-    "title": "Волгоград и область",
-    "children": [38, 10951, 10959],
-    "id": "10950"
-  },
-  "10951": {
-    "title": "Волжский",
-    "children": [],
-    "id": "10951"
-  },
-  "10959": {
-    "title": "Камышин",
-    "children": [],
-    "id": "10959"
-  },
-  "10987": {
-    "title": "Армавир",
-    "children": [],
-    "id": "10987"
-  },
-  "10993": {
-    "title": "Ейск",
-    "children": [],
-    "id": "10993"
-  },
-  "10995": {
-    "title": "Краснодарский край",
-    "children": [1107, 10987, 10993, 35, 970, 239, 1058],
-    "id": "10995"
-  },
-  "11004": {
-    "title": "Республика Адыгея",
-    "children": [],
-    "id": "11004"
-  },
-  "11010": {
-    "title": "Республика Дагестан",
-    "children": [],
-    "id": "11010"
-  },
-  "11012": {
-    "title": "Республика Ингушетия",
-    "children": [],
-    "id": "11012"
-  },
-  "11013": {
-    "title": "Республика Кабардино-Балкария",
-    "children": [],
-    "id": "11013"
-  },
-  "11015": {
-    "title": "Республика Калмыкия",
-    "children": [],
-    "id": "11015"
-  },
-  "11020": {
-    "title": "Карачаево-Черкесская Республика",
-    "children": [],
-    "id": "11020"
-  },
-  "11021": {
-    "title": "Республика Северная Осетия-Алания",
-    "children": [],
-    "id": "11021"
-  },
-  "11024": {
-    "title": "Чеченская Республика",
-    "children": [],
-    "id": "11024"
-  },
-  "11029": {
-    "title": "Ростов-на-Дону и область",
-    "children": [11036, 11043, 238, 39, 971, 11053],
-    "id": "11029"
-  },
-  "11036": {
-    "title": "Волгодонск",
-    "children": [],
-    "id": "11036"
-  },
-  "11043": {
-    "title": "Каменск-Шахтинский",
-    "children": [],
-    "id": "11043"
-  },
-  "11053": {
-    "title": "Шахты",
-    "children": [],
-    "id": "11053"
-  },
-  "11057": {
-    "title": "Ессентуки",
-    "children": [],
-    "id": "11057"
-  },
-  "11062": {
-    "title": "Кисловодск",
-    "children": [],
-    "id": "11062"
-  },
-  "11063": {
-    "title": "Минеральные Воды",
-    "children": [],
-    "id": "11063"
-  },
-  "11064": {
-    "title": "Невинномысск",
-    "children": [],
-    "id": "11064"
-  },
-  "11067": {
-    "title": "Пятигорск",
-    "children": [],
-    "id": "11067"
-  },
-  "11069": {
-    "title": "Ставропольский край",
-    "children": [11057, 11062, 11063, 11064, 11067, 36],
-    "id": "11069"
-  },
-  "11070": {
-    "title": "Киров и область",
-    "children": [],
-    "id": "11070"
-  },
-  "11077": {
-    "title": "Республика Марий Эл",
-    "children": [],
-    "id": "11077"
-  },
-  "11079": {
-    "title": "Нижний Новгород и область",
-    "children": [20040, 972, 20044, 47, 11083],
-    "id": "11079"
-  },
-  "11083": {
-    "title": "Саров",
-    "children": [],
-    "id": "11083"
-  },
-  "11084": {
-    "title": "Оренбург и область",
-    "children": [48, 11091],
-    "id": "11084"
-  },
-  "11091": {
-    "title": "Орск",
-    "children": [],
-    "id": "11091"
-  },
-  "11095": {
-    "title": "Пенза и область",
-    "children": [],
-    "id": "11095"
-  },
-  "11108": {
-    "title": "Пермский край",
-    "children": [20237, 50],
-    "id": "11108"
-  },
-  "11111": {
-    "title": "Республика Башкортостан",
-    "children": [11114, 20235, 11115, 11116, 172],
-    "id": "11111"
-  },
-  "11114": {
-    "title": "Нефтекамск",
-    "children": [],
-    "id": "11114"
-  },
-  "11115": {
-    "title": "Салават",
-    "children": [],
-    "id": "11115"
-  },
-  "11116": {
-    "title": "Стерлитамак",
-    "children": [],
-    "id": "11116"
-  },
-  "11117": {
-    "title": "Республика Мордовия",
-    "children": [],
-    "id": "11117"
-  },
-  "11119": {
-    "title": "Республика Татарстан",
-    "children": [11121, 11122, 43, 236, 11127],
-    "id": "11119"
-  },
-  "11121": {
-    "title": "Альметьевск",
-    "children": [],
-    "id": "11121"
-  },
-  "11122": {
-    "title": "Бугульма",
-    "children": [],
-    "id": "11122"
-  },
-  "11127": {
-    "title": "Нижнекамск",
-    "children": [],
-    "id": "11127"
-  },
-  "11131": {
-    "title": "Самара и область",
-    "children": [11132, 51, 11139, 240],
-    "id": "11131"
-  },
-  "11132": {
-    "title": "Жигулевск",
-    "children": [],
-    "id": "11132"
-  },
-  "11139": {
-    "title": "Сызрань",
-    "children": [],
-    "id": "11139"
-  },
-  "11143": {
-    "title": "Балаково",
-    "children": [],
-    "id": "11143"
-  },
-  "11146": {
-    "title": "Саратов и область",
-    "children": [11143, 194, 11147],
-    "id": "11146"
-  },
-  "11147": {
-    "title": "Энгельс",
-    "children": [],
-    "id": "11147"
-  },
-  "11148": {
-    "title": "Удмуртская Республика",
-    "children": [11150, 44, 11152],
-    "id": "11148"
-  },
-  "11150": {
-    "title": "Глазов",
-    "children": [],
-    "id": "11150"
-  },
-  "11152": {
-    "title": "Сарапул",
-    "children": [],
-    "id": "11152"
-  },
-  "11153": {
-    "title": "Ульяновск и область",
-    "children": [11155, 195],
-    "id": "11153"
-  },
-  "11155": {
-    "title": "Димитровград",
-    "children": [],
-    "id": "11155"
-  },
-  "11156": {
-    "title": "Чувашская Республика",
-    "children": [37133, 45],
-    "id": "11156"
-  },
-  "11158": {
-    "title": "Курган и область",
-    "children": [],
-    "id": "11158"
-  },
-  "11162": {
-    "title": "Екатеринбург и Свердловская область",
-    "children": [54, 11164, 11168, 11171],
-    "id": "11162"
-  },
-  "11164": {
-    "title": "Каменск-Уральский",
-    "children": [],
-    "id": "11164"
-  },
-  "11168": {
-    "title": "Нижний Тагил",
-    "children": [],
-    "id": "11168"
-  },
-  "11171": {
-    "title": "Первоуральск",
-    "children": [],
-    "id": "11171"
-  },
-  "11173": {
-    "title": "Ишим",
-    "children": [],
-    "id": "11173"
-  },
-  "11175": {
-    "title": "Тобольск",
-    "children": [],
-    "id": "11175"
-  },
-  "11176": {
-    "title": "Тюмень и область",
-    "children": [11173, 11175, 55],
-    "id": "11176"
-  },
-  "11184": {
-    "title": "Нефтеюганск",
-    "children": [],
-    "id": "11184"
-  },
-  "11193": {
-    "title": "Ханты-Мансийский АО",
-    "children": [11184, 1091, 973, 57],
-    "id": "11193"
-  },
-  "11212": {
-    "title": "Миасс",
-    "children": [],
-    "id": "11212"
-  },
-  "11214": {
-    "title": "Озерск",
-    "children": [],
-    "id": "11214"
-  },
-  "11217": {
-    "title": "Сатка",
-    "children": [],
-    "id": "11217"
-  },
-  "11225": {
-    "title": "Челябинск и область",
-    "children": [235, 11212, 11214, 11217, 56],
-    "id": "11225"
-  },
-  "11230": {
-    "title": "Новый Уренгой",
-    "children": [],
-    "id": "11230"
-  },
-  "11231": {
-    "title": "Ноябрьск",
-    "children": [],
-    "id": "11231"
-  },
-  "11232": {
-    "title": "Ямало-Ненецкий АО",
-    "children": [11230, 11231, 58],
-    "id": "11232"
-  },
-  "11235": {
-    "title": "Алтайский край",
-    "children": [197, 975],
-    "id": "11235"
-  },
-  "11256": {
-    "title": "Ангарск",
-    "children": [],
-    "id": "11256"
-  },
-  "11266": {
-    "title": "Иркутск и область",
-    "children": [11256, 976, 63, 11273],
-    "id": "11266"
-  },
-  "11273": {
-    "title": "Усть-Илимск",
-    "children": [],
-    "id": "11273"
-  },
-  "11282": {
-    "title": "Кемерово и область",
-    "children": [64, 11287, 237],
-    "id": "11282"
-  },
-  "11287": {
-    "title": "Междуреченск",
-    "children": [],
-    "id": "11287"
-  },
-  "11302": {
-    "title": "Ачинск",
-    "children": [],
-    "id": "11302"
-  },
-  "11309": {
-    "title": "Красноярский край",
-    "children": [11302, 20086, 62, 11310, 11311],
-    "id": "11309"
-  },
-  "11310": {
-    "title": "Минусинск",
-    "children": [],
-    "id": "11310"
-  },
-  "11311": {
-    "title": "Норильск",
-    "children": [],
-    "id": "11311"
-  },
-  "11316": {
-    "title": "Новосибирск и область",
-    "children": [],
-    "id": "11316"
-  },
-  "11318": {
-    "title": "Омск и область",
-    "children": [],
-    "id": "11318"
-  },
-  "11330": {
-    "title": "Республика Бурятия",
-    "children": [],
-    "id": "11330"
-  },
-  "11340": {
-    "title": "Республика Хакасия",
-    "children": [],
-    "id": "11340"
-  },
-  "11351": {
-    "title": "Северск",
-    "children": [],
-    "id": "11351"
-  },
-  "11353": {
-    "title": "Томск и область",
-    "children": [11351, 67],
-    "id": "11353"
-  },
-  "11374": {
-    "title": "Белогорск",
-    "children": [],
-    "id": "11374"
-  },
-  "11375": {
-    "title": "Благовещенск и Амурская область",
-    "children": [11374, 77, 11391],
-    "id": "11375"
-  },
-  "11391": {
-    "title": "Тында",
-    "children": [],
-    "id": "11391"
-  },
-  "11398": {
-    "title": "Камчатский край",
-    "children": [],
-    "id": "11398"
-  },
-  "11403": {
-    "title": "Магадан и область",
-    "children": [],
-    "id": "11403"
-  },
-  "11409": {
-    "title": "Приморский край",
-    "children": [75, 974, 11426],
-    "id": "11409"
-  },
-  "11426": {
-    "title": "Уссурийск",
-    "children": [],
-    "id": "11426"
-  },
-  "11443": {
-    "title": "Республика Саха (Якутия)",
-    "children": [],
-    "id": "11443"
-  },
-  "11450": {
-    "title": "Южно-Сахалинск и Сахалинская область",
-    "children": [],
-    "id": "11450"
-  },
-  "11453": {
-    "title": "Комсомольск-на-Амуре",
-    "children": [],
-    "id": "11453"
-  },
-  "11457": {
-    "title": "Хабаровский край",
-    "children": [11453, 76],
-    "id": "11457"
-  },
-  "11463": {
-    "title": "Евпатория",
-    "children": [],
-    "id": "11463"
-  },
-  "11464": {
-    "title": "Керчь",
-    "children": [],
-    "id": "11464"
-  },
-  "11469": {
-    "title": "Феодосия",
-    "children": [],
-    "id": "11469"
-  },
-  "11470": {
-    "title": "Ялта",
-    "children": [],
-    "id": "11470"
-  },
-  "20040": {
-    "title": "Выкса",
-    "children": [],
-    "id": "20040"
-  },
-  "20044": {
-    "title": "Кстово",
-    "children": [],
-    "id": "20044"
-  },
-  "20086": {
-    "title": "Железногорск",
-    "children": [],
-    "id": "20086"
-  },
-  "20235": {
-    "title": "Октябрьский",
-    "children": [],
-    "id": "20235"
-  },
-  "20237": {
-    "title": "Березники",
-    "children": [],
-    "id": "20237"
-  },
-  "20524": {
-    "title": "Запад",
-    "children": [20532, 20550, 20529, 20534, 20531, 20530, 20535, 20533],
-    "id": "20524"
-  },
-  "20525": {
-    "title": "Восток",
-    "children": [20537, 20536, 20539, 20540, 20538],
-    "id": "20525"
-  },
-  "20526": {
-    "title": "Юг",
-    "children": [20543, 20541, 20542],
-    "id": "20526"
-  },
-  "20527": {
-    "title": "Центр",
-    "children": [20545, 20547, 20544, 20548, 20549, 20546],
-    "id": "20527"
-  },
-  "20528": {
-    "title": "Север",
-    "children": [20552, 20551],
-    "id": "20528"
-  },
-  "20529": {
-    "title": "Львов и область",
-    "children": [],
-    "id": "20529"
-  },
-  "20530": {
-    "title": "Ужгород и Закарпатская область",
-    "children": [],
-    "id": "20530"
-  },
-  "20531": {
-    "title": "Тернополь и область",
-    "children": [],
-    "id": "20531"
-  },
-  "20532": {
-    "title": "Ивано-Франковск и область",
-    "children": [],
-    "id": "20532"
-  },
-  "20533": {
-    "title": "Черновцы и область",
-    "children": [],
-    "id": "20533"
-  },
-  "20534": {
-    "title": "Ровно и область",
-    "children": [],
-    "id": "20534"
-  },
-  "20535": {
-    "title": "Хмельницкий и область",
-    "children": [],
-    "id": "20535"
-  },
-  "20536": {
-    "title": "Донецк и область",
-    "children": [21774, 142, 20554, 24876, 10366],
-    "id": "20536"
-  },
-  "20537": {
-    "title": "Днепропетровск и область",
-    "children": [21775, 141, 10347, 21773, 28401],
-    "id": "20537"
-  },
-  "20538": {
-    "title": "Харьков и область",
-    "children": [],
-    "id": "20538"
-  },
-  "20539": {
-    "title": "Запорожье и область",
-    "children": [],
-    "id": "20539"
-  },
-  "20540": {
-    "title": "Луганск и область",
-    "children": [24885, 222, 24893],
-    "id": "20540"
-  },
-  "20541": {
-    "title": "Одесса и область",
-    "children": [],
-    "id": "20541"
-  },
-  "20542": {
-    "title": "Херсон и область",
-    "children": [],
-    "id": "20542"
-  },
-  "20543": {
-    "title": "Николаев и область",
-    "children": [],
-    "id": "20543"
-  },
-  "20544": {
-    "title": "Киев и область",
-    "children": [10369, 143],
-    "id": "20544"
-  },
-  "20545": {
-    "title": "Винница и область",
-    "children": [],
-    "id": "20545"
-  },
-  "20546": {
-    "title": "Черкассы и область",
-    "children": [],
-    "id": "20546"
-  },
-  "20547": {
-    "title": "Житомир и область",
-    "children": [],
-    "id": "20547"
-  },
-  "20548": {
-    "title": "Кировоград и область",
-    "children": [],
-    "id": "20548"
-  },
-  "20549": {
-    "title": "Полтава и область",
-    "children": [21609, 964],
-    "id": "20549"
-  },
-  "20550": {
-    "title": "Луцк и Волынская область",
-    "children": [],
-    "id": "20550"
-  },
-  "20551": {
-    "title": "Чернигов и область",
-    "children": [],
-    "id": "20551"
-  },
-  "20552": {
-    "title": "Сумы и область",
-    "children": [],
-    "id": "20552"
-  },
-  "20554": {
-    "title": "Краматорск",
-    "children": [],
-    "id": "20554"
-  },
-  "20571": {
-    "title": "Жуковский",
-    "children": [],
-    "id": "20571"
-  },
-  "20574": {
-    "title": "Кипр",
-    "children": [],
-    "id": "20574"
-  },
-  "20728": {
-    "title": "Королёв",
-    "children": [],
-    "id": "20728"
-  },
-  "20809": {
-    "title": "Кокшетау",
-    "children": [],
-    "id": "20809"
-  },
-  "20975": {
-    "title": "Камбоджа",
-    "children": [],
-    "id": "20975"
-  },
-  "21154": {
-    "title": "Тутаев",
-    "children": [],
-    "id": "21154"
-  },
-  "21609": {
-    "title": "Кременчуг",
-    "children": [],
-    "id": "21609"
-  },
-  "21619": {
-    "title": "Фрязино",
-    "children": [],
-    "id": "21619"
-  },
-  "21620": {
-    "title": "Юбилейный",
-    "children": [],
-    "id": "21620"
-  },
-  "21622": {
-    "title": "Железнодорожный",
-    "children": [],
-    "id": "21622"
-  },
-  "21623": {
-    "title": "Ивантеевка",
-    "children": [],
-    "id": "21623"
-  },
-  "21773": {
-    "title": "Никополь",
-    "children": [],
-    "id": "21773"
-  },
-  "21774": {
-    "title": "Горловка",
-    "children": [],
-    "id": "21774"
-  },
-  "21775": {
-    "title": "Днепродзержинск",
-    "children": [],
-    "id": "21775"
-  },
-  "21949": {
-    "title": "Забайкальский край",
-    "children": [],
-    "id": "21949"
-  },
-  "24876": {
-    "title": "Макеевка",
-    "children": [],
-    "id": "24876"
-  },
-  "24885": {
-    "title": "Алчевск",
-    "children": [],
-    "id": "24885"
-  },
-  "24893": {
-    "title": "Северодонецк",
-    "children": [],
-    "id": "24893"
-  },
-  "28401": {
-    "title": "Павлоград",
-    "children": [],
-    "id": "28401"
-  },
-  "29386": {
-    "title": "Абхазия",
-    "children": [],
-    "id": "29386"
-  },
-  "29403": {
-    "title": "Астана и Акмолинская область",
-    "children": [163, 20809],
-    "id": "29403"
-  },
-  "29404": {
-    "title": "Актобе и область",
-    "children": [],
-    "id": "29404"
-  },
-  "29406": {
-    "title": "Алматы и область",
-    "children": [162, 10303],
-    "id": "29406"
-  },
-  "29407": {
-    "title": "Атырау и область",
-    "children": [],
-    "id": "29407"
-  },
-  "29408": {
-    "title": "Восточно-Казахстанская область",
-    "children": [165, 10306],
-    "id": "29408"
-  },
-  "29409": {
-    "title": "Тараз и Жамбылская область",
-    "children": [],
-    "id": "29409"
-  },
-  "29410": {
-    "title": "Западно-Казахстанская область",
-    "children": [],
-    "id": "29410"
-  },
-  "29411": {
-    "title": "Караганда и область",
-    "children": [],
-    "id": "29411"
-  },
-  "29412": {
-    "title": "Костанай и область",
-    "children": [],
-    "id": "29412"
-  },
-  "29413": {
-    "title": "Кызылорда и область",
-    "children": [],
-    "id": "29413"
-  },
-  "29414": {
-    "title": "Актау и Мангистауская область",
-    "children": [],
-    "id": "29414"
-  },
-  "29415": {
-    "title": "Павлодар и область",
-    "children": [],
-    "id": "29415"
-  },
-  "29416": {
-    "title": "Северо-Казахстанская область",
-    "children": [],
-    "id": "29416"
-  },
-  "29417": {
-    "title": "Южно-Казахстанская область",
-    "children": [],
-    "id": "29417"
-  },
-  "29629": {
-    "title": "Могилёв и область",
-    "children": [],
-    "id": "29629"
-  },
-  "29630": {
-    "title": "Минск и область",
-    "children": [],
-    "id": "29630"
-  },
-  "29631": {
-    "title": "Гомель и область",
-    "children": [],
-    "id": "29631"
-  },
-  "29632": {
-    "title": "Брест и область",
-    "children": [],
-    "id": "29632"
-  },
-  "29633": {
-    "title": "Витебск и область",
-    "children": [],
-    "id": "29633"
-  },
-  "29634": {
-    "title": "Гродно и область",
-    "children": [],
-    "id": "29634"
-  },
-  "37133": {
-    "title": "Новочебоксарск",
-    "children": [],
-    "id": "37133"
-  },
-  "37147": {
-    "title": "Климовск",
-    "children": [],
-    "id": "37147"
-  },
-  "102444": {
-    "title": "Северный Кавказ",
-    "children": [11020, 11010, 11012, 11013, 11021, 11069, 11024],
-    "id": "102444"
-  },
-  "103668": {
-    "title": "Провинция Агры",
-    "children": [],
-    "id": "103668"
-  },
-  "103669": {
-    "title": "Провинция Адана",
-    "children": [],
-    "id": "103669"
-  },
-  "103670": {
-    "title": "Провинция Адыяман",
-    "children": [],
-    "id": "103670"
-  },
-  "103671": {
-    "title": "Провинция Айдын",
-    "children": [],
-    "id": "103671"
-  },
-  "103672": {
-    "title": "Провинция Аксарай",
-    "children": [],
-    "id": "103672"
-  },
-  "103673": {
-    "title": "Провинция Амасья",
-    "children": [],
-    "id": "103673"
-  },
-  "103674": {
-    "title": "Провинция Анкара",
-    "children": [],
-    "id": "103674"
-  },
-  "103675": {
-    "title": "Провинция Анталья",
-    "children": [],
-    "id": "103675"
-  },
-  "103676": {
-    "title": "Провинция Ардахан",
-    "children": [],
-    "id": "103676"
-  },
-  "103677": {
-    "title": "Провинция Артвин",
-    "children": [],
-    "id": "103677"
-  },
-  "103678": {
-    "title": "Провинция Афьонкарахисар",
-    "children": [],
-    "id": "103678"
-  },
-  "103679": {
-    "title": "Провинция Байбурт",
-    "children": [],
-    "id": "103679"
-  },
-  "103680": {
-    "title": "Провинция Балыкесир",
-    "children": [],
-    "id": "103680"
-  },
-  "103681": {
-    "title": "Провинция Бартын",
-    "children": [],
-    "id": "103681"
-  },
-  "103682": {
-    "title": "Провинция Батман",
-    "children": [],
-    "id": "103682"
-  },
-  "103683": {
-    "title": "Провинция Биледжик",
-    "children": [],
-    "id": "103683"
-  },
-  "103684": {
-    "title": "Провинция Бингёль",
-    "children": [],
-    "id": "103684"
-  },
-  "103685": {
-    "title": "Провинция Битлис",
-    "children": [],
-    "id": "103685"
-  },
-  "103686": {
-    "title": "Провинция Болу",
-    "children": [],
-    "id": "103686"
-  },
-  "103687": {
-    "title": "Провинция Бурдур",
-    "children": [],
-    "id": "103687"
-  },
-  "103688": {
-    "title": "Провинция Бурса",
-    "children": [],
-    "id": "103688"
-  },
-  "103689": {
-    "title": "Провинция Ван",
-    "children": [],
-    "id": "103689"
-  },
-  "103690": {
-    "title": "Провинция Газиантеп",
-    "children": [],
-    "id": "103690"
-  },
-  "103691": {
-    "title": "Провинция Гиресун",
-    "children": [],
-    "id": "103691"
-  },
-  "103692": {
-    "title": "Провинция Гюмюшхане",
-    "children": [],
-    "id": "103692"
-  },
-  "103693": {
-    "title": "Провинция Денизли",
-    "children": [],
-    "id": "103693"
-  },
-  "103694": {
-    "title": "Провинция Диярбакыр",
-    "children": [],
-    "id": "103694"
-  },
-  "103695": {
-    "title": "Провинция Дюздже",
-    "children": [],
-    "id": "103695"
-  },
-  "103696": {
-    "title": "Провинция Зонгулдак",
-    "children": [],
-    "id": "103696"
-  },
-  "103697": {
-    "title": "Провинция Измир",
-    "children": [],
-    "id": "103697"
-  },
-  "103698": {
-    "title": "Провинция Йозгат",
-    "children": [],
-    "id": "103698"
-  },
-  "103699": {
-    "title": "Провинция Кайсери",
-    "children": [],
-    "id": "103699"
-  },
-  "103700": {
-    "title": "Провинция Карабюк",
-    "children": [],
-    "id": "103700"
-  },
-  "103701": {
-    "title": "Провинция Караман",
-    "children": [],
-    "id": "103701"
-  },
-  "103702": {
-    "title": "Провинция Карс",
-    "children": [],
-    "id": "103702"
-  },
-  "103703": {
-    "title": "Провинция Кастамону",
-    "children": [],
-    "id": "103703"
-  },
-  "103704": {
-    "title": "Провинция Кахраманмараш",
-    "children": [],
-    "id": "103704"
-  },
-  "103705": {
-    "title": "Провинция Килис",
-    "children": [],
-    "id": "103705"
-  },
-  "103706": {
-    "title": "Провинция Коджаэли",
-    "children": [],
-    "id": "103706"
-  },
-  "103707": {
-    "title": "Провинция Конья",
-    "children": [],
-    "id": "103707"
-  },
-  "103708": {
-    "title": "Провинция Кыркларели",
-    "children": [],
-    "id": "103708"
-  },
-  "103709": {
-    "title": "Провинция Кыршехир",
-    "children": [],
-    "id": "103709"
-  },
-  "103710": {
-    "title": "Провинция Кырыккале",
-    "children": [],
-    "id": "103710"
-  },
-  "103711": {
-    "title": "Провинция Кютахья",
-    "children": [],
-    "id": "103711"
-  },
-  "103712": {
-    "title": "Провинция Малатья",
-    "children": [],
-    "id": "103712"
-  },
-  "103713": {
-    "title": "Провинция Маниса",
-    "children": [],
-    "id": "103713"
-  },
-  "103714": {
-    "title": "Провинция Мардин",
-    "children": [],
-    "id": "103714"
-  },
-  "103715": {
-    "title": "Провинция Мерсин",
-    "children": [],
-    "id": "103715"
-  },
-  "103716": {
-    "title": "Провинция Мугла",
-    "children": [],
-    "id": "103716"
-  },
-  "103717": {
-    "title": "Провинция Муш",
-    "children": [],
-    "id": "103717"
-  },
-  "103718": {
-    "title": "Провинция Невшехир",
-    "children": [],
-    "id": "103718"
-  },
-  "103719": {
-    "title": "Провинция Нигде",
-    "children": [],
-    "id": "103719"
-  },
-  "103720": {
-    "title": "Провинция Орду",
-    "children": [],
-    "id": "103720"
-  },
-  "103721": {
-    "title": "Провинция Османие",
-    "children": [],
-    "id": "103721"
-  },
-  "103722": {
-    "title": "Провинция Ризе",
-    "children": [],
-    "id": "103722"
-  },
-  "103723": {
-    "title": "Провинция Сакарья",
-    "children": [],
-    "id": "103723"
-  },
-  "103724": {
-    "title": "Провинция Самсун",
-    "children": [],
-    "id": "103724"
-  },
-  "103725": {
-    "title": "Провинция Сивас",
-    "children": [],
-    "id": "103725"
-  },
-  "103726": {
-    "title": "Провинция Сиирт",
-    "children": [],
-    "id": "103726"
-  },
-  "103727": {
-    "title": "Провинция Синоп",
-    "children": [],
-    "id": "103727"
-  },
-  "103728": {
-    "title": "Провинция Стамбул",
-    "children": [],
-    "id": "103728"
-  },
-  "103729": {
-    "title": "Провинция Текирдаг",
-    "children": [],
-    "id": "103729"
-  },
-  "103730": {
-    "title": "Провинция Токат",
-    "children": [],
-    "id": "103730"
-  },
-  "103731": {
-    "title": "Провинция Трабзон",
-    "children": [],
-    "id": "103731"
-  },
-  "103732": {
-    "title": "Провинция Тунджели",
-    "children": [],
-    "id": "103732"
-  },
-  "103733": {
-    "title": "Провинция Ушак",
-    "children": [],
-    "id": "103733"
-  },
-  "103734": {
-    "title": "Провинция Хаккяри",
-    "children": [],
-    "id": "103734"
-  },
-  "103735": {
-    "title": "Провинция Хатай",
-    "children": [],
-    "id": "103735"
-  },
-  "103736": {
-    "title": "Провинция Чанаккале",
-    "children": [],
-    "id": "103736"
-  },
-  "103737": {
-    "title": "Провинция Чанкыры",
-    "children": [],
-    "id": "103737"
-  },
-  "103738": {
-    "title": "Провинция Чорум",
-    "children": [],
-    "id": "103738"
-  },
-  "103739": {
-    "title": "Провинция Шанлыурфа",
-    "children": [],
-    "id": "103739"
-  },
-  "103740": {
-    "title": "Провинция Ширнак",
-    "children": [],
-    "id": "103740"
-  },
-  "103741": {
-    "title": "Провинция Ыгдыр",
-    "children": [],
-    "id": "103741"
-  },
-  "103742": {
-    "title": "Провинция Испарта",
-    "children": [],
-    "id": "103742"
-  },
-  "103743": {
-    "title": "Провинция Эдирне",
-    "children": [],
-    "id": "103743"
-  },
-  "103744": {
-    "title": "Провинция Элязыг",
-    "children": [],
-    "id": "103744"
-  },
-  "103745": {
-    "title": "Провинция Эрзинджан",
-    "children": [],
-    "id": "103745"
-  },
-  "103746": {
-    "title": "Провинция Эрзурум",
-    "children": [],
-    "id": "103746"
-  },
-  "103747": {
-    "title": "Провинция Эскишехир",
-    "children": [],
-    "id": "103747"
-  },
-  "103748": {
-    "title": "Провинция Ялова",
-    "children": [],
-    "id": "103748"
-  }
-};
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.css b/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.css
deleted file mode 100644
index 01784ef5..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.tree,
-.tree ul {
-  list-style: none;
-  margin: 0;
-  padding: 2px;
-}
-
-.tree .tree-open ul {
-  display: block;
-}
-
-.tree .tree-closed ul {
-  display: none;
-}
-
-.tree-toggler {
-  color: blue;
-  cursor: pointer;
-  float: left;
-  margin-left: -16px;
-  width: 1em;
-  height: 1em;
-}
-
-.tree-open .tree-toggler {
-  background: url(https://js.cx/tree/minus.gif) no-repeat center;
-}
-
-.tree-closed .tree-toggler {
-  background: url(https://js.cx/tree/plus.gif) no-repeat center;
-}
-
-.tree li {
-  line-height: 1em;
-  padding-left: 16px;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.js b/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.js
deleted file mode 100644
index bcb7eaf4..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/tree.js
+++ /dev/null
@@ -1,73 +0,0 @@
-function Tree(options) {
-  var self = this;
-
-  var template = options.template;
-
-  var data = options.data;
-
-  this.getElement = function() {
-    if (!this.elem) render();
-    return this.elem;
-  }
-
-  function onTogglerClick(e) {
-    self.toggle($(e.currentTarget.parentNode));
-  }
-
-  function onCheckboxChange(e) {
-    var checked = e.target.checked;
-    var id = e.target.value;
-    var node = $(e.currentTarget.parentNode);
-
-    if (checked) {
-      self.open(node);
-    }
-
-    node.find('input').prop('checked', checked);
-  }
-
-  this.toggle = function(node) {
-    ensureChildrenRendered(node);
-    node.toggleClass("tree-open tree-closed");
-  };
-
-  this.open = function(node) {
-    ensureChildrenRendered(node);
-    node.addClass("tree-open").removeClass("tree-closed");
-  }
-
-  this.close = function(node) {
-    ensureChildrenRendered(node);
-    node.addClass("tree-closed").removeClass("tree-open");
-  }
-
-  function ensureChildrenRendered(node) {
-    var ul = node.children('ul');
-
-    if (!ul.length) {
-      renderChildren(node.data('id')).appendTo(node);
-
-      if (node.children('input').is(':checked')) {
-        node.find('input').prop('checked', true);
-      }
-    }
-  }
-
-  function renderChildren(id) {
-    return $(template({
-      children: data[id].children,
-      data: data
-    }));
-  }
-
-  function render() {
-
-    self.elem = renderChildren(0)
-      .addClass('tree');
-
-    self.elem.on('click', '.tree-toggler', onTogglerClick);
-
-    self.elem.on('change', 'input', onCheckboxChange);
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/source.view/index.html b/archive/widget-tasks/5-tree-checkboxes/source.view/index.html
deleted file mode 100644
index 31a3d3da..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/source.view/index.html
+++ /dev/null
@@ -1,2656 +0,0 @@
-<html>
-
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <!-- saved from url=(0095)http://wordstat.yandex.ru/regions_ru.html?cmd=showgeo&media=&geo=&bid=undefined&my_id=undefined -->
-  <title>Выбор регионов</title>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script type="text/javascript">
-    function GenerateAll() {
-
-      var geo = '';
-      if (!geo.match(/\d/) && document.location.search && document.location.search.match(/.*&?geo=([\d,]+).*/)) {
-        geo = document.location.search.replace(/%2C/ig, ',').replace(/.*&?geo=([\d,-]+).*/, "$1");
-      }
-
-
-      var rs = geo.split(/,/);
-      for (var l = 0; l < rs.length; l++) {
-        if (rs[l]) {
-          var numReg = rs[l];
-          if (rs[l] < 0) {
-            numReg = -rs[l];
-          }
-
-          for (var m = 0; m < reg_form.length; m++) {
-            var regexp = new RegExp('(^|[^0-9]+)' + numReg + '[^0-9]+');
-            if (regexp.test(reg_form[m].id)) {
-
-              if (rs[l] > 0) {
-                reg_form[m].checked = true;
-              } else {
-                reg_form[m].checked = false;
-              }
-              Generate(reg_form[m]);
-              openTree(reg_form[m]);
-              break;
-            }
-          }
-        }
-      }
-
-    }
-
-    function collapseRegions(parent) {
-      parent = parent || document.getElementById('beginRegions');
-      var regionsBlocks = parent.childNodes;
-      for (var i = 0; i < regionsBlocks.length; i++) {
-        if (regionsBlocks[i].tagName && regionsBlocks[i].tagName.toLowerCase() == 'div' && regionsBlocks[i].id && regionsBlocks[i].id.indexOf('region') != -1 && regionsBlocks[i].style.display == 'block') {
-
-          var regionId = regionsBlocks[i].id.match(/^region(\d*)?/)[1];
-
-          if (parent != document.getElementById('beginRegions')) {
-            regtree(regionId);
-          }
-          changeSign(regionId, true);
-          collapseRegions(regionsBlocks[i]);
-        }
-      }
-    }
-
-    function quick_choose(reg_id, dont_collapse) {
-      var regexp = new RegExp('(^|[^0-9]+)' + reg_id + '[^0-9]+');
-      if (!dont_collapse) {
-        reg_form.reset();
-        collapseRegions();
-      }
-      for (var m = 0; m < reg_form.length; m++) {
-        if (regexp.test(reg_form[m].id)) {
-          reg_form[m].checked = true;
-          Generate(reg_form[m]);
-          openTree(reg_form[m]);
-          return;
-        }
-      }
-    }
-
-    // Открываем дерево до текущего элемента
-    function openTree(f) {
-      if (!f || !f.id) {
-        return;
-      }
-      // Находим id всех отцов
-      var parents_ids = f.id.replace(/^_+|_+$/g, '').split(/_/);
-      for (var i = 0; i < parents_ids.length - 1; i++) {
-        var d = document.getElementById('region' + parents_ids[i]);
-        if (d && d.style) {
-          // Открываем сам элемент
-          d.style.display = 'block';
-          // меняем знак
-          var a = document.getElementById('link' + parents_ids[i]);
-          if (a) a.innerHTML = "&#150;";
-          // Если это последний элемент - ничего не делаем
-          if (i != parents_ids.length - 1) {
-            // Открываем всех соседей
-            var cn = d.childNodes;
-            for (var j = 0; j < cn.length; j++) {
-              if (cn[j] && cn[j].tagName == 'DIV' && cn[j].style) {
-                cn[j].style.display = 'block';
-              }
-            }
-          }
-        }
-      }
-    }
-
-    function Generate(f, no_child_check) {
-      if (!f || f.checked == null) return;
-      var parent_id = f.id.replace(/\d+_$/, '');
-      var all_checked = true,
-        all_unchecked = true;
-      var checked_num = 0,
-        unchecked_num = 0;
-
-      var parent_id_res = parent_id;
-      if (parent_id.match('^[0-9]+_[0-9]+_')) {
-        pra_parent_id = parent_id.replace(/\d+_$/, '');
-        var bc = document.getElementById(pra_parent_id);
-        if (bc.checked) {
-          var abc = document.getElementById(parent_id);
-          abc.checked = true;
-        }
-      }
-      parent_id = parent_id_res;
-
-      var one_of_parents_cheched = false;
-      for (var j = 0; j < reg_form.length; j++) {
-        // идет внутрь и чекает детей
-        if (
-          reg_form[j].id.indexOf(f.id) == 0 && f.id != reg_form[j].id && !no_child_check
-        ) {
-          !reg_form[j].disabled && (reg_form[j].checked = f.checked);
-        }
-        // проверяем чекнутость родителей
-        if (
-          f.id.indexOf(reg_form[j].id) == 0 && f.id != reg_form[j].id
-        ) {
-          if (reg_form[j].checked) one_of_parents_cheched = true;
-        }
-        // Проверяем детей на чекнутость
-        if (
-          reg_form[j].id.indexOf(parent_id) == 0 && reg_form[j].id != parent_id
-        ) {
-          all_checked = all_checked && reg_form[j].checked;
-          if (reg_form[j].checked) checked_num++;
-          all_unchecked = all_unchecked && !reg_form[j].checked;
-          if (!reg_form[j].checked) unchecked_num++;
-        }
-      }
-      // меняем, если нужно статуc отца
-      var parent_chk = document.getElementById(parent_id);
-      if (parent_chk && !parent_chk.checked && checked_num > 0 && one_of_parents_cheched) {
-        parent_chk.checked = true;
-        Generate(parent_chk, true);
-      }
-      // Специальное ограничение для медийки, СЗ регион - нельзя СЗ,-Санкт-Петербург
-      if (
-        parent_chk && all_checked && checked_num > 1 && !parent_chk.checked
-      ) {
-        parent_chk.checked = true;
-        Generate(parent_chk);
-      } else if (
-        parent_chk && all_unchecked && (unchecked_num > 1 || parent_chk.id.match(/_17_$/)) && parent_chk.checked
-      ) {
-        parent_chk.checked = false;
-        Generate(parent_chk);
-      }
-      if (f.checked) {
-        // Получаем текущий id
-        var re = new RegExp('(?:[0-9_]*?)?([0-9]+)_$');
-        var reg_id = f.id.replace(re, '$1');
-        var a = document.getElementById('link' + reg_id);
-        if (a) {
-          a.innerHTML = "&#150;";
-        }
-        // Открываем всех соседей
-        var cn = f.parentNode.childNodes;
-        for (var j = 0; j < cn.length; j++) {
-          if (cn[j] && cn[j].tagName == 'DIV' && cn[j].style) {
-            cn[j].style.display = 'block';
-          }
-        }
-      }
-    }
-
-    function save(f) {
-      document.getElementById("debug").innerHTML = "";
-
-      regions_name = '';
-      regions_name_with_comas = '';
-      regions_id = '';
-      regions_exept_flag = false;
-      var bid = '';
-      regions = document.getElementById("beginRegions").childNodes;
-
-      //document.getElementById("debug").innerHTML = regions.length + "<br>";
-
-      for (i = 0; i < regions.length; i++) {
-        if (regions.item(i).tagName == 'DIV') {
-          processReg(regions.item(i));
-        }
-      }
-
-      //document.getElementById("debug").innerHTML += regions_name + "<br>" + regions_id + "<br>";
-      if (!regions_name) regions_name = "Россия\nСНГ (исключая Россию)\nЕвропа\nАзия\nАфрика\nСеверная Америка\nЮжная Америка\nАвстралия и Океания";
-      if (!regions_name_with_comas) regions_name_with_comas = "Россия, СНГ (исключая Россию), Европа, Азия, Африка, Северная Америка, Южная Америка, Австралия и Океания";
-      if (!regions_id) regions_id = "0";
-      if (regions_exept_flag) regions_name += ')\n';
-      if (regions_exept_flag) regions_name_with_comas += ')';
-
-      opener.window.showGeo(bid, regions_id, regions_name_with_comas);
-
-      window.close();
-    }
-
-    function processReg(div) {
-      var childs = div.childNodes;
-
-      var parentChecked = false;
-      for (var i = 0; i < childs.length; i++) {
-        if (childs.item(i).type == 'checkbox') {
-
-          parentChilds = childs.item(i).parentNode.parentNode.childNodes;
-          for (j = 0; j < parentChilds.length; j++) {
-            if (parentChilds[j].type == 'checkbox') {
-              parentChecked = parentChilds[j].checked;
-            }
-          }
-
-          ids = childs.item(i).id.split('_');
-          if (childs.item(i).checked && !parentChecked) {
-            //document.getElementById("debug").innerHTML += childs.item(i).value + " " + ids[ids.length - 2] + "<br>";
-            if (regions_exept_flag) {
-              regions_name += ')\n';
-              regions_name_with_comas += '), ';
-              regions_exept_flag = false;
-            } else if (regions_name != '') {
-              regions_name += '\n';
-              regions_name_with_comas += ', ';
-            }
-            regions_name += childs.item(i).value;
-            regions_name_with_comas += childs.item(i).value;
-            regions_id += ids[ids.length - 2] + ",";
-          }
-
-          if (!childs.item(i).checked && parentChecked) {
-            //document.getElementById("debug").innerHTML += "&#151;" + childs.item(i).value + "<br>";
-            if (regions_exept_flag) {
-              regions_name += ", " + childs.item(i).value;
-              regions_name_with_comas += ", " + childs.item(i).value;
-            } else {
-              regions_exept_flag = true;
-              regions_name += " (кроме: " + childs.item(i).value;
-              regions_name_with_comas += " (кроме: " + childs.item(i).value;
-            }
-            regions_id += "-" + ids[ids.length - 2] + ",";
-          }
-        }
-
-        if (childs.item(i).tagName == 'DIV') {
-          processReg(childs.item(i));
-        }
-
-      }
-    }
-
-    function regtree(regID) {
-      regID = document.getElementById("region" + regID);
-      if (regID.style.display == 'none') {
-        regID.style.display = 'block';
-      } else {
-        regID.style.display = 'none';
-      }
-      return false;
-    }
-
-    function changeSign(regID, toPlusOnly) {
-      regID = document.getElementById("link" + regID);
-      if (!regID) {
-        return;
-      }
-      if (regID.innerHTML == "+" && !toPlusOnly) {
-        regID.innerHTML = "&#150;";
-      } else {
-        regID.innerHTML = "+";
-      }
-
-      return false;
-    }
-  </script>
-  <style type="text/css">
-    body {
-      font-family: Arial, sans-serif;
-    }
-    
-    table.geoSelect {
-      font-size: 80%;
-    }
-    
-    table.geoSelect div {
-      margin: 0 20px 1em 20px;
-      font-weight: bold;
-      text-indent: -20px;
-    }
-    
-    table.geoSelect div div {
-      margin: 0.3em 0 0 20px;
-      font-weight: normal;
-      text-indent: -20px
-    }
-    
-    a.alias {
-      margin-right: 1px;
-    }
-    
-    a.alias:visited {
-      color: blue;
-    }
-    
-    div#quick {
-      float: right;
-      text-align: left;
-      font-weight: normal;
-      text-indent: 0;
-      line-height: 120%;
-      padding: 10px;
-    }
-  </style>
-</head>
-
-<body bgcolor="white" marginheight="0" marginwidth="20" topmargin="0" rightmargin="20" bottommargin="0" leftmargin="20" class="window" onload="GenerateAll();">
-
-
-  <div id="debug"></div>
-
-
-  <h2 style="margin:0">Выбор регионов для показов объявлений</h2>
-
-  <form name="reg" onclick="javascript:Generate(this)">
-    <table border="0" width="100%" cellspacing="0" cellpadding="0" class="geoSelect">
-      <tbody>
-        <tr>
-
-          <td bgcolor="#F0F1F3" style="border-right:white 20px solid;">
-
-          </td>
-        </tr>
-
-        <tr valign="top">
-          <td id="beginRegions" style="padding-top: 1em;">
-
-
-
-            <div id="region225" style="display: block;"> <a name="name225" style="text-decoration: none" id="link225" href="javascript://" onclick="regtree(3);regtree(17);regtree(40);regtree(26);regtree(59);regtree(73);regtree(102444);regtree(52);changeSign(225);">+</a>&nbsp;
-              <input id="225_" value="Россия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="225_">Россия</label>
-              <div id="region3" style="display: none; "> <a name="name3" style="text-decoration: none" id="link3" href="javascript://" onclick="regtree(1);regtree(10645);regtree(10650);regtree(10658);regtree(10672);regtree(10687);regtree(10693);regtree(10699);regtree(10705);regtree(10712);regtree(10772);regtree(10776);regtree(10795);regtree(10802);regtree(10819);regtree(10832);regtree(10841);changeSign(3);">+</a>&nbsp;
-                <input id="225_3_" value="Центр" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_3_">Центр</label>
-                <div id="region1" style="display: none;"> <a name="name1" style="text-decoration: none" id="link1" href="javascript://" onclick="regtree(213);regtree(10716);regtree(10722);regtree(10723);regtree(214);regtree(215);regtree(21622);regtree(20571);regtree(21623);regtree(37147);regtree(10734);regtree(20728);regtree(10735);regtree(10739);regtree(10745);regtree(10747);regtree(217);regtree(10750);regtree(10752);regtree(10754);regtree(21619);regtree(219);regtree(10765);regtree(21620);changeSign(1);">+</a>&nbsp;
-                  <input id="225_3_1_" value="Москва и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_1_">Москва и область</label>
-                  <div id="region213" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name213"></a>
-                    <input id="225_3_1_213_" value="Москва" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_213_">Москва</label>
-                  </div>
-                  <div id="region10716" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10716"></a>
-                    <input id="225_3_1_10716_" value="Балашиха" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10716_">Балашиха</label>
-                  </div>
-                  <div id="region10722" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10722"></a>
-                    <input id="225_3_1_10722_" value="Воскресенск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10722_">Воскресенск</label>
-                  </div>
-                  <div id="region10723" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10723"></a>
-                    <input id="225_3_1_10723_" value="Дмитров" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10723_">Дмитров</label>
-                  </div>
-                  <div id="region214" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name214"></a>
-                    <input id="225_3_1_214_" value="Долгопрудный" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_214_">Долгопрудный</label>
-                  </div>
-                  <div id="region215" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name215"></a>
-                    <input id="225_3_1_215_" value="Дубна" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_215_">Дубна</label>
-                  </div>
-                  <div id="region21622" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21622"></a>
-                    <input id="225_3_1_21622_" value="Железнодорожный" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_21622_">Железнодорожный</label>
-                  </div>
-                  <div id="region20571" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20571"></a>
-                    <input id="225_3_1_20571_" value="Жуковский" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_20571_">Жуковский</label>
-                  </div>
-                  <div id="region21623" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21623"></a>
-                    <input id="225_3_1_21623_" value="Ивантеевка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_21623_">Ивантеевка</label>
-                  </div>
-                  <div id="region37147" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name37147"></a>
-                    <input id="225_3_1_37147_" value="Климовск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_37147_">Климовск</label>
-                  </div>
-                  <div id="region10734" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10734"></a>
-                    <input id="225_3_1_10734_" value="Коломна" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10734_">Коломна</label>
-                  </div>
-                  <div id="region20728" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20728"></a>
-                    <input id="225_3_1_20728_" value="Королёв" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_20728_">Королёв</label>
-                  </div>
-                  <div id="region10735" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10735"></a>
-                    <input id="225_3_1_10735_" value="Красногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10735_">Красногорск</label>
-                  </div>
-                  <div id="region10739" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10739"></a>
-                    <input id="225_3_1_10739_" value="Можайск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10739_">Можайск</label>
-                  </div>
-                  <div id="region10745" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10745"></a>
-                    <input id="225_3_1_10745_" value="Орехово-Зуево" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10745_">Орехово-Зуево</label>
-                  </div>
-                  <div id="region10747" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10747"></a>
-                    <input id="225_3_1_10747_" value="Подольск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10747_">Подольск</label>
-                  </div>
-                  <div id="region217" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name217"></a>
-                    <input id="225_3_1_217_" value="Пущино" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_217_">Пущино</label>
-                  </div>
-                  <div id="region10750" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10750"></a>
-                    <input id="225_3_1_10750_" value="Раменское" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10750_">Раменское</label>
-                  </div>
-                  <div id="region10752" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10752"></a>
-                    <input id="225_3_1_10752_" value="Сергиев Посад" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10752_">Сергиев Посад</label>
-                  </div>
-                  <div id="region10754" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10754"></a>
-                    <input id="225_3_1_10754_" value="Серпухов" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10754_">Серпухов</label>
-                  </div>
-                  <div id="region21619" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21619"></a>
-                    <input id="225_3_1_21619_" value="Фрязино" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_21619_">Фрязино</label>
-                  </div>
-                  <div id="region219" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name219"></a>
-                    <input id="225_3_1_219_" value="Черноголовка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_219_">Черноголовка</label>
-                  </div>
-                  <div id="region10765" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10765"></a>
-                    <input id="225_3_1_10765_" value="Щелково" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_10765_">Щелково</label>
-                  </div>
-                  <div id="region21620" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21620"></a>
-                    <input id="225_3_1_21620_" value="Юбилейный" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_1_21620_">Юбилейный</label>
-                  </div>
-                </div>
-                <div id="region10645" style="display: none;"> <a name="name10645" style="text-decoration: none" id="link10645" href="javascript://" onclick="regtree(4);regtree(10649);changeSign(10645);">+</a>&nbsp;
-                  <input id="225_3_10645_" value="Белгород и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10645_">Белгород и область</label>
-                  <div id="region4" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name4"></a>
-                    <input id="225_3_10645_4_" value="Белгород" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10645_4_">Белгород</label>
-                  </div>
-                  <div id="region10649" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10649"></a>
-                    <input id="225_3_10645_10649_" value="Старый Оскол" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10645_10649_">Старый Оскол</label>
-                  </div>
-                </div>
-                <div id="region10650" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10650"></a>
-                  <input id="225_3_10650_" value="Брянск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10650_">Брянск и область</label>
-                </div>
-                <div id="region10658" style="display: none;"> <a name="name10658" style="text-decoration: none" id="link10658" href="javascript://" onclick="regtree(192);regtree(10664);regtree(10668);changeSign(10658);">+</a>&nbsp;
-                  <input id="225_3_10658_" value="Владимир и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10658_">Владимир и область</label>
-                  <div id="region192" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name192"></a>
-                    <input id="225_3_10658_192_" value="Владимир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10658_192_">Владимир</label>
-                  </div>
-                  <div id="region10664" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10664"></a>
-                    <input id="225_3_10658_10664_" value="Ковров" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10658_10664_">Ковров</label>
-                  </div>
-                  <div id="region10668" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10668"></a>
-                    <input id="225_3_10658_10668_" value="Муром" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10658_10668_">Муром</label>
-                  </div>
-                </div>
-                <div id="region10672" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10672"></a>
-                  <input id="225_3_10672_" value="Воронеж и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10672_">Воронеж и область</label>
-                </div>
-                <div id="region10687" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10687"></a>
-                  <input id="225_3_10687_" value="Иваново и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10687_">Иваново и область</label>
-                </div>
-                <div id="region10693" style="display: none;"> <a name="name10693" style="text-decoration: none" id="link10693" href="javascript://" onclick="regtree(6);regtree(967);changeSign(10693);">+</a>&nbsp;
-                  <input id="225_3_10693_" value="Калуга и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10693_">Калуга и область</label>
-                  <div id="region6" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name6"></a>
-                    <input id="225_3_10693_6_" value="Калуга" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10693_6_">Калуга</label>
-                  </div>
-                  <div id="region967" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name967"></a>
-                    <input id="225_3_10693_967_" value="Обнинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10693_967_">Обнинск</label>
-                  </div>
-                </div>
-                <div id="region10699" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10699"></a>
-                  <input id="225_3_10699_" value="Кострома и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10699_">Кострома и область</label>
-                </div>
-                <div id="region10705" style="display: none;"> <a name="name10705" style="text-decoration: none" id="link10705" href="javascript://" onclick="regtree(10710);regtree(8);changeSign(10705);">+</a>&nbsp;
-                  <input id="225_3_10705_" value="Курск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10705_">Курск и область</label>
-                  <div id="region10710" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10710"></a>
-                    <input id="225_3_10705_10710_" value="Железногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10705_10710_">Железногорск</label>
-                  </div>
-                  <div id="region8" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name8"></a>
-                    <input id="225_3_10705_8_" value="Курск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10705_8_">Курск</label>
-                  </div>
-                </div>
-                <div id="region10712" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10712"></a>
-                  <input id="225_3_10712_" value="Липецк и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10712_">Липецк и область</label>
-                </div>
-                <div id="region10772" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10772"></a>
-                  <input id="225_3_10772_" value="Орел и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10772_">Орел и область</label>
-                </div>
-                <div id="region10776" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10776"></a>
-                  <input id="225_3_10776_" value="Рязань и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10776_">Рязань и область</label>
-                </div>
-                <div id="region10795" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10795"></a>
-                  <input id="225_3_10795_" value="Смоленск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10795_">Смоленск и область</label>
-                </div>
-                <div id="region10802" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10802"></a>
-                  <input id="225_3_10802_" value="Тамбов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10802_">Тамбов и область</label>
-                </div>
-                <div id="region10819" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10819"></a>
-                  <input id="225_3_10819_" value="Тверь и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10819_">Тверь и область</label>
-                </div>
-                <div id="region10832" style="display: none;"> <a name="name10832" style="text-decoration: none" id="link10832" href="javascript://" onclick="regtree(10830);regtree(15);changeSign(10832);">+</a>&nbsp;
-                  <input id="225_3_10832_" value="Тула и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10832_">Тула и область</label>
-                  <div id="region10830" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10830"></a>
-                    <input id="225_3_10832_10830_" value="Новомосковск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10832_10830_">Новомосковск</label>
-                  </div>
-                  <div id="region15" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name15"></a>
-                    <input id="225_3_10832_15_" value="Тула" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10832_15_">Тула</label>
-                  </div>
-                </div>
-                <div id="region10841" style="display: none;"> <a name="name10841" style="text-decoration: none" id="link10841" href="javascript://" onclick="regtree(10839);regtree(21154);regtree(16);changeSign(10841);">+</a>&nbsp;
-                  <input id="225_3_10841_" value="Ярославль и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_3_10841_">Ярославль и область</label>
-                  <div id="region10839" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10839"></a>
-                    <input id="225_3_10841_10839_" value="Рыбинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10841_10839_">Рыбинск</label>
-                  </div>
-                  <div id="region21154" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21154"></a>
-                    <input id="225_3_10841_21154_" value="Тутаев" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10841_21154_">Тутаев</label>
-                  </div>
-                  <div id="region16" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name16"></a>
-                    <input id="225_3_10841_16_" value="Ярославль" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_3_10841_16_">Ярославль</label>
-                  </div>
-                </div>
-              </div>
-              <div id="region17" style="display: none; "> <a name="name17" style="text-decoration: none" id="link17" href="javascript://" onclick="regtree(10174);regtree(10842);regtree(10904);regtree(10853);regtree(10857);regtree(10897);regtree(10176);regtree(10926);regtree(10933);regtree(10939);changeSign(17);">+</a>&nbsp;
-                <input id="225_17_" value="Северо-Запад" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_17_">Северо-Запад</label>
-                <div id="region10174" style="display: none;"> <a name="name10174" style="text-decoration: none" id="link10174" href="javascript://" onclick="regtree(10864);regtree(10865);regtree(969);regtree(10867);regtree(10871);regtree(2);regtree(10891);regtree(10892);changeSign(10174);">+</a>&nbsp;
-                  <input id="225_17_10174_" value="Санкт-Петербург и Ленинградская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10174_">Санкт-Петербург и Ленинградская область</label>
-                  <div id="region10864" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10864"></a>
-                    <input id="225_17_10174_10864_" value="Волхов" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10864_">Волхов</label>
-                  </div>
-                  <div id="region10865" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10865"></a>
-                    <input id="225_17_10174_10865_" value="Всеволожск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10865_">Всеволожск</label>
-                  </div>
-                  <div id="region969" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name969"></a>
-                    <input id="225_17_10174_969_" value="Выборг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_969_">Выборг</label>
-                  </div>
-                  <div id="region10867" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10867"></a>
-                    <input id="225_17_10174_10867_" value="Гатчина" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10867_">Гатчина</label>
-                  </div>
-                  <div id="region10871" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10871"></a>
-                    <input id="225_17_10174_10871_" value="Кириши" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10871_">Кириши</label>
-                  </div>
-                  <div id="region2" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name2"></a>
-                    <input id="225_17_10174_2_" value="Санкт-Петербург" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_2_">Санкт-Петербург</label>
-                  </div>
-                  <div id="region10891" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10891"></a>
-                    <input id="225_17_10174_10891_" value="Сосновый Бор" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10891_">Сосновый Бор</label>
-                  </div>
-                  <div id="region10892" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10892"></a>
-                    <input id="225_17_10174_10892_" value="Тихвин" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10174_10892_">Тихвин</label>
-                  </div>
-                </div>
-                <div id="region10842" style="display: none;"> <a name="name10842" style="text-decoration: none" id="link10842" href="javascript://" onclick="regtree(20);regtree(10849);changeSign(10842);">+</a>&nbsp;
-                  <input id="225_17_10842_" value="Архангельск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10842_">Архангельск и область</label>
-                  <div id="region20" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20"></a>
-                    <input id="225_17_10842_20_" value="Архангельск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10842_20_">Архангельск</label>
-                  </div>
-                  <div id="region10849" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10849"></a>
-                    <input id="225_17_10842_10849_" value="Северодвинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10842_10849_">Северодвинск</label>
-                  </div>
-                </div>
-                <div id="region10904" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10904"></a>
-                  <input id="225_17_10904_" value="Великий Новгород и Новгородская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10904_">Великий Новгород и Новгородская область</label>
-                </div>
-                <div id="region10853" style="display: none;"> <a name="name10853" style="text-decoration: none" id="link10853" href="javascript://" onclick="regtree(21);regtree(968);changeSign(10853);">+</a>&nbsp;
-                  <input id="225_17_10853_" value="Вологда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10853_">Вологда и область</label>
-                  <div id="region21" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name21"></a>
-                    <input id="225_17_10853_21_" value="Вологда" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10853_21_">Вологда</label>
-                  </div>
-                  <div id="region968" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name968"></a>
-                    <input id="225_17_10853_968_" value="Череповец" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10853_968_">Череповец</label>
-                  </div>
-                </div>
-                <div id="region10857" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10857"></a>
-                  <input id="225_17_10857_" value="Калининград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10857_">Калининград и область</label>
-                </div>
-                <div id="region10897" style="display: none;"> <a name="name10897" style="text-decoration: none" id="link10897" href="javascript://" onclick="regtree(10894);regtree(23);changeSign(10897);">+</a>&nbsp;
-                  <input id="225_17_10897_" value="Мурманск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10897_">Мурманск и область</label>
-                  <div id="region10894" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10894"></a>
-                    <input id="225_17_10897_10894_" value="Апатиты" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10897_10894_">Апатиты</label>
-                  </div>
-                  <div id="region23" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name23"></a>
-                    <input id="225_17_10897_23_" value="Мурманск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10897_23_">Мурманск</label>
-                  </div>
-                </div>
-                <div id="region10176" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10176"></a>
-                  <input id="225_17_10176_" value="Ненецкий автономный округ" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10176_">Ненецкий автономный округ</label>
-                </div>
-                <div id="region10926" style="display: none;"> <a name="name10926" style="text-decoration: none" id="link10926" href="javascript://" onclick="regtree(10928);regtree(25);changeSign(10926);">+</a>&nbsp;
-                  <input id="225_17_10926_" value="Псков и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10926_">Псков и область</label>
-                  <div id="region10928" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10928"></a>
-                    <input id="225_17_10926_10928_" value="Великие Луки" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10926_10928_">Великие Луки</label>
-                  </div>
-                  <div id="region25" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name25"></a>
-                    <input id="225_17_10926_25_" value="Псков" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10926_25_">Псков</label>
-                  </div>
-                </div>
-                <div id="region10933" style="display: none;"> <a name="name10933" style="text-decoration: none" id="link10933" href="javascript://" onclick="regtree(10934);regtree(18);regtree(10937);changeSign(10933);">+</a>&nbsp;
-                  <input id="225_17_10933_" value="Республика Карелия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10933_">Республика Карелия</label>
-                  <div id="region10934" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10934"></a>
-                    <input id="225_17_10933_10934_" value="Кондопога" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10933_10934_">Кондопога</label>
-                  </div>
-                  <div id="region18" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name18"></a>
-                    <input id="225_17_10933_18_" value="Петрозаводск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10933_18_">Петрозаводск</label>
-                  </div>
-                  <div id="region10937" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10937"></a>
-                    <input id="225_17_10933_10937_" value="Сортавала" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10933_10937_">Сортавала</label>
-                  </div>
-                </div>
-                <div id="region10939" style="display: none;"> <a name="name10939" style="text-decoration: none" id="link10939" href="javascript://" onclick="regtree(10940);regtree(19);regtree(10944);regtree(10945);changeSign(10939);">+</a>&nbsp;
-                  <input id="225_17_10939_" value="Республика Коми" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_17_10939_">Республика Коми</label>
-                  <div id="region10940" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10940"></a>
-                    <input id="225_17_10939_10940_" value="Воркута" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10939_10940_">Воркута</label>
-                  </div>
-                  <div id="region19" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name19"></a>
-                    <input id="225_17_10939_19_" value="Сыктывкар" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10939_19_">Сыктывкар</label>
-                  </div>
-                  <div id="region10944" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10944"></a>
-                    <input id="225_17_10939_10944_" value="Усинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10939_10944_">Усинск</label>
-                  </div>
-                  <div id="region10945" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10945"></a>
-                    <input id="225_17_10939_10945_" value="Ухта" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_17_10939_10945_">Ухта</label>
-                  </div>
-                </div>
-              </div>
-              <div id="region40" style="display: none; "> <a name="name40" style="text-decoration: none" id="link40" href="javascript://" onclick="regtree(11070);regtree(11079);regtree(11084);regtree(11095);regtree(11108);regtree(11111);regtree(11077);regtree(11117);regtree(11119);regtree(11131);regtree(11146);regtree(11148);regtree(11153);regtree(11156);changeSign(40);">+</a>&nbsp;
-                <input id="225_40_" value="Поволжье" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_40_">Поволжье</label>
-                <div id="region11070" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11070"></a>
-                  <input id="225_40_11070_" value="Киров и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11070_">Киров и область</label>
-                </div>
-                <div id="region11079" style="display: none;"> <a name="name11079" style="text-decoration: none" id="link11079" href="javascript://" onclick="regtree(20040);regtree(972);regtree(20044);regtree(47);regtree(11083);changeSign(11079);">+</a>&nbsp;
-                  <input id="225_40_11079_" value="Нижний Новгород и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11079_">Нижний Новгород и область</label>
-                  <div id="region20040" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20040"></a>
-                    <input id="225_40_11079_20040_" value="Выкса" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11079_20040_">Выкса</label>
-                  </div>
-                  <div id="region972" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name972"></a>
-                    <input id="225_40_11079_972_" value="Дзержинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11079_972_">Дзержинск</label>
-                  </div>
-                  <div id="region20044" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20044"></a>
-                    <input id="225_40_11079_20044_" value="Кстово" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11079_20044_">Кстово</label>
-                  </div>
-                  <div id="region47" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name47"></a>
-                    <input id="225_40_11079_47_" value="Нижний Новгород" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11079_47_">Нижний Новгород</label>
-                  </div>
-                  <div id="region11083" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11083"></a>
-                    <input id="225_40_11079_11083_" value="Саров" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11079_11083_">Саров</label>
-                  </div>
-                </div>
-                <div id="region11084" style="display: none;"> <a name="name11084" style="text-decoration: none" id="link11084" href="javascript://" onclick="regtree(48);regtree(11091);changeSign(11084);">+</a>&nbsp;
-                  <input id="225_40_11084_" value="Оренбург и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11084_">Оренбург и область</label>
-                  <div id="region48" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name48"></a>
-                    <input id="225_40_11084_48_" value="Оренбург" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11084_48_">Оренбург</label>
-                  </div>
-                  <div id="region11091" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11091"></a>
-                    <input id="225_40_11084_11091_" value="Орск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11084_11091_">Орск</label>
-                  </div>
-                </div>
-                <div id="region11095" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11095"></a>
-                  <input id="225_40_11095_" value="Пенза и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11095_">Пенза и область</label>
-                </div>
-                <div id="region11108" style="display: none;"> <a name="name11108" style="text-decoration: none" id="link11108" href="javascript://" onclick="regtree(20237);regtree(50);changeSign(11108);">+</a>&nbsp;
-                  <input id="225_40_11108_" value="Пермский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11108_">Пермский край</label>
-                  <div id="region20237" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20237"></a>
-                    <input id="225_40_11108_20237_" value="Березники" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11108_20237_">Березники</label>
-                  </div>
-                  <div id="region50" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name50"></a>
-                    <input id="225_40_11108_50_" value="Пермь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11108_50_">Пермь</label>
-                  </div>
-                </div>
-                <div id="region11111" style="display: none;"> <a name="name11111" style="text-decoration: none" id="link11111" href="javascript://" onclick="regtree(11114);regtree(20235);regtree(11115);regtree(11116);regtree(172);changeSign(11111);">+</a>&nbsp;
-                  <input id="225_40_11111_" value="Республика Башкортостан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11111_">Республика Башкортостан</label>
-                  <div id="region11114" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11114"></a>
-                    <input id="225_40_11111_11114_" value="Нефтекамск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11111_11114_">Нефтекамск</label>
-                  </div>
-                  <div id="region20235" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20235"></a>
-                    <input id="225_40_11111_20235_" value="Октябрьский" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11111_20235_">Октябрьский</label>
-                  </div>
-                  <div id="region11115" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11115"></a>
-                    <input id="225_40_11111_11115_" value="Салават" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11111_11115_">Салават</label>
-                  </div>
-                  <div id="region11116" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11116"></a>
-                    <input id="225_40_11111_11116_" value="Стерлитамак" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11111_11116_">Стерлитамак</label>
-                  </div>
-                  <div id="region172" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name172"></a>
-                    <input id="225_40_11111_172_" value="Уфа" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11111_172_">Уфа</label>
-                  </div>
-                </div>
-                <div id="region11077" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11077"></a>
-                  <input id="225_40_11077_" value="Республика Марий Эл" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11077_">Республика Марий Эл</label>
-                </div>
-                <div id="region11117" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11117"></a>
-                  <input id="225_40_11117_" value="Республика Мордовия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11117_">Республика Мордовия</label>
-                </div>
-                <div id="region11119" style="display: none;"> <a name="name11119" style="text-decoration: none" id="link11119" href="javascript://" onclick="regtree(11121);regtree(11122);regtree(43);regtree(236);regtree(11127);changeSign(11119);">+</a>&nbsp;
-                  <input id="225_40_11119_" value="Республика Татарстан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11119_">Республика Татарстан</label>
-                  <div id="region11121" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11121"></a>
-                    <input id="225_40_11119_11121_" value="Альметьевск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11119_11121_">Альметьевск</label>
-                  </div>
-                  <div id="region11122" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11122"></a>
-                    <input id="225_40_11119_11122_" value="Бугульма" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11119_11122_">Бугульма</label>
-                  </div>
-                  <div id="region43" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name43"></a>
-                    <input id="225_40_11119_43_" value="Казань" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11119_43_">Казань</label>
-                  </div>
-                  <div id="region236" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name236"></a>
-                    <input id="225_40_11119_236_" value="Набережные Челны" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11119_236_">Набережные Челны</label>
-                  </div>
-                  <div id="region11127" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11127"></a>
-                    <input id="225_40_11119_11127_" value="Нижнекамск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11119_11127_">Нижнекамск</label>
-                  </div>
-                </div>
-                <div id="region11131" style="display: none;"> <a name="name11131" style="text-decoration: none" id="link11131" href="javascript://" onclick="regtree(11132);regtree(51);regtree(11139);regtree(240);changeSign(11131);">+</a>&nbsp;
-                  <input id="225_40_11131_" value="Самара и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11131_">Самара и область</label>
-                  <div id="region11132" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11132"></a>
-                    <input id="225_40_11131_11132_" value="Жигулевск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11131_11132_">Жигулевск</label>
-                  </div>
-                  <div id="region51" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name51"></a>
-                    <input id="225_40_11131_51_" value="Самара" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11131_51_">Самара</label>
-                  </div>
-                  <div id="region11139" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11139"></a>
-                    <input id="225_40_11131_11139_" value="Сызрань" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11131_11139_">Сызрань</label>
-                  </div>
-                  <div id="region240" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name240"></a>
-                    <input id="225_40_11131_240_" value="Тольятти" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11131_240_">Тольятти</label>
-                  </div>
-                </div>
-                <div id="region11146" style="display: none;"> <a name="name11146" style="text-decoration: none" id="link11146" href="javascript://" onclick="regtree(11143);regtree(194);regtree(11147);changeSign(11146);">+</a>&nbsp;
-                  <input id="225_40_11146_" value="Саратов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11146_">Саратов и область</label>
-                  <div id="region11143" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11143"></a>
-                    <input id="225_40_11146_11143_" value="Балаково" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11146_11143_">Балаково</label>
-                  </div>
-                  <div id="region194" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name194"></a>
-                    <input id="225_40_11146_194_" value="Саратов" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11146_194_">Саратов</label>
-                  </div>
-                  <div id="region11147" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11147"></a>
-                    <input id="225_40_11146_11147_" value="Энгельс" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11146_11147_">Энгельс</label>
-                  </div>
-                </div>
-                <div id="region11148" style="display: none;"> <a name="name11148" style="text-decoration: none" id="link11148" href="javascript://" onclick="regtree(11150);regtree(44);regtree(11152);changeSign(11148);">+</a>&nbsp;
-                  <input id="225_40_11148_" value="Удмуртская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11148_">Удмуртская Республика</label>
-                  <div id="region11150" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11150"></a>
-                    <input id="225_40_11148_11150_" value="Глазов" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11148_11150_">Глазов</label>
-                  </div>
-                  <div id="region44" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name44"></a>
-                    <input id="225_40_11148_44_" value="Ижевск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11148_44_">Ижевск</label>
-                  </div>
-                  <div id="region11152" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11152"></a>
-                    <input id="225_40_11148_11152_" value="Сарапул" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11148_11152_">Сарапул</label>
-                  </div>
-                </div>
-                <div id="region11153" style="display: none;"> <a name="name11153" style="text-decoration: none" id="link11153" href="javascript://" onclick="regtree(11155);regtree(195);changeSign(11153);">+</a>&nbsp;
-                  <input id="225_40_11153_" value="Ульяновск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11153_">Ульяновск и область</label>
-                  <div id="region11155" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11155"></a>
-                    <input id="225_40_11153_11155_" value="Димитровград" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11153_11155_">Димитровград</label>
-                  </div>
-                  <div id="region195" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name195"></a>
-                    <input id="225_40_11153_195_" value="Ульяновск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11153_195_">Ульяновск</label>
-                  </div>
-                </div>
-                <div id="region11156" style="display: none;"> <a name="name11156" style="text-decoration: none" id="link11156" href="javascript://" onclick="regtree(37133);regtree(45);changeSign(11156);">+</a>&nbsp;
-                  <input id="225_40_11156_" value="Чувашская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_40_11156_">Чувашская Республика</label>
-                  <div id="region37133" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name37133"></a>
-                    <input id="225_40_11156_37133_" value="Новочебоксарск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11156_37133_">Новочебоксарск</label>
-                  </div>
-                  <div id="region45" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name45"></a>
-                    <input id="225_40_11156_45_" value="Чебоксары" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_40_11156_45_">Чебоксары</label>
-                  </div>
-                </div>
-              </div>
-              <div id="region26" style="display: none; "> <a name="name26" style="text-decoration: none" id="link26" href="javascript://" onclick="regtree(10946);regtree(10950);regtree(10995);regtree(11004);regtree(11015);regtree(11029);changeSign(26);">+</a>&nbsp;
-                <input id="225_26_" value="Юг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_26_">Юг</label>
-                <div id="region10946" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10946"></a>
-                  <input id="225_26_10946_" value="Астрахань и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_10946_">Астрахань и область</label>
-                </div>
-                <div id="region10950" style="display: none;"> <a name="name10950" style="text-decoration: none" id="link10950" href="javascript://" onclick="regtree(38);regtree(10951);regtree(10959);changeSign(10950);">+</a>&nbsp;
-                  <input id="225_26_10950_" value="Волгоград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_10950_">Волгоград и область</label>
-                  <div id="region38" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name38"></a>
-                    <input id="225_26_10950_38_" value="Волгоград" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10950_38_">Волгоград</label>
-                  </div>
-                  <div id="region10951" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10951"></a>
-                    <input id="225_26_10950_10951_" value="Волжский" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10950_10951_">Волжский</label>
-                  </div>
-                  <div id="region10959" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10959"></a>
-                    <input id="225_26_10950_10959_" value="Камышин" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10950_10959_">Камышин</label>
-                  </div>
-                </div>
-                <div id="region10995" style="display: none;"> <a name="name10995" style="text-decoration: none" id="link10995" href="javascript://" onclick="regtree(1107);regtree(10987);regtree(10993);regtree(35);regtree(970);regtree(239);regtree(1058);changeSign(10995);">+</a>&nbsp;
-                  <input id="225_26_10995_" value="Краснодарский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_10995_">Краснодарский край</label>
-                  <div id="region1107" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name1107"></a>
-                    <input id="225_26_10995_1107_" value="Анапа" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_1107_">Анапа</label>
-                  </div>
-                  <div id="region10987" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10987"></a>
-                    <input id="225_26_10995_10987_" value="Армавир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_10987_">Армавир</label>
-                  </div>
-                  <div id="region10993" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10993"></a>
-                    <input id="225_26_10995_10993_" value="Ейск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_10993_">Ейск</label>
-                  </div>
-                  <div id="region35" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name35"></a>
-                    <input id="225_26_10995_35_" value="Краснодар" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_35_">Краснодар</label>
-                  </div>
-                  <div id="region970" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name970"></a>
-                    <input id="225_26_10995_970_" value="Новороссийск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_970_">Новороссийск</label>
-                  </div>
-                  <div id="region239" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name239"></a>
-                    <input id="225_26_10995_239_" value="Сочи" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_239_">Сочи</label>
-                  </div>
-                  <div id="region1058" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name1058"></a>
-                    <input id="225_26_10995_1058_" value="Туапсе" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_10995_1058_">Туапсе</label>
-                  </div>
-                </div>
-                <div id="region11004" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11004"></a>
-                  <input id="225_26_11004_" value="Республика Адыгея" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_11004_">Республика Адыгея</label>
-                </div>
-                <div id="region11015" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11015"></a>
-                  <input id="225_26_11015_" value="Республика Калмыкия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_11015_">Республика Калмыкия</label>
-                </div>
-                <div id="region11029" style="display: none;"> <a name="name11029" style="text-decoration: none" id="link11029" href="javascript://" onclick="regtree(11036);regtree(11043);regtree(238);regtree(39);regtree(971);regtree(11053);changeSign(11029);">+</a>&nbsp;
-                  <input id="225_26_11029_" value="Ростов-на-Дону и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_26_11029_">Ростов-на-Дону и область</label>
-                  <div id="region11036" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11036"></a>
-                    <input id="225_26_11029_11036_" value="Волгодонск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_11036_">Волгодонск</label>
-                  </div>
-                  <div id="region11043" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11043"></a>
-                    <input id="225_26_11029_11043_" value="Каменск-Шахтинский" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_11043_">Каменск-Шахтинский</label>
-                  </div>
-                  <div id="region238" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name238"></a>
-                    <input id="225_26_11029_238_" value="Новочеркасск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_238_">Новочеркасск</label>
-                  </div>
-                  <div id="region39" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name39"></a>
-                    <input id="225_26_11029_39_" value="Ростов-на-Дону" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_39_">Ростов-на-Дону</label>
-                  </div>
-                  <div id="region971" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name971"></a>
-                    <input id="225_26_11029_971_" value="Таганрог" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_971_">Таганрог</label>
-                  </div>
-                  <div id="region11053" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11053"></a>
-                    <input id="225_26_11029_11053_" value="Шахты" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_26_11029_11053_">Шахты</label>
-                  </div>
-                </div>
-              </div>
-              <div id="region59" style="display: none; "> <a name="name59" style="text-decoration: none" id="link59" href="javascript://" onclick="regtree(11235);regtree(21949);regtree(11266);regtree(11282);regtree(11309);regtree(11316);regtree(11318);regtree(10231);regtree(11330);regtree(10233);regtree(11340);regtree(11353);changeSign(59);">+</a>&nbsp;
-                <input id="225_59_" value="Сибирь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_59_">Сибирь</label>
-                <div id="region11235" style="display: none;"> <a name="name11235" style="text-decoration: none" id="link11235" href="javascript://" onclick="regtree(197);regtree(975);changeSign(11235);">+</a>&nbsp;
-                  <input id="225_59_11235_" value="Алтайский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11235_">Алтайский край</label>
-                  <div id="region197" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name197"></a>
-                    <input id="225_59_11235_197_" value="Барнаул" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11235_197_">Барнаул</label>
-                  </div>
-                  <div id="region975" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name975"></a>
-                    <input id="225_59_11235_975_" value="Бийск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11235_975_">Бийск</label>
-                  </div>
-                </div>
-                <div id="region21949" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name21949"></a>
-                  <input id="225_59_21949_" value="Забайкальский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_21949_">Забайкальский край</label>
-                </div>
-                <div id="region11266" style="display: none;"> <a name="name11266" style="text-decoration: none" id="link11266" href="javascript://" onclick="regtree(11256);regtree(976);regtree(63);regtree(11273);changeSign(11266);">+</a>&nbsp;
-                  <input id="225_59_11266_" value="Иркутск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11266_">Иркутск и область</label>
-                  <div id="region11256" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11256"></a>
-                    <input id="225_59_11266_11256_" value="Ангарск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11266_11256_">Ангарск</label>
-                  </div>
-                  <div id="region976" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name976"></a>
-                    <input id="225_59_11266_976_" value="Братск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11266_976_">Братск</label>
-                  </div>
-                  <div id="region63" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name63"></a>
-                    <input id="225_59_11266_63_" value="Иркутск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11266_63_">Иркутск</label>
-                  </div>
-                  <div id="region11273" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11273"></a>
-                    <input id="225_59_11266_11273_" value="Усть-Илимск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11266_11273_">Усть-Илимск</label>
-                  </div>
-                </div>
-                <div id="region11282" style="display: none;"> <a name="name11282" style="text-decoration: none" id="link11282" href="javascript://" onclick="regtree(64);regtree(11287);regtree(237);changeSign(11282);">+</a>&nbsp;
-                  <input id="225_59_11282_" value="Кемерово и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11282_">Кемерово и область</label>
-                  <div id="region64" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name64"></a>
-                    <input id="225_59_11282_64_" value="Кемерово" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11282_64_">Кемерово</label>
-                  </div>
-                  <div id="region11287" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11287"></a>
-                    <input id="225_59_11282_11287_" value="Междуреченск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11282_11287_">Междуреченск</label>
-                  </div>
-                  <div id="region237" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name237"></a>
-                    <input id="225_59_11282_237_" value="Новокузнецк" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11282_237_">Новокузнецк</label>
-                  </div>
-                </div>
-                <div id="region11309" style="display: none;"> <a name="name11309" style="text-decoration: none" id="link11309" href="javascript://" onclick="regtree(11302);regtree(20086);regtree(62);regtree(11310);regtree(11311);changeSign(11309);">+</a>&nbsp;
-                  <input id="225_59_11309_" value="Красноярский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11309_">Красноярский край</label>
-                  <div id="region11302" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11302"></a>
-                    <input id="225_59_11309_11302_" value="Ачинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11309_11302_">Ачинск</label>
-                  </div>
-                  <div id="region20086" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20086"></a>
-                    <input id="225_59_11309_20086_" value="Железногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11309_20086_">Железногорск</label>
-                  </div>
-                  <div id="region62" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name62"></a>
-                    <input id="225_59_11309_62_" value="Красноярск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11309_62_">Красноярск</label>
-                  </div>
-                  <div id="region11310" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11310"></a>
-                    <input id="225_59_11309_11310_" value="Минусинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11309_11310_">Минусинск</label>
-                  </div>
-                  <div id="region11311" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11311"></a>
-                    <input id="225_59_11309_11311_" value="Норильск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11309_11311_">Норильск</label>
-                  </div>
-                </div>
-                <div id="region11316" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11316"></a>
-                  <input id="225_59_11316_" value="Новосибирск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11316_">Новосибирск и область</label>
-                </div>
-                <div id="region11318" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11318"></a>
-                  <input id="225_59_11318_" value="Омск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11318_">Омск и область</label>
-                </div>
-                <div id="region10231" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10231"></a>
-                  <input id="225_59_10231_" value="Республика Алтай" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_10231_">Республика Алтай</label>
-                </div>
-                <div id="region11330" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11330"></a>
-                  <input id="225_59_11330_" value="Республика Бурятия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11330_">Республика Бурятия</label>
-                </div>
-                <div id="region10233" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10233"></a>
-                  <input id="225_59_10233_" value="Республика Тыва" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_10233_">Республика Тыва</label>
-                </div>
-                <div id="region11340" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11340"></a>
-                  <input id="225_59_11340_" value="Республика Хакасия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11340_">Республика Хакасия</label>
-                </div>
-                <div id="region11353" style="display: none;"> <a name="name11353" style="text-decoration: none" id="link11353" href="javascript://" onclick="regtree(11351);regtree(67);changeSign(11353);">+</a>&nbsp;
-                  <input id="225_59_11353_" value="Томск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_59_11353_">Томск и область</label>
-                  <div id="region11351" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11351"></a>
-                    <input id="225_59_11353_11351_" value="Северск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11353_11351_">Северск</label>
-                  </div>
-                  <div id="region67" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name67"></a>
-                    <input id="225_59_11353_67_" value="Томск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_59_11353_67_">Томск</label>
-                  </div>
-                </div>
-              </div>
-              <div id="region73" style="display: none; "> <a name="name73" style="text-decoration: none" id="link73" href="javascript://" onclick="regtree(11375);regtree(10243);regtree(11398);regtree(11403);regtree(11409);regtree(11443);regtree(11457);regtree(10251);regtree(11450);changeSign(73);">+</a>&nbsp;
-                <input id="225_73_" value="Дальний Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_73_">Дальний Восток</label>
-                <div id="region11375" style="display: none;"> <a name="name11375" style="text-decoration: none" id="link11375" href="javascript://" onclick="regtree(11374);regtree(77);regtree(11391);changeSign(11375);">+</a>&nbsp;
-                  <input id="225_73_11375_" value="Благовещенск и Амурская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11375_">Благовещенск и Амурская область</label>
-                  <div id="region11374" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11374"></a>
-                    <input id="225_73_11375_11374_" value="Белогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11375_11374_">Белогорск</label>
-                  </div>
-                  <div id="region77" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name77"></a>
-                    <input id="225_73_11375_77_" value="Благовещенск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11375_77_">Благовещенск</label>
-                  </div>
-                  <div id="region11391" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11391"></a>
-                    <input id="225_73_11375_11391_" value="Тында" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11375_11391_">Тында</label>
-                  </div>
-                </div>
-                <div id="region10243" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10243"></a>
-                  <input id="225_73_10243_" value="Еврейская автономная область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_10243_">Еврейская автономная область</label>
-                </div>
-                <div id="region11398" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11398"></a>
-                  <input id="225_73_11398_" value="Камчатский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11398_">Камчатский край</label>
-                </div>
-                <div id="region11403" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11403"></a>
-                  <input id="225_73_11403_" value="Магадан и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11403_">Магадан и область</label>
-                </div>
-                <div id="region11409" style="display: none;"> <a name="name11409" style="text-decoration: none" id="link11409" href="javascript://" onclick="regtree(75);regtree(974);regtree(11426);changeSign(11409);">+</a>&nbsp;
-                  <input id="225_73_11409_" value="Приморский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11409_">Приморский край</label>
-                  <div id="region75" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name75"></a>
-                    <input id="225_73_11409_75_" value="Владивосток" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11409_75_">Владивосток</label>
-                  </div>
-                  <div id="region974" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name974"></a>
-                    <input id="225_73_11409_974_" value="Находка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11409_974_">Находка</label>
-                  </div>
-                  <div id="region11426" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11426"></a>
-                    <input id="225_73_11409_11426_" value="Уссурийск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11409_11426_">Уссурийск</label>
-                  </div>
-                </div>
-                <div id="region11443" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11443"></a>
-                  <input id="225_73_11443_" value="Республика Саха (Якутия)" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11443_">Республика Саха (Якутия)</label>
-                </div>
-                <div id="region11457" style="display: none;"> <a name="name11457" style="text-decoration: none" id="link11457" href="javascript://" onclick="regtree(11453);regtree(76);changeSign(11457);">+</a>&nbsp;
-                  <input id="225_73_11457_" value="Хабаровский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11457_">Хабаровский край</label>
-                  <div id="region11453" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11453"></a>
-                    <input id="225_73_11457_11453_" value="Комсомольск-на-Амуре" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11457_11453_">Комсомольск-на-Амуре</label>
-                  </div>
-                  <div id="region76" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name76"></a>
-                    <input id="225_73_11457_76_" value="Хабаровск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_73_11457_76_">Хабаровск</label>
-                  </div>
-                </div>
-                <div id="region10251" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name10251"></a>
-                  <input id="225_73_10251_" value="Чукотский автономный округ" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_10251_">Чукотский автономный округ</label>
-                </div>
-                <div id="region11450" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11450"></a>
-                  <input id="225_73_11450_" value="Южно-Сахалинск и Сахалинская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_73_11450_">Южно-Сахалинск и Сахалинская область</label>
-                </div>
-              </div>
-              <div id="region102444" style="display: none; "> <a name="name102444" style="text-decoration: none" id="link102444" href="javascript://" onclick="regtree(11020);regtree(11010);regtree(11012);regtree(11013);regtree(11021);regtree(11069);regtree(11024);changeSign(102444);">+</a>&nbsp;
-                <input id="225_102444_" value="Северный Кавказ" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_102444_">Северный Кавказ</label>
-                <div id="region11020" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11020"></a>
-                  <input id="225_102444_11020_" value="Карачаево-Черкесская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11020_">Карачаево-Черкесская Республика</label>
-                </div>
-                <div id="region11010" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11010"></a>
-                  <input id="225_102444_11010_" value="Республика Дагестан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11010_">Республика Дагестан</label>
-                </div>
-                <div id="region11012" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11012"></a>
-                  <input id="225_102444_11012_" value="Республика Ингушетия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11012_">Республика Ингушетия</label>
-                </div>
-                <div id="region11013" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11013"></a>
-                  <input id="225_102444_11013_" value="Республика Кабардино-Балкария" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11013_">Республика Кабардино-Балкария</label>
-                </div>
-                <div id="region11021" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11021"></a>
-                  <input id="225_102444_11021_" value="Республика Северная Осетия-Алания" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11021_">Республика Северная Осетия-Алания</label>
-                </div>
-                <div id="region11069" style="display: none;"> <a name="name11069" style="text-decoration: none" id="link11069" href="javascript://" onclick="regtree(11057);regtree(11062);regtree(11063);regtree(11064);regtree(11067);regtree(36);changeSign(11069);">+</a>&nbsp;
-                  <input id="225_102444_11069_" value="Ставропольский край" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11069_">Ставропольский край</label>
-                  <div id="region11057" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11057"></a>
-                    <input id="225_102444_11069_11057_" value="Ессентуки" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_11057_">Ессентуки</label>
-                  </div>
-                  <div id="region11062" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11062"></a>
-                    <input id="225_102444_11069_11062_" value="Кисловодск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_11062_">Кисловодск</label>
-                  </div>
-                  <div id="region11063" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11063"></a>
-                    <input id="225_102444_11069_11063_" value="Минеральные Воды" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_11063_">Минеральные Воды</label>
-                  </div>
-                  <div id="region11064" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11064"></a>
-                    <input id="225_102444_11069_11064_" value="Невинномысск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_11064_">Невинномысск</label>
-                  </div>
-                  <div id="region11067" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11067"></a>
-                    <input id="225_102444_11069_11067_" value="Пятигорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_11067_">Пятигорск</label>
-                  </div>
-                  <div id="region36" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name36"></a>
-                    <input id="225_102444_11069_36_" value="Ставрополь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_102444_11069_36_">Ставрополь</label>
-                  </div>
-                </div>
-                <div id="region11024" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11024"></a>
-                  <input id="225_102444_11024_" value="Чеченская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_102444_11024_">Чеченская Республика</label>
-                </div>
-              </div>
-              <div id="region52" style="display: none; "> <a name="name52" style="text-decoration: none" id="link52" href="javascript://" onclick="regtree(11162);regtree(11158);regtree(11176);regtree(11193);regtree(11225);regtree(11232);changeSign(52);">+</a>&nbsp;
-                <input id="225_52_" value="Урал" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="225_52_">Урал</label>
-                <div id="region11162" style="display: none;"> <a name="name11162" style="text-decoration: none" id="link11162" href="javascript://" onclick="regtree(54);regtree(11164);regtree(11168);regtree(11171);changeSign(11162);">+</a>&nbsp;
-                  <input id="225_52_11162_" value="Екатеринбург и Свердловская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11162_">Екатеринбург и Свердловская область</label>
-                  <div id="region54" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name54"></a>
-                    <input id="225_52_11162_54_" value="Екатеринбург" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11162_54_">Екатеринбург</label>
-                  </div>
-                  <div id="region11164" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11164"></a>
-                    <input id="225_52_11162_11164_" value="Каменск-Уральский" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11162_11164_">Каменск-Уральский</label>
-                  </div>
-                  <div id="region11168" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11168"></a>
-                    <input id="225_52_11162_11168_" value="Нижний Тагил" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11162_11168_">Нижний Тагил</label>
-                  </div>
-                  <div id="region11171" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11171"></a>
-                    <input id="225_52_11162_11171_" value="Первоуральск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11162_11171_">Первоуральск</label>
-                  </div>
-                </div>
-                <div id="region11158" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name11158"></a>
-                  <input id="225_52_11158_" value="Курган и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11158_">Курган и область</label>
-                </div>
-                <div id="region11176" style="display: none;"> <a name="name11176" style="text-decoration: none" id="link11176" href="javascript://" onclick="regtree(11173);regtree(11175);regtree(55);changeSign(11176);">+</a>&nbsp;
-                  <input id="225_52_11176_" value="Тюмень и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11176_">Тюмень и область</label>
-                  <div id="region11173" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11173"></a>
-                    <input id="225_52_11176_11173_" value="Ишим" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11176_11173_">Ишим</label>
-                  </div>
-                  <div id="region11175" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11175"></a>
-                    <input id="225_52_11176_11175_" value="Тобольск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11176_11175_">Тобольск</label>
-                  </div>
-                  <div id="region55" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name55"></a>
-                    <input id="225_52_11176_55_" value="Тюмень" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11176_55_">Тюмень</label>
-                  </div>
-                </div>
-                <div id="region11193" style="display: none;"> <a name="name11193" style="text-decoration: none" id="link11193" href="javascript://" onclick="regtree(11184);regtree(1091);regtree(973);regtree(57);changeSign(11193);">+</a>&nbsp;
-                  <input id="225_52_11193_" value="Ханты-Мансийский АО" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11193_">Ханты-Мансийский АО</label>
-                  <div id="region11184" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11184"></a>
-                    <input id="225_52_11193_11184_" value="Нефтеюганск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11193_11184_">Нефтеюганск</label>
-                  </div>
-                  <div id="region1091" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name1091"></a>
-                    <input id="225_52_11193_1091_" value="Нижневартовск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11193_1091_">Нижневартовск</label>
-                  </div>
-                  <div id="region973" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name973"></a>
-                    <input id="225_52_11193_973_" value="Сургут" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11193_973_">Сургут</label>
-                  </div>
-                  <div id="region57" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name57"></a>
-                    <input id="225_52_11193_57_" value="Ханты-Мансийск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11193_57_">Ханты-Мансийск</label>
-                  </div>
-                </div>
-                <div id="region11225" style="display: none;"> <a name="name11225" style="text-decoration: none" id="link11225" href="javascript://" onclick="regtree(235);regtree(11212);regtree(11214);regtree(11217);regtree(56);changeSign(11225);">+</a>&nbsp;
-                  <input id="225_52_11225_" value="Челябинск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11225_">Челябинск и область</label>
-                  <div id="region235" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name235"></a>
-                    <input id="225_52_11225_235_" value="Магнитогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11225_235_">Магнитогорск</label>
-                  </div>
-                  <div id="region11212" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11212"></a>
-                    <input id="225_52_11225_11212_" value="Миасс" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11225_11212_">Миасс</label>
-                  </div>
-                  <div id="region11214" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11214"></a>
-                    <input id="225_52_11225_11214_" value="Озерск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11225_11214_">Озерск</label>
-                  </div>
-                  <div id="region11217" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11217"></a>
-                    <input id="225_52_11225_11217_" value="Сатка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11225_11217_">Сатка</label>
-                  </div>
-                  <div id="region56" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name56"></a>
-                    <input id="225_52_11225_56_" value="Челябинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11225_56_">Челябинск</label>
-                  </div>
-                </div>
-                <div id="region11232" style="display: none;"> <a name="name11232" style="text-decoration: none" id="link11232" href="javascript://" onclick="regtree(11230);regtree(11231);regtree(58);changeSign(11232);">+</a>&nbsp;
-                  <input id="225_52_11232_" value="Ямало-Ненецкий АО" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="225_52_11232_">Ямало-Ненецкий АО</label>
-                  <div id="region11230" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11230"></a>
-                    <input id="225_52_11232_11230_" value="Новый Уренгой" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11232_11230_">Новый Уренгой</label>
-                  </div>
-                  <div id="region11231" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11231"></a>
-                    <input id="225_52_11232_11231_" value="Ноябрьск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11232_11231_">Ноябрьск</label>
-                  </div>
-                  <div id="region58" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name58"></a>
-                    <input id="225_52_11232_58_" value="Салехард" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="225_52_11232_58_">Салехард</label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div id="region166" style="display: block;"> <a name="name166" style="text-decoration: none" id="link166" href="javascript://" onclick="regtree(29386);regtree(167);regtree(168);regtree(149);regtree(159);regtree(207);regtree(208);regtree(209);regtree(170);regtree(171);regtree(187);changeSign(166);">+</a>&nbsp;
-              <input id="166_" value="СНГ (исключая Россию)" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="166_">СНГ (исключая Россию)</label>
-              <div id="region29386" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name29386"></a>
-                <input id="166_29386_" value="Абхазия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_29386_">Абхазия</label>
-              </div>
-              <div id="region167" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name167"></a>
-                <input id="166_167_" value="Азербайджан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_167_">Азербайджан</label>
-              </div>
-              <div id="region168" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name168"></a>
-                <input id="166_168_" value="Армения" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_168_">Армения</label>
-              </div>
-              <div id="region149" style="display: none;"> <a name="name149" style="text-decoration: none" id="link149" href="javascript://" onclick="regtree(29632);regtree(29633);regtree(29631);regtree(29634);regtree(29630);regtree(29629);changeSign(149);">+</a>&nbsp;
-                <input id="166_149_" value="Беларусь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_149_">Беларусь</label>
-                <div id="region29632" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29632"></a>
-                  <input id="166_149_29632_" value="Брест и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29632_">Брест и область</label>
-                </div>
-                <div id="region29633" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29633"></a>
-                  <input id="166_149_29633_" value="Витебск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29633_">Витебск и область</label>
-                </div>
-                <div id="region29631" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29631"></a>
-                  <input id="166_149_29631_" value="Гомель и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29631_">Гомель и область</label>
-                </div>
-                <div id="region29634" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29634"></a>
-                  <input id="166_149_29634_" value="Гродно и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29634_">Гродно и область</label>
-                </div>
-                <div id="region29630" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29630"></a>
-                  <input id="166_149_29630_" value="Минск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29630_">Минск и область</label>
-                </div>
-                <div id="region29629" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29629"></a>
-                  <input id="166_149_29629_" value="Могилёв и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_149_29629_">Могилёв и область</label>
-                </div>
-              </div>
-              <div id="region159" style="display: none;"> <a name="name159" style="text-decoration: none" id="link159" href="javascript://" onclick="regtree(29414);regtree(29404);regtree(29406);regtree(29403);regtree(29407);regtree(29408);regtree(29410);regtree(29411);regtree(29412);regtree(29413);regtree(29415);regtree(29416);regtree(29409);regtree(29417);changeSign(159);">+</a>&nbsp;
-                <input id="166_159_" value="Казахстан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_159_">Казахстан</label>
-                <div id="region29414" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29414"></a>
-                  <input id="166_159_29414_" value="Актау и Мангистауская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29414_">Актау и Мангистауская область</label>
-                </div>
-                <div id="region29404" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29404"></a>
-                  <input id="166_159_29404_" value="Актобе и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29404_">Актобе и область</label>
-                </div>
-                <div id="region29406" style="display: none;"> <a name="name29406" style="text-decoration: none" id="link29406" href="javascript://" onclick="regtree(162);regtree(10303);changeSign(29406);">+</a>&nbsp;
-                  <input id="166_159_29406_" value="Алматы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29406_">Алматы и область</label>
-                  <div id="region162" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name162"></a>
-                    <input id="166_159_29406_162_" value="Алматы" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29406_162_">Алматы</label>
-                  </div>
-                  <div id="region10303" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10303"></a>
-                    <input id="166_159_29406_10303_" value="Талдыкорган" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29406_10303_">Талдыкорган</label>
-                  </div>
-                </div>
-                <div id="region29403" style="display: none;"> <a name="name29403" style="text-decoration: none" id="link29403" href="javascript://" onclick="regtree(163);regtree(20809);changeSign(29403);">+</a>&nbsp;
-                  <input id="166_159_29403_" value="Астана и Акмолинская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29403_">Астана и Акмолинская область</label>
-                  <div id="region163" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name163"></a>
-                    <input id="166_159_29403_163_" value="Астана" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29403_163_">Астана</label>
-                  </div>
-                  <div id="region20809" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20809"></a>
-                    <input id="166_159_29403_20809_" value="Кокшетау" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29403_20809_">Кокшетау</label>
-                  </div>
-                </div>
-                <div id="region29407" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29407"></a>
-                  <input id="166_159_29407_" value="Атырау и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29407_">Атырау и область</label>
-                </div>
-                <div id="region29408" style="display: none;"> <a name="name29408" style="text-decoration: none" id="link29408" href="javascript://" onclick="regtree(165);regtree(10306);changeSign(29408);">+</a>&nbsp;
-                  <input id="166_159_29408_" value="Восточно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29408_">Восточно-Казахстанская область</label>
-                  <div id="region165" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name165"></a>
-                    <input id="166_159_29408_165_" value="Семей" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29408_165_">Семей</label>
-                  </div>
-                  <div id="region10306" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name10306"></a>
-                    <input id="166_159_29408_10306_" value="Усть-Каменогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_159_29408_10306_">Усть-Каменогорск</label>
-                  </div>
-                </div>
-                <div id="region29410" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29410"></a>
-                  <input id="166_159_29410_" value="Западно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29410_">Западно-Казахстанская область</label>
-                </div>
-                <div id="region29411" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29411"></a>
-                  <input id="166_159_29411_" value="Караганда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29411_">Караганда и область</label>
-                </div>
-                <div id="region29412" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29412"></a>
-                  <input id="166_159_29412_" value="Костанай и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29412_">Костанай и область</label>
-                </div>
-                <div id="region29413" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29413"></a>
-                  <input id="166_159_29413_" value="Кызылорда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29413_">Кызылорда и область</label>
-                </div>
-                <div id="region29415" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29415"></a>
-                  <input id="166_159_29415_" value="Павлодар и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29415_">Павлодар и область</label>
-                </div>
-                <div id="region29416" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29416"></a>
-                  <input id="166_159_29416_" value="Северо-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29416_">Северо-Казахстанская область</label>
-                </div>
-                <div id="region29409" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29409"></a>
-                  <input id="166_159_29409_" value="Тараз и Жамбылская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29409_">Тараз и Жамбылская область</label>
-                </div>
-                <div id="region29417" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name29417"></a>
-                  <input id="166_159_29417_" value="Южно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_159_29417_">Южно-Казахстанская область</label>
-                </div>
-              </div>
-              <div id="region207" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name207"></a>
-                <input id="166_207_" value="Киргизия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_207_">Киргизия</label>
-              </div>
-              <div id="region208" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name208"></a>
-                <input id="166_208_" value="Молдова" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_208_">Молдова</label>
-              </div>
-              <div id="region209" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name209"></a>
-                <input id="166_209_" value="Таджикистан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_209_">Таджикистан</label>
-              </div>
-              <div id="region170" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name170"></a>
-                <input id="166_170_" value="Туркмения" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_170_">Туркмения</label>
-              </div>
-              <div id="region171" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name171"></a>
-                <input id="166_171_" value="Узбекистан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_171_">Узбекистан</label>
-              </div>
-              <div id="region187" style="display: none;"> <a name="name187" style="text-decoration: none" id="link187" href="javascript://" onclick="regtree(20525);regtree(20524);regtree(977);regtree(20528);regtree(20527);regtree(20526);changeSign(187);">+</a>&nbsp;
-                <input id="166_187_" value="Украина" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="166_187_">Украина</label>
-                <div id="region20525" style="display: none;"> <a name="name20525" style="text-decoration: none" id="link20525" href="javascript://" onclick="regtree(20537);regtree(20536);regtree(20539);regtree(20540);regtree(20538);changeSign(20525);">+</a>&nbsp;
-                  <input id="166_187_20525_" value="Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_20525_">Восток</label>
-                  <div id="region20537" style="display: none;"> <a name="name20537" style="text-decoration: none" id="link20537" href="javascript://" onclick="regtree(21775);regtree(141);regtree(10347);regtree(21773);regtree(28401);changeSign(20537);">+</a>&nbsp;
-                    <input id="166_187_20525_20537_" value="Днепропетровск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20525_20537_">Днепропетровск и область</label>
-                    <div id="region21775" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name21775"></a>
-                      <input id="166_187_20525_20537_21775_" value="Днепродзержинск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20537_21775_">Днепродзержинск</label>
-                    </div>
-                    <div id="region141" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name141"></a>
-                      <input id="166_187_20525_20537_141_" value="Днепропетровск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20537_141_">Днепропетровск</label>
-                    </div>
-                    <div id="region10347" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name10347"></a>
-                      <input id="166_187_20525_20537_10347_" value="Кривой Рог" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20537_10347_">Кривой Рог</label>
-                    </div>
-                    <div id="region21773" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name21773"></a>
-                      <input id="166_187_20525_20537_21773_" value="Никополь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20537_21773_">Никополь</label>
-                    </div>
-                    <div id="region28401" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name28401"></a>
-                      <input id="166_187_20525_20537_28401_" value="Павлоград" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20537_28401_">Павлоград</label>
-                    </div>
-                  </div>
-                  <div id="region20536" style="display: none;"> <a name="name20536" style="text-decoration: none" id="link20536" href="javascript://" onclick="regtree(21774);regtree(142);regtree(20554);regtree(24876);regtree(10366);changeSign(20536);">+</a>&nbsp;
-                    <input id="166_187_20525_20536_" value="Донецк и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20525_20536_">Донецк и область</label>
-                    <div id="region21774" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name21774"></a>
-                      <input id="166_187_20525_20536_21774_" value="Горловка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20536_21774_">Горловка</label>
-                    </div>
-                    <div id="region142" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name142"></a>
-                      <input id="166_187_20525_20536_142_" value="Донецк" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20536_142_">Донецк</label>
-                    </div>
-                    <div id="region20554" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name20554"></a>
-                      <input id="166_187_20525_20536_20554_" value="Краматорск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20536_20554_">Краматорск</label>
-                    </div>
-                    <div id="region24876" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name24876"></a>
-                      <input id="166_187_20525_20536_24876_" value="Макеевка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20536_24876_">Макеевка</label>
-                    </div>
-                    <div id="region10366" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name10366"></a>
-                      <input id="166_187_20525_20536_10366_" value="Мариуполь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20536_10366_">Мариуполь</label>
-                    </div>
-                  </div>
-                  <div id="region20539" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20539"></a>
-                    <input id="166_187_20525_20539_" value="Запорожье и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20525_20539_">Запорожье и область</label>
-                  </div>
-                  <div id="region20540" style="display: none;"> <a name="name20540" style="text-decoration: none" id="link20540" href="javascript://" onclick="regtree(24885);regtree(222);regtree(24893);changeSign(20540);">+</a>&nbsp;
-                    <input id="166_187_20525_20540_" value="Луганск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20525_20540_">Луганск и область</label>
-                    <div id="region24885" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name24885"></a>
-                      <input id="166_187_20525_20540_24885_" value="Алчевск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20540_24885_">Алчевск</label>
-                    </div>
-                    <div id="region222" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name222"></a>
-                      <input id="166_187_20525_20540_222_" value="Луганск" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20540_222_">Луганск</label>
-                    </div>
-                    <div id="region24893" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name24893"></a>
-                      <input id="166_187_20525_20540_24893_" value="Северодонецк" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20525_20540_24893_">Северодонецк</label>
-                    </div>
-                  </div>
-                  <div id="region20538" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20538"></a>
-                    <input id="166_187_20525_20538_" value="Харьков и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20525_20538_">Харьков и область</label>
-                  </div>
-                </div>
-                <div id="region20524" style="display: none;"> <a name="name20524" style="text-decoration: none" id="link20524" href="javascript://" onclick="regtree(20532);regtree(20550);regtree(20529);regtree(20534);regtree(20531);regtree(20530);regtree(20535);regtree(20533);changeSign(20524);">+</a>&nbsp;
-                  <input id="166_187_20524_" value="Запад" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_20524_">Запад</label>
-                  <div id="region20532" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20532"></a>
-                    <input id="166_187_20524_20532_" value="Ивано-Франковск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20532_">Ивано-Франковск и область</label>
-                  </div>
-                  <div id="region20550" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20550"></a>
-                    <input id="166_187_20524_20550_" value="Луцк и Волынская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20550_">Луцк и Волынская область</label>
-                  </div>
-                  <div id="region20529" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20529"></a>
-                    <input id="166_187_20524_20529_" value="Львов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20529_">Львов и область</label>
-                  </div>
-                  <div id="region20534" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20534"></a>
-                    <input id="166_187_20524_20534_" value="Ровно и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20534_">Ровно и область</label>
-                  </div>
-                  <div id="region20531" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20531"></a>
-                    <input id="166_187_20524_20531_" value="Тернополь и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20531_">Тернополь и область</label>
-                  </div>
-                  <div id="region20530" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20530"></a>
-                    <input id="166_187_20524_20530_" value="Ужгород и Закарпатская область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20530_">Ужгород и Закарпатская область</label>
-                  </div>
-                  <div id="region20535" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20535"></a>
-                    <input id="166_187_20524_20535_" value="Хмельницкий и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20535_">Хмельницкий и область</label>
-                  </div>
-                  <div id="region20533" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20533"></a>
-                    <input id="166_187_20524_20533_" value="Черновцы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20524_20533_">Черновцы и область</label>
-                  </div>
-                </div>
-                <div id="region977" style="display: none;"> <a name="name977" style="text-decoration: none" id="link977" href="javascript://" onclick="regtree(11463);regtree(11464);regtree(959);regtree(146);regtree(11469);regtree(11470);changeSign(977);">+</a>&nbsp;
-                  <input id="166_187_977_" value="Крым" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_977_">Крым</label>
-                  <div id="region11463" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11463"></a>
-                    <input id="166_187_977_11463_" value="Евпатория" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_11463_">Евпатория</label>
-                  </div>
-                  <div id="region11464" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11464"></a>
-                    <input id="166_187_977_11464_" value="Керчь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_11464_">Керчь</label>
-                  </div>
-                  <div id="region959" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name959"></a>
-                    <input id="166_187_977_959_" value="Севастополь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_959_">Севастополь</label>
-                  </div>
-                  <div id="region146" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name146"></a>
-                    <input id="166_187_977_146_" value="Симферополь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_146_">Симферополь</label>
-                  </div>
-                  <div id="region11469" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11469"></a>
-                    <input id="166_187_977_11469_" value="Феодосия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_11469_">Феодосия</label>
-                  </div>
-                  <div id="region11470" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name11470"></a>
-                    <input id="166_187_977_11470_" value="Ялта" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_977_11470_">Ялта</label>
-                  </div>
-                </div>
-                <div id="region20528" style="display: none;"> <a name="name20528" style="text-decoration: none" id="link20528" href="javascript://" onclick="regtree(20552);regtree(20551);changeSign(20528);">+</a>&nbsp;
-                  <input id="166_187_20528_" value="Север" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_20528_">Север</label>
-                  <div id="region20552" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20552"></a>
-                    <input id="166_187_20528_20552_" value="Сумы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20528_20552_">Сумы и область</label>
-                  </div>
-                  <div id="region20551" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20551"></a>
-                    <input id="166_187_20528_20551_" value="Чернигов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20528_20551_">Чернигов и область</label>
-                  </div>
-                </div>
-                <div id="region20527" style="display: none;"> <a name="name20527" style="text-decoration: none" id="link20527" href="javascript://" onclick="regtree(20545);regtree(20547);regtree(20544);regtree(20548);regtree(20549);regtree(20546);changeSign(20527);">+</a>&nbsp;
-                  <input id="166_187_20527_" value="Центр" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_20527_">Центр</label>
-                  <div id="region20545" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20545"></a>
-                    <input id="166_187_20527_20545_" value="Винница и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20545_">Винница и область</label>
-                  </div>
-                  <div id="region20547" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20547"></a>
-                    <input id="166_187_20527_20547_" value="Житомир и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20547_">Житомир и область</label>
-                  </div>
-                  <div id="region20544" style="display: none;"> <a name="name20544" style="text-decoration: none" id="link20544" href="javascript://" onclick="regtree(10369);regtree(143);changeSign(20544);">+</a>&nbsp;
-                    <input id="166_187_20527_20544_" value="Киев и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20544_">Киев и область</label>
-                    <div id="region10369" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name10369"></a>
-                      <input id="166_187_20527_20544_10369_" value="Белая Церковь" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20527_20544_10369_">Белая Церковь</label>
-                    </div>
-                    <div id="region143" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name143"></a>
-                      <input id="166_187_20527_20544_143_" value="Киев" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20527_20544_143_">Киев</label>
-                    </div>
-                  </div>
-                  <div id="region20548" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20548"></a>
-                    <input id="166_187_20527_20548_" value="Кировоград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20548_">Кировоград и область</label>
-                  </div>
-                  <div id="region20549" style="display: none;"> <a name="name20549" style="text-decoration: none" id="link20549" href="javascript://" onclick="regtree(21609);regtree(964);changeSign(20549);">+</a>&nbsp;
-                    <input id="166_187_20527_20549_" value="Полтава и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20549_">Полтава и область</label>
-                    <div id="region21609" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name21609"></a>
-                      <input id="166_187_20527_20549_21609_" value="Кременчуг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20527_20549_21609_">Кременчуг</label>
-                    </div>
-                    <div id="region964" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                      <a name="name964"></a>
-                      <input id="166_187_20527_20549_964_" value="Полтава" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                      <label for="166_187_20527_20549_964_">Полтава</label>
-                    </div>
-                  </div>
-                  <div id="region20546" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20546"></a>
-                    <input id="166_187_20527_20546_" value="Черкассы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20527_20546_">Черкассы и область</label>
-                  </div>
-                </div>
-                <div id="region20526" style="display: none;"> <a name="name20526" style="text-decoration: none" id="link20526" href="javascript://" onclick="regtree(20543);regtree(20541);regtree(20542);changeSign(20526);">+</a>&nbsp;
-                  <input id="166_187_20526_" value="Юг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="166_187_20526_">Юг</label>
-                  <div id="region20543" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20543"></a>
-                    <input id="166_187_20526_20543_" value="Николаев и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20526_20543_">Николаев и область</label>
-                  </div>
-                  <div id="region20541" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20541"></a>
-                    <input id="166_187_20526_20541_" value="Одесса и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20526_20541_">Одесса и область</label>
-                  </div>
-                  <div id="region20542" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a name="name20542"></a>
-                    <input id="166_187_20526_20542_" value="Херсон и область" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                    <label for="166_187_20526_20542_">Херсон и область</label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div id="region111" style="display: block;"> <a name="name111" style="text-decoration: none" id="link111" href="javascript://" onclick="regtree(113);regtree(114);regtree(115);regtree(102);regtree(116);regtree(96);regtree(246);regtree(203);regtree(204);regtree(205);regtree(20574);regtree(118);regtree(119);regtree(120);regtree(180);regtree(121);regtree(122);regtree(980);regtree(983);regtree(123);regtree(124);regtree(10083);regtree(125);regtree(126);regtree(127);changeSign(111);">+</a>&nbsp;
-              <input id="111_" value="Европа" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="111_">Европа</label>
-              <div id="region113" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name113"></a>
-                <input id="111_113_" value="Австрия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_113_">Австрия</label>
-              </div>
-              <div id="region114" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name114"></a>
-                <input id="111_114_" value="Бельгия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_114_">Бельгия</label>
-              </div>
-              <div id="region115" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name115"></a>
-                <input id="111_115_" value="Болгария" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_115_">Болгария</label>
-              </div>
-              <div id="region102" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name102"></a>
-                <input id="111_102_" value="Великобритания" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_102_">Великобритания</label>
-              </div>
-              <div id="region116" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name116"></a>
-                <input id="111_116_" value="Венгрия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_116_">Венгрия</label>
-              </div>
-              <div id="region96" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name96"></a>
-                <input id="111_96_" value="Германия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_96_">Германия</label>
-              </div>
-              <div id="region246" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name246"></a>
-                <input id="111_246_" value="Греция" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_246_">Греция</label>
-              </div>
-              <div id="region203" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name203"></a>
-                <input id="111_203_" value="Дания" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_203_">Дания</label>
-              </div>
-              <div id="region204" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name204"></a>
-                <input id="111_204_" value="Испания" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_204_">Испания</label>
-              </div>
-              <div id="region205" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name205"></a>
-                <input id="111_205_" value="Италия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_205_">Италия</label>
-              </div>
-              <div id="region20574" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name20574"></a>
-                <input id="111_20574_" value="Кипр" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_20574_">Кипр</label>
-              </div>
-              <div id="region118" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name118"></a>
-                <input id="111_118_" value="Нидерланды" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_118_">Нидерланды</label>
-              </div>
-              <div id="region119" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name119"></a>
-                <input id="111_119_" value="Норвегия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_119_">Норвегия</label>
-              </div>
-              <div id="region120" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name120"></a>
-                <input id="111_120_" value="Польша" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_120_">Польша</label>
-              </div>
-              <div id="region180" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name180"></a>
-                <input id="111_180_" value="Сербия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_180_">Сербия</label>
-              </div>
-              <div id="region121" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name121"></a>
-                <input id="111_121_" value="Словакия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_121_">Словакия</label>
-              </div>
-              <div id="region122" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name122"></a>
-                <input id="111_122_" value="Словения" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_122_">Словения</label>
-              </div>
-              <div id="region980" style="display: none;"> <a name="name980" style="text-decoration: none" id="link980" href="javascript://" onclick="regtree(206);regtree(117);regtree(179);changeSign(980);">+</a>&nbsp;
-                <input id="111_980_" value="Страны Балтии" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_980_">Страны Балтии</label>
-                <div id="region206" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name206"></a>
-                  <input id="111_980_206_" value="Латвия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_980_206_">Латвия</label>
-                </div>
-                <div id="region117" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name117"></a>
-                  <input id="111_980_117_" value="Литва" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_980_117_">Литва</label>
-                </div>
-                <div id="region179" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name179"></a>
-                  <input id="111_980_179_" value="Эстония" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_980_179_">Эстония</label>
-                </div>
-              </div>
-              <div id="region983" style="display: none;"> <a name="name983" style="text-decoration: none" id="link983" href="javascript://" onclick="regtree(103668);regtree(103669);regtree(103670);regtree(103671);regtree(103672);regtree(103673);regtree(103674);regtree(103675);regtree(103676);regtree(103677);regtree(103678);regtree(103679);regtree(103680);regtree(103681);regtree(103682);regtree(103683);regtree(103684);regtree(103685);regtree(103686);regtree(103687);regtree(103688);regtree(103689);regtree(103690);regtree(103691);regtree(103692);regtree(103693);regtree(103694);regtree(103695);regtree(103696);regtree(103697);regtree(103742);regtree(103698);regtree(103699);regtree(103700);regtree(103701);regtree(103702);regtree(103703);regtree(103704);regtree(103705);regtree(103706);regtree(103707);regtree(103708);regtree(103709);regtree(103710);regtree(103711);regtree(103712);regtree(103713);regtree(103714);regtree(103715);regtree(103716);regtree(103717);regtree(103718);regtree(103719);regtree(103720);regtree(103721);regtree(103722);regtree(103723);regtree(103724);regtree(103725);regtree(103726);regtree(103727);regtree(103728);regtree(103729);regtree(103730);regtree(103731);regtree(103732);regtree(103733);regtree(103734);regtree(103735);regtree(103736);regtree(103737);regtree(103738);regtree(103739);regtree(103740);regtree(103741);regtree(103743);regtree(103744);regtree(103745);regtree(103746);regtree(103747);regtree(103748);changeSign(983);">+</a>&nbsp;
-                <input id="111_983_" value="Турция" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_983_">Турция</label>
-                <div id="region103668" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103668"></a>
-                  <input id="111_983_103668_" value="Провинция Агры" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103668_">Провинция Агры</label>
-                </div>
-                <div id="region103669" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103669"></a>
-                  <input id="111_983_103669_" value="Провинция Адана" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103669_">Провинция Адана</label>
-                </div>
-                <div id="region103670" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103670"></a>
-                  <input id="111_983_103670_" value="Провинция Адыяман" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103670_">Провинция Адыяман</label>
-                </div>
-                <div id="region103671" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103671"></a>
-                  <input id="111_983_103671_" value="Провинция Айдын" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103671_">Провинция Айдын</label>
-                </div>
-                <div id="region103672" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103672"></a>
-                  <input id="111_983_103672_" value="Провинция Аксарай" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103672_">Провинция Аксарай</label>
-                </div>
-                <div id="region103673" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103673"></a>
-                  <input id="111_983_103673_" value="Провинция Амасья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103673_">Провинция Амасья</label>
-                </div>
-                <div id="region103674" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103674"></a>
-                  <input id="111_983_103674_" value="Провинция Анкара" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103674_">Провинция Анкара</label>
-                </div>
-                <div id="region103675" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103675"></a>
-                  <input id="111_983_103675_" value="Провинция Анталья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103675_">Провинция Анталья</label>
-                </div>
-                <div id="region103676" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103676"></a>
-                  <input id="111_983_103676_" value="Провинция Ардахан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103676_">Провинция Ардахан</label>
-                </div>
-                <div id="region103677" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103677"></a>
-                  <input id="111_983_103677_" value="Провинция Артвин" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103677_">Провинция Артвин</label>
-                </div>
-                <div id="region103678" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103678"></a>
-                  <input id="111_983_103678_" value="Провинция Афьонкарахисар" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103678_">Провинция Афьонкарахисар</label>
-                </div>
-                <div id="region103679" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103679"></a>
-                  <input id="111_983_103679_" value="Провинция Байбурт" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103679_">Провинция Байбурт</label>
-                </div>
-                <div id="region103680" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103680"></a>
-                  <input id="111_983_103680_" value="Провинция Балыкесир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103680_">Провинция Балыкесир</label>
-                </div>
-                <div id="region103681" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103681"></a>
-                  <input id="111_983_103681_" value="Провинция Бартын" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103681_">Провинция Бартын</label>
-                </div>
-                <div id="region103682" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103682"></a>
-                  <input id="111_983_103682_" value="Провинция Батман" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103682_">Провинция Батман</label>
-                </div>
-                <div id="region103683" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103683"></a>
-                  <input id="111_983_103683_" value="Провинция Биледжик" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103683_">Провинция Биледжик</label>
-                </div>
-                <div id="region103684" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103684"></a>
-                  <input id="111_983_103684_" value="Провинция Бингёль" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103684_">Провинция Бингёль</label>
-                </div>
-                <div id="region103685" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103685"></a>
-                  <input id="111_983_103685_" value="Провинция Битлис" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103685_">Провинция Битлис</label>
-                </div>
-                <div id="region103686" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103686"></a>
-                  <input id="111_983_103686_" value="Провинция Болу" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103686_">Провинция Болу</label>
-                </div>
-                <div id="region103687" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103687"></a>
-                  <input id="111_983_103687_" value="Провинция Бурдур" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103687_">Провинция Бурдур</label>
-                </div>
-                <div id="region103688" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103688"></a>
-                  <input id="111_983_103688_" value="Провинция Бурса" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103688_">Провинция Бурса</label>
-                </div>
-                <div id="region103689" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103689"></a>
-                  <input id="111_983_103689_" value="Провинция Ван" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103689_">Провинция Ван</label>
-                </div>
-                <div id="region103690" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103690"></a>
-                  <input id="111_983_103690_" value="Провинция Газиантеп" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103690_">Провинция Газиантеп</label>
-                </div>
-                <div id="region103691" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103691"></a>
-                  <input id="111_983_103691_" value="Провинция Гиресун" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103691_">Провинция Гиресун</label>
-                </div>
-                <div id="region103692" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103692"></a>
-                  <input id="111_983_103692_" value="Провинция Гюмюшхане" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103692_">Провинция Гюмюшхане</label>
-                </div>
-                <div id="region103693" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103693"></a>
-                  <input id="111_983_103693_" value="Провинция Денизли" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103693_">Провинция Денизли</label>
-                </div>
-                <div id="region103694" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103694"></a>
-                  <input id="111_983_103694_" value="Провинция Диярбакыр" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103694_">Провинция Диярбакыр</label>
-                </div>
-                <div id="region103695" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103695"></a>
-                  <input id="111_983_103695_" value="Провинция Дюздже" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103695_">Провинция Дюздже</label>
-                </div>
-                <div id="region103696" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103696"></a>
-                  <input id="111_983_103696_" value="Провинция Зонгулдак" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103696_">Провинция Зонгулдак</label>
-                </div>
-                <div id="region103697" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103697"></a>
-                  <input id="111_983_103697_" value="Провинция Измир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103697_">Провинция Измир</label>
-                </div>
-                <div id="region103742" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103742"></a>
-                  <input id="111_983_103742_" value="Провинция Испарта" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103742_">Провинция Испарта</label>
-                </div>
-                <div id="region103698" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103698"></a>
-                  <input id="111_983_103698_" value="Провинция Йозгат" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103698_">Провинция Йозгат</label>
-                </div>
-                <div id="region103699" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103699"></a>
-                  <input id="111_983_103699_" value="Провинция Кайсери" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103699_">Провинция Кайсери</label>
-                </div>
-                <div id="region103700" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103700"></a>
-                  <input id="111_983_103700_" value="Провинция Карабюк" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103700_">Провинция Карабюк</label>
-                </div>
-                <div id="region103701" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103701"></a>
-                  <input id="111_983_103701_" value="Провинция Караман" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103701_">Провинция Караман</label>
-                </div>
-                <div id="region103702" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103702"></a>
-                  <input id="111_983_103702_" value="Провинция Карс" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103702_">Провинция Карс</label>
-                </div>
-                <div id="region103703" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103703"></a>
-                  <input id="111_983_103703_" value="Провинция Кастамону" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103703_">Провинция Кастамону</label>
-                </div>
-                <div id="region103704" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103704"></a>
-                  <input id="111_983_103704_" value="Провинция Кахраманмараш" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103704_">Провинция Кахраманмараш</label>
-                </div>
-                <div id="region103705" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103705"></a>
-                  <input id="111_983_103705_" value="Провинция Килис" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103705_">Провинция Килис</label>
-                </div>
-                <div id="region103706" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103706"></a>
-                  <input id="111_983_103706_" value="Провинция Коджаэли" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103706_">Провинция Коджаэли</label>
-                </div>
-                <div id="region103707" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103707"></a>
-                  <input id="111_983_103707_" value="Провинция Конья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103707_">Провинция Конья</label>
-                </div>
-                <div id="region103708" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103708"></a>
-                  <input id="111_983_103708_" value="Провинция Кыркларели" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103708_">Провинция Кыркларели</label>
-                </div>
-                <div id="region103709" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103709"></a>
-                  <input id="111_983_103709_" value="Провинция Кыршехир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103709_">Провинция Кыршехир</label>
-                </div>
-                <div id="region103710" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103710"></a>
-                  <input id="111_983_103710_" value="Провинция Кырыккале" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103710_">Провинция Кырыккале</label>
-                </div>
-                <div id="region103711" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103711"></a>
-                  <input id="111_983_103711_" value="Провинция Кютахья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103711_">Провинция Кютахья</label>
-                </div>
-                <div id="region103712" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103712"></a>
-                  <input id="111_983_103712_" value="Провинция Малатья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103712_">Провинция Малатья</label>
-                </div>
-                <div id="region103713" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103713"></a>
-                  <input id="111_983_103713_" value="Провинция Маниса" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103713_">Провинция Маниса</label>
-                </div>
-                <div id="region103714" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103714"></a>
-                  <input id="111_983_103714_" value="Провинция Мардин" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103714_">Провинция Мардин</label>
-                </div>
-                <div id="region103715" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103715"></a>
-                  <input id="111_983_103715_" value="Провинция Мерсин" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103715_">Провинция Мерсин</label>
-                </div>
-                <div id="region103716" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103716"></a>
-                  <input id="111_983_103716_" value="Провинция Мугла" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103716_">Провинция Мугла</label>
-                </div>
-                <div id="region103717" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103717"></a>
-                  <input id="111_983_103717_" value="Провинция Муш" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103717_">Провинция Муш</label>
-                </div>
-                <div id="region103718" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103718"></a>
-                  <input id="111_983_103718_" value="Провинция Невшехир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103718_">Провинция Невшехир</label>
-                </div>
-                <div id="region103719" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103719"></a>
-                  <input id="111_983_103719_" value="Провинция Нигде" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103719_">Провинция Нигде</label>
-                </div>
-                <div id="region103720" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103720"></a>
-                  <input id="111_983_103720_" value="Провинция Орду" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103720_">Провинция Орду</label>
-                </div>
-                <div id="region103721" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103721"></a>
-                  <input id="111_983_103721_" value="Провинция Османие" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103721_">Провинция Османие</label>
-                </div>
-                <div id="region103722" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103722"></a>
-                  <input id="111_983_103722_" value="Провинция Ризе" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103722_">Провинция Ризе</label>
-                </div>
-                <div id="region103723" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103723"></a>
-                  <input id="111_983_103723_" value="Провинция Сакарья" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103723_">Провинция Сакарья</label>
-                </div>
-                <div id="region103724" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103724"></a>
-                  <input id="111_983_103724_" value="Провинция Самсун" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103724_">Провинция Самсун</label>
-                </div>
-                <div id="region103725" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103725"></a>
-                  <input id="111_983_103725_" value="Провинция Сивас" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103725_">Провинция Сивас</label>
-                </div>
-                <div id="region103726" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103726"></a>
-                  <input id="111_983_103726_" value="Провинция Сиирт" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103726_">Провинция Сиирт</label>
-                </div>
-                <div id="region103727" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103727"></a>
-                  <input id="111_983_103727_" value="Провинция Синоп" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103727_">Провинция Синоп</label>
-                </div>
-                <div id="region103728" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103728"></a>
-                  <input id="111_983_103728_" value="Провинция Стамбул" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103728_">Провинция Стамбул</label>
-                </div>
-                <div id="region103729" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103729"></a>
-                  <input id="111_983_103729_" value="Провинция Текирдаг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103729_">Провинция Текирдаг</label>
-                </div>
-                <div id="region103730" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103730"></a>
-                  <input id="111_983_103730_" value="Провинция Токат" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103730_">Провинция Токат</label>
-                </div>
-                <div id="region103731" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103731"></a>
-                  <input id="111_983_103731_" value="Провинция Трабзон" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103731_">Провинция Трабзон</label>
-                </div>
-                <div id="region103732" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103732"></a>
-                  <input id="111_983_103732_" value="Провинция Тунджели" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103732_">Провинция Тунджели</label>
-                </div>
-                <div id="region103733" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103733"></a>
-                  <input id="111_983_103733_" value="Провинция Ушак" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103733_">Провинция Ушак</label>
-                </div>
-                <div id="region103734" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103734"></a>
-                  <input id="111_983_103734_" value="Провинция Хаккяри" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103734_">Провинция Хаккяри</label>
-                </div>
-                <div id="region103735" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103735"></a>
-                  <input id="111_983_103735_" value="Провинция Хатай" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103735_">Провинция Хатай</label>
-                </div>
-                <div id="region103736" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103736"></a>
-                  <input id="111_983_103736_" value="Провинция Чанаккале" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103736_">Провинция Чанаккале</label>
-                </div>
-                <div id="region103737" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103737"></a>
-                  <input id="111_983_103737_" value="Провинция Чанкыры" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103737_">Провинция Чанкыры</label>
-                </div>
-                <div id="region103738" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103738"></a>
-                  <input id="111_983_103738_" value="Провинция Чорум" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103738_">Провинция Чорум</label>
-                </div>
-                <div id="region103739" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103739"></a>
-                  <input id="111_983_103739_" value="Провинция Шанлыурфа" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103739_">Провинция Шанлыурфа</label>
-                </div>
-                <div id="region103740" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103740"></a>
-                  <input id="111_983_103740_" value="Провинция Ширнак" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103740_">Провинция Ширнак</label>
-                </div>
-                <div id="region103741" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103741"></a>
-                  <input id="111_983_103741_" value="Провинция Ыгдыр" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103741_">Провинция Ыгдыр</label>
-                </div>
-                <div id="region103743" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103743"></a>
-                  <input id="111_983_103743_" value="Провинция Эдирне" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103743_">Провинция Эдирне</label>
-                </div>
-                <div id="region103744" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103744"></a>
-                  <input id="111_983_103744_" value="Провинция Элязыг" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103744_">Провинция Элязыг</label>
-                </div>
-                <div id="region103745" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103745"></a>
-                  <input id="111_983_103745_" value="Провинция Эрзинджан" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103745_">Провинция Эрзинджан</label>
-                </div>
-                <div id="region103746" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103746"></a>
-                  <input id="111_983_103746_" value="Провинция Эрзурум" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103746_">Провинция Эрзурум</label>
-                </div>
-                <div id="region103747" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103747"></a>
-                  <input id="111_983_103747_" value="Провинция Эскишехир" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103747_">Провинция Эскишехир</label>
-                </div>
-                <div id="region103748" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name103748"></a>
-                  <input id="111_983_103748_" value="Провинция Ялова" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="111_983_103748_">Провинция Ялова</label>
-                </div>
-              </div>
-              <div id="region123" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name123"></a>
-                <input id="111_123_" value="Финляндия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_123_">Финляндия</label>
-              </div>
-              <div id="region124" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name124"></a>
-                <input id="111_124_" value="Франция" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_124_">Франция</label>
-              </div>
-              <div id="region10083" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name10083"></a>
-                <input id="111_10083_" value="Хорватия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_10083_">Хорватия</label>
-              </div>
-              <div id="region125" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name125"></a>
-                <input id="111_125_" value="Чехия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_125_">Чехия</label>
-              </div>
-              <div id="region126" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name126"></a>
-                <input id="111_126_" value="Швейцария" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_126_">Швейцария</label>
-              </div>
-              <div id="region127" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name127"></a>
-                <input id="111_127_" value="Швеция" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="111_127_">Швеция</label>
-              </div>
-            </div>
-            <div id="region183" style="display: block;"> <a name="name183" style="text-decoration: none" id="link183" href="javascript://" onclick="regtree(1004);regtree(169);regtree(994);regtree(20975);regtree(134);regtree(995);regtree(135);regtree(137);changeSign(183);">+</a>&nbsp;
-              <input id="183_" value="Азия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="183_">Азия</label>
-              <div id="region1004" style="display: none;"> <a name="name1004" style="text-decoration: none" id="link1004" href="javascript://" onclick="regtree(1056);regtree(181);regtree(210);changeSign(1004);">+</a>&nbsp;
-                <input id="183_1004_" value="Ближний Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_1004_">Ближний Восток</label>
-                <div id="region1056" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name1056"></a>
-                  <input id="183_1004_1056_" value="Египет" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="183_1004_1056_">Египет</label>
-                </div>
-                <div id="region181" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name181"></a>
-                  <input id="183_1004_181_" value="Израиль" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="183_1004_181_">Израиль</label>
-                </div>
-                <div id="region210" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a name="name210"></a>
-                  <input id="183_1004_210_" value="Объединенные Арабские Эмираты" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                  <label for="183_1004_210_">Объединенные Арабские Эмираты</label>
-                </div>
-              </div>
-              <div id="region169" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name169"></a>
-                <input id="183_169_" value="Грузия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_169_">Грузия</label>
-              </div>
-              <div id="region994" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name994"></a>
-                <input id="183_994_" value="Индия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_994_">Индия</label>
-              </div>
-              <div id="region20975" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name20975"></a>
-                <input id="183_20975_" value="Камбоджа" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_20975_">Камбоджа</label>
-              </div>
-              <div id="region134" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name134"></a>
-                <input id="183_134_" value="Китай" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_134_">Китай</label>
-              </div>
-              <div id="region995" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name995"></a>
-                <input id="183_995_" value="Таиланд" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_995_">Таиланд</label>
-              </div>
-              <div id="region135" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name135"></a>
-                <input id="183_135_" value="Южная Корея" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_135_">Южная Корея</label>
-              </div>
-              <div id="region137" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name137"></a>
-                <input id="183_137_" value="Япония" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="183_137_">Япония</label>
-              </div>
-            </div>
-            <div id="region241" style="display: block;"> &nbsp;&nbsp;&nbsp;&nbsp;
-              <a name="name241"></a>
-              <input id="241_" value="Африка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="241_">Африка</label>
-            </div>
-            <div id="region10002" style="display: block;"> <a name="name10002" style="text-decoration: none" id="link10002" href="javascript://" onclick="regtree(95);regtree(84);changeSign(10002);">+</a>&nbsp;
-              <input id="10002_" value="Северная Америка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="10002_">Северная Америка</label>
-              <div id="region95" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name95"></a>
-                <input id="10002_95_" value="Канада" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="10002_95_">Канада</label>
-              </div>
-              <div id="region84" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name84"></a>
-                <input id="10002_84_" value="США" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="10002_84_">США</label>
-              </div>
-            </div>
-            <div id="region10003" style="display: block;"> <a name="name10003" style="text-decoration: none" id="link10003" href="javascript://" onclick="regtree(93);regtree(94);changeSign(10003);">+</a>&nbsp;
-              <input id="10003_" value="Южная Америка" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="10003_">Южная Америка</label>
-              <div id="region93" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name93"></a>
-                <input id="10003_93_" value="Аргентина" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="10003_93_">Аргентина</label>
-              </div>
-              <div id="region94" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name94"></a>
-                <input id="10003_94_" value="Бразилия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="10003_94_">Бразилия</label>
-              </div>
-            </div>
-            <div id="region138" style="display: block;"> <a name="name138" style="text-decoration: none" id="link138" href="javascript://" onclick="regtree(211);regtree(139);changeSign(138);">+</a>&nbsp;
-              <input id="138_" value="Австралия и Океания" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-              <label for="138_">Австралия и Океания</label>
-              <div id="region211" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name211"></a>
-                <input id="138_211_" value="Австралия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="138_211_">Австралия</label>
-              </div>
-              <div id="region139" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;
-                <a name="name139"></a>
-                <input id="138_139_" value="Новая Зеландия" type="checkbox" name="reg" onclick="javascript:Generate(this)">
-                <label for="138_139_">Новая Зеландия</label>
-              </div>
-            </div>
-
-          </td>
-        </tr>
-        <tr>
-
-          <td bgcolor="#F0F1F3" style="border-right:white 20px solid;">
-
-          </td>
-        </tr>
-
-      </tbody>
-    </table>
-  </form>
-  <script type="text/javascript">
-    var reg_form = document.forms['reg'];
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/5-tree-checkboxes/task.md b/archive/widget-tasks/5-tree-checkboxes/task.md
deleted file mode 100644
index 43d7987f..00000000
--- a/archive/widget-tasks/5-tree-checkboxes/task.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Дерево с чекбоксами
-
-[importance 5]
-
-Вы получили проект, в котором есть дерево с чекбоксами.
-
-К сожалению, оно "кривое" -- некрасивое, плохо закодированное и с ошибками. Ваша задача -- сделать "как надо".
-
-Образец:
-
-[iframe src="source" height=400 link edit border=1]
-
-Особенности работы:
-<ul>
-<li>При изначальном рисовании все элементы закрыты и не отмечены.</li>
-<li>Установка отметки в чекбоксе раскрывает узел и отмечает все элементы под ним.</li>
-<li>Снятие отметки из чекбокса -- снимает отметки из всех элементов под ним.</li>
-</ul>
-
-Требования к реализации:
-<ul>
-<li>Все данные для дерева (регионы) нужно хранить в JS. Как именно -- определяете вы сами. Можно в одном объекте, можно -- ещё как-то.</li>
-<li>Программист, который делал этот код, сейчас недоступен. Ваша задача -- восстановить данные регионов из дерева примера.</li>
-<li>Можно считать, что название региона всегда занимает только 1 строку.</li>
-<li>Дерево должно легко работать с 1000 узлов (в примере их около 450).</li>
-<li>Используйте минимум DOM-элементов.</li>
-</ul>
-
-Исходный документ содержит "образец" дерева.
-
-[edit task src="source"/]
-
-P.S. При получении данных из дерева-образца вам поможет `JSON.stringify(объект)`. Он превратит объект в строку, которую можно положить в файл.
diff --git a/archive/widget-tasks/7-calendar/solution.view/calendar.css b/archive/widget-tasks/7-calendar/solution.view/calendar.css
deleted file mode 100644
index eb8885de..00000000
--- a/archive/widget-tasks/7-calendar/solution.view/calendar.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.calendar-table {
-  border-collapse: collapse;
-}
-
-.calendar-table td,
-.calendar-table th {
-  border: 1px solid black;
-  padding: 3px;
-  text-align: center;
-}
-
-.calendar-table th {
-  font-weight: bold;
-  background-color: #E6E6E6;
-}
-
-.date-cell:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.date-cell.selected {
-  background: #0F0;
-}
-
-.calendar-table caption {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/solution.view/calendar.js b/archive/widget-tasks/7-calendar/solution.view/calendar.js
deleted file mode 100644
index 5509b0d2..00000000
--- a/archive/widget-tasks/7-calendar/solution.view/calendar.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * options:
- *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
- *     если в объекте указаны только {year,month}, то день не выбран
- */
-function Calendar(options) {
-  var self = this;
-
-  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
-
-  var elem;
-  var year, month, day;
-
-  var showYear, showMonth;
-
-  parseValue(options.value);
-
-  // -----------------------
-
-  this.getElement = function() {
-    if (!elem) {
-      render();
-    }
-    return elem;
-  };
-
-  this.getValue = function() {
-    return day ? new Date(year, month, day) : null;
-  };
-
-  function parseValue(value) {
-    if (value instanceof Date) {
-      year = value.getFullYear();
-      month = value.getMonth();
-      day = value.getDate();
-    } else {
-      year = value.year;
-      month = value.month;
-      day = value.day;
-    }
-  }
-
-  /**
-   * Установить значение календаря
-   * @param newValue {Date или объект {year,month[,day]} Новое значение
-   * @param quiet Если true, то событие не генерируется
-   */
-  this.setValue = function(newValue, quiet) {
-    parseValue(newValue);
-
-    if (elem) {
-      clearSelected();
-      render();
-    }
-
-    if (!quiet) {
-      $(self).triggerHandler({
-        type: "select",
-        value: new Date(year, month, day)
-      });
-    }
-  };
-
-  function render() {
-    if (!elem) {
-      elem = $('<div class="calendar"/>')
-        .on('click', '.date-cell', onDateCellClick);
-    }
-
-    if (showYear != year || showMonth != month) {
-      elem.html(renderCalendarTable(year, month));
-      elem.find('caption').html(monthNames[month] + ' ' + year);
-      showYear = year;
-      showMonth = month;
-    }
-
-    if (day) {
-      var num = getCellByDate(new Date(year, month, day));
-      elem.find('td').eq(num).addClass("selected");
-    }
-
-  }
-
-  function clearSelected() {
-    elem.find('.selected').removeClass('selected');
-  }
-
-
-  function onDateCellClick(e) {
-    day = $(e.target).html();
-    self.setValue({
-      year: year,
-      month: month,
-      day: day
-    });
-  }
-
-
-  /**
-   * Возвращает по дате номер TD в таблице
-   * Использование:
-   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
-   */
-  function getCellByDate(date) {
-    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
-
-    return getDay(dateDayOne) + date.getDate() - 1;
-  }
-
-  /**
-   * получить номер дня недели для date, от 0(пн) до 6(вс)
-   * @param date
-   */
-  function getDay(date) { //
-    var day = date.getDay();
-    if (day == 0) day = 7;
-    return day - 1;
-  }
-
-  /**
-   * Генерирует таблицу для календаря заданного месяца/года
-   */
-  function renderCalendarTable(year, month) {
-
-    var d = new Date(year, month);
-
-    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
-
-    for (var i = 0; i < getDay(d); i++) {
-      table.push('<td></td>');
-    }
-
-    // ячейки календаря с датами
-    while (d.getMonth() == month) {
-      table.push('<td class="date-cell">' + d.getDate() + '</td>');
-
-      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
-        table.push('</tr><tr>');
-      }
-
-      d.setDate(d.getDate() + 1);
-    }
-
-    // добить таблицу пустыми ячейками, если нужно
-    if (getDay(d) != 0) {
-      for (var i = getDay(d); i < 7; i++) {
-        table.push('<td></td>');
-      }
-    }
-
-    table.push('</tr></table>');
-
-    return table.join('\n')
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/solution.view/index.html b/archive/widget-tasks/7-calendar/solution.view/index.html
deleted file mode 100644
index a77e9a8c..00000000
--- a/archive/widget-tasks/7-calendar/solution.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link type="text/css" rel="stylesheet" href="calendar.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="calendar.js"></script>
-</head>
-
-<body>
-
-
-  <button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
-
-  <div id="calendar-holder"></div>
-  <div id="value">тут будет выбранное значение (дата)</div>
-
-
-  <script>
-    var calendar = new Calendar({
-      value: {
-        year: 2012,
-        month: 2
-      }
-    });
-    $('#calendar-holder').append(calendar.getElement());
-
-    $(calendar).on("select", function(e) {
-      $('#value').html(e.value + '');
-    });
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/source.view/calendar-table.js b/archive/widget-tasks/7-calendar/source.view/calendar-table.js
deleted file mode 100644
index 3a3b4786..00000000
--- a/archive/widget-tasks/7-calendar/source.view/calendar-table.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Возвращает по дате номер TD в таблице
- * Использование:
- *  var td = table.find('td').eq(getCellByDate(date))
- */
-function getCellByDate(date) {
-  var date1 = new Date(date.getFullYear(), date.getMonth(), 1);
-
-  return getDay(date1) + date.getDate() - 1;
-}
-
-/**
- * получить номер дня недели для date, от 0(пн) до 6(вс)
- * @param date
- */
-function getDay(date) { //
-  var day = date.getDay();
-  if (day == 0) day = 7;
-  return day - 1;
-}
-
-/**
- * Генерирует таблицу для календаря заданного месяца/года
- * @param year
- * @param month
- */
-function renderCalendarTable(year, month) {
-
-  var d = new Date(year, month);
-
-  var table = ['<table class="calendar-table"><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
-
-  for (var i = 0; i < getDay(d); i++) {
-    table.push('<td></td>');
-  }
-
-  // ячейки календаря с датами
-  while (d.getMonth() == month) {
-    table.push('<td class="date-cell">' + d.getDate() + '</td>');
-
-    if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
-      table.push('</tr><tr>');
-    }
-
-    d.setDate(d.getDate() + 1);
-  }
-
-  // добить таблицу пустыми ячейками, если нужно
-  if (getDay(d) != 0) {
-    for (var i = getDay(d); i < 7; i++) {
-      table.push('<td></td>');
-    }
-  }
-
-  table.push('</tr></table>');
-
-  return table.join('\n')
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/source.view/calendar.css b/archive/widget-tasks/7-calendar/source.view/calendar.css
deleted file mode 100644
index eb8885de..00000000
--- a/archive/widget-tasks/7-calendar/source.view/calendar.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.calendar-table {
-  border-collapse: collapse;
-}
-
-.calendar-table td,
-.calendar-table th {
-  border: 1px solid black;
-  padding: 3px;
-  text-align: center;
-}
-
-.calendar-table th {
-  font-weight: bold;
-  background-color: #E6E6E6;
-}
-
-.date-cell:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.date-cell.selected {
-  background: #0F0;
-}
-
-.calendar-table caption {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/source.view/calendar.js b/archive/widget-tasks/7-calendar/source.view/calendar.js
deleted file mode 100644
index d371d019..00000000
--- a/archive/widget-tasks/7-calendar/source.view/calendar.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * options:
- *   year/month {number} год/месяц для календаря
- *   value {Date} текущая выбранная дата
- */
-function Calendar(options) {
-  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
-
-  /* ваш код */
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/source.view/index.html b/archive/widget-tasks/7-calendar/source.view/index.html
deleted file mode 100644
index a77e9a8c..00000000
--- a/archive/widget-tasks/7-calendar/source.view/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link type="text/css" rel="stylesheet" href="calendar.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="calendar.js"></script>
-</head>
-
-<body>
-
-
-  <button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
-
-  <div id="calendar-holder"></div>
-  <div id="value">тут будет выбранное значение (дата)</div>
-
-
-  <script>
-    var calendar = new Calendar({
-      value: {
-        year: 2012,
-        month: 2
-      }
-    });
-    $('#calendar-holder').append(calendar.getElement());
-
-    $(calendar).on("select", function(e) {
-      $('#value').html(e.value + '');
-    });
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/7-calendar/task.md b/archive/widget-tasks/7-calendar/task.md
deleted file mode 100644
index 582463b3..00000000
--- a/archive/widget-tasks/7-calendar/task.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Календарь
-
-[importance 5]
-
-Создайте календарь.
-
-Конструктор:
-
-```js
-var calendar = new Calendar({ 
-  year: 2012, // календарь для года 2012
-  month: 2  // месяц - март (нумерация с нуля!)
-});
-```
-
-События:
-<ul>
-<li>`select` -- при изменении даты.</li>
-</ul>
-Публичные методы:
-<ul>
-<li>`setValue(date, quiet)` -- устанавливает дату `date`. Если второй аргумент `true`, то событие не генерируется.</li>
-<li>`getElement()` -- возвращает DOM-элемент для компонента для вставки в документ. При первом вызове создаёт DOM.</li>
-</ul>
-
-Использование -- добавление в документ:
-
-```js
-var calendar = new Calendar({... });
-calendar.getElement().appendTo('body');
-```
-
-Использование -- подписка на изменение и вывод значения:
-
-```js
-calendar.on("select", function(e) {
-  $('#value').html( e.value+'' );
-})
-```
-
-Пример в действии:
-[iframe border=1 src="solution"]
-
-В исходный документ входит файл `calendar-table.js` со вспомогательными функциями, в частности, `renderCalendarTable(year, month)` генерирует таблицу.
-
-[edit task src="source"/]. 
diff --git a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete-list.js b/archive/widget-tasks/8-autocomplete/solution.view/autocomplete-list.js
deleted file mode 100644
index 718ff1ce..00000000
--- a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete-list.js
+++ /dev/null
@@ -1,62 +0,0 @@
-function AutocompleteList(provider) {
-  var elem;
-
-  var filteredResults;
-  var currentIndex = 0;
-
-  this.render = function() {
-    elem = $('<ol/>');
-    return elem;
-  };
-
-  this.update = function(value) {
-    filteredResults = provider.filterByStart(value);
-
-    if (filteredResults.length) {
-      elem.html('<li>' + filteredResults.join('</li><li>') + '</li>');
-    } else {
-      elem.empty();
-    }
-
-    currentIndex = 0;
-    renderCurrent();
-
-    // это событие, как и всё обновление,
-    // может быть асинхронным (при получении списка с сервера)
-    $(this).triggerHandler({
-      type: 'update',
-      values: filteredResults
-    });
-
-  };
-
-  function renderCurrent() {
-    elem.children().eq(currentIndex).addClass('selected');
-  }
-
-  function clearCurrent() {
-    elem.children().eq(currentIndex).removeClass('selected');
-  }
-
-  this.get = function() {
-    return filteredResults[currentIndex];
-  };
-
-  this.down = function() {
-    if (currentIndex == filteredResults.length - 1) return;
-    clearCurrent();
-    currentIndex++;
-    renderCurrent();
-  };
-
-  this.up = function() {
-    if (currentIndex == 0) return;
-    clearCurrent();
-    currentIndex--;
-    renderCurrent();
-  };
-
-  this.clear = function() {
-    this.update('');
-  };
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.css b/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.css
deleted file mode 100644
index abbebc00..00000000
--- a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.autocomplete ol {
-  display: none;
-  margin: 0;
-  padding: 3px;
-  border: 1px solid gray;
-  list-style: none;
-}
-
-.autocomplete input {
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 1px 0 1px 3px;
-  width: 100%;
-  border: 1px solid blue;
-  border-radius: 3px;
-  -webkit-appearance: none;
-  font-size: 16px;
-}
-
-.autocomplete input:focus {
-  outline: none;
-}
-
-.autocomplete.open input {
-  border-bottom: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.autocomplete.open ol {
-  display: block;
-  background: white;
-  z-index: 10000;
-  position: relative;
-}
-
-.autocomplete {
-  width: 400px;
-  height: 20px;
-}
-
-.autocomplete ol .selected {
-  background: blue;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.js b/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.js
deleted file mode 100644
index dd6f72a7..00000000
--- a/archive/widget-tasks/8-autocomplete/solution.view/autocomplete.js
+++ /dev/null
@@ -1,104 +0,0 @@
-function Autocomplete(options) {
-  var self = this;
-
-  var elem = options.elem;
-
-  var input = $('input', elem);
-  var list;
-
-  input.on({
-    focus: onInputFocus,
-    blur: onInputBlur,
-    keydown: onInputKeyDown
-  });
-
-  var inputCheckTimer;
-
-  // ------------------
-
-  function onInputKeyDown(e) {
-    var KEY_ARROW_UP = 38;
-    var KEY_ARROW_RIGHT = 39;
-    var KEY_ARROW_DOWN = 40;
-    var KEY_ENTER = 13;
-    var KEY_ESC = 27;
-
-    switch (e.keyCode) {
-      case KEY_ARROW_UP:
-        list.up();
-        return false;
-        break;
-
-      case KEY_ARROW_RIGHT:
-        if (list.get()) {
-          self.setValue(list.get(), true);
-        }
-        break;
-
-      case KEY_ENTER:
-        self.setValue(list.get() || input.val());
-        input.blur();
-        break;
-
-      case KEY_ESC:
-        list.clear();
-        break;
-
-      case KEY_ARROW_DOWN:
-        list.down();
-        return false;
-        break;
-    }
-
-  }
-
-  function initList() {
-    list = new AutocompleteList(options.provider);
-    list.render().appendTo(elem);
-    $(list).on('update', onListUpdate);
-  }
-
-  function onListUpdate(e) {
-    if (e.values.length) {
-      elem.addClass('open');
-    } else {
-      elem.removeClass('open');
-    }
-  }
-
-  function onInputFocus() {
-    var inputValue = input.val();
-
-    function checkInput() {
-      if (inputValue != input.val()) {
-
-        if (!list) {
-          initList();
-        }
-
-        list.update(input.val());
-        inputValue = input.val();
-      }
-    }
-
-    inputCheckTimer = setInterval(checkInput, 30);
-  }
-
-  function onInputBlur() {
-    clearInterval(inputCheckTimer);
-    if (list) {
-      list.clear();
-    }
-  }
-
-  this.setValue = function(value, quiet) {
-    input.val(value);
-    if (!quiet) {
-      $(self).triggerHandler({
-        type: 'change',
-        value: value
-      });
-    }
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js b/archive/widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js
deleted file mode 100644
index dfb42af4..00000000
--- a/archive/widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function FilteringListProvider(strings) {
-
-  this.get = function(index) {
-    return strings[index];
-  };
-
-  this.filterByStart = function(stringStart) {
-    if (stringStart.length < 2) return [];
-
-    var stringStartLC = stringStart.toLowerCase();
-
-    return strings.filter(function(str) {
-      var strLC = str.toLowerCase();
-
-      return strLC.slice(0, stringStartLC.length) == stringStartLC && strLC != stringStartLC;
-    });
-  }
-
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/8-autocomplete/solution.view/index.html b/archive/widget-tasks/8-autocomplete/solution.view/index.html
deleted file mode 100644
index 73f63040..00000000
--- a/archive/widget-tasks/8-autocomplete/solution.view/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="autocomplete.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="autocomplete.js"></script>
-  <script src="filtering-list-provider.js"></script>
-  <script src="autocomplete-list.js"></script>
-</head>
-
-<body>
-
-  <div class="autocomplete" id="search">
-
-    <input type="text" autocomplete="off">
-
-  </div>
-
-  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam explicabo nostrum eum placeat aliquid voluptatem nihil modi libero nulla tempore dolore itaque accusamus distinctio veniam quae voluptatibus suscipit provident quas quaerat tempora sequi
-    magnam.
-  </div>
-
-
-  <script>
-    var dataProvider = new FilteringListProvider([
-      'Человек',
-      'Чело',
-      'Че Гевара',
-      'Яблоко',
-      'Ноутбук',
-      'Но Пасаран!'
-    ]);
-
-    var autocomplete = new Autocomplete({
-      elem: $('#search'),
-      provider: dataProvider
-    });
-
-    $(autocomplete).on('change', function(e) {
-      $('#search').next().html(e.value);
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/8-autocomplete/task.md b/archive/widget-tasks/8-autocomplete/task.md
deleted file mode 100644
index 165c73d4..00000000
--- a/archive/widget-tasks/8-autocomplete/task.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Автокомплит
-
-[importance 4]
-
-Создайте `input` с автодополнением из списка.
-
-Список задаётся массивом, например:
-
-```js
-var list = [ 
-  'Человек',
-  'Че Гевара',
-  'Яблоко',
-  'Ноутбук',
-  'Но Пасаран!'
-];
-
-var autocomplete = new Autocomplete({ 
-  elem: $('#search'),
-  data: list
-});
-```
-
-Результат:
-[iframe src="solution" border=1]
-
-Требования:
-<ul>
-<li>Автодополнение начинается со 2го символа.</li>
-<li>Выпадающий список перекрывает документ, навигация по нему клавишами ↑ и ↓, выбор: → или Enter, скрытие списка Escape.</li>
-<li>Событие `change` при нажатии Enter.</li>
-</ul>
-
-Поддержка кликов мыши, а также получение списка с сервера не требуются, но могут быть добавлены в будущем. 
-
-Исходный документ -- пустой HTML, ну или [поиск Google с автокомплитом](http://google.com) ;)
\ No newline at end of file
diff --git a/archive/widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js b/archive/widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js
deleted file mode 100644
index 71163205..00000000
--- a/archive/widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Taken from jQuery UI accordion and fixed, special hoverintent event
- * http://benalman.com/news/2010/03/jquery-special-events/
- */
-! function($) {
-
-
-  var cfg = {
-    sensitivity: 9,
-    interval: 50
-  };
-
-
-  $.event.special.hoverintent = {
-    setup: function() {
-      $(this).on("mouseover", handler);
-    },
-
-    teardown: function() {
-      $(this).on("mouseover", handler);
-    },
-
-    cfg: cfg
-  };
-
-  function handler(event) {
-
-    var self = this,
-      args = arguments,
-      target = $(event.target),
-      cX, cY, pX, pY;
-
-    function track(event) {
-      cX = event.pageX;
-      cY = event.pageY;
-    };
-    pX = event.pageX;
-    pY = event.pageY;
-
-    function clear() {
-      target.off("mousemove", track).off("mouseout", clear);
-      clearTimeout(timeout);
-    }
-
-    function handler() {
-      if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
-        clear();
-        event.type = "hoverintent";
-        jQuery.event.simulate("hoverintent", event.target, $.event.fix(event), true);
-      } else {
-        pX = cX;
-        pY = cY;
-        timeout = setTimeout(handler, cfg.interval);
-      }
-    }
-    var timeout = setTimeout(handler, cfg.interval);
-    target.mousemove(track).mouseout(clear);
-    return true;
-  }
-
-
-}(jQuery);
\ No newline at end of file
diff --git a/archive/widget-tasks/9-hover-menu-onclick/solution.view/index.html b/archive/widget-tasks/9-hover-menu-onclick/solution.view/index.html
deleted file mode 100644
index 0c42c672..00000000
--- a/archive/widget-tasks/9-hover-menu-onclick/solution.view/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="menu.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-  <script src="hoverintent.js"></script>
-  <script src="menu.js"></script>
-</head>
-
-<body>
-
-  <!--   Разрешить вложенные меню -->
-  <div class="menu" id="menu">
-    <a href="#" class="title">Моё меню</a>
-    <ol>
-      <li class="has-children">
-        <a href="#a1">Элемент 1</a>
-        <ol>
-          <li><a href="#a1.1">Элемент 1.1</a></li>
-          <li class="has-children">
-            <a href="#a1.2">Элемент 1.2</a>
-            <ol>
-              <li><a href="#a1.2.1">Элемент 1.2.1</a></li>
-              <li><a href="#a1.2.2">Элемент 1.2.2</a></li>
-            </ol>
-          </li>
-          <li><a href="#a1.3">Элемент 1.3</a></li>
-        </ol>
-      </li>
-      <li><a href="#a2">Элемент 2</a></li>
-      <li class="has-children">
-        <a href="#a3">Элемент 3</a>
-        <ol>
-          <li><a href="#a3.1">Элемент 3.1</a></li>
-          <li><a href="#a3.2">Элемент 3.2</a></li>
-          <li><a href="#a3.3">Элемент 3.3</a></li>
-        </ol>
-      </li>
-      <li><a href="#a4">Элемент 4</a></li>
-      <li><a href="#a5">Элемент 5</a></li>
-    </ol>
-
-  </div>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eos.
-
-  <script>
-    var menu = new Menu({
-      elem: $('#menu')
-    });
-
-    $(menu).on("select", function(e) {
-      if (!e.value) return;
-      alert(e.value);
-    });
-  </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.css b/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.css
deleted file mode 100644
index 668bfb0d..00000000
--- a/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.menu::before {
-  content: '☞';
-  font-size: 16px;
-  float: left;
-}
-
-.menu.open::before {
-  content: '☟';
-}
-
-.menu a {
-  text-decoration: none;
-  color: black;
-  display: block;
-}
-
-.menu > a {
-  display: inline;
-}
-
-.menu a {
-  padding: 3px 5px;
-  white-space: nowrap;
-}
-
-li.active > a {
-  background: blue;
-  color: white;
-}
-
-.menu ol {
-  margin: 0;
-  padding: 3px 0;
-  list-style: none;
-  display: none;
-  background: #eee;
-  border: 1px solid black;
-  position: absolute;
-}
-
-.menu.open > ol {
-  display: block;
-  margin-left: 16px;
-}
-
-.menu li.has-children > a::after {
-  content: ' >';
-}
-
-.menu li.active > ol {
-  display: block;
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.js b/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.js
deleted file mode 100644
index 842c1822..00000000
--- a/archive/widget-tasks/9-hover-menu-onclick/solution.view/menu.js
+++ /dev/null
@@ -1,131 +0,0 @@
-function Menu(options) {
-  var elem = options.elem;
-  var self = this;
-
-  var activeLi;
-
-  elem.on('click', 'a.title', onTitleClick);
-
-  // item clicks are all inside ol
-  elem.on('click', 'ol a', onLiClick);
-
-  // I use "a" here instead of LI, because hover on LI also works if going over it's child container OL
-  // child container may have paddings etc, so the click may happen on that OL, outside of this item
-  elem.on('hoverintent', 'ol a', onLiHoverIntent);
-
-  // ----------------------
-
-  function onLiClick(e) {
-
-    close();
-
-    var li = $(e.currentTarget).closest('li');
-
-    $(self).triggerHandler({
-      type: 'select',
-      value: getLiValue(li)
-    });
-
-    return false;
-  }
-
-  function onTitleClick() {
-    if (elem.hasClass('open')) {
-      close();
-    } else {
-      open();
-    }
-  }
-
-  function onLiHoverIntent(e) {
-    var li = $(this).closest('li');
-
-    if (isActiveLi(li)) return;
-
-    activateLi(li);
-    openChildren();
-  }
-
-  // ----------------------
-
-  function isActiveLi(li) {
-    if (activeLi && activeLi[0] == li[0]) return true;
-    return false;
-  }
-
-
-  function close(argument) {
-
-    elem.removeClass('open');
-
-    if (activeLi) {
-      activeLi.parentsUntil(elem).andSelf().removeClass('active');
-      activeLi = null;
-    }
-
-    $(document).off('.menu-nested');
-  }
-
-  function getLiValue(li) {
-    if (!li.length) return null;
-    return li.children('a').attr('href').slice(2);
-  }
-
-  function open() {
-
-    elem.addClass('open');
-
-    // TODO: close menu on document click outside of it
-    $(document).on('click.menu-nested', function(e) {
-      if ($(e.target).closest(elem).length) return;
-      close();
-    });
-  }
-
-  function getParentLi(li) {
-    return li.parent().parent();
-  }
-
-  function activateLi(li) {
-
-    if (activeLi && getParentLi(li)[0] != activeLi[0]) { // if (new li is not child of activeLi)
-      // not a child item, then need to close currently active ones
-      // collapse parents of last active until container of new element
-      collapseActiveUntil(li);
-    }
-
-    activeLi = li;
-    activeLi.addClass("active");
-  }
-
-  function collapseActiveUntil(li) {
-
-    var el = activeLi;
-    for (;;) {
-      el.removeClass('active');
-      if (el[0].parentNode == li[0].parentNode) break;
-      el = getParentLi(el);
-    }
-
-  }
-
-  function openChildren() {
-    var subcontainer = activeLi.children('ol');
-    if (!subcontainer.length) return;
-
-    // show children
-
-    var left = activeLi.width(); // to the right of the parent 
-    var top = activeLi.position().top; // at same height as current parent
-
-    // lift it up, so that first subchild will be aligned with the parent
-    top -= subcontainer.children('li').position().top;
-    top -= subcontainer.prop('clientTop')
-
-    subcontainer.css({
-      left: left,
-      top: top
-    })
-  }
-
-}
\ No newline at end of file
diff --git a/archive/widget-tasks/9-hover-menu-onclick/task.md b/archive/widget-tasks/9-hover-menu-onclick/task.md
deleted file mode 100644
index 7a5698d5..00000000
--- a/archive/widget-tasks/9-hover-menu-onclick/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Вложенное меню с выпаданием по клику
-
-[importance 4]
-
-Создайте меню с выпаданием по клику и раскрытием внутренних пунктов при наведении.
-
-Демо:
-[iframe src="solution" height=200 border=1]
-
-При выборе -- событие `select` с выбранным значением.
-
-HTML/CSS -- на ваш вкус.
\ No newline at end of file
diff --git a/archive/widget-tasks/article.md b/archive/widget-tasks/article.md
deleted file mode 100644
index b203947e..00000000
--- a/archive/widget-tasks/article.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Еще практика! 
-
diff --git a/contributors.md b/contributors.md
new file mode 100644
index 00000000..c6b26c99
--- /dev/null
+++ b/contributors.md
@@ -0,0 +1,13 @@
+
+The file lists people who made significant contributions to the project:
+
+<ul>
+<li>Alexey Maximov @amaxcz (admin)</li>
+<li>Alexey Shisterov (tutorial)</li>
+<li>Anton Vernogor @smmurf (markup)</li>
+<li>Artem Beztsenny @bezart (design)</li>
+<li>Ilya Kantor @iliakan (tutorial, code)</li>
+<li>Yuri Tkachenko @tyv (markup)</li>
+</ul>
+
+The project exists for a long time, I might have missed someone. If you expect to find yourself in the list, but you're not -- please mail me at mk@javascript.ru.
diff --git a/figures.sketch b/figures.sketch
index 8d78406f..7bf104a3 100644
Binary files a/figures.sketch and b/figures.sketch differ
diff --git a/index.md b/index.md
deleted file mode 100644
index 91f11c38..00000000
--- a/index.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Дополнительные темы
-